@ornikar/kitt-universal 16.4.1 → 16.4.2

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

@@ -1878,7 +1878,7 @@ var isTypographyHeader = function (type, isHeaderTypographyInContext) {
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$L = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$K = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -1928,7 +1928,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$L);
+    otherProps = _objectWithoutProperties(_ref, _excluded$K);
   var sx = useSx();
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
@@ -2033,11 +2033,11 @@ function Icon(_ref) {
   });
 }
 
-var _excluded$K = ["color"],
+var _excluded$J = ["color"],
   _excluded2$7 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-    props = _objectWithoutProperties(_ref, _excluded$K);
+    props = _objectWithoutProperties(_ref, _excluded$J);
   var sx = useSx();
   var colorStyle = sx({
     color: getTypographyColorValue(color)
@@ -2081,7 +2081,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$J = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$I = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -2156,7 +2156,7 @@ function ButtonContent(_ref3) {
     isHovered = _ref3.isHovered,
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
-    var props = _objectWithoutProperties(_ref3, _excluded$J);
+    var props = _objectWithoutProperties(_ref3, _excluded$I);
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -2377,7 +2377,7 @@ function LoaderIcon(_ref) {
   });
 }
 
-var _excluded$I = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$H = ["as", "onPress", "disabled", "icon", "stretch"];
 function ActionsItem(_ref) {
   var as = _ref.as,
     onPress = _ref.onPress,
@@ -2388,7 +2388,7 @@ function ActionsItem(_ref) {
       base: true,
       medium: false
     } : _ref$stretch,
-    props = _objectWithoutProperties(_ref, _excluded$I);
+    props = _objectWithoutProperties(_ref, _excluded$H);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isLoading = _useState2[0],
@@ -2459,7 +2459,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$H = ["children", "layout", "reversed"];
+var _excluded$G = ["children", "layout", "reversed"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -2488,7 +2488,7 @@ function Actions(_ref) {
   var children = _ref.children,
     layout = _ref.layout,
     reversed = _ref.reversed,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$G);
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
   var currentAlignSelf = getCurrentAlignSelf(layout);
@@ -2537,7 +2537,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$G = ["size", "round", "light", "sizeVariant"];
+var _excluded$F = ["size", "round", "light", "sizeVariant"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -2576,7 +2576,7 @@ function Avatar(_ref2) {
     round = _ref2.round,
     light = _ref2.light,
     sizeVariant = _ref2.sizeVariant,
-    props = _objectWithoutProperties(_ref2, _excluded$G);
+    props = _objectWithoutProperties(_ref2, _excluded$F);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -2727,7 +2727,7 @@ function CardModalRotationContainer(props) {
   }, props));
 }
 
-var _excluded$F = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$E = ["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";
@@ -2766,7 +2766,7 @@ function CardModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$F);
+    props = _objectWithoutProperties(_ref, _excluded$E);
   var theme = useTheme();
   var animation = theme.kitt.cardModal.animation;
   var sharedProps = {
@@ -2799,11 +2799,11 @@ function CardModalAnimation(_ref) {
   }));
 }
 
-var _excluded$E = ["children"],
+var _excluded$D = ["children"],
   _excluded2$6 = ["children", "visible", "onClose", "onExited"];
 function CardModalScrollContainer(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$E);
+    props = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/jsx(ScrollView, _objectSpread(_objectSpread({}, props), {}, {
     children: children
   }));
@@ -2844,7 +2844,7 @@ function CardModalBehaviour(_ref2) {
   });
 }
 
-var _excluded$D = ["children", "paddingX", "paddingY"];
+var _excluded$C = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -2854,7 +2854,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$D);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: paddingX,
     paddingY: paddingY
@@ -2863,7 +2863,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$C = ["children", "padding", "hasSeparator"];
+var _excluded$B = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -2873,7 +2873,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$C);
+    props = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -2887,7 +2887,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$B = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$A = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -2900,7 +2900,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -2938,7 +2938,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$A = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
+var _excluded$z = ["backgroundColor", "maxWidth", "withoutShadow", "children", "header", "body", "footer"];
 function CardModal(_ref) {
   var _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? 'kitt.uiBackgroundLight' : _ref$backgroundColor,
@@ -2949,7 +2949,7 @@ function CardModal(_ref) {
     header = _ref.header,
     body = _ref.body,
     footer = _ref.footer,
-    props = _objectWithoutProperties(_ref, _excluded$A);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -3134,10 +3134,10 @@ function ChoiceItemContainer(_ref) {
   });
 }
 
-var _excluded$z = ["direction"];
+var _excluded$y = ["direction"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -3209,7 +3209,7 @@ var ChoicesElements = {
   ButtonChoices: ButtonChoices
 };
 
-var _excluded$y = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$x = ["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";
@@ -3248,7 +3248,7 @@ function DialogModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$y);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var theme = useTheme();
   var animation = theme.kitt.dialogModal.animation;
   var sharedProps = {
@@ -3283,13 +3283,13 @@ function DialogModalAnimation(_ref) {
   }));
 }
 
-var _excluded$x = ["children", "visible", "onClose", "onExited"];
+var _excluded$w = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -3320,7 +3320,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$w = ["stretch"];
+var _excluded$v = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -3361,7 +3361,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$w);
+    props = _objectWithoutProperties(_ref2, _excluded$v);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -3398,7 +3398,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$v = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$u = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$5 = ["phoneNumber", "children"],
   _excluded3$4 = ["phoneNumber", "children"],
   _excluded4$3 = ["emailAddress", "children"];
@@ -3408,7 +3408,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$v);
+    rest = _objectWithoutProperties(_ref, _excluded$u);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -3503,14 +3503,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$u = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$t = ["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$u);
+    rest = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     href: href,
     hrefAttrs: (openLinkBehavior === null || openLinkBehavior === void 0 ? void 0 : openLinkBehavior.web) === 'targetSelf' ? undefined : {
@@ -3557,7 +3557,7 @@ function InputTextContainer(props) {
   }, props));
 }
 
-var _excluded$t = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var _excluded$s = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
 var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     right = _ref.right;
@@ -3577,7 +3577,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
     multiline = _ref.multiline,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$t);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -3693,10 +3693,10 @@ function AutocompleteItemsListContainer(_ref) {
   });
 }
 
-var _excluded$s = ["children"];
+var _excluded$r = ["children"];
 function AutocompleteOption(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: {
       base: 'kitt.2',
@@ -3708,7 +3708,7 @@ function AutocompleteOption(_ref) {
   }));
 }
 
-var _excluded$r = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex"],
+var _excluded$q = ["children", "name", "disabled", "placeholder", "isInitialOpen", "initialValue", "containerProps", "filterItemBasedOnCurrentInputValue", "checkSelectedItem", "itemToString", "right", "onChange", "onFocus", "onBlur", "onInputChange", "onSelectItem", "onOuterPress", "errorElement", "emptyResultsElement", "inputTestID", "listContainerTestID", "zIndex"],
   _excluded2$4 = ["onClick", "onPress"],
   _excluded3$3 = ["onKeyDown", "onFocus", "onBlur", "onChange"],
   _excluded4$2 = ["onClick", "onPress", "role", "aria-selected"];
@@ -3741,7 +3741,7 @@ function Autocomplete(_ref) {
     listContainerTestID = _ref$listContainerTes === void 0 ? 'kitt.Autocomplete.listContainer' : _ref$listContainerTes,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var childrenArray = Children.toArray(_children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
@@ -4255,7 +4255,7 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$q = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var _excluded$p = ["id", "value", "testID", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "returnKeyType", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
 var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -4273,7 +4273,7 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     onSubmitEditing = _ref.onSubmitEditing;
-    _objectWithoutProperties(_ref, _excluded$q);
+    _objectWithoutProperties(_ref, _excluded$p);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -4416,10 +4416,10 @@ var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$p = ["value"];
+var _excluded$o = ["value"];
 var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
@@ -4867,7 +4867,7 @@ function formatInitialValueToAutocompletePrediction(address, placeId) {
   };
 }
 
-var _excluded$o = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
+var _excluded$n = ["initialValue", "itemToString", "errorElement", "emptyResultsElement", "onChange"];
 function InputAddress(_ref) {
   var initialValue = _ref.initialValue,
     _ref$itemToString = _ref.itemToString,
@@ -4875,7 +4875,7 @@ function InputAddress(_ref) {
     errorElement = _ref.errorElement,
     emptyResultsElement = _ref.emptyResultsElement,
     _onChange = _ref.onChange;
-    _objectWithoutProperties(_ref, _excluded$o);
+    _objectWithoutProperties(_ref, _excluded$n);
   var _useGoogleMapsAutocom = useGoogleMapsAutocomplete(),
     state = _useGoogleMapsAutocom.state,
     _onInputChange = _useGoogleMapsAutocom.onInputChange,
@@ -4965,11 +4965,11 @@ function InputField(_ref) {
   });
 }
 
-var _excluded$n = ["isPasswordDefaultVisible", "right"];
+var _excluded$m = ["isPasswordDefaultVisible", "right"];
 var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var _useState = useState(Boolean(isPasswordDefaultVisible)),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
@@ -4997,7 +4997,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$m = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
+var _excluded$l = ["returnKeyType", "autoComplete", "phoneNumberLength", "value", "onChange"];
 function isPhoneNumberValid(number) {
   return isValidNumber(number);
 }
@@ -5012,7 +5012,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     phoneNumberLength = _ref$phoneNumberLengt === void 0 ? 10 : _ref$phoneNumberLengt,
     value = _ref.value,
     onChange = _ref.onChange,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -5451,7 +5451,7 @@ function RadioButton(_ref) {
   });
 }
 
-var _excluded$l = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
+var _excluded$k = ["children", "stretch", "value", "disabled", "onFocus", "onBlur", "onChange"];
 function RadioButtonGroupItem(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return /*#__PURE__*/jsx(RadioButton, _objectSpread({}, props));
@@ -5464,7 +5464,7 @@ function RadioButtonGroup(_ref2) {
     onFocus = _ref2.onFocus,
     onBlur = _ref2.onBlur,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$l);
+    props = _objectWithoutProperties(_ref2, _excluded$k);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -5506,13 +5506,13 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var _excluded$k = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
+var _excluded$j = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 function FullscreenModalBody(_ref) {
   var children = _ref.children,
     shouldHandleBottomNotch = _ref.shouldHandleBottomNotch,
     style = _ref.style,
     shouldHandleTopNotch = _ref.shouldHandleTopNotch,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom,
     top = _useSafeAreaInsets.top;
@@ -5529,14 +5529,14 @@ function FullscreenModalBody(_ref) {
   }));
 }
 
-var _excluded$j = ["shouldHandleBottomNotch", "hasSeparator", "children"];
+var _excluded$i = ["shouldHandleBottomNotch", "hasSeparator", "children"];
 function FullscreenModalFooter(_ref) {
   var _ref$shouldHandleBott = _ref.shouldHandleBottomNotch,
     shouldHandleBottomNotch = _ref$shouldHandleBott === void 0 ? true : _ref$shouldHandleBott,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     bottom = _useSafeAreaInsets.bottom;
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
@@ -5553,7 +5553,7 @@ function FullscreenModalFooter(_ref) {
   }));
 }
 
-var _excluded$i = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
+var _excluded$h = ["children", "appear", "visible", "unmountOnExit", "isAnimationEnabled", "onEnter", "onEntered", "onExit", "onExited", "onClose"];
 var slideInFromBottomEnter = "kitt-u_slideInFromBottomEnter_s1717rto";
 var slideInFromBottomEnterActive = "kitt-u_slideInFromBottomEnterActive_sux6xgc";
 var slideInFromBottomExit = "kitt-u_slideInFromBottomExit_sl0lsxt";
@@ -5592,7 +5592,7 @@ function FullscreenModalAnimation(_ref) {
     onExit = _ref.onExit,
     onExited = _ref.onExited,
     onClose = _ref.onClose,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var theme = useTheme();
   var animation = theme.kitt.fullscreenModal.animation;
   var sharedProps = {
@@ -5619,13 +5619,13 @@ function FullscreenModalAnimation(_ref) {
   }));
 }
 
-var _excluded$h = ["children", "visible", "onClose", "onExited"];
+var _excluded$g = ["children", "visible", "onClose", "onExited"];
 function FullscreenModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -5669,7 +5669,7 @@ function FullscreenModalContainer(_ref) {
   });
 }
 
-var _excluded$g = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
+var _excluded$f = ["hasSeparator", "isTransparent", "title", "children", "right", "left", "shouldHandleTopNotch"];
 function FullscreenModalHeader(_ref) {
   var _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
@@ -5680,7 +5680,7 @@ function FullscreenModalHeader(_ref) {
     left = _ref.left,
     _ref$shouldHandleTopN = _ref.shouldHandleTopNotch,
     shouldHandleTopNotch = _ref$shouldHandleTopN === void 0 ? true : _ref$shouldHandleTopN,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var _useSafeAreaInsets = useSafeAreaInsets(),
     top = _useSafeAreaInsets.top;
   var hasRight = Boolean(right);
@@ -5768,7 +5768,7 @@ function Highlight(_ref) {
   });
 }
 
-var _excluded$f = ["color", "isDisabled"];
+var _excluded$e = ["color", "isDisabled"];
 function getBackgroundColor$1(color, isDisabled) {
   if (isDisabled) {
     return 'kitt.iconButton.disabled.backgroundColor';
@@ -5786,7 +5786,7 @@ function getBackgroundColor$1(color, isDisabled) {
 function Background(_ref) {
   var color = _ref.color,
     isDisabled = _ref.isDisabled,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
@@ -5977,10 +5977,10 @@ function useKittMapConfig() {
   return context;
 }
 
-var _excluded$e = ["children"];
+var _excluded$d = ["children"];
 function ListItemContent(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     alignSelf: "center",
     flexBasis: "0%",
@@ -5991,14 +5991,14 @@ function ListItemContent(_ref) {
   }));
 }
 
-var _excluded$d = ["children", "side"],
+var _excluded$c = ["children", "side"],
   _excluded2$3 = ["children", "align"];
 // Handles the vertical alignment of the side elements of the list item
 function ListItemSideContainer(_ref) {
   var children = _ref.children,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? 'left' : _ref$side,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     flexDirection: "row",
     marginLeft: side === 'right' ? 'kitt.2' : undefined,
@@ -6019,7 +6019,7 @@ function ListItemSideContent(_ref2) {
   }));
 }
 
-var _excluded$c = ["children", "withPadding", "borders", "left", "right", "onPress"];
+var _excluded$b = ["children", "withPadding", "borders", "left", "right", "onPress"];
 function ListItem(_ref) {
   var children = _ref.children,
     withPadding = _ref.withPadding,
@@ -6027,7 +6027,7 @@ function ListItem(_ref) {
     left = _ref.left,
     right = _ref.right,
     onPress = _ref.onPress,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    rest = _objectWithoutProperties(_ref, _excluded$b);
   var Wrapper = onPress ? Pressable$2 : Fragment$1;
   var wrapperProps = onPress ? _objectSpread({
     accessibilityRole: 'button',
@@ -7744,6 +7744,21 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             shadowRadius: theme.dialogModal.shadow.radius
           }
         },
+        picker: {
+          web: {
+            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: {
@@ -7909,7 +7924,7 @@ function KittNativeBaseProvider(_ref) {
   });
 }
 
-var _excluded$b = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
+var _excluded$a = ["children", "visible", "appear", "onExited", "onEnter", "onExit", "onClose"];
 function SimpleContainer(_ref) {
   var children = _ref.children;
   return children;
@@ -7923,7 +7938,7 @@ function NavigationModalBehaviour(_ref2) {
     onEnter = _ref2.onEnter,
     onExit = _ref2.onExit,
     onClose = _ref2.onClose,
-    props = _objectWithoutProperties(_ref2, _excluded$b);
+    props = _objectWithoutProperties(_ref2, _excluded$a);
   var AnimationComponent = useBreakpointValue({
     base: FullscreenModalAnimation,
     small: CardModalAnimation
@@ -8130,16 +8145,19 @@ function PickerItem(_ref2) {
   });
 }
 
-var _excluded$a = ["children", "testID"];
 // This item is for Android only, iOS uses its own implementation and web is not supported yet
 function PickerOption(_ref) {
   var children = _ref.children,
-    testID = _ref.testID;
-    _objectWithoutProperties(_ref, _excluded$a);
+    testID = _ref.testID,
+    isHighlighted = _ref.isHighlighted,
+    isSelected = _ref.isSelected;
   return /*#__PURE__*/jsx(Typography.Text, {
     testID: testID,
     base: "body",
-    children: children
+    children: typeof children === 'function' ? children({
+      isHighlighted: isHighlighted,
+      isSelected: isSelected
+    }) : children
   });
 }
 
@@ -8160,6 +8178,10 @@ function webUseSelectReducer(state, actionAndChanges, options) {
 var _excluded$9 = ["onClick"],
   _excluded2$2 = ["ref"],
   _excluded3$2 = ["onClick", "aria-selected"];
+var enter = "kitt-u_enter_ereraf";
+var enterActive = "kitt-u_enterActive_e1jmsjrm";
+var exit = "kitt-u_exit_e1mwnccz";
+var exitActive = "kitt-u_exitActive_e1004d1h";
 function Picker(_ref) {
   var children = _ref.children,
     renderTrigger = _ref.renderTrigger,
@@ -8191,13 +8213,13 @@ function Picker(_ref) {
           if (onClose) onClose();
         }
       },
-      onStateChange: function onStateChange() {
+      onSelectedItemChange: function onSelectedItemChange(changes) {
         if (!onChange) return;
-        if (selectedItem === null) {
+        if (changes.selectedItem === null) {
           onChange(undefined);
           return;
         }
-        onChange(selectedItem);
+        onChange(changes.selectedItem);
       }
     }),
     isOpen = _useSelect.isOpen,
@@ -8251,52 +8273,76 @@ function Picker(_ref) {
         maxWidth: {
           base: 350
         },
-        opacity: isOpen ? 1 : 0,
-        backgroundColor: "kitt.picker.web.optionsContainer.backgroundColor",
-        borderRadius: "kitt.picker.web.optionsContainer.borderRadius",
-        shadow: "kitt.picker.web.optionsContainer.shadow",
         paddingY: "kitt.2",
         _web: {
           style: {
             transform: [{
               translate3d: "".concat(tooltipX, "px, ").concat(tooltipY, "px, 0")
             }],
-            visibility: isOpen ? 'visible' : 'hidden',
             transitionDuration: '300ms',
             transitionProperty: 'opacity',
             transitionTimingFunction: 'ease-in-out'
           }
         },
-        children: isOpen ? childrenArray.map(function (child, index) {
-          var currentValue = items[index];
-          var _getItemProps = getItemProps({
-              item: currentValue,
-              index: index,
-              disabled: disabled
-            }),
-            onClick = _getItemProps.onClick,
-            ariaSelected = _getItemProps['aria-selected'],
-            itemProps = _objectWithoutProperties(_getItemProps, _excluded3$2);
-          return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({}, itemProps), {}, {
-            accessibilityState: {
-              selected: ariaSelected
-            },
-            onPress: onClick,
-            children: function (_ref2) {
-              var isHovered = _ref2.isHovered,
-                isFocused = _ref2.isFocused,
-                isPressed = _ref2.isPressed;
-              return /*#__PURE__*/jsx(PickerItem, {
-                isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
-                isHighlighted: highlightedIndex === index,
-                isHovered: isHovered,
-                isFocused: isFocused,
-                isPressed: isPressed,
-                children: child
-              });
+        children: /*#__PURE__*/jsx(View, {
+          opacity: isOpen ? 1 : 0,
+          backgroundColor: "kitt.picker.web.optionsContainer.backgroundColor",
+          borderRadius: "kitt.picker.web.optionsContainer.borderRadius",
+          shadow: "kitt.picker.web.optionsContainer.shadow",
+          _web: {
+            style: {
+              transform: [{
+                translateY: isOpen ? 0 : 8
+              }],
+              visibility: isOpen ? 'visible' : 'hidden',
+              transitionDuration: '300ms',
+              transitionTimingFunction: 'ease-in-out'
             }
-          }), itemProps.id);
-        }) : null
+          },
+          children: /*#__PURE__*/jsx(CSSTransition, {
+            unmountOnExit: true,
+            timeout: 300,
+            "in": isOpen,
+            classNames: {
+              enter: enter,
+              enterActive: enterActive,
+              exit: exit,
+              exitActive: exitActive
+            },
+            children: /*#__PURE__*/jsx(View, {
+              children: childrenArray.map(function (child, index) {
+                var currentValue = items[index];
+                var _getItemProps = getItemProps({
+                    item: currentValue,
+                    index: index,
+                    disabled: disabled
+                  }),
+                  onClick = _getItemProps.onClick,
+                  ariaSelected = _getItemProps['aria-selected'],
+                  itemProps = _objectWithoutProperties(_getItemProps, _excluded3$2);
+                return /*#__PURE__*/jsx(Pressable, _objectSpread(_objectSpread({}, itemProps), {}, {
+                  accessibilityState: {
+                    selected: ariaSelected
+                  },
+                  onPress: onClick,
+                  children: function (_ref2) {
+                    var isHovered = _ref2.isHovered,
+                      isFocused = _ref2.isFocused,
+                      isPressed = _ref2.isPressed;
+                    return /*#__PURE__*/jsx(PickerItem, {
+                      isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
+                      isHighlighted: highlightedIndex === index,
+                      isHovered: isHovered,
+                      isFocused: isFocused,
+                      isPressed: isPressed,
+                      children: child
+                    });
+                  }
+                }), itemProps.id);
+              })
+            })
+          })
+        })
       }))
     })]
   });