@ornikar/kitt-universal 16.3.1 → 16.4.0

package/dist/index-node-14.17.cjs.web.js

@@ -10,13 +10,19 @@ const reactPortal = require('react-portal');
 const reactTransitionGroup = require('react-transition-group');
 const reactNative = require('react-native');
 const twemojiParser = require('twemoji-parser');
+const Downshift = require('downshift');
+const useDebounce = require('use-debounce');
+const jsApiLoader = require('@googlemaps/js-api-loader');
 const libphonenumberJs = require('libphonenumber-js');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const reactDom = require('@floating-ui/react-dom');
-const downshift = require('downshift');
 const usehooksTs = require('usehooks-ts');
 const addons = require('@storybook/addons');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
+
+const Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
+
 const View = nativeBase.View;
 const ScrollView = nativeBase.ScrollView;
 const Pressable = nativeBase.Pressable;
@@ -735,6 +741,42 @@ const feedbackMessage = {
   }
 };
 
+const 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
+    }
+  }
+};
+
 const checkbox = {
   borderWidth: 2,
   borderRadius: 5,
@@ -1034,6 +1076,7 @@ const timePicker = {
 };
 
 const forms = {
+  autocomplete,
   datePicker,
   input,
   radio,
@@ -2910,7 +2953,7 @@ CardModal.Header = CardModalHeader;
 CardModal.Footer = CardModalFooter;
 CardModal.ModalBehaviour = CardModalBehaviour;
 
-function getBackgroundColor$4({
+function getBackgroundColor$5({
   isDisabled,
   isSelected,
   isHovered,
@@ -2943,7 +2986,7 @@ function AnimatedChoiceItemView({
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     position: "relative",
     borderRadius: getBorderRadius(variant),
-    backgroundColor: getBackgroundColor$4({
+    backgroundColor: getBackgroundColor$5({
       isDisabled,
       isSelected,
       isHovered,
@@ -3436,6 +3479,395 @@ function ExternalLink({
   });
 }
 
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
+  switch (state) {
+    case 'invalid':
+      return 'danger';
+    case 'valid':
+      return 'success';
+    default:
+      return undefined;
+  }
+}
+function InputIcon({
+  icon,
+  state,
+  disabled
+}) {
+  const theme = useTheme();
+  const color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
+
+function InputPressable({
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, {
+    ...props
+  });
+}
+
+const inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
+function InputTextContainer(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: inputTextContainer,
+    ...props
+  });
+}
+
+const InputText = /*#__PURE__*/react.forwardRef(({
+  id,
+  right,
+  state: formState,
+  variant = 'outline',
+  internalForceState,
+  disabled = false,
+  autoCorrect = true,
+  textContentType = 'none',
+  autoComplete = 'off',
+  keyboardType = 'default',
+  multiline,
+  onSubmitEditing,
+  ...props
+}, ref) => {
+  const theme = useTheme();
+  const fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
+      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
+      fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && "web" !== 'web' ? 0 : undefined,
+      variant: variant,
+      ...props,
+      onSubmitEditing: multiline ? () => null : onSubmitEditing
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
+      children: right
+    }) : null]
+  });
+});
+
+function getBackgroundColor$4({
+  isSelected,
+  isHighlighted,
+  isPressed,
+  isHovered,
+  isFocused
+}) {
+  const baseKey = 'kitt.forms.autocomplete.option';
+  if (isHighlighted) {
+    return `${baseKey}.highlighted.backgroundColor`;
+  }
+  if (isPressed) {
+    return `${baseKey}.pressed.backgroundColor`;
+  }
+  if (isHovered) {
+    return `${baseKey}.hovered.backgroundColor`;
+  }
+  if (isFocused) {
+    return `${baseKey}.focused.backgroundColor`;
+  }
+  if (isSelected) {
+    return `${baseKey}.selected.backgroundColor`;
+  }
+  return `${baseKey}.default.backgroundColor`;
+}
+function AutocompleteItem({
+  children,
+  isSelected,
+  isHighlighted,
+  isHovered,
+  isFocused,
+  isPressed
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    justifyContent: "center",
+    width: "100%",
+    minHeight: "kitt.forms.autocomplete.option.minHeight",
+    borderRadius: "kitt.1",
+    padding: "kitt.1",
+    backgroundColor: getBackgroundColor$4({
+      isSelected,
+      isHighlighted,
+      isPressed,
+      isHovered,
+      isFocused
+    }),
+    children: children
+  });
+}
+
+function AutocompleteItemsListContainer({
+  testID,
+  children,
+  zIndex = 1000
+}) {
+  return /*#__PURE__*/jsxRuntime.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
+  });
+}
+
+function AutocompleteOption({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    paddingX: {
+      base: 'kitt.2',
+      small: 'kitt.4'
+    },
+    paddingY: "kitt.forms.autocomplete.option.verticalPadding",
+    ...props,
+    children: children
+  });
+}
+
+function isReactElement(element) {
+  return typeof element === 'object' && element !== null && 'type' in element && 'props' in element;
+}
+function Autocomplete({
+  children,
+  name,
+  disabled,
+  placeholder,
+  isInitialOpen,
+  initialValue,
+  containerProps,
+  filterItemBasedOnCurrentInputValue,
+  checkSelectedItem,
+  itemToString,
+  right,
+  onChange,
+  onFocus,
+  onBlur,
+  onInputChange,
+  onSelectItem,
+  /**
+   * @description web only callback
+   */
+  onOuterPress,
+  errorElement,
+  emptyResultsElement,
+  inputTestID = 'kitt.Autocomplete.inputText',
+  listContainerTestID = 'kitt.Autocomplete.listContainer',
+  zIndex = 1000,
+  ...props
+}) {
+  const childrenArray = react.Children.toArray(children);
+  const items = childrenArray.filter(isReactElement).map(child => ({
+    child,
+    item: child.props.item
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx(Downshift__default, {
+    defaultIsOpen: isInitialOpen,
+    initialSelectedItem: initialValue,
+    initialInputValue: initialValue ? itemToString(initialValue) : undefined,
+    itemToString: item => {
+      // Prevents returning null values
+      if (!itemToString) return '';
+      return itemToString(item || undefined);
+    },
+    stateReducer: (state, changes) => {
+      switch (changes.type) {
+        case Downshift__default.stateChangeTypes.changeInput:
+          return {
+            ...changes,
+            selectedItem: null
+          };
+        default:
+          return changes;
+      }
+    },
+    onChange: (selectedItem, stateAndHelpers) => {
+      if (onChange) {
+        onChange(selectedItem, stateAndHelpers);
+      }
+    },
+    onSelect: onSelectItem,
+    onOuterClick: onOuterPress,
+    onInputValueChange: onInputChange,
+    children: ({
+      getRootProps,
+      getInputProps,
+      getMenuProps,
+      getItemProps,
+      getToggleButtonProps,
+      isOpen,
+      inputValue,
+      highlightedIndex,
+      selectedItem,
+      openMenu
+    }) => {
+      const shouldSuppressRefError = "web" !== 'web';
+      const rootProps = getRootProps(undefined, {
+        suppressRefError: shouldSuppressRefError
+      });
+      const menuProps = getMenuProps(undefined, {
+        suppressRefError: shouldSuppressRefError
+      });
+      const {
+        onClick: onClickToggle,
+        onPress: onPressToggle,
+        ...toggleProps
+      } = getToggleButtonProps({
+        disabled
+      });
+      const {
+        onKeyDown,
+        onFocus: onSearchInputFocus,
+        onBlur: onSearchInputBlur,
+        onChange: onSearchInputChange,
+        ...inputProps
+      } = getInputProps({
+        placeholder,
+        disabled
+      });
+      const hasCurrentSearch = inputValue && inputValue.length > 0;
+      const currentItems = hasCurrentSearch && filterItemBasedOnCurrentInputValue ? items.filter(({
+        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
+      const isCurrentlyOpen = isOpen ? currentItems.length > 0 || !!errorElement || !!emptyResultsElement : false;
+      const canDisplayCollapseButton = currentItems.length > 0 || !!errorElement || !!emptyResultsElement;
+      return /*#__PURE__*/jsxRuntime.jsxs(View, {
+        ...rootProps,
+        ...containerProps,
+        zIndex: zIndex,
+        position: "relative",
+        children: [/*#__PURE__*/jsxRuntime.jsx(InputText, {
+          ...inputProps,
+          ...props,
+          name: name,
+          testID: inputTestID,
+          right: right || (canDisplayCollapseButton ? /*#__PURE__*/jsxRuntime.jsx(InputPressable, {
+            ...toggleProps,
+            testID: "kitt.Autocomplete.listToggle",
+            hitSlop: 40,
+            onPress: e => {
+              onClickToggle(e);
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(InputIcon, {
+              icon: isCurrentlyOpen ? /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArrowUpIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(kittIcons.ArrowDownIcon, {})
+            })
+          }) : null),
+          onFocus: e => {
+            openMenu();
+            /** @ts-expect-error onFocus wants web events */
+            if (onSearchInputFocus) onSearchInputFocus(e);
+            if (onFocus) onFocus(e);
+          },
+          onBlur: e => {
+            /** @ts-expect-error onBlur wants web events */
+            if (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__*/jsxRuntime.jsx(View, {
+          ...menuProps,
+          position: "relative",
+          children: isCurrentlyOpen ? /*#__PURE__*/jsxRuntime.jsxs(AutocompleteItemsListContainer, {
+            testID: listContainerTestID,
+            children: [currentItems.map(({
+              child,
+              item
+            }, index) => {
+              const {
+                onClick,
+                onPress,
+                role,
+                'aria-selected': ariaSelected,
+                ...itemProps
+              } = getItemProps({
+                item,
+                index
+              });
+              return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+                ...itemProps,
+                accessibilityRole: role,
+                accessibilityState: {
+                  selected: ariaSelected
+                },
+                disabled: disabled,
+                onPress: e => {
+                  if (onClick) onClick(e);
+                },
+                children: ({
+                  isHovered,
+                  isFocused,
+                  isPressed
+                }) => /*#__PURE__*/jsxRuntime.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$3({
   isDisabled,
   isPressed,
@@ -3746,68 +4178,6 @@ function stringToNumber(text) {
   return parseInt(text, 10);
 }
 
-const inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
-function InputTextContainer(props) {
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: inputTextContainer,
-    ...props
-  });
-}
-
-const InputText = /*#__PURE__*/react.forwardRef(({
-  id,
-  right,
-  state: formState,
-  variant = 'outline',
-  internalForceState,
-  disabled = false,
-  autoCorrect = true,
-  textContentType = 'none',
-  autoComplete = 'off',
-  keyboardType = 'default',
-  multiline,
-  onSubmitEditing,
-  ...props
-}, ref) => {
-  const theme = useTheme();
-  const fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
-      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
-      fontSizeForNativeBase,
-      fontWeight: "bodies.regular",
-      fontFamily: "bodies.regular",
-      py: !multiline && "web" !== 'web' ? 0 : undefined,
-      variant: variant,
-      ...props,
-      onSubmitEditing: multiline ? () => null : onSubmitEditing
-    }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      justifyContent: "center",
-      padding: theme.kitt.forms.input.rightContainer.padding,
-      children: right
-    }) : null]
-  });
-});
-
 function getCurrentInternalForcedState$1({
   isDisabled,
   isHoveredInternal,
@@ -4030,6 +4400,402 @@ const DatePicker = /*#__PURE__*/react.forwardRef(({
   });
 });
 
+const GoogleMapsApiKeyContext = /*#__PURE__*/react.createContext(undefined);
+function GoogleMapsApiKeyProvider({
+  children,
+  apiKey
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(GoogleMapsApiKeyContext.Provider, {
+    value: apiKey,
+    children: children
+  });
+}
+
+function useGoogleMapApiKey() {
+  const context = react.useContext(GoogleMapsApiKeyContext);
+  if (!context) {
+    throw new Error('<GoogleMapsApiKeyContext> missing in the react tree');
+  }
+  return context;
+}
+
+function useGoogleMapsApi() {
+  const apiKey = useGoogleMapApiKey();
+  const autoCompleteServiceInstanceRef = react.useRef(null);
+  const placesServiceInstanceRef = react.useRef(null);
+  react.useEffect(() => {
+    if (autoCompleteServiceInstanceRef.current && placesServiceInstanceRef.current) return;
+    const loader = new jsApiLoader.Loader({
+      apiKey,
+      libraries: ['places']
+    });
+    (async function () {
+      try {
+        const placeApi = await loader.importLibrary('places');
+        autoCompleteServiceInstanceRef.current = new placeApi.AutocompleteService();
+        placesServiceInstanceRef.current = new placeApi.PlacesService(document.createElement('div'));
+      } catch (error) {
+        console.error(error);
+      }
+    })();
+  }, [apiKey]);
+  return {
+    autoComplete: {
+      getPlacePredictions: input => {
+        const promise = new Promise(resolve => {
+          autoCompleteServiceInstanceRef.current?.getPlacePredictions({
+            input
+          }, (predictions, status) => {
+            if (status !== google.maps.places.PlacesServiceStatus.OK) {
+              resolve({
+                status,
+                results: []
+              });
+              return;
+            }
+            resolve({
+              results: predictions,
+              status
+            });
+          });
+        });
+        return promise;
+      }
+    },
+    placesService: {
+      getDetails: placeId => {
+        const promise = new Promise(resolve => {
+          placesServiceInstanceRef.current?.getDetails({
+            placeId
+          }, (place, status) => {
+            if (status !== google.maps.places.PlacesServiceStatus.OK) {
+              resolve({
+                status,
+                result: undefined
+              });
+              return;
+            }
+            resolve({
+              result: place,
+              status
+            });
+          });
+        });
+        return promise;
+      }
+    }
+  };
+}
+
+const googleMapsAutocompleteReducer = (state, action) => {
+  switch (action.type) {
+    case 'search-change':
+      {
+        return {
+          ...state,
+          hasSearchError: false,
+          isLoadingSearch: true
+        };
+      }
+    case 'search-success':
+      {
+        return {
+          ...state,
+          hasSearchError: false,
+          isLoadingSearch: false,
+          items: action.payload.results
+        };
+      }
+    case 'search-error':
+      {
+        return {
+          ...state,
+          hasSearchError: true,
+          isLoadingSearch: false,
+          items: []
+        };
+      }
+    case 'select-result':
+      {
+        return {
+          ...state,
+          hasSelectResultError: false,
+          isLoadingResultDetails: true
+        };
+      }
+    case 'select-result-success':
+      {
+        return {
+          ...state,
+          hasSelectResultError: false,
+          isLoadingResultDetails: false,
+          currentSelectedValue: action.payload.result
+        };
+      }
+    case 'select-result-error':
+      {
+        return {
+          ...state,
+          hasSelectResultError: true,
+          isLoadingResultDetails: false,
+          currentSelectedValue: undefined
+        };
+      }
+    default:
+      return state;
+  }
+};
+
+function findComponentByType(typeName, components) {
+  return components.find(component => component.types.includes(typeName));
+}
+const matchStreetNumberWithOriginalAddress = (streetNumber = '', address = '') => {
+  const [, number = '', extension = ''] = / *(\d*[-/_]{0,1}\d*) *(bis|ter|quater|quinquies|sexies|septies|octies|novies|decies|[a-z])? /i.exec(address) || [];
+  if (number) return `${number}${extension}`;
+  return streetNumber;
+};
+const formatAddressFromGoogle = (placeResult, originalAddress) => {
+  const {
+    address_components: addressComponents = []
+  } = placeResult;
+  return {
+    source: 'google',
+    lat: placeResult.geometry?.location.lat(),
+    lng: placeResult.geometry?.location.lng(),
+    locality: findComponentByType('locality', addressComponents)?.long_name,
+    subLocality: findComponentByType('sublocality', addressComponents)?.long_name,
+    zipcode: findComponentByType('postal_code', addressComponents)?.long_name,
+    streetName: findComponentByType('route', addressComponents)?.long_name,
+    streetNumber: matchStreetNumberWithOriginalAddress(findComponentByType('street_number', addressComponents)?.long_name, originalAddress),
+    country: findComponentByType('country', addressComponents)?.long_name,
+    administrativeAreaLevel1: findComponentByType('administrative_area_level_1', addressComponents)?.long_name,
+    administrativeAreaLevel2: findComponentByType('administrative_area_level_1', addressComponents)?.long_name
+  };
+};
+
+const GoogleMapsAutocompleteContext = /*#__PURE__*/react.createContext({
+  state: {
+    items: [],
+    currentSelectedValue: undefined,
+    isLoadingSearch: false,
+    hasSearchError: false,
+    hasSelectResultError: false,
+    isLoadingResultDetails: false,
+    shouldDisplayEmptyStateWhenNoResults: false
+  },
+  onInputChange: () => {
+    return Promise.resolve();
+  },
+  onSelectItem: () => {}
+});
+function GoogleMapsAutocompleteProvider({
+  children,
+  minCharsToSearch = 3,
+  debounceTimeout = 950
+}) {
+  const mapsApi = useGoogleMapsApi();
+  const searchResultsCache = react.useRef({});
+  const resultDetailsCache = react.useRef({});
+  const [state, dispatch] = react.useReducer(googleMapsAutocompleteReducer, {
+    items: [],
+    shouldDisplayEmptyStateWhenNoResults: false
+  });
+  const handleInputChange = useDebounce.useDebouncedCallback(react.useCallback(async value => {
+    if (value.length < minCharsToSearch) return;
+    dispatch({
+      type: 'search-change'
+    });
+
+    // If the user types the same value as the previous search, we don't need to call the API again
+    const predictionsPromise = searchResultsCache.current[value] ? Promise.resolve({
+      results: searchResultsCache.current[value],
+      status: 'OK'
+    }) : mapsApi.autoComplete.getPlacePredictions(value);
+    try {
+      const {
+        results,
+        status
+      } = await predictionsPromise;
+      if (status !== 'OK') {
+        dispatch({
+          type: 'search-error'
+        });
+        return;
+      }
+
+      // 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
+        }
+      });
+    } catch (error) {
+      dispatch({
+        type: 'search-error'
+      });
+    }
+  }, [mapsApi.autoComplete, minCharsToSearch]), debounceTimeout);
+  const handleSelectItem = react.useCallback(async (item, onChange) => {
+    // This case should never happen but it's here to avoid a TS error
+    if (!item?.place_id) {
+      if (onChange) onChange(undefined);
+      return;
+    }
+    dispatch({
+      type: 'select-result'
+    });
+    try {
+      // If we already have the details in cache, we don't need to fetch them again
+      const placePromise = resultDetailsCache.current[item.place_id] ? Promise.resolve(resultDetailsCache.current[item.place_id]) : mapsApi.placesService.getDetails(item.place_id).then(({
+        result
+      }) => result);
+      const place = await placePromise;
+      if (!place) {
+        dispatch({
+          type: 'select-result-error'
+        });
+        if (onChange) onChange(undefined);
+        return;
+      }
+      dispatch({
+        type: 'select-result-success',
+        payload: {
+          result: place
+        }
+      });
+      const 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);
+    } catch (error) {
+      dispatch({
+        type: 'select-result-error'
+      });
+      if (onChange) onChange(undefined);
+    }
+  }, [mapsApi.placesService]);
+  const api = react.useMemo(() => ({
+    state,
+    onSelectItem: handleSelectItem,
+    onInputChange: handleInputChange
+  }), [handleInputChange, handleSelectItem, state]);
+  return /*#__PURE__*/jsxRuntime.jsx(GoogleMapsAutocompleteContext.Provider, {
+    value: api,
+    children: children
+  });
+}
+
+function useGoogleMapsAutocomplete() {
+  const context = react.useContext(GoogleMapsAutocompleteContext);
+  if (!context) {
+    throw new Error('<GoogleMapsAutocompleteProvider> missing in the react tree');
+  }
+  return context;
+}
+
+function InputAddressOption({
+  item
+}) {
+  const sharedTransform = {
+    style: {
+      transform: [{
+        translateY: 4
+      }]
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Autocomplete.Option, {
+    item: item,
+    children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+      space: "kitt.2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        _web: sharedTransform,
+        _ios: sharedTransform,
+        _android: sharedTransform,
+        children: /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
+          icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.MapPinIcon, {}),
+          color: "black"
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(View, {
+        flexShrink: 1,
+        children: /*#__PURE__*/jsxRuntime.jsxs(Typography.Text, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+            variant: "bold",
+            children: item.structured_formatting.main_text
+          }), item.structured_formatting.secondary_text ? /*#__PURE__*/jsxRuntime.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(' ')
+    }
+  };
+}
+
+function InputAddress({
+  initialValue,
+  itemToString = defaultItemToString,
+  errorElement,
+  emptyResultsElement,
+  onChange,
+  ...props
+}) {
+  const {
+    state,
+    onInputChange,
+    onSelectItem
+  } = useGoogleMapsAutocomplete();
+
+  // 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
+  const formattedInitialValue = initialValue ? formatInitialValueToAutocompletePrediction(initialValue, 'initial-value-placeId') : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(Autocomplete, {
+    itemToString: itemToString,
+    initialValue: formattedInitialValue,
+    checkSelectedItem: (selectedItem, item) => selectedItem?.place_id === item.place_id,
+    right: state.isLoadingSearch || state.isLoadingResultDetails ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(LoaderIcon, {}),
+      color: "kitt.black"
+    }) : undefined,
+    errorElement: state.hasSearchError || state.hasSelectResultError ? errorElement : null,
+    emptyResultsElement: state.items.length === 0 ? emptyResultsElement : null,
+    onInputChange: v => {
+      onInputChange(v);
+    },
+    onChange: v => {
+      onSelectItem(v, onChange);
+    },
+    children: state.items.map(item => /*#__PURE__*/jsxRuntime.jsx(InputAddressOption, {
+      item: item
+    }, item.place_id))
+  });
+}
+InputAddress.Option = InputAddressOption;
+
 const InputEmail = /*#__PURE__*/react.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
@@ -4088,39 +4854,6 @@ function InputField({
   });
 }
 
-function getIconColor(state, disabled) {
-  if (disabled) return 'black-light';
-  switch (state) {
-    case 'invalid':
-      return 'danger';
-    case 'valid':
-      return 'success';
-    default:
-      return undefined;
-  }
-}
-function InputIcon({
-  icon,
-  state,
-  disabled
-}) {
-  const theme = useTheme();
-  const color = getIconColor(state, disabled);
-  return /*#__PURE__*/jsxRuntime.jsx(TypographyIcon, {
-    color: color,
-    icon: icon,
-    size: theme.kitt.forms.input.icon.size
-  });
-}
-
-function InputPressable({
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(reactNative.Pressable, {
-    ...props
-  });
-}
-
 const InputPassword = /*#__PURE__*/react.forwardRef(({
   isPasswordDefaultVisible,
   right,
@@ -5821,6 +6554,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
           },
@@ -6045,6 +6803,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderRadius: theme.dialogModal.borderRadius
         },
         forms: {
+          autocomplete: {
+            optionsContainer: {
+              borderRadius: theme.forms.autocomplete.optionsContainer.borderRadius
+            }
+          },
           input: {
             borderRadius: theme.forms.input.borderRadius
           },
@@ -6303,6 +7066,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: {
@@ -6408,6 +7176,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           overlayPadding: theme.dialogModal.overlayPadding
         },
         forms: {
+          autocomplete: {
+            option: {
+              verticalPadding: theme.forms.autocomplete.option.verticalPadding
+            }
+          },
           datePicker: {
             padding: theme.forms.input.padding
           },
@@ -6879,16 +7652,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
+              }
             }
           }
         }
@@ -7288,7 +8063,7 @@ function webUseSelectReducer(state, actionAndChanges, options) {
     changes
   } = actionAndChanges;
   switch (type) {
-    case downshift.useSelect.stateChangeTypes.ItemClick:
+    case Downshift.useSelect.stateChangeTypes.ItemClick:
       if (!options.keepOpenOnChange) return changes;
       return {
         ...changes,
@@ -7323,7 +8098,7 @@ function Picker({
     getMenuProps,
     highlightedIndex,
     getItemProps
-  } = downshift.useSelect({
+  } = Downshift.useSelect({
     items,
     initialSelectedItem: initialValueIndex > -1 ? items[initialValueIndex] : undefined,
     initialIsOpen: isInitialOpen,
@@ -8002,10 +8777,12 @@ function BlockSection({
   });
 }
 function DemoSection({
-  children
+  children,
+  ...props
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     marginBottom: "kitt.16",
+    ...props,
     children: /*#__PURE__*/jsxRuntime.jsx(StorySection, {
       internalIsDemoSection: true,
       title: "Demo",
@@ -8909,6 +9686,7 @@ exports.useToken = nativeBase.useToken;
 exports.useWindowSize = reactNative.useWindowDimensions;
 exports.ActionCard = ActionCard;
 exports.Actions = Actions;
+exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.BottomSheet = BottomSheet;
 exports.Button = Button;
@@ -8924,11 +9702,14 @@ exports.ExternalLink = ExternalLink;
 exports.FlatList = FlatList;
 exports.Flex = Flex;
 exports.FullscreenModal = FullscreenModal;
+exports.GoogleMapsApiKeyProvider = GoogleMapsApiKeyProvider;
+exports.GoogleMapsAutocompleteProvider = GoogleMapsAutocompleteProvider;
 exports.HStack = HStack;
 exports.Highlight = Highlight;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Image = Image;
+exports.InputAddress = InputAddress;
 exports.InputEmail = InputEmail;
 exports.InputFeedback = InputFeedback;
 exports.InputField = InputField;