@ornikar/kitt-universal 23.2.7 → 23.4.0

package/dist/index-metro.es.android.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, useCallback, Fragment as Fragment$1, createElement } from 'react';
+import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback, createElement } from 'react';
 import { View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, useSx, Text, Input, useBreakpointValue as useBreakpointValue$1, NativeBaseProvider, extendTheme, useMediaQuery } from 'native-base';
 export { useClipboard, useMediaQuery, useSx, useToken } from 'native-base';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -11,7 +11,7 @@ import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { ArcIcon, UserIcon, MapPinIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, RotateCCWIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop, useBottomSheetModal } from '@gorhom/bottom-sheet';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { parse } from 'twemoji-parser';
 import * as WebBrowser from 'expo-web-browser';
@@ -20,6 +20,8 @@ import Downshift from 'downshift';
 import Svg, { Path, LinearGradient, Stop, Mask, G, Defs, Circle as Circle$1 } from 'react-native-svg';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
+import { getDocumentAsync } from 'expo-document-picker';
+import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
 import { Picker as Picker$1 } from '@react-native-picker/picker';
@@ -1638,57 +1640,51 @@ const skeleton = {
 };
 
 const tag = {
-  borderRadius: 10,
-  padding: '2px 12px',
-  verticalPadding: 2,
-  horizontalPadding: 12,
-  primary: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
-      borderWidth: 0,
-      borderColor: colors.transparent
-    },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.primary
-    }
+  borderRadius: 16,
+  icon: {
+    small: 16,
+    medium: 16,
+    large: 20
   },
-  default: {
-    fill: {
-      backgroundColor: lateOceanColorPalette.black50,
-      borderWidth: 0,
-      borderColor: colors.transparent
+  withIcon: {
+    small: {
+      paddingLeft: 2,
+      paddingRight: 8,
+      height: 20
     },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.black
-    }
-  },
-  danger: {
-    fill: {
-      backgroundColor: colors.danger,
-      borderWidth: 0,
-      borderColor: colors.transparent
+    medium: {
+      paddingLeft: 4,
+      paddingRight: 8,
+      height: 24
     },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.danger
+    large: {
+      paddingLeft: 6,
+      paddingRight: 8,
+      height: 32
     }
   },
-  warn: {
-    fill: {
-      backgroundColor: colors.warning,
-      borderWidth: 0,
-      borderColor: colors.transparent
+  withoutIcon: {
+    small: {
+      paddingLeft: 8,
+      paddingRight: 8,
+      height: 20
     },
-    outline: {
-      backgroundColor: colors.transparent,
-      borderWidth: 1,
-      borderColor: colors.warning
+    medium: {
+      paddingLeft: 8,
+      paddingRight: 8,
+      height: 22
+    },
+    large: {
+      paddingLeft: 8,
+      paddingRight: 8,
+      height: 28
     }
+  },
+  fill: {
+    borderWidth: 0
+  },
+  outline: {
+    borderWidth: 1
   }
 };
 
@@ -1885,7 +1881,7 @@ function ActionCardDisabled({
   });
 }
 
-const _excluded$M = ["children", "variant", "borderVariant", "disabled", "isHovered", "isPressed", "isFocused"];
+const _excluded$N = ["children", "variant", "borderVariant", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   let {
       children,
@@ -1896,7 +1892,7 @@ function ActionCard(_ref) {
       isPressed,
       isFocused
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       variant: variant,
@@ -2110,7 +2106,7 @@ const getTypographyFamilyWithAncestorValue = (type, typographyFamilyInContext) =
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-const _excluded$L = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+const _excluded$M = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 const TypographyFamilyContext = /*#__PURE__*/createContext(null);
 const TypographyTypeContext = /*#__PURE__*/createContext(null);
 const TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -2165,7 +2161,7 @@ function Typography(_ref) {
       variant,
       color
     } = _ref,
-    otherProps = _objectWithoutProperties(_ref, _excluded$L);
+    otherProps = _objectWithoutProperties(_ref, _excluded$M);
   const sx = useSx();
   const typographyFamilyInContext = useContext(TypographyFamilyContext);
   const defaultColor = useTypographyDefaultColor();
@@ -2272,7 +2268,7 @@ function Icon({
   });
 }
 
-const _excluded$K = ["color", "size"],
+const _excluded$L = ["color", "size"],
   _excluded2$5 = ["color"];
 function getIconSizeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
@@ -2295,7 +2291,7 @@ function TypographyIconSpecifiedColor(_ref) {
       color,
       size
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   const ancestorType = useTypographyAncestorType();
   const iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
   const colorValue = getTypographyColorValue(color);
@@ -2347,7 +2343,7 @@ const getButtonTextColorByType = (type, variant, isHovered, isPressed) => {
   }
 };
 
-const _excluded$J = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+const _excluded$K = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon({
   icon,
   color,
@@ -2426,7 +2422,7 @@ function ButtonContent(_ref) {
       isPressed,
       isFocused
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   const color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -2729,7 +2725,7 @@ function LoaderIcon({
   });
 }
 
-const _excluded$I = ["as", "onPress", "disabled", "icon", "stretch"];
+const _excluded$J = ["as", "onPress", "disabled", "icon", "stretch"];
 const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -2741,7 +2737,7 @@ const ActionsItem = /*#__PURE__*/forwardRef((_ref, ref) => {
         medium: false
       }
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   const [isLoading, setIsLoading] = useState(false);
   const mountedRef = useRef(false);
 
@@ -2787,7 +2783,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-const _excluded$H = ["children", "layout", "reversed"];
+const _excluded$I = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -2818,7 +2814,7 @@ function Actions(_ref) {
       layout,
       reversed
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   const currentAlignItems = getCurrentLayout(layout);
   const currentDirection = getCurrentDirection(layout);
   const currentAlignSelf = getCurrentAlignSelf(layout);
@@ -2869,7 +2865,7 @@ function getInitials(firstname, lastname) {
   return `${firstname[0]}${lastname[0]}`.toUpperCase();
 }
 
-const _excluded$G = ["size", "round", "light", "sizeVariant"];
+const _excluded$H = ["size", "round", "light", "sizeVariant"];
 function AvatarContent({
   size,
   src,
@@ -2911,7 +2907,7 @@ function Avatar(_ref) {
       light,
       sizeVariant
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   const currentSize = getCurrentSize({
     size,
     sizeVariant
@@ -3241,7 +3237,7 @@ function CardModalAnimation({
   });
 }
 
-const _excluded$F = ["children", "visible", "onClose", "onExited"];
+const _excluded$G = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   let {
       children,
@@ -3249,7 +3245,7 @@ function CardModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -3271,7 +3267,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-const _excluded$E = ["children", "paddingX", "paddingY"];
+const _excluded$F = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   let {
       children,
@@ -3281,7 +3277,7 @@ function CardModalBody(_ref) {
       },
       paddingY = 'kitt.4'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -3293,7 +3289,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-const _excluded$D = ["children", "padding", "hasSeparator"];
+const _excluded$E = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   let {
       children,
@@ -3303,7 +3299,7 @@ function CardModalFooter(_ref) {
       },
       hasSeparator = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -3317,7 +3313,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-const _excluded$C = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+const _excluded$D = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   let {
       children,
@@ -3330,7 +3326,7 @@ function CardModalHeader(_ref) {
       right,
       left
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   const defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -3368,7 +3364,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-const _excluded$B = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+const _excluded$C = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   let {
       backgroundColor = 'kitt.uiBackgroundLight',
@@ -3379,7 +3375,7 @@ function CardModal(_ref) {
       body,
       footer
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -3602,12 +3598,12 @@ function ChoiceItemContainer({
   });
 }
 
-const _excluded$A = ["direction"];
+const _excluded$B = ["direction"];
 function ChoicesContainer(_ref) {
   let {
       direction
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -3820,7 +3816,7 @@ function DialogModalAnimation({
   });
 }
 
-const _excluded$z = ["children", "visible", "onClose", "onExited"];
+const _excluded$A = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   let {
       children,
@@ -3828,7 +3824,7 @@ function DialogModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -3856,7 +3852,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-const _excluded$y = ["stretch"];
+const _excluded$z = ["stretch"];
 function DialogModal({
   illustration,
   title,
@@ -3898,7 +3894,7 @@ function DialogModalButton(_ref) {
   let {
       stretch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -3932,7 +3928,7 @@ function Emoji({
   });
 }
 
-const _excluded$x = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+const _excluded$y = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$4 = ["phoneNumber", "children"],
   _excluded3$3 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -3944,7 +3940,7 @@ function ExternalAppLink(_ref) {
       onPress,
       onOpenAppError
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   const href = `${appScheme}:${appValue}`;
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({
     href: href
@@ -4025,7 +4021,7 @@ function useOpenExternalLink() {
   };
 }
 
-const _excluded$w = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+const _excluded$x = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   let {
       as: Component,
@@ -4035,7 +4031,7 @@ function ExternalLink(_ref) {
       // eslint-disable-next-line no-console
       onOpenLinkError = console.error
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   const openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -4094,7 +4090,7 @@ function InputTextContainer({
   });
 }
 
-const _excluded$v = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "onSubmitEditing"];
+const _excluded$w = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "onSubmitEditing"];
 const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -4110,7 +4106,7 @@ const InputText = /*#__PURE__*/forwardRef((_ref, ref) => {
       multiline,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   const theme = useTheme();
   const fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -4227,12 +4223,12 @@ function AutocompleteItemsListContainer({
   });
 }
 
-const _excluded$u = ["children"];
+const _excluded$v = ["children"];
 function AutocompleteOption(_ref) {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -4244,7 +4240,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-const _excluded$t = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex"],
+const _excluded$u = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex"],
   _excluded2$3 = ["onClick", "onPress"],
   _excluded3$2 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -4285,7 +4281,7 @@ function Autocomplete(_ref) {
       listContainerTestID = 'kitt.Autocomplete.listContainer',
       zIndex = 1000
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   const childrenArray = Children.toArray(children);
   const items = childrenArray.filter(isReactElement).map(child => ({
     child,
@@ -4839,7 +4835,7 @@ function PartContainer({
   });
 }
 
-const _excluded$s = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+const _excluded$t = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       id,
@@ -4859,7 +4855,7 @@ const KeyboardDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onSubmitEditing
     } = _ref;
-    _objectWithoutProperties(_ref, _excluded$s);
+    _objectWithoutProperties(_ref, _excluded$t);
   const monthRef = useRef(null);
   const yearRef = useRef(null);
   const defaultValue = value;
@@ -5063,7 +5059,7 @@ const PressableDateInputs = /*#__PURE__*/forwardRef(({
   });
 });
 
-const _excluded$r = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+const _excluded$s = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onBlur,
@@ -5074,7 +5070,7 @@ const DatePickerAndroid = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
   const handleClose = () => {
@@ -5144,7 +5140,7 @@ function PlatformDateTimePicker({
   }));
 }
 
-const _excluded$q = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+const _excluded$r = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle({
   children
 }) {
@@ -5165,7 +5161,7 @@ function ModalPlatformDateTimePicker(_ref) {
       onClose,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   const [currentValue, setCurrentValue] = useState(value);
 
   // Prevent unsynced value between the modal and its parent state
@@ -5208,7 +5204,7 @@ function ModalPlatformDateTimePicker(_ref) {
   });
 }
 
-const _excluded$p = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+const _excluded$q = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -5224,7 +5220,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onFocus,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   const [isPickerUIVisible, setIsPickerUIVisible] = useState(isDefaultVisible);
   const [isFocused, setIsFocused] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -5262,7 +5258,7 @@ const DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 
-const _excluded$o = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+const _excluded$p = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       value,
@@ -5272,7 +5268,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange,
       onBlur
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -5294,7 +5290,7 @@ const NativeUIDatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props));
 });
 
-const _excluded$n = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+const _excluded$o = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       fillMode = 'native',
@@ -5302,7 +5298,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onSubmitEditing
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   // in apps, final-form can give a string value that will break the component
   const currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -5321,6 +5317,240 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
+function DocumentPicker({
+  onDocumentUpload,
+  children,
+  disabled,
+  documentPickerOptions
+}) {
+  const childElement = Children.only(children);
+  return /*#__PURE__*/cloneElement(childElement, {
+    // ensure that the press event is not prevented by Button component
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    onPress: async () => {
+      var _childElement$props$o, _childElement$props;
+      if (disabled) return;
+      (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
+      const result = await getDocumentAsync(_objectSpread(_objectSpread({}, documentPickerOptions), {}, {
+        multiple: false
+      }));
+      if (!result.canceled && result.assets[0].file) {
+        onDocumentUpload(result.assets[0].file);
+      }
+    },
+    disabled
+  });
+}
+
+function ImagePicker({
+  onImageSelected,
+  children,
+  disabled,
+  imagePickerOptions
+}) {
+  const childElement = Children.only(children);
+  return /*#__PURE__*/jsx(View, {
+    children: /*#__PURE__*/cloneElement(childElement, {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onPress: async () => {
+        var _childElement$props$o, _childElement$props;
+        if (disabled) return;
+        (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
+
+        // No permissions request is necessary for launching the image library
+        const result = await launchImageLibraryAsync(_objectSpread(_objectSpread({}, imagePickerOptions), {}, {
+          allowsMultipleSelection: false
+        }));
+        if (!result.canceled) {
+          onImageSelected(result.assets[0]);
+        }
+      },
+      disabled
+    })
+  });
+}
+
+const _excluded$n = ["children"];
+function ListItemContent(_ref) {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$n);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0
+  }, rest), {}, {
+    children: children
+  }));
+}
+
+const _excluded$m = ["children", "side"],
+  _excluded2$2 = ["children", "align"];
+// Handles the vertical alignment of the side elements of the list item
+function ListItemSideContainer(_ref) {
+  let {
+      children,
+      side = 'left'
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$m);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    flexDirection: "row",
+    marginLeft: side === 'right' ? 'kitt.2' : undefined,
+    marginRight: side === 'left' ? 'kitt.2' : undefined
+  }, rest), {}, {
+    children: children
+  }));
+}
+function ListItemSideContent(_ref2) {
+  let {
+      children,
+      align = 'auto'
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded2$2);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    alignSelf: align
+  }, rest), {}, {
+    children: children
+  }));
+}
+
+const _excluded$l = ["children", "withPadding", "borders", "left", "right", "onPress"];
+function ListItem(_ref) {
+  let {
+      children,
+      withPadding,
+      borders,
+      left,
+      right,
+      onPress
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$l);
+  const Wrapper = onPress ? Pressable$2 : Fragment$1;
+  const wrapperProps = onPress ? _objectSpread({
+    accessibilityRole: 'button',
+    onPress
+  }, rest) : undefined;
+  const containerProps = onPress ? undefined : rest;
+  return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    children: /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
+      flexDirection: "row",
+      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
+      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
+      borderColor: "kitt.listItem.borderColor",
+      backgroundColor: "kitt.uiBackgroundLight",
+      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
+      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined
+    }, containerProps), {}, {
+      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "left",
+        children: left
+      }) : null, /*#__PURE__*/jsx(ListItemContent, {
+        children: children
+      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
+        side: "right",
+        children: right
+      }) : null]
+    }))
+  }));
+}
+ListItem.Content = ListItemContent;
+ListItem.SideContent = ListItemSideContent;
+ListItem.SideContainer = ListItemSideContainer;
+
+const _excluded$k = ["title"];
+function BottomSheetActionsItem(_ref) {
+  let {
+      title
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  return /*#__PURE__*/jsx(Pressable$2, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsx(ListItem, {
+      withPadding: true,
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        variant: "bold",
+        base: "body",
+        children: title
+      })
+    })
+  }));
+}
+
+function BottomSheetActions({
+  onBottomSheetActionsChange,
+  imagePickerOptions,
+  documentPickerOptions,
+  disabled
+}) {
+  const isPlatformIOS = Platform.OS === 'ios';
+  return /*#__PURE__*/jsxs(VStack, {
+    marginBottom: "kitt.8",
+    children: [/*#__PURE__*/jsx(ImagePicker, {
+      imagePickerOptions: imagePickerOptions,
+      disabled: disabled,
+      onImageSelected: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "account.BottomSheetActions.openLibrary",
+          values: {
+            isPlatformIOS
+          }
+        })
+      })
+    }), /*#__PURE__*/jsx(DocumentPicker, {
+      disabled: disabled,
+      documentPickerOptions: documentPickerOptions,
+      onDocumentUpload: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "account.BottomSheetActions.openFileExplorer",
+          values: {
+            isPlatformIOS
+          }
+        })
+      })
+    })]
+  });
+}
+
+function FilePicker({
+  onFileSelected,
+  children,
+  disabled,
+  imagePickerOptions,
+  documentPickerOptions
+}) {
+  const childElement = Children.only(children);
+  const {
+    bottomSheetRef,
+    BottomSheet
+  } = useStaticBottomSheet(BottomSheetActions);
+  const {
+    dismissAll
+  } = useBottomSheetModal();
+  const handleBottomSheetActionsChange = file => {
+    dismissAll();
+    onFileSelected(file);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/cloneElement(childElement, {
+      // ensure that the press event is not prevented by Button component
+      onPress: () => {
+        var _childElement$props$o, _childElement$props, _bottomSheetRef$curre;
+        if (disabled) return;
+        (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
+        (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 || _bottomSheetRef$curre.present({
+          onBottomSheetActionsChange: handleBottomSheetActionsChange,
+          imagePickerOptions,
+          documentPickerOptions
+        });
+      },
+      disabled
+    }), /*#__PURE__*/jsx(BottomSheet, {})]
+  });
+}
+
 const GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
 function GoogleMapsApiKeyProvider({
   children,
@@ -5668,7 +5898,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-const _excluded$m = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+const _excluded$j = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   let {
       initialValue,
@@ -5677,7 +5907,7 @@ function InputAddress(_ref) {
       emptyResultsElement,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   const {
     state,
     onInputChange,
@@ -5766,12 +5996,12 @@ function InputField({
   });
 }
 
-const _excluded$l = ["onChange"];
+const _excluded$i = ["onChange"];
 const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -5788,13 +6018,13 @@ const InputNumber = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$k = ["isPasswordDefaultVisible", "right"];
+const _excluded$h = ["isPasswordDefaultVisible", "right"];
 const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       isPasswordDefaultVisible,
       right
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   const [isVisible, setIsVisible] = useState(Boolean(isPasswordDefaultVisible));
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
@@ -5815,7 +6045,7 @@ const InputPassword = /*#__PURE__*/forwardRef((_ref, ref) => {
   }));
 });
 
-const _excluded$j = ["enterKeyHint", "autoComplete", "phoneNumberLength", "value", "onChange"];
+const _excluded$g = ["enterKeyHint", "autoComplete", "phoneNumberLength", "value", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -5830,7 +6060,7 @@ const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
       value,
       onChange
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   const [currentValue, setCurrentValue] = useState(value);
   const currentEnterKeyHint = enterKeyHint ? getEnterKeyHintForNumericInput(enterKeyHint) : undefined;
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
@@ -6277,7 +6507,7 @@ function RadioButton({
   });
 }
 
-const _excluded$i = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+const _excluded$f = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -6292,7 +6522,7 @@ function RadioButtonGroup(_ref2) {
       onBlur,
       onChange
     } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded$i);
+    props = _objectWithoutProperties(_ref2, _excluded$f);
   const [currentValue, setCurrentValue] = useState(value);
   const handleChange = newValue => {
     if (disabled) return;
@@ -6331,7 +6561,7 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props));
 });
 
-const _excluded$h = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+const _excluded$e = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   let {
       children,
@@ -6339,7 +6569,7 @@ function FullscreenModalBody(_ref) {
       style,
       shouldHandleTopNotch
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   const {
     bottom,
     top
@@ -6364,14 +6594,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-const _excluded$g = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+const _excluded$d = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   let {
       shouldHandleBottomNotch = true,
       hasSeparator = true,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   const {
     bottom
   } = useSafeAreaInsets();
@@ -6522,7 +6752,7 @@ function FullscreenModalAnimation({
   });
 }
 
-const _excluded$f = ["children", "visible", "onClose", "onExited"];
+const _excluded$c = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   let {
       children,
@@ -6530,7 +6760,7 @@ function FullscreenModalBehaviour(_ref) {
       onClose,
       onExited
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   const [isModalBehaviourVisible, setIsModalBehaviourVisible] = useState(visible);
   useEffect(() => {
     if (visible === true) {
@@ -6575,7 +6805,7 @@ function FullscreenModalContainer({
   });
 }
 
-const _excluded$e = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+const _excluded$b = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   let {
       hasSeparator = true,
@@ -6586,7 +6816,7 @@ function FullscreenModalHeader(_ref) {
       left,
       shouldHandleTopNotch = true
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   const {
     top
   } = useSafeAreaInsets();
@@ -6894,7 +7124,7 @@ function Highlight({
 // eslint-disable-next-line no-restricted-imports
 const useBreakpointValue = useBreakpointValue$1;
 
-const _excluded$d = ["color", "isDisabled"];
+const _excluded$a = ["color", "isDisabled"];
 function getBackgroundColor(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -6914,7 +7144,7 @@ function Background(_ref) {
       color,
       isDisabled
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -7114,95 +7344,6 @@ function useKittMapConfig() {
   return context;
 }
 
-const _excluded$c = ["children"];
-function ListItemContent(_ref) {
-  let {
-      children
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    alignSelf: "center",
-    flexBasis: "0%",
-    flexGrow: 1,
-    flexShrink: 0
-  }, rest), {}, {
-    children: children
-  }));
-}
-
-const _excluded$b = ["children", "side"],
-  _excluded2$2 = ["children", "align"];
-// Handles the vertical alignment of the side elements of the list item
-function ListItemSideContainer(_ref) {
-  let {
-      children,
-      side = 'left'
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$b);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    flexDirection: "row",
-    marginLeft: side === 'right' ? 'kitt.2' : undefined,
-    marginRight: side === 'left' ? 'kitt.2' : undefined
-  }, rest), {}, {
-    children: children
-  }));
-}
-function ListItemSideContent(_ref2) {
-  let {
-      children,
-      align = 'auto'
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded2$2);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    alignSelf: align
-  }, rest), {}, {
-    children: children
-  }));
-}
-
-const _excluded$a = ["children", "withPadding", "borders", "left", "right", "onPress"];
-function ListItem(_ref) {
-  let {
-      children,
-      withPadding,
-      borders,
-      left,
-      right,
-      onPress
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
-  const Wrapper = onPress ? Pressable$2 : Fragment$1;
-  const wrapperProps = onPress ? _objectSpread({
-    accessibilityRole: 'button',
-    onPress
-  }, rest) : undefined;
-  const containerProps = onPress ? undefined : rest;
-  return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-    children: /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({
-      flexDirection: "row",
-      paddingX: withPadding ? 'kitt.listItem.horizontalPadding' : undefined,
-      paddingY: withPadding ? 'kitt.listItem.verticalPadding' : undefined,
-      borderColor: "kitt.listItem.borderColor",
-      backgroundColor: "kitt.uiBackgroundLight",
-      borderTopWidth: borders === 'top' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined,
-      borderBottomWidth: borders === 'bottom' || borders === 'both' ? 'kitt.listItem.borderWidth' : undefined
-    }, containerProps), {}, {
-      children: [left ? /*#__PURE__*/jsx(ListItemSideContainer, {
-        side: "left",
-        children: left
-      }) : null, /*#__PURE__*/jsx(ListItemContent, {
-        children: children
-      }), right ? /*#__PURE__*/jsx(ListItemSideContainer, {
-        side: "right",
-        children: right
-      }) : null]
-    }))
-  }));
-}
-ListItem.Content = ListItemContent;
-ListItem.SideContent = ListItemSideContent;
-ListItem.SideContainer = ListItemSideContainer;
-
 const SvgMarkerLargeinline = props => /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
   fill: "currentColor",
   viewBox: "0 0 54 56",
@@ -7662,48 +7803,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             }
           }
         },
-        tag: {
-          primary: {
-            fill: {
-              backgroundColor: theme.tag.primary.fill.backgroundColor,
-              borderColor: theme.tag.primary.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.primary.outline.backgroundColor,
-              borderColor: theme.tag.primary.outline.borderColor
-            }
-          },
-          default: {
-            fill: {
-              backgroundColor: theme.tag.default.fill.backgroundColor,
-              borderColor: theme.tag.default.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.default.outline.backgroundColor,
-              borderColor: theme.tag.default.outline.borderColor
-            }
-          },
-          danger: {
-            fill: {
-              backgroundColor: theme.tag.danger.fill.backgroundColor,
-              borderColor: theme.tag.danger.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.danger.outline.backgroundColor,
-              borderColor: theme.tag.danger.outline.borderColor
-            }
-          },
-          warn: {
-            fill: {
-              backgroundColor: theme.tag.warn.fill.backgroundColor,
-              borderColor: theme.tag.warn.fill.borderColor
-            },
-            outline: {
-              backgroundColor: theme.tag.warn.outline.backgroundColor,
-              borderColor: theme.tag.warn.outline.borderColor
-            }
-          }
-        },
         tooltip: {
           backgroundColor: theme.tooltip.backgroundColor
         },
@@ -8191,37 +8290,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderWidth: theme.listItem.borderWidth
         },
         tag: {
-          primary: {
-            fill: {
-              borderWidth: theme.tag.primary.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.primary.outline.borderWidth
-            }
-          },
-          default: {
-            fill: {
-              borderWidth: theme.tag.default.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.default.outline.borderWidth
-            }
-          },
-          danger: {
-            fill: {
-              borderWidth: theme.tag.danger.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.danger.outline.borderWidth
-            }
+          fill: {
+            borderWidth: theme.tag.fill.borderWidth
           },
-          warn: {
-            fill: {
-              borderWidth: theme.tag.warn.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.warn.outline.borderWidth
-            }
+          outline: {
+            borderWidth: theme.tag.outline.borderWidth
           }
         }
       },
@@ -8316,6 +8389,39 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         pageLoader: {
           size: theme.pageLoader.size
         },
+        tag: {
+          small: {
+            iconSize: theme.tag.icon.small
+          },
+          medium: {
+            iconSize: theme.tag.icon.medium
+          },
+          large: {
+            iconSize: theme.tag.icon.large
+          },
+          withIcon: {
+            small: {
+              height: theme.tag.withIcon.small.height
+            },
+            medium: {
+              height: theme.tag.withIcon.medium.height
+            },
+            large: {
+              height: theme.tag.withIcon.large.height
+            }
+          },
+          withoutIcon: {
+            small: {
+              height: theme.tag.withoutIcon.small.height
+            },
+            medium: {
+              height: theme.tag.withoutIcon.medium.height
+            },
+            large: {
+              height: theme.tag.withoutIcon.large.height
+            }
+          }
+        },
         tooltip: {
           maxWidth: theme.tooltip.maxWidth,
           arrow: {
@@ -8405,8 +8511,34 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           horizontalPadding: theme.listItem.horizontalPadding
         },
         tag: {
-          verticalPadding: theme.tag.verticalPadding,
-          horizontalPadding: theme.tag.horizontalPadding
+          withoutIcon: {
+            small: {
+              paddingLeft: theme.tag.withoutIcon.small.paddingLeft,
+              paddingRight: theme.tag.withoutIcon.small.paddingRight
+            },
+            medium: {
+              paddingLeft: theme.tag.withoutIcon.medium.paddingLeft,
+              paddingRight: theme.tag.withoutIcon.medium.paddingRight
+            },
+            large: {
+              paddingLeft: theme.tag.withoutIcon.large.paddingLeft,
+              paddingRight: theme.tag.withoutIcon.large.paddingRight
+            }
+          },
+          withIcon: {
+            small: {
+              paddingLeft: theme.tag.withIcon.small.paddingLeft,
+              paddingRight: theme.tag.withIcon.small.paddingRight
+            },
+            medium: {
+              paddingLeft: theme.tag.withIcon.medium.paddingLeft,
+              paddingRight: theme.tag.withIcon.medium.paddingRight
+            },
+            large: {
+              paddingLeft: theme.tag.withIcon.large.paddingLeft,
+              paddingRight: theme.tag.withIcon.large.paddingRight
+            }
+          }
         },
         tooltip: {
           horizontalPadding: theme.tooltip.horizontalPadding,
@@ -10390,48 +10522,68 @@ const StoryGrid = {
   Col: StoryGridCol
 };
 
-const getLabelColor = (type, variant) => {
+function useKittTheme() {
+  return useMemo(() => {
+    return {
+      kitt: theme
+    };
+  }, []);
+}
+
+const getTypography = size => {
+  switch (size) {
+    case 'small':
+      return 'body-xs';
+    case 'medium':
+      return 'body-s';
+    case 'large':
+    default:
+      return 'body-m';
+  }
+};
+const typeToColor = (color, type) => {
+  if (color) return color;
   switch (type) {
-    case 'danger':
-      {
-        return variant === 'outline' ? 'danger' : 'black';
-      }
-    case 'warn':
-      {
-        return variant === 'outline' ? 'warning' : 'black';
-      }
     case 'primary':
-      {
-        return 'primary';
-      }
+      return 'violine';
+    case 'warn':
+      return 'sun';
+    case 'danger':
+      return 'coral';
     case 'default':
-      {
-        return 'black';
-      }
     default:
-      {
-        return 'black';
-      }
+      return 'eggshell';
   }
 };
 function Tag({
   label,
-  type = 'default',
+  icon,
+  color,
+  type,
+  size = 'medium',
   variant = 'fill'
 }) {
-  return /*#__PURE__*/jsx(View, {
+  const kittTheme = useKittTheme();
+  const tagColor = typeToColor(color, type);
+  return /*#__PURE__*/jsxs(HStack, {
     alignSelf: "flex-start",
     borderRadius: "kitt.tag.borderRadius",
-    paddingX: "kitt.tag.horizontalPadding",
-    paddingY: "kitt.tag.verticalPadding",
-    backgroundColor: `kitt.tag.${type}.${variant}.backgroundColor`,
-    borderColor: `kitt.tag.${type}.${variant}.borderColor`,
-    borderWidth: `kitt.tag.${type}.${variant}.borderWidth`,
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
+    height: `kitt.tag.${icon ? 'withIcon' : 'withoutIcon'}.${size}.height`,
+    paddingLeft: `kitt.tag.${icon ? 'withIcon' : 'withoutIcon'}.${size}.paddingLeft`,
+    paddingRight: `kitt.tag.${icon ? 'withIcon' : 'withoutIcon'}.${size}.paddingRight`,
+    backgroundColor: variant === 'fill' ? kittTheme.kitt.palettes.lateOcean[`${tagColor}.4`] : 'kitt.transparent',
+    borderColor: kittTheme.kitt.palettes.lateOcean[`${tagColor}.6`],
+    borderWidth: `kitt.tag.${variant}.borderWidth`,
+    space: "kitt.1",
+    alignItems: "center",
+    children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
+      icon: icon,
+      size: `kitt.tag.${size}.iconSize`
+    }) : null, /*#__PURE__*/jsx(Typography.Text, {
+      base: getTypography(size),
+      color: "black",
       children: label
-    })
+    })]
   });
 }
 
@@ -11003,14 +11155,6 @@ function TypographyLink(_ref) {
   });
 }
 
-function useKittTheme() {
-  return useMemo(() => {
-    return {
-      kitt: theme
-    };
-  }, []);
-}
-
 function KittThemeProvider({
   isSSR,
   children,
@@ -11243,5 +11387,5 @@ function VerticalSteps(_ref) {
 }
 VerticalSteps.Step = ExternalStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, FlatList as NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-metro.es.android.js.map