@ornikar/kitt-universal 23.2.7 → 23.4.0

package/dist/index.es.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 _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -15,7 +15,7 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 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';
@@ -23,6 +23,8 @@ import { CaretUpFillIcon, CaretDownFillIcon, EyeClosedRegularIcon, EyeRegularIco
 import Downshift from 'downshift';
 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 Svg, { Circle as Circle$1 } from 'react-native-svg';
@@ -1659,57 +1661,51 @@ var skeleton = {
 };
 
 var 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
   }
 };
 
@@ -1907,7 +1903,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$M = ["children", "variant", "borderVariant", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$N = ["children", "variant", "borderVariant", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -1918,7 +1914,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       variant: variant,
@@ -2142,7 +2138,7 @@ var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInCon
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$L = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$M = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -2196,7 +2192,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$L);
+    otherProps = _objectWithoutProperties(_ref, _excluded$M);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -2307,7 +2303,7 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$K = ["color", "size"],
+var _excluded$L = ["color", "size"],
   _excluded2$5 = ["color"];
 function getIconSizeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
@@ -2328,7 +2324,7 @@ function createNativeBaseIconSize(type) {
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$L);
   var ancestorType = useTypographyAncestorType();
   var iconSize = size || (ancestorType ? createNativeBaseIconSize(ancestorType) : undefined);
   var colorValue = getTypographyColorValue(color);
@@ -2377,7 +2373,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$J = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$K = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -2452,7 +2448,7 @@ function ButtonContent(_ref3) {
     isHovered = _ref3.isHovered,
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
-    var props = _objectWithoutProperties(_ref3, _excluded$J);
+    var props = _objectWithoutProperties(_ref3, _excluded$K);
   var color = isDisabled ? 'black-light' : getButtonTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -2745,7 +2741,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$I = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$J = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -2756,7 +2752,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -2829,7 +2825,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$H = ["children", "layout", "reversed"];
+var _excluded$I = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -2858,7 +2854,7 @@ function Actions(_ref) {
   var children = _ref.children,
     layout = _ref.layout,
     reversed = _ref.reversed,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
   var currentAlignSelf = getCurrentAlignSelf(layout);
@@ -2907,7 +2903,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$G = ["size", "round", "light", "sizeVariant"];
+var _excluded$H = ["size", "round", "light", "sizeVariant"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -2946,7 +2942,7 @@ function Avatar(_ref2) {
     round = _ref2.round,
     light = _ref2.light,
     sizeVariant = _ref2.sizeVariant,
-    props = _objectWithoutProperties(_ref2, _excluded$G);
+    props = _objectWithoutProperties(_ref2, _excluded$H);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -3292,13 +3288,13 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$F = ["children", "visible", "onClose", "onExited"];
+var _excluded$G = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3323,7 +3319,7 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$E = ["children", "paddingX", "paddingY"];
+var _excluded$F = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -3333,7 +3329,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -3345,7 +3341,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$D = ["children", "padding", "hasSeparator"];
+var _excluded$E = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -3355,7 +3351,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -3369,7 +3365,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$C = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$D = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -3382,7 +3378,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -3420,7 +3416,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$B = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$C = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -3431,7 +3427,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -3648,10 +3644,10 @@ function ChoiceItemContainer(_ref) {
   });
 }
 
-var _excluded$A = ["direction"];
+var _excluded$B = ["direction"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -3876,13 +3872,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$z = ["children", "visible", "onClose", "onExited"];
+var _excluded$A = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3913,7 +3909,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$y = ["stretch"];
+var _excluded$z = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -3953,7 +3949,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$y);
+    props = _objectWithoutProperties(_ref2, _excluded$z);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -3990,7 +3986,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$x = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$y = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$4 = ["phoneNumber", "children"],
   _excluded3$3 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -4000,7 +3996,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$x);
+    rest = _objectWithoutProperties(_ref, _excluded$y);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -4126,7 +4122,7 @@ function useOpenExternalLink() {
   }();
 }
 
-var _excluded$w = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+var _excluded$x = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
@@ -4135,7 +4131,7 @@ function ExternalLink(_ref) {
     onPress = _ref.onPress,
     _ref$onOpenLinkError = _ref.onOpenLinkError,
     onOpenLinkError = _ref$onOpenLinkError === void 0 ? console.error : _ref$onOpenLinkError,
-    rest = _objectWithoutProperties(_ref, _excluded$w);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
@@ -4192,7 +4188,7 @@ function InputTextContainer(_ref) {
   });
 }
 
-var _excluded$v = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "onSubmitEditing"];
+var _excluded$w = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -4212,7 +4208,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputMode = _ref$inputMode === void 0 ? 'text' : _ref$inputMode,
     multiline = _ref.multiline,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -4329,10 +4325,10 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$u = ["children"];
+var _excluded$v = ["children"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -4344,7 +4340,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-var _excluded$t = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex"],
+var _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"];
@@ -4383,7 +4379,7 @@ function Autocomplete(_ref) {
     listContainerTestID = _ref$listContainerTes === void 0 ? 'kitt.Autocomplete.listContainer' : _ref$listContainerTes,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -4922,7 +4918,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$s = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$t = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -4940,7 +4936,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$s);
+    _objectWithoutProperties(_ref, _excluded$t);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -5152,7 +5148,7 @@ var PressableDateInputs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$r = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+var _excluded$s = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -5161,7 +5157,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDefaultVisible = _ref.isDefaultVisible,
     value = _ref.value,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -5237,7 +5233,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$q = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$r = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
@@ -5255,7 +5251,7 @@ function ModalPlatformDateTimePicker(_ref2) {
     validateButtonLabel = _ref2.validateButtonLabel,
     onClose = _ref2.onClose,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$q);
+    props = _objectWithoutProperties(_ref2, _excluded$r);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -5301,7 +5297,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$p = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+var _excluded$q = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
 var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -5315,7 +5311,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var _useState = useState(isDefaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isPickerUIVisible = _useState2[0],
@@ -5362,7 +5358,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$o = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+var _excluded$p = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -5370,7 +5366,7 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pickerDefaultDate = _ref.pickerDefaultDate,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -5392,14 +5388,14 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$n = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
+var _excluded$o = ["fillMode", "enterKeyHint", "value", "onSubmitEditing"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$fillMode = _ref.fillMode,
     fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     enterKeyHint = _ref.enterKeyHint,
     value = _ref.value,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -5418,6 +5414,272 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
+function DocumentPicker(_ref) {
+  var onDocumentUpload = _ref.onDocumentUpload,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    documentPickerOptions = _ref.documentPickerOptions;
+  var childElement = Children.only(children);
+  var handlePickDocument = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _childElement$props$o, _childElement$props;
+      var result;
+      return _regeneratorRuntime().wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!disabled) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
+            _context.next = 5;
+            return getDocumentAsync(_objectSpread(_objectSpread({}, documentPickerOptions), {}, {
+              multiple: false
+            }));
+          case 5:
+            result = _context.sent;
+            if (!result.canceled && result.assets[0].file) {
+              onDocumentUpload(result.assets[0].file);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function () {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  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: handlePickDocument,
+    disabled: disabled
+  });
+}
+
+function ImagePicker(_ref) {
+  var onImageSelected = _ref.onImageSelected,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    imagePickerOptions = _ref.imagePickerOptions;
+  var childElement = Children.only(children);
+  var handlePickImage = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _childElement$props$o, _childElement$props;
+      var result;
+      return _regeneratorRuntime().wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!disabled) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            (_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
+            _context.next = 5;
+            return launchImageLibraryAsync(_objectSpread(_objectSpread({}, imagePickerOptions), {}, {
+              allowsMultipleSelection: false
+            }));
+          case 5:
+            result = _context.sent;
+            if (!result.canceled) {
+              onImageSelected(result.assets[0]);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function () {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/jsx(View, {
+    children: /*#__PURE__*/cloneElement(childElement, {
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onPress: handlePickImage,
+      disabled: disabled
+    })
+  });
+}
+
+var _excluded$n = ["children"];
+function ListItemContent(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded$n);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    alignSelf: "center",
+    flexBasis: "0%",
+    flexGrow: 1,
+    flexShrink: 0
+  }, rest), {}, {
+    children: children
+  }));
+}
+
+var _excluded$m = ["children", "side"],
+  _excluded2$2 = ["children", "align"];
+// Handles the vertical alignment of the side elements of the list item
+function ListItemSideContainer(_ref) {
+  var children = _ref.children,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'left' : _ref$side,
+    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) {
+  var children = _ref2.children,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? 'auto' : _ref2$align,
+    rest = _objectWithoutProperties(_ref2, _excluded2$2);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    alignSelf: align
+  }, rest), {}, {
+    children: children
+  }));
+}
+
+var _excluded$l = ["children", "withPadding", "borders", "left", "right", "onPress"];
+function ListItem(_ref) {
+  var children = _ref.children,
+    withPadding = _ref.withPadding,
+    borders = _ref.borders,
+    left = _ref.left,
+    right = _ref.right,
+    onPress = _ref.onPress,
+    rest = _objectWithoutProperties(_ref, _excluded$l);
+  var Wrapper = onPress ? Pressable$2 : Fragment$1;
+  var wrapperProps = onPress ? _objectSpread({
+    accessibilityRole: 'button',
+    onPress: onPress
+  }, rest) : undefined;
+  var 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;
+
+var _excluded$k = ["title"];
+function BottomSheetActionsItem(_ref) {
+  var title = _ref.title,
+    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(_ref) {
+  var onBottomSheetActionsChange = _ref.onBottomSheetActionsChange,
+    imagePickerOptions = _ref.imagePickerOptions,
+    documentPickerOptions = _ref.documentPickerOptions,
+    disabled = _ref.disabled;
+  var 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: isPlatformIOS
+          }
+        })
+      })
+    }), /*#__PURE__*/jsx(DocumentPicker, {
+      disabled: disabled,
+      documentPickerOptions: documentPickerOptions,
+      onDocumentUpload: onBottomSheetActionsChange,
+      children: /*#__PURE__*/jsx(BottomSheetActionsItem, {
+        title: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "account.BottomSheetActions.openFileExplorer",
+          values: {
+            isPlatformIOS: isPlatformIOS
+          }
+        })
+      })
+    })]
+  });
+}
+
+function FilePicker(_ref) {
+  var onFileSelected = _ref.onFileSelected,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    imagePickerOptions = _ref.imagePickerOptions,
+    documentPickerOptions = _ref.documentPickerOptions;
+  var childElement = Children.only(children);
+  var _useStaticBottomSheet = useStaticBottomSheet(BottomSheetActions),
+    bottomSheetRef = _useStaticBottomSheet.bottomSheetRef,
+    BottomSheet = _useStaticBottomSheet.BottomSheet;
+  var _useBottomSheetModal = useBottomSheetModal(),
+    dismissAll = _useBottomSheetModal.dismissAll;
+  var handleBottomSheetActionsChange = function (file) {
+    dismissAll();
+    onFileSelected(file);
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/cloneElement(childElement, {
+      // ensure that the press event is not prevented by Button component
+      onPress: function 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: imagePickerOptions,
+          documentPickerOptions: documentPickerOptions
+        });
+      },
+      disabled: disabled
+    }), /*#__PURE__*/jsx(BottomSheet, {})]
+  });
+}
+
 var GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
 function GoogleMapsApiKeyProvider(_ref) {
   var children = _ref.children,
@@ -5878,7 +6140,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$m = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$j = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -5886,7 +6148,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -5976,10 +6238,10 @@ function InputField(_ref) {
   });
 }
 
-var _excluded$l = ["onChange"];
+var _excluded$i = ["onChange"];
 var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
@@ -5996,11 +6258,11 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$k = ["isPasswordDefaultVisible", "right"];
+var _excluded$h = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -6028,7 +6290,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$j = ["enterKeyHint", "autoComplete", "phoneNumberLength", "value", "onChange"];
+var _excluded$g = ["enterKeyHint", "autoComplete", "phoneNumberLength", "value", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -6043,7 +6305,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     phoneNumberLength = _ref$phoneNumberLengt === void 0 ? 10 : _ref$phoneNumberLengt,
     value = _ref.value,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -6478,7 +6740,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$i = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$f = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -6491,7 +6753,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$i);
+    props = _objectWithoutProperties(_ref2, _excluded$f);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -6533,13 +6795,13 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$h = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$e = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -6556,14 +6818,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$g = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$d = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   var _ref$shouldHandleBott = _ref.shouldHandleBottomNotch,
     shouldHandleBottomNotch = _ref$shouldHandleBott === void 0 ? true : _ref$shouldHandleBott,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -6721,13 +6983,13 @@ function FullscreenModalAnimation(_ref) {
   });
 }
 
-var _excluded$f = ["children", "visible", "onClose", "onExited"];
+var _excluded$c = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -6774,7 +7036,7 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$e = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+var _excluded$b = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   var _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
@@ -6785,7 +7047,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -7098,7 +7360,7 @@ function Highlight(_ref) {
 // eslint-disable-next-line no-restricted-imports
 var useBreakpointValue = useBreakpointValue$1;
 
-var _excluded$d = ["color", "isDisabled"];
+var _excluded$a = ["color", "isDisabled"];
 function getBackgroundColor(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -7116,7 +7378,7 @@ function getBackgroundColor(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -7313,89 +7575,6 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$c = ["children"];
-function ListItemContent(_ref) {
-  var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    alignSelf: "center",
-    flexBasis: "0%",
-    flexGrow: 1,
-    flexShrink: 0
-  }, rest), {}, {
-    children: children
-  }));
-}
-
-var _excluded$b = ["children", "side"],
-  _excluded2$2 = ["children", "align"];
-// Handles the vertical alignment of the side elements of the list item
-function ListItemSideContainer(_ref) {
-  var children = _ref.children,
-    _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'left' : _ref$side,
-    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) {
-  var children = _ref2.children,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? 'auto' : _ref2$align,
-    rest = _objectWithoutProperties(_ref2, _excluded2$2);
-  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
-    alignSelf: align
-  }, rest), {}, {
-    children: children
-  }));
-}
-
-var _excluded$a = ["children", "withPadding", "borders", "left", "right", "onPress"];
-function ListItem(_ref) {
-  var children = _ref.children,
-    withPadding = _ref.withPadding,
-    borders = _ref.borders,
-    left = _ref.left,
-    right = _ref.right,
-    onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
-  var Wrapper = onPress ? Pressable$2 : Fragment$1;
-  var wrapperProps = onPress ? _objectSpread({
-    accessibilityRole: 'button',
-    onPress: onPress
-  }, rest) : undefined;
-  var 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;
-
 var SvgMarkerLargeinline = function SvgMarkerLargeinline(props) {
   return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
     fill: "currentColor",
@@ -7927,48 +8106,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
         },
@@ -8456,37 +8593,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
-            }
+          fill: {
+            borderWidth: theme.tag.fill.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
-            }
-          },
-          warn: {
-            fill: {
-              borderWidth: theme.tag.warn.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.warn.outline.borderWidth
-            }
+          outline: {
+            borderWidth: theme.tag.outline.borderWidth
           }
         }
       },
@@ -8581,6 +8692,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: {
@@ -8670,8 +8814,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,
@@ -10647,49 +10817,69 @@ var StoryGrid = {
   Col: StoryGridCol
 };
 
-var getLabelColor = function (type, variant) {
+function useKittTheme() {
+  return useMemo(function () {
+    return {
+      kitt: theme
+    };
+  }, []);
+}
+
+var getTypography = function (size) {
+  switch (size) {
+    case 'small':
+      return 'body-xs';
+    case 'medium':
+      return 'body-s';
+    case 'large':
+    default:
+      return 'body-m';
+  }
+};
+var typeToColor = function (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(_ref) {
   var label = _ref.label,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'default' : _ref$type,
+    icon = _ref.icon,
+    color = _ref.color,
+    type = _ref.type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant;
-  return /*#__PURE__*/jsx(View, {
+  var kittTheme = useKittTheme();
+  var 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.".concat(type, ".").concat(variant, ".backgroundColor"),
-    borderColor: "kitt.tag.".concat(type, ".").concat(variant, ".borderColor"),
-    borderWidth: "kitt.tag.".concat(type, ".").concat(variant, ".borderWidth"),
-    children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-xsmall",
-      color: getLabelColor(type, variant),
+    height: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".height"),
+    paddingLeft: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".paddingLeft"),
+    paddingRight: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".paddingRight"),
+    backgroundColor: variant === 'fill' ? kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".4")] : 'kitt.transparent',
+    borderColor: kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".6")],
+    borderWidth: "kitt.tag.".concat(variant, ".borderWidth"),
+    space: "kitt.1",
+    alignItems: "center",
+    children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
+      icon: icon,
+      size: "kitt.tag.".concat(size, ".iconSize")
+    }) : null, /*#__PURE__*/jsx(Typography.Text, {
+      base: getTypography(size),
+      color: "black",
       children: label
-    })
+    })]
   });
 }
 
@@ -11276,14 +11466,6 @@ function TypographyLink(_ref) {
   });
 }
 
-function useKittTheme() {
-  return useMemo(function () {
-    return {
-      kitt: theme
-    };
-  }, []);
-}
-
 function KittThemeProvider(_ref) {
   var isSSR = _ref.isSSR,
     children = _ref.children,
@@ -11509,5 +11691,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.es.js.map