@ornikar/kitt-universal 31.4.0 → 31.4.1-canary.2fdbcaad37b7e76ba2442f7c56a4939349d51eb1.0

package/dist/index-node-22.17.es.web.css

@@ -6,23 +6,45 @@
 .kitt-u_opacityEnterActive_o1t4vl7b{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_opacityExit_ogyytm1{opacity:1;}
 .kitt-u_opacityExitActive_o18xvk52{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
-.kitt-u_contentAnimationEnter_c1i0gle8{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);}
-.kitt-u_contentAnimatioEnterActive_c1jmfkjw{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_contentAnimatioExit_cwjstxl{opacity:1;-webkit-transform:rotateZ(0) scale(1);-ms-transform:rotateZ(0) scale(1);transform:rotateZ(0) scale(1);}
-.kitt-u_contentAnimatioExitActive_c1almbvu{opacity:0;-webkit-transform:rotateZ(5deg) scale(0.8);-ms-transform:rotateZ(5deg) scale(0.8);transform:rotateZ(5deg) scale(0.8);-webkit-transition:all 400ms cubic-bezier(0.77,0,0.175,1);transition:all 400ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_opacityEnter_o9rkayr{opacity:0;}
-.kitt-u_opacityEnterActive_od7zvm9{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
-.kitt-u_opacityExit_opddo9j{opacity:1;}
-.kitt-u_opacityExitActive_o15v6ove{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_inputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_inputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_inputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_inputTextContainer_i1encr9g > *{-webkit-transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;}
-.kitt-u_slideInFromBottomEnter_s1717rto{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
-.kitt-u_slideInFromBottomEnterActive_sux6xgc{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 600ms cubic-bezier(0.77,0,0.175,1);-webkit-transition:transform 600ms cubic-bezier(0.77,0,0.175,1);transition:transform 600ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_slideInFromBottomExit_sl0lsxt{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
-.kitt-u_slideInFromBottomExitActive_srlzzmu{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 600ms cubic-bezier(0.77,0,0.175,1);-webkit-transition:transform 600ms cubic-bezier(0.77,0,0.175,1);transition:transform 600ms cubic-bezier(0.77,0,0.175,1);}
-.kitt-u_opacityEnter_okm44hr{opacity:0;}
-.kitt-u_opacityEnterActive_o2w8t0i{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,1,0,1);transition:opacity 250ms cubic-bezier(0.42,1,0,1);}
-.kitt-u_opacityExit_o14r8iix{opacity:1;}
-.kitt-u_opacityExitActive_oim72y2{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,1,0,1);transition:opacity 250ms cubic-bezier(0.42,1,0,1);}
+/* Overlay animation styles - uses CSS variables for theme values */
+.FullscreenModalAnimation-module_overlay-enter__L1J1X {
+  opacity: 0;
+}
+
+.FullscreenModalAnimation-module_overlay-enter-active__gDEVb {
+  opacity: 1;
+  transition: opacity var(--overlay-duration) var(--overlay-easing);
+}
+
+.FullscreenModalAnimation-module_overlay-exit__Qx1WE {
+  opacity: 1;
+}
+
+.FullscreenModalAnimation-module_overlay-exit-active__lFR3x {
+  opacity: 0;
+  transition: opacity var(--overlay-duration) var(--overlay-easing);
+}
+
+/* Content animation styles - uses CSS variables for theme values */
+.FullscreenModalAnimation-module_content-enter__JmCWa {
+  transform: translateY(100%);
+}
+
+.FullscreenModalAnimation-module_content-enter-active__iaNRs {
+  transform: translateY(0);
+  transition: transform var(--content-duration) var(--content-easing);
+}
+
+.FullscreenModalAnimation-module_content-exit__hB0wY {
+  transform: translateY(0);
+}
+
+.FullscreenModalAnimation-module_content-exit-active__BPVPo {
+  transform: translateY(100%);
+  transition: transform var(--content-duration) var(--content-easing);
+}
+
 .kitt-u_enter_ereraf{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;}
 .kitt-u_enterActive_e1jmsjrm{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
 .kitt-u_exit_e1mwnccz{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}

package/dist/index-node-22.17.es.web.mjs

@@ -3,10 +3,11 @@ import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, I
 export { useClipboard, useContrastText, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions } from 'react-native';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
+import Animated$1, { useAnimatedStyle, withTiming, Easing as Easing$1, runOnJS, useSharedValue, withSpring, interpolateColor, useAnimatedProps, withDelay, withRepeat, interpolate, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
 import { getDocumentAsync } from 'expo-document-picker';
@@ -14,7 +15,6 @@ import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
-import Animated$1, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing as Easing$1, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { useFloating, autoUpdate, offset, autoPlacement, shift, arrow } from '@floating-ui/react-dom';
@@ -838,15 +838,15 @@ const card = {
   }
 };
 
-const webAnimationContentDuration$2 = 400;
-const webAnimationContentEasing$2 = {
+const webAnimationContentDuration$1 = 400;
+const webAnimationContentEasing$1 = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-const webAnimationOverlayDuration$2 = 250;
-const webAnimationOverlayEasing$2 = {
+const webAnimationOverlayDuration$1 = 250;
+const webAnimationOverlayEasing$1 = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -881,12 +881,12 @@ const cardModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$2,
-      easing: webAnimationOverlayEasing$2
+      duration: webAnimationOverlayDuration$1,
+      easing: webAnimationOverlayEasing$1
     },
     content: {
-      duration: webAnimationContentDuration$2,
-      easing: webAnimationContentEasing$2
+      duration: webAnimationContentDuration$1,
+      easing: webAnimationContentEasing$1
     }
   }
 };
@@ -942,15 +942,15 @@ const choices = {
   }
 };
 
-const webAnimationContentDuration$1 = 400;
-const webAnimationContentEasing$1 = {
+const webAnimationContentDuration = 400;
+const webAnimationContentEasing = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-const webAnimationOverlayDuration$1 = 250;
-const webAnimationOverlayEasing$1 = {
+const webAnimationOverlayDuration = 250;
+const webAnimationOverlayEasing = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -972,12 +972,12 @@ const dialogModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$1,
-      easing: webAnimationOverlayEasing$1
+      duration: webAnimationOverlayDuration,
+      easing: webAnimationOverlayEasing
     },
     content: {
-      duration: webAnimationContentDuration$1,
-      easing: webAnimationContentEasing$1
+      duration: webAnimationContentDuration,
+      easing: webAnimationContentEasing
     }
   }
 };
@@ -1886,20 +1886,6 @@ const forms = {
   timePicker
 };
 
-const webAnimationContentDuration = 600;
-const webAnimationContentEasing = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-const webAnimationOverlayDuration = 250;
-const webAnimationOverlayEasing = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
 const fullscreenModal = {
   header: {
     height: 56
@@ -1913,12 +1899,22 @@ const fullscreenModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration,
-      easing: webAnimationOverlayEasing
+      duration: 250,
+      easing: {
+        x1: 0.42,
+        y1: 0,
+        x2: 1,
+        y2: 1
+      }
     },
     content: {
-      duration: webAnimationContentDuration,
-      easing: webAnimationContentEasing
+      duration: 600,
+      easing: {
+        x1: 0.77,
+        y1: 0,
+        x2: 0.175,
+        y2: 1
+      }
     }
   }
 };
@@ -4323,29 +4319,29 @@ const CardModalRotationContainer = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 
-const contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
-const contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
-const contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
-const contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-const contentAnimationClassNames$1 = {
-  appear: contentAnimationEnter$1,
-  appearActive: contentAnimatioEnterActive$1,
-  enter: contentAnimationEnter$1,
-  enterActive: contentAnimatioEnterActive$1,
-  exit: contentAnimatioExit$1,
-  exitActive: contentAnimatioExitActive$1
+const contentAnimationEnter = "kitt-u_contentAnimationEnter_c11xxy4r";
+const contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_cl52117";
+const contentAnimatioExit = "kitt-u_contentAnimatioExit_cyjczep";
+const contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_cpsy3dt";
+const contentAnimationClassNames = {
+  appear: contentAnimationEnter,
+  appearActive: contentAnimatioEnterActive,
+  enter: contentAnimationEnter,
+  enterActive: contentAnimatioEnterActive,
+  exit: contentAnimatioExit,
+  exitActive: contentAnimatioExitActive
 };
-const opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
-const opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
-const opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
-const opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
-const opacityClassNames$2 = {
-  appear: opacityEnter$2,
-  appearActive: opacityEnterActive$2,
-  enter: opacityEnter$2,
-  enterActive: opacityEnterActive$2,
-  exit: opacityExit$2,
-  exitActive: opacityExitActive$2
+const opacityEnter = "kitt-u_opacityEnter_o1ae40dx";
+const opacityEnterActive = "kitt-u_opacityEnterActive_o1t4vl7b";
+const opacityExit = "kitt-u_opacityExit_ogyytm1";
+const opacityExitActive = "kitt-u_opacityExitActive_o18xvk52";
+const opacityClassNames = {
+  appear: opacityEnter,
+  appearActive: opacityEnterActive,
+  enter: opacityEnter,
+  enterActive: opacityEnterActive,
+  exit: opacityExit,
+  exitActive: opacityExitActive
 };
 function CardModalAnimation({
   children,
@@ -4381,7 +4377,7 @@ function CardModalAnimation({
       ...sharedProps,
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames,
       children: /*#__PURE__*/jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -4390,7 +4386,7 @@ function CardModalAnimation({
       ...sharedProps,
       nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4927,87 +4923,167 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-const contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
-const contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
-const contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
-const contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_c1almbvu";
-const contentAnimationClassNames = {
-  appear: contentAnimationEnter,
-  appearActive: contentAnimatioEnterActive,
-  enter: contentAnimationEnter,
-  enterActive: contentAnimatioEnterActive,
-  exit: contentAnimatioExit,
-  exitActive: contentAnimatioExitActive
-};
-const opacityEnter$1 = "kitt-u_opacityEnter_o9rkayr";
-const opacityEnterActive$1 = "kitt-u_opacityEnterActive_od7zvm9";
-const opacityExit$1 = "kitt-u_opacityExit_opddo9j";
-const opacityExitActive$1 = "kitt-u_opacityExitActive_o15v6ove";
-const opacityClassNames$1 = {
-  appear: opacityEnter$1,
-  appearActive: opacityEnterActive$1,
-  enter: opacityEnter$1,
-  enterActive: opacityEnterActive$1,
-  exit: opacityExit$1,
-  exitActive: opacityExitActive$1
-};
-function DialogModalAnimation({
+function NativeOpacityAnimation({
+  visible,
   children,
-  appear = true,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = useRef(false);
+  useEffect(() => {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  const opacityStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.dialogModal.animation.overlay;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, isFinished => {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
+    };
+  }, [theme, visible, handleAnimationFinished]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation({
   visible,
-  unmountOnExit = true,
-  isAnimationEnabled = true,
+  children,
+  onEntered,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = useRef(false);
+  const rotation = useSharedValue(0.8);
+  useEffect(() => {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  const animatedStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.dialogModal.animation.content;
+    const {
+      x1,
+      y1,
+      x2,
+      y2
+    } = easing;
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, isFinished => {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
+          duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: `${rotation.value}deg`
+      }]
+    };
+  }, [theme, visible, rotation, handleAnimationFinished]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
+function DialogModalAnimation({
+  visible,
+  children,
   onEnter,
   onEntered,
   onExit,
   onExited,
-  onClose,
-  ...props
+  onClose
 }) {
-  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
-  // See https://github.com/reactjs/react-transition-group/issues/918
-  const overlayRef = useRef(null);
-  const contentRef = useRef(null);
-  const theme = useTheme();
-  const {
-    animation
-  } = theme.kitt.dialogModal;
-  const sharedProps = {
-    in: visible,
-    appear,
-    unmountOnExit
+  const [isModalVisible, setIsModalVisible] = useState(visible);
+  const [isContentVisible, setIsContentVisible] = useState(false);
+  const handleAnimationExited = () => {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
   };
-  return /*#__PURE__*/jsxs(View, {
-    ...props,
-    height: "100%",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(View, {
-        ref: contentRef,
-        alignItems: "center",
-        paddingX: "kitt.dialogModal.overlayPadding.horizontal",
-        paddingY: "kitt.dialogModal.overlayPadding.vertical",
-        margin: "auto",
-        children: children
-      })
-    })]
+  useEffect(() => {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: () => {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: () => {
+      if (onExited) onExited();
+    },
+    children: /*#__PURE__*/jsxs(View
+    // This is an ugly workaround to make the Modal calculate its height correctly on Android.
+    // This ugly workaround is used in FullScreenModalAnimation and CardModalAnimation as well
+    // TODO [expo@>=53]: Check if still needed
+    , {
+      height: undefined,
+      position: "relative",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        children: /*#__PURE__*/jsx(Overlay, {
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsx(NativeRotationAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        onEntered: onEntered,
+        children: /*#__PURE__*/jsx(View, {
+          paddingX: "kitt.dialogModal.overlayPadding.horizontal",
+          paddingY: "kitt.dialogModal.overlayPadding.vertical",
+          children: children
+        })
+      })]
+    })
   });
 }
 
@@ -7562,29 +7638,23 @@ function FullscreenModalFooter({
   });
 }
 
-const slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
-const slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
-const slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
-const slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
-const slideInClassNames = {
-  appear: slideInFromBottomEnter,
-  appearActive: slideInFromBottomEnterActive,
-  enter: slideInFromBottomEnter,
-  enterActive: slideInFromBottomEnterActive,
-  exit: slideInFromBottomExit,
-  exitActive: slideInFromBottomExitActive
+const styles$1 = {"overlay-enter":"FullscreenModalAnimation-module_overlay-enter__L1J1X","overlay-enter-active":"FullscreenModalAnimation-module_overlay-enter-active__gDEVb","overlay-exit":"FullscreenModalAnimation-module_overlay-exit__Qx1WE","overlay-exit-active":"FullscreenModalAnimation-module_overlay-exit-active__lFR3x","content-enter":"FullscreenModalAnimation-module_content-enter__JmCWa","content-enter-active":"FullscreenModalAnimation-module_content-enter-active__iaNRs","content-exit":"FullscreenModalAnimation-module_content-exit__hB0wY","content-exit-active":"FullscreenModalAnimation-module_content-exit-active__BPVPo"};
+
+const overlayClassNames = {
+  appear: styles$1['overlay-enter'],
+  appearActive: styles$1['overlay-enter-active'],
+  enter: styles$1['overlay-enter'],
+  enterActive: styles$1['overlay-enter-active'],
+  exit: styles$1['overlay-exit'],
+  exitActive: styles$1['overlay-exit-active']
 };
-const opacityEnter = "kitt-u_opacityEnter_okm44hr";
-const opacityEnterActive = "kitt-u_opacityEnterActive_o2w8t0i";
-const opacityExit = "kitt-u_opacityExit_o14r8iix";
-const opacityExitActive = "kitt-u_opacityExitActive_oim72y2";
-const opacityClassNames = {
-  appear: opacityEnter,
-  appearActive: opacityEnterActive,
-  enter: opacityEnter,
-  enterActive: opacityEnterActive,
-  exit: opacityExit,
-  exitActive: opacityExitActive
+const slideInClassNames = {
+  appear: styles$1['content-enter'],
+  appearActive: styles$1['content-enter-active'],
+  enter: styles$1['content-enter'],
+  enterActive: styles$1['content-enter-active'],
+  exit: styles$1['content-exit'],
+  exitActive: styles$1['content-exit-active']
 };
 function FullscreenModalAnimation({
   children,
@@ -7612,31 +7682,44 @@ function FullscreenModalAnimation({
     appear,
     unmountOnExit
   };
-  return /*#__PURE__*/jsxs(View, {
+
+  // CSS custom properties for theme-based animation values
+  const overlayEasing = animation.overlay.easing;
+  const contentEasing = animation.content.easing;
+  const cssVariables = {
+    '--overlay-duration': `${animation.overlay.duration}ms`,
+    '--overlay-easing': `cubic-bezier(${overlayEasing.x1}, ${overlayEasing.y1}, ${overlayEasing.x2}, ${overlayEasing.y2})`,
+    '--content-duration': `${animation.content.duration}ms`,
+    '--content-easing': `cubic-bezier(${contentEasing.x1}, ${contentEasing.y1}, ${contentEasing.x2}, ${contentEasing.y2})`
+  };
+  return /*#__PURE__*/jsx(View, {
     ...props,
-    children: [/*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: slideInClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(View, {
-        ref: contentRef,
-        children: children
-      })
-    })]
+    children: /*#__PURE__*/jsxs("div", {
+      style: cssVariables,
+      children: [/*#__PURE__*/jsx(CSSTransition, {
+        ...sharedProps,
+        nodeRef: overlayRef,
+        timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+        classNames: overlayClassNames,
+        children: /*#__PURE__*/jsx(Overlay, {
+          ref: overlayRef,
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsx(CSSTransition, {
+        ...sharedProps,
+        nodeRef: contentRef,
+        timeout: isAnimationEnabled ? animation.content.duration : 0,
+        classNames: slideInClassNames,
+        onEnter: onEnter,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExited: onExited,
+        children: /*#__PURE__*/jsx(View, {
+          ref: contentRef,
+          children: children
+        })
+      })]
+    })
   });
 }