@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/navigation/__stories__/NavigationTitleSelect.stories.js

@@ -0,0 +1,253 @@
+import { useState } from 'react';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { HStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { NavigationTitleSelect } from '../NavigationTitleSelect';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicExample = () => {
+  const [value, setValue] = useState('home');
+  const options = [{
+    id: 'home',
+    label: 'Home'
+  }, {
+    id: 'portfolio',
+    label: 'Portfolio'
+  }, {
+    id: 'earn',
+    label: 'Earn'
+  }, {
+    id: 'settings',
+    label: 'Settings'
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Basic Usage",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const CustomColorExample = () => {
+  const [value, setValue] = useState('fgPrimary');
+  const options = [{
+    id: 'fgPrimary',
+    label: 'Primary Color'
+  }, {
+    id: 'fgMuted',
+    label: 'Muted Color'
+  }, {
+    id: 'fgPositive',
+    label: 'Positive Color'
+  }, {
+    id: 'fgNegative',
+    label: 'Negative Color'
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Custom Colors",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      color: value,
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const CustomFontExample = () => {
+  const [value, setValue] = useState('large');
+  const options = [{
+    id: 'large',
+    label: 'Large Title'
+  }, {
+    id: 'medium',
+    label: 'Medium Title'
+  }, {
+    id: 'small',
+    label: 'Small Title'
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Custom Font",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      font: "title1",
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const ManyOptionsExample = () => {
+  const [value, setValue] = useState('account1');
+  const options = Array.from({
+    length: 12
+  }, (_, i) => ({
+    id: "account" + (i + 1),
+    label: "Account " + (i + 1)
+  }));
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Many Options",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const LongLabelsExample = () => {
+  const [value, setValue] = useState('long1');
+  const options = [{
+    id: 'long1',
+    label: 'This is a very long navigation title that might overflow'
+  }, {
+    id: 'long2',
+    label: 'Another extremely long title for testing purposes'
+  }, {
+    id: 'short',
+    label: 'Short'
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Long Labels",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      ellipsize: "tail",
+      numberOfLines: 1,
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const ReactNodeLabelsExample = () => {
+  const [value, setValue] = useState('wallet1');
+  const options = [{
+    id: 'wallet1',
+    label: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "wallet",
+        size: "xs"
+      }), /*#__PURE__*/_jsx(Text, {
+        children: "Wallet 1"
+      })]
+    })
+  }, {
+    id: 'wallet2',
+    label: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "wallet",
+        size: "xs"
+      }), /*#__PURE__*/_jsx(Text, {
+        children: "Wallet 2"
+      })]
+    })
+  }, {
+    id: 'vault',
+    label: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        color: "fg",
+        name: "lock",
+        size: "xs"
+      }), /*#__PURE__*/_jsx(Text, {
+        children: "Vault"
+      })]
+    })
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "React Node Labels",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const ControlledExample = () => {
+  var _options$find;
+  const [value, setValue] = useState('btc');
+  const options = [{
+    id: 'btc',
+    label: 'Bitcoin'
+  }, {
+    id: 'eth',
+    label: 'Ethereum'
+  }, {
+    id: 'usdc',
+    label: 'USD Coin'
+  }];
+  return /*#__PURE__*/_jsxs(Example, {
+    title: "Controlled Component",
+    children: [/*#__PURE__*/_jsx(NavigationTitleSelect, {
+      onChange: setValue,
+      options: options,
+      value: value
+    }), /*#__PURE__*/_jsxs(Text, {
+      color: "fgMuted",
+      font: "label2",
+      style: {
+        marginTop: 8
+      },
+      children: ["Selected: ", (_options$find = options.find(opt => opt.id === value)) == null ? void 0 : _options$find.label]
+    })]
+  });
+};
+const AccessibilityExample = () => {
+  const [value, setValue] = useState('inbox');
+  const options = [{
+    id: 'inbox',
+    label: 'Inbox'
+  }, {
+    id: 'sent',
+    label: 'Sent'
+  }, {
+    id: 'drafts',
+    label: 'Drafts'
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Accessibility Features",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      accessibilityHint: "Double tap to select a different folder",
+      accessibilityLabel: "Mail folder selector",
+      onChange: setValue,
+      options: options,
+      value: value
+    })
+  });
+};
+const StyledExample = () => {
+  const [value, setValue] = useState('theme1');
+  const options = [{
+    id: 'theme1',
+    label: 'Light Theme'
+  }, {
+    id: 'theme2',
+    label: 'Dark Theme'
+  }, {
+    id: 'theme3',
+    label: 'Auto Theme'
+  }];
+  return /*#__PURE__*/_jsx(Example, {
+    title: "Custom Styling",
+    children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+      color: "fgPrimary",
+      font: "headline",
+      onChange: setValue,
+      options: options,
+      style: {
+        marginVertical: 4
+      },
+      value: value
+    })
+  });
+};
+const NavigationTitleSelectScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(BasicExample, {}), /*#__PURE__*/_jsx(CustomColorExample, {}), /*#__PURE__*/_jsx(CustomFontExample, {}), /*#__PURE__*/_jsx(ManyOptionsExample, {}), /*#__PURE__*/_jsx(LongLabelsExample, {}), /*#__PURE__*/_jsx(ReactNodeLabelsExample, {}), /*#__PURE__*/_jsx(ControlledExample, {}), /*#__PURE__*/_jsx(AccessibilityExample, {}), /*#__PURE__*/_jsx(StyledExample, {})]
+  });
+};
+export default NavigationTitleSelectScreen;

package/esm/navigation/__stories__/TopNavBar.stories.js

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { Switch } from '../../controls';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack, VStack } from '../../layout';
+import { TabNavigation } from '../../tabs';
+import { NavBarIconButton } from '../NavBarIconButton';
+import { NavigationSubtitle } from '../NavigationSubtitle';
+import { NavigationTitle } from '../NavigationTitle';
+import { NavigationTitleSelect } from '../NavigationTitleSelect';
+import { TopNavBar } from '../TopNavBar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const tabs = [{
+  id: 'all',
+  label: 'All'
+}, {
+  id: 'watchlist',
+  label: 'Watchlist'
+}, {
+  id: 'tradable',
+  label: 'Tradable'
+}, {
+  id: 'gainers',
+  label: 'Gainers'
+}, {
+  id: 'losers',
+  label: 'Losers'
+}, {
+  id: 'trending',
+  label: 'Trending'
+}, {
+  id: 'schill',
+  label: 'Schill'
+}];
+const DefaultExample = () => {
+  const [showStart, setShowStart] = useState(true);
+  const [showEnd, setShowEnd] = useState(true);
+  return /*#__PURE__*/_jsxs(Example, {
+    title: "With Start and End Nodes",
+    children: [/*#__PURE__*/_jsx(Switch, {
+      checked: showStart,
+      onChange: () => setShowStart(!showStart),
+      children: "Show Start Node"
+    }), /*#__PURE__*/_jsx(Switch, {
+      checked: showEnd,
+      onChange: () => setShowEnd(!showEnd),
+      children: "Show End Node"
+    }), /*#__PURE__*/_jsx(TopNavBar, {
+      end: showEnd && /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "share"
+        }), /*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "more"
+        })]
+      }),
+      paddingX: 0,
+      start: showStart && /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      children: /*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(NavigationTitle, {
+          children: "Page Title"
+        }), /*#__PURE__*/_jsx(NavigationSubtitle, {
+          children: "Page Subtitle"
+        })]
+      })
+    })]
+  });
+};
+const ExampleWithBottomComponent = () => {
+  const [tab, setTab] = useState(tabs[0].id);
+  return /*#__PURE__*/_jsx(Example, {
+    title: "With Bottom Node",
+    children: /*#__PURE__*/_jsx(TopNavBar, {
+      bottom: /*#__PURE__*/_jsx(TabNavigation, {
+        onChange: setTab,
+        tabs: tabs,
+        value: tab
+      }),
+      end: /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [/*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "share"
+        }), /*#__PURE__*/_jsx(NavBarIconButton, {
+          name: "more"
+        })]
+      }),
+      paddingX: 0,
+      start: /*#__PURE__*/_jsx(NavBarIconButton, {
+        name: "appSwitcher"
+      }),
+      children: /*#__PURE__*/_jsx(NavigationTitleSelect, {
+        onChange: setTab,
+        options: tabs,
+        value: tab
+      })
+    })
+  });
+};
+const NavigationBarScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(DefaultExample, {}), /*#__PURE__*/_jsx(ExampleWithBottomComponent, {})]
+  });
+};
+export default NavigationBarScreen;

package/esm/navigation/index.js

@@ -0,0 +1,7 @@
+export * from './BrowserBar';
+export * from './BrowserBarSearchInput';
+export * from './NavBarIconButton';
+export * from './NavigationSubtitle';
+export * from './NavigationTitle';
+export * from './NavigationTitleSelect';
+export * from './TopNavBar';

package/esm/numbers/RollingNumber/DefaultRollingNumberAffixSection.js

@@ -0,0 +1,33 @@
+const _excluded = ["children", "textProps", "style", "styles", "justifyContent"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo } from 'react';
+import Animated from 'react-native-reanimated';
+import { HStack } from '../../layout/HStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedText = Animated.createAnimatedComponent(Text);
+export const DefaultRollingNumberAffixSection = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      textProps,
+      style,
+      styles,
+      justifyContent = 'flex-start'
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const containerStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const textNode = useMemo(() => /*#__PURE__*/_jsx(AnimatedText, _extends({
+    style: styles == null ? void 0 : styles.text
+  }, textProps, {
+    children: children
+  })), [children, textProps, styles == null ? void 0 : styles.text]);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    ref: ref,
+    alignItems: "center",
+    justifyContent: justifyContent,
+    style: containerStyle
+  }, props, {
+    children: typeof children === 'string' || typeof children === 'number' ? textNode : children
+  }));
+}));

package/esm/numbers/RollingNumber/DefaultRollingNumberDigit.js

@@ -0,0 +1,73 @@
+const _excluded = ["value", "digitHeight", "initialValue", "textProps", "style", "styles", "transitionConfig", "RollingNumberMaskComponent"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { Text } from '../../typography/Text';
+import { DefaultRollingNumberMask } from './DefaultRollingNumberMask';
+import { defaultTransitionConfig, digits } from './RollingNumber';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const baseStylesheet = StyleSheet.create({
+  digitContainer: {
+    alignItems: 'center',
+    overflow: 'visible',
+    justifyContent: 'center',
+    position: 'relative'
+  }
+});
+
+/**
+ * Note that the DefaultRollingNumberDigit component implementation is different in web
+ * and mobile due to different animation libraries and the performance issue in mobile.
+ * This has nearly unnoticeable difference in animation effect.
+ *  */
+export const DefaultRollingNumberDigit = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      value,
+      digitHeight,
+      initialValue = value,
+      textProps,
+      style,
+      styles,
+      transitionConfig,
+      RollingNumberMaskComponent = DefaultRollingNumberMask
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const position = useSharedValue(initialValue * digitHeight * -1);
+  const prevValue = useRef(initialValue);
+  useEffect(() => {
+    var _transitionConfig$y;
+    if (prevValue.current === value) return;
+    const newPosition = value * digitHeight * -1;
+    if ((transitionConfig == null || (_transitionConfig$y = transitionConfig.y) == null ? void 0 : _transitionConfig$y.type) === 'spring') {
+      position.value = withSpring(newPosition, transitionConfig == null ? void 0 : transitionConfig.y);
+    } else {
+      var _transitionConfig$y2;
+      position.value = withTiming(newPosition, (_transitionConfig$y2 = transitionConfig == null ? void 0 : transitionConfig.y) != null ? _transitionConfig$y2 : defaultTransitionConfig.y);
+    }
+    prevValue.current = value;
+  }, [digitHeight, position, transitionConfig == null ? void 0 : transitionConfig.y, value]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: position.value
+    }]
+  }));
+  const containerStyle = useMemo(() => [baseStylesheet.digitContainer, animatedStyle, style, styles == null ? void 0 : styles.root], [animatedStyle, style, styles == null ? void 0 : styles.root]);
+  return /*#__PURE__*/_jsx(RollingNumberMaskComponent, _extends({
+    ref: ref
+  }, props, {
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: containerStyle,
+      children: digits.map(digit => /*#__PURE__*/_jsx(AnimatedText, _extends({
+        style: [{
+          position: digit === 0 ? 'relative' : 'absolute',
+          top: digit * digitHeight
+        }, styles == null ? void 0 : styles.text]
+      }, textProps, {
+        children: digit
+      }), digit))
+    })
+  }));
+}));

package/esm/numbers/RollingNumber/DefaultRollingNumberMask.js

@@ -0,0 +1,27 @@
+const _excluded = ["children", "style"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { HStack } from '../../layout/HStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+const baseStylesheet = StyleSheet.create({
+  mask: {
+    display: 'flex',
+    overflow: 'hidden'
+  }
+});
+export const DefaultRollingNumberMask = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      children,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const containerStyle = useMemo(() => [baseStylesheet.mask, style], [style]);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    ref: ref,
+    style: containerStyle
+  }, props, {
+    children: children
+  }));
+}));

package/esm/numbers/RollingNumber/DefaultRollingNumberSymbol.js

@@ -0,0 +1,31 @@
+const _excluded = ["value", "textProps", "style", "styles"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useMemo } from 'react';
+import Animated from 'react-native-reanimated';
+import { HStack } from '../../layout/HStack';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedText = Animated.createAnimatedComponent(Text);
+export const DefaultRollingNumberSymbol = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      value,
+      textProps,
+      style,
+      styles
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const containerStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+  const textNode = useMemo(() => /*#__PURE__*/_jsx(AnimatedText, _extends({
+    style: styles == null ? void 0 : styles.text
+  }, textProps, {
+    children: value
+  })), [value, textProps, styles == null ? void 0 : styles.text]);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    ref: ref,
+    alignItems: "center",
+    style: containerStyle
+  }, props, {
+    children: textNode
+  }));
+}));

package/esm/numbers/RollingNumber/DefaultRollingNumberValueSection.js

@@ -0,0 +1,97 @@
+const _excluded = ["intlNumberParts", "textProps", "digitHeight", "formattedValue", "RollingNumberDigitComponent", "RollingNumberSymbolComponent", "RollingNumberMaskComponent", "style", "styles", "justifyContent", "transitionConfig"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
+import Animated from 'react-native-reanimated';
+import { HStack } from '../../layout';
+import { Text } from '../../typography/Text';
+import { DefaultRollingNumberDigit } from './DefaultRollingNumberDigit';
+import { DefaultRollingNumberMask } from './DefaultRollingNumberMask';
+import { DefaultRollingNumberSymbol } from './DefaultRollingNumberSymbol';
+import { digits } from './RollingNumber';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const isDigit = char => digits.includes(parseInt(char));
+export const DefaultRollingNumberValueSection = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      intlNumberParts,
+      textProps,
+      digitHeight,
+      formattedValue,
+      RollingNumberDigitComponent = DefaultRollingNumberDigit,
+      RollingNumberSymbolComponent = DefaultRollingNumberSymbol,
+      RollingNumberMaskComponent = DefaultRollingNumberMask,
+      style,
+      styles,
+      justifyContent = 'flex-start',
+      transitionConfig
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [numberSectionHasRendered, setValueSectionHasRendered] = useState(false);
+  const containerStyle = useMemo(() => [style, styles == null ? void 0 : styles.root], [style, styles == null ? void 0 : styles.root]);
+
+  // fallback digit is used when the measurement is not complete
+  const fallbackDigit = useCallback((digit, key) => /*#__PURE__*/_jsx(AnimatedText, _extends({
+    style: styles == null ? void 0 : styles.text
+  }, textProps, {
+    children: digit
+  }), key), [textProps, styles == null ? void 0 : styles.text]);
+  const intlPartsDigits = useMemo(() => intlNumberParts.map(part => {
+    if (part.type !== 'integer' && part.type !== 'fraction' || typeof part.value !== 'number') {
+      return /*#__PURE__*/_jsx(RollingNumberSymbolComponent, {
+        justifyContent: justifyContent,
+        styles: {
+          text: styles == null ? void 0 : styles.text
+        },
+        textProps: textProps,
+        value: String(part.value)
+      }, part.type === 'literal' ? part.key + ":" + part.value : part.key);
+    }
+    if (!digitHeight) return fallbackDigit(part.value, part.key);
+    return /*#__PURE__*/_jsx(RollingNumberDigitComponent, {
+      RollingNumberMaskComponent: RollingNumberMaskComponent,
+      digitHeight: digitHeight,
+      initialValue: numberSectionHasRendered ? 0 : undefined,
+      onLayout: () => setValueSectionHasRendered(true),
+      styles: {
+        text: styles == null ? void 0 : styles.text
+      },
+      textProps: textProps,
+      transitionConfig: transitionConfig,
+      value: part.value
+    }, part.key);
+  }), [numberSectionHasRendered, setValueSectionHasRendered, intlNumberParts, digitHeight, RollingNumberDigitComponent, RollingNumberSymbolComponent, styles == null ? void 0 : styles.text, textProps, fallbackDigit, justifyContent, transitionConfig, RollingNumberMaskComponent]);
+  const formattedValueDigits = useMemo(() => formattedValue == null ? void 0 : formattedValue.split('').map((char, index) => {
+    if (!isDigit(char)) {
+      return /*#__PURE__*/_jsx(RollingNumberSymbolComponent, {
+        justifyContent: justifyContent,
+        styles: {
+          text: styles == null ? void 0 : styles.text
+        },
+        textProps: textProps,
+        value: char
+      }, index);
+    }
+    if (!digitHeight) return fallbackDigit(parseInt(char), index);
+    return /*#__PURE__*/_jsx(RollingNumberDigitComponent, {
+      RollingNumberMaskComponent: RollingNumberMaskComponent,
+      digitHeight: digitHeight,
+      initialValue: numberSectionHasRendered ? 0 : undefined,
+      onLayout: () => setValueSectionHasRendered(true),
+      styles: {
+        text: styles == null ? void 0 : styles.text
+      },
+      textProps: textProps,
+      transitionConfig: transitionConfig,
+      value: parseInt(char)
+    }, index);
+  }), [numberSectionHasRendered, setValueSectionHasRendered, formattedValue, RollingNumberDigitComponent, RollingNumberSymbolComponent, styles == null ? void 0 : styles.text, digitHeight, textProps, fallbackDigit, justifyContent, transitionConfig, RollingNumberMaskComponent]);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    ref: ref,
+    alignItems: "center",
+    justifyContent: justifyContent,
+    style: containerStyle
+  }, props, {
+    children: formattedValue ? formattedValueDigits : intlPartsDigits
+  }));
+}));