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

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

@@ -4015,7 +4015,7 @@ function CardModalRotationContainer(props) {
   });
 }
 
-function NativeOpacityAnimation$2({
+function NativeOpacityAnimation$4({
   visible,
   children,
   onExited
@@ -4052,7 +4052,7 @@ function NativeOpacityAnimation$2({
   });
 }
 
-function NativeRotationAnimation$1({
+function NativeRotationAnimation$2({
   visible,
   children,
   onEntered,
@@ -4139,14 +4139,14 @@ function CardModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$2, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$4, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
           onPress: onClose
         })
       }), /*#__PURE__*/jsxRuntime.jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsxRuntime.jsx(NativeRotationAnimation$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(NativeRotationAnimation$2, {
           visible: isContentVisible,
           onExited: handleAnimationExited,
           onEntered: onEntered,
@@ -4300,17 +4300,320 @@ function CardModal({
     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]
-      })
-    })
+    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
+  });
+}
+
+function NativeOpacityAnimation$3({
+  visible,
+  children,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = React.useRef(false);
+  function handleAnimationFinished() {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  const opacityStyle = Animated.useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.cardModal.animation.overlay;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      opacity: Animated.withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Animated.Easing.bezier(x1, y1, x2, y2)
+      }, isFinished => {
+        if (!isFinished) return;
+        Animated.runOnJS(handleAnimationFinished)();
+      })
+    };
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [reactNative.StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation$1({
+  visible,
+  children,
+  onEntered,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = React.useRef(false);
+  const rotation = Animated.useSharedValue(0.8);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+      hasRunAnimationRef.current = true;
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  const animatedStyle = Animated.useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.cardModal.animation.content;
+    const [x1, y1, x2, y2] = easing;
+    rotation.value = Animated.withTiming(visible ? 0 : 5, {
+      duration,
+      easing: Animated.Easing.bezier(x1, y1, x2, y2)
+    }, isFinished => {
+      if (!isFinished) return;
+      Animated.runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: Animated.withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Animated.Easing.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: Animated.withTiming(visible ? 1 : 0.8, {
+          duration,
+          easing: Animated.Easing.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: `${rotation.value}deg`
+      }]
+    };
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
+function CardModal2Animation({
+  visible,
+  children,
+  onEnter,
+  onEntered,
+  onExit,
+  onExited,
+  onClose
+}) {
+  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
+    if (reactNative.Platform.OS === 'android' && onExited) onExited();
+  };
+  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$3, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(CardModal2RotationContainer, {
+        children: /*#__PURE__*/jsxRuntime.jsx(NativeRotationAnimation$1, {
+          visible: isContentVisible,
+          onExited: handleAnimationExited,
+          onEntered: onEntered,
+          children: children
+        })
+      })]
+    })
+  });
+}
+
+function CardModal2Behaviour({
+  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(CardModal2Animation, {
+      ...props,
+      visible: visible,
+      onExited: () => {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      onClose: onClose,
+      children: children
+    })
+  });
+}
+
+function CardModal2Body({
+  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 CardModal2Footer({
+  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 CardModal2Header({
+  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 CardModal2({
+  backgroundColor = 'kitt.uiBackgroundLight',
+  maxWidth = 'kitt.cardModal.maxWidth',
+  withoutShadow,
+  children,
+  ...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: children
   });
 }
-CardModal.Body = CardModalBody;
-CardModal.Header = CardModalHeader;
-CardModal.Footer = CardModalFooter;
-CardModal.ModalBehaviour = CardModalBehaviour;
+CardModal2.Body = CardModal2Body;
+CardModal2.Header = CardModal2Header;
+CardModal2.Footer = CardModal2Footer;
+CardModal2.Behaviour = CardModal2Behaviour;
 
 function getBackgroundColor$5({
   isDisabled,
@@ -4607,7 +4910,7 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-function NativeOpacityAnimation$1({
+function NativeOpacityAnimation$2({
   visible,
   children,
   onExited
@@ -4731,7 +5034,7 @@ function DialogModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$1, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$2, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
@@ -7803,36 +8106,313 @@ function FullscreenModalBody({
   const paddingTop = shouldHandleTopNotch ? Math.max(top, verticalPadding) : verticalPadding;
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     ...props,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    paddingTop: paddingTop,
-    paddingBottom: paddingBottom,
-    style: style,
-    children: children
+    paddingX: "kitt.fullscreenModal.horizontalPadding",
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    style: style,
+    children: children
+  });
+}
+
+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
+    })
+  });
+}
+
+function NativeOpacityAnimation$1({
+  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$1({
+  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
+  });
+}
+
+function FullscreenModalAnimation({
+  visible,
+  children,
+  onEnter,
+  onEntered,
+  onExit,
+  onExited
+}) {
+  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
+    if (reactNative.Platform.OS === 'android' && onExited) onExited();
+  };
+
+  // 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$1, {
+        visible: isContentVisible,
+        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+          onPress: handleAnimationExited
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(NativeSlideInAnimation$1, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        onEntered: onEntered,
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          flexGrow: 1,
+          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 FullscreenModalFooter({
-  shouldHandleBottomNotch = true,
-  hasSeparator = true,
-  children,
-  ...props
+function FullscreenModal({
+  body,
+  header,
+  footer,
+  backgroundColor,
+  contentContainer: ContentContainer = IdentityComponent
 }) {
-  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
+  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,
@@ -7909,7 +8489,7 @@ function NativeSlideInAnimation({
   });
 }
 
-function FullscreenModalAnimation({
+function FullscreenModal2Animation({
   visible,
   children,
   onEnter,
@@ -7967,7 +8547,7 @@ function FullscreenModalAnimation({
   });
 }
 
-function FullscreenModalBehaviour({
+function FullscreenModal2Behaviour({
   children,
   visible,
   onClose,
@@ -7983,7 +8563,7 @@ function FullscreenModalBehaviour({
   return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModalAnimation, {
+    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModal2Animation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -7995,7 +8575,51 @@ function FullscreenModalBehaviour({
   });
 }
 
-function FullscreenModalContainer({
+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({
   children,
   backgroundColor
 }) {
@@ -8019,7 +8643,30 @@ function FullscreenModalContainer({
   });
 }
 
-function FullscreenModalHeader({
+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({
   hasSeparator = true,
   isTransparent,
   title,
@@ -8078,38 +8725,19 @@ function FullscreenModalHeader({
   });
 }
 
-function FullscreenModal({
-  body,
-  header,
-  footer,
+function FullscreenModal2({
   backgroundColor,
-  contentContainer: ContentContainer = IdentityComponent
+  children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(FullscreenModalContainer, {
+  return /*#__PURE__*/jsxRuntime.jsx(FullscreenModal2Container, {
     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]
-      })]
-    })
+    children: children
   });
 }
-FullscreenModal.Header = FullscreenModalHeader;
-FullscreenModal.Footer = FullscreenModalFooter;
-FullscreenModal.Body = FullscreenModalBody;
-FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
+FullscreenModal2.Header = FullscreenModal2Header;
+FullscreenModal2.Footer = FullscreenModal2Footer;
+FullscreenModal2.Body = FullscreenModal2Body;
+FullscreenModal2.Behaviour = FullscreenModal2Behaviour;
 
 function GroupTags({
   children,
@@ -11548,7 +12176,7 @@ function NavigationModal({
     contentContainer: contentContainer
   });
 }
-function Header(props) {
+function Header$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
@@ -11557,7 +12185,7 @@ function Header(props) {
     ...props
   });
 }
-function Body(props) {
+function Body$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -11566,7 +12194,7 @@ function Body(props) {
     ...props
   });
 }
-function Footer(props) {
+function Footer$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -11575,11 +12203,106 @@ function Footer(props) {
     ...props
   });
 }
-NavigationModal.Header = Header;
-NavigationModal.Body = Body;
-NavigationModal.Footer = Footer;
+NavigationModal.Header = Header$1;
+NavigationModal.Body = Body$1;
+NavigationModal.Footer = Footer$1;
 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,
@@ -13965,6 +14688,7 @@ exports.Avatar = Avatar;
 exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.CardModal = CardModal;
+exports.CardModal2 = CardModal2;
 exports.Center = Center;
 exports.Checkbox = Checkbox;
 exports.ChoicesElements = ChoicesElements;
@@ -13979,6 +14703,7 @@ exports.FilePicker = FilePicker;
 exports.FlatList = FlatList;
 exports.Flex = Flex;
 exports.FullscreenModal = FullscreenModal;
+exports.FullscreenModal2 = FullscreenModal2;
 exports.GoogleMapsApiKeyProvider = GoogleMapsApiKeyProvider;
 exports.GoogleMapsAutocompleteProvider = GoogleMapsAutocompleteProvider;
 exports.GroupTags = GroupTags;
@@ -14018,6 +14743,7 @@ exports.Message = Message;
 exports.ModalBehaviour = ModalBehaviour;
 exports.NativeOnlyFlatList = FlatList;
 exports.NavigationModal = NavigationModal;
+exports.NavigationModal2 = NavigationModal2;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;