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

package/dist/index-node-20.10.es.mjs

@@ -3992,7 +3992,7 @@ function CardModalRotationContainer(props) {
   });
 }
 
-function NativeOpacityAnimation$2({
+function NativeOpacityAnimation$4({
   visible,
   children,
   onExited
@@ -4029,7 +4029,7 @@ function NativeOpacityAnimation$2({
   });
 }
 
-function NativeRotationAnimation$1({
+function NativeRotationAnimation$2({
   visible,
   children,
   onEntered,
@@ -4116,14 +4116,14 @@ function CardModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$4, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
           onPress: onClose
         })
       }), /*#__PURE__*/jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsx(NativeRotationAnimation$1, {
+        children: /*#__PURE__*/jsx(NativeRotationAnimation$2, {
           visible: isContentVisible,
           onExited: handleAnimationExited,
           onEntered: onEntered,
@@ -4277,17 +4277,320 @@ function CardModal({
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: /*#__PURE__*/jsx(ContentContainer, {
-      children: children || /*#__PURE__*/jsxs(Fragment, {
-        children: [header || null, body || null, footer || null]
-      })
-    })
+    children: /*#__PURE__*/jsx(ContentContainer, {
+      children: children || /*#__PURE__*/jsxs(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__*/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 = useRef(false);
+  function handleAnimationFinished() {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  const opacityStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.cardModal.animation.overlay;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, isFinished => {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation$1({
+  visible,
+  children,
+  onEntered,
+  onExited
+}) {
+  const theme = useTheme();
+  const hasRunAnimationRef = useRef(false);
+  const rotation = useSharedValue(0.8);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+      hasRunAnimationRef.current = true;
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  const animatedStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.cardModal.animation.content;
+    const [x1, y1, x2, y2] = easing;
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, isFinished => {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
+          duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: `${rotation.value}deg`
+      }]
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
+function CardModal2Animation({
+  visible,
+  children,
+  onEnter,
+  onEntered,
+  onExit,
+  onExited,
+  onClose
+}) {
+  const [isModalVisible, setIsModalVisible] = useState(visible);
+  const [isContentVisible, setIsContentVisible] = useState(false);
+  const handleAnimationExited = () => {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
+    if (Platform.OS === 'android' && onExited) onExited();
+  };
+  useEffect(() => {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: () => {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: () => {
+      if (onExited) onExited();
+    },
+    children: /*#__PURE__*/jsxs(View, {
+      position: "relative",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$3, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        children: /*#__PURE__*/jsx(Overlay, {
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsx(CardModal2RotationContainer, {
+        children: /*#__PURE__*/jsx(NativeRotationAnimation$1, {
+          visible: isContentVisible,
+          onExited: handleAnimationExited,
+          onEntered: onEntered,
+          children: children
+        })
+      })]
+    })
+  });
+}
+
+function CardModal2Behaviour({
+  children,
+  visible,
+  onClose,
+  onExited,
+  ...props
+}) {
+  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
+  useEffect(() => {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/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__*/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__*/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__*/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__*/jsxs(View, {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: !children && !left ? 'flex-end' : 'space-between',
+      children: [left ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: left
+      }) : null, /*#__PURE__*/jsxs(View, {
+        flexGrow: "1",
+        paddingRight: right ? 'kitt.2' : 0,
+        paddingLeft: left ? 'kitt.2' : 0,
+        children: [title ? /*#__PURE__*/jsx(Typography.Text, {
+          textAlign: !left && right ? 'left' : 'center',
+          variant: "bold",
+          children: title
+        }) : null, children]
+      }), right ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: right
+      }) : null]
+    })
+  });
+}
+
+function CardModal2({
+  backgroundColor = 'kitt.uiBackgroundLight',
+  maxWidth = 'kitt.cardModal.maxWidth',
+  withoutShadow,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/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,
@@ -4584,7 +4887,7 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-function NativeOpacityAnimation$1({
+function NativeOpacityAnimation$2({
   visible,
   children,
   onExited
@@ -4708,7 +5011,7 @@ function DialogModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$1, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
@@ -7780,36 +8083,313 @@ function FullscreenModalBody({
   const paddingTop = shouldHandleTopNotch ? Math.max(top, verticalPadding) : verticalPadding;
   return /*#__PURE__*/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
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/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__*/jsx(View, {
+      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
+      children: children
+    })
+  });
+}
+
+function NativeOpacityAnimation$1({
+  visible,
+  children
+}) {
+  const theme = useTheme();
+  const opacityStyle = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.fullscreenModal.animation.overlay;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      })
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeSlideInAnimation$1({
+  visible,
+  children,
+  onEntered,
+  onExited
+}) {
+  const theme = useTheme();
+  const {
+    height: wHeight
+  } = useWindowDimensions();
+  const hasRunAnimationRef = 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 = useAnimatedStyle(() => {
+    const {
+      duration,
+      easing
+    } = theme.kitt.fullscreenModal.animation.content;
+    const [x1, y1, x2, y2] = easing;
+    return {
+      transform: [{
+        translateY: withTiming(visible ? 0 : wHeight, {
+          duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        }, isFinished => {
+          if (!isFinished) return;
+          runOnJS(handleAnimationFinished)();
+        })
+      }]
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [{
+      transform: [{
+        translateY: wHeight
+      }]
+    }, translateStyle, {
+      width: '100%',
+      flex: 1
+    }],
+    children: children
+  });
+}
+
+function FullscreenModalAnimation({
+  visible,
+  children,
+  onEnter,
+  onEntered,
+  onExit,
+  onExited
+}) {
+  const [isModalVisible, setIsModalVisible] = useState(visible);
+  const [isContentVisible, setIsContentVisible] = useState(false);
+  const handleAnimationExited = () => {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
+    if (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
+  useEffect(() => {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: () => {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: () => {
+      if (onExited) onExited();
+    },
+    children: /*#__PURE__*/jsxs(View, {
+      position: "relative",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$1, {
+        visible: isContentVisible,
+        children: /*#__PURE__*/jsx(Overlay, {
+          onPress: handleAnimationExited
+        })
+      }), /*#__PURE__*/jsx(NativeSlideInAnimation$1, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        onEntered: onEntered,
+        children: /*#__PURE__*/jsx(View, {
+          flexGrow: 1,
+          children: children
+        })
+      })]
+    })
+  });
+}
+
+function FullscreenModalBehaviour({
+  children,
+  visible,
+  onClose,
+  onExited,
+  ...props
+}) {
+  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
+  useEffect(() => {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(FullscreenModalAnimation, {
+      ...props,
+      visible: visible,
+      onExited: () => {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      children: children
+    })
+  });
+}
+
+function FullscreenModalContainer({
+  children,
+  backgroundColor
+}) {
+  return /*#__PURE__*/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
+  } = useSafeAreaInsets();
+  const hasRight = Boolean(right);
+  const hasLeft = Boolean(left);
+  const hasContent = Boolean(title || children);
+  return /*#__PURE__*/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__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: !hasContent && !hasLeft ? 'flex-end' : 'space-between',
+      children: [left ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: left
+      }) : null, title ? /*#__PURE__*/jsx(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        paddingLeft: hasLeft ? 'kitt.2' : undefined,
+        paddingRight: hasRight ? 'kitt.2' : 0,
+        children: /*#__PURE__*/jsx(Typography.Text, {
+          variant: "bold",
+          textAlign: !hasLeft && hasRight ? 'left' : 'center',
+          children: title
+        })
+      }) : null, children ? /*#__PURE__*/jsx(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        alignItems: "center",
+        paddingLeft: hasLeft ? 'kitt.2' : undefined,
+        paddingRight: hasRight ? 'kitt.2' : undefined,
+        children: children
+      }) : null, right || left ? /*#__PURE__*/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
-  } = useSafeAreaInsets();
-  return /*#__PURE__*/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__*/jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
+  return /*#__PURE__*/jsx(FullscreenModalContainer, {
+    backgroundColor: backgroundColor,
+    children: /*#__PURE__*/jsxs(ContentContainer, {
+      children: [header ? /*#__PURE__*/jsx(View, {
+        children: header
+      }) : null, /*#__PURE__*/jsxs(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/jsx(ScrollView$2, {
+          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,
@@ -7886,7 +8466,7 @@ function NativeSlideInAnimation({
   });
 }
 
-function FullscreenModalAnimation({
+function FullscreenModal2Animation({
   visible,
   children,
   onEnter,
@@ -7944,7 +8524,7 @@ function FullscreenModalAnimation({
   });
 }
 
-function FullscreenModalBehaviour({
+function FullscreenModal2Behaviour({
   children,
   visible,
   onClose,
@@ -7960,7 +8540,7 @@ function FullscreenModalBehaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModalAnimation, {
+    children: /*#__PURE__*/jsx(FullscreenModal2Animation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -7972,7 +8552,51 @@ function FullscreenModalBehaviour({
   });
 }
 
-function FullscreenModalContainer({
+function FullscreenModal2Body({
+  children,
+  shouldHandleBottomNotch,
+  style,
+  shouldHandleTopNotch,
+  ...props
+}) {
+  const {
+    bottom,
+    top
+  } = 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__*/jsx(View, {
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: "space-between",
+    children: /*#__PURE__*/jsx(ScrollView$1, {
+      bounces: false,
+      contentContainerStyle: {
+        flexGrow: 1,
+        position: 'relative'
+      },
+      children: /*#__PURE__*/jsx(View, {
+        ...props,
+        paddingX: "kitt.fullscreenModal.horizontalPadding",
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        style: style,
+        children: children
+      })
+    })
+  });
+}
+
+function FullscreenModal2Container({
   children,
   backgroundColor
 }) {
@@ -7996,7 +8620,30 @@ function FullscreenModalContainer({
   });
 }
 
-function FullscreenModalHeader({
+function FullscreenModal2Footer({
+  shouldHandleBottomNotch = true,
+  hasSeparator = true,
+  children,
+  ...props
+}) {
+  const {
+    bottom
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/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__*/jsx(View, {
+      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
+      children: children
+    })
+  });
+}
+
+function FullscreenModal2Header({
   hasSeparator = true,
   isTransparent,
   title,
@@ -8055,38 +8702,19 @@ function FullscreenModalHeader({
   });
 }
 
-function FullscreenModal({
-  body,
-  header,
-  footer,
+function FullscreenModal2({
   backgroundColor,
-  contentContainer: ContentContainer = IdentityComponent
+  children
 }) {
-  return /*#__PURE__*/jsx(FullscreenModalContainer, {
+  return /*#__PURE__*/jsx(FullscreenModal2Container, {
     backgroundColor: backgroundColor,
-    children: /*#__PURE__*/jsxs(ContentContainer, {
-      children: [header ? /*#__PURE__*/jsx(View, {
-        children: header
-      }) : null, /*#__PURE__*/jsxs(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/jsx(ScrollView$2, {
-          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,
@@ -11525,7 +12153,7 @@ function NavigationModal({
     contentContainer: contentContainer
   });
 }
-function Header(props) {
+function Header$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
@@ -11534,7 +12162,7 @@ function Header(props) {
     ...props
   });
 }
-function Body(props) {
+function Body$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -11543,7 +12171,7 @@ function Body(props) {
     ...props
   });
 }
-function Footer(props) {
+function Footer$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -11552,11 +12180,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] = useState(visible);
+  const [shouldAppear, setShouldAppear] = useState(appear);
+  useEffect(() => {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/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__*/jsx(Component, {
+    backgroundColor: backgroundColor,
+    children: children
+  });
+}
+function Header(props) {
+  const Component = useBreakpointValue({
+    base: FullscreenModal2.Header,
+    small: CardModal2.Header
+  });
+  return /*#__PURE__*/jsx(Component, {
+    ...props
+  });
+}
+function Body(props) {
+  const Component = useBreakpointValue({
+    base: FullscreenModal2.Body,
+    small: CardModal2.Body
+  });
+  return /*#__PURE__*/jsx(Component, {
+    ...props
+  });
+}
+function Footer(props) {
+  const Component = useBreakpointValue({
+    base: FullscreenModal2.Footer,
+    small: CardModal2.Footer
+  });
+  return /*#__PURE__*/jsx(Component, {
+    ...props
+  });
+}
+NavigationModal2.Header = Header;
+NavigationModal2.Body = Body;
+NavigationModal2.Footer = Footer;
+NavigationModal2.ModalBehaviour = NavigationModal2Behaviour;
+
 function Notification({
   type,
   children,
@@ -13929,5 +14652,5 @@ function VerticalSteps({
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, CardModal2, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, FullscreenModal2, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, NavigationModal2, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-node-20.10.es.mjs.map