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

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

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SpinnerGapRegularIcon, UserRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, XRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
+import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions, Modal } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
@@ -3936,29 +3936,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,
@@ -3989,14 +3989,14 @@ function CardModalAnimation({
     children: [/*#__PURE__*/jsx(CSSTransition, {
       ...sharedProps,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames$3,
       children: /*#__PURE__*/jsx(Overlay, {
         onPress: onClose
       })
     }), /*#__PURE__*/jsx(CSSTransition, {
       ...sharedProps,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames$2,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4165,6 +4165,241 @@ 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
+  });
+}
+
+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__*/jsxs(View, {
+    ...props,
+    height: "100%",
+    justifyContent: "center",
+    children: [/*#__PURE__*/jsx(CSSTransition, {
+      ...sharedProps,
+      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+      classNames: opacityClassNames$2,
+      children: /*#__PURE__*/jsx(Overlay, {
+        onPress: onClose
+      })
+    }), /*#__PURE__*/jsx(CSSTransition, {
+      ...sharedProps,
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: contentAnimationClassNames$1,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(CardModal2RotationContainer, {
+        alignItems: "center",
+        margin: "auto",
+        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
+  });
+}
+CardModal2.Body = CardModal2Body;
+CardModal2.Header = CardModal2Header;
+CardModal2.Footer = CardModal2Footer;
+CardModal2.Behaviour = CardModal2Behaviour;
+
 function getBackgroundColor$6({
   isDisabled,
   isSelected,
@@ -7047,75 +7282,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__*/jsxs(View, {
+    ...props,
+    children: [/*#__PURE__*/jsx(CSSTransition, {
+      ...sharedProps,
+      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+      classNames: opacityClassNames,
+      children: /*#__PURE__*/jsx(Overlay, {
+        onPress: onClose
+      })
+    }), /*#__PURE__*/jsx(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] = 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 FullscreenModal({
+  body,
+  header,
+  footer,
+  backgroundColor,
+  contentContainer: ContentContainer = IdentityComponent
+}) {
+  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,
+  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.bezier(x1, y1, x2, y2)
+      })
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeSlideInAnimation({
+  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.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 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] = 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
   };
-  return /*#__PURE__*/jsxs(View, {
-    ...props,
-    children: [/*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsx(Overlay, {
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsx(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
+  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, {
+        visible: isContentVisible,
+        children: /*#__PURE__*/jsx(Overlay, {
+          onPress: handleAnimationExited
+        })
+      }), /*#__PURE__*/jsx(NativeSlideInAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        onEntered: onEntered,
+        children: /*#__PURE__*/jsx(View, {
+          flexGrow: 1,
+          children: children
+        })
+      })]
+    })
   });
 }
 
-function FullscreenModalBehaviour({
+function FullscreenModal2Behaviour({
   children,
   visible,
   onClose,
@@ -7131,7 +7642,7 @@ function FullscreenModalBehaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModalAnimation, {
+    children: /*#__PURE__*/jsx(FullscreenModal2Animation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -7143,7 +7654,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
 }) {
@@ -7167,7 +7722,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,
@@ -7226,38 +7804,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,
@@ -10800,7 +11359,7 @@ function NavigationModal({
     contentContainer: contentContainer
   });
 }
-function Header(props) {
+function Header$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
@@ -10809,7 +11368,7 @@ function Header(props) {
     ...props
   });
 }
-function Body(props) {
+function Body$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -10818,7 +11377,7 @@ function Body(props) {
     ...props
   });
 }
-function Footer(props) {
+function Footer$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -10827,11 +11386,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,
@@ -13049,5 +13703,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, 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, 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.web.mjs.map