@ornikar/kitt-universal 16.3.1 → 16.4.0

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

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback, createElement } from 'react';
+import React, { useContext, createContext, forwardRef, cloneElement, useRef, useEffect, useState, useMemo, Children, useReducer, useCallback, Fragment as Fragment$1, 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 _objectSpread from '@babel/runtime/helpers/objectSpread2';
@@ -8,18 +8,21 @@ import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructurin
 import _extends from '@babel/runtime/helpers/extends';
 import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSpring, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate } from 'react-native-reanimated';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Text as Text$1, Pressable as Pressable$2, useWindowDimensions, PixelRatio } from 'react-native';
+import { Platform, Animated as Animated$1, Easing, StyleSheet, Modal, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, Text as Text$1, useWindowDimensions, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
-import { ArcIcon, UserIcon, CheckboxMark, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, RotateCCWIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
+import { ArcIcon, UserIcon, ArrowUpIcon, ArrowDownIcon, CheckboxMark, MapPinIcon, EyeOffIcon, EyeIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon, XIcon, RotateCCWIcon, TooltipArrowIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
 import { BottomSheetScrollView, BottomSheetView, useBottomSheetDynamicSnapPoints, BottomSheetModal, BottomSheetHandle, BottomSheetBackdrop } 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';
+import _typeof from '@babel/runtime/helpers/typeof';
+import Downshift from 'downshift';
 import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
 import { FormattedMessage } from 'react-intl';
+import { useDebouncedCallback } from 'use-debounce';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { Picker as Picker$1 } from '@react-native-picker/picker';
@@ -748,6 +751,42 @@ var feedbackMessage = {
   }
 };
 
+var autocomplete = {
+  option: {
+    verticalPadding: 2,
+    minHeight: 40,
+    "default": {
+      backgroundColor: colors.white
+    },
+    hovered: {
+      backgroundColor: lateOceanColorPalette.black50
+    },
+    focused: {
+      backgroundColor: lateOceanColorPalette.black50
+    },
+    selected: {
+      backgroundColor: lateOceanColorPalette.black50
+    },
+    highlighted: {
+      backgroundColor: lateOceanColorPalette.black50
+    },
+    pressed: {
+      backgroundColor: lateOceanColorPalette.black100
+    }
+  },
+  optionsContainer: {
+    borderRadius: 10,
+    backgroundColor: colors.white,
+    shadow: {
+      color: colors.black,
+      offsetX: 0,
+      offsetY: 10,
+      opacity: 0.15,
+      radius: 20
+    }
+  }
+};
+
 var checkbox = {
   borderWidth: 2,
   borderRadius: 5,
@@ -1051,6 +1090,7 @@ var timePicker = {
 };
 
 var forms = {
+  autocomplete: autocomplete,
   datePicker: datePicker,
   input: input,
   radio: radio,
@@ -1796,7 +1836,7 @@ var isTypographyHeader = function (type, isHeaderTypographyInContext) {
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$I = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$L = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -1846,7 +1886,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$I);
+    otherProps = _objectWithoutProperties(_ref, _excluded$L);
   var sx = useSx();
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -1951,11 +1991,11 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$H = ["color"],
-  _excluded2$5 = ["color"];
+var _excluded$K = ["color"],
+  _excluded2$6 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   var sx = useSx();
   var colorStyle = sx({
     color: getTypographyColorValue(color)
@@ -1970,7 +2010,7 @@ function TypographyIconInheritColor(props) {
 }
 function TypographyIcon(_ref2) {
   var color = _ref2.color,
-    props = _objectWithoutProperties(_ref2, _excluded2$5);
+    props = _objectWithoutProperties(_ref2, _excluded2$6);
   if (color) {
     return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread({
       color: color
@@ -1999,7 +2039,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$G = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$J = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -2074,7 +2114,7 @@ function ButtonContent(_ref3) {
     isHovered = _ref3.isHovered,
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
-    var props = _objectWithoutProperties(_ref3, _excluded$G);
+    var props = _objectWithoutProperties(_ref3, _excluded$J);
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -2380,7 +2420,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$F = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$I = ["as", "onPress", "disabled", "icon", "stretch"];
 function ActionsItem(_ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -2391,7 +2431,7 @@ function ActionsItem(_ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -2462,7 +2502,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$E = ["children", "layout", "reversed"];
+var _excluded$H = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -2491,7 +2531,7 @@ function Actions(_ref) {
   var children = _ref.children,
     layout = _ref.layout,
     reversed = _ref.reversed,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
   var currentAlignSelf = getCurrentAlignSelf(layout);
@@ -2540,7 +2580,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$D = ["size", "round", "light", "sizeVariant"];
+var _excluded$G = ["size", "round", "light", "sizeVariant"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -2579,7 +2619,7 @@ function Avatar(_ref2) {
     round = _ref2.round,
     light = _ref2.light,
     sizeVariant = _ref2.sizeVariant,
-    props = _objectWithoutProperties(_ref2, _excluded$D);
+    props = _objectWithoutProperties(_ref2, _excluded$G);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -2990,11 +3030,11 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$C = ["children"],
-  _excluded2$4 = ["children", "visible", "onClose", "onExited"];
+var _excluded$F = ["children"],
+  _excluded2$5 = ["children", "visible", "onClose", "onExited"];
 function CardModalScrollContainer(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   if (Platform.OS !== 'web') {
     return /*#__PURE__*/jsx(View, {
       children: children
@@ -3009,7 +3049,7 @@ function CardModalBehaviour(_ref2) {
     visible = _ref2.visible,
     onClose = _ref2.onClose,
     onExited = _ref2.onExited,
-    props = _objectWithoutProperties(_ref2, _excluded2$4);
+    props = _objectWithoutProperties(_ref2, _excluded2$5);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3040,7 +3080,7 @@ function CardModalBehaviour(_ref2) {
   });
 }
 
-var _excluded$B = ["children", "paddingX", "paddingY"];
+var _excluded$E = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -3050,7 +3090,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: paddingX,
     paddingY: paddingY
@@ -3059,7 +3099,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$A = ["children", "padding", "hasSeparator"];
+var _excluded$D = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -3069,7 +3109,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -3083,7 +3123,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$z = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$C = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -3096,7 +3136,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -3134,7 +3174,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$y = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$B = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -3145,7 +3185,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -3164,7 +3204,7 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$3(_ref) {
+function getBackgroundColor$4(_ref) {
   var isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
@@ -3196,7 +3236,7 @@ function AnimatedChoiceItemView(_ref) {
   var style = sx({
     position: 'relative',
     borderRadius: getBorderRadius(variant),
-    backgroundColor: getBackgroundColor$3({
+    backgroundColor: getBackgroundColor$4({
       isDisabled: isDisabled,
       isSelected: isSelected,
       isHovered: isHovered,
@@ -3403,10 +3443,10 @@ function ChoiceItemContainer(_ref) {
   });
 }
 
-var _excluded$x = ["direction"];
+var _excluded$A = ["direction"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -3700,13 +3740,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$w = ["children", "visible", "onClose", "onExited"];
+var _excluded$z = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3737,7 +3777,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$v = ["stretch"];
+var _excluded$y = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -3778,7 +3818,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$v);
+    props = _objectWithoutProperties(_ref2, _excluded$y);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -3815,17 +3855,17 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$u = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
-  _excluded2$3 = ["phoneNumber", "children"],
-  _excluded3$2 = ["phoneNumber", "children"],
-  _excluded4$1 = ["emailAddress", "children"];
+var _excluded$x = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+  _excluded2$4 = ["phoneNumber", "children"],
+  _excluded3$3 = ["phoneNumber", "children"],
+  _excluded4$3 = ["emailAddress", "children"];
 function ExternalAppLink(_ref) {
   var Component = _ref.as,
     appScheme = _ref.appScheme,
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$u);
+    rest = _objectWithoutProperties(_ref, _excluded$x);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -3887,7 +3927,7 @@ function ExternalAppLink(_ref) {
 ExternalAppLink.Sms = function (_ref3) {
   var phoneNumber = _ref3.phoneNumber,
     children = _ref3.children,
-    rest = _objectWithoutProperties(_ref3, _excluded2$3);
+    rest = _objectWithoutProperties(_ref3, _excluded2$4);
   return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
     appScheme: "sms",
     appValue: phoneNumber,
@@ -3897,7 +3937,7 @@ ExternalAppLink.Sms = function (_ref3) {
 ExternalAppLink.Tel = function (_ref4) {
   var phoneNumber = _ref4.phoneNumber,
     children = _ref4.children,
-    rest = _objectWithoutProperties(_ref4, _excluded3$2);
+    rest = _objectWithoutProperties(_ref4, _excluded3$3);
   return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
     appScheme: "tel",
     appValue: phoneNumber,
@@ -3907,7 +3947,7 @@ ExternalAppLink.Tel = function (_ref4) {
 ExternalAppLink.Mail = function (_ref5) {
   var emailAddress = _ref5.emailAddress,
     children = _ref5.children,
-    rest = _objectWithoutProperties(_ref5, _excluded4$1);
+    rest = _objectWithoutProperties(_ref5, _excluded4$3);
   return /*#__PURE__*/jsx(ExternalAppLink, _objectSpread(_objectSpread({}, rest), {}, {
     appScheme: "mailto",
     appValue: emailAddress,
@@ -3920,7 +3960,7 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$t = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
+var _excluded$w = ["as", "href", "openLinkBehavior", "onPress", "onOpenLinkError"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
@@ -3929,7 +3969,7 @@ function ExternalLink(_ref) {
     onPress = _ref.onPress,
     _ref$onOpenLinkError = _ref.onOpenLinkError,
     onOpenLinkError = _ref$onOpenLinkError === void 0 ? console.error : _ref$onOpenLinkError,
-    rest = _objectWithoutProperties(_ref, _excluded$t);
+    rest = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress(e) {
       if (onPress) {
@@ -3958,6 +3998,404 @@ function ExternalLink(_ref) {
   }));
 }
 
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+    case 'valid':
+      return 'success';
+    default:
+      return undefined;
+  }
+}
+function InputIcon(_ref) {
+  var icon = _ref.icon,
+    state = _ref.state,
+    disabled = _ref.disabled;
+  var theme = useTheme();
+  var color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
+
+function InputPressable(_ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
+}
+
+function InputTextContainer(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx(View, {
+    position: "relative",
+    children: children
+  });
+}
+
+var _excluded$v = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    right = _ref.right;
+    _ref.state;
+    var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    internalForceState = _ref.internalForceState,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$autoCorrect = _ref.autoCorrect,
+    autoCorrect = _ref$autoCorrect === void 0 ? true : _ref$autoCorrect,
+    _ref$textContentType = _ref.textContentType,
+    textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+    _ref$keyboardType = _ref.keyboardType,
+    keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
+    multiline = _ref.multiline,
+    onSubmitEditing = _ref.onSubmitEditing,
+    props = _objectWithoutProperties(_ref, _excluded$v);
+  var theme = useTheme();
+  var fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
+  });
+  var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
+  return /*#__PURE__*/jsxs(InputTextContainer, {
+    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
+      ref: ref,
+      multiline: multiline,
+      nativeID: id,
+      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
+      keyboardType: keyboardType,
+      autoComplete: autoComplete,
+      autoCorrect: autoCorrect,
+      textContentType: textContentType,
+      fontSize: fontSizeForNativeBase,
+      lineHeight:
+      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && Platform.OS !== 'web' ? 0 : undefined,
+      variant: variant
+    }, props), {}, {
+      onSubmitEditing: multiline ? function () {
+        return null;
+      } : onSubmitEditing
+    })), right ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
+      children: right
+    }) : null]
+  });
+});
+
+function getBackgroundColor$3(_ref) {
+  var isSelected = _ref.isSelected,
+    isHighlighted = _ref.isHighlighted,
+    isPressed = _ref.isPressed,
+    isHovered = _ref.isHovered,
+    isFocused = _ref.isFocused;
+  var baseKey = 'kitt.forms.autocomplete.option';
+  if (isHighlighted) {
+    return "".concat(baseKey, ".highlighted.backgroundColor");
+  }
+  if (isPressed) {
+    return "".concat(baseKey, ".pressed.backgroundColor");
+  }
+  if (isHovered) {
+    return "".concat(baseKey, ".hovered.backgroundColor");
+  }
+  if (isFocused) {
+    return "".concat(baseKey, ".focused.backgroundColor");
+  }
+  if (isSelected) {
+    return "".concat(baseKey, ".selected.backgroundColor");
+  }
+  return "".concat(baseKey, ".default.backgroundColor");
+}
+function AutocompleteItem(_ref2) {
+  var children = _ref2.children,
+    isSelected = _ref2.isSelected,
+    isHighlighted = _ref2.isHighlighted,
+    isHovered = _ref2.isHovered,
+    isFocused = _ref2.isFocused,
+    isPressed = _ref2.isPressed;
+  return /*#__PURE__*/jsx(View, {
+    justifyContent: "center",
+    width: "100%",
+    minHeight: "kitt.forms.autocomplete.option.minHeight",
+    borderRadius: "kitt.1",
+    padding: "kitt.1",
+    backgroundColor: getBackgroundColor$3({
+      isSelected: isSelected,
+      isHighlighted: isHighlighted,
+      isPressed: isPressed,
+      isHovered: isHovered,
+      isFocused: isFocused
+    }),
+    children: children
+  });
+}
+
+function AutocompleteItemsListContainer(_ref) {
+  var testID = _ref.testID,
+    children = _ref.children,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex;
+  return /*#__PURE__*/jsx(View, {
+    testID: testID,
+    zIndex: zIndex,
+    top: "kitt.2",
+    left: 0,
+    position: "absolute",
+    flexGrow: 1,
+    width: "100%",
+    paddingY: "kitt.2",
+    borderRadius: "kitt.forms.autocomplete.optionsContainer.borderRadius",
+    backgroundColor: "kitt.forms.autocomplete.optionsContainer.backgroundColor",
+    shadow: "kitt.forms.autocomplete.optionsContainer.shadow",
+    _android: {
+      style: {
+        elevation: 2
+      }
+    },
+    children: children
+  });
+}
+
+var _excluded$u = ["children"];
+function AutocompleteOption(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$u);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    paddingX: {
+      base: 'kitt.2',
+      small: 'kitt.4'
+    },
+    paddingY: "kitt.forms.autocomplete.option.verticalPadding"
+  }, props), {}, {
+    children: children
+  }));
+}
+
+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"],
+  _excluded2$3 = ["onClick", "onPress"],
+  _excluded3$2 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
+  _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
+function patchNativeEvent(event) {
+  return event || {
+    preventDownshiftDefault: false,
+    preventDefault: function preventDefault() {}
+  };
+}
+function isReactElement(element) {
+  return _typeof(element) === 'object' && element !== null && 'type' in element && 'props' in element;
+}
+function Autocomplete(_ref) {
+  var _children = _ref.children,
+    name = _ref.name,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    isInitialOpen = _ref.isInitialOpen,
+    initialValue = _ref.initialValue,
+    containerProps = _ref.containerProps,
+    filterItemBasedOnCurrentInputValue = _ref.filterItemBasedOnCurrentInputValue,
+    checkSelectedItem = _ref.checkSelectedItem,
+    itemToString = _ref.itemToString,
+    right = _ref.right,
+    _onChange = _ref.onChange,
+    _onFocus = _ref.onFocus,
+    _onBlur = _ref.onBlur,
+    onInputChange = _ref.onInputChange,
+    onSelectItem = _ref.onSelectItem,
+    onOuterPress = _ref.onOuterPress,
+    errorElement = _ref.errorElement,
+    emptyResultsElement = _ref.emptyResultsElement,
+    _ref$inputTestID = _ref.inputTestID,
+    inputTestID = _ref$inputTestID === void 0 ? 'kitt.Autocomplete.inputText' : _ref$inputTestID,
+    _ref$listContainerTes = _ref.listContainerTestID,
+    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);
+  var childrenArray = Children.toArray(_children);
+  var items = childrenArray.filter(isReactElement).map(function (child) {
+    return {
+      child: child,
+      item: child.props.item
+    };
+  });
+  return /*#__PURE__*/jsx(Downshift, {
+    defaultIsOpen: isInitialOpen,
+    initialSelectedItem: initialValue,
+    initialInputValue: initialValue ? itemToString(initialValue) : undefined,
+    itemToString: function handleItemToString(item) {
+      // Prevents returning null values
+      if (!itemToString) return '';
+      return itemToString(item || undefined);
+    },
+    stateReducer: function stateReducer(state, changes) {
+      switch (changes.type) {
+        case Downshift.stateChangeTypes.changeInput:
+          return _objectSpread(_objectSpread({}, changes), {}, {
+            selectedItem: null
+          });
+        default:
+          return changes;
+      }
+    },
+    onChange: function onChange(selectedItem, stateAndHelpers) {
+      if (_onChange) {
+        _onChange(selectedItem, stateAndHelpers);
+      }
+    },
+    onSelect: onSelectItem,
+    onOuterClick: onOuterPress,
+    onInputValueChange: onInputChange,
+    children: function children(_ref2) {
+      var getRootProps = _ref2.getRootProps,
+        getInputProps = _ref2.getInputProps,
+        getMenuProps = _ref2.getMenuProps,
+        getItemProps = _ref2.getItemProps,
+        getToggleButtonProps = _ref2.getToggleButtonProps,
+        isOpen = _ref2.isOpen,
+        inputValue = _ref2.inputValue,
+        highlightedIndex = _ref2.highlightedIndex,
+        selectedItem = _ref2.selectedItem,
+        openMenu = _ref2.openMenu;
+      var shouldSuppressRefError = Platform.OS !== 'web';
+      var rootProps = getRootProps(undefined, {
+        suppressRefError: shouldSuppressRefError
+      });
+      var menuProps = getMenuProps(undefined, {
+        suppressRefError: shouldSuppressRefError
+      });
+      var _getToggleButtonProps = getToggleButtonProps({
+          disabled: disabled
+        }),
+        onClickToggle = _getToggleButtonProps.onClick,
+        onPressToggle = _getToggleButtonProps.onPress,
+        toggleProps = _objectWithoutProperties(_getToggleButtonProps, _excluded2$3);
+      var _getInputProps = getInputProps({
+          placeholder: placeholder,
+          disabled: disabled
+        }),
+        onKeyDown = _getInputProps.onKeyDown,
+        onSearchInputFocus = _getInputProps.onFocus,
+        onSearchInputBlur = _getInputProps.onBlur,
+        onSearchInputChange = _getInputProps.onChange,
+        inputProps = _objectWithoutProperties(_getInputProps, _excluded3$2);
+      var hasCurrentSearch = inputValue && inputValue.length > 0;
+      var currentItems = hasCurrentSearch && filterItemBasedOnCurrentInputValue ? items.filter(function (_ref3) {
+        var item = _ref3.item;
+        if (!filterItemBasedOnCurrentInputValue) return true;
+        return filterItemBasedOnCurrentInputValue(item, inputValue || '');
+      }) : items;
+
+      // We need to check if the menu is open and if there is at least one item or an error element to prevent displaying an empty container
+      var isCurrentlyOpen = isOpen ? currentItems.length > 0 || !!errorElement || !!emptyResultsElement : false;
+      var canDisplayCollapseButton = currentItems.length > 0 || !!errorElement || !!emptyResultsElement;
+      return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread(_objectSpread({}, rootProps), containerProps), {}, {
+        zIndex: zIndex,
+        position: "relative",
+        children: [/*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread(_objectSpread({}, inputProps), props), {}, {
+          name: name,
+          testID: inputTestID,
+          right: right || (canDisplayCollapseButton ? /*#__PURE__*/jsx(InputPressable, _objectSpread(_objectSpread({}, toggleProps), {}, {
+            testID: "kitt.Autocomplete.listToggle",
+            hitSlop: 40,
+            onPress: function handleTogglePress(e) {
+              if (Platform.OS === 'web') {
+                onClickToggle(e);
+                return;
+              }
+              onPressToggle(patchNativeEvent(e));
+            },
+            children: /*#__PURE__*/jsx(InputIcon, {
+              icon: isCurrentlyOpen ? /*#__PURE__*/jsx(ArrowUpIcon, {}) : /*#__PURE__*/jsx(ArrowDownIcon, {})
+            })
+          })) : null),
+          onFocus: function onFocus(e) {
+            openMenu();
+            /** @ts-expect-error onFocus wants web events */
+            if (Platform.OS !== 'android' && onSearchInputFocus) onSearchInputFocus(e);
+            if (_onFocus) _onFocus(e);
+          },
+          onBlur: function onBlur(e) {
+            /** @ts-expect-error onBlur wants web events */
+            if (Platform.OS !== 'android' && onSearchInputBlur) onSearchInputBlur(e);
+            if (_onBlur) _onBlur(e);
+          }
+          /** @ts-expect-error onSearchInputChange wants web events */,
+          onChange: onSearchInputChange
+          /** @ts-expect-error onKeyDown wants web events */,
+          onKeyPress: onKeyDown
+        })), /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, menuProps), {}, {
+          position: "relative",
+          children: isCurrentlyOpen ? /*#__PURE__*/jsxs(AutocompleteItemsListContainer, {
+            testID: listContainerTestID,
+            children: [currentItems.map(function (_ref4, index) {
+              var child = _ref4.child,
+                item = _ref4.item;
+              var _getItemProps = getItemProps({
+                  item: item,
+                  index: index
+                }),
+                onClick = _getItemProps.onClick,
+                _onPress = _getItemProps.onPress,
+                role = _getItemProps.role,
+                ariaSelected = _getItemProps['aria-selected'],
+                itemProps = _objectWithoutProperties(_getItemProps, _excluded4$2);
+              return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({}, itemProps), {}, {
+                accessibilityRole: Platform.OS === 'android' ? undefined : role,
+                accessibilityState: {
+                  selected: ariaSelected
+                },
+                disabled: disabled,
+                onPress: function onPress(e) {
+                  if (Platform.OS === 'web') {
+                    if (onClick) onClick(e);
+                    return;
+                  }
+                  if (_onPress) _onPress(patchNativeEvent(e));
+                },
+                children: function children(_ref5) {
+                  var isHovered = _ref5.isHovered,
+                    isFocused = _ref5.isFocused,
+                    isPressed = _ref5.isPressed;
+                  return /*#__PURE__*/jsx(AutocompleteItem, {
+                    item: item,
+                    isHighlighted: highlightedIndex === index,
+                    isHovered: isHovered,
+                    isFocused: isFocused,
+                    isPressed: isPressed,
+                    isSelected: checkSelectedItem(selectedItem || undefined, item),
+                    children: child
+                  });
+                }
+              }), itemProps.id);
+            }), errorElement, emptyResultsElement]
+          }) : null
+        }))]
+      }));
+    }
+  });
+}
+Autocomplete.Option = AutocompleteOption;
+/**
+ * @description: This is exported for testing purposes only
+ */
+Autocomplete.UnsafeInternalItem = AutocompleteItem;
+
 function getBackgroundColor$2(_ref) {
   var isDisabled = _ref.isDisabled,
     isPressed = _ref.isPressed,
@@ -4247,85 +4685,14 @@ function onDatePartChange(_ref) {
     }
   }
   if (onFocus) onFocus();
-  onChange(nextValue);
-  if (onBlur) onBlur();
-}
-
-function stringToNumber(text) {
-  if (text.length === 0) return undefined;
-  return parseInt(text, 10);
-}
-
-function InputTextContainer(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/jsx(View, {
-    position: "relative",
-    children: children
-  });
-}
-
-var _excluded$s = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
-var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    right = _ref.right;
-    _ref.state;
-    var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    internalForceState = _ref.internalForceState,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$autoCorrect = _ref.autoCorrect,
-    autoCorrect = _ref$autoCorrect === void 0 ? true : _ref$autoCorrect,
-    _ref$textContentType = _ref.textContentType,
-    textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
-    _ref$autoComplete = _ref.autoComplete,
-    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-    _ref$keyboardType = _ref.keyboardType,
-    keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
-    multiline = _ref.multiline,
-    onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$s);
-  var theme = useTheme();
-  var fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
-  });
-  var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
-      ref: ref,
-      multiline: multiline,
-      nativeID: id,
-      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
-      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
-      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      keyboardType: keyboardType,
-      autoComplete: autoComplete,
-      autoCorrect: autoCorrect,
-      textContentType: textContentType,
-      fontSize: fontSizeForNativeBase,
-      lineHeight:
-      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
-      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
-      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
-      fontWeight: "bodies.regular",
-      fontFamily: "bodies.regular",
-      py: !multiline && Platform.OS !== 'web' ? 0 : undefined,
-      variant: variant
-    }, props), {}, {
-      onSubmitEditing: multiline ? function () {
-        return null;
-      } : onSubmitEditing
-    })), right ? /*#__PURE__*/jsx(View, {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      justifyContent: "center",
-      padding: theme.kitt.forms.input.rightContainer.padding,
-      children: right
-    }) : null]
-  });
-});
+  onChange(nextValue);
+  if (onBlur) onBlur();
+}
+
+function stringToNumber(text) {
+  if (text.length === 0) return undefined;
+  return parseInt(text, 10);
+}
 
 function getCurrentInternalForcedState$1(_ref) {
   var isDisabled = _ref.isDisabled,
@@ -4383,7 +4750,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$r = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$s = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -4401,7 +4768,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$r);
+    _objectWithoutProperties(_ref, _excluded$s);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -4611,7 +4978,7 @@ var PressableDateInputs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$q = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
+var _excluded$r = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
@@ -4620,7 +4987,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isDefaultVisible = _ref.isDefaultVisible,
     value = _ref.value,
     _onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -4696,7 +5063,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$p = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$q = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
@@ -4714,7 +5081,7 @@ function ModalPlatformDateTimePicker(_ref2) {
     validateButtonLabel = _ref2.validateButtonLabel,
     onClose = _ref2.onClose,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$p);
+    props = _objectWithoutProperties(_ref2, _excluded$q);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -4760,7 +5127,7 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$o = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+var _excluded$p = ["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,
@@ -4774,7 +5141,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var _useState = useState(isDefaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isPickerUIVisible = _useState2[0],
@@ -4821,7 +5188,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$n = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+var _excluded$o = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
 var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
@@ -4829,7 +5196,7 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pickerDefaultDate = _ref.pickerDefaultDate,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
       ref: ref,
@@ -4851,14 +5218,14 @@ var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$m = ["fillMode", "returnKeyType", "value", "onSubmitEditing"];
+var _excluded$n = ["fillMode", "returnKeyType", "value", "onSubmitEditing"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$fillMode = _ref.fillMode,
     fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     returnKeyType = _ref.returnKeyType,
     value = _ref.value,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   if (fillMode === 'keyboard') {
@@ -4877,6 +5244,511 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
+var GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
+function GoogleMapsApiKeyProvider(_ref) {
+  var children = _ref.children,
+    apiKey = _ref.apiKey;
+  return /*#__PURE__*/jsx(GoogleMapsApiKeyContext.Provider, {
+    value: apiKey,
+    children: children
+  });
+}
+
+function useGoogleMapApiKey() {
+  var context = useContext(GoogleMapsApiKeyContext);
+  if (!context) {
+    throw new Error('<GoogleMapsApiKeyContext> missing in the react tree');
+  }
+  return context;
+}
+
+function makeMapsApiUrl(resource, paramName, value, apiKey) {
+  return "https://maps.googleapis.com/maps/api/".concat(resource, "/json?").concat(paramName, "=").concat(encodeURIComponent(value), "&key=").concat(apiKey);
+}
+
+function useGoogleMapsApi() {
+  var apiKey = useGoogleMapApiKey();
+  var makeApiUrl = function (resource, paramName, value) {
+    return makeMapsApiUrl(resource, paramName, value, apiKey);
+  };
+  var sharedFetchOptions = {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  };
+  var googlePlacesServices = {
+    autoComplete: {
+      getPlacePredictions: function () {
+        var _getPlacePredictions = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(input) {
+          var response, data;
+          return _regeneratorRuntime().wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                _context.next = 3;
+                return fetch(makeApiUrl('place/autocomplete', 'input', input), sharedFetchOptions);
+              case 3:
+                response = _context.sent;
+                _context.next = 6;
+                return response.json();
+              case 6:
+                data = _context.sent;
+                if (!((data === null || data === void 0 ? void 0 : data.status) !== 'OK')) {
+                  _context.next = 9;
+                  break;
+                }
+                return _context.abrupt("return", {
+                  status: data === null || data === void 0 ? void 0 : data.status,
+                  results: []
+                });
+              case 9:
+                return _context.abrupt("return", {
+                  results: data === null || data === void 0 ? void 0 : data.predictions,
+                  status: data === null || data === void 0 ? void 0 : data.status
+                });
+              case 12:
+                _context.prev = 12;
+                _context.t0 = _context["catch"](0);
+                return _context.abrupt("return", {
+                  status: google.maps.places.PlacesServiceStatus.UNKNOWN_ERROR,
+                  results: []
+                });
+              case 15:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee, null, [[0, 12]]);
+        }));
+        function getPlacePredictions() {
+          return _getPlacePredictions.apply(this, arguments);
+        }
+        return getPlacePredictions;
+      }()
+    },
+    placesService: {
+      getDetails: function () {
+        var _getDetails = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(placeId) {
+          var response, data;
+          return _regeneratorRuntime().wrap(function (_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                _context2.next = 3;
+                return fetch(makeApiUrl('place/details', 'place_id', placeId), sharedFetchOptions);
+              case 3:
+                response = _context2.sent;
+                _context2.next = 6;
+                return response.json();
+              case 6:
+                data = _context2.sent;
+                if (!((data === null || data === void 0 ? void 0 : data.status) !== 'OK')) {
+                  _context2.next = 9;
+                  break;
+                }
+                return _context2.abrupt("return", {
+                  status: data === null || data === void 0 ? void 0 : data.status,
+                  result: undefined
+                });
+              case 9:
+                return _context2.abrupt("return", {
+                  result: data === null || data === void 0 ? void 0 : data.result,
+                  status: data === null || data === void 0 ? void 0 : data.status
+                });
+              case 12:
+                _context2.prev = 12;
+                _context2.t0 = _context2["catch"](0);
+                return _context2.abrupt("return", {
+                  status: google.maps.places.PlacesServiceStatus.UNKNOWN_ERROR,
+                  result: undefined
+                });
+              case 15:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2, null, [[0, 12]]);
+        }));
+        function getDetails() {
+          return _getDetails.apply(this, arguments);
+        }
+        return getDetails;
+      }()
+    }
+  };
+  return googlePlacesServices;
+}
+
+var googleMapsAutocompleteReducer = function (state, action) {
+  switch (action.type) {
+    case 'search-change':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hasSearchError: false,
+          isLoadingSearch: true
+        });
+      }
+    case 'search-success':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hasSearchError: false,
+          isLoadingSearch: false,
+          items: action.payload.results
+        });
+      }
+    case 'search-error':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hasSearchError: true,
+          isLoadingSearch: false,
+          items: []
+        });
+      }
+    case 'select-result':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hasSelectResultError: false,
+          isLoadingResultDetails: true
+        });
+      }
+    case 'select-result-success':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hasSelectResultError: false,
+          isLoadingResultDetails: false,
+          currentSelectedValue: action.payload.result
+        });
+      }
+    case 'select-result-error':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          hasSelectResultError: true,
+          isLoadingResultDetails: false,
+          currentSelectedValue: undefined
+        });
+      }
+    default:
+      return state;
+  }
+};
+
+function findComponentByType(typeName, components) {
+  return components.find(function (component) {
+    return component.types.includes(typeName);
+  });
+}
+var matchStreetNumberWithOriginalAddress = function () {
+  var streetNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var address = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var _ref = / *(\d*[-/_]{0,1}\d*) *(bis|ter|quater|quinquies|sexies|septies|octies|novies|decies|[a-z])? /i.exec(address) || [],
+    _ref2 = _slicedToArray(_ref, 3),
+    _ref2$ = _ref2[1],
+    number = _ref2$ === void 0 ? '' : _ref2$,
+    _ref2$2 = _ref2[2],
+    extension = _ref2$2 === void 0 ? '' : _ref2$2;
+  if (number) return "".concat(number).concat(extension);
+  return streetNumber;
+};
+var formatAddressFromGoogle = function (placeResult, originalAddress) {
+  var _placeResult$geometry, _placeResult$geometry2, _findComponentByType, _findComponentByType2, _findComponentByType3, _findComponentByType4, _findComponentByType5, _findComponentByType6, _findComponentByType7, _findComponentByType8;
+  var _placeResult$address_ = placeResult.address_components,
+    addressComponents = _placeResult$address_ === void 0 ? [] : _placeResult$address_;
+  return {
+    source: 'google',
+    lat: (_placeResult$geometry = placeResult.geometry) === null || _placeResult$geometry === void 0 ? void 0 : _placeResult$geometry.location.lat(),
+    lng: (_placeResult$geometry2 = placeResult.geometry) === null || _placeResult$geometry2 === void 0 ? void 0 : _placeResult$geometry2.location.lng(),
+    locality: (_findComponentByType = findComponentByType('locality', addressComponents)) === null || _findComponentByType === void 0 ? void 0 : _findComponentByType.long_name,
+    subLocality: (_findComponentByType2 = findComponentByType('sublocality', addressComponents)) === null || _findComponentByType2 === void 0 ? void 0 : _findComponentByType2.long_name,
+    zipcode: (_findComponentByType3 = findComponentByType('postal_code', addressComponents)) === null || _findComponentByType3 === void 0 ? void 0 : _findComponentByType3.long_name,
+    streetName: (_findComponentByType4 = findComponentByType('route', addressComponents)) === null || _findComponentByType4 === void 0 ? void 0 : _findComponentByType4.long_name,
+    streetNumber: matchStreetNumberWithOriginalAddress((_findComponentByType5 = findComponentByType('street_number', addressComponents)) === null || _findComponentByType5 === void 0 ? void 0 : _findComponentByType5.long_name, originalAddress),
+    country: (_findComponentByType6 = findComponentByType('country', addressComponents)) === null || _findComponentByType6 === void 0 ? void 0 : _findComponentByType6.long_name,
+    administrativeAreaLevel1: (_findComponentByType7 = findComponentByType('administrative_area_level_1', addressComponents)) === null || _findComponentByType7 === void 0 ? void 0 : _findComponentByType7.long_name,
+    administrativeAreaLevel2: (_findComponentByType8 = findComponentByType('administrative_area_level_1', addressComponents)) === null || _findComponentByType8 === void 0 ? void 0 : _findComponentByType8.long_name
+  };
+};
+
+var GoogleMapsAutocompleteContext = /*#__PURE__*/createContext({
+  state: {
+    items: [],
+    currentSelectedValue: undefined,
+    isLoadingSearch: false,
+    hasSearchError: false,
+    hasSelectResultError: false,
+    isLoadingResultDetails: false,
+    shouldDisplayEmptyStateWhenNoResults: false
+  },
+  onInputChange: function onInputChange() {
+    return Promise.resolve();
+  },
+  onSelectItem: function onSelectItem() {}
+});
+function GoogleMapsAutocompleteProvider(_ref) {
+  var children = _ref.children,
+    _ref$minCharsToSearch = _ref.minCharsToSearch,
+    minCharsToSearch = _ref$minCharsToSearch === void 0 ? 3 : _ref$minCharsToSearch,
+    _ref$debounceTimeout = _ref.debounceTimeout,
+    debounceTimeout = _ref$debounceTimeout === void 0 ? 950 : _ref$debounceTimeout;
+  var mapsApi = useGoogleMapsApi();
+  var searchResultsCache = useRef({});
+  var resultDetailsCache = useRef({});
+  var _useReducer = useReducer(googleMapsAutocompleteReducer, {
+      items: [],
+      shouldDisplayEmptyStateWhenNoResults: false
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var handleInputChange = useDebouncedCallback(useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {
+      var predictionsPromise, _yield$predictionsPro, results, status;
+      return _regeneratorRuntime().wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(value.length < minCharsToSearch)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            dispatch({
+              type: 'search-change'
+            });
+
+            // If the user types the same value as the previous search, we don't need to call the API again
+            predictionsPromise = searchResultsCache.current[value] ? Promise.resolve({
+              results: searchResultsCache.current[value],
+              status: 'OK'
+            }) : mapsApi.autoComplete.getPlacePredictions(value);
+            _context.prev = 4;
+            _context.next = 7;
+            return predictionsPromise;
+          case 7:
+            _yield$predictionsPro = _context.sent;
+            results = _yield$predictionsPro.results;
+            status = _yield$predictionsPro.status;
+            if (!(status !== 'OK')) {
+              _context.next = 13;
+              break;
+            }
+            dispatch({
+              type: 'search-error'
+            });
+            return _context.abrupt("return");
+          case 13:
+            // We cache the results to avoid calling the API again if the user types the same value
+            searchResultsCache.current[value] = results;
+            dispatch({
+              type: 'search-success',
+              payload: {
+                results: results
+              }
+            });
+            _context.next = 20;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](4);
+            dispatch({
+              type: 'search-error'
+            });
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 17]]);
+    }));
+    return function () {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [mapsApi.autoComplete, minCharsToSearch]), debounceTimeout);
+  var handleSelectItem = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(item, onChange) {
+      var placePromise, place, formattedAddress;
+      return _regeneratorRuntime().wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (item !== null && item !== void 0 && item.place_id) {
+              _context2.next = 3;
+              break;
+            }
+            if (onChange) onChange(undefined);
+            return _context2.abrupt("return");
+          case 3:
+            dispatch({
+              type: 'select-result'
+            });
+            _context2.prev = 4;
+            // If we already have the details in cache, we don't need to fetch them again
+            placePromise = resultDetailsCache.current[item.place_id] ? Promise.resolve(resultDetailsCache.current[item.place_id]) : mapsApi.placesService.getDetails(item.place_id).then(function (_ref4) {
+              var result = _ref4.result;
+              return result;
+            });
+            _context2.next = 8;
+            return placePromise;
+          case 8:
+            place = _context2.sent;
+            if (place) {
+              _context2.next = 13;
+              break;
+            }
+            dispatch({
+              type: 'select-result-error'
+            });
+            if (onChange) onChange(undefined);
+            return _context2.abrupt("return");
+          case 13:
+            dispatch({
+              type: 'select-result-success',
+              payload: {
+                result: place
+              }
+            });
+            formattedAddress = formatAddressFromGoogle(place, item.description); // We cache the result details to avoid fetching them again if the user selects the same item
+            resultDetailsCache.current[item.place_id] = place;
+            if (onChange) onChange(formattedAddress);
+            _context2.next = 23;
+            break;
+          case 19:
+            _context2.prev = 19;
+            _context2.t0 = _context2["catch"](4);
+            dispatch({
+              type: 'select-result-error'
+            });
+            if (onChange) onChange(undefined);
+          case 23:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[4, 19]]);
+    }));
+    return function () {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [mapsApi.placesService]);
+  var api = useMemo(function () {
+    return {
+      state: state,
+      onSelectItem: handleSelectItem,
+      onInputChange: handleInputChange
+    };
+  }, [handleInputChange, handleSelectItem, state]);
+  return /*#__PURE__*/jsx(GoogleMapsAutocompleteContext.Provider, {
+    value: api,
+    children: children
+  });
+}
+
+function useGoogleMapsAutocomplete() {
+  var context = useContext(GoogleMapsAutocompleteContext);
+  if (!context) {
+    throw new Error('<GoogleMapsAutocompleteProvider> missing in the react tree');
+  }
+  return context;
+}
+
+function InputAddressOption(_ref) {
+  var item = _ref.item;
+  var sharedTransform = {
+    style: {
+      transform: [{
+        translateY: 4
+      }]
+    }
+  };
+  return /*#__PURE__*/jsx(Autocomplete.Option, {
+    item: item,
+    children: /*#__PURE__*/jsxs(HStack, {
+      space: "kitt.2",
+      children: [/*#__PURE__*/jsx(View, {
+        _web: sharedTransform,
+        _ios: sharedTransform,
+        _android: sharedTransform,
+        children: /*#__PURE__*/jsx(TypographyIcon, {
+          icon: /*#__PURE__*/jsx(MapPinIcon, {}),
+          color: "black"
+        })
+      }), /*#__PURE__*/jsx(View, {
+        flexShrink: 1,
+        children: /*#__PURE__*/jsxs(Typography.Text, {
+          children: [/*#__PURE__*/jsx(Typography.Text, {
+            variant: "bold",
+            children: item.structured_formatting.main_text
+          }), item.structured_formatting.secondary_text ? /*#__PURE__*/jsxs(Typography.Text, {
+            color: "black-light",
+            variant: "bold",
+            children: [' ', item.structured_formatting.secondary_text]
+          }) : null]
+        })
+      })]
+    })
+  });
+}
+
+function defaultItemToString(item) {
+  if (!item) return '';
+  return item.structured_formatting.main_text;
+}
+
+// This function takes AutocompleteAddress and return a valid google AutocompletePrediction
+function formatInitialValueToAutocompletePrediction(address, placeId) {
+  return {
+    place_id: placeId,
+    description: '',
+    reference: '',
+    types: [],
+    terms: [],
+    matched_substrings: [],
+    structured_formatting: {
+      main_text: [address.streetName, address.streetNumber].filter(Boolean).join(' '),
+      main_text_matched_substrings: [],
+      secondary_text: [address.zipcode, address.locality, address.subLocality].filter(Boolean).join(' ')
+    }
+  };
+}
+
+var _excluded$m = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+function InputAddress(_ref) {
+  var initialValue = _ref.initialValue,
+    _ref$itemToString = _ref.itemToString,
+    itemToString = _ref$itemToString === void 0 ? defaultItemToString : _ref$itemToString,
+    errorElement = _ref.errorElement,
+    emptyResultsElement = _ref.emptyResultsElement,
+    _onChange = _ref.onChange;
+    _objectWithoutProperties(_ref, _excluded$m);
+  var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
+    state = _useGoogleMapsAutocom.state,
+    _onInputChange = _useGoogleMapsAutocom.onInputChange,
+    onSelectItem = _useGoogleMapsAutocom.onSelectItem;
+
+  // place_id is a google field that is not available within an AutoCompleteAddress, so we need to add a fake one when handling initial values
+  var formattedInitialValue = initialValue ? formatInitialValueToAutocompletePrediction(initialValue, 'initial-value-placeId') : undefined;
+  return /*#__PURE__*/jsx(Autocomplete, {
+    itemToString: itemToString,
+    initialValue: formattedInitialValue,
+    checkSelectedItem: function checkSelectedItem(selectedItem, item) {
+      return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.place_id) === item.place_id;
+    },
+    right: state.isLoadingSearch || state.isLoadingResultDetails ? /*#__PURE__*/jsx(Icon, {
+      icon: /*#__PURE__*/jsx(LoaderIcon, {}),
+      color: "kitt.black"
+    }) : undefined,
+    errorElement: state.hasSearchError || state.hasSelectResultError ? errorElement : null,
+    emptyResultsElement: state.items.length === 0 ? emptyResultsElement : null,
+    onInputChange: function onInputChange(v) {
+      _onInputChange(v);
+    },
+    onChange: function onChange(v) {
+      onSelectItem(v, _onChange);
+    },
+    children: state.items.map(function (item) {
+      return /*#__PURE__*/jsx(InputAddressOption, {
+        item: item
+      }, item.place_id);
+    })
+  });
+}
+InputAddress.Option = InputAddressOption;
+
 var InputEmail = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/jsx(InputText, _objectSpread({
     ref: ref,
@@ -4932,35 +5804,6 @@ function InputField(_ref) {
   });
 }
 
-function getIconColor(state, disabled) {
-  if (disabled) return 'black-light';
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-    case 'valid':
-      return 'success';
-    default:
-      return undefined;
-  }
-}
-function InputIcon(_ref) {
-  var icon = _ref.icon,
-    state = _ref.state,
-    disabled = _ref.disabled;
-  var theme = useTheme();
-  var color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
-
-function InputPressable(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
-}
-
 var _excluded$l = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
@@ -6842,6 +7685,31 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           }
         },
         forms: {
+          autocomplete: {
+            option: {
+              "default": {
+                backgroundColor: theme.forms.autocomplete.option["default"].backgroundColor
+              },
+              hovered: {
+                backgroundColor: theme.forms.autocomplete.option.hovered.backgroundColor
+              },
+              focused: {
+                backgroundColor: theme.forms.autocomplete.option.focused.backgroundColor
+              },
+              selected: {
+                backgroundColor: theme.forms.autocomplete.option.selected.backgroundColor
+              },
+              highlighted: {
+                backgroundColor: theme.forms.autocomplete.option.highlighted.backgroundColor
+              },
+              pressed: {
+                backgroundColor: theme.forms.autocomplete.option.pressed.backgroundColor
+              }
+            },
+            optionsContainer: {
+              backgroundColor: theme.forms.autocomplete.optionsContainer.backgroundColor
+            }
+          },
           input: {
             states: theme.forms.input.states
           },
@@ -7065,6 +7933,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderRadius: theme.dialogModal.borderRadius
         },
         forms: {
+          autocomplete: {
+            optionsContainer: {
+              borderRadius: theme.forms.autocomplete.optionsContainer.borderRadius
+            }
+          },
           input: {
             borderRadius: theme.forms.input.borderRadius
           },
@@ -7320,6 +8193,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           minHeight: theme.feedbackMessage.minHeight
         },
         forms: {
+          autocomplete: {
+            option: {
+              minHeight: theme.forms.autocomplete.option.minHeight
+            }
+          },
           datePicker: {
             minHeight: theme.forms.input.minHeight,
             day: {
@@ -7422,6 +8300,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           overlayPadding: theme.dialogModal.overlayPadding
         },
         forms: {
+          autocomplete: {
+            option: {
+              verticalPadding: theme.forms.autocomplete.option.verticalPadding
+            }
+          },
           datePicker: {
             padding: theme.forms.input.padding
           },
@@ -7891,16 +8774,18 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             shadowRadius: theme.dialogModal.shadow.radius
           }
         },
-        pciker: {
-          optionsContainer: {
-            shadow: {
-              shadowColor: theme.picker.web.optionsContainer.shadow.color,
-              shadowOffset: {
-                width: theme.picker.web.optionsContainer.shadow.offsetX,
-                height: theme.picker.web.optionsContainer.shadow.offsetY
-              },
-              shadowOpacity: theme.picker.web.optionsContainer.shadow.opacity,
-              shadowRadius: theme.picker.web.optionsContainer.shadow.radius
+        forms: {
+          autocomplete: {
+            optionsContainer: {
+              shadow: {
+                shadowColor: theme.forms.autocomplete.optionsContainer.shadow.color,
+                shadowOffset: {
+                  width: theme.forms.autocomplete.optionsContainer.shadow.offsetX,
+                  height: theme.forms.autocomplete.optionsContainer.shadow.offsetY
+                },
+                shadowOpacity: theme.forms.autocomplete.optionsContainer.shadow.opacity,
+                shadowRadius: theme.forms.autocomplete.optionsContainer.shadow.radius
+              }
             }
           }
         }
@@ -8679,7 +9564,7 @@ function SkeletonContent(_ref) {
 var _excluded$8 = ["isLoading", "style"],
   _excluded2$1 = ["size"],
   _excluded3$1 = ["size"],
-  _excluded4 = ["size"];
+  _excluded4$1 = ["size"];
 function Skeleton(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
@@ -8725,7 +9610,7 @@ function Circle(_ref4) {
 }
 function Square(_ref5) {
   var size = _ref5.size,
-    props = _objectWithoutProperties(_ref5, _excluded4);
+    props = _objectWithoutProperties(_ref5, _excluded4$1);
   var currentSize = size || 'kitt.skeleton.shape.square.size';
   var currentBorderRadius = size ? size * 0.5 : 'kitt.skeleton.shape.square.borderRadius';
   return /*#__PURE__*/jsx(Skeleton, _objectSpread(_objectSpread({}, props), {}, {
@@ -9134,7 +10019,8 @@ function Story(_ref) {
 
 var _excluded$5 = ["title", "children", "internalIsDemoSection"],
   _excluded2 = ["title", "children"],
-  _excluded3 = ["title", "children"];
+  _excluded3 = ["title", "children"],
+  _excluded4 = ["children"];
 function StorySection(_ref) {
   var title = _ref.title,
     children = _ref.children,
@@ -9174,15 +10060,17 @@ function BlockSection(_ref3) {
   }));
 }
 function DemoSection(_ref4) {
-  var children = _ref4.children;
-  return /*#__PURE__*/jsx(View, {
-    marginBottom: "kitt.16",
+  var children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded4);
+  return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
+    marginBottom: "kitt.16"
+  }, props), {}, {
     children: /*#__PURE__*/jsx(StorySection, {
       internalIsDemoSection: true,
       title: "Demo",
       children: children
     })
-  });
+  }));
 }
 StorySection.SubSection = SubSection;
 StorySection.BlockSection = BlockSection;
@@ -10120,5 +11008,5 @@ function VerticalSteps(_ref) {
 }
 VerticalSteps.Step = ExternalStep;
 
-export { ActionCard, Actions, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, HStack, Highlight, Icon, IconButton, Image, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, 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, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, DatePicker, DialogModal, Emoji, ExternalAppLink, ExternalLink, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, HStack, Highlight, Icon, IconButton, Image, InputAddress, InputEmail, InputFeedback, InputField, InputIcon, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarkerLarge, MapMarkerPosition, MapMarkerSimple, MatchWindowSize, Message, ModalBehaviour, 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, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index-browser-all.es.js.map