@ornikar/kitt-universal 9.30.2 → 9.31.0

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

@@ -917,6 +917,7 @@ var lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -5152,13 +5153,14 @@ function ContentPadding(_ref2) {
   }));
 }
 
-var _excluded$7 = ["children", "shouldHandleBottomNotch", "style"];
+var _excluded$7 = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 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;
+  var theme = _ref.theme,
+    $insetTop = _ref.$insetTop;
+  return Math.max(theme.kitt.spacing * 6, $insetTop);
 }, function (_ref2) {
   var theme = _ref2.theme,
     $insetBottom = _ref2.$insetBottom;
@@ -5168,12 +5170,16 @@ function Body(_ref3) {
   var children = _ref3.children,
     shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
     style = _ref3.style,
+    shouldHandleTopNotch = _ref3.shouldHandleTopNotch,
     props = _objectWithoutProperties(_ref3, _excluded$7);
   var _useSafeAreaInsets = useSafeAreaInsets(),
-    bottom = _useSafeAreaInsets.bottom;
+    bottom = _useSafeAreaInsets.bottom,
+    top = _useSafeAreaInsets.top;
   var insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  var insetTop = shouldHandleTopNotch ? top : 0;
   return /*#__PURE__*/jsx(StyledViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
     $insetBottom: insetBottom,
+    $insetTop: insetTop,
     style: style,
     children: children
   }));
@@ -5218,9 +5224,10 @@ function Footer(_ref5) {
 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;
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;padding-top:", "px;", ";"], function (_ref) {
+  var theme = _ref.theme,
+    $insetTop = _ref.$insetTop;
+  return theme.kitt.navigationModal.height + $insetTop;
 }, function (_ref2) {
   var theme = _ref2.theme,
     $isTransparent = _ref2.$isTransparent;
@@ -5235,68 +5242,77 @@ var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
     $hasLeft = _ref4.$hasLeft;
   return $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding;
 }, function (_ref5) {
-  var $hasSeparator = _ref5.$hasSeparator;
+  var $insetTop = _ref5.$insetTop;
+  return $insetTop;
+}, function (_ref6) {
+  var $hasSeparator = _ref6.$hasSeparator;
   if (!$hasSeparator) return undefined;
-  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref6) {
-    var theme = _ref6.theme;
+  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref7) {
+    var theme = _ref7.theme;
     return theme.kitt.colors.separator;
   });
 });
 var Row = /*#__PURE__*/styled(View$2).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;
+})(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref8) {
+  var $hasContent = _ref8.$hasContent,
+    $hasLeft = _ref8.$hasLeft;
   return !$hasContent && !$hasLeft ? 'flex-end' : 'space-between';
 });
 var ButtonContainer = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__ButtonContainer",
   componentId: "kitt-universal__sc-1g7sbq-2"
-})(["width:", "px;"], function (_ref8) {
-  var theme = _ref8.theme;
+})(["width:", "px;"], function (_ref9) {
+  var theme = _ref9.theme;
   return theme.kitt.iconButton.width;
 });
 var ChildrenComponent = /*#__PURE__*/styled(View$2).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;
+})(["flex:1;align-items:center;", ";"], function (_ref10) {
+  var theme = _ref10.theme,
+    $hasLeft = _ref10.$hasLeft,
+    $hasRight = _ref10.$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;
+})(["flex:1;text-align:", ";", ";"], function (_ref11) {
+  var $hasLeft = _ref11.$hasLeft,
+    $hasRight = _ref11.$hasRight;
   if (!$hasLeft && $hasRight) return 'left';
   return 'center';
-}, function (_ref11) {
-  var theme = _ref11.theme,
-    $hasLeft = _ref11.$hasLeft,
-    $hasRight = _ref11.$hasRight;
+}, function (_ref12) {
+  var theme = _ref12.theme,
+    $hasLeft = _ref12.$hasLeft,
+    $hasRight = _ref12.$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;
+function Header(_ref13) {
+  var _ref13$hasSeparator = _ref13.hasSeparator,
+    hasSeparator = _ref13$hasSeparator === void 0 ? true : _ref13$hasSeparator,
+    isTransparent = _ref13.isTransparent,
+    title = _ref13.title,
+    children = _ref13.children,
+    right = _ref13.right,
+    left = _ref13.left,
+    _ref13$shouldHandleTo = _ref13.shouldHandleTopNotch,
+    shouldHandleTopNotch = _ref13$shouldHandleTo === void 0 ? true : _ref13$shouldHandleTo,
+    style = _ref13.style;
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+    top = _useSafeAreaInsets.top;
+  var insetTop = shouldHandleTopNotch ? top : 0;
   var sharedProps = {
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right)
   };
   return /*#__PURE__*/jsx(HeaderContainer, {
     $isTransparent: isTransparent,
+    $insetTop: insetTop,
     $hasSeparator: hasSeparator,
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right),