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

package/dist/index.es.web.js

@@ -13,7 +13,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { SpinnerGapRegularIcon, UserRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, XRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
-import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions, Modal } from 'react-native';
+import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
@@ -2627,7 +2627,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$11 = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$S = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2640,7 +2640,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$11);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -2989,7 +2989,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$10 = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$R = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -3044,7 +3044,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$10);
+    otherProps = _objectWithoutProperties(_ref, _excluded$R);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -3160,7 +3160,7 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$$ = ["color", "size"],
+var _excluded$Q = ["color", "size"],
   _excluded2$6 = ["color"];
 function getIconSizeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
@@ -3181,7 +3181,7 @@ function createNativeBaseIconSize(type) {
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$$);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   var ancestorType = useTypographyAncestorType();
   var iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
   var colorValue = getTypographyColorValue(color);
@@ -3234,7 +3234,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$_ = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
+var _excluded$P = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -3311,7 +3311,7 @@ function ButtonContent(_ref3) {
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
     var innerSpacing = _ref3.innerSpacing,
-    props = _objectWithoutProperties(_ref3, _excluded$_);
+    props = _objectWithoutProperties(_ref3, _excluded$P);
   var color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3544,7 +3544,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$Z = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$O = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3555,7 +3555,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$Z);
+    props = _objectWithoutProperties(_ref, _excluded$O);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -3628,7 +3628,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$Y = ["children", "layout", "reversed"];
+var _excluded$N = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -3660,7 +3660,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$Y);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -3713,7 +3713,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$X = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$M = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -3776,7 +3776,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$X);
+    props = _objectWithoutProperties(_ref2, _excluded$M);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -3853,23 +3853,6 @@ function useStaticBottomSheet(Content) {
   };
 }
 
-/**
- * A utility component that returns its children without any modifications.
- *
- * This component acts as an identity function for React elements - it simply returns
- * whatever children are passed to it. It can be useful in conditional rendering patterns,
- * component composition, or as a placeholder in component hierarchies.
- *
- * @returns The children as they were passed in, without any wrapper elements
- *
- * @example
- * See CardModal and FullscreenModal for usage examples.
- */
-function IdentityComponent(_ref) {
-  var children = _ref.children;
-  return children;
-}
-
 var overflowHidden = "kitt-u_overflowHidden_otm3u3";
 function useBlockBodyScroll(shouldBlockScroll, isInitialRender) {
   useEffect(function () {
@@ -3971,259 +3954,11 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-var _excluded$W = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var contentAnimationEnter$2 = "kitt-u_contentAnimationEnter_c11xxy4r";
-var contentAnimatioEnterActive$2 = "kitt-u_contentAnimatioEnterActive_cl52117";
-var contentAnimatioExit$2 = "kitt-u_contentAnimatioExit_cyjczep";
-var contentAnimatioExitActive$2 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-var contentAnimationClassNames$2 = {
-  appear: contentAnimationEnter$2,
-  appearActive: contentAnimatioEnterActive$2,
-  enter: contentAnimationEnter$2,
-  enterActive: contentAnimatioEnterActive$2,
-  exit: contentAnimatioExit$2,
-  exitActive: contentAnimatioExitActive$2
-};
-var opacityEnter$3 = "kitt-u_opacityEnter_o1ae40dx";
-var opacityEnterActive$3 = "kitt-u_opacityEnterActive_o1t4vl7b";
-var opacityExit$3 = "kitt-u_opacityExit_ogyytm1";
-var opacityExitActive$3 = "kitt-u_opacityExitActive_o18xvk52";
-var opacityClassNames$3 = {
-  appear: opacityEnter$3,
-  appearActive: opacityEnterActive$3,
-  enter: opacityEnter$3,
-  enterActive: opacityEnterActive$3,
-  exit: opacityExit$3,
-  exitActive: opacityExitActive$3
-};
-function CardModalAnimation(_ref) {
-  var children = _ref.children,
-    _ref$appear = _ref.appear,
-    appear = _ref$appear === void 0 ? true : _ref$appear,
-    visible = _ref.visible,
-    _ref$unmountOnExit = _ref.unmountOnExit,
-    unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
-    _ref$isAnimationEnabl = _ref.isAnimationEnabled,
-    isAnimationEnabled = _ref$isAnimationEnabl === void 0 ? true : _ref$isAnimationEnabl,
-    onEnter = _ref.onEnter,
-    onEntered = _ref.onEntered,
-    onExit = _ref.onExit,
-    onExited = _ref.onExited,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$W);
-  var theme = useTheme();
-  var animation = theme.kitt.cardModal.animation;
-  var sharedProps = {
-    "in": visible,
-    appear: appear,
-    unmountOnExit: unmountOnExit
-  };
-  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
-    height: "100%",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$3,
-      children: /*#__PURE__*/jsx(Overlay, {
-        onPress: onClose
-      })
-    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$2,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(CardModalRotationContainer, {
-        alignItems: "center",
-        margin: "auto",
-        children: children
-      })
-    }))]
-  }));
-}
-
-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$V);
-  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(CardModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
-      visible: visible,
-      onExited: function handleExitAnimationDone() {
-        if (onExited) onExited();
-        setIsModalBehaviourVisible(false);
-      },
-      onClose: onClose,
-      children: children
-    }))
-  });
-}
-
-var _excluded$U = ["children", "paddingX", "paddingY"];
-function CardModalBody(_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$U);
-  return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
-    showsVerticalScrollIndicator: false,
-    _contentContainerStyle: {
-      paddingX: paddingX,
-      paddingY: paddingY
-    }
-  }, props), {}, {
-    children: children
-  }));
-}
-
-var _excluded$T = ["children", "padding", "hasSeparator"];
-function CardModalFooter(_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$T);
-  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$S = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
-function CardModalHeader(_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$S);
-  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$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,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
-    withoutShadow = _ref.withoutShadow,
-    children = _ref.children,
-    header = _ref.header,
-    body = _ref.body,
-    footer = _ref.footer,
-    _ref$contentContainer = _ref.contentContainer,
-    ContentContainer = _ref$contentContainer === void 0 ? IdentityComponent : _ref$contentContainer,
-    props = _objectWithoutProperties(_ref, _excluded$R);
-  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: /*#__PURE__*/jsx(ContentContainer, {
-      children: children || /*#__PURE__*/jsxs(Fragment, {
-        children: [header || null, body || null, footer || null]
-      })
-    })
-  }));
-}
-CardModal.Body = CardModalBody;
-CardModal.Header = CardModalHeader;
-CardModal.Footer = CardModalFooter;
-CardModal.ModalBehaviour = CardModalBehaviour;
-
-function CardModal2RotationContainer(props) {
-  return /*#__PURE__*/jsx(View, _objectSpread({
-    paddingX: "kitt.cardModal.overlayPadding.horizontal",
-    paddingY: "kitt.cardModal.overlayPadding.vertical",
-    maxWidth: "kitt.cardModal.maxWidthWithPadding",
-    width: "100%",
-    maxHeight: "100%",
-    _web: {
-      maxHeight: '100svh'
-    }
-  }, props));
-}
-
-var _excluded$Q = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c1qvsvvv";
-var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_c1ka3ql7";
-var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cn78c68";
-var contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_c14lwu6p";
+var _excluded$L = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
+var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
+var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
+var contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
 var contentAnimationClassNames$1 = {
   appear: contentAnimationEnter$1,
   appearActive: contentAnimatioEnterActive$1,
@@ -4232,10 +3967,10 @@ var contentAnimationClassNames$1 = {
   exit: contentAnimatioExit$1,
   exitActive: contentAnimatioExitActive$1
 };
-var opacityEnter$2 = "kitt-u_opacityEnter_o1sh7i4q";
-var opacityEnterActive$2 = "kitt-u_opacityEnterActive_ow4hztn";
-var opacityExit$2 = "kitt-u_opacityExit_o1ct2t80";
-var opacityExitActive$2 = "kitt-u_opacityExitActive_ov5hhc8";
+var opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
+var opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
+var opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
+var opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
 var opacityClassNames$2 = {
   appear: opacityEnter$2,
   appearActive: opacityEnterActive$2,
@@ -4244,7 +3979,7 @@ var opacityClassNames$2 = {
   exit: opacityExit$2,
   exitActive: opacityExitActive$2
 };
-function CardModal2Animation(_ref) {
+function CardModalAnimation(_ref) {
   var children = _ref.children,
     _ref$appear = _ref.appear,
     appear = _ref$appear === void 0 ? true : _ref$appear,
@@ -4258,7 +3993,7 @@ function CardModal2Animation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var theme = useTheme();
   var animation = theme.kitt.cardModal.animation;
   var sharedProps = {
@@ -4282,7 +4017,7 @@ function CardModal2Animation(_ref) {
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited,
-      children: /*#__PURE__*/jsx(CardModal2RotationContainer, {
+      children: /*#__PURE__*/jsx(CardModalRotationContainer, {
         alignItems: "center",
         margin: "auto",
         children: children
@@ -4291,13 +4026,13 @@ function CardModal2Animation(_ref) {
   }));
 }
 
-var _excluded$P = ["children", "visible", "onClose", "onExited"];
-function CardModal2Behaviour(_ref) {
+var _excluded$K = ["children", "visible", "onClose", "onExited"];
+function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4310,7 +4045,7 @@ function CardModal2Behaviour(_ref) {
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(CardModal2Animation, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(CardModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
       onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
@@ -4322,8 +4057,8 @@ function CardModal2Behaviour(_ref) {
   });
 }
 
-var _excluded$O = ["children", "paddingX", "paddingY"];
-function CardModal2Body(_ref) {
+var _excluded$J = ["children", "paddingX", "paddingY"];
+function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
     paddingX = _ref$paddingX === void 0 ? {
@@ -4332,7 +4067,7 @@ function CardModal2Body(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4344,8 +4079,8 @@ function CardModal2Body(_ref) {
   }));
 }
 
-var _excluded$N = ["children", "padding", "hasSeparator"];
-function CardModal2Footer(_ref) {
+var _excluded$I = ["children", "padding", "hasSeparator"];
+function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? {
@@ -4354,7 +4089,7 @@ function CardModal2Footer(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$N);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4368,8 +4103,8 @@ function CardModal2Footer(_ref) {
   }));
 }
 
-var _excluded$M = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
-function CardModal2Header(_ref) {
+var _excluded$H = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
     _ref$paddingBottom = _ref.paddingBottom,
@@ -4381,7 +4116,7 @@ function CardModal2Header(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -4419,15 +4154,18 @@ function CardModal2Header(_ref) {
   }));
 }
 
-var _excluded$L = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
-function CardModal2(_ref) {
+var _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+function CardModal(_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$L);
+    header = _ref.header,
+    body = _ref.body,
+    footer = _ref.footer,
+    props = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4437,13 +4175,15 @@ function CardModal2(_ref) {
     maxHeight: "100%",
     maxWidth: maxWidth,
     minHeight: "kitt.cardModal.minHeight",
-    children: children
+    children: children || /*#__PURE__*/jsxs(Fragment, {
+      children: [header || null, body || null, footer || null]
+    })
   }));
 }
-CardModal2.Body = CardModal2Body;
-CardModal2.Header = CardModal2Header;
-CardModal2.Footer = CardModal2Footer;
-CardModal2.Behaviour = CardModal2Behaviour;
+CardModal.Body = CardModalBody;
+CardModal.Header = CardModalHeader;
+CardModal.Footer = CardModalFooter;
+CardModal.ModalBehaviour = CardModalBehaviour;
 
 function getBackgroundColor$6(_ref) {
   var isDisabled = _ref.isDisabled,
@@ -4621,11 +4361,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$K = ["direction", "contentContainerStyle"];
+var _excluded$F = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4702,7 +4442,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$J = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$E = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
 var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
 var contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
@@ -4741,7 +4481,7 @@ function DialogModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var theme = useTheme();
   var animation = theme.kitt.dialogModal.animation;
   var sharedProps = {
@@ -4776,13 +4516,13 @@ function DialogModalAnimation(_ref) {
   }));
 }
 
-var _excluded$I = ["children", "visible", "onClose", "onExited"];
+var _excluded$D = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4813,7 +4553,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$H = ["stretch"];
+var _excluded$C = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -4853,7 +4593,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$H);
+    props = _objectWithoutProperties(_ref2, _excluded$C);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -4890,7 +4630,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$G = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$B = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$5 = ["phoneNumber", "children"],
   _excluded3$4 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -4900,7 +4640,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -4995,14 +4735,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$F = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$A = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
     _ref$openLinkBehavior = _ref.openLinkBehavior,
     openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     accessibilityRole: "link",
     href: href,
@@ -5078,7 +4818,7 @@ function InputTextContainer(props) {
   }, props));
 }
 
-var _excluded$E = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+var _excluded$z = ["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;
@@ -5099,7 +4839,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     multiline = _ref.multiline,
     height = _ref.height,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -5223,10 +4963,10 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$D = ["children"];
+var _excluded$y = ["children"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5238,7 +4978,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-var _excluded$C = ["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$x = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
   _excluded2$4 = ["onClick", "onPress"],
   _excluded3$3 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -5272,7 +5012,7 @@ function Autocomplete(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -5479,7 +5219,7 @@ function getBorderColor$1(_ref) {
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-var _excluded$B = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+var _excluded$w = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     _ref$hitSlop = _ref.hitSlop,
@@ -5489,7 +5229,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5805,7 +5545,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$A = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$v = ["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,
@@ -5823,7 +5563,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$A);
+    _objectWithoutProperties(_ref, _excluded$v);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -5963,10 +5703,10 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$z = ["value"];
+var _excluded$u = ["value"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
@@ -6551,7 +6291,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$y = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$t = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -6559,7 +6299,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -6656,10 +6396,10 @@ var InputIban = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 
-var _excluded$x = ["onChange"];
+var _excluded$s = ["onChange"];
 var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -6676,11 +6416,11 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$w = ["isPasswordDefaultVisible", "right"];
+var _excluded$r = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -6708,7 +6448,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$v = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+var _excluded$q = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -6722,7 +6462,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$v);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -7156,7 +6896,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$u = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$p = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -7169,7 +6909,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$u);
+    props = _objectWithoutProperties(_ref2, _excluded$p);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -7201,12 +6941,12 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-var _excluded$t = ["helper", "limit"];
+var _excluded$o = ["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$t);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   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 () {
@@ -7365,7 +7105,7 @@ function ToggleAnimated(_ref) {
   });
 }
 
-var _excluded$s = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+var _excluded$n = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 var getLabelTypographyType = function (size) {
   return size === 'medium' ? 'body' : 'body-medium';
 };
@@ -7387,7 +7127,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$s);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -7426,13 +7166,13 @@ function Toggle(_ref) {
   }));
 }
 
-var _excluded$r = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$m = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -7449,389 +7189,103 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$q = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$l = ["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$q);
-  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$p = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
-var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
-var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
-var slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
-var slideInClassNames = {
-  appear: slideInFromBottomEnter,
-  appearActive: slideInFromBottomEnterActive,
-  enter: slideInFromBottomEnter,
-  enterActive: slideInFromBottomEnterActive,
-  exit: slideInFromBottomExit,
-  exitActive: slideInFromBottomExitActive
-};
-var opacityEnter = "kitt-u_opacityEnter_okm44hr";
-var opacityEnterActive = "kitt-u_opacityEnterActive_o2w8t0i";
-var opacityExit = "kitt-u_opacityExit_o14r8iix";
-var opacityExitActive = "kitt-u_opacityExitActive_oim72y2";
-var opacityClassNames = {
-  appear: opacityEnter,
-  appearActive: opacityEnterActive,
-  enter: opacityEnter,
-  enterActive: opacityEnterActive,
-  exit: opacityExit,
-  exitActive: opacityExitActive
-};
-function FullscreenModalAnimation(_ref) {
-  var children = _ref.children,
-    _ref$appear = _ref.appear,
-    appear = _ref$appear === void 0 ? true : _ref$appear,
-    visible = _ref.visible,
-    _ref$unmountOnExit = _ref.unmountOnExit,
-    unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
-    _ref$isAnimationEnabl = _ref.isAnimationEnabled,
-    isAnimationEnabled = _ref$isAnimationEnabl === void 0 ? true : _ref$isAnimationEnabl,
-    onEnter = _ref.onEnter,
-    onEntered = _ref.onEntered,
-    onExit = _ref.onExit,
-    onExited = _ref.onExited,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$p);
-  var theme = useTheme();
-  var animation = theme.kitt.fullscreenModal.animation;
-  var sharedProps = {
-    "in": visible,
-    appear: appear,
-    unmountOnExit: unmountOnExit
-  };
-  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames,
-      children: /*#__PURE__*/jsx(Overlay, {
-        onPress: onClose
-      })
-    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: slideInClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: children
-    }))]
-  }));
-}
-
-var _excluded$o = ["children", "visible", "onClose", "onExited"];
-function FullscreenModalBehaviour(_ref) {
-  var children = _ref.children,
-    visible = _ref.visible,
-    onClose = _ref.onClose,
-    onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$o);
-  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$n = ["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$n);
-  var _useSafeAreaInsets = useSafeAreaInsets(),
-    top = _useSafeAreaInsets.top;
-  var hasRight = Boolean(right);
-  var hasLeft = Boolean(left);
-  var 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(_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;
-  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.bezier(x1, y1, x2, y2)
-      })
-    };
-  });
-  return /*#__PURE__*/jsx(Animated.View, {
-    style: [StyleSheet.absoluteFillObject, opacityStyle],
-    children: children
-  });
-}
-
-function NativeSlideInAnimation(_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.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
-  });
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  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 FullscreenModal2Animation(_ref) {
-  var visible = _ref.visible,
-    children = _ref.children,
+var _excluded$k = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
+var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
+var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
+var slideInFromBottomExitActive = "kitt-u_slideInFromBottomExitActive_srlzzmu";
+var slideInClassNames = {
+  appear: slideInFromBottomEnter,
+  appearActive: slideInFromBottomEnterActive,
+  enter: slideInFromBottomEnter,
+  enterActive: slideInFromBottomEnterActive,
+  exit: slideInFromBottomExit,
+  exitActive: slideInFromBottomExitActive
+};
+var opacityEnter = "kitt-u_opacityEnter_okm44hr";
+var opacityEnterActive = "kitt-u_opacityEnterActive_o2w8t0i";
+var opacityExit = "kitt-u_opacityExit_o14r8iix";
+var opacityExitActive = "kitt-u_opacityExitActive_oim72y2";
+var opacityClassNames = {
+  appear: opacityEnter,
+  appearActive: opacityEnterActive,
+  enter: opacityEnter,
+  enterActive: opacityEnterActive,
+  exit: opacityExit,
+  exitActive: opacityExitActive
+};
+function FullscreenModalAnimation(_ref) {
+  var children = _ref.children,
+    _ref$appear = _ref.appear,
+    appear = _ref$appear === void 0 ? true : _ref$appear,
+    visible = _ref.visible,
+    _ref$unmountOnExit = _ref.unmountOnExit,
+    unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
+    _ref$isAnimationEnabl = _ref.isAnimationEnabled,
+    isAnimationEnabled = _ref$isAnimationEnabl === void 0 ? true : _ref$isAnimationEnabl,
     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
+    onExited = _ref.onExited,
+    onClose = _ref.onClose,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var theme = useTheme();
+  var animation = theme.kitt.fullscreenModal.animation;
+  var sharedProps = {
+    "in": visible,
+    appear: appear,
+    unmountOnExit: unmountOnExit
   };
-
-  // When parent visibility is set to false, in order to have our exit animation we must in this order :
-  // 1 - run the exit animation
-  // 2 - once it is done, unmount the Modal
-  useEffect(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, {
-        visible: isContentVisible,
-        children: /*#__PURE__*/jsx(Overlay, {
-          onPress: handleAnimationExited
-        })
-      }), /*#__PURE__*/jsx(NativeSlideInAnimation, {
-        visible: isContentVisible,
-        onExited: handleAnimationExited,
-        onEntered: onEntered,
-        children: /*#__PURE__*/jsx(View, {
-          flexGrow: 1,
-          children: children
-        })
-      })]
-    })
-  });
+  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
+      classNames: opacityClassNames,
+      children: /*#__PURE__*/jsx(Overlay, {
+        onPress: onClose
+      })
+    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: slideInClassNames,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: children
+    }))]
+  }));
 }
 
-var _excluded$m = ["children", "visible", "onClose", "onExited"];
-function FullscreenModal2Behaviour(_ref) {
+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$m);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -7844,7 +7298,7 @@ function FullscreenModal2Behaviour(_ref) {
   return /*#__PURE__*/jsx(ModalBehaviour, {
     visible: isModalBehaviourVisible,
     onClose: onClose,
-    children: /*#__PURE__*/jsx(FullscreenModal2Animation, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
       onExited: function handleExitAnimationDone() {
         if (onExited) onExited();
@@ -7855,42 +7309,7 @@ function FullscreenModal2Behaviour(_ref) {
   });
 }
 
-var _excluded$l = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
-function FullscreenModal2Body(_ref) {
-  var children = _ref.children,
-    shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
-    style = _ref.style,
-    shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$l);
-  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) {
+function FullscreenModalContainer(_ref) {
   var children = _ref.children,
     backgroundColor = _ref.backgroundColor;
   return /*#__PURE__*/jsx(View, {
@@ -7913,32 +7332,8 @@ function FullscreenModal2Container(_ref) {
   });
 }
 
-var _excluded$k = ["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$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
-    })
-  }));
-}
-
-var _excluded$j = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
-function FullscreenModal2Header(_ref) {
+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,
@@ -7948,7 +7343,7 @@ function FullscreenModal2Header(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -7997,18 +7392,34 @@ function FullscreenModal2Header(_ref) {
   }));
 }
 
-function FullscreenModal2(_ref) {
-  var backgroundColor = _ref.backgroundColor,
-    children = _ref.children;
-  return /*#__PURE__*/jsx(FullscreenModal2Container, {
+function FullscreenModal(_ref) {
+  var body = _ref.body,
+    header = _ref.header,
+    footer = _ref.footer,
+    backgroundColor = _ref.backgroundColor;
+  return /*#__PURE__*/jsxs(FullscreenModalContainer, {
     backgroundColor: backgroundColor,
-    children: children
+    children: [header ? /*#__PURE__*/jsx(View, {
+      children: header
+    }) : null, /*#__PURE__*/jsxs(View, {
+      flexGrow: 1,
+      flexShrink: 1,
+      justifyContent: "space-between",
+      children: [/*#__PURE__*/jsx(ScrollView$2, {
+        bounces: false,
+        contentContainerStyle: {
+          flexGrow: 1,
+          position: 'relative'
+        },
+        children: body
+      }), footer || null]
+    })]
   });
 }
-FullscreenModal2.Header = FullscreenModal2Header;
-FullscreenModal2.Footer = FullscreenModal2Footer;
-FullscreenModal2.Body = FullscreenModal2Body;
-FullscreenModal2.Behaviour = FullscreenModal2Behaviour;
+FullscreenModal.Header = FullscreenModalHeader;
+FullscreenModal.Footer = FullscreenModalFooter;
+FullscreenModal.Body = FullscreenModalBody;
+FullscreenModal.ModalBehaviour = FullscreenModalBehaviour;
 
 function GroupTags(_ref) {
   var children = _ref.children,
@@ -8241,7 +7652,7 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$i = ["color", "isDisabled"];
+var _excluded$h = ["color", "isDisabled"];
 function getBackgroundColor$2(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -8261,7 +7672,7 @@ function getBackgroundColor$2(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -8539,10 +7950,10 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$h = ["children"];
+var _excluded$g = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$h);
+    rest = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -8553,14 +7964,14 @@ function ListItemContent(_ref) {
   }));
 }
 
-var _excluded$g = ["children", "side"],
+var _excluded$f = ["children", "side"],
   _excluded2$3 = ["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$g);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -8581,7 +7992,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-var _excluded$f = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$e = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   var children = _ref.children,
     withPadding = _ref.withPadding,
@@ -8589,7 +8000,7 @@ function ListItem(_ref) {
     left = _ref.left,
     right = _ref.right,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$f);
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -8755,7 +8166,7 @@ var getBackgroundColor$1 = function (_ref) {
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint["default"];
 };
 
-var _excluded$e = ["onPress", "testID"];
+var _excluded$d = ["onPress", "testID"];
 var MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
   MapMarkerVariantEnum["HOME"] = "home";
   MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
@@ -8821,7 +8232,7 @@ function StaticMapMarker$1(_ref) {
 function MapMarker(_ref2) {
   var onPress = _ref2.onPress,
     testID = _ref2.testID,
-    props = _objectWithoutProperties(_ref2, _excluded$e);
+    props = _objectWithoutProperties(_ref2, _excluded$d);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -11438,7 +10849,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$d = ["scrollEnabled", "ListHeaderComponent", "ListFooterComponent", "data", "numColumns", "ListHeaderComponentStyle", "ListFooterComponentStyle", "contentContainerStyle", "keyExtractor", "renderItem"];
+var _excluded$c = ["scrollEnabled", "ListHeaderComponent", "ListFooterComponent", "data", "numColumns", "ListHeaderComponentStyle", "ListFooterComponentStyle", "contentContainerStyle", "keyExtractor", "renderItem"];
 function NativeOnlyFlatList(_ref) {
   var scrollEnabled = _ref.scrollEnabled,
     ListHeaderComponent = _ref.ListHeaderComponent,
@@ -11453,7 +10864,7 @@ function NativeOnlyFlatList(_ref) {
       return index.toString();
     } : _ref$keyExtractor,
     renderItem = _ref.renderItem,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/jsxs(ScrollView$1, _objectSpread(_objectSpread({
     scrollEnabled: scrollEnabled,
     contentContainerStyle: contentContainerStyle
@@ -11483,7 +10894,7 @@ function NativeOnlyFlatList(_ref) {
   }));
 }
 
-var _excluded$c = ["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,
@@ -11493,7 +10904,7 @@ function NavigationModalBehaviour(_ref) {
     onEnter = _ref.onEnter,
     onExit = _ref.onExit,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -11543,8 +10954,7 @@ function NavigationModal(_ref) {
   var body = _ref.body,
     backgroundColor = _ref.backgroundColor,
     footer = _ref.footer,
-    header = _ref.header,
-    contentContainer = _ref.contentContainer;
+    header = _ref.header;
   var Component = useBreakpointValue({
     base: FullscreenModal,
     small: CardModal
@@ -11553,130 +10963,35 @@ function NavigationModal(_ref) {
     body: body,
     backgroundColor: backgroundColor,
     footer: footer,
-    header: header,
-    contentContainer: contentContainer
+    header: header
   });
 }
-function Header$1(props) {
+function Header(props) {
   var Component = useBreakpointValue({
     base: FullscreenModal.Header,
     small: CardModal.Header
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-function Body$1(props) {
+function Body(props) {
   var Component = useBreakpointValue({
     base: FullscreenModal.Body,
     small: CardModal.Body
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-function Footer$1(props) {
+function Footer(props) {
   var Component = useBreakpointValue({
     base: FullscreenModal.Footer,
     small: CardModal.Footer
   });
   return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 }
-NavigationModal.Header = Header$1;
-NavigationModal.Body = Body$1;
-NavigationModal.Footer = Footer$1;
+NavigationModal.Header = Header;
+NavigationModal.Body = Body;
+NavigationModal.Footer = Footer;
 NavigationModal.ModalBehaviour = NavigationModalBehaviour;
 
-var _excluded$b = ["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$b);
-  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,
@@ -13899,5 +13214,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, CardModal2, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, FullscreenModal2, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, NavigationModal2, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.web.js.map