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

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

@@ -3943,29 +3943,29 @@ function CardModalRotationContainer(props) {
   });
 }
 
-const contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
-const contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
-const contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
-const contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-const contentAnimationClassNames$1 = {
-  appear: contentAnimationEnter$1,
-  appearActive: contentAnimatioEnterActive$1,
-  enter: contentAnimationEnter$1,
-  enterActive: contentAnimatioEnterActive$1,
-  exit: contentAnimatioExit$1,
-  exitActive: contentAnimatioExitActive$1
+const contentAnimationEnter$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$2 = "kitt-u_opacityEnter_o1ae40dx";
-const opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
-const opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
-const opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
-const opacityClassNames$2 = {
-  appear: opacityEnter$2,
-  appearActive: opacityEnterActive$2,
-  enter: opacityEnter$2,
-  enterActive: opacityEnterActive$2,
-  exit: opacityExit$2,
-  exitActive: opacityExitActive$2
+const opacityEnter$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,
@@ -3996,14 +3996,14 @@ function CardModalAnimation({
     children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames$3,
       children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
         onPress: onClose
       })
     }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames$2,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4172,6 +4172,241 @@ 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 contentAnimationClassNames$1 = {
+  appear: contentAnimationEnter$1,
+  appearActive: contentAnimatioEnterActive$1,
+  enter: contentAnimationEnter$1,
+  enterActive: contentAnimatioEnterActive$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 opacityClassNames$2 = {
+  appear: opacityEnter$2,
+  appearActive: opacityEnterActive$2,
+  enter: opacityEnter$2,
+  enterActive: opacityEnterActive$2,
+  exit: opacityExit$2,
+  exitActive: opacityExitActive$2
+};
+function CardModal2Animation({
+  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$2,
+      children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+        onPress: onClose
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+      ...sharedProps,
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: contentAnimationClassNames$1,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: /*#__PURE__*/jsxRuntime.jsx(CardModal2RotationContainer, {
+        alignItems: "center",
+        margin: "auto",
+        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
+  });
+}
+CardModal2.Body = CardModal2Body;
+CardModal2.Header = CardModal2Header;
+CardModal2.Footer = CardModal2Footer;
+CardModal2.Behaviour = CardModal2Behaviour;
+
 function getBackgroundColor$6({
   isDisabled,
   isSelected,
@@ -7054,75 +7289,351 @@ function FullscreenModalFooter({
   });
 }
 
-const slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
-const slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
-const slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
-const slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
-const slideInClassNames = {
-  appear: slideInFromBottomEnter,
-  appearActive: slideInFromBottomEnterActive,
-  enter: slideInFromBottomEnter,
-  enterActive: slideInFromBottomEnterActive,
-  exit: slideInFromBottomExit,
-  exitActive: slideInFromBottomExitActive
-};
-const 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,
+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
+  });
+}
+
+function FullscreenModal2Animation({
   visible,
-  unmountOnExit = true,
-  isAnimationEnabled = true,
+  children,
   onEnter,
   onEntered,
   onExit,
-  onExited,
-  onClose,
-  ...props
+  onExited
 }) {
-  const theme = useTheme();
-  const {
-    animation
-  } = theme.kitt.fullscreenModal;
-  const sharedProps = {
-    in: visible,
-    appear,
-    unmountOnExit
+  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
   };
-  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
-    })]
+
+  // 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
+        })
+      })]
+    })
   });
 }
 
-function FullscreenModalBehaviour({
+function FullscreenModal2Behaviour({
   children,
   visible,
   onClose,
@@ -7138,7 +7649,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: () => {
@@ -7150,7 +7661,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
 }) {
@@ -7174,7 +7729,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,
@@ -7233,38 +7811,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,
@@ -10807,7 +11366,7 @@ function NavigationModal({
     contentContainer: contentContainer
   });
 }
-function Header(props) {
+function Header$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
@@ -10816,7 +11375,7 @@ function Header(props) {
     ...props
   });
 }
-function Body(props) {
+function Body$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -10825,7 +11384,7 @@ function Body(props) {
     ...props
   });
 }
-function Footer(props) {
+function Footer$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -10834,11 +11393,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,
@@ -13069,6 +13723,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;
@@ -13083,6 +13738,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;
@@ -13122,6 +13778,7 @@ exports.Message = Message;
 exports.ModalBehaviour = ModalBehaviour;
 exports.NativeOnlyFlatList = NativeOnlyFlatList;
 exports.NavigationModal = NavigationModal;
+exports.NavigationModal2 = NavigationModal2;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;