@ornikar/kitt-universal 31.3.2-canary.2f602b2cfade63278a988a7f253e6de89bdee0e8.0 → 31.3.2-canary.a176fae6a745e6f1b650fe56c3dca27af6b8816f.0

package/dist/index.es.web.js

@@ -2863,7 +2863,7 @@ function ActionCardDisabled(_ref) {
   });
 }
 
-var _excluded$Q = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
+var _excluded$R = ["children", "variant", "borderVariant", "borderRadius", "disabled", "isHovered", "isPressed", "isFocused"];
 function ActionCard(_ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
@@ -2876,7 +2876,7 @@ function ActionCard(_ref) {
     isHovered = _ref.isHovered,
     isPressed = _ref.isPressed,
     isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$Q);
+    props = _objectWithoutProperties(_ref, _excluded$R);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     children: disabled ? /*#__PURE__*/jsx(ActionCardDisabled, {
       borderRadius: borderRadius,
@@ -3208,7 +3208,7 @@ var getTypographyTypeWithAncestorValue = function (type, typographyTypeInContext
   return !!isAllValuesUndefined && !!typographyTypeInContext ? typographyTypeInContext : type;
 };
 
-var _excluded$P = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$Q = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyVariantContext = /*#__PURE__*/createContext(undefined);
@@ -3333,7 +3333,7 @@ var TypographyBase = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     } : _ref2$type,
     variant = _ref2.variant,
     color = _ref2.color,
-    otherProps = _objectWithoutProperties(_ref2, _excluded$P);
+    otherProps = _objectWithoutProperties(_ref2, _excluded$Q);
   var sx = useSx();
 
   // ancestors
@@ -3495,12 +3495,12 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$O = ["color", "size"],
+var _excluded$P = ["color", "size"],
   _excluded2$6 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
     size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   var colorValue = getTypographyColorValue(color);
   var sx = useSx();
   var _sx = sx({
@@ -3540,7 +3540,7 @@ var getButtonTextColorByType = function (type, variant, isHovered, isPressed, is
   return "".concat(baseKey, ".default");
 };
 
-var _excluded$N = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
+var _excluded$O = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused", "innerSpacing", "size"];
 function ButtonContentChildren(_ref) {
   var type = _ref.type,
     icon = _ref.icon,
@@ -3640,7 +3640,7 @@ function ButtonContent(_ref2) {
     _ref2.isFocused;
     var innerSpacing = _ref2.innerSpacing,
     size = _ref2.size,
-    props = _objectWithoutProperties(_ref2, _excluded$N);
+    props = _objectWithoutProperties(_ref2, _excluded$O);
   var color = getButtonTextColorByType(type, variant, isHovered, isPressed, isDisabled);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -3941,7 +3941,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$M = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$N = ["as", "onPress", "disabled", "icon", "stretch"];
 var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -3952,7 +3952,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$M);
+    props = _objectWithoutProperties(_ref, _excluded$N);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -4030,7 +4030,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$L = ["children", "layout", "reversed"];
+var _excluded$M = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -4062,7 +4062,7 @@ function Actions(_ref) {
     reversed = _ref$reversed === void 0 ? {
       base: false
     } : _ref$reversed,
-    props = _objectWithoutProperties(_ref, _excluded$L);
+    props = _objectWithoutProperties(_ref, _excluded$M);
   var shouldReverse = typeof reversed === 'boolean' ? {
     base: !!reversed
   } : createResponsiveStyleFromProp(reversed, true, false);
@@ -4115,7 +4115,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$K = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
+var _excluded$L = ["size", "round", "light", "sizeVariant", "width", "height", "dark", "disabled"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -4178,7 +4178,7 @@ function Avatar(_ref2) {
     height = _ref2.height,
     dark = _ref2.dark,
     disabled = _ref2.disabled,
-    props = _objectWithoutProperties(_ref2, _excluded$K);
+    props = _objectWithoutProperties(_ref2, _excluded$L);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -4260,17 +4260,18 @@ function useStaticBottomSheet(Content) {
   };
 }
 
+var overflowHidden = "kitt-u_overflowHidden_otm3u3";
 function useBlockBodyScroll(shouldBlockScroll, isInitialRender) {
   useEffect(function () {
     if (shouldBlockScroll) {
-      document.body.style.overflow = 'hidden';
+      document.body.classList.add(overflowHidden);
     } else if (!isInitialRender) {
-      document.body.style.overflow = '';
+      document.body.classList.remove(overflowHidden);
     }
     return function () {
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- When leaving the website, document.body can be null
       if (document.body) {
-        document.body.style.overflow = '';
+        document.body.classList.remove(overflowHidden);
       }
     };
   }, [shouldBlockScroll, isInitialRender]);
@@ -4363,7 +4364,7 @@ var CardModalRotationContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   }));
 });
 
-var _excluded$J = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$K = ["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";
@@ -4402,7 +4403,7 @@ function CardModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$K);
   // 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);
@@ -4443,13 +4444,13 @@ function CardModalAnimation(_ref) {
   }));
 }
 
-var _excluded$I = ["children", "visible", "onClose", "onExited"];
+var _excluded$J = ["children", "visible", "onClose", "onExited"];
 function CardModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -4474,12 +4475,12 @@ function CardModalBehaviour(_ref) {
   });
 }
 
-var _excluded$H = ["children", "padding"];
+var _excluded$I = ["children", "padding"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 'kitt.4' : _ref$padding,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({
     showsVerticalScrollIndicator: false,
     _contentContainerStyle: {
@@ -4490,7 +4491,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$G = ["children", "padding", "hasSeparator"];
+var _excluded$H = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -4500,7 +4501,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$G);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -4544,7 +4545,7 @@ var getButtonTypeAndVariant = function (iconColor) {
   }
 };
 
-var _excluded$F = ["color", "ariaLabel"];
+var _excluded$G = ["color", "ariaLabel"];
 /**
  * @deprecated IconButton should only be used as a navigation button
  * Other use cases should use a <Button> component with an icon
@@ -4553,7 +4554,7 @@ function IconButton(_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color;
     _ref.ariaLabel;
-    var props = _objectWithoutProperties(_ref, _excluded$F);
+    var props = _objectWithoutProperties(_ref, _excluded$G);
   var _getButtonTypeAndVari = getButtonTypeAndVariant(color),
     legacyColorToType = _getButtonTypeAndVari.type,
     legacyColorToVariant = _getButtonTypeAndVari.variant;
@@ -4660,7 +4661,7 @@ function CardModalHeader(props) {
   return /*#__PURE__*/jsx(TopNavBar, _objectSpread({}, props));
 }
 
-var _excluded$E = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
+var _excluded$F = ["backgroundColor", "maxWidth", "withoutShadow", "children"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -4668,7 +4669,7 @@ function CardModal(_ref) {
     maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
     withoutShadow = _ref.withoutShadow,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$F);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -4884,11 +4885,11 @@ function ChoiceItemContainer(_ref) {
   }));
 }
 
-var _excluded$D = ["direction", "contentContainerStyle"];
+var _excluded$E = ["direction", "contentContainerStyle"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
     contentContainerStyle = _ref.contentContainerStyle,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true,
@@ -4963,7 +4964,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$C = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$D = ["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";
@@ -5002,7 +5003,7 @@ function DialogModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   // 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);
@@ -5045,13 +5046,13 @@ function DialogModalAnimation(_ref) {
   }));
 }
 
-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 +5083,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$A = ["stretch"];
+var _excluded$B = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -5122,7 +5123,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 +5160,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 +5170,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 +5265,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 +5348,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 +5369,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 +5493,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 +5511,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 +5545,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 +5752,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 +5762,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 +6078,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 +6096,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 +6236,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 +6350,85 @@ 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", "children"];
+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,
+    children = _ref.children,
+    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 child = children(item);
+      return /*#__PURE__*/cloneElement(child, {
+        key: child.key,
+        item: item
+      });
+    })
+  }));
+}
+InputAddress.Option = InputAddressOption;
+
 var GoogleMapsApiKeyContext = /*#__PURE__*/createContext(undefined);
 function GoogleMapsApiKeyProvider(_ref) {
   var children = _ref.children,
@@ -6754,7 +6834,7 @@ function useGoogleMapsAutocomplete() {
   return context;
 }
 
-function InputAddressOption(_ref) {
+function InputAddressOptionLegacy(_ref) {
   var item = _ref.item;
   var sharedTransform = {
     style: {
@@ -6763,7 +6843,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 +6903,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 +6937,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 +13913,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