@ornikar/kitt-universal 31.4.0 → 32.0.0

package/dist/index.es.web.js

@@ -11,10 +11,11 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import { SpinnerGapRegularIcon, UserRegularIcon, XRegularIcon, ArrowLeftRegularIcon, CaretUpFillIcon, CaretDownFillIcon, MapPinRegularIcon, EyeClosedRegularIcon, EyeRegularIcon, CheckCircleFillIcon, CaretDownRegularIcon, CaretRightRegularIcon, InfoRegularIcon, WarningRegularIcon, CheckRegularIcon, WarningCircleRegularIcon, ArrowCounterClockwiseRegularIcon, InfoFillIcon, WarningCircleFillIcon, WarningFillIcon } from '@ornikar/kitt-icons/phosphor';
-import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, Linking, Pressable as Pressable$2, StyleSheet, useWindowDimensions } from 'react-native';
+import { Animated, Easing, ScrollView as ScrollView$2, View as View$2, StyleSheet, Modal, Linking, Pressable as Pressable$2, useWindowDimensions } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import { createPortal } from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
+import Animated$1, { useAnimatedStyle, withTiming, Easing as Easing$1, runOnJS, useSharedValue, withSpring, interpolateColor, useAnimatedProps, withDelay, withRepeat, interpolate, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { parse } from '@twemoji/parser';
 import Downshift, { useSelect } from 'downshift';
 import { getDocumentAsync } from 'expo-document-picker';
@@ -22,7 +23,6 @@ import { launchImageLibraryAsync } from 'expo-image-picker';
 import { useDebouncedCallback } from 'use-debounce';
 import { Loader } from '@googlemaps/js-api-loader';
 import { parseNumber, getCountryCallingCode, isValidNumber } from 'libphonenumber-js';
-import Animated$1, { useAnimatedStyle, withSpring, withTiming, useSharedValue, interpolateColor, Easing as Easing$1, useAnimatedProps, withDelay, withRepeat, interpolate, runOnJS, ReducedMotionConfig, ReduceMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Svg, { Circle as Circle$1 } from 'react-native-svg';
 import { useFloating, autoUpdate, offset, autoPlacement, shift, arrow } from '@floating-ui/react-dom';
@@ -4364,29 +4364,29 @@ var CardModalRotationContainer = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 
 var _excluded$J = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
-var contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
-var contentAnimatioExit$1 = "kitt-u_contentAnimatioExit_cyjczep";
-var contentAnimatioExitActive$1 = "kitt-u_contentAnimatioExitActive_cpsy3dt";
-var contentAnimationClassNames$1 = {
-  appear: contentAnimationEnter$1,
-  appearActive: contentAnimatioEnterActive$1,
-  enter: contentAnimationEnter$1,
-  enterActive: contentAnimatioEnterActive$1,
-  exit: contentAnimatioExit$1,
-  exitActive: contentAnimatioExitActive$1
+var contentAnimationEnter = "kitt-u_contentAnimationEnter_c11xxy4r";
+var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_cl52117";
+var contentAnimatioExit = "kitt-u_contentAnimatioExit_cyjczep";
+var contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_cpsy3dt";
+var contentAnimationClassNames = {
+  appear: contentAnimationEnter,
+  appearActive: contentAnimatioEnterActive,
+  enter: contentAnimationEnter,
+  enterActive: contentAnimatioEnterActive,
+  exit: contentAnimatioExit,
+  exitActive: contentAnimatioExitActive
 };
-var opacityEnter$2 = "kitt-u_opacityEnter_o1ae40dx";
-var opacityEnterActive$2 = "kitt-u_opacityEnterActive_o1t4vl7b";
-var opacityExit$2 = "kitt-u_opacityExit_ogyytm1";
-var opacityExitActive$2 = "kitt-u_opacityExitActive_o18xvk52";
-var opacityClassNames$2 = {
-  appear: opacityEnter$2,
-  appearActive: opacityEnterActive$2,
-  enter: opacityEnter$2,
-  enterActive: opacityEnterActive$2,
-  exit: opacityExit$2,
-  exitActive: opacityExitActive$2
+var opacityEnter$1 = "kitt-u_opacityEnter_o1ae40dx";
+var opacityEnterActive$1 = "kitt-u_opacityEnterActive_o1t4vl7b";
+var opacityExit$1 = "kitt-u_opacityExit_ogyytm1";
+var opacityExitActive$1 = "kitt-u_opacityExitActive_o18xvk52";
+var opacityClassNames$1 = {
+  appear: opacityEnter$1,
+  appearActive: opacityEnterActive$1,
+  enter: opacityEnter$1,
+  enterActive: opacityEnterActive$1,
+  exit: opacityExit$1,
+  exitActive: opacityExitActive$1
 };
 function CardModalAnimation(_ref) {
   var children = _ref.children,
@@ -4420,7 +4420,7 @@ function CardModalAnimation(_ref) {
     children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$2,
+      classNames: opacityClassNames$1,
       children: /*#__PURE__*/jsx(Overlay, {
         ref: overlayRef,
         onPress: onClose
@@ -4428,7 +4428,7 @@ function CardModalAnimation(_ref) {
     })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
       nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames$1,
+      classNames: contentAnimationClassNames,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
@@ -4963,95 +4963,174 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$C = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
-var contentAnimationEnter = "kitt-u_contentAnimationEnter_c1i0gle8";
-var contentAnimatioEnterActive = "kitt-u_contentAnimatioEnterActive_c1jmfkjw";
-var contentAnimatioExit = "kitt-u_contentAnimatioExit_cwjstxl";
-var contentAnimatioExitActive = "kitt-u_contentAnimatioExitActive_c1almbvu";
-var contentAnimationClassNames = {
-  appear: contentAnimationEnter,
-  appearActive: contentAnimatioEnterActive,
-  enter: contentAnimationEnter,
-  enterActive: contentAnimatioEnterActive,
-  exit: contentAnimatioExit,
-  exitActive: contentAnimatioExitActive
-};
-var opacityEnter$1 = "kitt-u_opacityEnter_o9rkayr";
-var opacityEnterActive$1 = "kitt-u_opacityEnterActive_od7zvm9";
-var opacityExit$1 = "kitt-u_opacityExit_opddo9j";
-var opacityExitActive$1 = "kitt-u_opacityExitActive_o15v6ove";
-var opacityClassNames$1 = {
-  appear: opacityEnter$1,
-  appearActive: opacityEnterActive$1,
-  enter: opacityEnter$1,
-  enterActive: opacityEnterActive$1,
-  exit: opacityExit$1,
-  exitActive: opacityExitActive$1
-};
+function NativeOpacityAnimation(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var hasRunAnimationRef = useRef(false);
+  useEffect(function () {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (!visible && hasRunAnimationRef.current) {
+      onExited();
+    }
+  }
+  var opacityStyle = useAnimatedStyle(function () {
+    var _theme$kitt$dialogMod = theme.kitt.dialogModal.animation.overlay,
+      duration = _theme$kitt$dialogMod.duration,
+      easing = _theme$kitt$dialogMod.easing;
+    var x1 = easing.x1,
+      y1 = easing.y1,
+      x2 = easing.x2,
+      y2 = easing.y2;
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }, function (isFinished) {
+        if (!isFinished) return;
+        runOnJS(handleAnimationFinished)();
+      })
+    };
+  }, [theme, visible, handleAnimationFinished]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [StyleSheet.absoluteFillObject, opacityStyle],
+    children: children
+  });
+}
+
+function NativeRotationAnimation(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    onEntered = _ref.onEntered,
+    onExited = _ref.onExited;
+  var theme = useTheme();
+  var hasRunAnimationRef = useRef(false);
+  var rotation = useSharedValue(0.8);
+  useEffect(function () {
+    if (visible) {
+      hasRunAnimationRef.current = true;
+    }
+  }, [visible]);
+  function handleAnimationFinished() {
+    if (visible) {
+      if (onEntered) onEntered();
+    }
+    if (!visible && hasRunAnimationRef.current) onExited();
+  }
+  var animatedStyle = useAnimatedStyle(function () {
+    var _theme$kitt$dialogMod = theme.kitt.dialogModal.animation.content,
+      duration = _theme$kitt$dialogMod.duration,
+      easing = _theme$kitt$dialogMod.easing;
+    var x1 = easing.x1,
+      y1 = easing.y1,
+      x2 = easing.x2,
+      y2 = easing.y2;
+    rotation.value = withTiming(visible ? 0 : 5, {
+      duration: duration,
+      easing: Easing$1.bezier(x1, y1, x2, y2)
+    }, function (isFinished) {
+      if (!isFinished) return;
+      runOnJS(handleAnimationFinished)();
+    });
+    return {
+      opacity: withTiming(visible ? 1 : 0, {
+        duration: duration,
+        easing: Easing$1.bezier(x1, y1, x2, y2)
+      }),
+      transform: [{
+        scale: withTiming(visible ? 1 : 0.8, {
+          duration: duration,
+          easing: Easing$1.bezier(x1, y1, x2, y2)
+        })
+      }, {
+        rotateZ: "".concat(rotation.value, "deg")
+      }]
+    };
+  }, [theme, visible, rotation, handleAnimationFinished]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [animatedStyle],
+    children: children
+  });
+}
+
 function DialogModalAnimation(_ref) {
-  var children = _ref.children,
-    _ref$appear = _ref.appear,
-    appear = _ref$appear === void 0 ? true : _ref$appear,
-    visible = _ref.visible,
-    _ref$unmountOnExit = _ref.unmountOnExit,
-    unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
-    _ref$isAnimationEnabl = _ref.isAnimationEnabled,
-    isAnimationEnabled = _ref$isAnimationEnabl === void 0 ? true : _ref$isAnimationEnabl,
+  var visible = _ref.visible,
+    children = _ref.children,
     onEnter = _ref.onEnter,
     onEntered = _ref.onEntered,
     onExit = _ref.onExit,
     onExited = _ref.onExited,
-    onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$C);
-  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
-  // See https://github.com/reactjs/react-transition-group/issues/918
-  var overlayRef = useRef(null);
-  var contentRef = useRef(null);
-  var theme = useTheme();
-  var animation = theme.kitt.dialogModal.animation;
-  var sharedProps = {
-    "in": visible,
-    appear: appear,
-    unmountOnExit: unmountOnExit
+    onClose = _ref.onClose;
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isModalVisible = _useState2[0],
+    setIsModalVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isContentVisible = _useState4[0],
+    setIsContentVisible = _useState4[1];
+  var handleAnimationExited = function () {
+    setIsModalVisible(false);
+    // Android doesn't handle the onDismiss callback on the modal, we need to call it manually
   };
-  return /*#__PURE__*/jsxs(View, _objectSpread(_objectSpread({}, props), {}, {
-    height: "100%",
-    justifyContent: "center",
-    children: [/*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      nodeRef: overlayRef,
-      timeout: isAnimationEnabled ? animation.overlay.duration : 0,
-      classNames: opacityClassNames$1,
-      children: /*#__PURE__*/jsx(Overlay, {
-        ref: overlayRef,
-        onPress: onClose
-      })
-    })), /*#__PURE__*/jsx(CSSTransition, _objectSpread(_objectSpread({}, sharedProps), {}, {
-      nodeRef: contentRef,
-      timeout: isAnimationEnabled ? animation.content.duration : 0,
-      classNames: contentAnimationClassNames,
-      onEnter: onEnter,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExited: onExited,
-      children: /*#__PURE__*/jsx(View, {
-        ref: contentRef,
-        alignItems: "center",
-        paddingX: "kitt.dialogModal.overlayPadding.horizontal",
-        paddingY: "kitt.dialogModal.overlayPadding.vertical",
-        margin: "auto",
-        children: children
-      })
-    }))]
-  }));
+  useEffect(function () {
+    if (!(!visible && isContentVisible)) return;
+    if (onExit) onExit();
+    setIsContentVisible(false);
+  }, [visible, isContentVisible, onExit]);
+  return /*#__PURE__*/jsx(Modal, {
+    transparent: true,
+    supportedOrientations: ['landscape', 'portrait'],
+    visible: isModalVisible,
+    onShow: function () {
+      if (onEnter) onEnter();
+      setIsContentVisible(true);
+    },
+    onDismiss: function () {
+      if (onExited) onExited();
+    },
+    children: /*#__PURE__*/jsxs(View
+    // This is an ugly workaround to make the Modal calculate its height correctly on Android.
+    // This ugly workaround is used in FullScreenModalAnimation and CardModalAnimation as well
+    // TODO [expo@>=53]: Check if still needed
+    , {
+      height: undefined,
+      position: "relative",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [/*#__PURE__*/jsx(NativeOpacityAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        children: /*#__PURE__*/jsx(Overlay, {
+          onPress: onClose
+        })
+      }), /*#__PURE__*/jsx(NativeRotationAnimation, {
+        visible: isContentVisible,
+        onExited: handleAnimationExited,
+        onEntered: onEntered,
+        children: /*#__PURE__*/jsx(View, {
+          paddingX: "kitt.dialogModal.overlayPadding.horizontal",
+          paddingY: "kitt.dialogModal.overlayPadding.vertical",
+          children: children
+        })
+      })]
+    })
+  });
 }
 
-var _excluded$B = ["children", "visible", "onClose", "onExited"];
+var _excluded$C = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -5082,7 +5161,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$A = ["stretch"];
+var _excluded$B = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -5122,7 +5201,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$A);
+    props = _objectWithoutProperties(_ref2, _excluded$B);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -5159,7 +5238,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$z = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$A = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$5 = ["phoneNumber", "children"],
   _excluded3$4 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -5169,7 +5248,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -5264,14 +5343,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$y = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$z = ["as", "href", "openLinkBehavior", "onPress"];
 function ExternalLink(_ref) {
   var Component = _ref.as,
     href = _ref.href,
     _ref$openLinkBehavior = _ref.openLinkBehavior,
     openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$y);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     accessibilityRole: "link",
     href: href,
@@ -5347,7 +5426,7 @@ function InputTextContainer(props) {
   }, props));
 }
 
-var _excluded$x = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
+var _excluded$y = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -5368,7 +5447,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     multiline = _ref.multiline,
     height = _ref.height,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
@@ -5492,12 +5571,12 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$w = ["children", "testID"];
+var _excluded$x = ["children", "testID"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
     _ref$testID = _ref.testID,
     testID = _ref$testID === void 0 ? 'kitt.Autocomplete.option' : _ref$testID,
-    props = _objectWithoutProperties(_ref, _excluded$w);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -5510,7 +5589,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-var _excluded$v = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
+var _excluded$w = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex", "maxItemContainerHeight"],
   _excluded2$4 = ["onClick", "onPress"],
   _excluded3$3 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -5544,7 +5623,7 @@ function Autocomplete(_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var childrenArray = Children.toArray(children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -5751,7 +5830,7 @@ function getBorderColor$1(_ref) {
   return 'kitt.forms.checkbox.default.borderColor';
 }
 
-var _excluded$u = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
+var _excluded$v = ["checked", "hitSlop", "children", "disabled", "onChange", "onBlur", "onFocus"];
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     _ref$hitSlop = _ref.hitSlop,
@@ -5761,7 +5840,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   var theme = useTheme();
   return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({
     hitSlop: hitSlop
@@ -6077,7 +6156,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$t = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$u = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "enterKeyHint", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -6095,7 +6174,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$t);
+    _objectWithoutProperties(_ref, _excluded$u);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -6235,10 +6314,10 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$s = ["value"];
+var _excluded$t = ["value"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
@@ -6349,6 +6428,84 @@ function ImagePicker(_ref) {
   });
 }
 
+function InputAddressOption(_ref) {
+  var item = _ref.item,
+    mainText = _ref.mainText,
+    secondaryText = _ref.secondaryText;
+  var sharedTransform = {
+    style: {
+      transform: 'translateY(4px)'
+    }
+  };
+  return /*#__PURE__*/jsx(Autocomplete.Option, {
+    item: item,
+    testID: "kitt.InputAddressOption.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(MapPinRegularIcon, {}),
+          color: "black"
+        })
+      }), /*#__PURE__*/jsx(View, {
+        flexShrink: 1,
+        children: /*#__PURE__*/jsxs(Typography.Text, {
+          children: [/*#__PURE__*/jsx(Typography.Text, {
+            variant: "bold",
+            children: mainText
+          }), secondaryText ? /*#__PURE__*/jsxs(Typography.Text, {
+            color: "black-light",
+            variant: "bold",
+            children: [' ', secondaryText]
+          }) : null]
+        })
+      })]
+    })
+  });
+}
+
+var _excluded$s = ["errorElement", "initialValue", "emptyResultsElement", "onChange", "items", "isLoading", "hasError", "onInputChange", "onSelectItem", "convertInitialValue", "renderItem"];
+function InputAddress(_ref) {
+  var errorElement = _ref.errorElement,
+    initialValue = _ref.initialValue,
+    emptyResultsElement = _ref.emptyResultsElement,
+    _onChange = _ref.onChange,
+    items = _ref.items,
+    isLoading = _ref.isLoading,
+    hasError = _ref.hasError,
+    _onInputChange = _ref.onInputChange,
+    onSelectItem = _ref.onSelectItem,
+    convertInitialValue = _ref.convertInitialValue,
+    renderItem = _ref.renderItem,
+    props = _objectWithoutProperties(_ref, _excluded$s);
+  var formattedInitialValue = initialValue ? convertInitialValue(initialValue) : undefined;
+  return /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
+    initialValue: formattedInitialValue,
+    right: isLoading ? /*#__PURE__*/jsx(Icon, {
+      icon: /*#__PURE__*/jsx(LoaderIcon, {}),
+      color: "kitt.black"
+    }) : undefined,
+    errorElement: hasError ? errorElement : null,
+    emptyResultsElement: items.length === 0 ? emptyResultsElement : null,
+    onInputChange: function (value) {
+      return _onInputChange(value);
+    },
+    onChange: function (item) {
+      return onSelectItem(item, _onChange);
+    },
+    children: items.map(function (item) {
+      var itemElement = renderItem(item);
+      return /*#__PURE__*/cloneElement(itemElement, {
+        item: item
+      });
+    })
+  }));
+}
+InputAddress.Option = InputAddressOption;
+
 var GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
 function GoogleMapsApiKeyProvider(_ref) {
   var children = _ref.children,
@@ -6754,7 +6911,7 @@ function useGoogleMapsAutocomplete() {
   return context;
 }
 
-function InputAddressOption(_ref) {
+function InputAddressOptionLegacy(_ref) {
   var item = _ref.item;
   var sharedTransform = {
     style: {
@@ -6763,7 +6920,7 @@ function InputAddressOption(_ref) {
   };
   return /*#__PURE__*/jsx(Autocomplete.Option, {
     item: item,
-    testID: "kitt.InputAddressOption.item",
+    testID: "kitt.InputAddressOptionLegacy.item",
     children: /*#__PURE__*/jsxs(HStack, {
       space: "kitt.2",
       children: [/*#__PURE__*/jsx(View, {
@@ -6823,7 +6980,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
 }
 
 var _excluded$r = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
-function InputAddress(_ref) {
+function InputAddressLegacy(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
     itemToString = _ref$itemToString === void 0 ? defaultItemToString : _ref$itemToString,
@@ -6857,13 +7014,13 @@ function InputAddress(_ref) {
       onSelectItem(v, _onChange);
     },
     children: state.items.map(function (item) {
-      return /*#__PURE__*/jsx(InputAddressOption, {
+      return /*#__PURE__*/jsx(InputAddressOptionLegacy, {
         item: item
       }, item.place_id);
     })
   }));
 }
-InputAddress.Option = InputAddressOption;
+InputAddressLegacy.Option = InputAddressOptionLegacy;
 
 var InputEmail = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/jsx(InputText, _objectSpread({
@@ -13833,5 +13990,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, ChromaticReducedMotionDecorator, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, ChromaticReducedMotionDecorator, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputAddressLegacy, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationBottomSheet, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Sticker, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, TopNavBar, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.web.js.map