react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/components/nav-bar/NavBar.js

@@ -3,11 +3,13 @@ import React, { useCallback, useState } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { ArrowLeft } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
-import { createHairlineBorderBottom } from '../../utils/hairline';
-import { isRenderable, isText } from '../../utils/validate';
+import { useLocale } from '../config-provider/useLocale';
+import { useDirection } from '../config-provider/useDirection';
+import { createHairlineView } from '../../utils/hairline';
+import { isRenderable, isText, renderTextOrNode } from '../../utils';
 import { SafeAreaView } from '../safe-area-view';
 import { useNavBarTokens } from './tokens';
-const NavBarBase = props => {
+const NavBarBaseImpl = props => {
   const {
     tokensOverride,
     title,
@@ -35,6 +37,8 @@ const NavBarBase = props => {
     style,
     ...rest
   } = props;
+  const locale = useLocale();
+  const dir = useDirection();
   const tokens = useNavBarTokens(tokensOverride);
   const leftArrow = leftArrowProp ?? tokens.defaults.leftArrow;
   const fixed = fixedProp ?? tokens.defaults.fixed;
@@ -54,14 +58,12 @@ const NavBarBase = props => {
   }, [enablePlaceholder]);
   const resolvedColor = tintColor ?? tokens.colors.text;
   const sideColor = tintColor ?? tokens.colors.icon;
-  const leftAccessibilityLabel = isText(leftText) ? String(leftText) : '返回';
-  const rightAccessibilityLabel = isText(rightText) ? String(rightText) : '操作';
   const leftPress = useAriaPress({
     disabled: !handlePressLeft,
     onPress: handlePressLeft,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: leftAccessibilityLabel
+      accessibilityLabel: isText(leftText) ? `${leftText}` : locale?.vanNavBar?.back ?? 'Back'
     }
   });
   const rightPress = useAriaPress({
@@ -69,63 +71,40 @@ const NavBarBase = props => {
     onPress: handlePressRight,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: rightAccessibilityLabel
+      accessibilityLabel: isText(rightText) ? `${rightText}` : locale?.vanNavBar?.action ?? 'Actions'
     }
   });
-  const renderLeft = () => {
-    const arrowNode = leftArrow === true ? /*#__PURE__*/React.createElement(ArrowLeft, {
+  const renderSide = side => {
+    const isLeft = side === 'left';
+    const sideText = isLeft ? leftText : rightText;
+    const sideIcon = isLeft ? leftIcon : rightIcon;
+    const press = isLeft ? leftPress : rightPress;
+    const handler = isLeft ? handlePressLeft : handlePressRight;
+    const arrowNode = isLeft ? leftArrow === true ? /*#__PURE__*/React.createElement(ArrowLeft, {
       size: 18,
       fill: sideColor,
-      color: sideColor
-    }) : isRenderable(leftArrow) && leftArrow;
-    const hasAction = !!handlePressLeft || isRenderable(arrowNode) || isRenderable(leftText) || isRenderable(leftIcon);
-    if (!hasAction) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: tokens.layout.sidePlaceholder
-      });
-    }
-    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, leftIcon, isRenderable(leftText) ? isText(leftText) ? /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      style: [tokens.layout.sideText, {
-        color: sideColor
-      }]
-    }, leftText) : leftText : null);
-    if (!handlePressLeft) {
-      return /*#__PURE__*/React.createElement(View, {
-        testID: "rv-navbar-left",
-        style: [tokens.layout.side, sideStyle]
-      }, content);
-    }
-    return /*#__PURE__*/React.createElement(Pressable, _extends({
-      hitSlop: {
-        top: 8,
-        right: 8,
-        bottom: 8,
-        left: 8
-      },
-      testID: "rv-navbar-left",
-      style: [tokens.layout.side, sideStyle]
-    }, leftPress.interactionProps), content);
-  };
-  const renderRight = () => {
-    const hasAction = !!handlePressRight || isRenderable(rightText) || isRenderable(rightIcon);
-    if (!hasAction) {
-      return /*#__PURE__*/React.createElement(View, {
-        style: tokens.layout.sidePlaceholder
-      });
-    }
-    const content = /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(rightText) ? isText(rightText) ? /*#__PURE__*/React.createElement(Text, {
+      color: sideColor,
+      style: dir === 'rtl' ? {
+        transform: [{
+          scaleX: -1
+        }]
+      } : undefined
+    }) : isRenderable(leftArrow) && leftArrow : null;
+    const hasAction = !!handler || isRenderable(arrowNode) || isRenderable(sideText) || isRenderable(sideIcon);
+    if (!hasAction) return /*#__PURE__*/React.createElement(View, {
+      style: tokens.layout.sidePlaceholder
+    });
+    const content = /*#__PURE__*/React.createElement(React.Fragment, null, arrowNode, sideIcon, isRenderable(sideText) ? isText(sideText) ? /*#__PURE__*/React.createElement(Text, {
       numberOfLines: 1,
       style: [tokens.layout.sideText, {
         color: sideColor
       }]
-    }, rightText) : rightText : null, rightIcon);
-    if (!handlePressRight) {
-      return /*#__PURE__*/React.createElement(View, {
-        testID: "rv-navbar-right",
-        style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
-      }, content);
-    }
+    }, sideText) : sideText : null);
+    const sideStyles = [tokens.layout.side, !isLeft && tokens.layout.rightAlign, sideStyle];
+    if (!handler) return /*#__PURE__*/React.createElement(View, {
+      testID: `rv-navbar-${side}`,
+      style: sideStyles
+    }, content);
     return /*#__PURE__*/React.createElement(Pressable, _extends({
       hitSlop: {
         top: 8,
@@ -133,51 +112,57 @@ const NavBarBase = props => {
         bottom: 8,
         left: 8
       },
-      testID: "rv-navbar-right",
-      style: [tokens.layout.side, tokens.layout.rightAlign, sideStyle]
-    }, rightPress.interactionProps), content);
+      testID: `rv-navbar-${side}`,
+      style: sideStyles
+    }, press.interactionProps), content);
   };
   const centerContent = isRenderable(children) ? children : /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.titleWrapper
-  }, isRenderable(title) ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.title, {
-      color: resolvedColor,
-      fontSize: tokens.typography.titleSize,
-      fontWeight: tokens.typography.titleWeight
-    }, titleStyle],
+  }, isRenderable(title) && renderTextOrNode(title, [tokens.layout.title, {
+    color: resolvedColor,
+    fontSize: tokens.typography.titleSize,
+    fontWeight: tokens.typography.titleWeight
+  }, titleStyle], {
     numberOfLines: 1
-  }, title) : title : null, isRenderable(description) ? isText(description) ? /*#__PURE__*/React.createElement(Text, {
-    style: [tokens.layout.description, {
-      color: tintColor ?? tokens.colors.description,
-      fontSize: tokens.typography.descriptionSize
-    }, descriptionStyle],
+  }), isRenderable(description) && renderTextOrNode(description, [tokens.layout.description, {
+    color: tintColor ?? tokens.colors.description,
+    fontSize: tokens.typography.descriptionSize
+  }, descriptionStyle], {
     numberOfLines: 1
-  }, description) : description : null);
-  const bar = /*#__PURE__*/React.createElement(View, {
+  }));
+  const navbarBar = /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.bar, {
       backgroundColor: background
-    }, border ? createHairlineBorderBottom(tokens.colors.border) : null],
+    }],
     onLayout: safeAreaInsetTop ? undefined : handleLayout
-  }, renderLeft(), /*#__PURE__*/React.createElement(View, {
+  }, renderSide('left'), /*#__PURE__*/React.createElement(View, {
     style: tokens.layout.center
-  }, centerContent), renderRight());
-  const wrapped = safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
+  }, centerContent), renderSide('right'), border && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.border,
+      left: 0,
+      right: 0
+    })
+  }));
+  const wrappedBar = safeAreaInsetTop ? /*#__PURE__*/React.createElement(SafeAreaView, {
     onLayout: handleLayout,
     style: {
       backgroundColor: background
     }
-  }, bar) : bar;
-  const navContent = /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
-      zIndex
-    }], style]
-  }), wrapped);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder ? /*#__PURE__*/React.createElement(View, {
+  }, navbarBar) : navbarBar;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {
     testID: "rv-navbar-placeholder",
     style: {
       height
     }
-  }) : null, navContent);
+  }), /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    accessibilityRole: 'navigation',
+    style: [tokens.layout.container, fixed && [tokens.layout.fixed, {
+      zIndex
+    }], style]
+  }), wrappedBar));
 };
+const NavBarBase = /*#__PURE__*/React.memo(NavBarBaseImpl);
 NavBarBase.displayName = 'NavBar';
 export default NavBarBase;

package/dist/es/components/nav-bar/tokens.js

@@ -1,11 +1,9 @@
-import { Platform } from 'react-native';
 import { createComponentTokensHook } from '../../design-system';
 export const createNavBarTokens = ({
   palette,
   spacing,
   fontSize
 }) => {
-  const fixedPosition = Platform.OS === 'web' ? 'fixed' : 'absolute';
   return {
     defaults: {
       fixed: false,
@@ -57,7 +55,7 @@ export const createNavBarTokens = ({
         includeFontPadding: false
       },
       fixed: {
-        position: fixedPosition,
+        position: 'absolute',
         top: 0,
         left: 0,
         right: 0

package/dist/es/components/notice-bar/NoticeBar.js

@@ -3,19 +3,21 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Animated, Easing, Pressable, StyleSheet, Text, View, Platform } from 'react-native';
 import { Arrow, Close } from 'react-native-system-icon';
 import { useAriaPress } from '../../hooks';
+import { useLocale } from '../config-provider/useLocale';
+import { useDirection } from '../config-provider/useDirection';
 import { parseNumber } from '../../utils/number';
 import { isRenderable, isText } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { useNoticeBarTokens } from './tokens';
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const IS_WEB = Platform.OS === 'web';
 if (IS_WEB) {
   const globalObj = typeof globalThis !== 'undefined' ? globalThis : window;
-  if (globalObj.global === undefined) {
-    globalObj.global = globalObj;
-  }
+  if (globalObj.global === undefined) globalObj.global = globalObj;
 }
-export const NoticeBar = props => {
+const NoticeBarImpl = props => {
   const {
     text,
     children,
@@ -40,6 +42,9 @@ export const NoticeBar = props => {
     style,
     ...rest
   } = props;
+  const locale = useLocale();
+  const layoutDir = useDirection();
+  const reducedMotion = useReducedMotion();
   const tokens = useNoticeBarTokens(tokensOverride);
   const resolvedColor = color ?? tokens.colors.text;
   const resolvedBackground = background ?? tokens.colors.background;
@@ -65,7 +70,7 @@ export const NoticeBar = props => {
     if (childArray.length) return childArray;
     return text !== undefined ? [text] : [];
   }, [children, isVertical, items, text]);
-  const hasVerticalLoop = isVertical && verticalItems.length > 1;
+  const hasVerticalLoop = !reducedMotion && isVertical && verticalItems.length > 1;
   const verticalTrackItems = useMemo(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
   const verticalTranslateY = useRef(new Animated.Value(0)).current;
   const [itemHeight, setItemHeight] = useState(0);
@@ -75,16 +80,20 @@ export const NoticeBar = props => {
   const setContainerWidthSafe = useCallback(next => {
     setContainerWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
   }, []);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onReplayRef = useRef(onReplay);
+  onReplayRef.current = onReplay;
   const handleClose = useCallback(() => {
     setVisible(false);
-    onClose?.();
-  }, [onClose]);
+    onCloseRef.current?.();
+  }, []);
   const closePress = useAriaPress({
     disabled: mode !== 'closeable' || !visible,
     onPress: handleClose,
     extraProps: {
       accessibilityRole: 'button',
-      accessibilityLabel: '关闭'
+      accessibilityLabel: locale?.vanNoticeBar?.close ?? 'Close'
     }
   });
   const barPress = useAriaPress({
@@ -94,7 +103,7 @@ export const NoticeBar = props => {
       accessibilityRole: 'button'
     } : undefined
   });
-  const rightNode = useMemo(() => mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
+  const rightNode = mode === 'closeable' ? /*#__PURE__*/React.createElement(Pressable, _extends({
     hitSlop: 8
   }, closePress.interactionProps), /*#__PURE__*/React.createElement(Close, {
     size: 16,
@@ -104,42 +113,36 @@ export const NoticeBar = props => {
     size: 16,
     fill: resolvedColor,
     color: resolvedColor
-  }) : rightIcon || null, [closePress.interactionProps, mode, resolvedColor, rightIcon]);
+  }) : rightIcon || null;
   const hasLeft = isRenderable(leftIcon);
   const hasRight = Boolean(rightNode);
   const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
-  const shouldScroll = !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
+  const shouldScroll = !reducedMotion && !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
   useEffect(() => {
-    if (!visible) {
-      translateX.stopAnimation();
-      return;
-    }
-    if (isVertical) {
+    if (!visible || isVertical) {
       translateX.stopAnimation();
       return;
     }
-    if (!shouldScroll || contentWidth === 0 || containerWidth === 0) {
-      translateX.setValue(0);
-      return;
-    }
-    if (resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
+    if (!shouldScroll || contentWidth === 0 || containerWidth === 0 || resolvedSpeed <= 0 || !Number.isFinite(resolvedSpeed)) {
       translateX.setValue(0);
       return;
     }
     let cancelled = false;
     const duration = (contentWidth + containerWidth) / resolvedSpeed * 1000;
+    const rtlSign = layoutDir === 'rtl' ? -1 : 1;
     const run = initial => {
-      translateX.setValue(initial ? 0 : containerWidth);
+      translateX.setValue(initial ? 0 : rtlSign * containerWidth);
       Animated.sequence([Animated.delay(resolvedDelay * 1000), Animated.timing(translateX, {
-        toValue: -contentWidth,
+        toValue: -rtlSign * contentWidth,
         duration,
         easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled
+        useNativeDriver: nativeDriverEnabled,
+        isInteraction: false
       })]).start(({
         finished
       }) => {
         if (finished && !cancelled) {
-          onReplay?.();
+          onReplayRef.current?.();
           run(false);
         }
       });
@@ -149,7 +152,7 @@ export const NoticeBar = props => {
       cancelled = true;
       translateX.stopAnimation();
     };
-  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, onReplay, isVertical]);
+  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, isVertical, layoutDir]);
   useEffect(() => {
     if (!visible) {
       verticalTranslateY.stopAnimation();
@@ -165,13 +168,15 @@ export const NoticeBar = props => {
         toValue: -itemHeight * i,
         duration: resolvedVerticalDuration,
         easing: Easing.linear,
-        useNativeDriver: nativeDriverEnabled
+        useNativeDriver: nativeDriverEnabled,
+        isInteraction: false
       }));
     }
     steps.push(Animated.timing(verticalTranslateY, {
       toValue: 0,
       duration: 0,
-      useNativeDriver: nativeDriverEnabled
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
     }));
     const loopAnimation = Animated.loop(Animated.sequence(steps));
     loopAnimation.start();
@@ -187,28 +192,22 @@ export const NoticeBar = props => {
   }, []);
   const verticalContentNode = useMemo(() => {
     if (!isVertical || verticalTrackItems.length === 0) return null;
-    if (!hasVerticalLoop) {
-      const single = verticalTrackItems[0];
-      if (isText(single)) {
-        return /*#__PURE__*/React.createElement(Text, _extends({
-          onLayout: textOnLayout,
-          style: [styles.text, {
-            color: resolvedColor,
-            fontSize: tokens.typography.fontSize
-          }],
-          numberOfLines: 1,
-          ellipsizeMode: "tail"
-        }, restTextProps), single);
-      }
-      return single;
-    }
+    if (!hasVerticalLoop) return renderTextOrNode(verticalTrackItems[0], [S.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }], {
+      numberOfLines: 1,
+      ...restTextProps
+    });
     return /*#__PURE__*/React.createElement(View, {
-      style: [styles.verticalViewport, itemHeight ? {
+      style: [S.vViewport, itemHeight ? {
         height: itemHeight
       } : undefined],
       pointerEvents: "none"
     }, /*#__PURE__*/React.createElement(Animated.View, {
-      style: [styles.verticalTrack, {
+      renderToHardwareTextureAndroid: true,
+      shouldRasterizeIOS: true,
+      style: [S.vTrack, {
         transform: [{
           translateY: verticalTranslateY
         }]
@@ -216,16 +215,14 @@ export const NoticeBar = props => {
     }, verticalTrackItems.map((item, index) => /*#__PURE__*/React.createElement(View, {
       key: index,
       onLayout: index === 0 ? handleItemLayout : undefined,
-      style: styles.verticalItem
-    }, isText(item) ? /*#__PURE__*/React.createElement(Text, _extends({
-      onLayout: textOnLayout,
-      style: [styles.text, {
-        color: resolvedColor,
-        fontSize: tokens.typography.fontSize
-      }],
+      style: S.vItem
+    }, renderTextOrNode(item, [S.text, {
+      color: resolvedColor,
+      fontSize: tokens.typography.fontSize
+    }], {
       numberOfLines: 1,
-      ellipsizeMode: "tail"
-    }, restTextProps), item) : item))));
+      ...restTextProps
+    })))));
   }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
   const handleContainerLayout = useCallback(event => {
     setContainerWidthSafe(event.nativeEvent.layout.width);
@@ -235,11 +232,9 @@ export const NoticeBar = props => {
     textOnLayout?.(event);
   }, [setContentWidthSafe, textOnLayout]);
   const handleNodeLayout = useCallback(event => setContentWidthSafe(event.nativeEvent.layout.width), [setContentWidthSafe]);
-  if (!visible) {
-    return null;
-  }
+  if (!visible) return null;
   return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [styles.container, {
+    style: [S.ctr, {
       backgroundColor: resolvedBackground,
       paddingHorizontal: tokens.spacing.paddingHorizontal,
       paddingVertical: wrapable ? tokens.spacing.wrapPaddingVertical : tokens.spacing.paddingVertical,
@@ -247,13 +242,13 @@ export const NoticeBar = props => {
       borderRadius: tokens.layout.radius
     }, style],
     disabled: barPress.states.disabled
-  }, barPress.interactionProps, rest), hasLeft ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.sideSection, {
+  }, barPress.interactionProps, rest), hasLeft && /*#__PURE__*/React.createElement(View, {
+    style: [S.side, {
       minWidth: tokens.layout.sideMinWidth
     }]
-  }, leftIcon) : null, /*#__PURE__*/React.createElement(View, {
+  }, leftIcon), /*#__PURE__*/React.createElement(View, {
     onLayout: handleContainerLayout,
-    style: [styles.content, wrapable && styles.contentWrap, hasLeft && {
+    style: [S.content, wrapable && S.contentWrap, hasLeft && {
       paddingLeft: tokens.spacing.sidePadding
     }, hasRight && {
       paddingRight: tokens.spacing.sidePadding
@@ -261,7 +256,7 @@ export const NoticeBar = props => {
     pointerEvents: "none"
   }, isVertical ? verticalContentNode : shouldScroll ? isTextContent ? /*#__PURE__*/React.createElement(AnimatedText, _extends({
     onLayout: handleTextLayout,
-    style: [styles.text, styles.scrollText, {
+    style: [S.text, S.scrollText, {
       color: resolvedColor,
       fontSize: tokens.typography.fontSize,
       transform: [{
@@ -273,34 +268,36 @@ export const NoticeBar = props => {
     ellipsizeMode: 'clip'
   }, restTextProps), content) : /*#__PURE__*/React.createElement(Animated.View, {
     onLayout: handleNodeLayout,
-    style: [styles.text, {
+    renderToHardwareTextureAndroid: true,
+    shouldRasterizeIOS: true,
+    style: [S.text, {
       transform: [{
         translateX
       }]
     }]
   }, content) : isTextContent ? /*#__PURE__*/React.createElement(Text, _extends({
     onLayout: handleTextLayout,
-    style: [styles.text, {
+    style: [S.text, {
       color: resolvedColor,
       fontSize: tokens.typography.fontSize
-    }, wrapable && styles.wrapText],
+    }, wrapable && S.wrapText],
     numberOfLines: wrapable ? undefined : 1,
     ellipsizeMode: wrapable ? 'tail' : 'clip'
   }, restTextProps), content) : /*#__PURE__*/React.createElement(View, {
     onLayout: handleNodeLayout,
-    style: [styles.text, wrapable && styles.wrapText]
-  }, content)), rightNode ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.sideSection, {
+    style: [S.text, wrapable && S.wrapText]
+  }, content)), rightNode && /*#__PURE__*/React.createElement(View, {
+    style: [S.side, {
       minWidth: tokens.layout.sideMinWidth
     }]
-  }, rightNode) : null);
+  }, rightNode));
 };
-const styles = StyleSheet.create({
-  container: {
+const S = StyleSheet.create({
+  ctr: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  sideSection: {
+  side: {
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -326,17 +323,18 @@ const styles = StyleSheet.create({
   contentWrap: {
     flexDirection: 'column'
   },
-  verticalViewport: {
+  vViewport: {
     width: '100%',
     overflow: 'hidden'
   },
-  verticalTrack: {
+  vTrack: {
     flexDirection: 'column',
     width: '100%'
   },
-  verticalItem: {
+  vItem: {
     width: '100%',
     justifyContent: 'center'
   }
 });
+export const NoticeBar = /*#__PURE__*/React.memo(NoticeBarImpl);
 NoticeBar.displayName = 'NoticeBar';