@ornikar/kitt-universal 25.48.0 → 25.48.1-canary.430f6cd109998511d4c4ad7369a24908547c62f4.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, useWindowDimensions } from 'react-native';
+import { ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions, Modal } 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$S = ["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,
@@ -2640,7 +2640,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$S);
+    props = _objectWithoutProperties(_ref, _excluded$11);
   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$R = ["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');
@@ -3044,7 +3044,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$R);
+    otherProps = _objectWithoutProperties(_ref, _excluded$10);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -3160,7 +3160,7 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$Q = ["color", "size"],
+var _excluded$$ = ["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$Q);
+    props = _objectWithoutProperties(_ref, _excluded$$);
   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$P = ["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,
@@ -3311,7 +3311,7 @@ function ButtonContent(_ref3) {
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
     var innerSpacing = _ref3.innerSpacing,
-    props = _objectWithoutProperties(_ref3, _excluded$P);
+    props = _objectWithoutProperties(_ref3, _excluded$_);
   var color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3544,7 +3544,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$O = ["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,
@@ -3555,7 +3555,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$Z);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -3628,7 +3628,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$N = ["children", "layout", "reversed"];
+var _excluded$Y = ["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$N);
+    props = _objectWithoutProperties(_ref, _excluded$Y);
   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$M = ["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,
@@ -3776,7 +3776,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$M);
+    props = _objectWithoutProperties(_ref2, _excluded$X);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -3971,30 +3971,30 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-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,
-  enter: contentAnimationEnter$1,
-  enterActive: contentAnimatioEnterActive$1,
-  exit: contentAnimatioExit$1,
-  exitActive: contentAnimatioExitActive$1
+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$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,
-  enter: opacityEnter$2,
-  enterActive: opacityEnterActive$2,
-  exit: opacityExit$2,
-  exitActive: opacityExitActive$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,
@@ -4010,7 +4010,7 @@ function CardModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$W);
   var theme = useTheme();
   var animation = theme.kitt.cardModal.animation;
   var sharedProps = {
@@ -4023,13 +4023,13 @@ function CardModalAnimation(_ref) {
     justifyContent: "center",
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames$3,
       children: /*#__PURE__*/jsx(Overlay, {
         onPress: onClose
       })
     })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames$2,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4043,13 +4043,13 @@ function CardModalAnimation(_ref) {
   }));
 }
 
-var _excluded$K = ["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$K);
+    props = _objectWithoutProperties(_ref, _excluded$V);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4074,7 +4074,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$J = ["children", "paddingX", "paddingY"];
+var _excluded$U = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -4084,7 +4084,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$U);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4096,7 +4096,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$I = ["children", "padding", "hasSeparator"];
+var _excluded$T = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -4106,7 +4106,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$T);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4120,7 +4120,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$H = ["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,
@@ -4133,7 +4133,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$S);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -4171,7 +4171,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$G = ["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,
@@ -4184,7 +4184,7 @@ function CardModal(_ref) {
     footer = _ref.footer,
     _ref$contentContainer = _ref.contentContainer,
     ContentContainer = _ref$contentContainer === void 0 ? IdentityComponent : _ref$contentContainer,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4206,6 +4206,245 @@ 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 contentAnimationClassNames$1 = {
+  appear: contentAnimationEnter$1,
+  appearActive: contentAnimatioEnterActive$1,
+  enter: contentAnimationEnter$1,
+  enterActive: contentAnimatioEnterActive$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 opacityClassNames$2 = {
+  appear: opacityEnter$2,
+  appearActive: opacityEnterActive$2,
+  enter: opacityEnter$2,
+  enterActive: opacityEnterActive$2,
+  exit: opacityExit$2,
+  exitActive: opacityExitActive$2
+};
+function CardModal2Animation(_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$Q);
+  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$2,
+      children: /*#__PURE__*/jsx(Overlay, {
+        onPress: onClose
+      })
+    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      timeout: isAnimationEnabled ? animation.content.duration : 0,
+      classNames: contentAnimationClassNames$1,
+      onEnter: onEnter,
+      onEntered: onEntered,
+      onExit: onExit,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(CardModal2RotationContainer, {
+        alignItems: "center",
+        margin: "auto",
+        children: children
+      })
+    }))]
+  }));
+}
+
+var _excluded$P = ["children", "visible", "onClose", "onExited"];
+function CardModal2Behaviour(_ref) {
+  var children = _ref.children,
+    visible = _ref.visible,
+    onClose = _ref.onClose,
+    onExited = _ref.onExited,
+    props = _objectWithoutProperties(_ref, _excluded$P);
+  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$O = ["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$O);
+  return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
+    showsVerticalScrollIndicator: false,
+    _contentContainerStyle: {
+      paddingX: paddingX,
+      paddingY: paddingY
+    }
+  }, props), {}, {
+    children: children
+  }));
+}
+
+var _excluded$N = ["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$N);
+  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$M = ["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$M);
+  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$L = ["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$L);
+  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$6(_ref) {
   var isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
@@ -4382,11 +4621,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$F = ["direction", "contentContainerStyle"];
+var _excluded$K = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4463,7 +4702,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$E = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$J = ["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";
@@ -4502,7 +4741,7 @@ function DialogModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var theme = useTheme();
   var animation = theme.kitt.dialogModal.animation;
   var sharedProps = {
@@ -4537,13 +4776,13 @@ function DialogModalAnimation(_ref) {
   }));
 }
 
-var _excluded$D = ["children", "visible", "onClose", "onExited"];
+var _excluded$I = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4574,7 +4813,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$C = ["stretch"];
+var _excluded$H = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -4614,7 +4853,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$C);
+    props = _objectWithoutProperties(_ref2, _excluded$H);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -4651,7 +4890,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$B = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$G = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$5 = ["phoneNumber", "children"],
   _excluded3$4 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -4661,7 +4900,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -4756,14 +4995,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$A = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$F = ["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$A);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     accessibilityRole: "link",
     href: href,
@@ -4839,7 +5078,7 @@ function InputTextContainer(props) {
   }, props));
 }
 
-var _excluded$z = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+var _excluded$E = ["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;
@@ -4860,7 +5099,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     multiline = _ref.multiline,
     height = _ref.height,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -4984,10 +5223,10 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$y = ["children"];
+var _excluded$D = ["children"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -4999,7 +5238,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-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"],
+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"],
   _excluded2$4 = ["onClick", "onPress"],
   _excluded3$3 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -5033,7 +5272,7 @@ function Autocomplete(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -5240,7 +5479,7 @@ function getBorderColor$1(_ref) {
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-var _excluded$w = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+var _excluded$B = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     _ref$hitSlop = _ref.hitSlop,
@@ -5250,7 +5489,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -5566,7 +5805,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$v = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$A = ["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,
@@ -5584,7 +5823,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$v);
+    _objectWithoutProperties(_ref, _excluded$A);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -5724,10 +5963,10 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$u = ["value"];
+var _excluded$z = ["value"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
@@ -6312,7 +6551,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$t = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$y = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -6320,7 +6559,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -6417,10 +6656,10 @@ var InputIban = /*#__PURE__*/forwardRef(function (props, ref) {
   }, props));
 });
 
-var _excluded$s = ["onChange"];
+var _excluded$x = ["onChange"];
 var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -6437,11 +6676,11 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$r = ["isPasswordDefaultVisible", "right"];
+var _excluded$w = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -6469,7 +6708,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$q = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
+var _excluded$v = ["enterKeyHint", "autoComplete", "phoneNumberLength", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -6483,7 +6722,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$q);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   var currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -6917,7 +7156,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$p = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$u = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -6930,7 +7169,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$p);
+    props = _objectWithoutProperties(_ref2, _excluded$u);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -6962,12 +7201,12 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-var _excluded$o = ["helper", "limit"];
+var _excluded$t = ["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$o);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   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 () {
@@ -7126,7 +7365,7 @@ function ToggleAnimated(_ref) {
   });
 }
 
-var _excluded$n = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
+var _excluded$s = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 var getLabelTypographyType = function (size) {
   return size === 'medium' ? 'body' : 'body-medium';
 };
@@ -7148,7 +7387,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$n);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var theme = useKittTheme();
   return /*#__PURE__*/jsxs(HStack, _objectSpread(_objectSpread({
     alignItems: "center"
@@ -7187,13 +7426,13 @@ function Toggle(_ref) {
   }));
 }
 
-var _excluded$m = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$r = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -7210,14 +7449,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$l = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$q = ["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$l);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -7234,7 +7473,7 @@ function FullscreenModalFooter(_ref) {
   }));
 }
 
-var _excluded$k = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+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";
@@ -7273,7 +7512,7 @@ function FullscreenModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var theme = useTheme();
   var animation = theme.kitt.fullscreenModal.animation;
   var sharedProps = {
@@ -7300,13 +7539,13 @@ function FullscreenModalAnimation(_ref) {
   }));
 }
 
-var _excluded$j = ["children", "visible", "onClose", "onExited"];
+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$j);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -7353,7 +7592,7 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$i = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+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,
@@ -7364,7 +7603,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -7446,6 +7685,331 @@ 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
+  });
+}
+
+function FullscreenModal2Animation(_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
+  };
+
+  // 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
+        })
+      })]
+    })
+  });
+}
+
+var _excluded$m = ["children", "visible", "onClose", "onExited"];
+function FullscreenModal2Behaviour(_ref) {
+  var children = _ref.children,
+    visible = _ref.visible,
+    onClose = _ref.onClose,
+    onExited = _ref.onExited,
+    props = _objectWithoutProperties(_ref, _excluded$m);
+  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(FullscreenModal2Animation, _objectSpread(_objectSpread({}, props), {}, {
+      visible: visible,
+      onExited: function handleExitAnimationDone() {
+        if (onExited) onExited();
+        setIsModalBehaviourVisible(false);
+      },
+      children: children
+    }))
+  });
+}
+
+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) {
+  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$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 _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$j);
+  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 FullscreenModal2(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+    children = _ref.children;
+  return /*#__PURE__*/jsx(FullscreenModal2Container, {
+    backgroundColor: backgroundColor,
+    children: children
+  });
+}
+FullscreenModal2.Header = FullscreenModal2Header;
+FullscreenModal2.Footer = FullscreenModal2Footer;
+FullscreenModal2.Body = FullscreenModal2Body;
+FullscreenModal2.Behaviour = FullscreenModal2Behaviour;
+
 function GroupTags(_ref) {
   var children = _ref.children,
     size = _ref.size;
@@ -7677,7 +8241,7 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$h = ["color", "isDisabled"];
+var _excluded$i = ["color", "isDisabled"];
 function getBackgroundColor$2(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -7697,7 +8261,7 @@ function getBackgroundColor$2(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -7975,10 +8539,10 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$g = ["children"];
+var _excluded$h = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$g);
+    rest = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -7989,14 +8553,14 @@ function ListItemContent(_ref) {
   }));
 }
 
-var _excluded$f = ["children", "side"],
+var _excluded$g = ["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$f);
+    rest = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -8017,7 +8581,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-var _excluded$e = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$f = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   var children = _ref.children,
     withPadding = _ref.withPadding,
@@ -8025,7 +8589,7 @@ function ListItem(_ref) {
     left = _ref.left,
     right = _ref.right,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -8191,7 +8755,7 @@ var getBackgroundColor$1 = function (_ref) {
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint["default"];
 };
 
-var _excluded$d = ["onPress", "testID"];
+var _excluded$e = ["onPress", "testID"];
 var MapMarkerVariantEnum = /*#__PURE__*/function (MapMarkerVariantEnum) {
   MapMarkerVariantEnum["HOME"] = "home";
   MapMarkerVariantEnum["MEETING_POINT"] = "meetingPoint";
@@ -8257,7 +8821,7 @@ function StaticMapMarker$1(_ref) {
 function MapMarker(_ref2) {
   var onPress = _ref2.onPress,
     testID = _ref2.testID,
-    props = _objectWithoutProperties(_ref2, _excluded$d);
+    props = _objectWithoutProperties(_ref2, _excluded$e);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -10874,7 +11438,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$c = ["scrollEnabled", "ListHeaderComponent", "ListFooterComponent", "data", "numColumns", "ListHeaderComponentStyle", "ListFooterComponentStyle", "contentContainerStyle", "keyExtractor", "renderItem"];
+var _excluded$d = ["scrollEnabled", "ListHeaderComponent", "ListFooterComponent", "data", "numColumns", "ListHeaderComponentStyle", "ListFooterComponentStyle", "contentContainerStyle", "keyExtractor", "renderItem"];
 function NativeOnlyFlatList(_ref) {
   var scrollEnabled = _ref.scrollEnabled,
     ListHeaderComponent = _ref.ListHeaderComponent,
@@ -10889,7 +11453,7 @@ function NativeOnlyFlatList(_ref) {
       return index.toString();
     } : _ref$keyExtractor,
     renderItem = _ref.renderItem,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/jsxs(ScrollView$1, _objectSpread(_objectSpread({
     scrollEnabled: scrollEnabled,
     contentContainerStyle: contentContainerStyle
@@ -10919,7 +11483,7 @@ function NativeOnlyFlatList(_ref) {
   }));
 }
 
-var _excluded$b = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+var _excluded$c = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function NavigationModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
@@ -10929,7 +11493,7 @@ function NavigationModalBehaviour(_ref) {
     onEnter = _ref.onEnter,
     onExit = _ref.onExit,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -10993,32 +11557,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$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,
@@ -13241,5 +13899,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, 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, 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.web.js.map