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

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

@@ -748,19 +748,19 @@ const button = {
   },
   danger: {
     default: {
-      backgroundColor: lateOceanColorPalette.warmEmbraceLight1,
-      pressedBackgroundColor: lateOceanColorPalette.warmEmbrace,
-      hoverBackgroundColor: lateOceanColorPalette.warmEmbrace,
-      focusBorderColor: lateOceanColorPalette.warmEmbrace
+      backgroundColor: lateOceanColorPalette['coral.3'],
+      pressedBackgroundColor: lateOceanColorPalette['coral.4'],
+      hoverBackgroundColor: lateOceanColorPalette['coral.4'],
+      focusBorderColor: lateOceanColorPalette['coral.4']
     },
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
-      pressedBackgroundColor: 'rgba(255, 255, 255, 0.75)',
-      hoverBackgroundColor: 'rgba(255, 255, 255, 0.75)',
-      focusBorderColor: 'rgba(255, 255, 255, 0.5)',
-      color: lateOceanColorPalette.englishVermillon,
-      hoverColor: lateOceanColorPalette.englishVermillon,
-      activeColor: lateOceanColorPalette.englishVermillon
+      pressedBackgroundColor: colors.uiBackground,
+      hoverBackgroundColor: colors.hover,
+      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
+      color: lateOceanColorPalette['coral.9'],
+      hoverColor: lateOceanColorPalette['coral.9'],
+      activeColor: lateOceanColorPalette['coral.9']
     }
   },
   subtle: {
@@ -2113,7 +2113,7 @@ const typography = {
     'primary-light': colors.primaryLight,
     accent: colors.accent,
     success: colors.success,
-    danger: colors.danger,
+    danger: lateOceanColorPalette['coral.9'],
     warning: colors.warning
   },
   types: {
@@ -3824,24 +3824,6 @@ function Avatar({
   });
 }
 
-/**
- * A utility component that returns its children without any modifications.
- *
- * This component acts as an identity function for React elements - it simply returns
- * whatever children are passed to it. It can be useful in conditional rendering patterns,
- * component composition, or as a placeholder in component hierarchies.
- *
- * @returns The children as they were passed in, without any wrapper elements
- *
- * @example
- * See CardModal and FullscreenModal for usage examples.
- */
-function IdentityComponent({
-  children
-}) {
-  return children;
-}
-
 function BottomSheetComp({
   children: Content,
   hasScrollView = false,
@@ -3849,7 +3831,6 @@ function BottomSheetComp({
   hasHandle = true,
   enableDynamicSizing = true,
   snapPoints = ['100%'],
-  contentContainer: ContentContainer = IdentityComponent,
   ...rest
 }, ref) {
   const {
@@ -3880,11 +3861,9 @@ function BottomSheetComp({
     ...rest,
     topInset: top,
     children: props => /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
-      children: /*#__PURE__*/jsxRuntime.jsx(ContentContainer, {
-        children: typeof Content === 'function' ? /*#__PURE__*/jsxRuntime.jsx(Content, {
-          ...props?.data
-        }) : Content
-      })
+      children: typeof Content === 'function' ? /*#__PURE__*/jsxRuntime.jsx(Content, {
+        ...props?.data
+      }) : Content
     })
   });
 }
@@ -3989,330 +3968,19 @@ ModalBehaviour.CloseButton = CloseButton;
 function Overlay({
   onPress
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
-    accessibilityRole: "none",
-    position: "absolute",
-    top: "0",
-    left: "0",
-    right: "0",
-    bottom: "0",
-    backgroundColor: "kitt.overlay.dark",
-    onPress: onPress
-  });
-}
-
-function CardModalRotationContainer(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    paddingX: "kitt.cardModal.overlayPadding.horizontal",
-    paddingY: "kitt.cardModal.overlayPadding.vertical",
-    maxWidth: "kitt.cardModal.maxWidthWithPadding",
-    width: "100%",
-    maxHeight: "100%",
-    _web: {
-      maxHeight: '100svh'
-    },
-    ...props
-  });
-}
-
-function NativeOpacityAnimation$4({
-  visible,
-  children,
-  onExited
-}) {
-  const theme = useTheme();
-  const hasRunAnimationRef = React.useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) {
-      onExited();
-    }
-  }
-  const opacityStyle = Animated.useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.cardModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      opacity: Animated.withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Animated.Easing.bezier(x1, y1, x2, y2)
-      }, isFinished => {
-        if (!isFinished) return;
-        Animated.runOnJS(handleAnimationFinished)();
-      })
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [reactNative.StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeRotationAnimation$2({
-  visible,
-  children,
-  onEntered,
-  onExited
-}) {
-  const theme = useTheme();
-  const hasRunAnimationRef = React.useRef(false);
-  const rotation = Animated.useSharedValue(0.8);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  const animatedStyle = Animated.useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.cardModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
-    rotation.value = Animated.withTiming(visible ? 0 : 5, {
-      duration,
-      easing: Animated.Easing.bezier(x1, y1, x2, y2)
-    }, isFinished => {
-      if (!isFinished) return;
-      Animated.runOnJS(handleAnimationFinished)();
-    });
-    return {
-      opacity: Animated.withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Animated.Easing.bezier(x1, y1, x2, y2)
-      }),
-      transform: [{
-        scale: Animated.withTiming(visible ? 1 : 0.8, {
-          duration,
-          easing: Animated.Easing.bezier(x1, y1, x2, y2)
-        })
-      }, {
-        rotateZ: `${rotation.value}deg`
-      }]
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [animatedStyle],
-    children: children
-  });
-}
-
-function CardModalAnimation({
-  visible,
-  children,
-  onEnter,
-  onEntered,
-  onExit,
-  onExited,
-  onClose
-}) {
-  const [isModalVisible, setIsModalVisible] = React.useState(visible);
-  const [isContentVisible, setIsContentVisible] = React.useState(false);
-  const handleAnimationExited = () => {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
-    if (reactNative.Platform.OS === 'android' && onExited) onExited();
-  };
-  React.useEffect(() => {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: () => {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: () => {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$4, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-          onPress: onClose
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsxRuntime.jsx(NativeRotationAnimation$2, {
-          visible: isContentVisible,
-          onExited: handleAnimationExited,
-          onEntered: onEntered,
-          children: children
-        })
-      })]
-    })
-  });
-}
-
-function CardModalBehaviour({
-  children,
-  visible,
-  onClose,
-  onExited,
-  ...props
-}) {
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = React.useState(visible);
-  React.useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(CardModalAnimation, {
-      ...props,
-      visible: visible,
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      onClose: onClose,
-      children: children
-    })
-  });
-}
-
-function CardModalBody({
-  children,
-  paddingX = {
-    base: 'kitt.4',
-    medium: 'kitt.6'
-  },
-  paddingY = 'kitt.4',
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(ScrollView, {
-    showsVerticalScrollIndicator: false,
-    _contentContainerStyle: {
-      paddingX,
-      paddingY
-    },
-    ...props,
-    children: children
-  });
-}
-
-function CardModalFooter({
-  children,
-  padding = {
-    base: 'kitt.4',
-    medium: 'kitt.2'
-  },
-  hasSeparator = true,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    marginTop: "kitt.2",
-    padding: padding,
-    borderTopWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
-    borderColor: "kitt.separator",
-    alignItems: {
-      base: undefined,
-      medium: 'flex-end'
-    },
-    children: children
-  });
-}
-
-function CardModalHeader({
-  children,
-  title,
-  paddingBottom = {
-    base: 'kitt.4',
-    medium: 'kitt.2'
-  },
-  hasSeparator = true,
-  right,
-  left,
-  ...props
-}) {
-  const defaultContainerPadding = {
-    base: 'kitt.4',
-    medium: 'kitt.6'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    padding: paddingBottom,
-    borderBottomWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
-    borderColor: "kitt.separator",
-    justifyContent: "center",
-    width: "100%",
-    height: "kitt.cardModal.header.height",
-    paddingRight: right ? 'kitt.2' : defaultContainerPadding,
-    paddingLeft: left ? 'kitt.2' : defaultContainerPadding,
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      alignItems: "center",
-      flexDirection: "row",
-      justifyContent: !children && !left ? 'flex-end' : 'space-between',
-      children: [left ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.iconButton.width",
-        children: left
-      }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
-        flexGrow: "1",
-        paddingRight: right ? 'kitt.2' : 0,
-        paddingLeft: left ? 'kitt.2' : 0,
-        children: [title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-          textAlign: !left && right ? 'left' : 'center',
-          variant: "bold",
-          children: title
-        }) : null, children]
-      }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.iconButton.width",
-        children: right
-      }) : null]
-    })
-  });
-}
-
-function CardModal({
-  backgroundColor = 'kitt.uiBackgroundLight',
-  maxWidth = 'kitt.cardModal.maxWidth',
-  withoutShadow,
-  children,
-  header,
-  body,
-  footer,
-  contentContainer: ContentContainer = IdentityComponent,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    ...props,
-    overflow: "hidden",
-    backgroundColor: backgroundColor,
-    shadow: withoutShadow ? undefined : 'kitt.cardModal.shadow',
-    borderRadius: "kitt.cardModal.borderRadius",
-    width: "100%",
-    maxHeight: "100%",
-    maxWidth: maxWidth,
-    minHeight: "kitt.cardModal.minHeight",
-    children: /*#__PURE__*/jsxRuntime.jsx(ContentContainer, {
-      children: children || /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [header || null, body || null, footer || null]
-      })
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    accessibilityRole: "none",
+    position: "absolute",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    backgroundColor: "kitt.overlay.dark",
+    onPress: onPress
   });
 }
-CardModal.Body = CardModalBody;
-CardModal.Header = CardModalHeader;
-CardModal.Footer = CardModalFooter;
-CardModal.ModalBehaviour = CardModalBehaviour;
 
-function CardModal2RotationContainer(props) {
+function CardModalRotationContainer(props) {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     paddingX: "kitt.cardModal.overlayPadding.horizontal",
     paddingY: "kitt.cardModal.overlayPadding.vertical",
@@ -4326,7 +3994,7 @@ function CardModal2RotationContainer(props) {
   });
 }
 
-function NativeOpacityAnimation$3({
+function NativeOpacityAnimation$2({
   visible,
   children,
   onExited
@@ -4413,7 +4081,7 @@ function NativeRotationAnimation$1({
   });
 }
 
-function CardModal2Animation({
+function CardModalAnimation({
   visible,
   children,
   onEnter,
@@ -4450,13 +4118,13 @@ function CardModal2Animation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$3, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$2, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
           onPress: onClose
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(CardModal2RotationContainer, {
+      }), /*#__PURE__*/jsxRuntime.jsx(CardModalRotationContainer, {
         children: /*#__PURE__*/jsxRuntime.jsx(NativeRotationAnimation$1, {
           visible: isContentVisible,
           onExited: handleAnimationExited,
@@ -4468,7 +4136,7 @@ function CardModal2Animation({
   });
 }
 
-function CardModal2Behaviour({
+function CardModalBehaviour({
   children,
   visible,
   onClose,
@@ -4484,7 +4152,7 @@ function CardModal2Behaviour({
   return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(CardModal2Animation, {
+    children: /*#__PURE__*/jsxRuntime.jsx(CardModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -4497,7 +4165,7 @@ function CardModal2Behaviour({
   });
 }
 
-function CardModal2Body({
+function CardModalBody({
   children,
   paddingX = {
     base: 'kitt.4',
@@ -4517,7 +4185,7 @@ function CardModal2Body({
   });
 }
 
-function CardModal2Footer({
+function CardModalFooter({
   children,
   padding = {
     base: 'kitt.4',
@@ -4540,7 +4208,7 @@ function CardModal2Footer({
   });
 }
 
-function CardModal2Header({
+function CardModalHeader({
   children,
   title,
   paddingBottom = {
@@ -4590,11 +4258,14 @@ function CardModal2Header({
   });
 }
 
-function CardModal2({
+function CardModal({
   backgroundColor = 'kitt.uiBackgroundLight',
   maxWidth = 'kitt.cardModal.maxWidth',
   withoutShadow,
   children,
+  header,
+  body,
+  footer,
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
@@ -4607,13 +4278,15 @@ function CardModal2({
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: children
+    children: children || /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [header || null, body || null, footer || null]
+    })
   });
 }
-CardModal2.Body = CardModal2Body;
-CardModal2.Header = CardModal2Header;
-CardModal2.Footer = CardModal2Footer;
-CardModal2.Behaviour = CardModal2Behaviour;
+CardModal.Body = CardModalBody;
+CardModal.Header = CardModalHeader;
+CardModal.Footer = CardModalFooter;
+CardModal.ModalBehaviour = CardModalBehaviour;
 
 function getBackgroundColor$5({
   isDisabled,
@@ -4910,7 +4583,7 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-function NativeOpacityAnimation$2({
+function NativeOpacityAnimation$1({
   visible,
   children,
   onExited
@@ -5034,7 +4707,7 @@ function DialogModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$2, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$1, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
@@ -8097,322 +7770,45 @@ function FullscreenModalBody({
     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, {
-    ...props,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    paddingTop: paddingTop,
-    paddingBottom: paddingBottom,
-    style: style,
-    children: children
-  });
-}
-
-function FullscreenModalFooter({
-  shouldHandleBottomNotch = true,
-  hasSeparator = true,
-  children,
-  ...props
-}) {
-  const {
-    bottom
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    borderTopColor: "kitt.separator",
-    borderTopWidth: hasSeparator ? 1 : undefined,
-    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
-    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
-    })
-  });
-}
-
-function NativeOpacityAnimation$1({
-  visible,
-  children
-}) {
-  const theme = useTheme();
-  const opacityStyle = Animated.useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.fullscreenModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      opacity: Animated.withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Animated.Easing.bezier(x1, y1, x2, y2)
-      })
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [reactNative.StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeSlideInAnimation$1({
-  visible,
-  children,
-  onEntered,
-  onExited
-}) {
-  const theme = useTheme();
-  const {
-    height: wHeight
-  } = reactNative.useWindowDimensions();
-  const hasRunAnimationRef = React.useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-
-    // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  const translateStyle = Animated.useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.fullscreenModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      transform: [{
-        translateY: Animated.withTiming(visible ? 0 : wHeight, {
-          duration,
-          easing: Animated.Easing.bezier(x1, y1, x2, y2)
-        }, isFinished => {
-          if (!isFinished) return;
-          Animated.runOnJS(handleAnimationFinished)();
-        })
-      }]
-    };
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
-    style: [{
-      transform: [{
-        translateY: wHeight
-      }]
-    }, translateStyle, {
-      width: '100%',
-      flex: 1
-    }],
-    children: children
-  });
-}
-
-function FullscreenModalAnimation({
-  visible,
-  children,
-  onEnter,
-  onEntered,
-  onExit,
-  onExited
-}) {
-  const [isModalVisible, setIsModalVisible] = React.useState(visible);
-  const [isContentVisible, setIsContentVisible] = React.useState(false);
-  const handleAnimationExited = () => {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
-    if (reactNative.Platform.OS === 'android' && onExited) onExited();
-  };
-
-  // When parent visibility is set to false, in order to have our exit animation we must in this order :
-  // 1 - run the exit animation
-  // 2 - once it is done, unmount the Modal
-  React.useEffect(() => {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: () => {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: () => {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsxRuntime.jsx(NativeOpacityAnimation$1, {
-        visible: isContentVisible,
-        children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
-          onPress: handleAnimationExited
-        })
-      }), /*#__PURE__*/jsxRuntime.jsx(NativeSlideInAnimation$1, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        onEntered: onEntered,
-        children: /*#__PURE__*/jsxRuntime.jsx(View, {
-          flexGrow: 1,
-          children: children
-        })
-      })]
-    })
-  });
-}
-
-function FullscreenModalBehaviour({
-  children,
-  visible,
-  onClose,
-  onExited,
-  ...props
-}) {
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = React.useState(visible);
-  React.useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModalAnimation, {
-      ...props,
-      visible: visible,
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      children: children
-    })
-  });
-}
-
-function FullscreenModalContainer({
-  children,
-  backgroundColor
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    position: "relative",
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: "100%"
-    /*
-      Here we are setting the same min and max height because on web the content was overflowing and not scrolling
-      minHeight is needed to make the modal fullscreen
-      maxHeight limits the height to the viewport when the content is too long, this allows us to scroll inside
-      We use svh instead of vh because vh is the total height of the viewport, including the address bar in mobile web browsers
-      */,
-    _web: {
-      minHeight: '100svh',
-      maxHeight: '100svh'
-    },
-    backgroundColor: backgroundColor ?? 'kitt.uiBackgroundLight',
+          verticalPadding
+        }
+      }
+    }
+  } = useTheme();
+  const paddingBottom = shouldHandleBottomNotch ? Math.max(bottom, verticalPadding) : verticalPadding;
+  const paddingTop = shouldHandleTopNotch ? Math.max(top, verticalPadding) : verticalPadding;
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    ...props,
+    paddingX: "kitt.fullscreenModal.horizontalPadding",
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    style: style,
     children: children
   });
 }
 
-function FullscreenModalHeader({
+function FullscreenModalFooter({
+  shouldHandleBottomNotch = true,
   hasSeparator = true,
-  isTransparent,
-  title,
   children,
-  right,
-  left,
-  shouldHandleTopNotch = true,
   ...props
 }) {
   const {
-    top
+    bottom
   } = 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,
+    borderTopColor: "kitt.separator",
+    borderTopWidth: hasSeparator ? 1 : undefined,
+    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
+    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
+    paddingX: "kitt.fullscreenModal.horizontalPadding",
     ...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]
-      })]
+    children: /*#__PURE__*/jsxRuntime.jsx(View, {
+      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
+      children: children
     })
   });
 }
-FullscreenModal.Header = FullscreenModalHeader;
-FullscreenModal.Footer = FullscreenModalFooter;
-FullscreenModal.Body = FullscreenModalBody;
-FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
 function NativeOpacityAnimation({
   visible,
@@ -8489,7 +7885,7 @@ function NativeSlideInAnimation({
   });
 }
 
-function FullscreenModal2Animation({
+function FullscreenModalAnimation({
   visible,
   children,
   onEnter,
@@ -8547,7 +7943,7 @@ function FullscreenModal2Animation({
   });
 }
 
-function FullscreenModal2Behaviour({
+function FullscreenModalBehaviour({
   children,
   visible,
   onClose,
@@ -8563,7 +7959,7 @@ function FullscreenModal2Behaviour({
   return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModal2Animation, {
+    children: /*#__PURE__*/jsxRuntime.jsx(FullscreenModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -8575,51 +7971,7 @@ function FullscreenModal2Behaviour({
   });
 }
 
-function FullscreenModal2Body({
-  children,
-  shouldHandleBottomNotch,
-  style,
-  shouldHandleTopNotch,
-  ...props
-}) {
-  const {
-    bottom,
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  const {
-    kitt: {
-      fullscreenModal: {
-        body: {
-          verticalPadding
-        }
-      }
-    }
-  } = useTheme();
-  const paddingBottom = shouldHandleBottomNotch ? Math.max(bottom, verticalPadding) : verticalPadding;
-  const paddingTop = shouldHandleTopNotch ? Math.max(top, verticalPadding) : verticalPadding;
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    flexGrow: 1,
-    flexShrink: 1,
-    justifyContent: "space-between",
-    children: /*#__PURE__*/jsxRuntime.jsx(nativeBase.ScrollView, {
-      bounces: false,
-      contentContainerStyle: {
-        flexGrow: 1,
-        position: 'relative'
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx(View, {
-        ...props,
-        paddingX: "kitt.fullscreenModal.horizontalPadding",
-        paddingTop: paddingTop,
-        paddingBottom: paddingBottom,
-        style: style,
-        children: children
-      })
-    })
-  });
-}
-
-function FullscreenModal2Container({
+function FullscreenModalContainer({
   children,
   backgroundColor
 }) {
@@ -8643,30 +7995,7 @@ function FullscreenModal2Container({
   });
 }
 
-function FullscreenModal2Footer({
-  shouldHandleBottomNotch = true,
-  hasSeparator = true,
-  children,
-  ...props
-}) {
-  const {
-    bottom
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
-  return /*#__PURE__*/jsxRuntime.jsx(View, {
-    borderTopColor: "kitt.separator",
-    borderTopWidth: hasSeparator ? 1 : undefined,
-    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
-    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    ...props,
-    children: /*#__PURE__*/jsxRuntime.jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
-    })
-  });
-}
-
-function FullscreenModal2Header({
+function FullscreenModalHeader({
   hasSeparator = true,
   isTransparent,
   title,
@@ -8725,19 +8054,35 @@ function FullscreenModal2Header({
   });
 }
 
-function FullscreenModal2({
-  backgroundColor,
-  children
+function FullscreenModal({
+  body,
+  header,
+  footer,
+  backgroundColor
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(FullscreenModal2Container, {
+  return /*#__PURE__*/jsxRuntime.jsxs(FullscreenModalContainer, {
     backgroundColor: backgroundColor,
-    children: children
+    children: [header ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      children: header
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
+      flexGrow: 1,
+      flexShrink: 1,
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/jsxRuntime.jsx(reactNative.ScrollView, {
+        bounces: false,
+        contentContainerStyle: {
+          flexGrow: 1,
+          position: 'relative'
+        },
+        children: body
+      }), footer || null]
+    })]
   });
 }
-FullscreenModal2.Header = FullscreenModal2Header;
-FullscreenModal2.Footer = FullscreenModal2Footer;
-FullscreenModal2.Body = FullscreenModal2Body;
-FullscreenModal2.Behaviour = FullscreenModal2Behaviour;
+FullscreenModal.Header = FullscreenModalHeader;
+FullscreenModal.Footer = FullscreenModalFooter;
+FullscreenModal.Body = FullscreenModalBody;
+FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
 function GroupTags({
   children,
@@ -12161,8 +11506,7 @@ function NavigationModal({
   body,
   backgroundColor,
   footer,
-  header,
-  contentContainer
+  header
 }) {
   const Component = useBreakpointValue({
     base: FullscreenModal,
@@ -12172,11 +11516,10 @@ function NavigationModal({
     body: body,
     backgroundColor: backgroundColor,
     footer: footer,
-    header: header,
-    contentContainer: contentContainer
+    header: header
   });
 }
-function Header$1(props) {
+function Header(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
@@ -12185,7 +11528,7 @@ function Header$1(props) {
     ...props
   });
 }
-function Body$1(props) {
+function Body(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -12194,7 +11537,7 @@ function Body$1(props) {
     ...props
   });
 }
-function Footer$1(props) {
+function Footer(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -12203,106 +11546,11 @@ function Footer$1(props) {
     ...props
   });
 }
-NavigationModal.Header = Header$1;
-NavigationModal.Body = Body$1;
-NavigationModal.Footer = Footer$1;
+NavigationModal.Header = Header;
+NavigationModal.Body = Body;
+NavigationModal.Footer = Footer;
 NavigationModal.ModalBehaviour = NavigationModalBehaviour;
 
-function NavigationModal2Behaviour({
-  children,
-  visible,
-  appear = true,
-  onExited,
-  onEnter,
-  onExit,
-  onClose,
-  ...props
-}) {
-  const AnimationComponent = useBreakpointValue({
-    base: FullscreenModal2Animation,
-    small: CardModal2Animation
-  });
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = React.useState(visible);
-  const [shouldAppear, setShouldAppear] = React.useState(appear);
-  React.useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsxRuntime.jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsxRuntime.jsx(AnimationComponent, {
-      ...props,
-      appear: shouldAppear,
-      visible: visible,
-      onEnter: () => {
-        if (onEnter) onEnter();
-
-        // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
-        setShouldAppear(false);
-      },
-      onExit: () => {
-        if (onExit) onExit();
-
-        // Reset appear value to its original value for future modal display
-        setShouldAppear(appear);
-      },
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      onClose: onClose,
-      children: children
-    })
-  });
-}
-
-function NavigationModal2({
-  backgroundColor,
-  children
-}) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2,
-    small: CardModal2
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    backgroundColor: backgroundColor,
-    children: children
-  });
-}
-function Header(props) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2.Header,
-    small: CardModal2.Header
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...props
-  });
-}
-function Body(props) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2.Body,
-    small: CardModal2.Body
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...props
-  });
-}
-function Footer(props) {
-  const Component = useBreakpointValue({
-    base: FullscreenModal2.Footer,
-    small: CardModal2.Footer
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(Component, {
-    ...props
-  });
-}
-NavigationModal2.Header = Header;
-NavigationModal2.Body = Body;
-NavigationModal2.Footer = Footer;
-NavigationModal2.ModalBehaviour = NavigationModal2Behaviour;
-
 function Notification({
   type,
   children,
@@ -14688,7 +13936,6 @@ exports.Avatar = Avatar;
 exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.CardModal = CardModal;
-exports.CardModal2 = CardModal2;
 exports.Center = Center;
 exports.Checkbox = Checkbox;
 exports.ChoicesElements = ChoicesElements;
@@ -14703,7 +13950,6 @@ exports.FilePicker = FilePicker;
 exports.FlatList = FlatList;
 exports.Flex = Flex;
 exports.FullscreenModal = FullscreenModal;
-exports.FullscreenModal2 = FullscreenModal2;
 exports.GoogleMapsApiKeyProvider = GoogleMapsApiKeyProvider;
 exports.GoogleMapsAutocompleteProvider = GoogleMapsAutocompleteProvider;
 exports.GroupTags = GroupTags;
@@ -14743,7 +13989,6 @@ exports.Message = Message;
 exports.ModalBehaviour = ModalBehaviour;
 exports.NativeOnlyFlatList = FlatList;
 exports.NavigationModal = NavigationModal;
-exports.NavigationModal2 = NavigationModal2;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;