@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.2

package/esm/animation/LottieStatusAnimation.js

@@ -25,11 +25,11 @@ export const LottieStatusAnimation = /*#__PURE__*/memo(_ref => {
     onFinish
   });
   const label = useMemo(() => accessibilityLabel != null ? accessibilityLabel : lottieStatusToAccessibilityLabel[status], [accessibilityLabel, status]);
-  return /*#__PURE__*/_jsx(Lottie, _extends({}, otherProps, {
+  return /*#__PURE__*/_jsx(Lottie, _extends({
     accessible: true,
     accessibilityLabel: label,
     accessibilityLiveRegion: "polite",
     onAnimationFinish: handlePolling,
     testID: testID
-  }));
+  }, otherProps));
 });

package/esm/banner/Banner.js

@@ -1,4 +1,4 @@
-const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "numberOfLines", "style", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginX", "marginY", "marginTop", "marginEnd", "marginBottom", "marginStart"];
+const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "numberOfLines", "style", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginX", "marginY", "marginTop", "marginEnd", "marginBottom", "marginStart", "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 React, { forwardRef, isValidElement, memo, useCallback, useMemo, useState } from 'react';
@@ -11,6 +11,18 @@ import { Box, HStack, VStack } from '../layout';
 import { Pressable } from '../system/Pressable';
 import { Link } from '../typography';
 import { Text } from '../typography/Text';
+
+/**
+ * Canonical props type for Banner.
+ *
+ * Note: docs docgen expects a `${ComponentName}Props` export (for Banner -> BannerProps)
+ * to generate styles selector metadata used by the docs Styles tab.
+ */
+
+/**
+ * @deprecated Use `BannerProps` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(_props, forwardedRef) {
   const mergedProps = useComponentConfig('Banner', _props);
@@ -38,7 +50,8 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
       marginTop,
       marginEnd,
       marginBottom,
-      marginStart
+      marginStart,
+      styles
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -98,98 +111,105 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Banner(
     marginStart
   }), [margin, marginX, marginY, marginTop, marginEnd, marginBottom, marginStart]);
   const borderBox = /*#__PURE__*/_jsx(Box, {
-    dangerouslySetBackground: theme.color[borderColor],
     pin: "left",
+    style: {
+      backgroundColor: theme.color[borderColor]
+    },
     width: 4
   });
-  const content = /*#__PURE__*/_jsxs(Box, _extends({}, showDismiss ? {} : marginStyles, {
-    children: [/*#__PURE__*/_jsxs(HStack, _extends({
-      ref: forwardedRef,
-      background: background,
-      borderRadius: borderRadius,
-      gap: 1,
-      paddingX: styleVariant === 'contextual' ? 2 : 3,
-      paddingY: 2,
-      style: style,
-      testID: testID
-    }, props, {
-      children: [/*#__PURE__*/_jsx(Box, {
-        accessibilityLabel: startIconAccessibilityLabel,
-        accessibilityRole: "image",
-        accessible: !!startIconAccessibilityLabel,
-        children: /*#__PURE__*/_jsx(Icon, {
-          active: startIconActive,
-          color: iconColor,
-          name: startIcon,
-          paddingX: 0.5,
-          paddingY: 0.25,
-          size: "s",
-          testID: testID + "-icon"
-        })
-      }), /*#__PURE__*/_jsxs(VStack, {
-        flexGrow: 1,
-        flexShrink: 1,
+  const content = /*#__PURE__*/_jsxs(HStack, _extends({
+    ref: forwardedRef,
+    background: background,
+    borderRadius: borderRadius,
+    gap: 1,
+    paddingX: styleVariant === 'contextual' ? 2 : 3,
+    paddingY: 2,
+    style: [style, styles == null ? void 0 : styles.content],
+    testID: testID
+  }, props, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      accessibilityLabel: startIconAccessibilityLabel,
+      accessibilityRole: "image",
+      accessible: !!startIconAccessibilityLabel,
+      style: styles == null ? void 0 : styles.start,
+      children: /*#__PURE__*/_jsx(Icon, {
+        active: startIconActive,
+        color: iconColor,
+        name: startIcon,
+        paddingX: 0.5,
+        paddingY: 0.25,
+        size: "s",
+        testID: testID + "-icon"
+      })
+    }), /*#__PURE__*/_jsxs(VStack, {
+      flexGrow: 1,
+      flexShrink: 1,
+      gap: 2,
+      justifyContent: "space-between",
+      style: styles == null ? void 0 : styles.body,
+      testID: testID + "-inner-end-box",
+      children: [/*#__PURE__*/_jsxs(VStack, {
         gap: 2,
-        justifyContent: "space-between",
-        testID: testID + "-inner-end-box",
+        style: styles == null ? void 0 : styles.middle,
+        testID: testID + "-content-box",
         children: [/*#__PURE__*/_jsxs(VStack, {
-          gap: 2,
-          testID: testID + "-content-box",
-          children: [/*#__PURE__*/_jsxs(VStack, {
-            gap: 0.5,
-            children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-              color: textColor,
-              font: "label1",
-              numberOfLines: 2,
-              children: title
-            }) : title, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-              color: textColor,
-              font: "label2",
-              numberOfLines: numberOfLines,
-              children: children
-            }) : children]
-          }), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
-            color: "fgMuted",
-            font: "legal",
-            numberOfLines: 1,
-            children: label
-          }) : label]
-        }), (!!clonedPrimaryAction || !!clonedSecondaryAction) && /*#__PURE__*/_jsxs(HStack, {
-          alignItems: "center",
-          gap: 2,
-          testID: testID + "-action",
-          children: [clonedPrimaryAction, clonedSecondaryAction]
-        })]
-      }), showDismiss && /*#__PURE__*/_jsx(Box, {
-        alignItems: "flex-start",
-        padding: 0.5,
-        children: /*#__PURE__*/_jsx(Pressable, {
-          accessibilityLabel: closeAccessibilityLabel,
-          accessibilityRole: "button",
-          background: "transparent",
-          borderRadius: 1000,
-          hitSlop: {
-            top: 15,
-            left: 15,
-            bottom: 15,
-            right: 15
-          },
-          onPress: handleOnDismiss,
-          testID: testID + "-dismiss-btn",
-          children: /*#__PURE__*/_jsx(Icon, {
-            color: iconButtonColor,
-            name: "close",
-            size: "s"
-          })
-        })
+          gap: 0.5,
+          children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+            color: textColor,
+            font: "label1",
+            numberOfLines: 2,
+            children: title
+          }) : title, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+            color: textColor,
+            font: "label2",
+            numberOfLines: numberOfLines,
+            children: children
+          }) : children]
+        }), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+          color: "fgMuted",
+          font: "legal",
+          numberOfLines: 1,
+          style: styles == null ? void 0 : styles.label,
+          children: label
+        }) : label]
+      }), (!!clonedPrimaryAction || !!clonedSecondaryAction) && /*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 2,
+        style: styles == null ? void 0 : styles.actions,
+        testID: testID + "-action",
+        children: [clonedPrimaryAction, clonedSecondaryAction]
       })]
-    })), styleVariant === 'global' && !showDismiss && borderBox]
+    }), showDismiss && /*#__PURE__*/_jsx(Box, {
+      alignItems: "flex-start",
+      padding: 0.5,
+      style: styles == null ? void 0 : styles.dismiss,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        accessibilityLabel: closeAccessibilityLabel,
+        accessibilityRole: "button",
+        background: "transparent",
+        borderRadius: 1000,
+        hitSlop: {
+          top: 15,
+          left: 15,
+          bottom: 15,
+          right: 15
+        },
+        onPress: handleOnDismiss,
+        testID: testID + "-dismiss-btn",
+        children: /*#__PURE__*/_jsx(Icon, {
+          color: iconButtonColor,
+          name: "close",
+          size: "s"
+        })
+      })
+    })]
   }));
-  return showDismiss ? /*#__PURE__*/_jsxs(Box, _extends({}, marginStyles, {
-    children: [/*#__PURE__*/_jsx(Collapsible, {
+  return /*#__PURE__*/_jsxs(Box, _extends({}, marginStyles, {
+    style: styles == null ? void 0 : styles.root,
+    children: [showDismiss ? /*#__PURE__*/_jsx(Collapsible, {
       collapsed: isCollapsed,
       testID: testID + "-collapsible",
       children: content
-    }), styleVariant === 'global' && borderBox]
-  })) : content;
+    }) : content, styleVariant === 'global' && borderBox]
+  }));
 }));

package/esm/buttons/AvatarButton.js

@@ -2,7 +2,6 @@ const _excluded = ["accessibilityLabel", "feedback", "src", "compact", "shape",
 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 { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Avatar } from '../media';
 import { Pressable } from '../system/Pressable';
@@ -20,19 +19,20 @@ export const AvatarButton = /*#__PURE__*/memo(_props => {
       name
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
-  const height = compact ? interactableHeight.compact : interactableHeight.regular;
   return /*#__PURE__*/_jsx(Pressable, _extends({
     accessibilityHint: accessibilityLabel,
     accessibilityLabel: accessibilityLabel,
     background: "transparent",
+    borderWidth: 0 // remove Pressable's default transparent border
+    ,
     feedback: feedback
   }, props, {
     children: /*#__PURE__*/_jsx(Avatar, {
       borderColor: borderColor,
       colorScheme: colorScheme,
-      dangerouslySetSize: height,
       name: name,
       shape: shape,
+      size: compact ? 'xl' : 'xxxl',
       src: src
     })
   }));

package/esm/buttons/Button.js

@@ -1,11 +1,9 @@
-const _excluded = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "height", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
+const _excluded = ["variant", "loading", "progressCircleSize", "transparent", "block", "compact", "children", "start", "startIcon", "startIconActive", "end", "endIcon", "endIconActive", "flush", "noScaleOnPress", "numberOfLines", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "background", "color", "style", "wrapperStyles", "feedback", "borderColor", "borderWidth", "borderRadius", "accessibilityLabel", "accessibilityHint", "padding", "paddingStart", "paddingEnd", "paddingTop", "paddingBottom", "paddingX", "paddingY"];
 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, isValidElement, memo, useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
-import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
-import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
@@ -17,8 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const defaultProgressCircleSize = 24;
 export const styles = StyleSheet.create({
   inline: {
-    width: 'auto',
-    minWidth: 64
+    width: 'auto'
   },
   block: {
     width: '100%',
@@ -61,9 +58,9 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       wrapperStyles,
       feedback = compact ? 'light' : 'normal',
       borderColor,
-      borderWidth = 100,
+      borderWidth = 0,
+      // remove Pressable's default transparent border
       borderRadius = compact ? 700 : 900,
-      height = interactableHeight[compact ? 'compact' : 'regular'],
       accessibilityLabel,
       accessibilityHint,
       padding,
@@ -71,8 +68,8 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       paddingEnd,
       paddingTop,
       paddingBottom,
-      paddingX: paddingXProp,
-      paddingY: paddingYProp
+      paddingX = compact ? 2 : 4,
+      paddingY = compact ? 1 : 2
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const theme = useTheme();
@@ -85,15 +82,7 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
   const borderColorValue = borderColor != null ? borderColor : variantStyle.borderColor;
   const sizingStyle = block ? styles.block : styles.inline;
   const justifyContent = flush ? 'flex-start' : hasIcon ? 'space-between' : 'center';
-  const {
-    paddingX,
-    paddingY,
-    marginStart,
-    marginEnd
-  } = getButtonSpacingProps({
-    compact,
-    flush
-  });
+  const flushMargin = flush ? -paddingX : undefined;
   const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
   const childrenNode = useMemo(() => /*#__PURE__*/isValidElement(children) && Boolean(children.props.children) ? children : /*#__PURE__*/_jsx(Text, {
     align: "center",
@@ -119,10 +108,9 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
     borderRadius: borderRadius,
     borderWidth: borderWidth,
     feedback: feedback,
-    height: height,
     loading: loading,
-    marginEnd: marginEnd,
-    marginStart: marginStart,
+    marginEnd: flush === 'end' ? flushMargin : undefined,
+    marginStart: flush === 'start' ? flushMargin : undefined,
     noScaleOnPress: noScaleOnPress,
     style: pressableStyle,
     transparentWhileInactive: transparent,
@@ -132,14 +120,13 @@ export const Button = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Button(
       alignItems: "center",
       flexWrap: "nowrap",
       justifyContent: justifyContent,
-      minHeight: height,
       padding: padding,
       paddingBottom: paddingBottom,
       paddingEnd: paddingEnd,
       paddingStart: paddingStart,
       paddingTop: paddingTop,
-      paddingX: paddingXProp != null ? paddingXProp : paddingX,
-      paddingY: paddingYProp != null ? paddingYProp : paddingY,
+      paddingX: paddingX,
+      paddingY: paddingY,
       style: sizingStyle,
       children: loading ? /*#__PURE__*/_jsx(ProgressCircle, {
         indeterminate: true,

package/esm/buttons/DefaultSlideButtonBackground.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, memo, useMemo } from 'react';
-import { animated, to } from '@react-spring/native';
+import React, { forwardRef, memo } from 'react';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import { Box } from '../layout/Box';
-import { TextHeadline } from '../typography/TextHeadline';
+import { Text } from '../typography/Text';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -17,8 +17,8 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwa
     borderBottomRightRadius
   } = _ref;
   const horizontalPadding = compact ? 7 : 9;
-  const animatedStyle = useMemo(() => ({
-    opacity: disabled ? 0.5 : to(progress, value => 1 - value)
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: disabled ? 0.5 : 1 - progress.value
   }), [progress, disabled]);
   return /*#__PURE__*/_jsx(Box, {
     ref: ref,
@@ -34,9 +34,10 @@ export const DefaultSlideButtonBackground = /*#__PURE__*/memo(/*#__PURE__*/forwa
     justifyContent: "center",
     style: style,
     width: "100%",
-    children: /*#__PURE__*/_jsx(animated.View, {
+    children: /*#__PURE__*/_jsx(Animated.View, {
       style: animatedStyle,
-      children: typeof uncheckedLabel !== 'string' ? uncheckedLabel : /*#__PURE__*/_jsx(TextHeadline, {
+      children: typeof uncheckedLabel !== 'string' ? uncheckedLabel : /*#__PURE__*/_jsx(Text, {
+        font: "headline",
         numberOfLines: 1,
         paddingEnd: horizontalPadding,
         paddingStart: horizontalPadding,

package/esm/buttons/DefaultSlideButtonHandle.js

@@ -1,21 +1,32 @@
 const _excluded = ["checked", "compact", "disabled", "style", "variant", "startUncheckedNode", "endCheckedNode", "checkedLabel", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"];
 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 React, { forwardRef, memo, useEffect, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withDelay, withSpring } from 'react-native-reanimated';
 import { variants } from '@coinbase/cds-common/tokens/button';
-import { animated, useChain, useSpring, useSpringRef } from '@react-spring/native';
+import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
 import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
-import { TextHeadline } from '../typography/TextHeadline';
+import { Text } from '../typography/Text';
 import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const slideButtonSpringConfig = {
+  stiffness: 300,
+  damping: 26,
+  mass: 1,
+  overshootClamping: true
+};
+
+/**
+ * @deprecated SlideButton no longer uses react-spring; this value no longer used by {@link DefaultSlideButtonHandle} but retained for migration only. Use {@link slideButtonSpringConfig} with Reanimated `withSpring` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const animationConfig = {
   tension: 300,
   clamp: true
 };
-const progressCircleSize = 24;
 export const styles = StyleSheet.create({
   base: {
     width: '100%',
@@ -39,25 +50,28 @@ export const SlideButtonHandleChecked = /*#__PURE__*/memo(_ref => {
     end,
     compact
   } = _ref;
-  const handleWidth = compact ? 40 : 56;
+  const theme = useTheme();
+  const iconSize = compact ? 's' : 'm';
+  const iconSizeValue = theme.iconSize[iconSize];
   return /*#__PURE__*/_jsxs(Box, {
     alignItems: "center",
     height: "100%",
     justifyContent: "center",
     width: "100%",
-    children: [typeof label !== 'string' ? label : /*#__PURE__*/_jsx(TextHeadline, {
+    children: [typeof label !== 'string' ? label : /*#__PURE__*/_jsx(Text, {
       color: "fgInverse",
+      font: "headline",
       children: label
     }), /*#__PURE__*/_jsx(Box, {
       alignItems: "center",
       height: "100%",
       justifyContent: "center",
+      padding: compact ? 1.5 : 2,
       pin: "right",
-      width: handleWidth,
       children: end != null ? end : /*#__PURE__*/_jsx(ProgressCircle, {
         indeterminate: true,
         color: "fgInverse",
-        size: progressCircleSize,
+        size: iconSizeValue,
         weight: "thin"
       })
     })]
@@ -69,13 +83,12 @@ export const SlideButtonHandleUnchecked = /*#__PURE__*/memo(_ref2 => {
     compact
   } = _ref2;
   const iconSize = compact ? 's' : 'm';
-  const handleWidth = compact ? 40 : 56;
   return /*#__PURE__*/_jsx(Box, {
     alignItems: "center",
     height: "100%",
     justifyContent: "center",
+    padding: compact ? 1.5 : 2,
     pin: "right",
-    width: handleWidth,
     children: start != null ? start : /*#__PURE__*/_jsx(Icon, {
       color: "fgInverse",
       name: "forwardArrow",
@@ -101,27 +114,24 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
     } = _ref3,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded);
   const backgroundColor = variants[variant].background;
-  const checkedSpringRef = useSpringRef();
-  const uncheckedSpringRef = useSpringRef();
-  const checkedSpring = useSpring({
-    opacity: checked ? 1 : 0,
-    ref: checkedSpringRef,
-    config: animationConfig,
-    immediate: !checked
-  });
-  const uncheckedSpring = useSpring({
-    opacity: checked ? 0 : 1,
-    ref: uncheckedSpringRef,
-    config: animationConfig
-  });
-  useChain(checked ? [uncheckedSpringRef, checkedSpringRef] : [checkedSpringRef, uncheckedSpringRef], [0, 0.1]);
+  const checkedOpacity = useSharedValue(checked ? 1 : 0);
+  const uncheckedOpacity = useSharedValue(checked ? 0 : 1);
+  useEffect(() => {
+    if (checked) {
+      uncheckedOpacity.value = withSpring(0, slideButtonSpringConfig);
+      checkedOpacity.value = withDelay(100, withSpring(1, slideButtonSpringConfig));
+    } else {
+      checkedOpacity.value = 0;
+      uncheckedOpacity.value = withDelay(100, withSpring(1, slideButtonSpringConfig));
+    }
+  }, [checked, checkedOpacity, uncheckedOpacity]);
   const containerStyle = useMemo(() => [styles.base, style], [style]);
-  const animatedCheckedStyle = useMemo(() => [styles.absoluteContainer, {
-    opacity: checkedSpring.opacity
-  }], [checkedSpring]);
-  const animatedUncheckedStyle = useMemo(() => [styles.absoluteContainer, {
-    opacity: uncheckedSpring.opacity
-  }], [uncheckedSpring]);
+  const animatedCheckedStyle = useAnimatedStyle(() => ({
+    opacity: checkedOpacity.value
+  }), [checkedOpacity]);
+  const animatedUncheckedStyle = useAnimatedStyle(() => ({
+    opacity: uncheckedOpacity.value
+  }), [uncheckedOpacity]);
   return /*#__PURE__*/_jsxs(Pressable, _extends({
     ref: ref,
     noScaleOnPress: true,
@@ -135,8 +145,8 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
     disabled: disabled,
     loading: checked
   }, props, {
-    children: [/*#__PURE__*/_jsx(animated.View, {
-      style: animatedCheckedStyle,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.absoluteContainer, animatedCheckedStyle],
       children: /*#__PURE__*/_jsx(SlideButtonHandleChecked, {
         compact: compact,
         disabled: disabled,
@@ -144,8 +154,8 @@ export const DefaultSlideButtonHandle = /*#__PURE__*/memo(/*#__PURE__*/forwardRe
         label: checkedLabel,
         variant: variant
       })
-    }), /*#__PURE__*/_jsx(animated.View, {
-      style: animatedUncheckedStyle,
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.absoluteContainer, animatedUncheckedStyle],
       children: /*#__PURE__*/_jsx(SlideButtonHandleUnchecked, {
         compact: compact,
         disabled: disabled,