@ornikar/kitt-universal 9.1.3 → 9.3.1

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

@@ -1,26 +1,27 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { View, Image, Pressable, Linking, useWindowDimensions, TextInput, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$2 } from 'react-native';
+import { View as View$1, Image, Pressable as Pressable$1, Linking, useWindowDimensions, TextInput, StyleSheet, ScrollView as ScrollView$1, Modal as Modal$1, Text as Text$2 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, ArcIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
-import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children, useEffect } from 'react';
+import { cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, useEffect, Children } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { Text as Text$1, Image as Image$1, extendTheme, NativeBaseProvider } from 'native-base';
-import { styled as styled$1 } from '@linaria/react';
 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 { styled as styled$1 } from '@linaria/react';
 import { parse } from 'twemoji-parser';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _extends from '@babel/runtime/helpers/extends';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Portal } from 'react-portal';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useFloating, offset, shift, flip, getScrollParents } from '@floating-ui/react-dom';
 import { makeDecorator } from '@storybook/addons';
 
 var defaultIconSize = 20;
-var IconContainer$1 = /*#__PURE__*/styled(View).withConfig({
+var IconContainer$1 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Icon__IconContainer",
   componentId: "kitt-universal__sc-usm0ol-0"
 })(["color:", ";width:", "px;height:", "px;align-self:", ";"], function (_ref) {
@@ -111,7 +112,7 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$h = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$j = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -172,7 +173,7 @@ function Typography(_ref) {
   } : _ref$type,
       variant = _ref.variant,
       color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$h);
+      otherProps = _objectWithoutProperties(_ref, _excluded$j);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -183,6 +184,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,
@@ -255,13 +268,13 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$g = ["size", "round", "light", "sizeVariant"];
+var _excluded$i = ["size", "round", "light", "sizeVariant"];
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 };
 
-var StyledAvatarView = /*#__PURE__*/styled(View).withConfig({
+var StyledAvatarView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Avatar__StyledAvatarView",
   componentId: "kitt-universal__sc-9miubv-0"
 })(["border-radius:", ";background-color:", ";height:", "px;width:", "px;overflow:hidden;align-items:center;justify-content:center;"], function (_ref) {
@@ -327,7 +340,7 @@ function Avatar(_ref6) {
       round = _ref6.round,
       light = _ref6.light,
       sizeVariant = _ref6.sizeVariant,
-      props = _objectWithoutProperties(_ref6, _excluded$g);
+      props = _objectWithoutProperties(_ref6, _excluded$i);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
@@ -394,7 +407,7 @@ function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$f = ["$type", "$variant", "$isStretch", "disabled"];
+var _excluded$h = ["$type", "$variant", "$isStretch", "disabled"];
 var AnimatedButtonPressableContainer = withTheme( /*#__PURE__*/styled$1("div")({
   name: "AnimatedButtonPressableContainer",
   "class": "kitt-u_AnimatedButtonPressableContainer_a1vkj3mh",
@@ -508,7 +521,7 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
       $variant = _ref18.$variant,
       $isStretch = _ref18.$isStretch,
       disabled = _ref18.disabled,
-      props = _objectWithoutProperties(_ref18, _excluded$f);
+      props = _objectWithoutProperties(_ref18, _excluded$h);
 
   return /*#__PURE__*/jsx(AnimatedButtonPressableContainer, {
     ref: ref,
@@ -516,13 +529,13 @@ var AnimatedButtonPressable = /*#__PURE__*/forwardRef(function (_ref18, ref) {
     $variant: $variant,
     $isDisabled: !!disabled,
     $isStretch: $isStretch,
-    children: /*#__PURE__*/jsx(Pressable, _objectSpread({
+    children: /*#__PURE__*/jsx(Pressable$1, _objectSpread({
       disabled: disabled
     }, props))
   });
 });
 
-var BaseStyledButtonPressable = /*#__PURE__*/styled(View).withConfig({
+var BaseStyledButtonPressable = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "BaseStyledButtonPressable",
   componentId: "kitt-universal__sc-4k8lse-0"
 })(["position:relative;min-width:", "px;max-width:", ";width:", ";min-height:", "px;border-radius:", "px;flex-direction:row;align-items:center;justify-content:center;align-self:flex-start;background-color:", ";padding:", ";"], function (_ref) {
@@ -563,12 +576,12 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled(View).withConfig({
   return defaultPadding;
 });
 
-var _excluded$e = ["color"],
+var _excluded$g = ["color"],
     _excluded2$3 = ["color"];
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$g);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
@@ -596,7 +609,7 @@ function TypographyIcon(_ref2) {
   return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread({}, props));
 }
 
-var _excluded$d = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$f = ["type", "variant", "isDisabled", "$isStretch", "icon", "children"];
 
 var getTextColorByType = function (type, variant) {
   switch (type) {
@@ -638,7 +651,7 @@ var StyledButtonText = /*#__PURE__*/styled(Typography.Text).withConfig({
   if ($isDisabled || !isSubtle($type)) return undefined;
   return 'color: inherit';
 });
-var StyledIconContainer$1 = /*#__PURE__*/styled(View).withConfig({
+var StyledIconContainer$1 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ButtonContent__StyledIconContainer",
   componentId: "kitt-universal__sc-dnyw3n-1"
 })(["", ""], function (_ref2) {
@@ -668,7 +681,7 @@ function ButtonIcon(_ref3) {
   });
 }
 
-var StyledChildrenWithIcon = /*#__PURE__*/styled(View).withConfig({
+var StyledChildrenWithIcon = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ButtonContent__StyledChildrenWithIcon",
   componentId: "kitt-universal__sc-dnyw3n-2"
 })(["align-items:center;justify-content:center;flex-direction:row;"]);
@@ -718,7 +731,7 @@ function ButtonContentChildren(_ref4) {
     })) : null]
   });
 }
-var ButtonContentContainer = /*#__PURE__*/styled(View).withConfig({
+var ButtonContentContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ButtonContent__ButtonContentContainer",
   componentId: "kitt-universal__sc-dnyw3n-3"
 })(["line-height:16px;", " ", ";"], function (_ref5) {
@@ -738,7 +751,7 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$d);
+      props = _objectWithoutProperties(_ref7, _excluded$f);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
@@ -832,7 +845,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   });
 });
 
-var Container$3 = /*#__PURE__*/styled(View).withConfig({
+var Container$3 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Card__Container",
   componentId: "kitt-universal__sc-1n9psug-0"
 })(["background-color:", ";padding:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -892,7 +905,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$c = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$e = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
     _excluded2$2 = ["phoneNumber", "children"],
     _excluded3$1 = ["phoneNumber", "children"],
     _excluded4 = ["emailAddress", "children"];
@@ -902,7 +915,7 @@ function ExternalAppLink(_ref) {
       appValue = _ref.appValue,
       onPress = _ref.onPress,
       onOpenAppError = _ref.onOpenAppError,
-      rest = _objectWithoutProperties(_ref, _excluded$c);
+      rest = _objectWithoutProperties(_ref, _excluded$e);
 
   var href = "".concat(appScheme, ":").concat(appValue);
 
@@ -925,26 +938,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;
 
@@ -1021,14 +1033,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$b = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$d = ["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$b);
+      rest = _objectWithoutProperties(_ref, _excluded$d);
 
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     href: href,
@@ -1502,6 +1514,11 @@ var listItem = {
   innerMargin: 8
 };
 
+var navigationModal = {
+  height: 56,
+  padding: 16
+};
+
 var pageLoader = {
   size: 60,
   strokeWidth: 3,
@@ -1647,7 +1664,8 @@ var theme = {
   skeleton: skeleton,
   tag: tag,
   tooltip: tooltip,
-  typography: typography
+  typography: typography,
+  navigationModal: navigationModal
 };
 
 function matchWindowSize(_ref, _ref2) {
@@ -1723,11 +1741,11 @@ function useKittTheme() {
   }, [dimensions]);
 }
 
-var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled(Pressable).withConfig({
+var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled(Pressable$1).withConfig({
   displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
   componentId: "kitt-universal__sc-1sav1n6-0"
 })(["display:flex;flex-direction:row;"]);
-var CheckboxContainer = /*#__PURE__*/styled(View).withConfig({
+var CheckboxContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "kitt-universal__sc-1sav1n6-1"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], function (_ref) {
@@ -1836,7 +1854,7 @@ var StyledTypographyText = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "DatePickerInputPart__StyledTypographyText",
   componentId: "kitt-universal__sc-11fmlmi-0"
 })(["text-align:center;"]);
-var ViewInput = /*#__PURE__*/styled(View).withConfig({
+var ViewInput = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "DatePickerInputPart__ViewInput",
   componentId: "kitt-universal__sc-11fmlmi-1"
 })(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
@@ -1875,7 +1893,7 @@ function prefixWithZero(value) {
   return "".concat(value).padStart(2, '0');
 }
 
-var PartContainer = /*#__PURE__*/styled(View).withConfig({
+var PartContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "DatePickerInputs__PartContainer",
   componentId: "kitt-universal__sc-j9hin5-0"
 })(["margin-right:", ";", ";"], function (_ref) {
@@ -1886,7 +1904,7 @@ var PartContainer = /*#__PURE__*/styled(View).withConfig({
   var $isStretch = _ref2.$isStretch;
   return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
 });
-var DatePickerPressable = /*#__PURE__*/styled(Pressable).withConfig({
+var DatePickerPressable = /*#__PURE__*/styled(Pressable$1).withConfig({
   displayName: "DatePickerInputs__DatePickerPressable",
   componentId: "kitt-universal__sc-j9hin5-1"
 })(["display:flex;flex-direction:row;", ";"], function (_ref3) {
@@ -1950,12 +1968,12 @@ function DatePickerInputs(_ref4) {
   });
 }
 
-var _excluded$a = ["value"];
+var _excluded$c = ["value"];
 // This is not yet implemented
 // We still display the inputs for chromatic
 function DatePicker(_ref) {
   var value = _ref.value,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
     handleModalOpen: function handleModalOpen() {},
@@ -1995,7 +2013,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled$1("div")({
   }
 }));
 
-var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
+var _excluded$b = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing", "onFocus", "onBlur"];
 var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
   displayName: "InputText__StyledTextInput",
   componentId: "kitt-universal__sc-uke279-0"
@@ -2015,7 +2033,7 @@ var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
       $minHeight = _ref3$$minHeight === void 0 ? theme.kitt.forms.input.minHeight : _ref3$$minHeight;
   return $minHeight;
 });
-var RightInputContainer = /*#__PURE__*/styled(View).withConfig({
+var RightInputContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputText__RightInputContainer",
   componentId: "kitt-universal__sc-uke279-1"
 })(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
@@ -2039,7 +2057,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
       onSubmitEditing = _ref4.onSubmitEditing,
       _onFocus = _ref4.onFocus,
       _onBlur = _ref4.onBlur,
-      props = _objectWithoutProperties(_ref4, _excluded$9);
+      props = _objectWithoutProperties(_ref4, _excluded$b);
 
   var theme = /*#__PURE__*/useTheme();
 
@@ -2118,11 +2136,11 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled(View).withConfig({
+var FieldContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputField__FieldContainer",
   componentId: "kitt-universal__sc-13fkixs-0"
 })(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled(View).withConfig({
+var FeedbackContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputField__FeedbackContainer",
   componentId: "kitt-universal__sc-13fkixs-1"
 })(["", ";"], function (_ref) {
@@ -2131,14 +2149,14 @@ var FeedbackContainer = /*#__PURE__*/styled(View).withConfig({
     minWidth: KittBreakpoints.SMALL
   }, 'padding-top: 10px', 'padding-top: 5px');
 });
-var FieldLabelContainer = /*#__PURE__*/styled(View).withConfig({
+var FieldLabelContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputField__FieldLabelContainer",
   componentId: "kitt-universal__sc-13fkixs-2"
 })(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.kitt.forms.inputField.labelContainerPaddingBottom;
 });
-var LabelContainer = /*#__PURE__*/styled(View).withConfig({
+var LabelContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "InputField__LabelContainer",
   componentId: "kitt-universal__sc-13fkixs-3"
 })(["margin-right:", "px;"], function (_ref3) {
@@ -2192,14 +2210,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$8 = ["isPasswordDefaultVisible", "right"];
+var _excluded$a = ["isPasswordDefaultVisible", "right"];
 function InputPassword(_ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
       right = _ref.right,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -2238,7 +2256,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",
   componentId: "kitt-universal__sc-1511dsf-0"
 })(["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) {
@@ -2261,7 +2279,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",
   componentId: "kitt-universal__sc-1511dsf-1"
 })(["margin-right:", "px;"], function (_ref4) {
@@ -2302,7 +2320,7 @@ function Label(_ref) {
   });
 }
 
-var OuterRadio = /*#__PURE__*/styled(View).withConfig({
+var OuterRadio = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Radio__OuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-0"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
@@ -2326,7 +2344,7 @@ var OuterRadio = /*#__PURE__*/styled(View).withConfig({
       disabled = _ref6.disabled;
   return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
 });
-var SelectedOuterRadio = /*#__PURE__*/styled(View).withConfig({
+var SelectedOuterRadio = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Radio__SelectedOuterRadio",
   componentId: "kitt-universal__sc-1mdgr2o-1"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
@@ -2342,7 +2360,7 @@ var SelectedOuterRadio = /*#__PURE__*/styled(View).withConfig({
   var theme = _ref10.theme;
   return theme.kitt.forms.radio.size / 2;
 });
-var SelectedInnerRadio = /*#__PURE__*/styled(View).withConfig({
+var SelectedInnerRadio = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Radio__SelectedInnerRadio",
   componentId: "kitt-universal__sc-1mdgr2o-2"
 })(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
@@ -2358,7 +2376,7 @@ var SelectedInnerRadio = /*#__PURE__*/styled(View).withConfig({
   var theme = _ref14.theme;
   return theme.kitt.forms.radio.checked.innerSize / 2;
 });
-var Container$2 = /*#__PURE__*/styled(Pressable).withConfig({
+var Container$2 = /*#__PURE__*/styled(Pressable$1).withConfig({
   displayName: "Radio__Container",
   componentId: "kitt-universal__sc-1mdgr2o-3"
 })(["flex-direction:row;align-items:center;"]);
@@ -2409,7 +2427,7 @@ function TextArea(_ref) {
   }, props));
 }
 
-var Body = /*#__PURE__*/styled(View).withConfig({
+var Body$1 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], function (_ref) {
@@ -2423,12 +2441,12 @@ var Body = /*#__PURE__*/styled(View).withConfig({
 });
 function FullScreenModalBody(_ref3) {
   var children = _ref3.children;
-  return /*#__PURE__*/jsx(Body, {
+  return /*#__PURE__*/jsx(Body$1, {
     children: children
   });
 }
 
-var SideContainer = /*#__PURE__*/styled(View).withConfig({
+var SideContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header__SideContainer",
   componentId: "kitt-universal__sc-dfmxi1-0"
 })(["", ""], function (_ref) {
@@ -2448,7 +2466,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-var Header = /*#__PURE__*/styled(View).withConfig({
+var Header$1 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], function (_ref2) {
@@ -2466,7 +2484,7 @@ var Header = /*#__PURE__*/styled(View).withConfig({
   var theme = _ref3.theme;
   return theme.kitt.fullScreenModal.header.borderColor;
 });
-var HeaderContent = /*#__PURE__*/styled(View).withConfig({
+var HeaderContent = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header__HeaderContent",
   componentId: "kitt-universal__sc-dfmxi1-2"
 })(["", ";", ";justify-content:center;align-items:center;"], function (_ref4) {
@@ -2534,7 +2552,7 @@ function FullScreenModalHeader(_ref6) {
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/jsxs(Header, {
+  return /*#__PURE__*/jsxs(Header$1, {
     insetTop: top,
     children: [left ? /*#__PURE__*/jsx(SideContainer, {
       onLayout: function onLayout(e) {
@@ -2556,7 +2574,7 @@ function FullScreenModalHeader(_ref6) {
   });
 }
 
-var Container$1 = /*#__PURE__*/styled(View).withConfig({
+var Container$1 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "FullScreenModal__Container",
   componentId: "kitt-universal__sc-11qpbe3-0"
 })(["flex:1;background-color:", ";"], function (_ref) {
@@ -2587,11 +2605,11 @@ function SpinningIcon(_ref) {
   });
 }
 
-var _excluded$7 = ["as", "children"];
+var _excluded$9 = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$7);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   // as or default to div. If as is undefined, T is div but typescript is not sure
   return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
@@ -2599,7 +2617,7 @@ function StyleWebWrapper(_ref) {
   }));
 }
 
-var _excluded$6 = ["color", "disabled"];
+var _excluded$8 = ["color", "disabled"];
 var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   name: "PressableIconButtonWebWrapper",
   "class": "kitt-u_PressableIconButtonWebWrapper_p1nlccvg",
@@ -2632,7 +2650,7 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
     }]
   }
 }));
-var StyledPressableIconButton = /*#__PURE__*/styled(Pressable).withConfig({
+var StyledPressableIconButton = /*#__PURE__*/styled(Pressable$1).withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton",
   componentId: "kitt-universal__sc-1m6jo3s-0"
 })(["border-radius:", "px;width:", "px;height:", "px;align-items:center;justify-content:center;position:relative;background-color:transparent;", ";"], function (_ref5) {
@@ -2659,7 +2677,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled(Pressable).withConfig({
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
       disabled = _ref9.disabled,
-      props = _objectWithoutProperties(_ref9, _excluded$6);
+      props = _objectWithoutProperties(_ref9, _excluded$8);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
@@ -2685,7 +2703,7 @@ function PressableAnimatedContainer(_ref) {
   });
 }
 
-var IconButtonContentBorder = /*#__PURE__*/styled(View).withConfig({
+var IconButtonContentBorder = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
 })(["border:", ";border-color:", ";width:", "px;height:", "px;align-items:center;justify-content:center;border-radius:", "px;"], function (_ref) {
@@ -2742,23 +2760,23 @@ function IconButton(_ref7) {
   });
 }
 
-var _excluded$5 = ["children"];
-var ContentView$1 = /*#__PURE__*/styled(View).withConfig({
+var _excluded$7 = ["children"];
+var ContentView$1 = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ListItemContent__ContentView",
   componentId: "kitt-universal__sc-57q0u9-0"
 })(["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$1, _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({
+var SideContainerView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ListItemSideContent__SideContainerView",
   componentId: "kitt-universal__sc-1vajiw-0"
 })(["flex-direction:row;margin-left:", ";margin-right:", ";"], function (_ref) {
@@ -2775,7 +2793,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
@@ -2783,7 +2801,7 @@ function ListItemSideContainer(_ref3) {
     children: children
   }));
 }
-var SideContentView = /*#__PURE__*/styled(View).withConfig({
+var SideContentView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ListItemSideContent__SideContentView",
   componentId: "kitt-universal__sc-1vajiw-1"
 })(["align-self:", ";"], function (_ref4) {
@@ -2803,8 +2821,8 @@ function ListItemSideContent(_ref5) {
   }));
 }
 
-var _excluded$3 = ["children", "withPadding", "borders", "left", "right", "onPress"];
-var ContainerView = /*#__PURE__*/styled(View).withConfig({
+var _excluded$5 = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var ContainerView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "ListItem__ContainerView",
   componentId: "kitt-universal__sc-2afp9s-0"
 })(["flex-direction:row;padding:", ";", ";border-color:", ";background-color:", ";"], function (_ref) {
@@ -2843,9 +2861,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;
+  var Wrapper = onPress ? Pressable$1 : Fragment;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
     onPress: onPress
@@ -2932,7 +2950,7 @@ var getIconButtonColor = function (messageType) {
   }
 };
 
-var StyledMessageContainer = /*#__PURE__*/styled(View).withConfig({
+var StyledMessageContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "BaseMessage__StyledMessageContainer",
   componentId: "kitt-universal__sc-eepeiz-0"
 })(["flex-direction:row;align-items:flex-start;justify-content:space-between;min-height:60px;padding-top:", "px;border-radius:", "px;background-color:", ";"], function (_ref) {
@@ -2949,7 +2967,7 @@ var StyledMessageContainer = /*#__PURE__*/styled(View).withConfig({
       $type = _ref3.$type;
   return theme.kitt.feedbackMessage[$type].backgroundColor;
 });
-var StyledDismissWrapper = /*#__PURE__*/styled(View).withConfig({
+var StyledDismissWrapper = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "BaseMessage__StyledDismissWrapper",
   componentId: "kitt-universal__sc-eepeiz-1"
 })(["align-items:center;align-items:flex-start;margin:", ";"], function (_ref4) {
@@ -2957,7 +2975,7 @@ var StyledDismissWrapper = /*#__PURE__*/styled(View).withConfig({
   var spacing = theme.kitt.spacing;
   return "".concat(spacing * 2.5, "px  ").concat(spacing * 2, "px 0 ").concat(spacing * 5, "px");
 });
-var StyledIconContainer = /*#__PURE__*/styled(View).withConfig({
+var StyledIconContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "BaseMessage__StyledIconContainer",
   componentId: "kitt-universal__sc-eepeiz-2"
 })(["margin:", ";"], function (_ref5) {
@@ -2972,7 +2990,7 @@ var StyledTextContent = /*#__PURE__*/styled(Typography.Text).withConfig({
   var $isCenteredText = _ref6.$isCenteredText;
   return $isCenteredText ? 'center' : 'left';
 });
-var StyledMessageContent = /*#__PURE__*/styled(View).withConfig({
+var StyledMessageContent = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "BaseMessage__StyledMessageContent",
   componentId: "kitt-universal__sc-eepeiz-4"
 })(["display:flex;flex-direction:row;flex-grow:1;align-self:center;align-items:flex-start;flex-shrink:1;padding:", ";"], function (_ref7) {
@@ -3037,7 +3055,7 @@ function Message(_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",
   componentId: "kitt-universal__sc-1cz1gbr-0"
 })(function (_ref) {
@@ -3054,7 +3072,7 @@ function Overlay(_ref2) {
   });
 }
 
-var BodyView = /*#__PURE__*/styled(View).withConfig({
+var BodyView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Body__BodyView",
   componentId: "kitt-universal__sc-17fwpo4-0"
 })(["padding:", "px ", "px;"], function (_ref) {
@@ -3066,14 +3084,14 @@ 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
     })
   });
 }
 
-var FooterView = /*#__PURE__*/styled(View).withConfig({
+var FooterView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Footer__FooterView",
   componentId: "kitt-universal__sc-1ujq2dc-0"
 })(["flex:0 0 auto;padding:", "px;border-top-width:1px;border-top-color:", ";"], function (_ref) {
@@ -3090,9 +3108,9 @@ function ModalFooter(_ref3) {
   });
 }
 
-var OnCloseContext = /*#__PURE__*/createContext(function () {});
+var OnCloseContext$1 = /*#__PURE__*/createContext(function () {});
 
-var HeaderView = /*#__PURE__*/styled(View).withConfig({
+var HeaderView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header__HeaderView",
   componentId: "kitt-universal__sc-1iwabch-0"
 })(["position:relative;padding:", "px;display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;align-items:center;border-bottom-width:1px;border-bottom-color:", ";min-height:57px;"], function (_ref) {
@@ -3102,21 +3120,21 @@ var HeaderView = /*#__PURE__*/styled(View).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.colors.separator;
 });
-var LeftIconView = /*#__PURE__*/styled(View).withConfig({
+var LeftIconView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header__LeftIconView",
   componentId: "kitt-universal__sc-1iwabch-1"
 })(["align-self:flex-start;margin-right:", "px;"], function (_ref3) {
   var theme = _ref3.theme;
   return theme.kitt.spacing * 2;
 });
-var RightIconView = /*#__PURE__*/styled(View).withConfig({
+var RightIconView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header__RightIconView",
   componentId: "kitt-universal__sc-1iwabch-2"
 })(["align-self:flex-start;margin-left:", "px;"], function (_ref4) {
   var theme = _ref4.theme;
   return theme.kitt.spacing * 2;
 });
-var TitleView = /*#__PURE__*/styled(View).withConfig({
+var TitleView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Header__TitleView",
   componentId: "kitt-universal__sc-1iwabch-3"
 })(["padding-left:", "px;flex-shrink:1;"], function (_ref5) {
@@ -3128,7 +3146,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, {
@@ -3145,7 +3163,7 @@ function ModalHeader(_ref6) {
   });
 }
 
-var ModalView = /*#__PURE__*/styled(View).withConfig({
+var ModalView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Modal__ModalView",
   componentId: "kitt-universal__sc-1xy2w5u-0"
 })(["top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:", "px ", "px;"], function (_ref) {
@@ -3155,7 +3173,7 @@ var ModalView = /*#__PURE__*/styled(View).withConfig({
   var theme = _ref2.theme;
   return theme.kitt.spacing * 4;
 });
-var ContentView = /*#__PURE__*/styled(View).withConfig({
+var ContentView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Modal__ContentView",
   componentId: "kitt-universal__sc-1xy2w5u-1"
 })(["position:relative;display:flex;flex-direction:column;max-height:100%;max-width:540px;height:auto;width:100%;border-radius:", "px;background-color:", ";"], function (_ref3) {
@@ -3171,7 +3189,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,
@@ -3194,6 +3212,77 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
+var overflowHidden = "kitt-u_overflowHidden_otm3u3";
+
+function useBlockBodyScroll(isScrollBlocked) {
+  useEffect(function () {
+    if (isScrollBlocked) {
+      document.body.classList.add(overflowHidden);
+    } else {
+      document.body.classList.remove(overflowHidden);
+    }
+  }, [isScrollBlocked]);
+}
+
+function ModalBehaviourPortal(_ref) {
+  var visible = _ref.visible,
+      children = _ref.children;
+  useBlockBodyScroll(Boolean(visible));
+  return /*#__PURE__*/jsx(Portal, {
+    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",
+  componentId: "kitt-universal__sc-tj3606-0"
+})(["", ""], function () {
+  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 = {};
 
@@ -3202,12 +3291,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
@@ -3216,10 +3310,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,
@@ -3315,6 +3407,9 @@ var createKittNativeBaseCustomTheme = function (theme) {
       }
     }
   });
+  return _objectSpread(_objectSpread({}, extendedTheme), {}, {
+    space: extendedTheme.space
+  });
 };
 function KittNativeBaseProvider(_ref) {
   var theme = _ref.theme,
@@ -3331,6 +3426,242 @@ 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",
+  componentId: "kitt-universal__sc-1rprqcv-0"
+})(["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",
+  componentId: "kitt-universal__sc-oc39vn-0"
+})(["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",
+  componentId: "kitt-universal__sc-1yjprfg-0"
+})(["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",
+  componentId: "kitt-universal__sc-1g7sbq-0"
+})(["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",
+  componentId: "kitt-universal__sc-1g7sbq-1"
+})(["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$1).withConfig({
+  displayName: "Header__ButtonContainer",
+  componentId: "kitt-universal__sc-1g7sbq-2"
+})(["width:", "px;"], function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.kitt.iconButton.width;
+});
+var ChildrenComponent = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "Header__ChildrenComponent",
+  componentId: "kitt-universal__sc-1g7sbq-3"
+})(["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",
+  componentId: "kitt-universal__sc-1g7sbq-4"
+})(["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",
+  componentId: "kitt-universal__sc-n0bwvk-0"
+})(["position:relative;background-color:", ";flex:1;", ""], function (_ref) {
+  var theme = _ref.theme,
+      $backgroundColor = _ref.$backgroundColor;
+  return $backgroundColor || theme.kitt.colors.uiBackgroundLight;
+}, function () {
+  return css(["min-height:100vh;"]);
+});
+
+var ContainerWithoutHeader = /*#__PURE__*/styled(View$1).withConfig({
+  displayName: "NavigationModal__ContainerWithoutHeader",
+  componentId: "kitt-universal__sc-ls8t24-0"
+})(["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,
@@ -3479,7 +3810,7 @@ function SkeletonContent(_ref4) {
   });
 }
 
-var SkeletonContainer = /*#__PURE__*/styled(View).withConfig({
+var SkeletonContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Skeleton__SkeletonContainer",
   componentId: "kitt-universal__sc-1w5cm3i-0"
 })(["overflow:hidden;"]);
@@ -3544,7 +3875,7 @@ Skeleton.Bar = Bar;
 Skeleton.Circle = Circle;
 Skeleton.Square = Square;
 
-var Flex = /*#__PURE__*/styled(View).withConfig({
+var Flex = /*#__PURE__*/styled(View$1).withConfig({
   shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
     return !['direction', 'padding'].includes(prop) && defaultValidatorFn(prop);
   }
@@ -3601,7 +3932,7 @@ var useStoryBlockColor = function (color) {
   var storyBlockColor = useContext(StoryBlockColorContext);
   return color || storyBlockColor;
 };
-var StyledStoryBlockView = /*#__PURE__*/styled(View).withConfig({
+var StyledStoryBlockView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryBlock__StyledStoryBlockView",
   componentId: "kitt-universal__sc-3w4hdm-0"
 })(["padding:16px ", "px 0;margin:0 -", "px;background:", ";"], storyPadding, storyPadding, function (_ref) {
@@ -3624,11 +3955,11 @@ function StoryBlock(_ref2) {
   });
 }
 
-var StoryTitleContainer = /*#__PURE__*/styled(View).withConfig({
+var StoryTitleContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryTitle__StoryTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-0"
 })(["margin-bottom:30px;"]);
-var StorySubTitleContainer = /*#__PURE__*/styled(View).withConfig({
+var StorySubTitleContainer = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryTitle__StorySubTitleContainer",
   componentId: "kitt-universal__sc-sic7hb-1"
 })(["margin-bottom:10px;"]);
@@ -3703,7 +4034,7 @@ StoryTitle.Level2 = StoryTitleLevel2;
 StoryTitle.Level3 = StoryTitleLevel3;
 StoryTitle.Level4 = StoryTitleLevel4;
 
-var StoryContainer$1 = /*#__PURE__*/styled(ScrollView).withConfig({
+var StoryContainer$1 = /*#__PURE__*/styled(ScrollView$1).withConfig({
   displayName: "Story__StoryContainer",
   componentId: "kitt-universal__sc-1kwdg2p-0"
 })(["padding:", "px;"], storyPadding);
@@ -3722,7 +4053,7 @@ function Story(_ref) {
 var _excluded$2 = ["title", "children", "internalIsDemoSection"],
     _excluded2 = ["title", "children"],
     _excluded3 = ["title", "children"];
-var StyledSection = /*#__PURE__*/styled(View).withConfig({
+var StyledSection = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StorySection__StyledSection",
   componentId: "kitt-universal__sc-1b3liv5-0"
 })(["margin-bottom:32px;"]);
@@ -3739,7 +4070,7 @@ function StorySection(_ref) {
     }), children]
   }));
 }
-var StyledSubSection = /*#__PURE__*/styled(View).withConfig({
+var StyledSubSection = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StorySection__StyledSubSection",
   componentId: "kitt-universal__sc-1b3liv5-1"
 })(["margin-bottom:16px;"]);
@@ -3756,7 +4087,7 @@ function SubSection(_ref2) {
   }));
 }
 
-var StyledBlockSection = /*#__PURE__*/styled(View).withConfig({
+var StyledBlockSection = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StorySection__StyledBlockSection",
   componentId: "kitt-universal__sc-1b3liv5-2"
 })(["margin-bottom:16px;"]);
@@ -3773,7 +4104,7 @@ function BlockSection(_ref3) {
   }));
 }
 
-var StyledDemoSection = /*#__PURE__*/styled(View).withConfig({
+var StyledDemoSection = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StorySection__StyledDemoSection",
   componentId: "kitt-universal__sc-1b3liv5-3"
 })(["margin-bottom:64px;"]);
@@ -3822,19 +4153,19 @@ function StoryDecorator(storyFn, context) {
   });
 }
 
-var SmallScreenRow = /*#__PURE__*/styled(View).withConfig({
+var SmallScreenRow = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryGrid__SmallScreenRow",
   componentId: "kitt-universal__sc-4z5new-0"
 })(["flex-direction:column;margin:0;"]);
-var SmallScreenCol = /*#__PURE__*/styled(View).withConfig({
+var SmallScreenCol = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryGrid__SmallScreenCol",
   componentId: "kitt-universal__sc-4z5new-1"
 })(["padding:8px 0 16px;"]);
-var FlexRow = /*#__PURE__*/styled(View).withConfig({
+var FlexRow = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryGrid__FlexRow",
   componentId: "kitt-universal__sc-4z5new-2"
 })(["flex-direction:row;margin:0 -4px 16px;"]);
-var FlexCol = /*#__PURE__*/styled(View).withConfig({
+var FlexCol = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "StoryGrid__FlexCol",
   componentId: "kitt-universal__sc-4z5new-3"
 })(["flex-grow:1;flex-basis:0;margin:0 8px;"]);
@@ -3895,7 +4226,7 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var Container = /*#__PURE__*/styled(View).withConfig({
+var Container = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
 })(["background-color:", ";border-width:", "px;border-color:", ";padding:", ";border-radius:", "px;align-self:flex-start;"], function (_ref) {
@@ -3967,11 +4298,11 @@ function TimePicker() {
   });
 }
 
-var StyledTooltipView = /*#__PURE__*/styled(View).withConfig({
+var StyledTooltipView = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "TooltipView__StyledTooltipView",
   componentId: "kitt-universal__sc-156zm6m-0"
 })(["align-items:center;"]);
-var StyledTooltipContent = /*#__PURE__*/styled(View).withConfig({
+var StyledTooltipContent = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "TooltipView__StyledTooltipContent",
   componentId: "kitt-universal__sc-156zm6m-1"
 })(["background-color:", ";border-radius:", "px;opacity:", ";padding:", ";"], function (_ref) {
@@ -3990,7 +4321,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
     })
@@ -4030,11 +4361,11 @@ var tooltipDefaultFloatingStrategy = {
   web: 'absolute'
 };
 
-var StyledTooltipTrigger = /*#__PURE__*/styled(Pressable).withConfig({
+var StyledTooltipTrigger = /*#__PURE__*/styled(Pressable$1).withConfig({
   displayName: "Tooltipweb__StyledTooltipTrigger",
   componentId: "kitt-universal__sc-zn1y6f-0"
 })(["display:inline-flex;align-self:baseline;"]);
-var WebAnimatedTooltip = /*#__PURE__*/styled(View).withConfig({
+var WebAnimatedTooltip = /*#__PURE__*/styled(View$1).withConfig({
   displayName: "Tooltipweb__WebAnimatedTooltip",
   componentId: "kitt-universal__sc-zn1y6f-1"
 })(["opacity:", ";transition:opacity 200ms;visibility:", ";"], function (_ref) {
@@ -4366,5 +4697,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.web.js.map