@ornikar/kitt-universal 27.9.1-canary.51004cd27185355acc481c9933556ade7509bc80.0 → 27.9.1-canary.7887d5a9313c31fdf8e4d5a4b645a75389e9e991.0

package/dist/index.es.js

@@ -13,7 +13,7 @@ export { useWindowDimensions as useWindowSize } from 'react-native';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
+import { SpinnerGapRegularIcon, UserRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, XRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon, ArrowLeftRegularIcon } from '@ornikar/kitt-icons/phosphor';
 import { BottomSheetView, BottomSheetScrollView, BottomSheetSectionList, BottomSheetFlatList, BottomSheetHandle, BottomSheetBackdrop, BottomSheetFooter, BottomSheetTextInput, BottomSheetModal, useBottomSheetModal } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { parse } from '@twemoji/parser';
@@ -1820,12 +1820,12 @@ var fullscreenModal = {
   header: {
     height: 56
   },
-  horizontalPadding: 16,
+  sharedHorizontalPadding: 16,
   footer: {
     verticalPadding: 12
   },
   body: {
-    verticalPadding: 16
+    verticalPadding: 24
   },
   animation: {
     overlay: {
@@ -2647,8 +2647,8 @@ var theme = {
   forms: forms,
   highlight: highlight,
   icon: icon,
-  iconButton: iconButton,
   buttonBadge: buttonBadge,
+  iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
   picker: picker,
@@ -4379,16 +4379,25 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$J = ["children", "padding"];
+var _excluded$J = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? 'kitt.4' : _ref$padding,
+    _ref$paddingX = _ref.paddingX,
+    paddingX = _ref$paddingX === void 0 ? {
+      base: 'kitt.4',
+      medium: 'kitt.6'
+    } : _ref$paddingX,
+    _ref$paddingY = _ref.paddingY,
+    paddingY = _ref$paddingY === void 0 ? {
+      base: 'kitt.4',
+      medium: 'kitt.6'
+    } : _ref$paddingY,
     props = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
-      padding: padding
+      paddingX: paddingX,
+      paddingY: paddingY
     }
   }, props), {}, {
     children: children
@@ -4419,145 +4428,55 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var getButtonTypeAndVariant = function (iconColor) {
-  switch (iconColor) {
-    case 'black':
-      return {
-        type: 'tertiary'
-      };
-    case 'secondary':
-      return {
-        type: 'secondary'
-      };
-    case 'primary':
-      return {
-        type: 'primary'
-      };
-    case 'primary-plain':
-      return {
-        type: 'primary'
-      };
-    case 'ghost':
-      return {
-        type: 'tertiary',
-        variant: 'revert'
-      };
-    default:
-      return {
-        type: 'secondary'
-      };
-  }
-};
-
-var _excluded$H = ["color", "ariaLabel"];
-/**
- * @deprecated IconButton should only be used as a navigation button
- * Other use cases should use a <Button> component with an icon
- */
-function IconButton(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'black' : _ref$color;
-    _ref.ariaLabel;
-    var props = _objectWithoutProperties(_ref, _excluded$H);
-  var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
-    legacyColorToType = _getButtonTypeAndVari.type,
-    legacyColorToVariant = _getButtonTypeAndVari.variant;
-  return /*#__PURE__*/jsx(Button, _objectSpread({
-    variant: legacyColorToVariant,
-    type: legacyColorToType
-  }, props));
-}
-function CloseIconButton(props) {
-  return /*#__PURE__*/jsx(IconButton, _objectSpread({
-    icon: /*#__PURE__*/jsx(XRegularIcon, {})
-  }, props));
-}
-
-function TopNavBar(_ref) {
-  var left = _ref.left,
-    right = _ref.right,
+var _excluded$H = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+function CardModalHeader(_ref) {
+  var children = _ref.children,
     title = _ref.title,
-    _ref$titleAlign = _ref.titleAlign,
-    titleAlign = _ref$titleAlign === void 0 ? 'center' : _ref$titleAlign,
-    stickers = _ref.stickers,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
+    _ref$paddingBottom = _ref.paddingBottom,
+    paddingBottom = _ref$paddingBottom === void 0 ? {
+      base: 'kitt.4',
+      medium: 'kitt.2'
+    } : _ref$paddingBottom,
     _ref$hasSeparator = _ref.hasSeparator,
-    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator;
-  var isLargeTitleMode = mode === 'largeTitle';
-  var leftEmptySpace = !left && titleAlign === 'left' ? null : /*#__PURE__*/jsx(View, {
-    width: "kitt.iconButton.width"
-  });
-  return /*#__PURE__*/jsxs(VStack, {
-    space: isLargeTitleMode ? 'kitt.2' : undefined,
-    width: "100%",
-    height: mode === 'default' ? 56 : undefined,
-    justifyContent: "center",
-    paddingX: "kitt.2",
-    paddingTop: isLargeTitleMode ? 'kitt.2' : 'kitt.3',
-    paddingBottom: "kitt.3",
-    borderBottomWidth: hasSeparator && mode === 'default' ? 1 : 0,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    right = _ref.right,
+    left = _ref.left,
+    props = _objectWithoutProperties(_ref, _excluded$H);
+  var defaultContainerPadding = {
+    base: 'kitt.4',
+    medium: 'kitt.6'
+  };
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
+    padding: paddingBottom,
+    borderBottomWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
     borderColor: "kitt.separator",
-    children: [/*#__PURE__*/jsxs(HStack, {
+    justifyContent: "center",
+    width: "100%",
+    height: "kitt.cardModal.header.height",
+    paddingRight: right ? 'kitt.2' : defaultContainerPadding,
+    paddingLeft: left ? 'kitt.2' : defaultContainerPadding,
+    children: /*#__PURE__*/jsxs(View, {
       alignItems: "center",
-      justifyContent: !title && !left ? 'flex-end' : 'space-between',
-      children: [left !== null && left !== void 0 ? left : leftEmptySpace, mode === 'default' ? /*#__PURE__*/jsx(View, {
+      flexDirection: "row",
+      justifyContent: !children && !left ? 'flex-end' : 'space-between',
+      children: [left ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: left
+      }) : null, /*#__PURE__*/jsxs(View, {
         flexGrow: "1",
-        flexShrink: 1,
-        paddingRight: "kitt.2",
-        paddingLeft: "kitt.2",
-        children: title ? /*#__PURE__*/jsx(Typography.Text, {
-          textAlign: titleAlign,
+        paddingRight: right ? 'kitt.2' : 0,
+        paddingLeft: left ? 'kitt.2' : 0,
+        children: [title ? /*#__PURE__*/jsx(Typography.Text, {
+          textAlign: !left && right ? 'left' : 'center',
           variant: "bold",
-          ellipsizeMode: "tail",
-          numberOfLines: 1,
           children: title
-        }) : null
-      }) : null, right !== null && right !== void 0 ? right : /*#__PURE__*/jsx(View, {
-        width: "kitt.iconButton.width"
-      })]
-    }), mode === 'largeTitle' ? /*#__PURE__*/jsxs(VStack, {
-      space: "kitt.4",
-      paddingX: "kitt.2",
-      children: [stickers ? /*#__PURE__*/jsx(HStack, {
-        width: "100%",
-        space: "kitt.1",
-        flexShrink: 1,
-        flexWrap: "wrap",
-        style: {
-          rowGap: theme.getSpacing(1)
-        },
-        children: stickers.map(function (sticker, index) {
-          return (
-            /*#__PURE__*/
-            // eslint-disable-next-line react/no-array-index-key
-            jsx(View, {
-              children: sticker
-            }, index)
-          );
-        })
-      }) : null, /*#__PURE__*/jsx(Typography.Text, {
-        base: "heading-m",
-        children: title
-      })]
-    }) : null]
-  });
-}
-function CloseButton(props) {
-  return /*#__PURE__*/jsx(IconButton, _objectSpread({
-    icon: /*#__PURE__*/jsx(XRegularIcon, {})
-  }, props));
-}
-function BackButton(props) {
-  return /*#__PURE__*/jsx(IconButton, _objectSpread({
-    icon: /*#__PURE__*/jsx(ArrowLeftRegularIcon, {})
-  }, props));
-}
-TopNavBar.CloseButton = CloseButton;
-TopNavBar.BackButton = BackButton;
-
-function CardModalHeader(props) {
-  return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
+        }) : null, children]
+      }), right ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: right
+      }) : null]
+    })
+  }));
 }
 
 var _excluded$G = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
@@ -6452,7 +6371,11 @@ var _excluded$u = ["title", "isVisible", "value", "validateButtonLabel", "onClos
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
-    title: children
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      base: "body-m",
+      variant: "bold",
+      children: children
+    })
   });
 }
 function ModalPlatformDateTimePicker(_ref2) {
@@ -8532,17 +8455,64 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$c = ["shouldHandleTopNotch"];
+var _excluded$c = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
-  var _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
+  var _ref$hasSeparator = _ref.hasSeparator,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
+    isTransparent = _ref.isTransparent,
+    title = _ref.title,
+    children = _ref.children,
+    right = _ref.right,
+    left = _ref.left,
+    _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
     props = _objectWithoutProperties(_ref, _excluded$c);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
-  return /*#__PURE__*/jsx(View, {
+  var hasRight = Boolean(right);
+  var hasLeft = Boolean(left);
+  var hasContent = Boolean(title || children);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    backgroundColor: isTransparent ? 'kitt.transparent' : 'kitt.uiBackgroundLight',
+    minHeight: "kitt.fullscreenModal.header.height",
+    width: "100%",
+    justifyContent: "center",
     paddingTop: shouldHandleTopNotch ? top : undefined,
-    children: /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props))
-  });
+    paddingRight: hasRight ? 'kitt.2' : 'kitt.fullscreenModal.horizontalPadding',
+    paddingLeft: hasLeft ? 'kitt.2' : 'kitt.fullscreenModal.horizontalPadding',
+    borderBottomColor: "kitt.separator",
+    borderBottomWidth: hasSeparator ? 1 : undefined
+  }, props), {}, {
+    children: /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: !hasContent && !hasLeft ? 'flex-end' : 'space-between',
+      children: [left ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: left
+      }) : null, title ? /*#__PURE__*/jsx(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        paddingLeft: hasLeft ? 'kitt.2' : undefined,
+        paddingRight: hasRight ? 'kitt.2' : 0,
+        children: /*#__PURE__*/jsx(Typography.Text, {
+          variant: "bold",
+          textAlign: !hasLeft && hasRight ? 'left' : 'center',
+          children: title
+        })
+      }) : null, children ? /*#__PURE__*/jsx(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        alignItems: "center",
+        paddingLeft: hasLeft ? 'kitt.2' : undefined,
+        paddingRight: hasRight ? 'kitt.2' : undefined,
+        children: children
+      }) : null, right || left ? /*#__PURE__*/jsx(View, {
+        width: "kitt.iconButton.width",
+        children: right
+      }) : null]
+    })
+  }));
 }
 
 function FullscreenModal(_ref) {
@@ -8841,6 +8811,60 @@ function Highlight(_ref) {
   });
 }
 
+var getButtonTypeAndVariant = function (iconColor) {
+  switch (iconColor) {
+    case 'black':
+      return {
+        type: 'tertiary'
+      };
+    case 'secondary':
+      return {
+        type: 'secondary'
+      };
+    case 'primary':
+      return {
+        type: 'primary'
+      };
+    case 'primary-plain':
+      return {
+        type: 'primary'
+      };
+    case 'ghost':
+      return {
+        type: 'tertiary',
+        variant: 'revert'
+      };
+    default:
+      return {
+        type: 'secondary'
+      };
+  }
+};
+
+var _excluded$b = ["color", "ariaLabel"];
+/**
+ * @deprecated IconButton should only be used as a navigation button
+ * Other use cases should use a <Button> component with an icon
+ */
+function IconButton(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'black' : _ref$color;
+    _ref.ariaLabel;
+    var props = _objectWithoutProperties(_ref, _excluded$b);
+  var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
+    legacyColorToType = _getButtonTypeAndVari.type,
+    legacyColorToVariant = _getButtonTypeAndVari.variant;
+  return /*#__PURE__*/jsx(Button, _objectSpread({
+    variant: legacyColorToVariant,
+    type: legacyColorToType
+  }, props));
+}
+function CloseIconButton(props) {
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
+    icon: /*#__PURE__*/jsx(XRegularIcon, {})
+  }, props));
+}
+
 function InfoCard(_ref) {
   var title = _ref.title,
     action = _ref.action,
@@ -9062,7 +9086,7 @@ var getBackgroundColor = function (_ref) {
   return isSelected || isHovered ? theme.mapMarker.meetingPoint.selected : theme.mapMarker.meetingPoint["default"];
 };
 
-var _excluded$b = ["onPress", "testID"];
+var _excluded$a = ["onPress", "testID"];
 function StaticMapMarker$1(_ref) {
   var variant = _ref.variant,
     isHovered = _ref.isHovered,
@@ -9121,7 +9145,7 @@ function StaticMapMarker$1(_ref) {
 function MapMarker(_ref2) {
   var onPress = _ref2.onPress,
     testID = _ref2.testID,
-    props = _objectWithoutProperties(_ref2, _excluded$b);
+    props = _objectWithoutProperties(_ref2, _excluded$a);
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
@@ -10568,6 +10592,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         icon: theme.icon,
         cardModal: {
+          header: {
+            height: theme.cardModal.header.height
+          },
           maxWidth: theme.cardModal.maxWidth,
           maxWidthWithPadding: theme.cardModal.maxWidthWithPadding,
           minHeight: theme.cardModal.minHeight
@@ -10872,6 +10899,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           width: theme.iconButton.width,
           height: theme.iconButton.height
         },
+        fullscreenModal: {
+          header: {
+            height: theme.fullscreenModal.header.height
+          }
+        },
         pageLoader: {
           size: theme.pageLoader.size
         },
@@ -10966,7 +10998,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         fullscreenModal: {
-          horizontalPadding: theme.fullscreenModal.horizontalPadding,
+          horizontalPadding: theme.fullscreenModal.sharedHorizontalPadding,
           body: {
             verticalPadding: theme.fullscreenModal.body.verticalPadding
           },
@@ -11787,7 +11819,6 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$a = ["right"];
 function NavigationBottomSheet(_ref) {
   var children = _ref.children,
     hasScrollView = _ref.hasScrollView,
@@ -11826,15 +11857,19 @@ function NavigationBottomSheet(_ref) {
     })
   });
 }
-
-/**
- * Web only: display right CloseButton
- */
-
 function NavigationBottomSheetHeader(_ref2) {
-  _ref2.right;
-    var props = _objectWithoutProperties(_ref2, _excluded$a);
-  return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
+  var children = _ref2.children;
+    _ref2.left;
+  return /*#__PURE__*/jsx(HStack, {
+    marginBottom: "kitt.6",
+    children: /*#__PURE__*/jsx(Typography.Text, {
+      flexGrow: 1,
+      flexShrink: 1,
+      variant: "bold",
+      textAlign: "center",
+      children: children
+    })
+  });
 }
 function NavigationBottomSheetBody(props) {
   return /*#__PURE__*/jsx(VStack, _objectSpread({
@@ -12278,9 +12313,14 @@ function Picker(_ref) {
       onClose: handleClose,
       children: /*#__PURE__*/jsxs(CardModal, {
         children: [/*#__PURE__*/jsx(CardModal.Header, {
-          title: title,
-          right: /*#__PURE__*/jsx(TopNavBar.CloseButton, {
+          right: /*#__PURE__*/jsx(IconButton, {
+            icon: /*#__PURE__*/jsx(XRegularIcon, {}),
             onPress: handleClose
+          }),
+          children: /*#__PURE__*/jsx(Typography.Text, {
+            base: "body-m",
+            variant: "bold",
+            children: title
           })
         }), Platform.OS === 'ios' && shouldDisplayNativePickerOnIOS ? /*#__PURE__*/jsx(Picker$1, {
           testID: testID,
@@ -13862,6 +13902,88 @@ function Tooltip(_ref) {
 Tooltip.Arrow = Arrow;
 Tooltip.Content = TooltipContent;
 
+function TopNavBar(_ref) {
+  var left = _ref.left,
+    right = _ref.right,
+    title = _ref.title,
+    _ref$titleAlign = _ref.titleAlign,
+    titleAlign = _ref$titleAlign === void 0 ? 'center' : _ref$titleAlign,
+    stickers = _ref.stickers,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
+    _ref$hasSeparator = _ref.hasSeparator,
+    hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator;
+  var isLargeTitleMode = mode === 'largeTitle';
+  return /*#__PURE__*/jsxs(VStack, {
+    space: isLargeTitleMode ? 'kitt.2' : undefined,
+    width: "100%",
+    height: mode === 'default' ? 56 : undefined,
+    justifyContent: "center",
+    paddingX: "kitt.2",
+    paddingTop: isLargeTitleMode ? 'kitt.2' : 'kitt.3',
+    paddingBottom: "kitt.3",
+    borderBottomWidth: hasSeparator && mode === 'default' ? 1 : 0,
+    borderColor: "kitt.separator",
+    children: [/*#__PURE__*/jsxs(HStack, {
+      alignItems: "center",
+      justifyContent: !title && !left ? 'flex-end' : 'space-between',
+      children: [left !== null && left !== void 0 ? left : /*#__PURE__*/jsx(View, {
+        width: "kitt.button.minWidth"
+      }), mode === 'default' ? /*#__PURE__*/jsx(View, {
+        flexGrow: "1",
+        flexShrink: 1,
+        paddingRight: "kitt.2",
+        paddingLeft: "kitt.2",
+        children: title ? /*#__PURE__*/jsx(Typography.Text, {
+          textAlign: titleAlign,
+          variant: "bold",
+          ellipsizeMode: "tail",
+          numberOfLines: 1,
+          children: title
+        }) : null
+      }) : null, right !== null && right !== void 0 ? right : /*#__PURE__*/jsx(View, {
+        width: "kitt.button.minWidth"
+      })]
+    }), mode === 'largeTitle' ? /*#__PURE__*/jsxs(VStack, {
+      space: "kitt.4",
+      paddingX: "kitt.2",
+      children: [stickers ? /*#__PURE__*/jsx(HStack, {
+        width: "100%",
+        space: "kitt.1",
+        flexShrink: 1,
+        flexWrap: "wrap",
+        style: {
+          rowGap: theme.getSpacing(1)
+        },
+        children: stickers.map(function (sticker, index) {
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line react/no-array-index-key
+            jsx(View, {
+              children: sticker
+            }, index)
+          );
+        })
+      }) : null, /*#__PURE__*/jsx(Typography.Text, {
+        base: "heading-m",
+        children: title
+      })]
+    }) : null]
+  });
+}
+function CloseButton(props) {
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
+    icon: /*#__PURE__*/jsx(XRegularIcon, {})
+  }, props));
+}
+function BackButton(props) {
+  return /*#__PURE__*/jsx(IconButton, _objectSpread({
+    icon: /*#__PURE__*/jsx(ArrowLeftRegularIcon, {})
+  }, props));
+}
+TopNavBar.CloseButton = CloseButton;
+TopNavBar.BackButton = BackButton;
+
 function getTypographyTypeConfig(type, theme) {
   var configs = theme.kitt.typography.types[getTypographyFamily(type)].configs;
   return configs[type];