@ornikar/kitt-universal 25.48.1-canary.430f6cd109998511d4c4ad7369a24908547c62f4.0 → 25.49.0

package/dist/index-node-20.10.cjs.web.js

@@ -3818,24 +3818,6 @@ function useStaticBottomSheet(Content) {
   };
 }
 
-/**
- * A utility component that returns its children without any modifications.
- *
- * This component acts as an identity function for React elements - it simply returns
- * whatever children are passed to it. It can be useful in conditional rendering patterns,
- * component composition, or as a placeholder in component hierarchies.
- *
- * @returns The children as they were passed in, without any wrapper elements
- *
- * @example
- * See CardModal and FullscreenModal for usage examples.
- */
-function IdentityComponent({
-  children
-}) {
-  return children;
-}
-
 const overflowHidden = "kitt-u_overflowHidden_otm3u3";
 function useBlockBodyScroll(shouldBlockScroll, isInitialRender) {
   react.useEffect(() => {
@@ -3943,253 +3925,10 @@ function CardModalRotationContainer(props) {
   });
 }
 
-const contentAnimationEnter$2 = "kitt-u_contentAnimationEnter_c11xxy4r";
-const contentAnimatioEnterActive$2 = "kitt-u_contentAnimatioEnterActive_cl52117";
-const contentAnimatioExit$2 = "kitt-u_contentAnimatioExit_cyjczep";
-const contentAnimatioExitActive$2 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-const contentAnimationClassNames$2 = {
-  appear: contentAnimationEnter$2,
-  appearActive: contentAnimatioEnterActive$2,
-  enter: contentAnimationEnter$2,
-  enterActive: contentAnimatioEnterActive$2,
-  exit: contentAnimatioExit$2,
-  exitActive: contentAnimatioExitActive$2
-};
-const opacityEnter$3 = "kitt-u_opacityEnter_o1ae40dx";
-const opacityEnterActive$3 = "kitt-u_opacityEnterActive_o1t4vl7b";
-const opacityExit$3 = "kitt-u_opacityExit_ogyytm1";
-const opacityExitActive$3 = "kitt-u_opacityExitActive_o18xvk52";
-const opacityClassNames$3 = {
-  appear: opacityEnter$3,
-  appearActive: opacityEnterActive$3,
-  enter: opacityEnter$3,
-  enterActive: opacityEnterActive$3,
-  exit: opacityExit$3,
-  exitActive: opacityExitActive$3
-};
-function CardModalAnimation({
-  children,
-  appear = true,
-  visible,
-  unmountOnExit = true,
-  isAnimationEnabled = true,
-  onEnter,
-  onEntered,
-  onExit,
-  onExited,
-  onClose,
-  ...props
-}) {
-  const theme = useTheme();
-  const {
-    animation
-  } = theme.kitt.cardModal;
-  const sharedProps = {
-    in: visible,
-    appear,
-    unmountOnExit
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(View, {
-    ...props,
-    height: "100%",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$3,
-      children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$2,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsxRuntime.jsx(CardModalRotationContainer, {
-        alignItems: "center",
-        margin: "auto",
-        children: children
-      })
-    })]
-  });
-}
-
-function CardModalBehaviour({
-  children,
-  visible,
-  onClose,
-  onExited,
-  ...props
-}) {
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = react.useState(visible);
-  react.useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(CardModalAnimation, {
-      ...props,
-      visible: visible,
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      onClose: onClose,
-      children: children
-    })
-  });
-}
-
-function CardModalBody({
-  children,
-  paddingX = {
-    base: 'kitt.4',
-    medium: 'kitt.6'
-  },
-  paddingY = 'kitt.4',
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(ScrollView, {
-    showsVerticalScrollIndicator: false,
-    _contentContainerStyle: {
-      paddingX,
-      paddingY
-    },
-    ...props,
-    children: children
-  });
-}
-
-function CardModalFooter({
-  children,
-  padding = {
-    base: 'kitt.4',
-    medium: 'kitt.2'
-  },
-  hasSeparator = true,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    marginTop: "kitt.2",
-    padding: padding,
-    borderTopWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
-    borderColor: "kitt.separator",
-    alignItems: {
-      base: undefined,
-      medium: 'flex-end'
-    },
-    children: children
-  });
-}
-
-function CardModalHeader({
-  children,
-  title,
-  paddingBottom = {
-    base: 'kitt.4',
-    medium: 'kitt.2'
-  },
-  hasSeparator = true,
-  right,
-  left,
-  ...props
-}) {
-  const defaultContainerPadding = {
-    base: 'kitt.4',
-    medium: 'kitt.6'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    padding: paddingBottom,
-    borderBottomWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
-    borderColor: "kitt.separator",
-    justifyContent: "center",
-    width: "100%",
-    height: "kitt.cardModal.header.height",
-    paddingRight: right ? 'kitt.2' : defaultContainerPadding,
-    paddingLeft: left ? 'kitt.2' : defaultContainerPadding,
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      alignItems: "center",
-      flexDirection: "row",
-      justifyContent: !children && !left ? 'flex-end' : 'space-between',
-      children: [left ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.iconButton.width",
-        children: left
-      }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
-        flexGrow: "1",
-        paddingRight: right ? 'kitt.2' : 0,
-        paddingLeft: left ? 'kitt.2' : 0,
-        children: [title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-          textAlign: !left && right ? 'left' : 'center',
-          variant: "bold",
-          children: title
-        }) : null, children]
-      }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.iconButton.width",
-        children: right
-      }) : null]
-    })
-  });
-}
-
-function CardModal({
-  backgroundColor = 'kitt.uiBackgroundLight',
-  maxWidth = 'kitt.cardModal.maxWidth',
-  withoutShadow,
-  children,
-  header,
-  body,
-  footer,
-  contentContainer: ContentContainer = IdentityComponent,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    overflow: "hidden",
-    backgroundColor: backgroundColor,
-    shadow: withoutShadow ? undefined : 'kitt.cardModal.shadow',
-    borderRadius: "kitt.cardModal.borderRadius",
-    width: "100%",
-    maxHeight: "100%",
-    maxWidth: maxWidth,
-    minHeight: "kitt.cardModal.minHeight",
-    children: /*#__PURE__*/jsxRuntime.jsx(ContentContainer, {
-      children: children || /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [header || null, body || null, footer || null]
-      })
-    })
-  });
-}
-CardModal.Body = CardModalBody;
-CardModal.Header = CardModalHeader;
-CardModal.Footer = CardModalFooter;
-CardModal.ModalBehaviour = CardModalBehaviour;
-
-function CardModal2RotationContainer(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    paddingX: "kitt.cardModal.overlayPadding.horizontal",
-    paddingY: "kitt.cardModal.overlayPadding.vertical",
-    maxWidth: "kitt.cardModal.maxWidthWithPadding",
-    width: "100%",
-    maxHeight: "100%",
-    _web: {
-      maxHeight: '100svh'
-    },
-    ...props
-  });
-}
-
-const contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c1qvsvvv";
-const contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_c1ka3ql7";
-const contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cn78c68";
-const contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_c14lwu6p";
+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,
@@ -4198,10 +3937,10 @@ const contentAnimationClassNames$1 = {
   exit: contentAnimatioExit$1,
   exitActive: contentAnimatioExitActive$1
 };
-const opacityEnter$2 = "kitt-u_opacityEnter_o1sh7i4q";
-const opacityEnterActive$2 = "kitt-u_opacityEnterActive_ow4hztn";
-const opacityExit$2 = "kitt-u_opacityExit_o1ct2t80";
-const opacityExitActive$2 = "kitt-u_opacityExitActive_ov5hhc8";
+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,
@@ -4210,7 +3949,7 @@ const opacityClassNames$2 = {
   exit: opacityExit$2,
   exitActive: opacityExitActive$2
 };
-function CardModal2Animation({
+function CardModalAnimation({
   children,
   appear = true,
   visible,
@@ -4251,7 +3990,7 @@ function CardModal2Animation({
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited,
-      children: /*#__PURE__*/jsxRuntime.jsx(CardModal2RotationContainer, {
+      children: /*#__PURE__*/jsxRuntime.jsx(CardModalRotationContainer, {
         alignItems: "center",
         margin: "auto",
         children: children
@@ -4260,7 +3999,7 @@ function CardModal2Animation({
   });
 }
 
-function CardModal2Behaviour({
+function CardModalBehaviour({
   children,
   visible,
   onClose,
@@ -4276,7 +4015,7 @@ function CardModal2Behaviour({
   return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(CardModal2Animation, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CardModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -4289,7 +4028,7 @@ function CardModal2Behaviour({
   });
 }
 
-function CardModal2Body({
+function CardModalBody({
   children,
   paddingX = {
     base: 'kitt.4',
@@ -4309,7 +4048,7 @@ function CardModal2Body({
   });
 }
 
-function CardModal2Footer({
+function CardModalFooter({
   children,
   padding = {
     base: 'kitt.4',
@@ -4332,7 +4071,7 @@ function CardModal2Footer({
   });
 }
 
-function CardModal2Header({
+function CardModalHeader({
   children,
   title,
   paddingBottom = {
@@ -4382,11 +4121,14 @@ function CardModal2Header({
   });
 }
 
-function CardModal2({
+function CardModal({
   backgroundColor = 'kitt.uiBackgroundLight',
   maxWidth = 'kitt.cardModal.maxWidth',
   withoutShadow,
   children,
+  header,
+  body,
+  footer,
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
@@ -4399,13 +4141,15 @@ function CardModal2({
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: children
+    children: children || /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [header || null, body || null, footer || null]
+    })
   });
 }
-CardModal2.Body = CardModal2Body;
-CardModal2.Header = CardModal2Header;
-CardModal2.Footer = CardModal2Footer;
-CardModal2.Behaviour = CardModal2Behaviour;
+CardModal.Body = CardModalBody;
+CardModal.Header = CardModalHeader;
+CardModal.Footer = CardModalFooter;
+CardModal.ModalBehaviour = CardModalBehaviour;
 
 function getBackgroundColor$6({
   isDisabled,
@@ -7269,371 +7013,95 @@ function FullscreenModalBody({
 function FullscreenModalFooter({
   shouldHandleBottomNotch = true,
   hasSeparator = true,
-  children,
-  ...props
-}) {
-  const {
-    bottom
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    borderTopColor: "kitt.separator",
-    borderTopWidth: hasSeparator ? 1 : undefined,
-    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
-    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
-    })
-  });
-}
-
-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 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
-};
-function FullscreenModalAnimation({
-  children,
-  appear = true,
-  visible,
-  unmountOnExit = true,
-  isAnimationEnabled = true,
-  onEnter,
-  onEntered,
-  onExit,
-  onExited,
-  onClose,
-  ...props
-}) {
-  const theme = useTheme();
-  const {
-    animation
-  } = theme.kitt.fullscreenModal;
-  const sharedProps = {
-    in: visible,
-    appear,
-    unmountOnExit
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(View, {
-    ...props,
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      ...sharedProps,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: slideInClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: children
-    })]
-  });
-}
-
-function FullscreenModalBehaviour({
-  children,
-  visible,
-  onClose,
-  onExited,
-  ...props
-}) {
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = react.useState(visible);
-  react.useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModalAnimation, {
-      ...props,
-      visible: visible,
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      children: children
-    })
-  });
-}
-
-function FullscreenModalContainer({
-  children,
-  backgroundColor
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    position: "relative",
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: "100%"
-    /*
-      Here we are setting the same min and max height because on web the content was overflowing and not scrolling
-      minHeight is needed to make the modal fullscreen
-      maxHeight limits the height to the viewport when the content is too long, this allows us to scroll inside
-      We use svh instead of vh because vh is the total height of the viewport, including the address bar in mobile web browsers
-      */,
-    _web: {
-      minHeight: '100svh',
-      maxHeight: '100svh'
-    },
-    backgroundColor: backgroundColor ?? 'kitt.uiBackgroundLight',
-    children: children
-  });
-}
-
-function FullscreenModalHeader({
-  hasSeparator = true,
-  isTransparent,
-  title,
-  children,
-  right,
-  left,
-  shouldHandleTopNotch = true,
-  ...props
-}) {
-  const {
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  const hasRight = Boolean(right);
-  const hasLeft = Boolean(left);
-  const hasContent = Boolean(title || children);
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    backgroundColor: isTransparent ? 'kitt.transparent' : 'kitt.uiBackgroundLight',
-    minHeight: "kitt.fullscreenModal.header.height",
-    width: "100%",
-    justifyContent: "center",
-    paddingTop: shouldHandleTopNotch ? top : undefined,
-    paddingRight: hasRight ? 'kitt.2' : 'kitt.fullscreenModal.horizontalPadding',
-    paddingLeft: hasLeft ? 'kitt.2' : 'kitt.fullscreenModal.horizontalPadding',
-    borderBottomColor: "kitt.separator",
-    borderBottomWidth: hasSeparator ? 1 : undefined,
-    ...props,
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: !hasContent && !hasLeft ? 'flex-end' : 'space-between',
-      children: [left ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.iconButton.width",
-        children: left
-      }) : null, title ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        paddingLeft: hasLeft ? 'kitt.2' : undefined,
-        paddingRight: hasRight ? 'kitt.2' : 0,
-        children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-          variant: "bold",
-          textAlign: !hasLeft && hasRight ? 'left' : 'center',
-          children: title
-        })
-      }) : null, children ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        alignItems: "center",
-        paddingLeft: hasLeft ? 'kitt.2' : undefined,
-        paddingRight: hasRight ? 'kitt.2' : undefined,
-        children: children
-      }) : null, right || left ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.iconButton.width",
-        children: right
-      }) : null]
-    })
-  });
-}
-
-function FullscreenModal({
-  body,
-  header,
-  footer,
-  backgroundColor,
-  contentContainer: ContentContainer = IdentityComponent
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(FullscreenModalContainer, {
-    backgroundColor: backgroundColor,
-    children: /*#__PURE__*/jsxRuntime.jsxs(ContentContainer, {
-      children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        children: header
-      }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
-          bounces: false,
-          contentContainerStyle: {
-            flexGrow: 1,
-            position: 'relative'
-          },
-          children: body
-        }), footer || null]
-      })]
-    })
-  });
-}
-FullscreenModal.Header = FullscreenModalHeader;
-FullscreenModal.Footer = FullscreenModalFooter;
-FullscreenModal.Body = FullscreenModalBody;
-FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
-
-function NativeOpacityAnimation({
-  visible,
-  children
-}) {
-  const theme = useTheme();
-  const opacityStyle = Animated.useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.fullscreenModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      opacity: Animated.withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Animated.Easing.bezier(x1, y1, x2, y2)
-      })
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [reactNative.StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeSlideInAnimation({
-  visible,
-  children,
-  onEntered,
-  onExited
-}) {
-  const theme = useTheme();
-  const {
-    height: wHeight
-  } = reactNative.useWindowDimensions();
-  const hasRunAnimationRef = react.useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-
-    // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  const translateStyle = Animated.useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.fullscreenModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      transform: [{
-        translateY: Animated.withTiming(visible ? 0 : wHeight, {
-          duration,
-          easing: Animated.Easing.bezier(x1, y1, x2, y2)
-        }, isFinished => {
-          if (!isFinished) return;
-          Animated.runOnJS(handleAnimationFinished)();
-        })
-      }]
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [{
-      transform: [{
-        translateY: wHeight
-      }]
-    }, translateStyle, {
-      width: '100%',
-      flex: 1
-    }],
-    children: children
+  children,
+  ...props
+}) {
+  const {
+    bottom
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    borderTopColor: "kitt.separator",
+    borderTopWidth: hasSeparator ? 1 : undefined,
+    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
+    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
+    paddingX: "kitt.fullscreenModal.horizontalPadding",
+    ...props,
+    children: /*#__PURE__*/jsxRuntime.jsx(View, {
+      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
+      children: children
+    })
   });
 }
 
-function FullscreenModal2Animation({
-  visible,
+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 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
+};
+function FullscreenModalAnimation({
   children,
+  appear = true,
+  visible,
+  unmountOnExit = true,
+  isAnimationEnabled = true,
   onEnter,
   onEntered,
   onExit,
-  onExited
+  onExited,
+  onClose,
+  ...props
 }) {
-  const [isModalVisible, setIsModalVisible] = react.useState(visible);
-  const [isContentVisible, setIsContentVisible] = react.useState(false);
-  const handleAnimationExited = () => {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
+  const theme = useTheme();
+  const {
+    animation
+  } = theme.kitt.fullscreenModal;
+  const sharedProps = {
+    in: visible,
+    appear,
+    unmountOnExit
   };
-
-  // When parent visibility is set to false, in order to have our exit animation we must in this order :
-  // 1 - run the exit animation
-  // 2 - once it is done, unmount the Modal
-  react.useEffect(() => {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: () => {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: () => {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation, {
-        visible: isContentVisible,
-        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-          onPress: handleAnimationExited
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(NativeSlideInAnimation, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        onEntered: onEntered,
-        children: /*#__PURE__*/jsxRuntime.jsx(View, {
-          flexGrow: 1,
-          children: children
-        })
-      })]
-    })
+  return /*#__PURE__*/jsxRuntime.jsxs(View, {
+    ...props,
+    children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+      ...sharedProps,
+      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+      classNames: opacityClassNames,
+      children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+        onPress: onClose
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+      ...sharedProps,
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: slideInClassNames,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: children
+    })]
   });
 }
 
-function FullscreenModal2Behaviour({
+function FullscreenModalBehaviour({
   children,
   visible,
   onClose,
@@ -7649,7 +7117,7 @@ function FullscreenModal2Behaviour({
   return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModal2Animation, {
+    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -7661,51 +7129,7 @@ function FullscreenModal2Behaviour({
   });
 }
 
-function FullscreenModal2Body({
-  children,
-  shouldHandleBottomNotch,
-  style,
-  shouldHandleTopNotch,
-  ...props
-}) {
-  const {
-    bottom,
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  const {
-    kitt: {
-      fullscreenModal: {
-        body: {
-          verticalPadding
-        }
-      }
-    }
-  } = useTheme();
-  const paddingBottom = shouldHandleBottomNotch ? Math.max(bottom, verticalPadding) : verticalPadding;
-  const paddingTop = shouldHandleTopNotch ? Math.max(top, verticalPadding) : verticalPadding;
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    flexGrow: 1,
-    flexShrink: 1,
-    justifyContent: "space-between",
-    children: /*#__PURE__*/jsxRuntime.jsx(nativeBase.ScrollView, {
-      bounces: false,
-      contentContainerStyle: {
-        flexGrow: 1,
-        position: 'relative'
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(View, {
-        ...props,
-        paddingX: "kitt.fullscreenModal.horizontalPadding",
-        paddingTop: paddingTop,
-        paddingBottom: paddingBottom,
-        style: style,
-        children: children
-      })
-    })
-  });
-}
-
-function FullscreenModal2Container({
+function FullscreenModalContainer({
   children,
   backgroundColor
 }) {
@@ -7729,30 +7153,7 @@ function FullscreenModal2Container({
   });
 }
 
-function FullscreenModal2Footer({
-  shouldHandleBottomNotch = true,
-  hasSeparator = true,
-  children,
-  ...props
-}) {
-  const {
-    bottom
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    borderTopColor: "kitt.separator",
-    borderTopWidth: hasSeparator ? 1 : undefined,
-    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
-    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
-    })
-  });
-}
-
-function FullscreenModal2Header({
+function FullscreenModalHeader({
   hasSeparator = true,
   isTransparent,
   title,
@@ -7811,19 +7212,35 @@ function FullscreenModal2Header({
   });
 }
 
-function FullscreenModal2({
-  backgroundColor,
-  children
+function FullscreenModal({
+  body,
+  header,
+  footer,
+  backgroundColor
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(FullscreenModal2Container, {
+  return /*#__PURE__*/jsxRuntime.jsxs(FullscreenModalContainer, {
     backgroundColor: backgroundColor,
-    children: children
+    children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      children: header
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexGrow: 1,
+      flexShrink: 1,
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+        bounces: false,
+        contentContainerStyle: {
+          flexGrow: 1,
+          position: 'relative'
+        },
+        children: body
+      }), footer || null]
+    })]
   });
 }
-FullscreenModal2.Header = FullscreenModal2Header;
-FullscreenModal2.Footer = FullscreenModal2Footer;
-FullscreenModal2.Body = FullscreenModal2Body;
-FullscreenModal2.Behaviour = FullscreenModal2Behaviour;
+FullscreenModal.Header = FullscreenModalHeader;
+FullscreenModal.Footer = FullscreenModalFooter;
+FullscreenModal.Body = FullscreenModalBody;
+FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
 function GroupTags({
   children,
@@ -11351,8 +10768,7 @@ function NavigationModal({
   body,
   backgroundColor,
   footer,
-  header,
-  contentContainer
+  header
 }) {
   const Component = useBreakpointValue({
     base: FullscreenModal,
@@ -11362,11 +10778,10 @@ function NavigationModal({
     body: body,
     backgroundColor: backgroundColor,
     footer: footer,
-    header: header,
-    contentContainer: contentContainer
+    header: header
   });
 }
-function Header$1(props) {
+function Header(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
@@ -11375,7 +10790,7 @@ function Header$1(props) {
     ...props
   });
 }
-function Body$1(props) {
+function Body(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -11384,7 +10799,7 @@ function Body$1(props) {
     ...props
   });
 }
-function Footer$1(props) {
+function Footer(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -11393,106 +10808,11 @@ function Footer$1(props) {
     ...props
   });
 }
-NavigationModal.Header = Header$1;
-NavigationModal.Body = Body$1;
-NavigationModal.Footer = Footer$1;
+NavigationModal.Header = Header;
+NavigationModal.Body = Body;
+NavigationModal.Footer = Footer;
 NavigationModal.ModalBehaviour = NavigationModalBehaviour;
 
-function NavigationModal2Behaviour({
-  children,
-  visible,
-  appear = true,
-  onExited,
-  onEnter,
-  onExit,
-  onClose,
-  ...props
-}) {
-  const AnimationComponent = useBreakpointValue({
-    base: FullscreenModal2Animation,
-    small: CardModal2Animation
-  });
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = react.useState(visible);
-  const [shouldAppear, setShouldAppear] = react.useState(appear);
-  react.useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(AnimationComponent, {
-      ...props,
-      appear: shouldAppear,
-      visible: visible,
-      onEnter: () => {
-        if (onEnter) onEnter();
-
-        // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
-        setShouldAppear(false);
-      },
-      onExit: () => {
-        if (onExit) onExit();
-
-        // Reset appear value to its original value for future modal display
-        setShouldAppear(appear);
-      },
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      onClose: onClose,
-      children: children
-    })
-  });
-}
-
-function NavigationModal2({
-  backgroundColor,
-  children
-}) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2,
-    small: CardModal2
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    backgroundColor: backgroundColor,
-    children: children
-  });
-}
-function Header(props) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2.Header,
-    small: CardModal2.Header
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...props
-  });
-}
-function Body(props) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2.Body,
-    small: CardModal2.Body
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...props
-  });
-}
-function Footer(props) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2.Footer,
-    small: CardModal2.Footer
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...props
-  });
-}
-NavigationModal2.Header = Header;
-NavigationModal2.Body = Body;
-NavigationModal2.Footer = Footer;
-NavigationModal2.ModalBehaviour = NavigationModal2Behaviour;
-
 function Notification({
   type,
   children,
@@ -13723,7 +13043,6 @@ exports.Avatar = Avatar;
 exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.CardModal = CardModal;
-exports.CardModal2 = CardModal2;
 exports.Center = Center;
 exports.Checkbox = Checkbox;
 exports.ChoicesElements = ChoicesElements;
@@ -13738,7 +13057,6 @@ exports.FilePicker = FilePicker;
 exports.FlatList = FlatList;
 exports.Flex = Flex;
 exports.FullscreenModal = FullscreenModal;
-exports.FullscreenModal2 = FullscreenModal2;
 exports.GoogleMapsApiKeyProvider = GoogleMapsApiKeyProvider;
 exports.GoogleMapsAutocompleteProvider = GoogleMapsAutocompleteProvider;
 exports.GroupTags = GroupTags;
@@ -13778,7 +13096,6 @@ exports.Message = Message;
 exports.ModalBehaviour = ModalBehaviour;
 exports.NativeOnlyFlatList = NativeOnlyFlatList;
 exports.NavigationModal = NavigationModal;
-exports.NavigationModal2 = NavigationModal2;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;