@ornikar/kitt-universal 9.2.0 → 9.3.2

package/dist/index-node-14.17.cjs.web.css

@@ -2,6 +2,7 @@
 .kitt-u_InputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_InputTextContainer_i1encr9g > [data-focusvisible-polyfill]{outline:none;}.kitt-u_InputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_InputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_InputTextContainer_i1encr9g,.kitt-u_InputTextContainer_i1encr9g > *{cursor:var(--i1encr9g-0);}.kitt-u_InputTextContainer_i1encr9g > *{-webkit-transition:var(--i1encr9g-1);transition:var(--i1encr9g-1);}.kitt-u_InputTextContainer_i1encr9g:hover > *,.kitt-hover .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-2);}.kitt-u_InputTextContainer_i1encr9g:focus > *,.kitt-u_InputTextContainer_i1encr9g > *:focus,.kitt-focus .kitt-u_InputTextContainer_i1encr9g > *{border-color:var(--i1encr9g-3);}
 .kitt-u_StyledSpinningIconContainer_ssn8o83{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}.kitt-u_StyledSpinningIconContainer_ssn8o83 > svg{-webkit-animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;animation:spin-kitt-u_StyledSpinningIconContainer_ssn8o83 1.1s infinite linear;}@-webkit-keyframes spin-kitt-u_StyledSpinningIconContainer_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}@keyframes spin-kitt-u_StyledSpinningIconContainer_ssn8o83{0%{-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);transform:rotate(-1deg);}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg);}}
 @media (hover:none) and (pointer:coarse){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-0));-ms-transform:scale(var(--p1nlccvg-0));transform:scale(var(--p1nlccvg-0));}}@media (min-width:768px){.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-2));-ms-transform:scale(var(--p1nlccvg-2));transform:scale(var(--p1nlccvg-2));}}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{-webkit-transform:scale(var(--p1nlccvg-3));-ms-transform:scale(var(--p1nlccvg-3));transform:scale(var(--p1nlccvg-3));}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill]{outline:none;}.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:hover,.kitt-hover .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:focus,.kitt-focus .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *,.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > [data-focusvisible-polyfill],.kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *:active,.kitt-active .kitt-u_PressableIconButtonWebWrapper_p1nlccvg > *{background-color:var(--p1nlccvg-4);}
+.kitt-u_overflowHidden_otm3u3{overflow:hidden;}
 .kitt-u_PageLoaderContainer_ptkwz2j{width:var(--ptkwz2j-3);height:var(--ptkwz2j-3);-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:var(--ptkwz2j-2);}}@keyframes PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:var(--ptkwz2j-0);}100%{stroke-dashoffset:var(--ptkwz2j-2);}}@-webkit-keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_PageLoaderContainer_ptkwz2j circle,.kitt-u_PageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_PageLoaderContainer_ptkwz2j circle{stroke-width:var(--ptkwz2j-5);stroke-dasharray:var(--ptkwz2j-0);stroke-dashoffset:var(--ptkwz2j-0);stroke-linecap:round;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{stroke:var(--ptkwz2j-8);-webkit-animation:var(--ptkwz2j-9);animation:var(--ptkwz2j-9);-webkit-animation-name:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderInit-kitt-u_PageLoaderContainer_ptkwz2j;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-animation:var(--ptkwz2j-10);animation:var(--ptkwz2j-10);-webkit-animation-name:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;}.kitt-u_PageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{stroke:var(--ptkwz2j-11);-webkit-animation:var(--ptkwz2j-12);animation:var(--ptkwz2j-12);-webkit-animation-name:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;animation-name:PageLoaderOffset-kitt-u_PageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_PageLoaderContainer_ptkwz2j;}
 .kitt-u_StyledSkeleton_sc3upcl{background-color:var(--sc3upcl-0);position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-kitt-u_StyledSkeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes flareTranslate-kitt-u_StyledSkeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}.kitt-u_StyledSkeleton_sc3upcl::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-image:var(--sc3upcl-1);-webkit-animation:var(--sc3upcl-2);animation:var(--sc3upcl-2);-webkit-animation-name:flareTranslate-kitt-u_StyledSkeleton_sc3upcl;animation-name:flareTranslate-kitt-u_StyledSkeleton_sc3upcl;}
 .kitt-u_EmojiWebWrapper_ej7a4r3 > *{-webkit-transform:translateY(20%);-ms-transform:translateY(20%);transform:translateY(20%);}

package/dist/index-node-14.17.cjs.web.js

@@ -11,6 +11,7 @@ const nativeBase = require('native-base');
 const react$1 = require('@linaria/react');
 const twemojiParser = require('twemoji-parser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
+const reactPortal = require('react-portal');
 const reactDom = require('@floating-ui/react-dom');
 const addons = require('@storybook/addons');
 
@@ -181,7 +182,7 @@ function Typography({
   const text = /*#__PURE__*/jsxRuntime.jsx(nativeBase.Text, {
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
-    lineHeight: fontSizeForNativeBase,
+    lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
     fontWeight: isHeader ? `headers.${nonNullableVariant}` : `bodies.${nonNullableVariant}`,
     fontFamily: isHeader ? `headers.${nonNullableVariant}` : `bodies.${nonNullableVariant}`,
     color: color ? `kitt.typography.${color}` : undefined,
@@ -1421,6 +1422,11 @@ const listItem = {
   innerMargin: 8
 };
 
+const navigationModal = {
+  height: 56,
+  padding: 16
+};
+
 const pageLoader = {
   size: 60,
   strokeWidth: 3,
@@ -1566,7 +1572,8 @@ const theme = {
   skeleton,
   tag,
   tooltip,
-  typography
+  typography,
+  navigationModal
 };
 
 function matchWindowSize({
@@ -2272,7 +2279,7 @@ function TextArea({ ...props
   });
 }
 
-const Body = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Body$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Body",
   componentId: "kitt-universal__sc-1ofncfn-0"
 })(["", " background-color:", ";flex:1;"], ({
@@ -2287,7 +2294,7 @@ const Body = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative
 function FullScreenModalBody({
   children
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(Body, {
+  return /*#__PURE__*/jsxRuntime.jsx(Body$1, {
     children: children
   });
 }
@@ -2312,7 +2319,7 @@ function getHeaderHorizontalMediumPadding(spacing) {
   return spacing * 6;
 }
 
-const Header = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+const Header$1 = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Header",
   componentId: "kitt-universal__sc-dfmxi1-1"
 })(["", ";border-bottom-color:", ";border-bottom-width:1px;flex-direction:row;align-items:center;"], ({
@@ -2389,7 +2396,7 @@ function FullScreenModalHeader({
     setRightWidth(event.nativeEvent.layout.width);
   };
 
-  return /*#__PURE__*/jsxRuntime.jsxs(Header, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
     insetTop: top,
     children: [left ? /*#__PURE__*/jsxRuntime.jsx(SideContainer, {
       onLayout: e => handleLayoutChange(e, 'left'),
@@ -2937,7 +2944,7 @@ function ModalFooter({
   });
 }
 
-const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
+const OnCloseContext$1 = /*#__PURE__*/react.createContext(() => {});
 
 const HeaderView = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
   displayName: "Header__HeaderView",
@@ -2971,7 +2978,7 @@ function ModalHeader({
   right,
   children
 }) {
-  const onClose = react.useContext(OnCloseContext);
+  const onClose = react.useContext(OnCloseContext$1);
   const isIconLeft = !!left;
   return /*#__PURE__*/jsxRuntime.jsxs(HeaderView, {
     children: [isIconLeft && /*#__PURE__*/jsxRuntime.jsx(LeftIconView, {
@@ -3011,7 +3018,7 @@ function Modal({
   onEntered,
   onExited
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext$1.Provider, {
     value: onClose,
     children: /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.Modal, {
       transparent: true,
@@ -3034,6 +3041,81 @@ Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
+const overflowHidden = "kitt-u_overflowHidden_otm3u3";
+
+function useBlockBodyScroll(isScrollBlocked) {
+  react.useEffect(() => {
+    if (isScrollBlocked) {
+      document.body.classList.add(overflowHidden);
+    } else {
+      document.body.classList.remove(overflowHidden);
+    }
+  }, [isScrollBlocked]);
+}
+
+function ModalBehaviourPortal({
+  visible,
+  children
+}) {
+  useBlockBodyScroll(Boolean(visible));
+  return /*#__PURE__*/jsxRuntime.jsx(reactPortal.Portal, {
+    children: children
+  });
+}
+
+const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
+function OnCloseProvider({
+  children,
+  onClose
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseContext.Provider, {
+    value: onClose,
+    children: children
+  });
+}
+function useOnCloseModalBehaviour() {
+  const onClose = react.useContext(OnCloseContext);
+  return onClose;
+}
+
+function CloseButton({
+  children,
+  onPress
+}) {
+  const onCloseContextCallback = useOnCloseModalBehaviour();
+  return /*#__PURE__*/react.cloneElement(children, {
+    onPress: () => {
+      if (onPress) onPress();
+      onCloseContextCallback();
+    }
+  });
+}
+
+const ModalBehaviourContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ModalBehaviour__ModalBehaviourContainer",
+  componentId: "kitt-universal__sc-tj3606-0"
+})(["", ""], () => {
+  return styled.css(["position:fixed;top:0;left:0;width:100%;"]);
+});
+function ModalBehaviour({
+  children,
+  visible,
+  style,
+  onClose
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(OnCloseProvider, {
+    onClose: onClose,
+    children: /*#__PURE__*/jsxRuntime.jsx(ModalBehaviourPortal, {
+      visible: visible,
+      children: visible ? /*#__PURE__*/jsxRuntime.jsx(ModalBehaviourContainer, {
+        style: style,
+        children: children
+      }) : null
+    })
+  });
+}
+ModalBehaviour.CloseButton = CloseButton;
+
 const createKittSpaces = spacing => {
   const sizes = {};
 
@@ -3042,8 +3124,11 @@ const createKittSpaces = 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
+
 
+const 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(value => [value, value])); // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type -- let typescript infer types
 
 const createKittNativeBaseCustomTheme = theme => {
   const spaces = createKittSpaces(theme.spacing);
@@ -3057,11 +3142,11 @@ const createKittNativeBaseCustomTheme = theme => {
       'kitt.borderRadius': theme.card.borderRadius
     },
     sizes: { ...spaces,
-      // reset native-base to be able to set size as number
-      // https://docs.nativebase.io/next/default-theme#h2-size
-      ...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(value => [value, value]))
+      ...overridenNativeBaseSizeandSpaceScale
+    },
+    space: { ...spaces,
+      ...overridenNativeBaseSizeandSpaceScale
     },
-    space: spaces,
     breakpoints: {
       // kitt breakpoints
       base: KittBreakpoints.BASE,
@@ -3183,6 +3268,224 @@ const View = nativeBase.View;
 const ScrollView = nativeBase.ScrollView;
 const Pressable = nativeBase.Pressable;
 
+const ViewWithPadding = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "ContentPadding__ViewWithPadding",
+  componentId: "kitt-universal__sc-1rprqcv-0"
+})(["padding:", ";"], ({
+  theme
+}) => `0 ${theme.kitt.navigationModal.padding}px`);
+function ContentPadding({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(ViewWithPadding, { ...props,
+    children: children
+  });
+}
+
+const StyledViewWithPadding = /*#__PURE__*/styled__default(ContentPadding).withConfig({
+  displayName: "Body__StyledViewWithPadding",
+  componentId: "kitt-universal__sc-oc39vn-0"
+})(["padding-top:", "px;padding-bottom:", "px;"], ({
+  theme
+}) => theme.kitt.spacing * 6, ({
+  theme,
+  $insetBottom
+}) => Math.max(theme.kitt.spacing * 4, $insetBottom));
+function Body({
+  children,
+  shouldHandleBottomNotch,
+  style,
+  ...props
+}) {
+  const {
+    bottom
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  return /*#__PURE__*/jsxRuntime.jsx(StyledViewWithPadding, { ...props,
+    $insetBottom: insetBottom,
+    style: style,
+    children: children
+  });
+}
+
+const FooterContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig({
+  displayName: "Footer__FooterContainer",
+  componentId: "kitt-universal__sc-1yjprfg-0"
+})(["padding-top:", "px;padding-bottom:", "px;", ";"], ({
+  theme
+}) => theme.kitt.spacing * 3, ({
+  theme,
+  $insetBottom
+}) => Math.max(theme.kitt.spacing * 3, $insetBottom), ({
+  $hasSeparator
+}) => {
+  if (!$hasSeparator) return undefined;
+  return styled.css(["border-top-width:1px;border-top-color:", ";"], ({
+    theme
+  }) => theme.kitt.colors.separator);
+});
+function Footer({
+  shouldHandleBottomNotch = true,
+  hasSeparator = true,
+  children,
+  style
+}) {
+  const {
+    bottom
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  return /*#__PURE__*/jsxRuntime.jsx(FooterContainer, {
+    $insetBottom: insetBottom,
+    $hasSeparator: hasSeparator,
+    style: style,
+    children: children
+  });
+}
+
+const HeaderContainer = /*#__PURE__*/styled__default(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;", ";"], ({
+  theme
+}) => theme.kitt.navigationModal.height, ({
+  theme,
+  $isTransparent
+}) => {
+  if ($isTransparent) return 'transparent';
+  return theme.kitt.colors.uiBackgroundLight;
+}, ({
+  theme,
+  $hasRight
+}) => $hasRight ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  theme,
+  $hasLeft
+}) => $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  $hasSeparator
+}) => {
+  if (!$hasSeparator) return undefined;
+  return styled.css(["border-bottom-width:1px;border-bottom-color:", ";"], ({
+    theme
+  }) => theme.kitt.colors.separator);
+});
+const Row = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__Row",
+  componentId: "kitt-universal__sc-1g7sbq-1"
+})(["flex-direction:row;justify-content:", ";align-items:center;"], ({
+  $hasContent,
+  $hasLeft
+}) => !$hasContent && !$hasLeft ? 'flex-end' : 'space-between');
+const ButtonContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__ButtonContainer",
+  componentId: "kitt-universal__sc-1g7sbq-2"
+})(["width:", "px;"], ({
+  theme
+}) => theme.kitt.iconButton.width);
+const ChildrenComponent = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "Header__ChildrenComponent",
+  componentId: "kitt-universal__sc-1g7sbq-3"
+})(["flex:1;align-items:center;", ";"], ({
+  theme,
+  $hasLeft,
+  $hasRight
+}) => {
+  const paddingHorizontal = theme.kitt.spacing * 2;
+  return styled.css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
+});
+const HeaderTitle = /*#__PURE__*/styled__default(Typography.Text).withConfig({
+  displayName: "Header__HeaderTitle",
+  componentId: "kitt-universal__sc-1g7sbq-4"
+})(["flex:1;text-align:", ";", ";"], ({
+  $hasLeft,
+  $hasRight
+}) => {
+  if (!$hasLeft && $hasRight) return 'left';
+  return 'center';
+}, ({
+  theme,
+  $hasLeft,
+  $hasRight
+}) => {
+  const paddingHorizontal = theme.kitt.spacing * 2;
+  return styled.css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
+});
+function Header({
+  hasSeparator = true,
+  isTransparent,
+  title,
+  children,
+  right,
+  left,
+  style
+}) {
+  const sharedProps = {
+    $hasLeft: Boolean(left),
+    $hasRight: Boolean(right)
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(HeaderContainer, {
+    $isTransparent: isTransparent,
+    $hasSeparator: hasSeparator,
+    $hasLeft: Boolean(left),
+    $hasRight: Boolean(right),
+    style: style,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Row, {
+      $hasContent: Boolean(title || children),
+      ...sharedProps,
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(ButtonContainer, {
+        children: left
+      }) : null, title ? /*#__PURE__*/jsxRuntime.jsx(HeaderTitle, { ...sharedProps,
+        variant: "bold",
+        children: title
+      }) : null, children ? /*#__PURE__*/jsxRuntime.jsx(ChildrenComponent, { ...sharedProps,
+        children: children
+      }) : null, right || left ? /*#__PURE__*/jsxRuntime.jsx(ButtonContainer, {
+        children: right
+      }) : null]
+    })
+  });
+}
+
+const NavigationModalContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "NavigationModalContainer",
+  componentId: "kitt-universal__sc-n0bwvk-0"
+})(["position:relative;background-color:", ";flex:1;", ""], ({
+  theme,
+  $backgroundColor
+}) => $backgroundColor || theme.kitt.colors.uiBackgroundLight, () => {
+  return styled.css(["min-height:100vh;"]);
+});
+
+const ContainerWithoutHeader = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
+  displayName: "NavigationModal__ContainerWithoutHeader",
+  componentId: "kitt-universal__sc-ls8t24-0"
+})(["justify-content:space-between;flex:1;"]);
+function NavigationModal({
+  body,
+  header,
+  footer,
+  backgroundColor
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(NavigationModalContainer, {
+    $backgroundColor: backgroundColor,
+    children: [header ? /*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.View, {
+      children: header
+    }) : null, /*#__PURE__*/jsxRuntime.jsxs(ContainerWithoutHeader, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(BabelPluginStyledComponentsReactNative.ScrollView, {
+        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({
   type,
   children,
@@ -4191,6 +4494,8 @@ exports.LoaderIcon = LoaderIcon;
 exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
+exports.ModalBehaviour = ModalBehaviour;
+exports.NavigationModal = NavigationModal;
 exports.Notification = Notification;
 exports.Overlay = Overlay;
 exports.PageLoader = PageLoader;