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

package/dist/index.es.js

@@ -2631,7 +2631,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$T = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$11 = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2644,7 +2644,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$T);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -2952,7 +2952,7 @@ var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInCon
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$S = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$10 = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -3007,7 +3007,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$S);
+    otherProps = _objectWithoutProperties(_ref, _excluded$10);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -3123,7 +3123,7 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$R = ["color", "size"],
+var _excluded$$ = ["color", "size"],
   _excluded2$5 = ["color"];
 function getIconSizeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
@@ -3144,7 +3144,7 @@ function createNativeBaseIconSize(type) {
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$R);
+    props = _objectWithoutProperties(_ref, _excluded$$);
   var ancestorType = useTypographyAncestorType();
   var iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
   var colorValue = getTypographyColorValue(color);
@@ -3197,7 +3197,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$Q = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
+var _excluded$_ = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -3274,7 +3274,7 @@ function ButtonContent(_ref3) {
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
     var innerSpacing = _ref3.innerSpacing,
-    props = _objectWithoutProperties(_ref3, _excluded$Q);
+    props = _objectWithoutProperties(_ref3, _excluded$_);
   var color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3571,7 +3571,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$P = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$Z = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3582,7 +3582,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Z);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -3655,7 +3655,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$O = ["children", "layout", "reversed"];
+var _excluded$Y = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3687,7 +3687,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$Y);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3740,7 +3740,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$N = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$X = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -3803,7 +3803,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$N);
+    props = _objectWithoutProperties(_ref2, _excluded$X);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -3858,7 +3858,7 @@ function IdentityComponent(_ref) {
   return children;
 }
 
-var _excluded$M = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints", "contentContainer"];
+var _excluded$W = ["children", "hasScrollView", "hasBackdrop", "hasHandle", "enableDynamicSizing", "snapPoints", "contentContainer"];
 function BottomSheetComp(_ref, ref) {
   var Content = _ref.children,
     _ref$hasScrollView = _ref.hasScrollView,
@@ -3873,7 +3873,7 @@ function BottomSheetComp(_ref, ref) {
     snapPoints = _ref$snapPoints === void 0 ? ['100%'] : _ref$snapPoints,
     _ref$contentContainer = _ref.contentContainer,
     ContentContainer = _ref$contentContainer === void 0 ? IdentityComponent : _ref$contentContainer,
-    rest = _objectWithoutProperties(_ref, _excluded$M);
+    rest = _objectWithoutProperties(_ref, _excluded$W);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var Wrapper = useMemo(function () {
@@ -4033,7 +4033,7 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-function NativeOpacityAnimation$2(_ref) {
+function NativeOpacityAnimation$4(_ref) {
   var visible = _ref.visible,
     children = _ref.children,
     onExited = _ref.onExited;
@@ -4072,7 +4072,7 @@ function NativeOpacityAnimation$2(_ref) {
   });
 }
 
-function NativeRotationAnimation$1(_ref) {
+function NativeRotationAnimation$2(_ref) {
   var visible = _ref.visible,
     children = _ref.children,
     onEntered = _ref.onEntered,
@@ -4166,14 +4166,14 @@ function CardModalAnimation(_ref) {
       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,
@@ -4184,13 +4184,13 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$L = ["children", "visible", "onClose", "onExited"];
+var _excluded$V = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$V);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4215,7 +4215,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$K = ["children", "paddingX", "paddingY"];
+var _excluded$U = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -4225,7 +4225,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$U);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4237,7 +4237,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$J = ["children", "padding", "hasSeparator"];
+var _excluded$T = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -4247,7 +4247,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$T);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4261,7 +4261,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$I = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$S = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -4274,7 +4274,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -4312,7 +4312,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$H = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer", "contentContainer"];
+var _excluded$R = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer", "contentContainer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -4325,7 +4325,7 @@ function CardModal(_ref) {
     footer = _ref.footer,
     _ref$contentContainer = _ref.contentContainer,
     ContentContainer = _ref$contentContainer === void 0 ? IdentityComponent : _ref$contentContainer,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4342,10 +4342,328 @@ function CardModal(_ref) {
     })
   }));
 }
-CardModal.Body = CardModalBody;
-CardModal.Header = CardModalHeader;
-CardModal.Footer = CardModalFooter;
-CardModal.ModalBehaviour = CardModalBehaviour;
+CardModal.Body = CardModalBody;
+CardModal.Header = CardModalHeader;
+CardModal.Footer = CardModalFooter;
+CardModal.ModalBehaviour = CardModalBehaviour;
+
+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 NativeOpacityAnimation$3(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var hasRunAnimationRef = useRef(false);
+  function handleAnimationFinished() {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  var opacityStyle = useAnimatedStyle(function () {
+    var _theme$kitt$cardModal = theme.kitt.cardModal.animation.overlay,
+      duration = _theme$kitt$cardModal.duration,
+      easing = _theme$kitt$cardModal.easing;
+    var _easing = _slicedToArray(easing, 4),
+      x1 = _easing[0],
+      y1 = _easing[1],
+      x2 = _easing[2],
+      y2 = _easing[3];
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, function (isFinished) {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation$1(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onEntered = _ref.onEntered,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var hasRunAnimationRef = useRef(false);
+  var rotation = useSharedValue(0.8);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+      hasRunAnimationRef.current = true;
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  var animatedStyle = useAnimatedStyle(function () {
+    var _theme$kitt$cardModal = theme.kitt.cardModal.animation.content,
+      duration = _theme$kitt$cardModal.duration,
+      easing = _theme$kitt$cardModal.easing;
+    var _easing = _slicedToArray(easing, 4),
+      x1 = _easing[0],
+      y1 = _easing[1],
+      x2 = _easing[2],
+      y2 = _easing[3];
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration: duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, function (isFinished) {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
+          duration: duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: "".concat(rotation.value, "deg")
+      }]
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
+function CardModal2Animation(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onEnter = _ref.onEnter,
+    onEntered = _ref.onEntered,
+    onExit = _ref.onExit,
+    onExited = _ref.onExited,
+    onClose = _ref.onClose;
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalVisible = _useState2[0],
+    setIsModalVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isContentVisible = _useState4[0],
+    setIsContentVisible = _useState4[1];
+  var handleAnimationExited = function () {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
+    if (Platform.OS === 'android' && onExited) onExited();
+  };
+  useEffect(function () {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: function onShow() {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: function 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
+        })
+      })]
+    })
+  });
+}
+
+var _excluded$Q = ["children", "visible", "onClose", "onExited"];
+function CardModal2Behaviour(_ref) {
+  var children = _ref.children,
+    visible = _ref.visible,
+    onClose = _ref.onClose,
+    onExited = _ref.onExited,
+    props = _objectWithoutProperties(_ref, _excluded$Q);
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalBehaviourVisible = _useState2[0],
+    setIsModalBehaviourVisible = _useState2[1];
+  useEffect(function () {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(CardModal2Animation, _objectSpread(_objectSpread({}, props), {}, {
+      visible: visible,
+      onExited: function handleExitAnimationDone() {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      onClose: onClose,
+      children: children
+    }))
+  });
+}
+
+var _excluded$P = ["children", "paddingX", "paddingY"];
+function CardModal2Body(_ref) {
+  var children = _ref.children,
+    _ref$paddingX = _ref.paddingX,
+    paddingX = _ref$paddingX === void 0 ? {
+      base: 'kitt.4',
+      medium: 'kitt.6'
+    } : _ref$paddingX,
+    _ref$paddingY = _ref.paddingY,
+    paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
+    props = _objectWithoutProperties(_ref, _excluded$P);
+  return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
+    showsVerticalScrollIndicator: false,
+    _contentContainerStyle: {
+      paddingX: paddingX,
+      paddingY: paddingY
+    }
+  }, props), {}, {
+    children: children
+  }));
+}
+
+var _excluded$O = ["children", "padding", "hasSeparator"];
+function CardModal2Footer(_ref) {
+  var children = _ref.children,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? {
+      base: 'kitt.4',
+      medium: 'kitt.2'
+    } : _ref$padding,
+    _ref$hasSeparator = _ref.hasSeparator,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    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
+  }));
+}
+
+var _excluded$N = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+function CardModal2Header(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    _ref$paddingBottom = _ref.paddingBottom,
+    paddingBottom = _ref$paddingBottom === void 0 ? {
+      base: 'kitt.4',
+      medium: 'kitt.2'
+    } : _ref$paddingBottom,
+    _ref$hasSeparator = _ref.hasSeparator,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    right = _ref.right,
+    left = _ref.left,
+    props = _objectWithoutProperties(_ref, _excluded$N);
+  var 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]
+    })
+  }));
+}
+
+var _excluded$M = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
+function CardModal2(_ref) {
+  var _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
+    withoutShadow = _ref.withoutShadow,
+    children = _ref.children,
+    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(_ref) {
   var isDisabled = _ref.isDisabled,
@@ -4554,11 +4872,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$G = ["direction", "contentContainerStyle"];
+var _excluded$L = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4635,7 +4953,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-function NativeOpacityAnimation$1(_ref) {
+function NativeOpacityAnimation$2(_ref) {
   var visible = _ref.visible,
     children = _ref.children,
     onExited = _ref.onExited;
@@ -4768,7 +5086,7 @@ function DialogModalAnimation(_ref) {
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center",
-      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$1, {
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation$2, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         children: /*#__PURE__*/jsx(Overlay, {
@@ -4788,13 +5106,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$F = ["children", "visible", "onClose", "onExited"];
+var _excluded$K = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4825,7 +5143,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$E = ["stretch"];
+var _excluded$J = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -4865,7 +5183,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$E);
+    props = _objectWithoutProperties(_ref2, _excluded$J);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -4902,7 +5220,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$D = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$I = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$4 = ["phoneNumber", "children"],
   _excluded3$3 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -4912,7 +5230,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$I);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -5064,7 +5382,7 @@ function useOpenExternalLink(errorHandler) {
   }();
 }
 
-var _excluded$C = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+var _excluded$H = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
@@ -5073,7 +5391,7 @@ function ExternalLink(_ref) {
     onPress = _ref.onPress,
     _ref$onOpenLinkError = _ref.onOpenLinkError,
     onOpenLinkError = _ref$onOpenLinkError === void 0 ? console.error : _ref$onOpenLinkError,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -5130,7 +5448,7 @@ function InputTextContainer(_ref) {
   });
 }
 
-var _excluded$B = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+var _excluded$G = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -5151,7 +5469,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     multiline = _ref.multiline,
     height = _ref.height,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -5276,10 +5594,10 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$A = ["children"];
+var _excluded$F = ["children"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5291,7 +5609,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-var _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"],
+var _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"];
@@ -5331,7 +5649,7 @@ function Autocomplete(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -5546,7 +5864,7 @@ function getBorderColor$1(_ref) {
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-var _excluded$y = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+var _excluded$D = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     _ref$hitSlop = _ref.hitSlop,
@@ -5556,7 +5874,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5874,7 +6192,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$x = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$C = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -5892,7 +6210,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$x);
+    _objectWithoutProperties(_ref, _excluded$C);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -6101,7 +6419,7 @@ var PressableDateInputs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$w = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+var _excluded$B = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -6110,7 +6428,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDefaultVisible = _ref.isDefaultVisible,
     value = _ref.value,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -6186,7 +6504,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$v = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$A = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
@@ -6204,7 +6522,7 @@ function ModalPlatformDateTimePicker(_ref2) {
     validateButtonLabel = _ref2.validateButtonLabel,
     onClose = _ref2.onClose,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$v);
+    props = _objectWithoutProperties(_ref2, _excluded$A);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -6250,7 +6568,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$u = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+var _excluded$z = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -6264,7 +6582,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var _useState = useState(isDefaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isPickerUIVisible = _useState2[0],
@@ -6311,7 +6629,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$t = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+var _excluded$y = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -6319,7 +6637,7 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pickerDefaultDate = _ref.pickerDefaultDate,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -6341,14 +6659,14 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$s = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+var _excluded$x = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$fillMode = _ref.fillMode,
     fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     enterKeyHint = _ref.enterKeyHint,
     value = _ref.value,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -6464,10 +6782,10 @@ function ImagePicker(_ref) {
   });
 }
 
-var _excluded$r = ["children"];
+var _excluded$w = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$r);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -6478,14 +6796,14 @@ function ListItemContent(_ref) {
   }));
 }
 
-var _excluded$q = ["children", "side"],
+var _excluded$v = ["children", "side"],
   _excluded2$2 = ["children", "align"];
 // Handles the vertical alignment of the side elements of the list item
 function ListItemSideContainer(_ref) {
   var children = _ref.children,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? 'left' : _ref$side,
-    rest = _objectWithoutProperties(_ref, _excluded$q);
+    rest = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -6506,7 +6824,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-var _excluded$p = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$u = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   var children = _ref.children,
     withPadding = _ref.withPadding,
@@ -6514,7 +6832,7 @@ function ListItem(_ref) {
     left = _ref.left,
     right = _ref.right,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -6547,10 +6865,10 @@ ListItem.Content = ListItemContent;
 ListItem.SideContent = ListItemSideContent;
 ListItem.SideContainer = ListItemSideContainer;
 
-var _excluded$o = ["title"];
+var _excluded$t = ["title"];
 function BottomSheetActionsItem(_ref) {
   var title = _ref.title,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(ListItem, {
       withPadding: true,
@@ -7155,7 +7473,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$n = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$s = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -7163,7 +7481,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -7260,10 +7578,10 @@ var InputIban = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 
-var _excluded$m = ["onChange"];
+var _excluded$r = ["onChange"];
 var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -7280,11 +7598,11 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$l = ["isPasswordDefaultVisible", "right"];
+var _excluded$q = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -7312,7 +7630,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$k = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+var _excluded$p = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -7326,7 +7644,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$phoneNumberLengt = _ref.phoneNumberLength,
     phoneNumberLength = _ref$phoneNumberLengt === void 0 ? 10 : _ref$phoneNumberLengt,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7761,7 +8079,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$j = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$o = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -7774,7 +8092,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$j);
+    props = _objectWithoutProperties(_ref2, _excluded$o);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -7806,12 +8124,12 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-var _excluded$i = ["helper", "limit"];
+var _excluded$n = ["helper", "limit"];
 var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _props$value, _props$value2;
   var helper = _ref.helper,
     limit = _ref.limit,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var shouldDisplayLimit = limit && limit > 0;
   var isLimitReached = ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) === limit;
   var limitContainerAnimatedStyle = useAnimatedStyle(function () {
@@ -7970,7 +8288,7 @@ function ToggleAnimated(_ref) {
   });
 }
 
-var _excluded$h = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+var _excluded$m = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 var getLabelTypographyType = function (size) {
   return size === 'medium' ? 'body' : 'body-medium';
 };
@@ -7992,7 +8310,7 @@ function Toggle(_ref) {
     value = _ref$value === void 0 ? false : _ref$value,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -8031,13 +8349,13 @@ function Toggle(_ref) {
   }));
 }
 
-var _excluded$g = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$l = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -8054,30 +8372,317 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$f = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$k = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   var _ref$shouldHandleBott = _ref.shouldHandleBottomNotch,
     shouldHandleBottomNotch = _ref$shouldHandleBott === void 0 ? true : _ref$shouldHandleBott,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+    bottom = _useSafeAreaInsets.bottom;
+  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(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children;
+  var theme = useTheme();
+  var opacityStyle = useAnimatedStyle(function () {
+    var _theme$kitt$fullscree = theme.kitt.fullscreenModal.animation.overlay,
+      duration = _theme$kitt$fullscree.duration,
+      easing = _theme$kitt$fullscree.easing;
+    var _easing = _slicedToArray(easing, 4),
+      x1 = _easing[0],
+      y1 = _easing[1],
+      x2 = _easing[2],
+      y2 = _easing[3];
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      })
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeSlideInAnimation$1(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onEntered = _ref.onEntered,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var _useWindowDimensions = useWindowDimensions(),
+    wHeight = _useWindowDimensions.height;
+  var 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();
+  }
+  var translateStyle = useAnimatedStyle(function () {
+    var _theme$kitt$fullscree = theme.kitt.fullscreenModal.animation.content,
+      duration = _theme$kitt$fullscree.duration,
+      easing = _theme$kitt$fullscree.easing;
+    var _easing = _slicedToArray(easing, 4),
+      x1 = _easing[0],
+      y1 = _easing[1],
+      x2 = _easing[2],
+      y2 = _easing[3];
+    return {
+      transform: [{
+        translateY: withTiming(visible ? 0 : wHeight, {
+          duration: duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        }, function (isFinished) {
+          if (!isFinished) return;
+          runOnJS(handleAnimationFinished)();
+        })
+      }]
+    };
+  });
+  return /*#__PURE__*/jsx(Animated.View, {
+    style: [{
+      transform: [{
+        translateY: wHeight
+      }]
+    }, translateStyle, {
+      width: '100%',
+      flex: 1
+    }],
+    children: children
+  });
+}
+
+function FullscreenModalAnimation(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onEnter = _ref.onEnter,
+    onEntered = _ref.onEntered,
+    onExit = _ref.onExit,
+    onExited = _ref.onExited;
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalVisible = _useState2[0],
+    setIsModalVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isContentVisible = _useState4[0],
+    setIsContentVisible = _useState4[1];
+  var handleAnimationExited = function () {
+    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(function () {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: function onShow() {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: function 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
+        })
+      })]
+    })
+  });
+}
+
+var _excluded$j = ["children", "visible", "onClose", "onExited"];
+function FullscreenModalBehaviour(_ref) {
+  var children = _ref.children,
+    visible = _ref.visible,
+    onClose = _ref.onClose,
+    onExited = _ref.onExited,
+    props = _objectWithoutProperties(_ref, _excluded$j);
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalBehaviourVisible = _useState2[0],
+    setIsModalBehaviourVisible = _useState2[1];
+  useEffect(function () {
+    if (visible === true) {
+      setIsModalBehaviourVisible(true);
+    }
+  }, [visible]);
+  return /*#__PURE__*/jsx(ModalBehaviour, {
+    visible: isModalBehaviourVisible,
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
+      visible: visible,
+      onExited: function handleExitAnimationDone() {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      children: children
+    }))
+  });
+}
+
+function FullscreenModalContainer(_ref) {
+  var children = _ref.children,
+    backgroundColor = _ref.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
+  });
+}
+
+var _excluded$i = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+function FullscreenModalHeader(_ref) {
+  var _ref$hasSeparator = _ref.hasSeparator,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    isTransparent = _ref.isTransparent,
+    title = _ref.title,
+    children = _ref.children,
+    right = _ref.right,
+    left = _ref.left,
+    _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
+    shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var _useSafeAreaInsets = useSafeAreaInsets(),
-    bottom = _useSafeAreaInsets.bottom;
+    top = _useSafeAreaInsets.top;
+  var hasRight = Boolean(right);
+  var hasLeft = Boolean(left);
+  var hasContent = Boolean(title || children);
   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"
+    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__*/jsx(View, {
-      paddingBottom: "kitt.fullscreenModal.footer.verticalPadding",
-      children: children
+    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(_ref) {
+  var body = _ref.body,
+    header = _ref.header,
+    footer = _ref.footer,
+    backgroundColor = _ref.backgroundColor,
+    _ref$contentContainer = _ref.contentContainer,
+    ContentContainer = _ref$contentContainer === void 0 ? IdentityComponent : _ref$contentContainer;
+  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(_ref) {
   var visible = _ref.visible,
     children = _ref.children;
@@ -8156,7 +8761,7 @@ function NativeSlideInAnimation(_ref) {
   });
 }
 
-function FullscreenModalAnimation(_ref) {
+function FullscreenModal2Animation(_ref) {
   var visible = _ref.visible,
     children = _ref.children,
     onEnter = _ref.onEnter,
@@ -8219,13 +8824,13 @@ function FullscreenModalAnimation(_ref) {
   });
 }
 
-var _excluded$e = ["children", "visible", "onClose", "onExited"];
-function FullscreenModalBehaviour(_ref) {
+var _excluded$h = ["children", "visible", "onClose", "onExited"];
+function FullscreenModal2Behaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -8238,7 +8843,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: function handleExitAnimationDone() {
         if (onExited) onExited();
@@ -8249,7 +8854,42 @@ function FullscreenModalBehaviour(_ref) {
   });
 }
 
-function FullscreenModalContainer(_ref) {
+var _excluded$g = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+function FullscreenModal2Body(_ref) {
+  var children = _ref.children,
+    shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
+    style = _ref.style,
+    shouldHandleTopNotch = _ref.shouldHandleTopNotch,
+    props = _objectWithoutProperties(_ref, _excluded$g);
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+    bottom = _useSafeAreaInsets.bottom,
+    top = _useSafeAreaInsets.top;
+  var _useTheme = useTheme(),
+    verticalPadding = _useTheme.kitt.fullscreenModal.body.verticalPadding;
+  var paddingBottom = shouldHandleBottomNotch ? Math.max(bottom, verticalPadding) : verticalPadding;
+  var 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(_ref) {
   var children = _ref.children,
     backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/jsx(View, {
@@ -8272,8 +8912,32 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$d = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
-function FullscreenModalHeader(_ref) {
+var _excluded$f = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+function FullscreenModal2Footer(_ref) {
+  var _ref$shouldHandleBott = _ref.shouldHandleBottomNotch,
+    shouldHandleBottomNotch = _ref$shouldHandleBott === void 0 ? true : _ref$shouldHandleBott,
+    _ref$hasSeparator = _ref.hasSeparator,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$f);
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+    bottom = _useSafeAreaInsets.bottom;
+  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
+    })
+  }));
+}
+
+var _excluded$e = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+function FullscreenModal2Header(_ref) {
   var _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     isTransparent = _ref.isTransparent,
@@ -8283,7 +8947,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -8332,38 +8996,18 @@ function FullscreenModalHeader(_ref) {
   }));
 }
 
-function FullscreenModal(_ref) {
-  var body = _ref.body,
-    header = _ref.header,
-    footer = _ref.footer,
-    backgroundColor = _ref.backgroundColor,
-    _ref$contentContainer = _ref.contentContainer,
-    ContentContainer = _ref$contentContainer === void 0 ? IdentityComponent : _ref$contentContainer;
-  return /*#__PURE__*/jsx(FullscreenModalContainer, {
+function FullscreenModal2(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+    children = _ref.children;
+  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(_ref) {
   var children = _ref.children,
@@ -8624,7 +9268,7 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$c = ["color", "isDisabled"];
+var _excluded$d = ["color", "isDisabled"];
 function getBackgroundColor$1(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -8644,7 +9288,7 @@ function getBackgroundColor$1(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -9048,7 +9692,7 @@ var getBackgroundColor = function (_ref) {
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint["default"];
 };
 
-var _excluded$b = ["onPress", "testID"];
+var _excluded$c = ["onPress", "testID"];
 var MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
   MapMarkerVariantEnum["HOME"] = "home";
   MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
@@ -9114,7 +9758,7 @@ function StaticMapMarker$1(_ref) {
 function MapMarker(_ref2) {
   var onPress = _ref2.onPress,
     testID = _ref2.testID,
-    props = _objectWithoutProperties(_ref2, _excluded$b);
+    props = _objectWithoutProperties(_ref2, _excluded$c);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -11731,7 +12375,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+var _excluded$b = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function NavigationModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
@@ -11741,7 +12385,7 @@ function NavigationModalBehaviour(_ref) {
     onEnter = _ref.onEnter,
     onExit = _ref.onExit,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -11805,32 +12449,126 @@ function NavigationModal(_ref) {
     contentContainer: contentContainer
   });
 }
-function Header(props) {
+function Header$1(props) {
   var Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-function Body(props) {
+function Body$1(props) {
   var Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-function Footer(props) {
+function Footer$1(props) {
   var 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;
 
+var _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+function NavigationModal2Behaviour(_ref) {
+  var children = _ref.children,
+    visible = _ref.visible,
+    _ref$appear = _ref.appear,
+    appear = _ref$appear === void 0 ? true : _ref$appear,
+    onExited = _ref.onExited,
+    onEnter = _ref.onEnter,
+    onExit = _ref.onExit,
+    onClose = _ref.onClose,
+    props = _objectWithoutProperties(_ref, _excluded$a);
+  var AnimationComponent = useBreakpointValue({
+    base: FullscreenModal2Animation,
+    small: CardModal2Animation
+  });
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalBehaviourVisible = _useState2[0],
+    setIsModalBehaviourVisible = _useState2[1];
+  var _useState3 = useState(appear),
+    _useState4 = _slicedToArray(_useState3, 2),
+    shouldAppear = _useState4[0],
+    setShouldAppear = _useState4[1];
+  useEffect(function () {
+    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: function handleEnter() {
+        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: function handleExit() {
+        if (onExit) onExit();
+
+        // Reset appear value to its original value for future modal display
+        setShouldAppear(appear);
+      },
+      onExited: function handleExitAnimationDone() {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      onClose: onClose,
+      children: children
+    }))
+  });
+}
+
+function NavigationModal2(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+    children = _ref.children;
+  var Component = useBreakpointValue({
+    base: FullscreenModal2,
+    small: CardModal2
+  });
+  return /*#__PURE__*/jsx(Component, {
+    backgroundColor: backgroundColor,
+    children: children
+  });
+}
+function Header(props) {
+  var Component = useBreakpointValue({
+    base: FullscreenModal2.Header,
+    small: CardModal2.Header
+  });
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
+}
+function Body(props) {
+  var Component = useBreakpointValue({
+    base: FullscreenModal2.Body,
+    small: CardModal2.Body
+  });
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
+}
+function Footer(props) {
+  var 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(_ref) {
   var type = _ref.type,
     children = _ref.children,
@@ -14227,5 +14965,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.es.js.map