@artsy/palette-mobile 17.13.0 → 17.15.0

package/dist/elements/Chip/Chip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAnimationState, View } from "moti";
+import { View } from "moti";
+import { useState } from "react";
 import { useColor, useSpace } from "../../utils/hooks";
 import { Flex } from "../Flex";
 import { Image } from "../Image";
@@ -8,17 +9,18 @@ import { Touchable } from "../Touchable";
 export const Chip = ({ image, title, subtitle, onPress }) => {
     const color = useColor();
     const space = useSpace();
-    const animatedState = useAnimationState({
-        from: { backgroundColor: color("mono10") },
-        to: { backgroundColor: color("mono5") },
-    });
+    const [isPressed, setIsPressed] = useState(false);
+    const FROM_COLOR = color("mono10");
+    const TO_COLOR = color("mono5");
     const handleOnPressIn = () => {
-        animatedState.transitionTo("from");
+        setIsPressed(true);
     };
     const handleOnPressOut = () => {
-        animatedState.transitionTo("to");
+        setIsPressed(false);
     };
-    return (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: title, onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: _jsxs(Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && _jsx(Image, { src: image, width: 70, height: 70 }), _jsxs(View, { state: animatedState, style: {
+    return (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: title, onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: _jsxs(Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && _jsx(Image, { src: image, width: 70, height: 70 }), _jsxs(View, { animate: {
+                        backgroundColor: !isPressed ? TO_COLOR : FROM_COLOR,
+                    }, style: {
                         flex: 1,
                         padding: space(1),
                         justifyContent: "center",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "17.13.0",
+  "version": "17.15.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",
@@ -130,7 +130,7 @@
     "react-native-haptic-feedback": "1.14.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-reanimated": "^3.16.7",
-    "react-native-safe-area-context": "4.11.1",
+    "react-native-safe-area-context": "5.4.1",
     "react-native-svg": "15.10.1",
     "react-test-renderer": "18.3.1",
     "rimraf": "4.1.2",