sard 1.0.0-canary.0

package/dist/tabbar/Item.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { IconProps } from '../icon';
+import { BadgeProps } from '../badge';
+import { BaseProps } from '../base';
+export interface TabbarItemProps extends BaseProps {
+    icon?: ReactNode | ((active: boolean) => ReactNode);
+    iconProps?: IconProps | ((active: boolean) => IconProps);
+    color?: string;
+    activeColor?: string;
+    badge?: BadgeProps;
+    onClick?: (event: ITouchEvent) => void;
+    _innerKey?: number | string;
+    _activeKey?: number | string;
+}
+export declare const TabbarItem: import("react").MemoExoticComponent<(props: TabbarItemProps) => import("react/jsx-runtime").JSX.Element>;
+export default TabbarItem;

package/dist/tabbar/Item.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import { Badge } from '../badge';
+import { useBem } from '../use';
+import { filterNullish, isFunction } from '../utils';
+export const TabbarItem = memo((props) => {
+    const { className, style, children, icon, iconProps, color, activeColor, badge, onClick, _innerKey, _activeKey, ...restProps } = props;
+    const [bem] = useBem('tabbar');
+    const active = _innerKey === _activeKey;
+    return (_jsxs(View, { ...restProps, className: classNames(bem.e('item'), bem.em('item', 'active', active), className), style: {
+            ...style,
+            ...filterNullish({
+                color: active ? activeColor : color,
+            }),
+        }, onClick: onClick, children: [_jsxs(View, { className: classNames(bem.e('icon-wrapper')), children: [isFunction(icon) ? (icon(active)) : (_jsx(Icon, { ...(isFunction(iconProps) ? iconProps(active) : iconProps), className: classNames(bem.e('icon'), bem.em('icon', 'active', active)), style: filterNullish({
+                            color: active ? activeColor : color,
+                        }) })), badge && _jsx(Badge, { ...badge, fixed: true })] }), _jsx(View, { className: classNames(bem.e('text'), bem.em('text', 'active', active)), style: filterNullish({
+                    color: active ? activeColor : color,
+                }), children: children })] }));
+});
+export default TabbarItem;

package/dist/tabbar/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement, FC } from 'react';
+import { TabbarItem } from './Item';
+import { BaseProps } from '../base';
+export * from './Item';
+export interface TabbarProps extends Omit<BaseProps, 'children'> {
+    children?: ReactElement | ReactElement[];
+    activeKey?: number | string;
+    defaultActiveKey?: number | string;
+    onChange?: (key: number | string) => void;
+    color?: string;
+    activeColor?: string;
+}
+export interface TabbarFC extends FC<TabbarProps> {
+    Item: typeof TabbarItem;
+}
+export declare const Tabbar: TabbarFC;
+export default Tabbar;

package/dist/tabbar/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { pickNonNullish } from '../utils';
+import { useBem, useControllableValue } from '../use';
+import { TabbarItem } from './Item';
+import Halfline from '../halfline';
+export * from './Item';
+export const Tabbar = (props) => {
+    const { className, style, children, activeKey, defaultActiveKey, onChange, color, activeColor, ...restProps } = props;
+    const [bem] = useBem('tabbar');
+    const [innerActiveKey, setInnerActiveKey] = useControllableValue({
+        value: activeKey,
+        defaultValue: defaultActiveKey,
+        trigger: onChange,
+    });
+    const handleItemClick = (key, element, event) => {
+        setInnerActiveKey(key);
+        element.props?.onClick?.(event);
+    };
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: [Children.map(children, (element, index) => {
+                const innerKey = element.key ?? index;
+                return cloneElement(element, {
+                    ...pickNonNullish({ color, activeColor }, element.props),
+                    onClick: (event) => handleItemClick(innerKey, element, event),
+                    _innerKey: innerKey,
+                    _activeKey: innerActiveKey,
+                });
+            }), _jsx(Halfline, { direction: "top" })] }));
+};
+Tabbar.Item = TabbarItem;
+export default Tabbar;

package/dist/tabbar/index.scss

@@ -0,0 +1,89 @@
+@import '../style/base.scss';
+// #variables
+$sar-tabbar-height: 50px !default;
+$sar-tabbar-bg-color: $sar-emphasis-bg-color !default;
+$sar-tabbar-color: $sar-secondary-color !default;
+
+$sar-tabbar-item-ative-color: $sar-primary !default;
+$sar-tabbar-item-icon-margin-bottom: 4px !default;
+$sar-tabbar-item-icon-font-size: 20px !default;
+$sar-tabbar-item-text-font-size: $sar-text-sm !default;
+
+// 暗黑模式
+$sar-tabbar-bg-dark-color: $sar-dark-emphasis-bg-color !default;
+$sar-tabbar-dark-color: $sar-dark-secondary-color !default;
+// #endvariables
+
+@include bem(tabbar) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: stretch;
+    height: $sar-tabbar-height;
+    color: $sar-tabbar-color;
+    background-color: $sar-tabbar-bg-color;
+  }
+
+  @include e(item) {
+    @include universal;
+    z-index: 3;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+
+    @include ifweb {
+      cursor: pointer;
+    }
+  }
+
+  @include e(icon-wrapper) {
+    @include universal;
+    margin-bottom: $sar-tabbar-item-icon-margin-bottom;
+  }
+
+  @include e(icon) {
+    font-size: $sar-tabbar-item-icon-font-size;
+    line-height: $sar-tabbar-item-icon-font-size * $sar-leading-none;
+    color: $sar-tabbar-color;
+
+    @include m(active) {
+      color: $sar-tabbar-item-ative-color;
+    }
+  }
+
+  @include e(text) {
+    @include universal;
+    font-size: $sar-tabbar-item-text-font-size;
+    line-height: $sar-tabbar-item-text-font-size * $sar-leading-tight;
+    color: $sar-tabbar-color;
+
+    @include m(active) {
+      color: $sar-tabbar-item-ative-color;
+    }
+  }
+}
+
+@include theme(dark) {
+  @include bem(tabbar) {
+    @include b() {
+      color: $sar-tabbar-dark-color;
+      background-color: $sar-tabbar-bg-dark-color;
+    }
+
+    @include e(icon) {
+      color: $sar-tabbar-dark-color;
+
+      @include m(active) {
+        color: $sar-tabbar-item-ative-color;
+      }
+    }
+
+    @include e(text) {
+      color: $sar-tabbar-dark-color;
+
+      @include m(active) {
+        color: $sar-tabbar-item-ative-color;
+      }
+    }
+  }
+}

package/dist/tabs/Tab.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../base';
+export interface TabsTabProps extends Omit<BaseProps, 'children'> {
+    children?: ReactNode | ((active: boolean) => ReactNode);
+    disabled?: boolean;
+    _onSelect?: (key: string | number) => void;
+    _active?: boolean;
+    _scrollable?: boolean;
+    _key?: string | number;
+}
+export declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<any>>;
+export default TabsTab;

package/dist/tabs/Tab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem, useEvent } from '../use';
+import { isFunction } from '../utils';
+export const TabsTab = forwardRef((props, ref) => {
+    const { className, style, children, disabled, _onSelect, _active = false, _scrollable, _key, ...restProps } = props;
+    const [bem] = useBem('tabs');
+    const handleClick = useEvent(() => {
+        if (!disabled && !_active) {
+            _onSelect?.(_key);
+        }
+    });
+    return (_jsx(View, { ...restProps, className: classNames(bem.e('tab'), bem.em('tab', 'active', _active), bem.em('tab', 'scrollable', _scrollable), bem.em('tab', 'disabled', disabled), className), style: style, onClick: handleClick, ref: ref, children: isFunction(children) ? children(_active) : children }));
+});
+export default TabsTab;

package/dist/tabs/index.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, ReactElement, ReactNode, FC } from 'react';
+import { BaseProps } from '../base';
+import { TabsTab } from './Tab';
+export interface TabsProps extends Omit<BaseProps, 'children'> {
+    children?: ReactElement | ReactElement[];
+    defaultActiveKey?: number | string;
+    activeKey?: number | string;
+    onChange?: (key: number | string) => void;
+    scrollable?: boolean;
+    activeStyle?: CSSProperties;
+    activeClass?: string;
+    inactiveStyle?: CSSProperties;
+    inactiveClass?: string;
+    showLine?: boolean;
+    line?: ReactNode;
+    lineStyle?: CSSProperties;
+    lineClass?: string;
+}
+export interface TabsFC extends FC<TabsProps> {
+    Tab: typeof TabsTab;
+}
+export declare const Tabs: TabsFC;
+export default Tabs;

package/dist/tabs/index.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useEffect, useRef, useState, useMemo, } from 'react';
+import classNames from 'classnames';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useSelectorId, useBem, useControllableValue, useSetTimeout, useEvent, } from '../use';
+import { getRectByElement, getScrollIntoViewValue, isAndroid, isNumber, isRN, } from '../utils';
+import { TabsTab } from './Tab';
+import { Animated } from '../animated';
+import { ScrollView } from '../scroll-view';
+const duration = 300;
+export const Tabs = (props) => {
+    const { className, style, children, defaultActiveKey, activeKey, onChange, scrollable, activeStyle, activeClass, inactiveStyle, inactiveClass, showLine = true, line, lineStyle, lineClass, ...restProps } = props;
+    const [bem] = useBem('tabs');
+    const [innerActiveKey, setInnerActiveKey] = useControllableValue({
+        value: activeKey,
+        defaultValue: defaultActiveKey,
+        trigger: onChange,
+        postValue(value) {
+            return isNumber(value) ? String(value) : value;
+        },
+    });
+    const [setLineStyleLater] = useSetTimeout(() => {
+        setTabStyle(innerActiveKey, true);
+    }, 150);
+    const isSettingTabStyleByKey = useRef(false);
+    const firstTimer = useRef();
+    useEffect(() => {
+        if (showLine || scrollable) {
+            if (isAndroid && firstTimer.current === undefined) {
+                firstTimer.current = setTimeout(() => {
+                    firstTimer.current = null;
+                    setTabStyle(innerActiveKey);
+                }, 400);
+            }
+            else {
+                setTabStyle(innerActiveKey);
+            }
+            isSettingTabStyleByKey.current = true;
+        }
+    }, [innerActiveKey]);
+    useEffect(() => {
+        if (showLine && !isSettingTabStyleByKey.current) {
+            isSettingTabStyleByKey.current = false;
+            setLineStyleLater();
+        }
+    }, [children]);
+    const contextId = useSelectorId();
+    const scrollRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const tabKeyRefMap = useRef({});
+    const notSetLineStyleYet = useRef(true);
+    const stopScroll = useRef();
+    const scrollLeftRef = useRef(0);
+    const handleScroll = useEvent((event) => {
+        scrollLeftRef.current = event.x;
+    });
+    const [translateLater, cancelTranslate, isWaitingToTranslate] = useSetTimeout((left) => {
+        stopScroll.current = undefined;
+        scrollRef.current?.setScrollEnabled(true);
+        scrollLeftRef.current = left;
+        clearWrapperStyle();
+    }, duration);
+    const [wrapperStyle, setWrapperStyle] = useState({
+        offset: 0,
+        duration: 0,
+        paddingRight: 0,
+    });
+    const [lineLeft, setLineLeft] = useState();
+    const clearWrapperStyle = () => {
+        setWrapperStyle({
+            offset: 0,
+            duration: 0,
+            paddingRight: 0,
+        });
+    };
+    async function getUrgentScrollLeft() {
+        const wrapperRect = await getRectByElement(wrapperRef.current, contextId);
+        const scrollRect = await getRectByElement(scrollRef.current?.getElement(), contextId);
+        return scrollRect.left - wrapperRect.left;
+    }
+    const setTabStyle = async (key, onlyLine) => {
+        const tabElement = tabKeyRefMap.current[key];
+        if (!tabElement) {
+            return;
+        }
+        await stopScroll.current?.();
+        let scrollRect = await getRectByElement(scrollRef.current?.getElement(), contextId);
+        // 有些设备可能出现首次获取不到的情况
+        if (!scrollRect || scrollRect.width === 0) {
+            scrollRect = await getRectByElement(scrollRef.current?.getElement(), contextId);
+        }
+        // 组件或其父组件被隐藏导致位置尺寸值为0
+        if (!scrollRect || scrollRect.width === 0) {
+            return;
+        }
+        let wrapperRect;
+        if (scrollable) {
+            wrapperRect = await getRectByElement(wrapperRef.current, contextId);
+        }
+        else {
+            // 优化
+            wrapperRect = scrollRect;
+        }
+        const tabRect = await getRectByElement(tabElement, contextId);
+        // 确保要处理的值存在
+        if (!wrapperRect || !tabRect) {
+            return;
+        }
+        // line
+        if (showLine) {
+            const lineLeft = tabRect.left - wrapperRect.left + tabRect.width / 2;
+            setLineLeft(lineLeft);
+            if (onlyLine) {
+                return;
+            }
+        }
+        // scroll
+        {
+            let wrapperLeft = wrapperRect.left;
+            if (isRN) {
+                wrapperLeft -= wrapperCurrentValue.current;
+            }
+            const originalScrollLeft = scrollRect.left - wrapperLeft;
+            const scrollLeft = getScrollIntoViewValue(scrollRect.width, originalScrollLeft, tabRect.width, tabRect.left - wrapperLeft, {
+                placement: 'center',
+                limited: true,
+                pageHeight: wrapperRect.width,
+            });
+            const offset = originalScrollLeft - scrollLeft;
+            if (Math.abs(offset) < 1) {
+                return;
+            }
+            scrollRef.current?.setScrollEnabled(false);
+            setWrapperStyle({
+                offset,
+                duration,
+                paddingRight: 1000,
+            });
+            if (!isRN) {
+                translateLater(scrollLeft);
+                stopScroll.current = async () => {
+                    if (isWaitingToTranslate()) {
+                        cancelTranslate();
+                        const urgentScrollLeft = await getUrgentScrollLeft();
+                        scrollLeftRef.current = urgentScrollLeft;
+                        clearWrapperStyle();
+                    }
+                };
+            }
+            if (isRN) {
+                stopScroll.current = async () => {
+                    wrapperAnim.stopAnimation();
+                };
+                wrapperAnim.setValue(wrapperCurrentValue.current);
+                animateWrapperTranslateX(offset + wrapperCurrentValue.current, ({ finished }) => {
+                    if (finished) {
+                        stopScroll.current = undefined;
+                        wrapperAnim.setValue(0);
+                        scrollRef.current?.scrollLeft(scrollLeft);
+                    }
+                    else {
+                        scrollRef.current?.scrollLeft(scrollLeft + offset - wrapperCurrentValue.current);
+                        wrapperAnim.setValue(0);
+                    }
+                    scrollRef.current?.setScrollEnabled(true);
+                    clearWrapperStyle();
+                });
+            }
+        }
+    };
+    const handleTabSelect = (key) => {
+        setInnerActiveKey(key);
+    };
+    // Animated >>>
+    const lineAnim = useMemo(() => new Animated.Value(0), []);
+    const animateLineTranslateX = (to) => {
+        Animated.timing(lineAnim, {
+            toValue: to,
+            duration: notSetLineStyleYet.current ? 0 : duration,
+            useNativeDriver: true,
+        }).start();
+    };
+    useEffect(() => {
+        if (lineLeft !== undefined) {
+            animateLineTranslateX(lineLeft);
+            notSetLineStyleYet.current = false;
+        }
+    }, [lineLeft]);
+    const wrapperAnim = useMemo(() => new Animated.Value(0), []);
+    const animateWrapperTranslateX = (to, callback) => {
+        Animated.timing(wrapperAnim, {
+            toValue: to,
+            duration,
+            useNativeDriver: true,
+        }).start(callback);
+    };
+    const wrapperCurrentValue = useRef(0);
+    useEffect(() => {
+        wrapperAnim.addListener(({ value }) => {
+            wrapperCurrentValue.current = value;
+        });
+        return () => {
+            wrapperAnim.stopAnimation();
+            wrapperAnim.removeAllListeners();
+            lineAnim.stopAnimation();
+        };
+    }, []);
+    // <<< Animated
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(View, { ...restProps, className: classNames(bem.b(), className), style: style, children: _jsx(ScrollView, { contextId: contextId, ref: scrollRef, scrollX: !!scrollable, className: classNames(bem.e('scroll')), showScrollbar: false, scrollLeft: scrollLeftRef.current, onScroll: handleScroll, children: _jsx(View, { className: bem.e('container'), children: _jsxs(Animated.View, { className: classNames(bem.e('wrapper')), style: {
+                            // 确保有足够的空间可以滚动
+                            paddingRight: wrapperStyle.paddingRight,
+                            ...(isRN
+                                ? {
+                                    transform: [
+                                        {
+                                            translateX: wrapperAnim,
+                                        },
+                                    ],
+                                }
+                                : {
+                                    transform: `translate3d(${wrapperStyle.offset}px,0,0)`,
+                                    transition: `transform ${wrapperStyle.duration}ms ease-out 0s`,
+                                }),
+                        }, ref: wrapperRef, children: [Children.map(children, (element, index) => {
+                                const key = element.key ?? String(index);
+                                const active = key === innerActiveKey;
+                                return cloneElement(element, {
+                                    _key: key,
+                                    _active: active,
+                                    _scrollable: scrollable,
+                                    _onSelect: handleTabSelect,
+                                    className: classNames(element.props.className, active ? activeClass : inactiveClass),
+                                    style: {
+                                        ...element.props.style,
+                                        ...(active ? activeStyle : inactiveStyle),
+                                    },
+                                    ref: (element) => {
+                                        tabKeyRefMap.current[key] = element;
+                                    },
+                                });
+                            }), showLine && (_jsx(Animated.View, { className: classNames(bem.e('line'), lineClass), style: {
+                                    ...lineStyle,
+                                    opacity: lineLeft === undefined ? 0 : 1,
+                                    ...(isRN
+                                        ? {
+                                            transform: [
+                                                { translateX: lineAnim },
+                                                { translateX: -20 },
+                                            ],
+                                        }
+                                        : {
+                                            transition: `transform ${notSetLineStyleYet.current ? 0 : duration}ms`,
+                                            transform: `translate3d(${lineLeft || 0}px,0,0) translateX(-20px)`,
+                                        }),
+                                }, children: line }))] }) }) }) }) }));
+};
+Tabs.Tab = TabsTab;
+export default Tabs;

package/dist/tabs/index.scss

@@ -0,0 +1,113 @@
+@import '../style/base.scss';
+// #variables
+$sar-tabs-tab-height: 44px !default;
+$sar-tabs-tab-font-size: $sar-text-base !default;
+$sar-tabs-tab-line-height: $sar-tabs-tab-font-size * $sar-leading-snug !default;
+$sar-tabs-tab-color: $sar-secondary-color !default;
+$sar-tabs-tab-active-color: $sar-emphasis-color !default;
+
+$sar-tabs-tab-padding-x: 16px !default;
+
+$sar-tabs-line-width: 40px !default;
+$sar-tabs-line-height: 3px !default;
+$sar-tabs-line-bg-color: $sar-primary !default;
+
+// 暗黑模式
+$sar-tabs-tab-dark-color: $sar-dark-secondary-color !default;
+$sar-tabs-tab-active-dark-color: $sar-dark-emphasis-color !default;
+// #endvariables
+
+@include bem(tabs) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+  }
+
+  @include e(scroll) {
+    @include universal;
+    width: 100%;
+    flex: 1;
+  }
+
+  @include e(container) {
+    @include universal;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  @include e(wrapper) {
+    @include universal;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    min-width: 100%;
+    flex: none;
+  }
+
+  @include e(tab) {
+    @include universal;
+    z-index: 2;
+    flex-direction: row;
+    flex: 1;
+    height: $sar-tabs-tab-height;
+    justify-content: center;
+    align-items: center;
+    padding: 0 $sar-tabs-tab-padding-x;
+    font-size: $sar-tabs-tab-font-size;
+    line-height: $sar-tabs-tab-line-height;
+    color: $sar-tabs-tab-color;
+    @include ifweb {
+      white-space: nowrap;
+    }
+
+    @include ifweb {
+      cursor: pointer;
+    }
+
+    @include m(active) {
+      font-weight: $sar-font-bold;
+      color: $sar-tabs-tab-active-color;
+    }
+
+    @include m(scrollable) {
+      flex: 0;
+    }
+
+    @include m(disabled) {
+      color: $sar-disabled-color;
+      @include ifweb {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(line) {
+    @include universal;
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    width: $sar-tabs-line-width;
+    height: $sar-tabs-line-height;
+    background-color: $sar-tabs-line-bg-color;
+    pointer-events: none;
+  }
+}
+
+@include theme(dark) {
+  @include bem(tabs) {
+    @include e(tab) {
+      color: $sar-tabs-tab-dark-color;
+
+      @include m(active) {
+        color: $sar-tabs-tab-active-dark-color;
+      }
+
+      @include m(disabled) {
+        color: $sar-dark-disabled-color;
+      }
+    }
+  }
+}

package/dist/tag/index.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { ITouchEvent } from '@tarojs/components';
+import { BaseProps } from '../base';
+export interface TagProps extends BaseProps {
+    theme?: 'default' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger';
+    plain?: boolean;
+    round?: boolean;
+    mark?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    color?: string;
+    textColor?: string;
+    closable?: boolean;
+    onClose?: () => void;
+    onClick?: (event: ITouchEvent) => void;
+}
+export declare const Tag: FC<TagProps>;
+export default Tag;

package/dist/tag/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from '@tarojs/components';
+import classNames from 'classnames';
+import { Icon } from '../icon';
+import { useBem } from '../use';
+import { filterNullish } from '../utils';
+export const Tag = (props) => {
+    const { className, style, children, theme = 'default', plain, round, mark, size = 'medium', color, textColor, closable, onClose, ...restProps } = props;
+    const [bem] = useBem('tag');
+    return (_jsxs(View, { ...restProps, className: classNames(bem.b(), bem.m(theme), bem.m(`${theme}-plain`, plain), bem.m(size), bem.m('round', round), bem.m('mark', mark), className), style: {
+            ...style,
+            ...filterNullish({
+                backgroundColor: !plain ? color : null,
+                color: plain ? color : textColor,
+                borderColor: plain ? color : null,
+            }),
+        }, children: [children, closable && (_jsx(Icon, { name: "close", className: classNames(bem.e('close'), bem.em('close', theme), bem.em('close', `${theme}-plain`, plain)), style: filterNullish({
+                    color: plain ? color : textColor,
+                }), onClick: onClose }))] }));
+};
+export default Tag;