@ornikar/kitt-universal 25.48.1-canary.430f6cd109998511d4c4ad7369a24908547c62f4.0 → 25.49.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, StyleSheet, useWindowDimensions, Modal } from 'react-native';
+import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
@@ -3811,24 +3811,6 @@ function useStaticBottomSheet(Content) {
   };
 }
 
-/**
- * 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;
-}
-
 const overflowHidden = "kitt-u_overflowHidden_otm3u3";
 function useBlockBodyScroll(shouldBlockScroll, isInitialRender) {
   useEffect(() => {
@@ -3936,253 +3918,10 @@ function CardModalRotationContainer(props) {
   });
 }
 
-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$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,
-  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$3,
-      children: /*#__PURE__*/jsx(Overlay, {
-        onPress: onClose
-      })
-    }), /*#__PURE__*/jsx(CSSTransition, {
-      ...sharedProps,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$2,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(CardModalRotationContainer, {
-        alignItems: "center",
-        margin: "auto",
-        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]
-      })
-    })
-  });
-}
-CardModal.Body = CardModalBody;
-CardModal.Header = CardModalHeader;
-CardModal.Footer = CardModalFooter;
-CardModal.ModalBehaviour = CardModalBehaviour;
-
-function CardModal2RotationContainer(props) {
-  return /*#__PURE__*/jsx(View, {
-    paddingX: "kitt.cardModal.overlayPadding.horizontal",
-    paddingY: "kitt.cardModal.overlayPadding.vertical",
-    maxWidth: "kitt.cardModal.maxWidthWithPadding",
-    width: "100%",
-    maxHeight: "100%",
-    _web: {
-      maxHeight: '100svh'
-    },
-    ...props
-  });
-}
-
-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 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,
@@ -4191,10 +3930,10 @@ const contentAnimationClassNames$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 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,
@@ -4203,7 +3942,7 @@ const opacityClassNames$2 = {
   exit: opacityExit$2,
   exitActive: opacityExitActive$2
 };
-function CardModal2Animation({
+function CardModalAnimation({
   children,
   appear = true,
   visible,
@@ -4244,7 +3983,7 @@ function CardModal2Animation({
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited,
-      children: /*#__PURE__*/jsx(CardModal2RotationContainer, {
+      children: /*#__PURE__*/jsx(CardModalRotationContainer, {
         alignItems: "center",
         margin: "auto",
         children: children
@@ -4253,7 +3992,7 @@ function CardModal2Animation({
   });
 }
 
-function CardModal2Behaviour({
+function CardModalBehaviour({
   children,
   visible,
   onClose,
@@ -4269,7 +4008,7 @@ function CardModal2Behaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(CardModal2Animation, {
+    children: /*#__PURE__*/jsx(CardModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -4282,7 +4021,7 @@ function CardModal2Behaviour({
   });
 }
 
-function CardModal2Body({
+function CardModalBody({
   children,
   paddingX = {
     base: 'kitt.4',
@@ -4302,7 +4041,7 @@ function CardModal2Body({
   });
 }
 
-function CardModal2Footer({
+function CardModalFooter({
   children,
   padding = {
     base: 'kitt.4',
@@ -4325,7 +4064,7 @@ function CardModal2Footer({
   });
 }
 
-function CardModal2Header({
+function CardModalHeader({
   children,
   title,
   paddingBottom = {
@@ -4375,11 +4114,14 @@ function CardModal2Header({
   });
 }
 
-function CardModal2({
+function CardModal({
   backgroundColor = 'kitt.uiBackgroundLight',
   maxWidth = 'kitt.cardModal.maxWidth',
   withoutShadow,
   children,
+  header,
+  body,
+  footer,
   ...props
 }) {
   return /*#__PURE__*/jsx(View, {
@@ -4392,13 +4134,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$6({
   isDisabled,
@@ -7262,371 +7006,95 @@ function FullscreenModalBody({
 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
-    })
-  });
-}
-
-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
+  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 FullscreenModal2Animation({
-  visible,
+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
+  onExited,
+  onClose,
+  ...props
 }) {
-  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
+  const theme = useTheme();
+  const {
+    animation
+  } = theme.kitt.fullscreenModal;
+  const sharedProps = {
+    in: visible,
+    appear,
+    unmountOnExit
   };
-
-  // 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
-        })
-      })]
-    })
+  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 FullscreenModal2Behaviour({
+function FullscreenModalBehaviour({
   children,
   visible,
   onClose,
@@ -7642,7 +7110,7 @@ function FullscreenModal2Behaviour({
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModal2Animation, {
+    children: /*#__PURE__*/jsx(FullscreenModalAnimation, {
       ...props,
       visible: visible,
       onExited: () => {
@@ -7654,51 +7122,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
 }) {
@@ -7722,30 +7146,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,
@@ -7804,19 +7205,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,
@@ -11344,8 +10761,7 @@ function NavigationModal({
   body,
   backgroundColor,
   footer,
-  header,
-  contentContainer
+  header
 }) {
   const Component = useBreakpointValue({
     base: FullscreenModal,
@@ -11355,11 +10771,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
@@ -11368,7 +10783,7 @@ function Header$1(props) {
     ...props
   });
 }
-function Body$1(props) {
+function Body(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
@@ -11377,7 +10792,7 @@ function Body$1(props) {
     ...props
   });
 }
-function Footer$1(props) {
+function Footer(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
@@ -11386,106 +10801,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,
@@ -13703,5 +13023,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, 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, 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.web.mjs.map