@ornikar/kitt-universal 9.1.3 → 9.3.1

package/dist/index-browser-all.es.js

@@ -2,14 +2,14 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, CheckboxMark, XIcon, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { Platform, Image, Linking, useWindowDimensions, Pressable, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$2, TextInput, View, Animated as Animated$1, Easing } from 'react-native';
+import { Platform, Image, Linking, useWindowDimensions, Pressable as Pressable$1, StyleSheet, ScrollView as ScrollView$1, Modal as Modal$1, Text as Text$2, TextInput, View as View$1, Animated as Animated$1, Easing } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import React, { cloneElement, useContext, createContext, forwardRef, useMemo, useEffect, useState, useRef, Fragment as Fragment$1, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Text as Text$1, Image as Image$1, extendTheme, NativeBaseProvider } from 'native-base';
-import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useAnimatedProps, withDelay, withTiming, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Text as Text$1, Image as Image$1, NativeBaseProvider, extendTheme, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, View as View$2, ScrollView as ScrollView$2, Pressable as Pressable$2 } from 'native-base';
+import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, useAnimatedProps, withDelay, withTiming, Easing as Easing$1, withRepeat, interpolate } from 'react-native-reanimated';
 import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -116,7 +116,7 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$i = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$k = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -177,7 +177,7 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$i);
+      otherProps = _objectWithoutProperties(_ref, _excluded$k);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -188,6 +188,18 @@ function Typography(_ref) {
     base: baseOrDefaultToBody
   }));
 
+  if (process.env.NODE_ENV !== 'production') {
+    Object.entries(type).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          key = _ref3[0],
+          value = _ref3[1];
+
+      if (value && isTypeHeader(value) !== isHeader) {
+        throw new Error("Invalid value for \"".concat(key, "\": \"").concat(value, "\" is ").concat(isHeader ? 'not' : '', " an header. Don't mix headers and bodies."));
+      }
+    });
+  }
+
   var text = /*#__PURE__*/jsx(Text$1, _objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
@@ -260,7 +272,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$h = ["size", "round", "light", "sizeVariant"];
+var _excluded$j = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -331,7 +343,7 @@ function Avatar(_ref6) {
       round = _ref6.round,
       light = _ref6.light,
       sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$h);
+      props = _objectWithoutProperties(_ref6, _excluded$j);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
@@ -510,12 +522,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$g = ["color"],
+var _excluded$i = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -547,7 +559,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$f = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$h = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -689,7 +701,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$f);
+      props = _objectWithoutProperties(_ref7, _excluded$h);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -855,7 +867,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$e = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$g = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
     _excluded2$2 = ["phoneNumber", "children"],
     _excluded3$1 = ["phoneNumber", "children"],
     _excluded4 = ["emailAddress", "children"];
@@ -865,7 +877,7 @@ function ExternalAppLink(_ref) {
       appValue = _ref.appValue,
       onPress = _ref.onPress,
       onOpenAppError = _ref.onOpenAppError,
-      rest = _objectWithoutProperties(_ref, _excluded$e);
+      rest = _objectWithoutProperties(_ref, _excluded$g);
 
   var href = "".concat(appScheme, ":").concat(appValue);
 
@@ -888,26 +900,25 @@ function ExternalAppLink(_ref) {
                 break;
               }
 
-              Linking.openURL(href)["catch"](function (err) {
-                console.error("An error occurred while opening ".concat(href), err);
-                onOpenAppError === null || onOpenAppError === void 0 ? void 0 : onOpenAppError("An error occurred while opening ".concat(href));
-              });
-
               if (!onPress) {
-                _context.next = 10;
+                _context.next = 9;
                 break;
               }
 
               onPress(e);
 
               if (!(e !== null && e !== void 0 && e.defaultPrevented)) {
-                _context.next = 10;
+                _context.next = 9;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 10:
+            case 9:
+              Linking.openURL(href)["catch"](function (err) {
+                console.error("An error occurred while opening ".concat(href), err);
+                onOpenAppError === null || onOpenAppError === void 0 ? void 0 : onOpenAppError("An error occurred while opening ".concat(href));
+              });
               _context.next = 13;
               break;
 
@@ -984,14 +995,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$d = ["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$d);
+      rest = _objectWithoutProperties(_ref, _excluded$f);
 
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress(e) {
@@ -1488,6 +1499,11 @@ var listItem = {
   innerMargin: 8
 };
 
+var navigationModal = {
+  height: 56,
+  padding: 16
+};
+
 var pageLoader = {
   size: 60,
   strokeWidth: 3,
@@ -1633,7 +1649,8 @@ var theme = {
   skeleton: skeleton,
   tag: tag,
   tooltip: tooltip,
-  typography: typography
+  typography: typography,
+  navigationModal: navigationModal
 };
 
 function matchWindowSize(_ref, _ref2) {
@@ -1930,7 +1947,7 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$c = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
+var _excluded$e = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
 function DatePickerAndroid(_ref) {
   var onBlur = _ref.onBlur,
       onFocus = _ref.onFocus,
@@ -1942,7 +1959,7 @@ function DatePickerAndroid(_ref) {
       setCurrentValue = _ref.setCurrentValue,
       _onChange = _ref.onChange,
       isFocused = _ref.isFocused,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var handleClose = function () {
     if (onBlur) onBlur();
@@ -1982,7 +1999,7 @@ function DatePickerAndroid(_ref) {
 }
 
 // Don't use styled.Pressable here - babel-plugin-styled-components-react-native-web only supports tagged templates
-var OverlayPressable = /*#__PURE__*/styled(Pressable).withConfig({
+var OverlayPressable = /*#__PURE__*/styled(Pressable$1).withConfig({
   displayName: "Overlay__OverlayPressable"
 })(function (_ref) {
   var theme = _ref.theme;
@@ -2009,7 +2026,7 @@ var BodyView = /*#__PURE__*/styled.View.withConfig({
 });
 function ModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/jsx(ScrollView, {
+  return /*#__PURE__*/jsx(ScrollView$1, {
     children: /*#__PURE__*/jsx(BodyView, {
       children: children
     })
@@ -2032,11 +2049,11 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$b = ["as", "children"];
+var _excluded$d = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
@@ -2066,7 +2083,7 @@ function withTheme(WrappedComponent) {
   });
 }
 
-var _excluded$a = ["color", "disabled"];
+var _excluded$c = ["color", "disabled"];
 var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
@@ -2130,7 +2147,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$a);
+      props = _objectWithoutProperties(_ref9, _excluded$c);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -2311,7 +2328,7 @@ function IconButton(_ref7) {
   });
 }
 
-var OnCloseContext = /*#__PURE__*/createContext(function () {});
+var OnCloseContext$1 = /*#__PURE__*/createContext(function () {});
 
 var HeaderView = /*#__PURE__*/styled.View.withConfig({
   displayName: "Header__HeaderView"
@@ -2345,7 +2362,7 @@ function ModalHeader(_ref6) {
   var left = _ref6.left,
       right = _ref6.right,
       children = _ref6.children;
-  var onClose = useContext(OnCloseContext);
+  var onClose = useContext(OnCloseContext$1);
   var isIconLeft = !!left;
   return /*#__PURE__*/jsxs(HeaderView, {
     children: [isIconLeft && /*#__PURE__*/jsx(LeftIconView, {
@@ -2386,7 +2403,7 @@ function Modal(_ref5) {
       onClose = _ref5.onClose,
       onEntered = _ref5.onEntered,
       onExited = _ref5.onExited;
-  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
+  return /*#__PURE__*/jsx(OnCloseContext$1.Provider, {
     value: onClose,
     children: /*#__PURE__*/jsx(Modal$1, {
       transparent: true,
@@ -2443,7 +2460,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$9 = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$b = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 
 function ModalTitle(_ref) {
   var children = _ref.children;
@@ -2463,7 +2480,7 @@ function ModalPlatformDateTimePicker(_ref2) {
       validateButtonLabel = _ref2.validateButtonLabel,
       onClose = _ref2.onClose,
       onChange = _ref2.onChange,
-      props = _objectWithoutProperties(_ref2, _excluded$9);
+      props = _objectWithoutProperties(_ref2, _excluded$b);
 
   var _useState = useState(value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2507,7 +2524,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$8 = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
+var _excluded$a = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
 function DatePicker(_ref) {
   var value = _ref.value,
       pickerUITestID = _ref.pickerUITestID,
@@ -2518,7 +2535,7 @@ function DatePicker(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       pickerDefaultDate = _ref.pickerDefaultDate,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var _useState = useState(isDefaultVisible),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2585,7 +2602,7 @@ var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "InputTextContainer"
 })(["position:relative;"]);
 
-var _excluded$7 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
+var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
 var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput"
 })(["", " padding:", ";line-height:", ";width:100%;min-height:", "px;"], styledTextInputMixin, function (_ref) {
@@ -2634,7 +2651,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       onSubmitEditing = _ref4.onSubmitEditing,
       _onFocus = _ref4.onFocus,
       _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$7);
+      props = _objectWithoutProperties(_ref4, _excluded$9);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -2783,14 +2800,14 @@ function InputIcon(_ref) {
 function InputPressable(_ref) {
   var props = _extends({}, _ref);
 
-  return /*#__PURE__*/jsx(Pressable, _objectSpread({}, props));
+  return /*#__PURE__*/jsx(Pressable$1, _objectSpread({}, props));
 }
 
-var _excluded$6 = ["isPasswordDefaultVisible", "right"];
+var _excluded$8 = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2829,7 +2846,7 @@ var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
 };
 
-var InputTagContainer = /*#__PURE__*/styled(View).withConfig({
+var InputTagContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputTag__InputTagContainer"
 })(["align-items:center;justify-content:center;flex-direction:row;align-self:flex-start;overflow:hidden;padding-horizontal:", "px;background-color:", ";border-radius:", "px;"], function (_ref) {
   var theme = _ref.theme;
@@ -2851,7 +2868,7 @@ var InputTagContainer = /*#__PURE__*/styled(View).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.forms.inputTag.borderRadius;
 });
-var IconContainer = /*#__PURE__*/styled(View).withConfig({
+var IconContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputTag__IconContainer"
 })(["margin-right:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
@@ -2993,7 +3010,7 @@ function TextArea(_ref) {
   }, props));
 }
 
-var Body = /*#__PURE__*/styled.View.withConfig({
+var Body$1 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Body"
 })(["", " background-color:", ";flex:1;"], function (_ref) {
   var theme = _ref.theme;
@@ -3006,7 +3023,7 @@ var Body = /*#__PURE__*/styled.View.withConfig({
 });
 function FullScreenModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/jsx(Body, {
+  return /*#__PURE__*/jsx(Body$1, {
     children: children
   });
 }
@@ -3030,7 +3047,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = /*#__PURE__*/styled.View.withConfig({
+var Header$1 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Header"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
   var theme = _ref2.theme,
@@ -3114,7 +3131,7 @@ function FullScreenModalHeader(_ref6) {
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/jsxs(Header, {
+  return /*#__PURE__*/jsxs(Header$1, {
     insetTop: Platform.OS === 'ios' ? undefined : top,
     children: [left ? /*#__PURE__*/jsx(SideContainer, {
       onLayout: function onLayout(e) {
@@ -3192,20 +3209,20 @@ function SpinningIcon(_ref) {
   });
 }
 
-var _excluded$5 = ["children"];
+var _excluded$7 = ["children"];
 var ContentView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemContent__ContentView"
 })(["flex:1 0 0%;align-self:center;"]);
 function ListItemContent(_ref) {
   var children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$5);
+      rest = _objectWithoutProperties(_ref, _excluded$7);
 
   return /*#__PURE__*/jsx(ContentView, _objectSpread(_objectSpread({}, rest), {}, {
     children: children
   }));
 }
 
-var _excluded$4 = ["children", "side"],
+var _excluded$6 = ["children", "side"],
     _excluded2$1 = ["children", "align"];
 var SideContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItemSideContent__SideContainerView"
@@ -3223,7 +3240,7 @@ function ListItemSideContainer(_ref3) {
   var children = _ref3.children,
       _ref3$side = _ref3.side,
       side = _ref3$side === void 0 ? 'left' : _ref3$side,
-      rest = _objectWithoutProperties(_ref3, _excluded$4);
+      rest = _objectWithoutProperties(_ref3, _excluded$6);
 
   return /*#__PURE__*/jsx(SideContainerView, _objectSpread(_objectSpread({
     side: side
@@ -3250,7 +3267,7 @@ function ListItemSideContent(_ref5) {
   }));
 }
 
-var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$5 = ["children", "withPadding", "borders", "left", "right", "onPress"];
 var ContainerView = /*#__PURE__*/styled.View.withConfig({
   displayName: "ListItem__ContainerView"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -3289,9 +3306,9 @@ function ListItem(_ref5) {
       left = _ref5.left,
       right = _ref5.right,
       onPress = _ref5.onPress,
-      rest = _objectWithoutProperties(_ref5, _excluded$3);
+      rest = _objectWithoutProperties(_ref5, _excluded$5);
 
-  var Wrapper = onPress ? Pressable : Fragment$1;
+  var Wrapper = onPress ? Pressable$1 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
@@ -3477,6 +3494,64 @@ function Message(_ref) {
   });
 }
 
+function ModalBehaviourPortal(_ref) {
+  var children = _ref.children;
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+}
+
+var OnCloseContext = /*#__PURE__*/createContext(function () {});
+function OnCloseProvider(_ref) {
+  var children = _ref.children,
+      onClose = _ref.onClose;
+  return /*#__PURE__*/jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: children
+  });
+}
+function useOnCloseModalBehaviour() {
+  var onClose = useContext(OnCloseContext);
+  return onClose;
+}
+
+function CloseButton(_ref) {
+  var children = _ref.children,
+      onPress = _ref.onPress;
+  var onCloseContextCallback = useOnCloseModalBehaviour();
+  return /*#__PURE__*/cloneElement(children, {
+    onPress: function handleClose() {
+      if (onPress) onPress();
+      onCloseContextCallback();
+    }
+  });
+}
+
+var ModalBehaviourContainer = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "ModalBehaviour__ModalBehaviourContainer"
+})(["", ""], function () {
+  if (Platform.OS !== 'web') return undefined;
+  return css(["position:fixed;top:0;left:0;width:100%;"]);
+});
+function ModalBehaviour(_ref2) {
+  var children = _ref2.children,
+      visible = _ref2.visible,
+      style = _ref2.style,
+      onClose = _ref2.onClose;
+  return /*#__PURE__*/jsx(OnCloseProvider, {
+    onClose: onClose,
+    children: /*#__PURE__*/jsx(ModalBehaviourPortal, {
+      visible: visible,
+      children: visible ? /*#__PURE__*/jsx(ModalBehaviourContainer, {
+        style: style,
+        children: children
+      }) : null
+    })
+  });
+}
+ModalBehaviour.CloseButton = CloseButton;
+
 var createKittSpaces = function (spacing) {
   var sizes = {};
 
@@ -3485,12 +3560,17 @@ var createKittSpaces = function (spacing) {
   }
 
   return sizes;
-}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
+}; // reset native-base to be able to set size / space as a number
+// https://docs.nativebase.io/next/default-theme#h2-size
+
 
+var overridenNativeBaseSizeandSpaceScale = Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 0.5, 1.5, 2.5, 3.5].map(function (value) {
+  return [value, value];
+})); // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
 
 var createKittNativeBaseCustomTheme = function (theme) {
   var spaces = createKittSpaces(theme.spacing);
-  return extendTheme({
+  var extendedTheme = extendTheme({
     colors: {
       kitt: _objectSpread(_objectSpread({}, theme.colors), {}, {
         typography: theme.typography.colors
@@ -3499,10 +3579,8 @@ var createKittNativeBaseCustomTheme = function (theme) {
     radii: {
       'kitt.borderRadius': theme.card.borderRadius
     },
-    sizes: _objectSpread(_objectSpread({}, spaces), Object.fromEntries([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 78, 80, 96, 0.5, 1.5, 2.5, 3.5].map(function (value) {
-      return [value, value];
-    }))),
-    space: spaces,
+    sizes: _objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale),
+    space: _objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale),
     breakpoints: {
       // kitt breakpoints
       base: KittBreakpoints.BASE,
@@ -3598,6 +3676,9 @@ var createKittNativeBaseCustomTheme = function (theme) {
       }
     }
   });
+  return _objectSpread(_objectSpread({}, extendedTheme), {}, {
+    space: extendedTheme.space
+  });
 };
 function KittNativeBaseProvider(_ref) {
   var theme = _ref.theme,
@@ -3614,6 +3695,233 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
+var Stack = Stack$1;
+var VStack = VStack$1;
+var HStack = HStack$1;
+
+var View = View$2;
+var ScrollView = ScrollView$2;
+var Pressable = Pressable$2;
+
+var _excluded$4 = ["children"];
+var ViewWithPadding = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "ContentPadding__ViewWithPadding"
+})(["padding:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return "0 ".concat(theme.kitt.navigationModal.padding, "px");
+});
+function ContentPadding(_ref2) {
+  var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded$4);
+
+  return /*#__PURE__*/jsx(ViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+}
+
+var _excluded$3 = ["children", "shouldHandleBottomNotch", "style"];
+var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
+  displayName: "Body__StyledViewWithPadding"
+})(["padding-top:", "px;padding-bottom:", "px;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 6;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $insetBottom = _ref2.$insetBottom;
+  return Math.max(theme.kitt.spacing * 4, $insetBottom);
+});
+function Body(_ref3) {
+  var children = _ref3.children,
+      shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
+      style = _ref3.style,
+      props = _objectWithoutProperties(_ref3, _excluded$3);
+
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+      bottom = _useSafeAreaInsets.bottom;
+
+  var insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  return /*#__PURE__*/jsx(StyledViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
+    $insetBottom: insetBottom,
+    style: style,
+    children: children
+  }));
+}
+
+var FooterContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
+  displayName: "Footer__FooterContainer"
+})(["padding-top:", "px;padding-bottom:", "px;", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.spacing * 3;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $insetBottom = _ref2.$insetBottom;
+  return Math.max(theme.kitt.spacing * 3, $insetBottom);
+}, function (_ref3) {
+  var $hasSeparator = _ref3.$hasSeparator;
+  if (!$hasSeparator) return undefined;
+  return css(["border-top-width:1px;border-top-color:", ";"], function (_ref4) {
+    var theme = _ref4.theme;
+    return theme.kitt.colors.separator;
+  });
+});
+function Footer(_ref5) {
+  var _ref5$shouldHandleBot = _ref5.shouldHandleBottomNotch,
+      shouldHandleBottomNotch = _ref5$shouldHandleBot === void 0 ? true : _ref5$shouldHandleBot,
+      _ref5$hasSeparator = _ref5.hasSeparator,
+      hasSeparator = _ref5$hasSeparator === void 0 ? true : _ref5$hasSeparator,
+      children = _ref5.children,
+      style = _ref5.style;
+
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+      bottom = _useSafeAreaInsets.bottom;
+
+  var insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  return /*#__PURE__*/jsx(FooterContainer, {
+    $insetBottom: insetBottom,
+    $hasSeparator: hasSeparator,
+    style: style,
+    children: children
+  });
+}
+
+var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
+  displayName: "Header__HeaderContainer"
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.navigationModal.height;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      $isTransparent = _ref2.$isTransparent;
+  if ($isTransparent) return 'transparent';
+  return theme.kitt.colors.uiBackgroundLight;
+}, function (_ref3) {
+  var theme = _ref3.theme,
+      $hasRight = _ref3.$hasRight;
+  return $hasRight ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding;
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      $hasLeft = _ref4.$hasLeft;
+  return $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding;
+}, function (_ref5) {
+  var $hasSeparator = _ref5.$hasSeparator;
+  if (!$hasSeparator) return undefined;
+  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref6) {
+    var theme = _ref6.theme;
+    return theme.kitt.colors.separator;
+  });
+});
+var Row = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "Header__Row"
+})(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref7) {
+  var $hasContent = _ref7.$hasContent,
+      $hasLeft = _ref7.$hasLeft;
+  return !$hasContent && !$hasLeft ? 'flex-end' : 'space-between';
+});
+var ButtonContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "Header__ButtonContainer"
+})(["width:", "px;"], function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.iconButton.width;
+});
+var ChildrenComponent = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "Header__ChildrenComponent"
+})(["flex:1;align-items:center;", ";"], function (_ref9) {
+  var theme = _ref9.theme,
+      $hasLeft = _ref9.$hasLeft,
+      $hasRight = _ref9.$hasRight;
+  var paddingHorizontal = theme.kitt.spacing * 2;
+  return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
+});
+var HeaderTitle = /*#__PURE__*/styled(Typography.Text).withConfig({
+  displayName: "Header__HeaderTitle"
+})(["flex:1;text-align:", ";", ";"], function (_ref10) {
+  var $hasLeft = _ref10.$hasLeft,
+      $hasRight = _ref10.$hasRight;
+  if (!$hasLeft && $hasRight) return 'left';
+  return 'center';
+}, function (_ref11) {
+  var theme = _ref11.theme,
+      $hasLeft = _ref11.$hasLeft,
+      $hasRight = _ref11.$hasRight;
+  var paddingHorizontal = theme.kitt.spacing * 2;
+  return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
+});
+function Header(_ref12) {
+  var _ref12$hasSeparator = _ref12.hasSeparator,
+      hasSeparator = _ref12$hasSeparator === void 0 ? true : _ref12$hasSeparator,
+      isTransparent = _ref12.isTransparent,
+      title = _ref12.title,
+      children = _ref12.children,
+      right = _ref12.right,
+      left = _ref12.left,
+      style = _ref12.style;
+  var sharedProps = {
+    $hasLeft: Boolean(left),
+    $hasRight: Boolean(right)
+  };
+  return /*#__PURE__*/jsx(HeaderContainer, {
+    $isTransparent: isTransparent,
+    $hasSeparator: hasSeparator,
+    $hasLeft: Boolean(left),
+    $hasRight: Boolean(right),
+    style: style,
+    children: /*#__PURE__*/jsxs(Row, _objectSpread(_objectSpread({
+      $hasContent: Boolean(title || children)
+    }, sharedProps), {}, {
+      children: [left ? /*#__PURE__*/jsx(ButtonContainer, {
+        children: left
+      }) : null, title ? /*#__PURE__*/jsx(HeaderTitle, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        variant: "bold",
+        children: title
+      })) : null, children ? /*#__PURE__*/jsx(ChildrenComponent, _objectSpread(_objectSpread({}, sharedProps), {}, {
+        children: children
+      })) : null, right || left ? /*#__PURE__*/jsx(ButtonContainer, {
+        children: right
+      }) : null]
+    }))
+  });
+}
+
+var NavigationModalContainer = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "NavigationModalContainer"
+})(["position:relative;background-color:", ";flex:1;", ""], function (_ref) {
+  var theme = _ref.theme,
+      $backgroundColor = _ref.$backgroundColor;
+  return $backgroundColor || theme.kitt.colors.uiBackgroundLight;
+}, function () {
+  if (Platform.OS !== 'web') return undefined;
+  return css(["min-height:100vh;"]);
+});
+
+var ContainerWithoutHeader = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "NavigationModal__ContainerWithoutHeader"
+})(["justify-content:space-between;flex:1;"]);
+function NavigationModal(_ref) {
+  var body = _ref.body,
+      header = _ref.header,
+      footer = _ref.footer,
+      backgroundColor = _ref.backgroundColor;
+  return /*#__PURE__*/jsxs(NavigationModalContainer, {
+    $backgroundColor: backgroundColor,
+    children: [header ? /*#__PURE__*/jsx(View$1, {
+      children: header
+    }) : null, /*#__PURE__*/jsxs(ContainerWithoutHeader, {
+      children: [/*#__PURE__*/jsx(ScrollView$1, {
+        bounces: false,
+        contentContainerStyle: {
+          flexGrow: 1,
+          position: 'relative'
+        },
+        children: body
+      }), footer || null]
+    })]
+  });
+}
+NavigationModal.Header = Header;
+NavigationModal.Footer = Footer;
+NavigationModal.Body = Body;
+NavigationModal.Padding = ContentPadding;
+
 function Notification(_ref) {
   var type = _ref.type,
       children = _ref.children,
@@ -3878,7 +4186,7 @@ function Picker(_ref) {
           color: item.props.value === value ? theme.picker.ios.selected.color : undefined
         });
       })
-    }) : /*#__PURE__*/jsx(ScrollView, {
+    }) : /*#__PURE__*/jsx(ScrollView$1, {
       testID: testID,
       children: React.Children.map(children, function (child) {
         var item = child;
@@ -3966,7 +4274,7 @@ function SkeletonContent(_ref3) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled(View).withConfig({
+var SkeletonContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Skeleton__SkeletonContainer"
 })(["overflow:hidden;"]);
 function Skeleton(_ref) {
@@ -4616,7 +4924,7 @@ var StyledTooltipContent = /*#__PURE__*/styled.View.withConfig({
 
 function ArrowView(props) {
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(View$1, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsx(TooltipArrowIcon, {
       color: theme.kitt.tooltip.backgroundColor
     })
@@ -4722,16 +5030,16 @@ function Tooltip(_ref) {
     });
   }, [x, y, reference, floating, update, refs, middlewareData, onUpdate]);
   return /*#__PURE__*/jsxs(TooltipContainer, {
-    children: [/*#__PURE__*/jsx(View, {
+    children: [/*#__PURE__*/jsx(View$1, {
       ref: reference,
-      children: /*#__PURE__*/jsx(Pressable, {
+      children: /*#__PURE__*/jsx(Pressable$1, {
         accessibilityRole: "button",
         onPress: function handlePress() {
           pressed.value = !pressed.value;
         },
         children: children
       })
-    }), /*#__PURE__*/jsx(View, {
+    }), /*#__PURE__*/jsx(View$1, {
       ref: floating,
       accessibilityElementsHidden: !pressed.value,
       importantForAccessibility: pressed.value === true ? 'auto' : 'no-hide-descendants',
@@ -4955,5 +5263,5 @@ function MatchWindowSize(_ref) {
   return children;
 }
 
-export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, Notification, Overlay, PageLoader, Picker, Radio, DeprecatedSection as Section, Skeleton, SpinningIcon, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Checkbox, DatePicker, Emoji, ExternalAppLink, ExternalLink, Flex, FullScreenModal, HStack, Icon, IconButton, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpoints, KittBreakpointsMax, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MatchWindowSize, Message, Modal, ModalBehaviour, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, ScrollView, DeprecatedSection as Section, Skeleton, SpinningIcon, Stack, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, View, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map