@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/media/__stories__/RemoteImageGroup.stories.js

@@ -0,0 +1,289 @@
+import React from 'react';
+import { assets, squareAssets } from '@coinbase/cds-common/internal/data/assets';
+import { avatarSizes } from '@coinbase/cds-common/internal/data/avatars';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { VStack } from '../../layout/VStack';
+import { Text } from '../../typography/Text';
+import { RemoteImage } from '../RemoteImage';
+import { RemoteImageGroup } from '../RemoteImageGroup';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const Circle = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Circle Custom Size: 32x32. Test that default max = 4."
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    shape: "circle",
+    size: 32,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.eth.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.btc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.dai.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.hbar.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.ltc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.uni.imageUrl
+    })]
+  })]
+});
+const CircleCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Circle Custom Size: 60x60"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    shape: "circle",
+    size: 60,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.eth.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.btc.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.dai.imageUrl
+    })]
+  })]
+});
+const CircleAvatarSize = () => /*#__PURE__*/_jsx(VStack, {
+  children: avatarSizes.map(size => /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsxs(Text, {
+      font: "label1",
+      children: ["Circle Avatar Size: ", size]
+    }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+      shape: "circle",
+      size: size,
+      children: [/*#__PURE__*/_jsx(RemoteImage, {
+        source: assets.eth.imageUrl
+      }), /*#__PURE__*/_jsx(RemoteImage, {
+        source: assets.btc.imageUrl
+      }), /*#__PURE__*/_jsx(RemoteImage, {
+        source: assets.dai.imageUrl
+      })]
+    })]
+  }, "circle-avatar-size-" + size))
+});
+const CircleMax = () => {
+  const maxSizes = [1, 2, 3, 4];
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: avatarSizes.map(avatarSize => /*#__PURE__*/_jsx(VStack, {
+      children: maxSizes.map(maxSize => /*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsxs(Text, {
+          font: "label1",
+          children: ["Max Size to Truncate: ", maxSize, ", RemoteImage size: ", avatarSize]
+        }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+          max: maxSize,
+          shape: "circle",
+          size: avatarSize,
+          children: [/*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.eth.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.dai.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.btc.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.sushi.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.eth.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.dai.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.btc.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.sushi.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.eth.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.dai.imageUrl
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: assets.btc.imageUrl
+          })]
+        })]
+      }, "remote-image-group-circle-max-size-" + maxSize + "-" + avatarSize))
+    }, "circle-max-" + avatarSize))
+  });
+};
+const CircleMaxDefaultCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "body",
+    children: "RemoteImageGroup excess element defaults to m of AvatarSize when size is not specified"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    max: 2,
+    shape: "circle",
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.eth.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.sushi.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.xrp.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.ltc.imageUrl
+    })]
+  })]
+});
+const MixAndMatchShapes = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "body",
+    children: "RemoteImage child shape takes precedence over RemoteImageGroup shape"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    shape: "circle",
+    size: "xxl",
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      shape: "squircle",
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.sushi.imageUrl
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      shape: "squircle",
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: assets.ltc.imageUrl
+    })]
+  })]
+});
+const Squircle = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Sqcircle Custom Size: 32x32"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    shape: "squircle",
+    size: 32,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    })]
+  })]
+});
+const SquircleCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "label1",
+    children: "Sqcircle Custom Size: 80x80"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    shape: "squircle",
+    size: 80,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    })]
+  })]
+});
+const SquircleAvatarSize = () => /*#__PURE__*/_jsx(VStack, {
+  children: avatarSizes.map(size => /*#__PURE__*/_jsxs(VStack, {
+    children: [/*#__PURE__*/_jsxs(Text, {
+      font: "label1",
+      children: ["Sqcircle Avatar Size: ", size]
+    }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+      shape: "squircle",
+      size: size,
+      children: [/*#__PURE__*/_jsx(RemoteImage, {
+        source: squareAssets.human1
+      }), /*#__PURE__*/_jsx(RemoteImage, {
+        source: squareAssets.human2
+      }), /*#__PURE__*/_jsx(RemoteImage, {
+        source: squareAssets.human1
+      })]
+    })]
+  }, "squircle-avatar-size-" + size))
+});
+const SquircleMax = () => {
+  const maxSizes = [1, 2, 3, 4];
+  return /*#__PURE__*/_jsx(VStack, {
+    children: avatarSizes.map(avatarSize => /*#__PURE__*/_jsx(VStack, {
+      children: maxSizes.map(maxSize => /*#__PURE__*/_jsxs(VStack, {
+        children: [/*#__PURE__*/_jsxs(Text, {
+          font: "label1",
+          children: ["Max Size to Truncate: ", maxSize, ", RemoteImage size: ", avatarSize]
+        }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+          max: maxSize,
+          shape: "squircle",
+          size: avatarSize,
+          children: [/*#__PURE__*/_jsx(RemoteImage, {
+            source: squareAssets.human2
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: squareAssets.human1
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: squareAssets.human2
+          }), /*#__PURE__*/_jsx(RemoteImage, {
+            source: squareAssets.human1
+          })]
+        })]
+      }, "remote-image-group-squircle-max-size-" + maxSize + "-" + avatarSize))
+    }, "squircle-max-" + avatarSize))
+  });
+};
+const SquircleMaxDefaultCustomSize = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "body",
+    children: "RemoteImageGroup excess element defaults to m of AvatarSize when size is not specified"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    max: 2,
+    shape: "squircle",
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    })]
+  })]
+});
+const SquircleMaxSetCustomMaxSize = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "body",
+    children: "Set a custom size of 36 for RemoteImageGroup excess component"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    max: 2,
+    shape: "squircle",
+    size: 36,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    })]
+  })]
+});
+const HideExcessWhenExceedThreshold = () => /*#__PURE__*/_jsxs(VStack, {
+  children: [/*#__PURE__*/_jsx(Text, {
+    font: "body",
+    children: "Excess component when size is smaller than a certain size looks funky"
+  }), /*#__PURE__*/_jsxs(RemoteImageGroup, {
+    max: 2,
+    shape: "squircle",
+    size: 19,
+    children: [/*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human1
+    }), /*#__PURE__*/_jsx(RemoteImage, {
+      source: squareAssets.human2
+    })]
+  })]
+});
+const All = () => /*#__PURE__*/_jsxs(VStack, {
+  gap: 7,
+  children: [/*#__PURE__*/_jsx(Circle, {}), /*#__PURE__*/_jsx(CircleCustomSize, {}), /*#__PURE__*/_jsx(CircleAvatarSize, {}), /*#__PURE__*/_jsx(CircleMax, {}), /*#__PURE__*/_jsx(CircleMaxDefaultCustomSize, {}), /*#__PURE__*/_jsx(Squircle, {}), /*#__PURE__*/_jsx(SquircleCustomSize, {}), /*#__PURE__*/_jsx(SquircleAvatarSize, {}), /*#__PURE__*/_jsx(SquircleMax, {}), /*#__PURE__*/_jsx(SquircleMaxDefaultCustomSize, {}), /*#__PURE__*/_jsx(SquircleMaxSetCustomMaxSize, {}), /*#__PURE__*/_jsx(HideExcessWhenExceedThreshold, {}), /*#__PURE__*/_jsx(MixAndMatchShapes, {})]
+});
+export { All };
+const RemoteImageGroupScreen = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "All",
+      children: /*#__PURE__*/_jsx(All, {})
+    })
+  });
+};
+export default RemoteImageGroupScreen;

package/esm/media/index.js

@@ -0,0 +1,4 @@
+export * from './Avatar';
+export * from './Carousel';
+export * from './RemoteImage';
+export * from './RemoteImageGroup';

package/esm/motion/AnimatedCaret.js

@@ -0,0 +1,61 @@
+const _excluded = ["rotate", "size", "color", "style"];
+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; }
+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); }
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { animateRotateConfig } from '@coinbase/cds-common/motion/animatedCaret';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { Icon } from '../icons';
+import { HStack } from '../layout/HStack';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useAnimatedCaretAnimation = () => {
+  const rotateValue = useRef(new Animated.Value(0)).current;
+  const animate = useCallback(rotate => {
+    Animated.timing(rotateValue, convertMotionConfig(_extends({}, animateRotateConfig, {
+      toValue: rotate
+    }))).start();
+  }, [rotateValue]);
+  const interpolatedRotateValue = rotateValue.interpolate({
+    inputRange: [0, 360],
+    outputRange: ['0deg', '360deg']
+  });
+  return useMemo(() => ({
+    animatedStyles: {
+      transform: [{
+        rotate: interpolatedRotateValue
+      }]
+    },
+    animate
+  }), [interpolatedRotateValue, animate]);
+};
+export const AnimatedCaret = /*#__PURE__*/memo(function AnimatedCaret(_ref) {
+  let {
+      rotate,
+      size = 's',
+      color = 'fgMuted',
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    animatedStyles,
+    animate
+  } = useAnimatedCaretAnimation();
+  const previousRotate = usePreviousValue(rotate);
+  useEffect(() => {
+    if (rotate !== previousRotate) animate(rotate);
+  }, [rotate, previousRotate, animate]);
+  return (
+    /*#__PURE__*/
+    // HStack to limit rotate boundary
+    _jsx(HStack, {
+      children: /*#__PURE__*/_jsx(Icon, _extends({
+        animated: true,
+        color: color,
+        name: "caretUp",
+        size: size,
+        style: [style, animatedStyles]
+      }, props))
+    })
+  );
+});

package/esm/motion/ColorSurge.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { colorSurgeEnterConfig, colorSurgeExitConfig } from '@coinbase/cds-common/motion/hint';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { Box } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export const ColorSurge = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function ColorSurge(_ref, ref) {
+  let {
+    background = 'bgPrimary',
+    disableAnimateOnMount = false
+  } = _ref;
+  const [backgroundState, setBackgroundState] = useState(background);
+  const opacity = useRef(new Animated.Value(colorSurgeEnterConfig.fromValue)).current;
+  const playAnimation = useCallback(async backgroundParam => {
+    if (backgroundParam) {
+      setBackgroundState(backgroundParam);
+    }
+    Animated.sequence([
+    /**
+     * Casting to workaround value type mismatch, string value is not allowed for mobile
+     * TODO: fix value mismatch and remove casting
+     */
+    Animated.timing(opacity, convertMotionConfig(colorSurgeEnterConfig)), Animated.timing(opacity, convertMotionConfig(colorSurgeExitConfig))]).start();
+  }, [opacity]);
+  useImperativeHandle(ref, () => ({
+    play: playAnimation
+  }), [playAnimation]);
+  useEffect(() => {
+    if (!disableAnimateOnMount) {
+      void playAnimation();
+    }
+  }, [playAnimation, disableAnimateOnMount]);
+  return /*#__PURE__*/_jsx(Box, {
+    animated: true,
+    background: backgroundState,
+    pin: "all",
+    style: {
+      opacity
+    }
+  });
+}));

package/esm/motion/Pulse.js

@@ -0,0 +1,54 @@
+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); }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { pulseTransitionConfig, pulseVariantOpacity } from '@coinbase/cds-common/motion/hint';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export const Pulse = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Pulse(_ref, ref) {
+  let {
+    children,
+    variant = 'moderate',
+    disableAnimateOnMount = false,
+    iterations,
+    motionConfig
+  } = _ref;
+  const [variantState, setVariantState] = useState(variant);
+  const opacity = useRef(new Animated.Value(0)).current;
+  const interpolatedOpacity = opacity.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [1, pulseVariantOpacity[variantState], 1]
+  });
+  const stopAnimation = useCallback(() => {
+    opacity.stopAnimation();
+    opacity.setValue(0);
+  }, [opacity]);
+  const playAnimation = useCallback(async variantParam => {
+    if (variantParam) {
+      setVariantState(variantParam);
+    }
+    stopAnimation();
+    Animated.loop(Animated.timing(opacity, convertMotionConfig(_extends({}, pulseTransitionConfig, motionConfig || {}, {
+      toValue: 1
+    }))), {
+      iterations: iterations === 0 ? 1 : iterations
+    }).start();
+  }, [iterations, opacity, stopAnimation, motionConfig]);
+  useEffect(() => {
+    if (!disableAnimateOnMount) {
+      void playAnimation();
+    }
+  }, [playAnimation, disableAnimateOnMount]);
+  useImperativeHandle(ref, () => ({
+    play: playAnimation,
+    stop: stopAnimation
+  }), [playAnimation, stopAnimation]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      opacity: interpolatedOpacity
+    },
+    children: children
+  });
+}));

package/esm/motion/Shake.js

@@ -0,0 +1,51 @@
+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); }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import { Animated } from 'react-native';
+import { shakeTransitionConfig, shakeTranslateX } from '@coinbase/cds-common/motion/hint';
+import { convertMotionConfig } from '../animation/convertMotionConfig';
+import { Haptics } from '../utils/haptics';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Please consult with the motion team in #ask-motion before using this component.
+ */
+export const Shake = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Shake(_ref, ref) {
+  let {
+    children,
+    disableAnimateOnMount = false
+  } = _ref;
+  const translateX = useRef(new Animated.Value(0)).current;
+  const interpolatedX = translateX.interpolate({
+    inputRange: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    outputRange: shakeTranslateX
+  });
+  const playAnimation = useCallback(async () => {
+    void Haptics.warningNotification();
+    Animated.timing(translateX, convertMotionConfig(_extends({}, shakeTransitionConfig, {
+      toValue: 9
+    }))).start(_ref2 => {
+      let {
+        finished
+      } = _ref2;
+      // reset value so it can be animated again
+      if (finished) {
+        translateX.setValue(0);
+      }
+    });
+  }, [translateX]);
+  useEffect(() => {
+    if (!disableAnimateOnMount) {
+      void playAnimation();
+    }
+  }, [playAnimation, disableAnimateOnMount]);
+  useImperativeHandle(ref, () => ({
+    play: playAnimation
+  }), [playAnimation]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        translateX: interpolatedX
+      }]
+    },
+    children: children
+  });
+}));

package/esm/motion/__stories__/AnimatedCaret.stories.js

@@ -0,0 +1,27 @@
+import React, { useCallback, useState } from 'react';
+import random from 'lodash/random';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Text } from '../../typography/Text';
+import { AnimatedCaret } from '../AnimatedCaret';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedCaretScreen = () => {
+  const [rotate, setRotate] = useState(0);
+  const handleRotate = useCallback(() => setRotate(random(0, 360)), []);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsxs(Example, {
+      title: "Press to rotate",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onPress: handleRotate,
+        children: "Rotate"
+      }), /*#__PURE__*/_jsxs(Text, {
+        font: "body",
+        children: ["Rotate: ", rotate, " \u02DA"]
+      }), /*#__PURE__*/_jsx(AnimatedCaret, {
+        rotate: rotate,
+        size: "l"
+      })]
+    })
+  });
+};
+export default AnimatedCaretScreen;