@ornikar/kitt-universal 27.9.1-canary.b005d681364bb7e16454f696f46b5af55d721a97.0 → 27.9.1-canary.e79ce5a70db58d281f30a0e111ad7cf70d64cdb1.0

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

@@ -1825,12 +1825,12 @@ const fullscreenModal = {
   header: {
     height: 56
   },
-  horizontalPadding: 16,
+  sharedHorizontalPadding: 16,
   footer: {
     verticalPadding: 12
   },
   body: {
-    verticalPadding: 16
+    verticalPadding: 24
   },
   animation: {
     overlay: {
@@ -1917,6 +1917,11 @@ const icon = {
   defaultSize: 20
 };
 
+const iconButton = {
+  width: button.height.medium,
+  height: button.height.medium
+};
+
 const listItem = {
   padding: '12px 16px',
   verticalPadding: 12,
@@ -2646,6 +2651,7 @@ const theme = {
   highlight,
   icon,
   buttonBadge,
+  iconButton,
   listItem,
   pageLoader,
   picker,
@@ -4352,13 +4358,21 @@ function CardModalBehaviour({
 
 function CardModalBody({
   children,
-  padding = 'kitt.4',
+  paddingX = {
+    base: 'kitt.4',
+    medium: 'kitt.6'
+  },
+  paddingY = {
+    base: 'kitt.4',
+    medium: 'kitt.6'
+  },
   ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(ScrollView, {
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
-      padding
+      paddingX,
+      paddingY
     },
     ...props,
     children: children
@@ -4388,145 +4402,53 @@ function CardModalFooter({
   });
 }
 
-const getButtonTypeAndVariant = 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'
-      };
-  }
-};
-
-/**
- * @deprecated IconButton should only be used as a navigation button
- * Other use cases should use a <Button> component with an icon
- */
-function IconButton({
-  color = 'black',
-  ariaLabel,
-  ...props
-}) {
-  const {
-    type: legacyColorToType,
-    variant: legacyColorToVariant
-  } = getButtonTypeAndVariant(color);
-  return /*#__PURE__*/jsxRuntime.jsx(Button, {
-    variant: legacyColorToVariant,
-    type: legacyColorToType,
-    ...props
-  });
-}
-function CloseIconButton(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-    icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.XRegularIcon, {}),
-    ...props
-  });
-}
-
-function TopNavBar({
-  left,
-  right,
+function CardModalHeader({
+  children,
   title,
-  titleAlign = 'center',
-  stickers,
-  mode = 'default',
-  hasSeparator = true
+  paddingBottom = {
+    base: 'kitt.4',
+    medium: 'kitt.2'
+  },
+  hasSeparator = true,
+  right,
+  left,
+  ...props
 }) {
-  const isLargeTitleMode = mode === 'largeTitle';
-  const leftEmptySpace = !left && titleAlign === 'left' ? null : /*#__PURE__*/jsxRuntime.jsx(View, {
-    width: "kitt.button.minWidth"
-  });
-  return /*#__PURE__*/jsxRuntime.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,
+  const defaultContainerPadding = {
+    base: 'kitt.4',
+    medium: 'kitt.6'
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    ...props,
+    padding: paddingBottom,
+    borderBottomWidth: hasSeparator ? 'kitt.cardModal.footer.borderWidth' : 0,
     borderColor: "kitt.separator",
-    children: [/*#__PURE__*/jsxRuntime.jsxs(HStack, {
+    justifyContent: "center",
+    width: "100%",
+    height: "kitt.cardModal.header.height",
+    paddingRight: right ? 'kitt.2' : defaultContainerPadding,
+    paddingLeft: left ? 'kitt.2' : defaultContainerPadding,
+    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
       alignItems: "center",
-      justifyContent: !title && !left ? 'flex-end' : 'space-between',
-      children: [left ?? leftEmptySpace, mode === 'default' ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      flexDirection: "row",
+      justifyContent: !children && !left ? 'flex-end' : 'space-between',
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "kitt.iconButton.width",
+        children: left
+      }) : null, /*#__PURE__*/jsxRuntime.jsxs(View, {
         flexGrow: "1",
-        flexShrink: 1,
-        paddingRight: "kitt.2",
-        paddingLeft: "kitt.2",
-        children: title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-          textAlign: titleAlign,
+        paddingRight: right ? 'kitt.2' : 0,
+        paddingLeft: left ? 'kitt.2' : 0,
+        children: [title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+          textAlign: !left && right ? 'left' : 'center',
           variant: "bold",
-          ellipsizeMode: "tail",
-          numberOfLines: 1,
           children: title
-        }) : null
-      }) : null, right ?? /*#__PURE__*/jsxRuntime.jsx(View, {
-        width: "kitt.button.minWidth"
-      })]
-    }), mode === 'largeTitle' ? /*#__PURE__*/jsxRuntime.jsxs(VStack, {
-      space: "kitt.4",
-      paddingX: "kitt.2",
-      children: [stickers ? /*#__PURE__*/jsxRuntime.jsx(HStack, {
-        width: "100%",
-        space: "kitt.1",
-        flexShrink: 1,
-        flexWrap: "wrap",
-        style: {
-          rowGap: theme.getSpacing(1)
-        },
-        children: stickers.map((sticker, index) =>
-        /*#__PURE__*/
-        // eslint-disable-next-line react/no-array-index-key
-        jsxRuntime.jsx(View, {
-          children: sticker
-        }, index))
-      }) : null, /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
-        base: "heading-m",
-        children: title
-      })]
-    }) : null]
-  });
-}
-function CloseButton(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-    icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.XRegularIcon, {}),
-    ...props
-  });
-}
-function BackButton(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-    icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.ArrowLeftRegularIcon, {}),
-    ...props
-  });
-}
-TopNavBar.CloseButton = CloseButton;
-TopNavBar.BackButton = BackButton;
-
-function CardModalHeader(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(TopNavBar, {
-    ...props
+        }) : null, children]
+      }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "kitt.iconButton.width",
+        children: right
+      }) : null]
+    })
   });
 }
 
@@ -6378,7 +6300,11 @@ function ModalTitle({
   children
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(CardModal.Header, {
-    title: children
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      base: "body-m",
+      variant: "bold",
+      children: children
+    })
   });
 }
 function ModalPlatformDateTimePicker({
@@ -8310,16 +8236,60 @@ function FullscreenModalContainer({
 }
 
 function FullscreenModalHeader({
+  hasSeparator = true,
+  isTransparent,
+  title,
+  children,
+  right,
+  left,
   shouldHandleTopNotch = true,
   ...props
 }) {
   const {
     top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const hasRight = Boolean(right);
+  const hasLeft = Boolean(left);
+  const hasContent = Boolean(title || children);
   return /*#__PURE__*/jsxRuntime.jsx(View, {
+    backgroundColor: isTransparent ? 'kitt.transparent' : 'kitt.uiBackgroundLight',
+    minHeight: "kitt.fullscreenModal.header.height",
+    width: "100%",
+    justifyContent: "center",
     paddingTop: shouldHandleTopNotch ? top : undefined,
-    children: /*#__PURE__*/jsxRuntime.jsx(TopNavBar, {
-      ...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__*/jsxRuntime.jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: !hasContent && !hasLeft ? 'flex-end' : 'space-between',
+      children: [left ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "kitt.iconButton.width",
+        children: left
+      }) : null, title ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        paddingLeft: hasLeft ? 'kitt.2' : undefined,
+        paddingRight: hasRight ? 'kitt.2' : 0,
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+          variant: "bold",
+          textAlign: !hasLeft && hasRight ? 'left' : 'center',
+          children: title
+        })
+      }) : null, children ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        flexGrow: 1,
+        flexShrink: 1,
+        alignItems: "center",
+        paddingLeft: hasLeft ? 'kitt.2' : undefined,
+        paddingRight: hasRight ? 'kitt.2' : undefined,
+        children: children
+      }) : null, right || left ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "kitt.iconButton.width",
+        children: right
+      }) : null]
     })
   });
 }
@@ -8615,6 +8585,62 @@ function Highlight({
   });
 }
 
+const getButtonTypeAndVariant = 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'
+      };
+  }
+};
+
+/**
+ * @deprecated IconButton should only be used as a navigation button
+ * Other use cases should use a <Button> component with an icon
+ */
+function IconButton({
+  color = 'black',
+  ariaLabel,
+  ...props
+}) {
+  const {
+    type: legacyColorToType,
+    variant: legacyColorToVariant
+  } = getButtonTypeAndVariant(color);
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
+    variant: legacyColorToVariant,
+    type: legacyColorToType,
+    ...props
+  });
+}
+function CloseIconButton(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.XRegularIcon, {}),
+    ...props
+  });
+}
+
 function InfoCard({
   title,
   action,
@@ -10340,6 +10366,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
@@ -10640,6 +10669,15 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
+        iconButton: {
+          width: theme.iconButton.width,
+          height: theme.iconButton.height
+        },
+        fullscreenModal: {
+          header: {
+            height: theme.fullscreenModal.header.height
+          }
+        },
         pageLoader: {
           size: theme.pageLoader.size
         },
@@ -10737,7 +10775,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         fullscreenModal: {
-          horizontalPadding: theme.fullscreenModal.horizontalPadding,
+          horizontalPadding: theme.fullscreenModal.sharedHorizontalPadding,
           body: {
             verticalPadding: theme.fullscreenModal.body.verticalPadding
           },
@@ -11593,14 +11631,19 @@ function NavigationBottomSheet({
     })
   });
 }
-
-/**
- * Web only: display right CloseButton
- */
-
-function NavigationBottomSheetHeader(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(TopNavBar, {
-    ...props
+function NavigationBottomSheetHeader({
+  children,
+  left
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(HStack, {
+    marginBottom: "kitt.6",
+    children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+      flexGrow: 1,
+      flexShrink: 1,
+      variant: "bold",
+      textAlign: "center",
+      children: children
+    })
   });
 }
 function NavigationBottomSheetBody(props) {
@@ -12055,9 +12098,14 @@ function Picker({
       onClose: handleClose,
       children: /*#__PURE__*/jsxRuntime.jsxs(CardModal, {
         children: [/*#__PURE__*/jsxRuntime.jsx(CardModal.Header, {
-          title: title,
-          right: /*#__PURE__*/jsxRuntime.jsx(TopNavBar.CloseButton, {
+          right: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+            icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.XRegularIcon, {}),
             onPress: handleClose
+          }),
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+            base: "body-m",
+            variant: "bold",
+            children: title
           })
         }), reactNative.Platform.OS === 'ios' && shouldDisplayNativePickerOnIOS ? /*#__PURE__*/jsxRuntime.jsx(picker$1.Picker, {
           testID: testID,
@@ -13601,6 +13649,85 @@ function Tooltip({
 Tooltip.Arrow = Arrow;
 Tooltip.Content = TooltipContent;
 
+function TopNavBar({
+  left,
+  right,
+  title,
+  titleAlign = 'center',
+  stickers,
+  mode = 'default',
+  hasSeparator = true
+}) {
+  const isLargeTitleMode = mode === 'largeTitle';
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(HStack, {
+      alignItems: "center",
+      justifyContent: !title && !left ? 'flex-end' : 'space-between',
+      children: [left ?? /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "kitt.button.minWidth"
+      }), mode === 'default' ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        flexGrow: "1",
+        flexShrink: 1,
+        paddingRight: "kitt.2",
+        paddingLeft: "kitt.2",
+        children: title ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+          textAlign: titleAlign,
+          variant: "bold",
+          ellipsizeMode: "tail",
+          numberOfLines: 1,
+          children: title
+        }) : null
+      }) : null, right ?? /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "kitt.button.minWidth"
+      })]
+    }), mode === 'largeTitle' ? /*#__PURE__*/jsxRuntime.jsxs(VStack, {
+      space: "kitt.4",
+      paddingX: "kitt.2",
+      children: [stickers ? /*#__PURE__*/jsxRuntime.jsx(HStack, {
+        width: "100%",
+        space: "kitt.1",
+        flexShrink: 1,
+        flexWrap: "wrap",
+        style: {
+          rowGap: theme.getSpacing(1)
+        },
+        children: stickers.map((sticker, index) =>
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        jsxRuntime.jsx(View, {
+          children: sticker
+        }, index))
+      }) : null, /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "heading-m",
+        children: title
+      })]
+    }) : null]
+  });
+}
+function CloseButton(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.XRegularIcon, {}),
+    ...props
+  });
+}
+function BackButton(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+    icon: /*#__PURE__*/jsxRuntime.jsx(phosphor.ArrowLeftRegularIcon, {}),
+    ...props
+  });
+}
+TopNavBar.CloseButton = CloseButton;
+TopNavBar.BackButton = BackButton;
+
 function getTypographyTypeConfig(type, theme) {
   const {
     configs