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

package/dist/index-metro.es.android.js

@@ -2609,7 +2609,7 @@ function ActionCardDisabled({
   });
 }
 
-const _excluded$T = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+const _excluded$11 = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   let {
       children,
@@ -2621,7 +2621,7 @@ function ActionCard(_ref) {
       isPressed,
       isFocused
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$T);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -2919,7 +2919,7 @@ const getTypographyFamilyWithAncestorValue = (type, typographyFamilyInContext) =
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-const _excluded$S = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+const _excluded$10 = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 const TypographyFamilyContext = /*#__PURE__*/createContext(null);
 const TypographyTypeContext = /*#__PURE__*/createContext(null);
 const TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -2975,7 +2975,7 @@ function Typography(_ref) {
       variant,
       color
     } = _ref,
-    otherProps = _objectWithoutProperties(_ref, _excluded$S);
+    otherProps = _objectWithoutProperties(_ref, _excluded$10);
   const sx = useSx();
   const typographyFamilyInContext = useContext(TypographyFamilyContext);
   const defaultColor = useTypographyDefaultColor();
@@ -3088,7 +3088,7 @@ function Icon({
   });
 }
 
-const _excluded$R = ["color", "size"],
+const _excluded$$ = ["color", "size"],
   _excluded2$5 = ["color"];
 function getIconSizeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
@@ -3111,7 +3111,7 @@ function TypographyIconSpecifiedColor(_ref) {
       color,
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$$);
   const ancestorType = useTypographyAncestorType();
   const iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
   const colorValue = getTypographyColorValue(color);
@@ -3167,7 +3167,7 @@ const getButtonTextColorByType = (type, variant, isHovered, isPressed) => {
   }
 };
 
-const _excluded$Q = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
+const _excluded$_ = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
 function ButtonIcon({
   icon,
   color,
@@ -3248,7 +3248,7 @@ function ButtonContent(_ref) {
       isFocused,
       innerSpacing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$_);
   const color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3554,7 +3554,7 @@ function LoaderIcon({
   });
 }
 
-const _excluded$P = ["as", "onPress", "disabled", "icon", "stretch"];
+const _excluded$Z = ["as", "onPress", "disabled", "icon", "stretch"];
 const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -3566,7 +3566,7 @@ const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
         medium: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Z);
   const [isLoading, setIsLoading] = useState(false);
   const mountedRef = useRef(false);
 
@@ -3612,7 +3612,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-const _excluded$O = ["children", "layout", "reversed"];
+const _excluded$Y = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3645,7 +3645,7 @@ function Actions(_ref) {
         base: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$Y);
   const shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3700,7 +3700,7 @@ function getInitials(firstname, lastname) {
   return `${firstname[0]}${lastname[0]}`.toUpperCase();
 }
 
-const _excluded$N = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+const _excluded$X = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent({
   size,
   src,
@@ -3766,7 +3766,7 @@ function Avatar(_ref) {
       dark,
       disabled
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$X);
   const currentSize = getCurrentSize({
     size,
     sizeVariant
@@ -3822,7 +3822,7 @@ function IdentityComponent({
   return children;
 }
 
-const _excluded$M = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints", "contentContainer"];
+const _excluded$W = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints", "contentContainer"];
 function BottomSheetComp(_ref, ref) {
   let {
       children: Content,
@@ -3833,7 +3833,7 @@ function BottomSheetComp(_ref, ref) {
       snapPoints = ['100%'],
       contentContainer: ContentContainer = IdentityComponent
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$M);
+    rest = _objectWithoutProperties(_ref, _excluded$W);
   const {
     top
   } = useSafeAreaInsets();
@@ -3989,7 +3989,7 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-function NativeOpacityAnimation$2({
+function NativeOpacityAnimation$4({
   visible,
   children,
   onExited
@@ -4026,7 +4026,7 @@ function NativeOpacityAnimation$2({
   });
 }
 
-function NativeRotationAnimation$1({
+function NativeRotationAnimation$2({
   visible,
   children,
   onEntered,
@@ -4113,14 +4113,14 @@ function CardModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$4, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
           onPress: onClose
         })
       }), /*#__PURE__*/jsx(CardModalRotationContainer, {
-        children: /*#__PURE__*/jsx(NativeRotationAnimation$1, {
+        children: /*#__PURE__*/jsx(NativeRotationAnimation$2, {
           visible: isContentVisible,
           onExited: handleAnimationExited,
           onEntered: onEntered,
@@ -4131,7 +4131,7 @@ function CardModalAnimation({
   });
 }
 
-const _excluded$L = ["children", "visible", "onClose", "onExited"];
+const _excluded$V = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   let {
       children,
@@ -4139,7 +4139,7 @@ function CardModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$V);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -4161,7 +4161,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-const _excluded$K = ["children", "paddingX", "paddingY"];
+const _excluded$U = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   let {
       children,
@@ -4171,7 +4171,7 @@ function CardModalBody(_ref) {
       },
       paddingY = 'kitt.4'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$U);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4183,7 +4183,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-const _excluded$J = ["children", "padding", "hasSeparator"];
+const _excluded$T = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   let {
       children,
@@ -4193,7 +4193,7 @@ function CardModalFooter(_ref) {
       },
       hasSeparator = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$T);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4207,7 +4207,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-const _excluded$I = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+const _excluded$S = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   let {
       children,
@@ -4220,7 +4220,7 @@ function CardModalHeader(_ref) {
       right,
       left
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   const defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -4258,7 +4258,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-const _excluded$H = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer", "contentContainer"];
+const _excluded$R = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer", "contentContainer"];
 function CardModal(_ref) {
   let {
       backgroundColor = 'kitt.uiBackgroundLight',
@@ -4270,7 +4270,7 @@ function CardModal(_ref) {
       footer,
       contentContainer: ContentContainer = IdentityComponent
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4292,164 +4292,472 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$5({
-  isDisabled,
-  isSelected,
-  isHovered,
-  isPressed
-}) {
-  if (isDisabled) return 'kitt.choices.item.disabled.backgroundColor';
-  if (isSelected && isHovered) return 'kitt.choices.item.hoverWhenSelected.backgroundColor';
-  if (isPressed) return 'kitt.choices.item.pressed.backgroundColor';
-  if (isHovered) return 'kitt.choices.item.hover.backgroundColor';
-  if (isSelected) return 'kitt.choices.item.selected.backgroundColor';
-  return 'kitt.choices.item.default.backgroundColor';
-}
-
-function getBorderRadius(variant) {
-  // The clean way to have the rounded effect would have been to know the children height since radius >= height * 0.5
-  // We don't control over the height of the rendered children we just go with a arbitrary really high value
-  return variant === 'rounded' ? Number.MAX_SAFE_INTEGER : 'kitt.choices.item.borderRadius';
+function CardModal2RotationContainer(props) {
+  return /*#__PURE__*/jsx(View, _objectSpread({
+    paddingX: "kitt.cardModal.overlayPadding.horizontal",
+    paddingY: "kitt.cardModal.overlayPadding.vertical",
+    maxWidth: "kitt.cardModal.maxWidthWithPadding",
+    width: "100%",
+    maxHeight: "100%",
+    _web: {
+      maxHeight: '100svh'
+    }
+  }, props));
 }
 
-function AnimatedChoiceItemView({
+function NativeOpacityAnimation$3({
+  visible,
   children,
-  variant,
-  size,
-  isHovered,
-  isPressed,
-  isDisabled,
-  isSelected,
-  animatedStyles
+  onExited
 }) {
-  const sx = useSx();
-  const style = sx({
-    position: 'relative',
-    borderRadius: getBorderRadius(variant),
-    backgroundColor: getBackgroundColor$5({
-      isDisabled,
-      isSelected,
-      isHovered,
-      isPressed
-    }),
-    paddingX: size === 'small' ? 'kitt.4' : {
-      base: 'kitt.4',
-      small: 'kitt.6'
-    },
-    paddingY: size === 'small' ? 'kitt.2' : {
-      base: 'kitt.4',
-      small: 'kitt.6'
+  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: [style, animatedStyles],
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
     children: children
   });
 }
 
-const useNativeAnimation$4 = ({
-  selected,
-  disabled,
-  isPressedInternal
-}) => {
+function NativeRotationAnimation$1({
+  visible,
+  children,
+  onEntered,
+  onExited
+}) {
   const theme = useTheme();
-  const pressed = useSharedValue(Boolean(isPressedInternal));
-  const progress = useDerivedValue(() => {
-    return withTiming(pressed.value ? 1 : 0, {
-      duration: theme.kitt.choices.item.transition.duration
-    });
-  });
-  const backgroundStyles = useAnimatedStyle(() => {
+  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 {
-      default: defaultBg,
-      pressed: pressedBg,
-      selected: selectedBg,
-      disabled: disabledBg
-    } = theme.kitt.choices.item.backgroundColor;
-    if (disabled) return {
-      backgroundColor: disabledBg
-    };
-    if (selected) return {
-      backgroundColor: selectedBg
-    };
+      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 {
-      backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      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 {
-    onPressIn: () => {
-      pressed.value = true;
-    },
-    onPressOut: () => {
-      pressed.value = false;
-    },
-    backgroundStyles
-  };
-};
-
-function getCurrentTextColor$1({
-  isDisabled,
-  isSelected,
-  isPressed,
-  isHovered
-}) {
-  if (isDisabled) return 'black-light';
-  if (isSelected && isHovered) return 'white';
-  if (isSelected || isPressed) return 'white';
-  return 'black';
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [animatedStyle],
+    children: children
+  });
 }
 
-function ChoiceItem({
-  type = 'button',
-  value,
-  selected,
-  disabled,
-  variant,
+function CardModal2Animation({
+  visible,
   children,
-  isPressedInternal,
-  isHoveredInternal,
-  onPress,
-  onChange,
-  onBlur,
-  onFocus,
-  size,
-  style,
-  testID
+  onEnter,
+  onEntered,
+  onExit,
+  onExited,
+  onClose
 }) {
-  const {
-    onPressIn,
-    onPressOut,
-    backgroundStyles
-  } = useNativeAnimation$4({
-    selected,
-    disabled,
-    isPressedInternal
-  });
-  const handleChange = () => {
-    if (!onChange) return;
-
-    // Checkbox can be toggled
-    if (type === 'checkbox') {
-      onChange(selected ? undefined : value);
-      return;
-    }
-    onChange(value);
+  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();
   };
-  return /*#__PURE__*/jsx(Pressable, {
-    testID: testID,
-    disabled: disabled,
-    accessibilityRole: type,
-    accessibilityState: {
-      checked: selected
-    },
-    style: style,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onPress: e => {
-      if (onFocus) onFocus(e);
-      if (onPress) onPress();
-      handleChange();
-      if (onBlur) onBlur(e);
+  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$3, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        children: /*#__PURE__*/jsx(Overlay, {
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsx(CardModal2RotationContainer, {
+        children: /*#__PURE__*/jsx(NativeRotationAnimation$1, {
+          visible: isContentVisible,
+          onExited: handleAnimationExited,
+          onEntered: onEntered,
+          children: children
+        })
+      })]
+    })
+  });
+}
+
+const _excluded$Q = ["children", "visible", "onClose", "onExited"];
+function CardModal2Behaviour(_ref) {
+  let {
+      children,
+      visible,
+      onClose,
+      onExited
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$Q);
+  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
+  useEffect(() => {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(CardModal2Animation, _objectSpread(_objectSpread({}, props), {}, {
+      visible: visible,
+      onExited: () => {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      onClose: onClose,
+      children: children
+    }))
+  });
+}
+
+const _excluded$P = ["children", "paddingX", "paddingY"];
+function CardModal2Body(_ref) {
+  let {
+      children,
+      paddingX = {
+        base: 'kitt.4',
+        medium: 'kitt.6'
+      },
+      paddingY = 'kitt.4'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$P);
+  return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
+    showsVerticalScrollIndicator: false,
+    _contentContainerStyle: {
+      paddingX,
+      paddingY
+    }
+  }, props), {}, {
+    children: children
+  }));
+}
+
+const _excluded$O = ["children", "padding", "hasSeparator"];
+function CardModal2Footer(_ref) {
+  let {
+      children,
+      padding = {
+        base: 'kitt.4',
+        medium: 'kitt.2'
+      },
+      hasSeparator = true
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$O);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    marginTop: "kitt.2",
+    padding: padding,
+    borderTopWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
+    borderColor: "kitt.separator",
+    alignItems: {
+      base: undefined,
+      medium: 'flex-end'
+    },
+    children: children
+  }));
+}
+
+const _excluded$N = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+function CardModal2Header(_ref) {
+  let {
+      children,
+      title,
+      paddingBottom = {
+        base: 'kitt.4',
+        medium: 'kitt.2'
+      },
+      hasSeparator = true,
+      right,
+      left
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$N);
+  const defaultContainerPadding = {
+    base: 'kitt.4',
+    medium: 'kitt.6'
+  };
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, 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]
+    })
+  }));
+}
+
+const _excluded$M = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
+function CardModal2(_ref) {
+  let {
+      backgroundColor = 'kitt.uiBackgroundLight',
+      maxWidth = 'kitt.cardModal.maxWidth',
+      withoutShadow,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$M);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    overflow: "hidden",
+    backgroundColor: backgroundColor,
+    shadow: withoutShadow ? undefined : 'kitt.cardModal.shadow',
+    borderRadius: "kitt.cardModal.borderRadius",
+    width: "100%",
+    maxHeight: "100%",
+    maxWidth: maxWidth,
+    minHeight: "kitt.cardModal.minHeight",
+    children: children
+  }));
+}
+CardModal2.Body = CardModal2Body;
+CardModal2.Header = CardModal2Header;
+CardModal2.Footer = CardModal2Footer;
+CardModal2.Behaviour = CardModal2Behaviour;
+
+function getBackgroundColor$5({
+  isDisabled,
+  isSelected,
+  isHovered,
+  isPressed
+}) {
+  if (isDisabled) return 'kitt.choices.item.disabled.backgroundColor';
+  if (isSelected && isHovered) return 'kitt.choices.item.hoverWhenSelected.backgroundColor';
+  if (isPressed) return 'kitt.choices.item.pressed.backgroundColor';
+  if (isHovered) return 'kitt.choices.item.hover.backgroundColor';
+  if (isSelected) return 'kitt.choices.item.selected.backgroundColor';
+  return 'kitt.choices.item.default.backgroundColor';
+}
+
+function getBorderRadius(variant) {
+  // The clean way to have the rounded effect would have been to know the children height since radius >= height * 0.5
+  // We don't control over the height of the rendered children we just go with a arbitrary really high value
+  return variant === 'rounded' ? Number.MAX_SAFE_INTEGER : 'kitt.choices.item.borderRadius';
+}
+
+function AnimatedChoiceItemView({
+  children,
+  variant,
+  size,
+  isHovered,
+  isPressed,
+  isDisabled,
+  isSelected,
+  animatedStyles
+}) {
+  const sx = useSx();
+  const style = sx({
+    position: 'relative',
+    borderRadius: getBorderRadius(variant),
+    backgroundColor: getBackgroundColor$5({
+      isDisabled,
+      isSelected,
+      isHovered,
+      isPressed
+    }),
+    paddingX: size === 'small' ? 'kitt.4' : {
+      base: 'kitt.4',
+      small: 'kitt.6'
+    },
+    paddingY: size === 'small' ? 'kitt.2' : {
+      base: 'kitt.4',
+      small: 'kitt.6'
+    }
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [style, animatedStyles],
+    children: children
+  });
+}
+
+const useNativeAnimation$4 = ({
+  selected,
+  disabled,
+  isPressedInternal
+}) => {
+  const theme = useTheme();
+  const pressed = useSharedValue(Boolean(isPressedInternal));
+  const progress = useDerivedValue(() => {
+    return withTiming(pressed.value ? 1 : 0, {
+      duration: theme.kitt.choices.item.transition.duration
+    });
+  });
+  const backgroundStyles = useAnimatedStyle(() => {
+    const {
+      default: defaultBg,
+      pressed: pressedBg,
+      selected: selectedBg,
+      disabled: disabledBg
+    } = theme.kitt.choices.item.backgroundColor;
+    if (disabled) return {
+      backgroundColor: disabledBg
+    };
+    if (selected) return {
+      backgroundColor: selectedBg
+    };
+    return {
+      backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+    };
+  });
+  return {
+    onPressIn: () => {
+      pressed.value = true;
+    },
+    onPressOut: () => {
+      pressed.value = false;
+    },
+    backgroundStyles
+  };
+};
+
+function getCurrentTextColor$1({
+  isDisabled,
+  isSelected,
+  isPressed,
+  isHovered
+}) {
+  if (isDisabled) return 'black-light';
+  if (isSelected && isHovered) return 'white';
+  if (isSelected || isPressed) return 'white';
+  return 'black';
+}
+
+function ChoiceItem({
+  type = 'button',
+  value,
+  selected,
+  disabled,
+  variant,
+  children,
+  isPressedInternal,
+  isHoveredInternal,
+  onPress,
+  onChange,
+  onBlur,
+  onFocus,
+  size,
+  style,
+  testID
+}) {
+  const {
+    onPressIn,
+    onPressOut,
+    backgroundStyles
+  } = useNativeAnimation$4({
+    selected,
+    disabled,
+    isPressedInternal
+  });
+  const handleChange = () => {
+    if (!onChange) return;
+
+    // Checkbox can be toggled
+    if (type === 'checkbox') {
+      onChange(selected ? undefined : value);
+      return;
+    }
+    onChange(value);
+  };
+  return /*#__PURE__*/jsx(Pressable, {
+    testID: testID,
+    disabled: disabled,
+    accessibilityRole: type,
+    accessibilityState: {
+      checked: selected
+    },
+    style: style,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onPress: e => {
+      if (onFocus) onFocus(e);
+      if (onPress) onPress();
+      handleChange();
+      if (onBlur) onBlur(e);
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
@@ -4505,13 +4813,13 @@ function ChoiceItemContainer({
   }));
 }
 
-const _excluded$G = ["direction", "contentContainerStyle"];
+const _excluded$L = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   let {
       direction,
       contentContainerStyle
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4585,7 +4893,7 @@ const ChoicesElements = {
   ButtonChoices
 };
 
-function NativeOpacityAnimation$1({
+function NativeOpacityAnimation$2({
   visible,
   children,
   onExited
@@ -4709,7 +5017,7 @@ function DialogModalAnimation({
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$1, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
@@ -4729,7 +5037,7 @@ function DialogModalAnimation({
   });
 }
 
-const _excluded$F = ["children", "visible", "onClose", "onExited"];
+const _excluded$K = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   let {
       children,
@@ -4737,7 +5045,7 @@ function DialogModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -4765,7 +5073,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-const _excluded$E = ["stretch"];
+const _excluded$J = ["stretch"];
 function DialogModal({
   illustration,
   title,
@@ -4807,7 +5115,7 @@ function DialogModalButton(_ref) {
   let {
       stretch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -4841,7 +5149,7 @@ function Emoji({
   });
 }
 
-const _excluded$D = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+const _excluded$I = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$4 = ["phoneNumber", "children"],
   _excluded3$3 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -4853,7 +5161,7 @@ function ExternalAppLink(_ref) {
       onPress,
       onOpenAppError
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   const href = `${appScheme}:${appValue}`;
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({
     href: href
@@ -4947,7 +5255,7 @@ function useOpenExternalLink(errorHandler) {
   };
 }
 
-const _excluded$C = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+const _excluded$H = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   let {
       as: Component,
@@ -4957,7 +5265,7 @@ function ExternalLink(_ref) {
       // eslint-disable-next-line no-console
       onOpenLinkError = console.error
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   const openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -5016,7 +5324,7 @@ function InputTextContainer({
   });
 }
 
-const _excluded$B = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+const _excluded$G = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
 const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -5033,7 +5341,7 @@ const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
       height,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   const theme = useTheme();
   const fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -5158,12 +5466,12 @@ function AutocompleteItemsListContainer({
   });
 }
 
-const _excluded$A = ["children"];
+const _excluded$F = ["children"];
 function AutocompleteOption(_ref) {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5175,7 +5483,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-const _excluded$z = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
+const _excluded$E = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
   _excluded2$3 = ["onClick", "onPress"],
   _excluded3$2 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -5217,7 +5525,7 @@ function Autocomplete(_ref) {
       zIndex = 1000,
       maxItemContainerHeight
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   const childrenArray = Children.toArray(children);
   const items = childrenArray.filter(isReactElement).map(child => ({
     child,
@@ -5438,7 +5746,7 @@ function getBorderColor$1({
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-const _excluded$y = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+const _excluded$D = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       checked,
@@ -5449,7 +5757,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref, ref) => {
       onBlur,
       onFocus
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   const theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5778,7 +6086,7 @@ function PartContainer({
   });
 }
 
-const _excluded$x = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+const _excluded$C = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -5798,7 +6106,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onSubmitEditing
     } = _ref;
-    _objectWithoutProperties(_ref, _excluded$x);
+    _objectWithoutProperties(_ref, _excluded$C);
   const monthRef = useRef(null);
   const yearRef = useRef(null);
   const defaultValue = value;
@@ -5999,7 +6307,7 @@ const PressableDateInputs = /*#__PURE__*/forwardRef(({
   });
 });
 
-const _excluded$w = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+const _excluded$B = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onBlur,
@@ -6010,7 +6318,7 @@ const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
   const handleClose = () => {
@@ -6080,7 +6388,7 @@ function PlatformDateTimePicker({
   }));
 }
 
-const _excluded$v = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+const _excluded$A = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle({
   children
 }) {
@@ -6101,7 +6409,7 @@ function ModalPlatformDateTimePicker(_ref) {
       onClose,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   const [currentValue, setCurrentValue] = useState(value);
 
   // Prevent unsynced value between the modal and its parent state
@@ -6144,7 +6452,7 @@ function ModalPlatformDateTimePicker(_ref) {
   });
 }
 
-const _excluded$u = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+const _excluded$z = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -6160,7 +6468,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   const [isPickerUIVisible, setIsPickerUIVisible] = useState(isDefaultVisible);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -6198,7 +6506,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 
-const _excluded$t = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+const _excluded$y = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -6208,7 +6516,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -6230,7 +6538,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props));
 });
 
-const _excluded$s = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+const _excluded$x = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       fillMode = 'native',
@@ -6238,7 +6546,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   // in apps, final-form can give a string value that will break the component
   const currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -6310,12 +6618,12 @@ function ImagePicker({
   });
 }
 
-const _excluded$r = ["children"];
+const _excluded$w = ["children"];
 function ListItemContent(_ref) {
   let {
       children
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -6326,7 +6634,7 @@ function ListItemContent(_ref) {
   }));
 }
 
-const _excluded$q = ["children", "side"],
+const _excluded$v = ["children", "side"],
   _excluded2$2 = ["children", "align"];
 // Handles the vertical alignment of the side elements of the list item
 function ListItemSideContainer(_ref) {
@@ -6334,7 +6642,7 @@ function ListItemSideContainer(_ref) {
       children,
       side = 'left'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -6356,7 +6664,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-const _excluded$p = ["children", "withPadding", "borders", "left", "right", "onPress"];
+const _excluded$u = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   let {
       children,
@@ -6366,7 +6674,7 @@ function ListItem(_ref) {
       right,
       onPress
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   const Wrapper = onPress ? Pressable$2 : Fragment$1;
   const wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -6399,12 +6707,12 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-const _excluded$o = ["title"];
+const _excluded$t = ["title"];
 function BottomSheetActionsItem(_ref) {
   let {
       title
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(ListItem, {
       withPadding: true,
@@ -6899,7 +7207,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-const _excluded$n = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+const _excluded$s = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   let {
       initialValue,
@@ -6908,7 +7216,7 @@ function InputAddress(_ref) {
       emptyResultsElement,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   const {
     state,
     onInputChange,
@@ -7004,12 +7312,12 @@ const InputIban = /*#__PURE__*/forwardRef((props, ref) => {
   }, props));
 });
 
-const _excluded$m = ["onChange"];
+const _excluded$r = ["onChange"];
 const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -7026,13 +7334,13 @@ const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$l = ["isPasswordDefaultVisible", "right"];
+const _excluded$q = ["isPasswordDefaultVisible", "right"];
 const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       isPasswordDefaultVisible,
       right
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   const [isVisible, setIsVisible] = useState(Boolean(isPasswordDefaultVisible));
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7053,7 +7361,7 @@ const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$k = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+const _excluded$p = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -7067,7 +7375,7 @@ const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
       phoneNumberLength = 10,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   const currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7517,7 +7825,7 @@ function RadioButton({
   });
 }
 
-const _excluded$j = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+const _excluded$o = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -7532,7 +7840,7 @@ function RadioButtonGroup(_ref2) {
       onBlur,
       onChange
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$j);
+    props = _objectWithoutProperties(_ref2, _excluded$o);
   const [currentValue, setCurrentValue] = useState(value);
   const handleChange = newValue => {
     if (disabled) return;
@@ -7561,14 +7869,14 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-const _excluded$i = ["helper", "limit"];
+const _excluded$n = ["helper", "limit"];
 const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _props$value, _props$value2;
   let {
       helper,
       limit
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   const shouldDisplayLimit = limit && limit > 0;
   const isLimitReached = ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === limit;
   const limitContainerAnimatedStyle = useAnimatedStyle(() => ({
@@ -7724,7 +8032,7 @@ function ToggleAnimated({
   });
 }
 
-const _excluded$h = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+const _excluded$m = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 const getLabelTypographyType = size => {
   return size === 'medium' ? 'body' : 'body-medium';
 };
@@ -7740,7 +8048,7 @@ function Toggle(_ref) {
       value = false,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   const theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -7778,7 +8086,7 @@ function Toggle(_ref) {
   }));
 }
 
-const _excluded$g = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+const _excluded$l = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   let {
       children,
@@ -7786,7 +8094,7 @@ function FullscreenModalBody(_ref) {
       style,
       shouldHandleTopNotch
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   const {
     bottom,
     top
@@ -7811,30 +8119,310 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-const _excluded$f = ["shouldHandleBottomNotch", "hasSeparator", "children"];
-function FullscreenModalFooter(_ref) {
-  let {
-      shouldHandleBottomNotch = true,
-      hasSeparator = true,
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
-  const {
-    bottom
-  } = useSafeAreaInsets();
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    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 _excluded$k = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+function FullscreenModalFooter(_ref) {
+  let {
+      shouldHandleBottomNotch = true,
+      hasSeparator = true,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  const {
+    bottom
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    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
+        })
+      })]
+    })
+  });
+}
+
+const _excluded$j = ["children", "visible", "onClose", "onExited"];
+function FullscreenModalBehaviour(_ref) {
+  let {
+      children,
+      visible,
+      onClose,
+      onExited
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$j);
+  const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
+  useEffect(() => {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, 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 !== null && backgroundColor !== void 0 ? backgroundColor : 'kitt.uiBackgroundLight',
+    children: children
+  });
+}
+
+const _excluded$i = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+function FullscreenModalHeader(_ref) {
+  let {
+      hasSeparator = true,
+      isTransparent,
+      title,
+      children,
+      right,
+      left,
+      shouldHandleTopNotch = true
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$i);
+  const {
+    top
+  } = useSafeAreaInsets();
+  const hasRight = Boolean(right);
+  const hasLeft = Boolean(left);
+  const hasContent = Boolean(title || children);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    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,
@@ -7911,7 +8499,7 @@ function NativeSlideInAnimation({
   });
 }
 
-function FullscreenModalAnimation({
+function FullscreenModal2Animation({
   visible,
   children,
   onEnter,
@@ -7969,15 +8557,15 @@ function FullscreenModalAnimation({
   });
 }
 
-const _excluded$e = ["children", "visible", "onClose", "onExited"];
-function FullscreenModalBehaviour(_ref) {
+const _excluded$h = ["children", "visible", "onClose", "onExited"];
+function FullscreenModal2Behaviour(_ref) {
   let {
       children,
       visible,
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -7987,7 +8575,7 @@ function FullscreenModalBehaviour(_ref) {
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(FullscreenModal2Animation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
       onExited: () => {
         if (onExited) onExited();
@@ -7998,7 +8586,52 @@ function FullscreenModalBehaviour(_ref) {
   });
 }
 
-function FullscreenModalContainer({
+const _excluded$g = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+function FullscreenModal2Body(_ref) {
+  let {
+      children,
+      shouldHandleBottomNotch,
+      style,
+      shouldHandleTopNotch
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$g);
+  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, _objectSpread(_objectSpread({}, props), {}, {
+        paddingX: "kitt.fullscreenModal.horizontalPadding",
+        paddingTop: paddingTop,
+        paddingBottom: paddingBottom,
+        style: style,
+        children: children
+      }))
+    })
+  });
+}
+
+function FullscreenModal2Container({
   children,
   backgroundColor
 }) {
@@ -8022,8 +8655,33 @@ function FullscreenModalContainer({
   });
 }
 
-const _excluded$d = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
-function FullscreenModalHeader(_ref) {
+const _excluded$f = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+function FullscreenModal2Footer(_ref) {
+  let {
+      shouldHandleBottomNotch = true,
+      hasSeparator = true,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$f);
+  const {
+    bottom
+  } = useSafeAreaInsets();
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    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 _excluded$e = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+function FullscreenModal2Header(_ref) {
   let {
       hasSeparator = true,
       isTransparent,
@@ -8033,7 +8691,7 @@ function FullscreenModalHeader(_ref) {
       left,
       shouldHandleTopNotch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   const {
     top
   } = useSafeAreaInsets();
@@ -8083,38 +8741,19 @@ function FullscreenModalHeader(_ref) {
   }));
 }
 
-function FullscreenModal({
-  body,
-  header,
-  footer,
+function FullscreenModal2({
   backgroundColor,
-  contentContainer: ContentContainer = IdentityComponent
+  children
 }) {
-  return /*#__PURE__*/jsx(FullscreenModalContainer, {
+  return /*#__PURE__*/jsx(FullscreenModal2Container, {
     backgroundColor: backgroundColor,
-    children: /*#__PURE__*/jsxs(ContentContainer, {
-      children: [header ? /*#__PURE__*/jsx(View, {
-        children: header
-      }) : null, /*#__PURE__*/jsxs(View, {
-        flexGrow: 1,
-        flexShrink: 1,
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/jsx(ScrollView$2, {
-          bounces: false,
-          contentContainerStyle: {
-            flexGrow: 1,
-            position: 'relative'
-          },
-          children: body
-        }), footer || null]
-      })]
-    })
+    children: children
   });
 }
-FullscreenModal.Header = FullscreenModalHeader;
-FullscreenModal.Footer = FullscreenModalFooter;
-FullscreenModal.Body = FullscreenModalBody;
-FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
+FullscreenModal2.Header = FullscreenModal2Header;
+FullscreenModal2.Footer = FullscreenModal2Footer;
+FullscreenModal2.Body = FullscreenModal2Body;
+FullscreenModal2.Behaviour = FullscreenModal2Behaviour;
 
 function GroupTags({
   children,
@@ -8369,7 +9008,7 @@ function Highlight({
   });
 }
 
-const _excluded$c = ["color", "isDisabled"];
+const _excluded$d = ["color", "isDisabled"];
 function getBackgroundColor$1(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -8391,7 +9030,7 @@ function Background(_ref) {
       color,
       isDisabled
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -8792,7 +9431,7 @@ const getBackgroundColor = ({
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint.default;
 };
 
-const _excluded$b = ["onPress", "testID"];
+const _excluded$c = ["onPress", "testID"];
 let MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
   MapMarkerVariantEnum["HOME"] = "home";
   MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
@@ -8862,7 +9501,7 @@ function MapMarker(_ref) {
       onPress,
       testID
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -11474,7 +12113,7 @@ function KittNativeBaseProvider({
   });
 }
 
-const _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+const _excluded$b = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function NavigationModalBehaviour(_ref) {
   let {
       children,
@@ -11485,7 +12124,7 @@ function NavigationModalBehaviour(_ref) {
       onExit,
       onClose
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   const AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -11544,32 +12183,122 @@ function NavigationModal({
     contentContainer: contentContainer
   });
 }
-function Header(props) {
+function Header$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-function Body(props) {
+function Body$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-function Footer(props) {
+function Footer$1(props) {
   const Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-NavigationModal.Header = Header;
-NavigationModal.Body = Body;
-NavigationModal.Footer = Footer;
+NavigationModal.Header = Header$1;
+NavigationModal.Body = Body$1;
+NavigationModal.Footer = Footer$1;
 NavigationModal.ModalBehaviour = NavigationModalBehaviour;
 
+const _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+function NavigationModal2Behaviour(_ref) {
+  let {
+      children,
+      visible,
+      appear = true,
+      onExited,
+      onEnter,
+      onExit,
+      onClose
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$a);
+  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, _objectSpread(_objectSpread({}, 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, _objectSpread({}, props));
+}
+function Body(props) {
+  const Component = useBreakpointValue({
+    base: FullscreenModal2.Body,
+    small: CardModal2.Body
+  });
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
+}
+function Footer(props) {
+  const Component = useBreakpointValue({
+    base: FullscreenModal2.Footer,
+    small: CardModal2.Footer
+  });
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
+}
+NavigationModal2.Header = Header;
+NavigationModal2.Body = Body;
+NavigationModal2.Footer = Footer;
+NavigationModal2.ModalBehaviour = NavigationModal2Behaviour;
+
 function Notification({
   type,
   children,
@@ -13964,5 +14693,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, 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 };
+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 };
 //# sourceMappingURL=index-metro.es.android.js.map