@ornikar/kitt-universal 9.30.2 → 9.31.0

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

@@ -906,6 +906,7 @@ const lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -5084,8 +5085,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));
@@ -5093,15 +5095,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
   });
@@ -5144,9 +5150,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
 }) => {
@@ -5159,6 +5166,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;
@@ -5214,14 +5223,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),