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

package/dist/index.es.web.js

@@ -11,10 +11,11 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 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';
@@ -22,7 +23,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';
@@ -856,15 +856,15 @@ var card = {
   }
 };
 
-var webAnimationContentDuration$2 = 400;
-var webAnimationContentEasing$2 = {
+var webAnimationContentDuration$1 = 400;
+var webAnimationContentEasing$1 = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-var webAnimationOverlayDuration$2 = 250;
-var webAnimationOverlayEasing$2 = {
+var webAnimationOverlayDuration$1 = 250;
+var webAnimationOverlayEasing$1 = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -899,12 +899,12 @@ var 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
     }
   }
 };
@@ -960,15 +960,15 @@ var choices = {
   }
 };
 
-var webAnimationContentDuration$1 = 400;
-var webAnimationContentEasing$1 = {
+var webAnimationContentDuration = 400;
+var webAnimationContentEasing = {
   x1: 0.77,
   y1: 0,
   x2: 0.175,
   y2: 1
 };
-var webAnimationOverlayDuration$1 = 250;
-var webAnimationOverlayEasing$1 = {
+var webAnimationOverlayDuration = 250;
+var webAnimationOverlayEasing = {
   x1: 0.42,
   y1: 0,
   x2: 1,
@@ -990,12 +990,12 @@ var dialogModal = {
   },
   animation: {
     overlay: {
-      duration: webAnimationOverlayDuration$1,
-      easing: webAnimationOverlayEasing$1
+      duration: webAnimationOverlayDuration,
+      easing: webAnimationOverlayEasing
     },
     content: {
-      duration: webAnimationContentDuration$1,
-      easing: webAnimationContentEasing$1
+      duration: webAnimationContentDuration,
+      easing: webAnimationContentEasing
     }
   }
 };
@@ -1904,20 +1904,6 @@ var forms = {
   timePicker: timePicker
 };
 
-var webAnimationContentDuration = 600;
-var webAnimationContentEasing = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-var webAnimationOverlayDuration = 250;
-var webAnimationOverlayEasing = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
 var fullscreenModal = {
   header: {
     height: 56
@@ -1931,12 +1917,22 @@ var 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
+      }
     }
   }
 };
@@ -2863,7 +2859,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$Q = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$P = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2876,7 +2872,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -3208,7 +3204,7 @@ var getTypographyTypeWithAncestorValue = function (type, typographyTypeInContext
   return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
 };
 
-var _excluded$P = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$O = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyVariantContext = /*#__PURE__*/createContext(undefined);
@@ -3333,7 +3329,7 @@ var TypographyBase = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     } : _ref2$type,
     variant = _ref2.variant,
     color = _ref2.color,
-    otherProps = _objectWithoutProperties(_ref2, _excluded$P);
+    otherProps = _objectWithoutProperties(_ref2, _excluded$O);
   var sx = useSx();
 
   // ancestors
@@ -3495,12 +3491,12 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$O = ["color", "size"],
+var _excluded$N = ["color", "size"],
   _excluded2$6 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var colorValue = getTypographyColorValue(color);
   var sx = useSx();
   var _sx = sx({
@@ -3540,7 +3536,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed, is
   return "".concat(baseKey, ".default");
 };
 
-var _excluded$N = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+var _excluded$M = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
 function ButtonContentChildren(_ref) {
   var type = _ref.type,
     icon = _ref.icon,
@@ -3640,7 +3636,7 @@ function ButtonContent(_ref2) {
     _ref2.isFocused;
     var innerSpacing = _ref2.innerSpacing,
     size = _ref2.size,
-    props = _objectWithoutProperties(_ref2, _excluded$N);
+    props = _objectWithoutProperties(_ref2, _excluded$M);
   var color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3941,7 +3937,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$M = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$L = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3952,7 +3948,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -4030,7 +4026,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$L = ["children", "layout", "reversed"];
+var _excluded$K = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -4062,7 +4058,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -4115,7 +4111,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$K = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$J = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -4178,7 +4174,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$K);
+    props = _objectWithoutProperties(_ref2, _excluded$J);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -4363,30 +4359,30 @@ var CardModalRotationContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 });
 
-var _excluded$J = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
-var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
-var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
-var contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-var contentAnimationClassNames$1 = {
-  appear: contentAnimationEnter$1,
-  appearActive: contentAnimatioEnterActive$1,
-  enter: contentAnimationEnter$1,
-  enterActive: contentAnimatioEnterActive$1,
-  exit: contentAnimatioExit$1,
-  exitActive: contentAnimatioExitActive$1
+var _excluded$I = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var contentAnimationEnter = "kitt-u_contentAnimationEnter_c11xxy4r";
+var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_cl52117";
+var contentAnimatioExit = "kitt-u_contentAnimatioExit_cyjczep";
+var contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_cpsy3dt";
+var contentAnimationClassNames = {
+  appear: contentAnimationEnter,
+  appearActive: contentAnimatioEnterActive,
+  enter: contentAnimationEnter,
+  enterActive: contentAnimatioEnterActive,
+  exit: contentAnimatioExit,
+  exitActive: contentAnimatioExitActive
 };
-var opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
-var opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
-var opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
-var opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
-var opacityClassNames$2 = {
-  appear: opacityEnter$2,
-  appearActive: opacityEnterActive$2,
-  enter: opacityEnter$2,
-  enterActive: opacityEnterActive$2,
-  exit: opacityExit$2,
-  exitActive: opacityExitActive$2
+var opacityEnter = "kitt-u_opacityEnter_o1ae40dx";
+var opacityEnterActive = "kitt-u_opacityEnterActive_o1t4vl7b";
+var opacityExit = "kitt-u_opacityExit_ogyytm1";
+var opacityExitActive = "kitt-u_opacityExitActive_o18xvk52";
+var opacityClassNames = {
+  appear: opacityEnter,
+  appearActive: opacityEnterActive,
+  enter: opacityEnter,
+  enterActive: opacityEnterActive,
+  exit: opacityExit,
+  exitActive: opacityExitActive
 };
 function CardModalAnimation(_ref) {
   var children = _ref.children,
@@ -4402,7 +4398,7 @@ function CardModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   // 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
   var overlayRef = useRef(null);
@@ -4420,7 +4416,7 @@ function CardModalAnimation(_ref) {
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames,
       children: /*#__PURE__*/jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -4428,7 +4424,7 @@ function CardModalAnimation(_ref) {
     })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4443,13 +4439,13 @@ function CardModalAnimation(_ref) {
   }));
 }
 
-var _excluded$I = ["children", "visible", "onClose", "onExited"];
+var _excluded$H = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4474,12 +4470,12 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$H = ["children", "padding"];
+var _excluded$G = ["children", "padding"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 'kitt.4' : _ref$padding,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4490,7 +4486,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$G = ["children", "padding", "hasSeparator"];
+var _excluded$F = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -4500,7 +4496,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4544,7 +4540,7 @@ var getButtonTypeAndVariant = function (iconColor) {
   }
 };
 
-var _excluded$F = ["color", "ariaLabel"];
+var _excluded$E = ["color", "ariaLabel"];
 /**
  * @deprecated IconButton should only be used as a navigation button
  * Other use cases should use a <Button> component with an icon
@@ -4553,7 +4549,7 @@ function IconButton(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color;
     _ref.ariaLabel;
-    var props = _objectWithoutProperties(_ref, _excluded$F);
+    var props = _objectWithoutProperties(_ref, _excluded$E);
   var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
     legacyColorToType = _getButtonTypeAndVari.type,
     legacyColorToVariant = _getButtonTypeAndVari.variant;
@@ -4660,7 +4656,7 @@ function CardModalHeader(props) {
   return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 
-var _excluded$E = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
+var _excluded$D = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -4668,7 +4664,7 @@ function CardModal(_ref) {
     maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
     withoutShadow = _ref.withoutShadow,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4884,11 +4880,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$D = ["direction", "contentContainerStyle"];
+var _excluded$C = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4963,86 +4959,165 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$C = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
-var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
-var contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
-var contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_c1almbvu";
-var contentAnimationClassNames = {
-  appear: contentAnimationEnter,
-  appearActive: contentAnimatioEnterActive,
-  enter: contentAnimationEnter,
-  enterActive: contentAnimatioEnterActive,
-  exit: contentAnimatioExit,
-  exitActive: contentAnimatioExitActive
-};
-var opacityEnter$1 = "kitt-u_opacityEnter_o9rkayr";
-var opacityEnterActive$1 = "kitt-u_opacityEnterActive_od7zvm9";
-var opacityExit$1 = "kitt-u_opacityExit_opddo9j";
-var opacityExitActive$1 = "kitt-u_opacityExitActive_o15v6ove";
-var opacityClassNames$1 = {
-  appear: opacityEnter$1,
-  appearActive: opacityEnterActive$1,
-  enter: opacityEnter$1,
-  enterActive: opacityEnterActive$1,
-  exit: opacityExit$1,
-  exitActive: opacityExitActive$1
-};
+function NativeOpacityAnimation(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var hasRunAnimationRef = useRef(false);
+  useEffect(function () {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  var opacityStyle = useAnimatedStyle(function () {
+    var _theme$kitt$dialogMod = theme.kitt.dialogModal.animation.overlay,
+      duration = _theme$kitt$dialogMod.duration,
+      easing = _theme$kitt$dialogMod.easing;
+    var x1 = easing.x1,
+      y1 = easing.y1,
+      x2 = easing.x2,
+      y2 = easing.y2;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, function (isFinished) {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
+    };
+  }, [theme, visible, handleAnimationFinished]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onEntered = _ref.onEntered,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var hasRunAnimationRef = useRef(false);
+  var rotation = useSharedValue(0.8);
+  useEffect(function () {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  var animatedStyle = useAnimatedStyle(function () {
+    var _theme$kitt$dialogMod = theme.kitt.dialogModal.animation.content,
+      duration = _theme$kitt$dialogMod.duration,
+      easing = _theme$kitt$dialogMod.easing;
+    var x1 = easing.x1,
+      y1 = easing.y1,
+      x2 = easing.x2,
+      y2 = easing.y2;
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration: duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, function (isFinished) {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
+          duration: duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: "".concat(rotation.value, "deg")
+      }]
+    };
+  }, [theme, visible, rotation, handleAnimationFinished]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
 function DialogModalAnimation(_ref) {
-  var children = _ref.children,
-    _ref$appear = _ref.appear,
-    appear = _ref$appear === void 0 ? true : _ref$appear,
-    visible = _ref.visible,
-    _ref$unmountOnExit = _ref.unmountOnExit,
-    unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
-    _ref$isAnimationEnabl = _ref.isAnimationEnabled,
-    isAnimationEnabled = _ref$isAnimationEnabl === void 0 ? true : _ref$isAnimationEnabl,
+  var visible = _ref.visible,
+    children = _ref.children,
     onEnter = _ref.onEnter,
     onEntered = _ref.onEntered,
     onExit = _ref.onExit,
     onExited = _ref.onExited,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$C);
-  // 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
-  var overlayRef = useRef(null);
-  var contentRef = useRef(null);
-  var theme = useTheme();
-  var animation = theme.kitt.dialogModal.animation;
-  var sharedProps = {
-    "in": visible,
-    appear: appear,
-    unmountOnExit: unmountOnExit
+    onClose = _ref.onClose;
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalVisible = _useState2[0],
+    setIsModalVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isContentVisible = _useState4[0],
+    setIsContentVisible = _useState4[1];
+  var handleAnimationExited = function () {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
   };
-  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
-    height: "100%",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, 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(function () {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: function () {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: function () {
+      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
+        })
+      })]
+    })
+  });
 }
 
 var _excluded$B = ["children", "visible", "onClose", "onExited"];
@@ -7749,30 +7824,24 @@ function FullscreenModalFooter(_ref) {
   }));
 }
 
+var 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"};
+
 var _excluded$i = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
-var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
-var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
-var slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
-var slideInClassNames = {
-  appear: slideInFromBottomEnter,
-  appearActive: slideInFromBottomEnterActive,
-  enter: slideInFromBottomEnter,
-  enterActive: slideInFromBottomEnterActive,
-  exit: slideInFromBottomExit,
-  exitActive: slideInFromBottomExitActive
+var 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']
 };
-var opacityEnter = "kitt-u_opacityEnter_okm44hr";
-var opacityEnterActive = "kitt-u_opacityEnterActive_o2w8t0i";
-var opacityExit = "kitt-u_opacityExit_o14r8iix";
-var opacityExitActive = "kitt-u_opacityExitActive_oim72y2";
-var opacityClassNames = {
-  appear: opacityEnter,
-  appearActive: opacityEnterActive,
-  enter: opacityEnter,
-  enterActive: opacityEnterActive,
-  exit: opacityExit,
-  exitActive: opacityExitActive
+var 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(_ref) {
   var children = _ref.children,
@@ -7800,28 +7869,41 @@ function FullscreenModalAnimation(_ref) {
     appear: appear,
     unmountOnExit: unmountOnExit
   };
-  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, 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
-      })
-    }))]
+
+  // CSS custom properties for theme-based animation values
+  var overlayEasing = animation.overlay.easing;
+  var contentEasing = animation.content.easing;
+  var cssVariables = {
+    '--overlay-duration': "".concat(animation.overlay.duration, "ms"),
+    '--overlay-easing': "cubic-bezier(".concat(overlayEasing.x1, ", ").concat(overlayEasing.y1, ", ").concat(overlayEasing.x2, ", ").concat(overlayEasing.y2, ")"),
+    '--content-duration': "".concat(animation.content.duration, "ms"),
+    '--content-easing': "cubic-bezier(".concat(contentEasing.x1, ", ").concat(contentEasing.y1, ", ").concat(contentEasing.x2, ", ").concat(contentEasing.y2, ")")
+  };
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      style: cssVariables,
+      children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        nodeRef: overlayRef,
+        timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+        classNames: overlayClassNames,
+        children: /*#__PURE__*/jsx(Overlay, {
+          ref: overlayRef,
+          onPress: onClose
+        })
+      })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, 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
+        })
+      }))]
+    })
   }));
 }