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

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

@@ -725,19 +725,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: {
@@ -2090,7 +2090,7 @@ const typography = {
     'primary-light': colors.primaryLight,
     accent: colors.accent,
     success: colors.success,
-    danger: colors.danger,
+    danger: lateOceanColorPalette['coral.9'],
     warning: colors.warning
   },
   types: {
@@ -3801,24 +3801,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,
@@ -3826,7 +3808,6 @@ function BottomSheetComp({
   hasHandle = true,
   enableDynamicSizing = true,
   snapPoints = ['100%'],
-  contentContainer: ContentContainer = IdentityComponent,
   ...rest
 }, ref) {
   const {
@@ -3857,11 +3838,9 @@ function BottomSheetComp({
     ...rest,
     topInset: top,
     children: props => /*#__PURE__*/jsx(Wrapper, {
-      children: /*#__PURE__*/jsx(ContentContainer, {
-        children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, {
-          ...props?.data
-        }) : Content
-      })
+      children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, {
+        ...props?.data
+      }) : Content
     })
   });
 }
@@ -3966,330 +3945,19 @@ ModalBehaviour.CloseButton = CloseButton;
 function Overlay({
   onPress
 }) {
-  return /*#__PURE__*/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__*/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 = useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) {
-      onExited();
-    }
-  }
-  const opacityStyle = useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.cardModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      }, isFinished => {
-        if (!isFinished) return;
-        runOnJS(handleAnimationFinished)();
-      })
-    };
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeRotationAnimation$2({
-  visible,
-  children,
-  onEntered,
-  onExited
-}) {
-  const theme = useTheme();
-  const hasRunAnimationRef = useRef(false);
-  const rotation = useSharedValue(0.8);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  const animatedStyle = useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.cardModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
-    rotation.value = withTiming(visible ? 0 : 5, {
-      duration,
-      easing: Easing$1.bezier(x1, y1, x2, y2)
-    }, isFinished => {
-      if (!isFinished) return;
-      runOnJS(handleAnimationFinished)();
-    });
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      }),
-      transform: [{
-        scale: withTiming(visible ? 1 : 0.8, {
-          duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        })
-      }, {
-        rotateZ: `${rotation.value}deg`
-      }]
-    };
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [animatedStyle],
-    children: children
-  });
-}
-
-function CardModalAnimation({
-  visible,
-  children,
-  onEnter,
-  onEntered,
-  onExit,
-  onExited,
-  onClose
-}) {
-  const [isModalVisible, setIsModalVisible] = useState(visible);
-  const [isContentVisible, setIsContentVisible] = useState(false);
-  const handleAnimationExited = () => {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
-    if (Platform.OS === 'android' && onExited) onExited();
-  };
-  useEffect(() => {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsx(Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: () => {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: () => {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/jsxs(View, {
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$4, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        children: /*#__PURE__*/jsx(Overlay, {
-          onPress: onClose
-        })
-      }), /*#__PURE__*/jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsx(NativeRotationAnimation$2, {
-          visible: isContentVisible,
-          onExited: handleAnimationExited,
-          onEntered: onEntered,
-          children: children
-        })
-      })]
-    })
-  });
-}
-
-function CardModalBehaviour({
-  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(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__*/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__*/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__*/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 CardModal({
-  backgroundColor = 'kitt.uiBackgroundLight',
-  maxWidth = 'kitt.cardModal.maxWidth',
-  withoutShadow,
-  children,
-  header,
-  body,
-  footer,
-  contentContainer: ContentContainer = IdentityComponent,
-  ...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: /*#__PURE__*/jsx(ContentContainer, {
-      children: children || /*#__PURE__*/jsxs(Fragment, {
-        children: [header || null, body || null, footer || null]
-      })
-    })
+  return /*#__PURE__*/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__*/jsx(View, {
     paddingX: "kitt.cardModal.overlayPadding.horizontal",
     paddingY: "kitt.cardModal.overlayPadding.vertical",
@@ -4303,7 +3971,7 @@ function CardModal2RotationContainer(props) {
   });
 }
 
-function NativeOpacityAnimation$3({
+function NativeOpacityAnimation$2({
   visible,
   children,
   onExited
@@ -4390,7 +4058,7 @@ function NativeRotationAnimation$1({
   });
 }
 
-function CardModal2Animation({
+function CardModalAnimation({
   visible,
   children,
   onEnter,
@@ -4427,13 +4095,13 @@ function CardModal2Animation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$3, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
           onPress: onClose
         })
-      }), /*#__PURE__*/jsx(CardModal2RotationContainer, {
+      }), /*#__PURE__*/jsx(CardModalRotationContainer, {
         children: /*#__PURE__*/jsx(NativeRotationAnimation$1, {
           visible: isContentVisible,
           onExited: handleAnimationExited,
@@ -4445,7 +4113,7 @@ function CardModal2Animation({
   });
 }
 
-function CardModal2Behaviour({
+function CardModalBehaviour({
   children,
   visible,
   onClose,
@@ -4461,7 +4129,7 @@ function CardModal2Behaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(CardModal2Animation, {
+    children: /*#__PURE__*/jsx(CardModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -4474,7 +4142,7 @@ function CardModal2Behaviour({
   });
 }
 
-function CardModal2Body({
+function CardModalBody({
   children,
   paddingX = {
     base: 'kitt.4',
@@ -4494,7 +4162,7 @@ function CardModal2Body({
   });
 }
 
-function CardModal2Footer({
+function CardModalFooter({
   children,
   padding = {
     base: 'kitt.4',
@@ -4517,7 +4185,7 @@ function CardModal2Footer({
   });
 }
 
-function CardModal2Header({
+function CardModalHeader({
   children,
   title,
   paddingBottom = {
@@ -4567,11 +4235,14 @@ function CardModal2Header({
   });
 }
 
-function CardModal2({
+function CardModal({
   backgroundColor = 'kitt.uiBackgroundLight',
   maxWidth = 'kitt.cardModal.maxWidth',
   withoutShadow,
   children,
+  header,
+  body,
+  footer,
   ...props
 }) {
   return /*#__PURE__*/jsx(View, {
@@ -4584,13 +4255,15 @@ function CardModal2({
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: children
+    children: children || /*#__PURE__*/jsxs(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,
@@ -4887,7 +4560,7 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-function NativeOpacityAnimation$2({
+function NativeOpacityAnimation$1({
   visible,
   children,
   onExited
@@ -5011,7 +4684,7 @@ function DialogModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$1, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
@@ -8074,322 +7747,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__*/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
-  } = useSafeAreaInsets();
-  return /*#__PURE__*/jsx(View, {
-    borderTopColor: "kitt.separator",
-    borderTopWidth: hasSeparator ? 1 : undefined,
-    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
-    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
-    paddingX: "kitt.fullscreenModal.horizontalPadding",
-    ...props,
-    children: /*#__PURE__*/jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
-    })
-  });
-}
-
-function NativeOpacityAnimation$1({
-  visible,
-  children
-}) {
-  const theme = useTheme();
-  const opacityStyle = useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.fullscreenModal.animation.overlay;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      opacity: withTiming(visible ? 1 : 0, {
-        duration,
-        easing: Easing$1.bezier(x1, y1, x2, y2)
-      })
-    };
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeSlideInAnimation$1({
-  visible,
-  children,
-  onEntered,
-  onExited
-}) {
-  const theme = useTheme();
-  const {
-    height: wHeight
-  } = useWindowDimensions();
-  const hasRunAnimationRef = useRef(false);
-  function handleAnimationFinished() {
-    if (visible) {
-      if (onEntered) onEntered();
-      hasRunAnimationRef.current = true;
-    }
-
-    // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
-    if (!visible && hasRunAnimationRef.current) onExited();
-  }
-  const translateStyle = useAnimatedStyle(() => {
-    const {
-      duration,
-      easing
-    } = theme.kitt.fullscreenModal.animation.content;
-    const [x1, y1, x2, y2] = easing;
-    return {
-      transform: [{
-        translateY: withTiming(visible ? 0 : wHeight, {
-          duration,
-          easing: Easing$1.bezier(x1, y1, x2, y2)
-        }, isFinished => {
-          if (!isFinished) return;
-          runOnJS(handleAnimationFinished)();
-        })
-      }]
-    };
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [{
-      transform: [{
-        translateY: wHeight
-      }]
-    }, translateStyle, {
-      width: '100%',
-      flex: 1
-    }],
-    children: children
-  });
-}
-
-function FullscreenModalAnimation({
-  visible,
-  children,
-  onEnter,
-  onEntered,
-  onExit,
-  onExited
-}) {
-  const [isModalVisible, setIsModalVisible] = useState(visible);
-  const [isContentVisible, setIsContentVisible] = useState(false);
-  const handleAnimationExited = () => {
-    setIsModalVisible(false);
-    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
-    if (Platform.OS === 'android' && onExited) onExited();
-  };
-
-  // When parent visibility is set to false, in order to have our exit animation we must in this order :
-  // 1 - run the exit animation
-  // 2 - once it is done, unmount the Modal
-  useEffect(() => {
-    if (!(!visible && isContentVisible)) return;
-    if (onExit) onExit();
-    setIsContentVisible(false);
-  }, [visible, isContentVisible, onExit]);
-  return /*#__PURE__*/jsx(Modal, {
-    transparent: true,
-    supportedOrientations: ['landscape', 'portrait'],
-    visible: isModalVisible,
-    onShow: () => {
-      if (onEnter) onEnter();
-      setIsContentVisible(true);
-    },
-    onDismiss: () => {
-      if (onExited) onExited();
-    },
-    children: /*#__PURE__*/jsxs(View, {
-      position: "relative",
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$1, {
-        visible: isContentVisible,
-        children: /*#__PURE__*/jsx(Overlay, {
-          onPress: handleAnimationExited
-        })
-      }), /*#__PURE__*/jsx(NativeSlideInAnimation$1, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        onEntered: onEntered,
-        children: /*#__PURE__*/jsx(View, {
-          flexGrow: 1,
-          children: children
-        })
-      })]
-    })
-  });
-}
-
-function FullscreenModalBehaviour({
-  children,
-  visible,
-  onClose,
-  onExited,
-  ...props
-}) {
-  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
-  useEffect(() => {
-    if (visible === true) {
-      setIsModalBehaviourVisible(true);
-    }
-  }, [visible]);
-  return /*#__PURE__*/jsx(ModalBehaviour, {
-    visible: isModalBehaviourVisible,
-    onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModalAnimation, {
-      ...props,
-      visible: visible,
-      onExited: () => {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      children: children
-    })
-  });
-}
-
-function FullscreenModalContainer({
-  children,
-  backgroundColor
-}) {
-  return /*#__PURE__*/jsx(View, {
-    position: "relative",
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: "100%"
-    /*
-      Here we are setting the same min and max height because on web the content was overflowing and not scrolling
-      minHeight is needed to make the modal fullscreen
-      maxHeight limits the height to the viewport when the content is too long, this allows us to scroll inside
-      We use svh instead of vh because vh is the total height of the viewport, including the address bar in mobile web browsers
-      */,
-    _web: {
-      minHeight: '100svh',
-      maxHeight: '100svh'
-    },
-    backgroundColor: backgroundColor ?? 'kitt.uiBackgroundLight',
+          verticalPadding
+        }
+      }
+    }
+  } = useTheme();
+  const paddingBottom = shouldHandleBottomNotch ? Math.max(bottom, verticalPadding) : verticalPadding;
+  const paddingTop = shouldHandleTopNotch ? Math.max(top, verticalPadding) : verticalPadding;
+  return /*#__PURE__*/jsx(View, {
+    ...props,
+    paddingX: "kitt.fullscreenModal.horizontalPadding",
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    style: style,
     children: children
   });
 }
 
-function FullscreenModalHeader({
+function FullscreenModalFooter({
+  shouldHandleBottomNotch = true,
   hasSeparator = true,
-  isTransparent,
-  title,
   children,
-  right,
-  left,
-  shouldHandleTopNotch = true,
   ...props
 }) {
   const {
-    top
+    bottom
   } = 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,
+    borderTopColor: "kitt.separator",
+    borderTopWidth: hasSeparator ? 1 : undefined,
+    paddingTop: "kitt.fullscreenModal.footer.verticalPadding",
+    paddingBottom: shouldHandleBottomNotch ? bottom : undefined,
+    paddingX: "kitt.fullscreenModal.horizontalPadding",
     ...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]
-      })]
+    children: /*#__PURE__*/jsx(View, {
+      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
+      children: children
     })
   });
 }
-FullscreenModal.Header = FullscreenModalHeader;
-FullscreenModal.Footer = FullscreenModalFooter;
-FullscreenModal.Body = FullscreenModalBody;
-FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
 function NativeOpacityAnimation({
   visible,
@@ -8466,7 +7862,7 @@ function NativeSlideInAnimation({
   });
 }
 
-function FullscreenModal2Animation({
+function FullscreenModalAnimation({
   visible,
   children,
   onEnter,
@@ -8524,7 +7920,7 @@ function FullscreenModal2Animation({
   });
 }
 
-function FullscreenModal2Behaviour({
+function FullscreenModalBehaviour({
   children,
   visible,
   onClose,
@@ -8540,7 +7936,7 @@ function FullscreenModal2Behaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModal2Animation, {
+    children: /*#__PURE__*/jsx(FullscreenModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -8552,51 +7948,7 @@ function FullscreenModal2Behaviour({
   });
 }
 
-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({
+function FullscreenModalContainer({
   children,
   backgroundColor
 }) {
@@ -8620,30 +7972,7 @@ function FullscreenModal2Container({
   });
 }
 
-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({
+function FullscreenModalHeader({
   hasSeparator = true,
   isTransparent,
   title,
@@ -8702,19 +8031,35 @@ function FullscreenModal2Header({
   });
 }
 
-function FullscreenModal2({
-  backgroundColor,
-  children
+function FullscreenModal({
+  body,
+  header,
+  footer,
+  backgroundColor
 }) {
-  return /*#__PURE__*/jsx(FullscreenModal2Container, {
+  return /*#__PURE__*/jsxs(FullscreenModalContainer, {
     backgroundColor: backgroundColor,
-    children: children
+    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]
+    })]
   });
 }
-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,
@@ -12138,8 +11483,7 @@ function NavigationModal({
   body,
   backgroundColor,
   footer,
-  header,
-  contentContainer
+  header
 }) {
   const Component = useBreakpointValue({
     base: FullscreenModal,
@@ -12149,11 +11493,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
@@ -12162,7 +11505,7 @@ function Header$1(props) {
     ...props
   });
 }
-function Body$1(props) {
+function Body(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -12171,7 +11514,7 @@ function Body$1(props) {
     ...props
   });
 }
-function Footer$1(props) {
+function Footer(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -12180,106 +11523,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] = 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,
@@ -14652,5 +13900,5 @@ function VerticalSteps({
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, CardModal2, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, FullscreenModal2, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, NavigationModal2, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-node-20.10.es.mjs.map