@ornikar/kitt-universal 9.30.2 → 9.31.0

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

@@ -910,6 +910,7 @@ const lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -5794,8 +5795,9 @@ const StyledViewWithPadding = /*#__PURE__*/styled__default(ContentPadding).withC
   displayName: "Body__StyledViewWithPadding",
   componentId: "kitt-universal__sc-oc39vn-0"
 })(["padding-top:", "px;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 6, ({
+  theme,
+  $insetTop
+}) => Math.max(theme.kitt.spacing * 6, $insetTop), ({
   theme,
   $insetBottom
 }) => Math.max(theme.kitt.spacing * 4, $insetBottom));
@@ -5803,15 +5805,19 @@ function Body({
   children,
   shouldHandleBottomNotch,
   style,
+  shouldHandleTopNotch,
   ...props
 }) {
   const {
-    bottom
+    bottom,
+    top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  const insetTop = shouldHandleTopNotch ? top : 0;
   return /*#__PURE__*/jsxRuntime.jsx(StyledViewWithPadding, {
     ...props,
     $insetBottom: insetBottom,
+    $insetTop: insetTop,
     style: style,
     children: children
   });
@@ -5854,9 +5860,10 @@ function Footer({
 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, ({
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;padding-top:", "px;", ";"], ({
+  theme,
+  $insetTop
+}) => theme.kitt.navigationModal.height + $insetTop, ({
   theme,
   $isTransparent
 }) => {
@@ -5869,6 +5876,8 @@ const HeaderContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig(
   theme,
   $hasLeft
 }) => $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  $insetTop
+}) => $insetTop, ({
   $hasSeparator
 }) => {
   if (!$hasSeparator) return undefined;
@@ -5924,14 +5933,20 @@ function Header({
   children,
   right,
   left,
+  shouldHandleTopNotch = true,
   style
 }) {
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetTop = shouldHandleTopNotch ? top : 0;
   const sharedProps = {
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right)
   };
   return /*#__PURE__*/jsxRuntime.jsx(HeaderContainer, {
     $isTransparent: isTransparent,
+    $insetTop: insetTop,
     $hasSeparator: hasSeparator,
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right),
@@ -6003,7 +6018,6 @@ function NativeOpacityAnimation({
 }
 
 function NativeSlideInAnimation({
-  topInset = 0,
   visible,
   children,
   onEntered,
@@ -6023,7 +6037,6 @@ function NativeSlideInAnimation({
     // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
     if (!visible && hasRunAnimationRef.current) onExited();
   }
-  const viewportHeight = wHeight - topInset;
   const translateStyle = Animated.useAnimatedStyle(function () {
     const _f = function () {
       const {
@@ -6033,7 +6046,7 @@ function NativeSlideInAnimation({
       const [x1, y1, x2, y2] = easing;
       return {
         transform: [{
-          translateY: Animated.withTiming(visible ? 0 : viewportHeight, {
+          translateY: Animated.withTiming(visible ? 0 : wHeight, {
             duration,
             easing: Animated.Easing.bezier(x1, y1, x2, y2)
           }, function () {
@@ -6047,7 +6060,7 @@ function NativeSlideInAnimation({
             };
             _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
             _f.__workletHash = 14707844242190;
-            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (49:12)";
+            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (45:12)";
             return _f;
           }())
         }]
@@ -6065,24 +6078,27 @@ function NativeSlideInAnimation({
       },
       withTiming: Animated.withTiming,
       visible,
-      viewportHeight,
+      wHeight,
       Easing: {
         bezier: Animated.Easing.bezier
       },
       runOnJS: Animated.runOnJS,
       handleAnimationFinished
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,viewportHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.navigationModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:viewportHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
-    _f.__workletHash = 505483620545;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (39:42)";
+    _f.asString = "function _f(){const{theme,withTiming,visible,wHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.navigationModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:wHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
+    _f.__workletHash = 14160876288353;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (35:42)";
     return _f;
   }());
   return /*#__PURE__*/jsxRuntime.jsx(Animated__default.View, {
     style: [{
       transform: [{
-        translateY: viewportHeight
+        translateY: wHeight
       }]
-    }, translateStyle],
+    }, translateStyle, {
+      width: '100%',
+      flex: 1
+    }],
     children: children
   });
 }
@@ -6095,9 +6111,6 @@ function NavigationModalAnimation({
   onExit,
   onExited
 }) {
-  const {
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const [isModalVisible, setIsModalVisible] = React.useState(visible);
   const [isContentVisible, setIsContentVisible] = React.useState(false);
   const handleAnimationExited = () => {
@@ -6132,14 +6145,14 @@ function NavigationModalAnimation({
         children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
           onPress: handleAnimationExited
         })
-      }), /*#__PURE__*/jsxRuntime.jsxs(NativeSlideInAnimation, {
-        topInset: top,
+      }), /*#__PURE__*/jsxRuntime.jsx(NativeSlideInAnimation, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         onEntered: onEntered,
-        children: [/*#__PURE__*/jsxRuntime.jsx(View, {
-          height: top
-        }), children]
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          flex: 1,
+          children: children
+        })
       })]
     })
   });