react-native-system-ui 1.0.2 → 1.0.3

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

@@ -1,369 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NoticeBar = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNativeSystemIcon() {
-  const data = require("react-native-system-icon");
-  _reactNativeSystemIcon = function () {
-    return data;
-  };
-  return data;
-}
-var _hooks = require("../../hooks");
-var _useLocale = require("../config-provider/useLocale");
-var _useDirection = require("../config-provider/useDirection");
-var _number = require("../../utils/number");
-var _validate = require("../../utils/validate");
-var _utils = require("../../utils");
-var _platform = require("../../platform");
-var _animation = require("../../hooks/animation");
-var _tokens = require("./tokens");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const AnimatedText = _reactNative().Animated.createAnimatedComponent(_reactNative().Text);
-const IS_WEB = _reactNative().Platform.OS === 'web';
-if (IS_WEB) {
-  const globalObj = typeof globalThis !== 'undefined' ? globalThis : window;
-  if (globalObj.global === undefined) globalObj.global = globalObj;
-}
-const NoticeBarImpl = props => {
-  const {
-    text,
-    children,
-    color,
-    background,
-    leftIcon,
-    rightIcon,
-    mode,
-    tokensOverride,
-    delay = 1,
-    speed = 60,
-    scrollable,
-    wrapable = false,
-    direction = 'horizontal',
-    items,
-    verticalInterval = 3000,
-    verticalDuration = 300,
-    onPress,
-    onClose,
-    onReplay,
-    textProps,
-    style,
-    ...rest
-  } = props;
-  const locale = (0, _useLocale.useLocale)();
-  const layoutDir = (0, _useDirection.useDirection)();
-  const reducedMotion = (0, _animation.useReducedMotion)();
-  const tokens = (0, _tokens.useNoticeBarTokens)(tokensOverride);
-  const resolvedColor = color ?? tokens.colors.text;
-  const resolvedBackground = background ?? tokens.colors.background;
-  const content = text ?? children;
-  const isTextContent = (0, _validate.isText)(content);
-  const isVertical = direction === 'vertical';
-  const [visible, setVisible] = (0, _react().useState)(true);
-  const {
-    onLayout: textOnLayout,
-    ...restTextProps
-  } = textProps ?? {};
-  const [contentWidth, setContentWidth] = (0, _react().useState)(0);
-  const [containerWidth, setContainerWidth] = (0, _react().useState)(0);
-  const translateX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const resolvedDelay = Math.max(0, (0, _number.parseNumber)(delay, 1));
-  const resolvedSpeed = (0, _number.parseNumber)(speed, 60);
-  const resolvedVerticalInterval = Math.max(0, (0, _number.parseNumber)(verticalInterval, 3000));
-  const resolvedVerticalDuration = Math.max(0, (0, _number.parseNumber)(verticalDuration, 300));
-  const verticalItems = (0, _react().useMemo)(() => {
-    if (!isVertical) return [];
-    if (items && items.length) return items;
-    const arr = _react().default.Children.toArray(children);
-    if (arr.length) return arr;
-    return text !== undefined ? [text] : [];
-  }, [children, isVertical, items, text]);
-  const hasVerticalLoop = !reducedMotion && isVertical && verticalItems.length > 1;
-  const verticalTrackItems = (0, _react().useMemo)(() => hasVerticalLoop ? [...verticalItems, verticalItems[0]] : verticalItems, [hasVerticalLoop, verticalItems]);
-  const verticalTranslateY = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const [itemHeight, setItemHeight] = (0, _react().useState)(0);
-  const setContentWidthSafe = (0, _react().useCallback)(next => {
-    setContentWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
-  }, []);
-  const setContainerWidthSafe = (0, _react().useCallback)(next => {
-    setContainerWidth(prev => Math.abs(prev - next) < 0.5 ? prev : next);
-  }, []);
-  const onCloseRef = (0, _react().useRef)(onClose);
-  onCloseRef.current = onClose;
-  const onReplayRef = (0, _react().useRef)(onReplay);
-  onReplayRef.current = onReplay;
-  const handleClose = (0, _react().useCallback)(() => {
-    setVisible(false);
-    onCloseRef.current?.();
-  }, []);
-  const closePress = (0, _hooks.useAriaPress)({
-    disabled: mode !== 'closeable' || !visible,
-    onPress: handleClose,
-    extraProps: {
-      accessibilityRole: 'button',
-      accessibilityLabel: locale?.vanNoticeBar?.close ?? 'Close'
-    }
-  });
-  const barPress = (0, _hooks.useAriaPress)({
-    disabled: !onPress || !visible,
-    onPress,
-    extraProps: onPress ? {
-      accessibilityRole: 'button'
-    } : undefined
-  });
-  const rightNode = mode === 'closeable' ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    hitSlop: 8
-  }, closePress.interactionProps), /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
-    size: 16,
-    fill: resolvedColor,
-    color: resolvedColor
-  })) : mode === 'link' ? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Arrow, {
-    size: 16,
-    fill: resolvedColor,
-    color: resolvedColor
-  }) : rightIcon || null;
-  const hasLeft = (0, _validate.isRenderable)(leftIcon);
-  const hasRight = Boolean(rightNode);
-  const effectiveContainerWidth = Math.max(0, containerWidth - (hasLeft ? tokens.spacing.sidePadding : 0) - (hasRight ? tokens.spacing.sidePadding : 0));
-  const shouldScroll = !reducedMotion && !isVertical && !wrapable && (scrollable ?? contentWidth > effectiveContainerWidth);
-  (0, _react().useEffect)(() => {
-    if (!visible || isVertical) {
-      translateX.stopAnimation();
-      return;
-    }
-    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 : rtlSign * containerWidth);
-      _reactNative().Animated.sequence([_reactNative().Animated.delay(resolvedDelay * 1000), _reactNative().Animated.timing(translateX, {
-        toValue: -rtlSign * contentWidth,
-        duration,
-        easing: _reactNative().Easing.linear,
-        useNativeDriver: _platform.nativeDriverEnabled,
-        isInteraction: false
-      })]).start(({
-        finished
-      }) => {
-        if (finished && !cancelled) {
-          onReplayRef.current?.();
-          run(false);
-        }
-      });
-    };
-    run(true);
-    return () => {
-      cancelled = true;
-      translateX.stopAnimation();
-    };
-  }, [shouldScroll, translateX, visible, resolvedDelay, resolvedSpeed, contentWidth, containerWidth, isVertical, layoutDir]);
-  (0, _react().useEffect)(() => {
-    if (!visible) {
-      verticalTranslateY.stopAnimation();
-      return;
-    }
-    if (!hasVerticalLoop || itemHeight === 0) {
-      verticalTranslateY.setValue(0);
-      return;
-    }
-    const steps = [];
-    for (let i = 1; i <= verticalItems.length; i += 1) {
-      steps.push(_reactNative().Animated.delay(resolvedVerticalInterval), _reactNative().Animated.timing(verticalTranslateY, {
-        toValue: -itemHeight * i,
-        duration: resolvedVerticalDuration,
-        easing: _reactNative().Easing.linear,
-        useNativeDriver: _platform.nativeDriverEnabled,
-        isInteraction: false
-      }));
-    }
-    steps.push(_reactNative().Animated.timing(verticalTranslateY, {
-      toValue: 0,
-      duration: 0,
-      useNativeDriver: _platform.nativeDriverEnabled,
-      isInteraction: false
-    }));
-    const loopAnimation = _reactNative().Animated.loop(_reactNative().Animated.sequence(steps));
-    loopAnimation.start();
-    return () => {
-      loopAnimation.stop();
-      verticalTranslateY.stopAnimation();
-    };
-  }, [visible, hasVerticalLoop, itemHeight, resolvedVerticalDuration, resolvedVerticalInterval, verticalItems, verticalTranslateY]);
-  const handleItemLayout = (0, _react().useCallback)(event => {
-    const height = event?.nativeEvent?.layout?.height;
-    if (!height) return;
-    setItemHeight(prev => prev === 0 || Math.abs(prev - height) >= 0.5 ? height : prev);
-  }, []);
-  const verticalContentNode = (0, _react().useMemo)(() => {
-    if (!isVertical || verticalTrackItems.length === 0) return null;
-    if (!hasVerticalLoop) return (0, _utils.renderTextOrNode)(verticalTrackItems[0], [S.text, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize
-    }], {
-      numberOfLines: 1,
-      ...restTextProps
-    });
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [S.vViewport, itemHeight ? {
-        height: itemHeight
-      } : undefined],
-      pointerEvents: "none"
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      renderToHardwareTextureAndroid: true,
-      shouldRasterizeIOS: true,
-      style: [S.vTrack, {
-        transform: [{
-          translateY: verticalTranslateY
-        }]
-      }]
-    }, verticalTrackItems.map((item, index) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      key: index,
-      onLayout: index === 0 ? handleItemLayout : undefined,
-      style: S.vItem
-    }, (0, _utils.renderTextOrNode)(item, [S.text, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize
-    }], {
-      numberOfLines: 1,
-      ...restTextProps
-    })))));
-  }, [handleItemLayout, hasVerticalLoop, isVertical, itemHeight, resolvedColor, restTextProps, textOnLayout, tokens.typography.fontFamily, tokens.typography.fontSize, verticalTrackItems, verticalTranslateY]);
-  const handleContainerLayout = (0, _react().useCallback)(event => {
-    setContainerWidthSafe(event.nativeEvent.layout.width);
-  }, [setContainerWidthSafe]);
-  const handleTextLayout = (0, _react().useCallback)(event => {
-    setContentWidthSafe(event.nativeEvent.layout.width);
-    textOnLayout?.(event);
-  }, [setContentWidthSafe, textOnLayout]);
-  const handleNodeLayout = (0, _react().useCallback)(event => setContentWidthSafe(event.nativeEvent.layout.width), [setContentWidthSafe]);
-  if (!visible) return null;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
-    style: [S.ctr, {
-      backgroundColor: resolvedBackground,
-      paddingHorizontal: tokens.spacing.paddingHorizontal,
-      paddingVertical: wrapable ? tokens.spacing.wrapPaddingVertical : tokens.spacing.paddingVertical,
-      minHeight: tokens.layout.minHeight,
-      borderRadius: tokens.layout.radius
-    }, style],
-    disabled: barPress.states.disabled
-  }, barPress.interactionProps, rest), hasLeft && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [S.side, {
-      minWidth: tokens.layout.sideMinWidth
-    }]
-  }, leftIcon), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    onLayout: handleContainerLayout,
-    style: [S.content, wrapable && S.contentWrap, hasLeft && {
-      paddingLeft: tokens.spacing.sidePadding
-    }, hasRight && {
-      paddingRight: tokens.spacing.sidePadding
-    }],
-    pointerEvents: "none"
-  }, isVertical ? verticalContentNode : shouldScroll ? isTextContent ? /*#__PURE__*/_react().default.createElement(AnimatedText, _extends({
-    onLayout: handleTextLayout,
-    style: [S.text, S.scrollText, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize,
-      transform: [{
-        translateX
-      }]
-    }]
-  }, IS_WEB ? {} : {
-    numberOfLines: 1,
-    ellipsizeMode: 'clip'
-  }, restTextProps), content) : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    onLayout: handleNodeLayout,
-    renderToHardwareTextureAndroid: true,
-    shouldRasterizeIOS: true,
-    style: [S.text, {
-      transform: [{
-        translateX
-      }]
-    }]
-  }, content) : isTextContent ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
-    onLayout: handleTextLayout,
-    style: [S.text, {
-      color: resolvedColor,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize
-    }, wrapable && S.wrapText],
-    numberOfLines: wrapable ? undefined : 1,
-    ellipsizeMode: wrapable ? 'tail' : 'clip'
-  }, restTextProps), content) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    onLayout: handleNodeLayout,
-    style: [S.text, wrapable && S.wrapText]
-  }, content)), rightNode && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [S.side, {
-      minWidth: tokens.layout.sideMinWidth
-    }]
-  }, rightNode));
-};
-const S = _reactNative().StyleSheet.create({
-  ctr: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  side: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    overflow: 'hidden'
-  },
-  text: {
-    flexShrink: 0
-  },
-  scrollText: _reactNative().Platform.select({
-    web: {
-      whiteSpace: 'nowrap',
-      textOverflow: 'clip'
-    },
-    default: {}
-  }),
-  wrapText: {
-    flexWrap: 'wrap',
-    flexShrink: 1
-  },
-  contentWrap: {
-    flexDirection: 'column'
-  },
-  vViewport: {
-    width: '100%',
-    overflow: 'hidden'
-  },
-  vTrack: {
-    flexDirection: 'column',
-    width: '100%'
-  },
-  vItem: {
-    width: '100%',
-    justifyContent: 'center'
-  }
-});
-const NoticeBar = exports.NoticeBar = /*#__PURE__*/_react().default.memo(NoticeBarImpl);
-NoticeBar.displayName = 'NoticeBar';
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}function _reactNativeSystemIcon(){const e=require("react-native-system-icon");return _reactNativeSystemIcon=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.NoticeBar=void 0;var _hooks=require("../../hooks"),_useLocale=require("../config-provider/useLocale"),_useDirection=require("../config-provider/useDirection"),_number=require("../../utils/number"),_validate=require("../../utils/validate"),_utils=require("../../utils"),_platform=require("../../platform"),_animation=require("../../hooks/animation"),_tokens=require("./tokens");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?r:a){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?i(o,t,n):o[t]=e[t]);return o})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_extends.apply(null,arguments)}const AnimatedText=_reactNative().Animated.createAnimatedComponent(_reactNative().Text),IS_WEB="web"===_reactNative().Platform.OS;if(IS_WEB){const e="undefined"!=typeof globalThis?globalThis:window;void 0===e.global&&(e.global=e)}const NoticeBarImpl=e=>{const{text:t,children:a,color:r,background:i,leftIcon:n,rightIcon:o,mode:l,tokensOverride:c,delay:s=1,speed:u=60,scrollable:d,wrapable:_=!1,direction:f="horizontal",items:p,verticalInterval:m=3e3,verticalDuration:v=300,onPress:y,onClose:h,onReplay:g,textProps:b,style:N,...x}=e,w=(0,_useLocale.useLocale)(),E=(0,_useDirection.useDirection)(),k=(0,_animation.useReducedMotion)(),A=(0,_tokens.useNoticeBarTokens)(c),P=r??A.colors.text,I=i??A.colors.background,T=t??a,V=(0,_validate.isText)(T),M="vertical"===f,[O,z]=(0,_react().useState)(!0),{onLayout:q,...L}=b??{},[D,R]=(0,_react().useState)(0),[W,C]=(0,_react().useState)(0),B=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current,F=Math.max(0,(0,_number.parseNumber)(s,1)),j=(0,_number.parseNumber)(u,60),H=Math.max(0,(0,_number.parseNumber)(m,3e3)),X=Math.max(0,(0,_number.parseNumber)(v,300)),Y=(0,_react().useMemo)(()=>{if(!M)return[];if(p&&p.length)return p;const e=_react().default.Children.toArray(a);return e.length?e:void 0!==t?[t]:[]},[a,M,p,t]),G=!k&&M&&Y.length>1,J=(0,_react().useMemo)(()=>G?[...Y,Y[0]]:Y,[G,Y]),K=(0,_react().useRef)(new(_reactNative().Animated.Value)(0)).current,[Q,U]=(0,_react().useState)(0),Z=(0,_react().useCallback)(e=>{R(t=>Math.abs(t-e)<.5?t:e)},[]),$=(0,_react().useCallback)(e=>{C(t=>Math.abs(t-e)<.5?t:e)},[]),ee=(0,_react().useRef)(h);ee.current=h;const te=(0,_react().useRef)(g);te.current=g;const ae=(0,_react().useCallback)(()=>{z(!1),ee.current?.()},[]),re=(0,_hooks.useAriaPress)({disabled:"closeable"!==l||!O,onPress:ae,extraProps:{accessibilityRole:"button",accessibilityLabel:w?.vanNoticeBar?.close??"Close"}}),ie=(0,_hooks.useAriaPress)({disabled:!y||!O,onPress:y,extraProps:y?{accessibilityRole:"button"}:void 0}),ne="closeable"===l?_react().default.createElement(_reactNative().Pressable,_extends({hitSlop:8},re.interactionProps),_react().default.createElement(_reactNativeSystemIcon().Close,{size:16,fill:P,color:P})):"link"===l?_react().default.createElement(_reactNativeSystemIcon().Arrow,{size:16,fill:P,color:P}):o||null,oe=(0,_validate.isRenderable)(n),le=Boolean(ne),ce=Math.max(0,W-(oe?A.spacing.sidePadding:0)-(le?A.spacing.sidePadding:0)),se=!k&&!M&&!_&&(d??D>ce);(0,_react().useEffect)(()=>{if(!O||M)return void B.stopAnimation();if(!se||0===D||0===W||j<=0||!Number.isFinite(j))return void B.setValue(0);let e=!1;const t=(D+W)/j*1e3,a="rtl"===E?-1:1,r=i=>{B.setValue(i?0:a*W),_reactNative().Animated.sequence([_reactNative().Animated.delay(1e3*F),_reactNative().Animated.timing(B,{toValue:-a*D,duration:t,easing:_reactNative().Easing.linear,useNativeDriver:_platform.nativeDriverEnabled,isInteraction:!1})]).start(({finished:t})=>{t&&!e&&(te.current?.(),r(!1))})};return r(!0),()=>{e=!0,B.stopAnimation()}},[se,B,O,F,j,D,W,M,E]),(0,_react().useEffect)(()=>{if(!O)return void K.stopAnimation();if(!G||0===Q)return void K.setValue(0);const e=[];for(let t=1;t<=Y.length;t+=1)e.push(_reactNative().Animated.delay(H),_reactNative().Animated.timing(K,{toValue:-Q*t,duration:X,easing:_reactNative().Easing.linear,useNativeDriver:_platform.nativeDriverEnabled,isInteraction:!1}));e.push(_reactNative().Animated.timing(K,{toValue:0,duration:0,useNativeDriver:_platform.nativeDriverEnabled,isInteraction:!1}));const t=_reactNative().Animated.loop(_reactNative().Animated.sequence(e));return t.start(),()=>{t.stop(),K.stopAnimation()}},[O,G,Q,X,H,Y,K]);const ue=(0,_react().useCallback)(e=>{const t=e?.nativeEvent?.layout?.height;t&&U(e=>0===e||Math.abs(e-t)>=.5?t:e)},[]),de=(0,_react().useMemo)(()=>M&&0!==J.length?G?_react().default.createElement(_reactNative().View,{style:[S.vViewport,Q?{height:Q}:void 0],pointerEvents:"none"},_react().default.createElement(_reactNative().Animated.View,{renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,style:[S.vTrack,{transform:[{translateY:K}]}]},J.map((e,t)=>_react().default.createElement(_reactNative().View,{key:t,onLayout:0===t?ue:void 0,style:S.vItem},(0,_utils.renderTextOrNode)(e,[S.text,{color:P,fontFamily:A.typography.fontFamily,fontSize:A.typography.fontSize}],{numberOfLines:1,...L}))))):(0,_utils.renderTextOrNode)(J[0],[S.text,{color:P,fontFamily:A.typography.fontFamily,fontSize:A.typography.fontSize}],{numberOfLines:1,...L}):null,[ue,G,M,Q,P,L,q,A.typography.fontFamily,A.typography.fontSize,J,K]),_e=(0,_react().useCallback)(e=>{$(e.nativeEvent.layout.width)},[$]),fe=(0,_react().useCallback)(e=>{Z(e.nativeEvent.layout.width),q?.(e)},[Z,q]),pe=(0,_react().useCallback)(e=>Z(e.nativeEvent.layout.width),[Z]);return O?_react().default.createElement(_reactNative().Pressable,_extends({style:[S.ctr,{backgroundColor:I,paddingHorizontal:A.spacing.paddingHorizontal,paddingVertical:_?A.spacing.wrapPaddingVertical:A.spacing.paddingVertical,minHeight:A.layout.minHeight,borderRadius:A.layout.radius},N],disabled:ie.states.disabled},ie.interactionProps,x),oe&&_react().default.createElement(_reactNative().View,{style:[S.side,{minWidth:A.layout.sideMinWidth}]},n),_react().default.createElement(_reactNative().View,{onLayout:_e,style:[S.content,_&&S.contentWrap,oe&&{paddingLeft:A.spacing.sidePadding},le&&{paddingRight:A.spacing.sidePadding}],pointerEvents:"none"},M?de:se?V?_react().default.createElement(AnimatedText,_extends({onLayout:fe,style:[S.text,S.scrollText,{color:P,fontFamily:A.typography.fontFamily,fontSize:A.typography.fontSize,transform:[{translateX:B}]}]},IS_WEB?{}:{numberOfLines:1,ellipsizeMode:"clip"},L),T):_react().default.createElement(_reactNative().Animated.View,{onLayout:pe,renderToHardwareTextureAndroid:!0,shouldRasterizeIOS:!0,style:[S.text,{transform:[{translateX:B}]}]},T):V?_react().default.createElement(_reactNative().Text,_extends({onLayout:fe,style:[S.text,{color:P,fontFamily:A.typography.fontFamily,fontSize:A.typography.fontSize},_&&S.wrapText],numberOfLines:_?void 0:1,ellipsizeMode:_?"tail":"clip"},L),T):_react().default.createElement(_reactNative().View,{onLayout:pe,style:[S.text,_&&S.wrapText]},T)),ne&&_react().default.createElement(_reactNative().View,{style:[S.side,{minWidth:A.layout.sideMinWidth}]},ne)):null},S=_reactNative().StyleSheet.create({ctr:{flexDirection:"row",alignItems:"center"},side:{alignItems:"center",justifyContent:"center"},content:{flex:1,flexDirection:"row",overflow:"hidden"},text:{flexShrink:0},scrollText:_reactNative().Platform.select({web:{whiteSpace:"nowrap",textOverflow:"clip"},default:{}}),wrapText:{flexWrap:"wrap",flexShrink:1},contentWrap:{flexDirection:"column"},vViewport:{width:"100%",overflow:"hidden"},vTrack:{flexDirection:"column",width:"100%"},vItem:{width:"100%",justifyContent:"center"}}),NoticeBar=exports.NoticeBar=_react().default.memo(NoticeBarImpl);NoticeBar.displayName="NoticeBar";

package/dist/cjs/components/notice-bar/index.js

@@ -1,8 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _NoticeBar = require("./NoticeBar");
-var _default = exports.default = _NoticeBar.NoticeBar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _NoticeBar=require("./NoticeBar"),_default=exports.default=_NoticeBar.NoticeBar;

package/dist/cjs/components/notice-bar/tokens.js

@@ -1,39 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useNoticeBarTokens = exports.createNoticeBarTokens = void 0;
-var _designSystem = require("../../design-system");
-const createNoticeBarTokens = foundations => {
-  const {
-    palette,
-    fontSize,
-    spacing,
-    radii,
-    typography
-  } = foundations;
-  return {
-    colors: {
-      text: palette.warning[600],
-      background: palette.warning[50]
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      fontSize: fontSize.sm
-    },
-    layout: {
-      minHeight: 40,
-      radius: radii.lg,
-      sideMinWidth: 24
-    },
-    spacing: {
-      paddingHorizontal: spacing.lg,
-      paddingVertical: spacing.sm,
-      wrapPaddingVertical: spacing.md,
-      sidePadding: spacing.sm
-    }
-  };
-};
-exports.createNoticeBarTokens = createNoticeBarTokens;
-const useNoticeBarTokens = exports.useNoticeBarTokens = (0, _designSystem.createComponentTokensHook)('noticeBar', createNoticeBarTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useNoticeBarTokens=exports.createNoticeBarTokens=void 0;var _designSystem=require("../../design-system");const createNoticeBarTokens=e=>{const{palette:t,fontSize:o,spacing:i,radii:r,typography:s}=e;return{colors:{text:t.warning[600],background:t.warning[50]},typography:{fontFamily:s.fontFamily,fontSize:o.sm},layout:{minHeight:40,radius:r.lg,sideMinWidth:24},spacing:{paddingHorizontal:i.lg,paddingVertical:i.sm,wrapPaddingVertical:i.md,sidePadding:i.sm}}};exports.createNoticeBarTokens=createNoticeBarTokens;const useNoticeBarTokens=exports.useNoticeBarTokens=(0,_designSystem.createComponentTokensHook)("noticeBar",createNoticeBarTokens);