@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/alpha/carousel/Carousel.js

@@ -0,0 +1,244 @@
+const _excluded = ["carouselRef", "items", "gap", "testID", "onDismissItem", "onDismissLastItem", "showProgress", "showDismiss", "itemWidth", "autoHeight", "dismissButtonAccessibilityLabel", "dismissButtonAccessibilityHint"];
+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 React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { useScrollOffset } from '../../hooks/useScrollOffset';
+import { useScrollTo } from '../../hooks/useScrollTo';
+import { useTheme } from '../../hooks/useTheme';
+import { VStack } from '../../layout/VStack';
+import { PROGRESS_INDICATOR_WIDTH, ProgressIndicator } from '../../visualizations/ProgressIndicator';
+import { CarouselControlsWrapper } from './CarouselControlsWrapper';
+import { CarouselItem } from './CarouselItem';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @deprecated This component will be removed in a future version. Use new Carousel component instead. */
+export const Carousel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      carouselRef,
+      items,
+      gap = 0,
+      testID = 'Carousel',
+      onDismissItem,
+      onDismissLastItem,
+      showProgress = false,
+      showDismiss = false,
+      itemWidth: itemWidthProp,
+      autoHeight = false,
+      dismissButtonAccessibilityLabel,
+      dismissButtonAccessibilityHint
+    } = _ref,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const {
+    width: screenWidth
+  } = useSafeAreaFrame();
+  const itemWidth = itemWidthProp != null ? itemWidthProp : screenWidth;
+  const [scrollRef, {
+    scrollTo,
+    scrollToEnd
+  }] = useScrollTo(forwardedRef);
+  const {
+    onScroll,
+    xOffset,
+    currentIndex
+  } = useScrollOffset();
+  const [dismissedItems, setDismissedItems] = useState(new Set());
+  const indicatorsOpacity = useRef(new Animated.Value(1));
+  const [mountedItemsInfo, setMountedItemsInfo] = useState({});
+  const resetDismissedItems = useCallback(() => {
+    setDismissedItems(new Set());
+  }, []);
+  const visibleItems = useMemo(() => items.filter(item => item.key && !dismissedItems.has(item.key)).map((item, index) => {
+    var _item$key;
+    return {
+      id: (_item$key = item.key) != null ? _item$key : index,
+      index,
+      children: item
+    };
+  }).reduce((prev, _ref2) => {
+    let {
+      index,
+      id = index,
+      children
+    } = _ref2;
+    const snapPoint = index * itemWidth;
+    return [...prev, {
+      id,
+      index,
+      snapPoint,
+      progress: xOffset.interpolate({
+        inputRange: [snapPoint - itemWidth, snapPoint, snapPoint + itemWidth],
+        outputRange: [0, 1, 1],
+        extrapolate: 'clamp'
+      }),
+      children
+    }];
+  }, []), [items, itemWidth, dismissedItems, xOffset]);
+
+  /** The number of of CarouselItems */
+  const childrenLength = visibleItems.length;
+  const getDismissItemHandler = useCallback(function getDismissItemHandler(id) {
+    return function handleDismissItem() {
+      setDismissedItems(prev => new Set(prev).add(id));
+      onDismissItem == null || onDismissItem(id);
+
+      // if you dismiss the last item you have to scroll to the new end position on Android.
+      // The ScrollView does not automatically do this
+      if (id === visibleItems[visibleItems.length - 1].id) {
+        scrollToEnd({
+          animated: false
+        });
+      }
+    };
+  }, [onDismissItem, scrollToEnd, visibleItems]);
+  const getOnDismissLastItemHandler = useCallback(function getOnDismissLastItemHandler(id) {
+    return function handleOnDismissLastItem() {
+      onDismissLastItem == null || onDismissLastItem({
+        id,
+        resetDismissedItems
+      });
+    };
+  }, [onDismissLastItem, resetDismissedItems]);
+  const getOnMountItemHandler = useCallback(function getOnMountItemHandler(id, index) {
+    return function handleOnMountItem(animatedStyles) {
+      setMountedItemsInfo(prev => _extends({}, prev, {
+        [id]: {
+          animatedStyles,
+          id,
+          index
+        }
+      }));
+    };
+  }, []);
+  const memoizedStyles = useMemo(() => {
+    return [styles.carousel, autoHeight && styles.autoHeight];
+  }, [autoHeight]);
+
+  /** Imperatively handling scrolling Carousel to an item. LayoutMap has the index to x coordinate mapping. */
+  const scrollToId = useCallback(function (id, params) {
+    var _visibleItems$find;
+    if (params === void 0) {
+      params = {};
+    }
+    const snapPoint = (_visibleItems$find = visibleItems.find(item => item.id === id)) == null ? void 0 : _visibleItems$find.snapPoint;
+    if (snapPoint) {
+      scrollTo(_extends({
+        x: snapPoint
+      }, params));
+    }
+  }, [visibleItems, scrollTo]);
+
+  /** This object contains any internal data/methods of Carousel that we want to expose to consumers. */
+  const publicData = useMemo(() => ({
+    length: childrenLength,
+    dismissedItems,
+    resetDismissedItems,
+    scrollToId,
+    scrollTo,
+    scrollToEnd,
+    currentIndex
+  }), [childrenLength, dismissedItems, resetDismissedItems, scrollToId, scrollTo, scrollToEnd, currentIndex]);
+
+  /**
+   * Useful if you need access to carousel length or scrollToId outside of Carousel. The useCarousel hook exposes these values and requires the ref returned to be passed into Carousel's carouselRef prop.
+   * @example
+   * ```
+   * const carouselRef = useCarousel()
+   * const handlePress = () => carouselRef.current.scrollToId('item3');
+   * <Button onPress={handlePress}>Press me</Button>
+   * <Carousel carouselRef={carouselRef} />
+   * ```
+   */
+  useImperativeHandle(carouselRef, () => publicData, [publicData]);
+
+  /** Loop over our children and create CarouselItem component. */
+  const content = useMemo(() => {
+    return visibleItems.map(_ref3 => {
+      let {
+        index,
+        id,
+        children
+      } = _ref3;
+      const isLastItem = index === visibleItems.length - 1;
+      return /*#__PURE__*/_jsx(CarouselItem, {
+        dismissButtonAccessibilityHint: dismissButtonAccessibilityHint,
+        dismissButtonAccessibilityLabel: dismissButtonAccessibilityLabel,
+        id: id,
+        index: index,
+        onDismiss: getDismissItemHandler(id),
+        onDismissLastItem: getOnDismissLastItemHandler(id),
+        onMount: getOnMountItemHandler(id, index),
+        paddingEnd: isLastItem ? 0 : gap,
+        progressOpacity: indicatorsOpacity.current,
+        showDismiss: showDismiss,
+        totalItems: visibleItems.length,
+        width: itemWidth,
+        xOffset: xOffset,
+        children: children
+      }, "carousel-item-" + id);
+    });
+  }, [visibleItems, gap, showDismiss, xOffset, itemWidth, getDismissItemHandler, getOnDismissLastItemHandler, getOnMountItemHandler, dismissButtonAccessibilityLabel, dismissButtonAccessibilityHint]);
+  const progressSpacingEnd = theme.space[0.5];
+  const progressIndicators = useMemo(() => {
+    return visibleItems.map(_ref4 => {
+      let {
+        id,
+        progress
+      } = _ref4;
+      const info = mountedItemsInfo[id];
+      if (info) {
+        const {
+          animatedStyles
+        } = info;
+        return /*#__PURE__*/_jsx(ProgressIndicator, {
+          progress: progress,
+          style: {
+            opacity: animatedStyles.opacity,
+            width: animatedStyles.opacity.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, PROGRESS_INDICATOR_WIDTH + progressSpacingEnd]
+            })
+          }
+        }, "progress-indicator-" + id);
+      }
+      return null;
+    });
+  }, [visibleItems, mountedItemsInfo, progressSpacingEnd]);
+  const progressHeight = theme.space[gutter];
+  return /*#__PURE__*/_jsxs(VStack, {
+    children: [showProgress && /*#__PURE__*/_jsx(CarouselControlsWrapper, {
+      animated: true,
+      alignItems: "flex-end",
+      height: progressHeight,
+      opacity: indicatorsOpacity.current,
+      pointerEvents: "none",
+      testID: "Carousel-progress",
+      children: progressIndicators
+    }), /*#__PURE__*/_jsx(Animated.ScrollView, _extends({
+      ref: scrollRef,
+      horizontal: true,
+      decelerationRate: "fast",
+      onScroll: onScroll,
+      overScrollMode: "always",
+      scrollEventThrottle: 1,
+      showsHorizontalScrollIndicator: false,
+      snapToInterval: itemWidth,
+      style: memoizedStyles,
+      testID: testID
+    }, otherProps, {
+      children: content
+    }))]
+  });
+}));
+const styles = StyleSheet.create({
+  carousel: {
+    overflow: 'visible'
+  },
+  autoHeight: {
+    flex: 1,
+    flexShrink: 0
+  }
+});
+Carousel.displayName = 'Carousel';

package/esm/alpha/carousel/CarouselControlsWrapper.js

@@ -0,0 +1,29 @@
+const _excluded = ["children", "opacity"];
+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 React, { memo } from 'react';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
+import { HStack } from '../../layout/HStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Wrapper to house ProgressIndicators and Dismiss IconButton when controls are shown in Carousel */
+export const CarouselControlsWrapper = /*#__PURE__*/memo(function CarouselControlsWrapper(_ref) {
+  let {
+      children,
+      opacity
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    animated: true,
+    left: 0,
+    opacity: opacity,
+    paddingX: gutter,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    zIndex: zIndex.interactable
+  }, props, {
+    children: children
+  }));
+});
+CarouselControlsWrapper.displayName = 'CarouselControlsWrapper';

package/esm/alpha/carousel/CarouselItem.js

@@ -0,0 +1,134 @@
+import React, { createContext, memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { animateOpacityConfig, animateSizeConfig } from '@coinbase/cds-common/animation/carousel';
+import { convertMotionConfig } from '../../animation/convertMotionConfig';
+import { IconButton } from '../../buttons/IconButton';
+import { Box } from '../../layout/Box';
+import { CarouselControlsWrapper } from './CarouselControlsWrapper';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FADE_DISTANCE = 48;
+const opacityConfig = convertMotionConfig(animateOpacityConfig);
+const sizeConfig = convertMotionConfig(animateSizeConfig);
+/**
+ * Used internally within CarouselItem component to provide access to id and dismiss.
+ */
+export const CarouselItemContext = /*#__PURE__*/createContext(undefined);
+export const CarouselItem = /*#__PURE__*/memo(_ref => {
+  let {
+    children,
+    id,
+    index,
+    paddingEnd,
+    showDismiss,
+    xOffset,
+    totalItems,
+    width,
+    progressOpacity,
+    onDismiss,
+    onDismissLastItem,
+    onMount,
+    dismissButtonAccessibilityLabel,
+    dismissButtonAccessibilityHint
+  } = _ref;
+  const snapPoint = width * index;
+  const isOnlyItem = totalItems === 1;
+  const isFirstItem = index === 0;
+  const isLastItem = index === totalItems - 1;
+  const innerBox = useRef(null);
+  const isAnimating = useRef(false);
+  const hasMounted = useRef(false);
+  const [animatedStyles, setAnimatedStyles] = useState({
+    opacity: new Animated.Value(1),
+    width: new Animated.Value(width),
+    height: undefined
+  });
+  const onWrapperLayout = useCallback(() => {
+    if (hasMounted.current) return;
+    onMount(animatedStyles);
+    hasMounted.current = true;
+  }, [animatedStyles, onMount]);
+  const dismissButtonStyles = useMemo(() => {
+    return {
+      opacity: xOffset.interpolate({
+        inputRange: [snapPoint - FADE_DISTANCE, snapPoint, snapPoint + FADE_DISTANCE],
+        outputRange: [isFirstItem ? 1 : 0, 1, isLastItem ? 1 : 0]
+      })
+    };
+  }, [isFirstItem, isLastItem, snapPoint, xOffset]);
+  const handleDismiss = useCallback(callbackFn => {
+    var _innerBox$current;
+    (_innerBox$current = innerBox.current) == null || _innerBox$current.measureInWindow((_x, _y, innerWidth, innerHeight) => {
+      const stylesToAnimate = {
+        opacity: new Animated.Value(1),
+        height: new Animated.Value(innerHeight),
+        width: new Animated.Value(innerWidth)
+      };
+      setAnimatedStyles(stylesToAnimate);
+      if (isAnimating.current) return;
+      isAnimating.current = true;
+      const opacityMotion = Animated.timing(stylesToAnimate.opacity, opacityConfig);
+      const widthMotion = Animated.timing(stylesToAnimate.width, sizeConfig);
+      const heightMotion = Animated.timing(stylesToAnimate.height, sizeConfig);
+      const animations = [opacityMotion, isOnlyItem ? heightMotion : widthMotion];
+      if (progressOpacity) {
+        const progressExitAnimation = Animated.timing(progressOpacity, opacityConfig);
+        if (totalItems === 2) {
+          animations.push(progressExitAnimation);
+        }
+      }
+      onMount(stylesToAnimate);
+      Animated.parallel(animations).start(() => {
+        isAnimating.current = false;
+        callbackFn == null || callbackFn(id);
+        onDismiss == null || onDismiss();
+        onMount(stylesToAnimate);
+        if (isOnlyItem) {
+          onDismissLastItem == null || onDismissLastItem();
+        }
+      });
+    });
+  }, [isOnlyItem, progressOpacity, totalItems, id, onDismiss, onMount, onDismissLastItem]);
+  const handleDismissPress = useCallback(() => {
+    handleDismiss();
+  }, [handleDismiss]);
+  const contextValue = useMemo(() => ({
+    dismiss: handleDismiss,
+    id
+  }), [handleDismiss, id]);
+  return /*#__PURE__*/_jsx(CarouselItemContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(Box, {
+      animated: true,
+      onLayout: onWrapperLayout,
+      style: animatedStyles,
+      testID: "CarouselItemWrapper-" + id,
+      children: /*#__PURE__*/_jsxs(Box, {
+        ref: innerBox,
+        animated: true,
+        flexShrink: 0,
+        paddingEnd: paddingEnd,
+        position: "relative",
+        testID: "CarouselItemInner-" + id,
+        width: width,
+        children: [showDismiss ? /*#__PURE__*/_jsx(CarouselControlsWrapper, {
+          animated: true,
+          justifyContent: "flex-end",
+          paddingEnd: 0.5,
+          style: dismissButtonStyles,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            transparent: true,
+            accessibilityHint: dismissButtonAccessibilityHint,
+            accessibilityLabel: dismissButtonAccessibilityLabel,
+            name: "close",
+            onPress: handleDismissPress,
+            testID: "CarouselItemDismiss-" + id
+          })
+        }) : null, /*#__PURE__*/_jsx(Box, {
+          paddingTop: 2,
+          children: children
+        })]
+      })
+    })
+  });
+});
+CarouselItem.displayName = 'CarouselItem';

package/esm/alpha/carousel/types.js

@@ -0,0 +1 @@
+export {};

package/esm/alpha/carousel/useCarousel.js

@@ -0,0 +1,25 @@
+import { useRef } from 'react';
+import { noop } from '@coinbase/cds-utils';
+/**
+ * Useful if you need to access internal data or methods from Carousel outside of its immediate children.
+ * @returns Object with internal data/methods from Carousel component.
+ * @example
+ * ```
+ * const carouselRef = useCarousel()
+ * const handlePress = () => carouselRef.current.scrollToId('item1');
+ * <Button onPress={handlePress}>Press me</Button>
+ * <Carousel carouselRef={carouselRef} />
+ * ```
+ */
+export const useCarousel = () => {
+  // Includes fallback data to avoid having to do ref.current?.scrollToId.
+  return useRef({
+    dismissedItems: new Set(),
+    length: 0,
+    resetDismissedItems: noop,
+    scrollToId: noop,
+    scrollTo: noop,
+    scrollToEnd: noop,
+    currentIndex: 0
+  });
+};

package/esm/alpha/carousel/useCarouselItem.js

@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import { isProduction, noop } from '@coinbase/cds-utils';
+import { CarouselItemContext } from './CarouselItem';
+
+/** Access the index and dismiss function for a CarouselItem.
+ * @example
+ * ```
+ * const MyCarouselItem = () => {
+ * const { id, dismiss } = useCarouselItem()
+ *  return <Card onPress={dismiss}><Text>{`Carousel item ${id}`}</Text></Card>
+ * }
+ *
+ * const MyCarousel = () => {
+ *  return (
+ *    <Carousel>
+ *      <MyCarouselItem />
+ *      <MyCarouselItem />
+ *      <MyCarouselItem />
+ *    </Carousel>
+ * )
+ * }
+ * ```
+ */
+export const useCarouselItem = () => {
+  const context = useContext(CarouselItemContext);
+  if (context === undefined) {
+    if (!isProduction()) {
+      console.error('useCarouselItem: Cannot use `useCarouselItem` outside of Carousel component.');
+    }
+    return {
+      id: '-1',
+      dismiss: noop
+    };
+  }
+  return context;
+};

package/esm/animation/AnimationProps.js

@@ -0,0 +1 @@
+export {};

package/esm/animation/Lottie.e2e.js

@@ -0,0 +1,2 @@
+import { LottieMock } from './mocks';
+export const Lottie = LottieMock;

package/esm/animation/Lottie.js

@@ -0,0 +1,55 @@
+const _excluded = ["autoplay", "colorFilters", "loop", "progress", "resizeMode", "source", "onAnimationFinish"];
+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 React, { forwardRef, memo, useMemo } from 'react';
+import { Animated } from 'react-native';
+import LottieView from 'lottie-react-native';
+import { Box } from '../layout/Box';
+import { useLottieColorFilters } from './useLottieColorFilters';
+import { jsx as _jsx } from "react/jsx-runtime";
+const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);
+const LottieContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+  let {
+      autoplay = false,
+      colorFilters,
+      loop = false,
+      progress,
+      resizeMode = 'contain',
+      source,
+      onAnimationFinish
+    } = _ref,
+    boxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const aspectRatio = source.w / source.h;
+  const lottieStyles = useMemo(() => ({
+    width: '100%',
+    height: '100%',
+    aspectRatio
+  }), [aspectRatio]);
+  return /*#__PURE__*/_jsx(Box, _extends({
+    aspectRatio: aspectRatio
+  }, boxProps, {
+    children: /*#__PURE__*/_jsx(AnimatedLottieView, {
+      ref: forwardedRef,
+      autoPlay: autoplay,
+      colorFilters: colorFilters,
+      loop: loop,
+      onAnimationFinish: onAnimationFinish,
+      progress: progress,
+      renderMode: "AUTOMATIC" // TODO: If huawei device, force to use SOFTWARE renderMode
+      ,
+      resizeMode: resizeMode,
+      source: source,
+      style: lottieStyles
+    })
+  }));
+}));
+export const Lottie = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const colorFilters = useLottieColorFilters(props.source, props.colorFilters);
+  return /*#__PURE__*/_jsx(LottieContent, _extends({
+    ref: forwardedRef
+  }, props, {
+    colorFilters: colorFilters
+  }));
+}));
+LottieContent.displayName = 'LottieContent';
+Lottie.displayName = 'Lottie';

package/esm/animation/LottieStatusAnimation.js

@@ -0,0 +1,29 @@
+const _excluded = ["status", "onFinish", "testID"];
+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 React from 'react';
+import { useStatusAnimationPoller } from '@coinbase/cds-common';
+import { tradeStatus } from '@coinbase/cds-lottie-files/tradeStatus';
+import { useLottie } from './useLottie';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LottieStatusAnimation = _ref => {
+  let {
+      status = 'loading',
+      onFinish,
+      testID
+    } = _ref,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    playMarkers,
+    Lottie
+  } = useLottie(tradeStatus);
+  const handlePolling = useStatusAnimationPoller({
+    status,
+    playMarkers,
+    onFinish
+  });
+  return /*#__PURE__*/_jsx(Lottie, _extends({}, otherProps, {
+    onAnimationFinish: handlePolling,
+    testID: testID
+  }));
+};

package/esm/animation/__stories__/Lottie.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as animations from '@coinbase/cds-lottie-files';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Box } from '../../layout/Box';
+import { Text } from '../../typography/Text';
+import { Lottie } from '../Lottie';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LottieScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      children: /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: Object.entries(animations).map(_ref => {
+          let [name, source] = _ref;
+          return /*#__PURE__*/_jsxs(Box, {
+            width: 200,
+            children: [/*#__PURE__*/_jsx(Text, {
+              font: "body",
+              children: name
+            }), /*#__PURE__*/_jsx(Lottie, {
+              autoplay: true,
+              loop: true,
+              height: 200,
+              source: source,
+              width: 200
+            })]
+          }, name);
+        })
+      })
+    })
+  });
+};
+export default LottieScreen;

package/esm/animation/__stories__/LottieStatusAnimation.stories.js

@@ -0,0 +1,39 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { join } from '@coinbase/cds-common';
+import { Button } from '../../buttons/Button';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { HStack } from '../../layout/HStack';
+import { Spacer } from '../../layout/Spacer';
+import { LottieStatusAnimation } from '../LottieStatusAnimation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const statuses = ['loading', 'success', 'failure', 'pending', 'cardSuccess'];
+const LottieStatusAnimationScreen = () => {
+  const [status, setStatus] = useState('loading');
+  const buttons = useMemo(() => {
+    return join(statuses.map(item => /*#__PURE__*/_jsx(Button, {
+      onPress: () => setStatus(item),
+      children: item
+    }, item)), /*#__PURE__*/_jsx(Spacer, {}));
+  }, []);
+  const [key, setKey] = useState(0);
+  const handleReset = useCallback(() => {
+    setKey(key + 1);
+    setStatus('loading');
+  }, [key]);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      children: [/*#__PURE__*/_jsx(LottieStatusAnimation, {
+        height: 250,
+        status: status
+      }, key), /*#__PURE__*/_jsx(HStack, {
+        flexWrap: "wrap",
+        children: buttons
+      }), /*#__PURE__*/_jsx(Button, {
+        onPress: handleReset,
+        variant: "secondary",
+        children: "Reset animation"
+      })]
+    })
+  });
+};
+export default LottieStatusAnimationScreen;

package/esm/animation/convertMotionConfig.js

@@ -0,0 +1,30 @@
+import { Easing } from 'react-native';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
+export const mobileCurves = {
+  global: Easing.bezier(...curves.global),
+  enterExpressive: Easing.bezier(...curves.enterExpressive),
+  enterFunctional: Easing.bezier(...curves.enterFunctional),
+  exitExpressive: Easing.bezier(...curves.exitExpressive),
+  exitFunctional: Easing.bezier(...curves.exitFunctional),
+  linear: Easing.bezier(...curves.linear)
+};
+export const convertMotionConfig = _ref => {
+  let {
+    toValue,
+    delay,
+    easing,
+    duration,
+    useNativeDriver = true,
+    oneOffDuration
+  } = _ref;
+  if (typeof toValue === 'string') {
+    throw Error('RN Animation methods does not work with string values. Please use interpolation instead.');
+  }
+  return {
+    toValue,
+    delay,
+    easing: mobileCurves[easing],
+    duration: oneOffDuration != null ? oneOffDuration : duration && durations[duration],
+    useNativeDriver
+  };
+};

package/esm/animation/createLottie.e2e.js

@@ -0,0 +1,2 @@
+import { createLottieMock } from './mocks';
+export const createLottie = createLottieMock;