@ornikar/kitt-universal 9.30.2 → 9.32.0

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

@@ -4,7 +4,7 @@ import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Cen
 export { useBreakpointValue, useClipboard, useToken } from 'native-base';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
-import React, { useContext, createContext, cloneElement, forwardRef, useRef, useEffect, useState, useMemo, Children, Fragment as Fragment$1, useCallback } from 'react';
+import React, { useContext, createContext, cloneElement, forwardRef, useRef, useEffect, useState, useMemo, Children, useReducer, Fragment as Fragment$1, useCallback } from 'react';
 import Animated, { withSpring, useSharedValue, useAnimatedStyle, interpolateColor, withTiming, Easing as Easing$1, runOnJS, useDerivedValue, useAnimatedProps, withDelay, withRepeat, interpolate } from 'react-native-reanimated';
 import styled, { useTheme, css, withTheme as withTheme$1, ThemeProvider } from 'styled-components/native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -140,7 +140,7 @@ var KittBreakpointNameEnum;
   KittBreakpointNameEnum["WIDE"] = "wide";
 })(KittBreakpointNameEnum || (KittBreakpointNameEnum = {}));
 
-var _excluded$y = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$B = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -203,7 +203,7 @@ function Typography(_ref) {
     } : _ref$type,
     variant = _ref.variant,
     color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$y);
+    otherProps = _objectWithoutProperties(_ref, _excluded$B);
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var defaultColor = useTypographyDefaultColor();
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -321,11 +321,11 @@ function Icon(_ref5) {
   });
 }
 
-var _excluded$x = ["color"],
+var _excluded$A = ["color"],
   _excluded2$5 = ["color"];
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$A);
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
@@ -366,7 +366,7 @@ var getTextColorByType = function (type, variant, isHovered, isPressed) {
   }
 };
 
-var _excluded$w = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
+var _excluded$z = ["type", "variant", "isDisabled", "icon", "children", "isHovered", "isPressed", "isFocused"];
 function ButtonIcon(_ref) {
   var icon = _ref.icon,
     color = _ref.color,
@@ -441,7 +441,7 @@ function ButtonContent(_ref3) {
     isHovered = _ref3.isHovered,
     isPressed = _ref3.isPressed;
     _ref3.isFocused;
-    var props = _objectWithoutProperties(_ref3, _excluded$w);
+    var props = _objectWithoutProperties(_ref3, _excluded$z);
   var color = isDisabled ? 'black-light' : getTextColorByType(type, variant, isHovered, isPressed);
   return /*#__PURE__*/jsx(View, {
     _web: {
@@ -774,7 +774,7 @@ function useMatchWindowSize(options) {
   }, options);
 }
 
-var _excluded$v = ["as", "onPress", "disabled", "icon", "stretch"];
+var _excluded$y = ["as", "onPress", "disabled", "icon", "stretch"];
 function getCurrentStretchValue(isStretch, isMedium) {
   // Stretch will follow the value passed from the component occurence if defined
   if (isStretch) return isStretch;
@@ -786,7 +786,7 @@ function ActionsItem(_ref) {
     disabled = _ref.disabled,
     icon = _ref.icon,
     stretch = _ref.stretch,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   var isMedium = useMatchWindowSize({
     minWidth: KittBreakpoints.MEDIUM
   });
@@ -863,7 +863,7 @@ function ActionsButton(_ref) {
   }, props));
 }
 
-var _excluded$u = ["children", "layout"];
+var _excluded$x = ["children", "layout"];
 function getCurrentLayout(layout) {
   if (!layout) return {
     base: 'stretch',
@@ -883,7 +883,7 @@ function getCurrentDirection(layout) {
 function Actions(_ref) {
   var children = _ref.children,
     layout = _ref.layout,
-    props = _objectWithoutProperties(_ref, _excluded$u);
+    props = _objectWithoutProperties(_ref, _excluded$x);
   var currentAlignItems = getCurrentLayout(layout);
   var currentDirection = getCurrentDirection(layout);
   return /*#__PURE__*/jsx(Stack, _objectSpread(_objectSpread({
@@ -918,6 +918,7 @@ var lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -1002,7 +1003,7 @@ function getInitials(firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
 }
 
-var _excluded$t = ["size", "round", "light", "sizeVariant"];
+var _excluded$w = ["size", "round", "light", "sizeVariant"];
 function AvatarContent(_ref) {
   var size = _ref.size,
     src = _ref.src,
@@ -1041,7 +1042,7 @@ function Avatar(_ref2) {
     round = _ref2.round,
     light = _ref2.light,
     sizeVariant = _ref2.sizeVariant,
-    props = _objectWithoutProperties(_ref2, _excluded$t);
+    props = _objectWithoutProperties(_ref2, _excluded$w);
   var currentSize = getCurrentSize({
     size: size,
     sizeVariant: sizeVariant
@@ -1458,11 +1459,11 @@ function CardModalAnimation(_ref) {
   });
 }
 
-var _excluded$s = ["children"],
+var _excluded$v = ["children"],
   _excluded2$4 = ["children", "visible", "onClose", "onExited"];
 function ScrollContainer(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$s);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   if (Platform.OS !== 'web') {
     return /*#__PURE__*/jsx(View, {
       children: children
@@ -1508,7 +1509,7 @@ function CardModalBehaviour(_ref2) {
   });
 }
 
-var _excluded$r = ["children", "paddingX", "paddingY"];
+var _excluded$u = ["children", "paddingX", "paddingY"];
 function CardModalBody(_ref) {
   var children = _ref.children,
     _ref$paddingX = _ref.paddingX,
@@ -1518,7 +1519,7 @@ function CardModalBody(_ref) {
     } : _ref$paddingX,
     _ref$paddingY = _ref.paddingY,
     paddingY = _ref$paddingY === void 0 ? 'kitt.4' : _ref$paddingY,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({
     paddingX: paddingX,
     paddingY: paddingY
@@ -1527,7 +1528,7 @@ function CardModalBody(_ref) {
   }));
 }
 
-var _excluded$q = ["children", "padding", "hasSeparator"];
+var _excluded$t = ["children", "padding", "hasSeparator"];
 function CardModalFooter(_ref) {
   var children = _ref.children,
     _ref$padding = _ref.padding,
@@ -1537,7 +1538,7 @@ function CardModalFooter(_ref) {
     } : _ref$padding,
     _ref$hasSeparator = _ref.hasSeparator,
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     marginTop: "kitt.2",
     padding: padding,
@@ -1551,7 +1552,7 @@ function CardModalFooter(_ref) {
   }));
 }
 
-var _excluded$p = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
+var _excluded$s = ["children", "title", "paddingBottom", "hasSeparator", "right", "left"];
 function CardModalHeader(_ref) {
   var children = _ref.children,
     title = _ref.title,
@@ -1564,7 +1565,7 @@ function CardModalHeader(_ref) {
     hasSeparator = _ref$hasSeparator === void 0 ? true : _ref$hasSeparator,
     right = _ref.right,
     left = _ref.left,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   var defaultContainerPadding = {
     base: 'kitt.4',
     medium: 'kitt.6'
@@ -1602,7 +1603,7 @@ function CardModalHeader(_ref) {
   }));
 }
 
-var _excluded$o = ["children", "backgroundColor", "maxWidth", "withoutShadow"];
+var _excluded$r = ["children", "backgroundColor", "maxWidth", "withoutShadow"];
 function CardModal(_ref) {
   var children = _ref.children,
     _ref$backgroundColor = _ref.backgroundColor,
@@ -1610,7 +1611,7 @@ function CardModal(_ref) {
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 'kitt.cardModal.maxWidth' : _ref$maxWidth,
     withoutShadow = _ref.withoutShadow,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     backgroundColor: backgroundColor,
@@ -1874,10 +1875,10 @@ var ChoiceItemContainer = /*#__PURE__*/styled(View$2).withConfig({
   return css(["margin-bottom:", "px;"], $isLast ? 0 : column);
 });
 
-var _excluded$n = ["direction"];
+var _excluded$q = ["direction"];
 function ChoicesContainer(_ref) {
   var direction = _ref.direction,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   if (direction === 'row') {
     return /*#__PURE__*/jsx(ScrollView$2, _objectSpread({
       horizontal: true
@@ -2165,13 +2166,13 @@ function DialogModalAnimation(_ref) {
   });
 }
 
-var _excluded$m = ["children", "visible", "onClose", "onExited"];
+var _excluded$p = ["children", "visible", "onClose", "onExited"];
 function DialogModalBehaviour(_ref) {
   var children = _ref.children,
     visible = _ref.visible,
     onClose = _ref.onClose,
     onExited = _ref.onExited,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalBehaviourVisible = _useState2[0],
@@ -2202,7 +2203,7 @@ function DialogModalBehaviour(_ref) {
   });
 }
 
-var _excluded$l = ["stretch"];
+var _excluded$o = ["stretch"];
 function DialogModal(_ref) {
   var illustration = _ref.illustration,
     title = _ref.title,
@@ -2243,7 +2244,7 @@ DialogModal.ModalBehaviour = DialogModalBehaviour;
 function DialogModalButton(_ref2) {
   var _ref2$stretch = _ref2.stretch,
     stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
-    props = _objectWithoutProperties(_ref2, _excluded$l);
+    props = _objectWithoutProperties(_ref2, _excluded$o);
   return /*#__PURE__*/jsx(Actions.Button, _objectSpread({
     stretch: stretch
   }, props));
@@ -2278,7 +2279,7 @@ function Emoji(_ref) {
   });
 }
 
-var _excluded$k = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
+var _excluded$n = ["as", "appScheme", "appValue", "onPress", "onOpenAppError"],
   _excluded2$3 = ["phoneNumber", "children"],
   _excluded3$2 = ["phoneNumber", "children"],
   _excluded4$1 = ["emailAddress", "children"];
@@ -2288,7 +2289,7 @@ function ExternalAppLink(_ref) {
     appValue = _ref.appValue,
     onPress = _ref.onPress,
     onOpenAppError = _ref.onOpenAppError,
-    rest = _objectWithoutProperties(_ref, _excluded$k);
+    rest = _objectWithoutProperties(_ref, _excluded$n);
   var href = "".concat(appScheme, ":").concat(appValue);
   var handleOnPress = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -2385,14 +2386,14 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$j = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$m = ["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$j);
+    rest = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
     onPress: function handleOnPress(e) {
       if (onPress) {
@@ -3418,167 +3419,514 @@ function Checkbox(_ref6) {
   });
 }
 
-/** @deprecated use native-base instead */
-function getInputUIState(_ref) {
-  var isFocused = _ref.isFocused,
-    isDisabled = _ref.isDisabled,
-    formState = _ref.formState;
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
+function prefixWithZero(value) {
+  var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  return "".concat(value).padStart(maxLength, '0');
+}
+function dayFormatter(day) {
+  return prefixWithZero(day);
+}
+function monthFormatter(month) {
+  return prefixWithZero(month);
+}
+function yearFormatter(year) {
+  return prefixWithZero(year, 4);
 }
 
-/** @deprecated this mixin is not SSR compatible */
-var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
-  var theme = _ref.theme,
-    $state = _ref.$state;
-  return $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.input.borderWidth;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.input.borderRadius;
-}, function (_ref4) {
-  var theme = _ref4.theme,
-    $state = _ref4.$state;
-  return theme.kitt.forms.input.states[$state].borderColor;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize, "px");
-}, function (_ref6) {
-  var theme = _ref6.theme,
-    $state = _ref6.$state;
-  return theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states["default"].color;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return Platform.OS === 'web' ? theme.kitt.typography.types.bodies.fontFamily.web.regular : theme.kitt.typography.types.bodies.fontFamily["native"].regular;
-});
+function getDayInInterval(value, minDate, maxDate) {
+  var minValue = minDate ? minDate.getDate() : 1;
+  var maxValue = maxDate ? maxDate.getDate() : 31;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
+function getMonthInInterval(value, minDate, maxDate) {
+  var minValue = minDate ? minDate.getMonth() + 1 : 1;
+  var maxValue = maxDate ? maxDate.getMonth() + 1 : 12;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
+function getYearInInterval(value, minDate, maxDate) {
+  var minValue = minDate ? minDate.getFullYear() : 1;
+  var maxValue = maxDate ? maxDate.getFullYear() : 9999;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
 
-var StyledTypographyText = /*#__PURE__*/styled(Typography.Text).withConfig({
-  displayName: "DatePickerInputPart__StyledTypographyText"
-})(["text-align:center;"]);
-var ViewInput = /*#__PURE__*/styled.View.withConfig({
-  displayName: "DatePickerInputPart__ViewInput"
-})(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, function (_ref) {
-  var theme = _ref.theme;
-  return "".concat(theme.kitt.forms.input.padding.vertical, "px ").concat(theme.kitt.forms.input.padding.horizontal, "px");
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.input.minHeight;
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    $partName = _ref3.$partName;
-  if (!$partName) {
-    return undefined;
+function isNumber(input) {
+  //  Number.isNaN and isNaN are not consistent
+  // eslint-disable-next-line no-restricted-globals
+  return !isNaN(input);
+}
+
+function onDatePartChange(_ref) {
+  var day = _ref.day,
+    month = _ref.month,
+    year = _ref.year,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus;
+  var arrayParts = [day, month, year];
+  var isEverythingUndefined = arrayParts.every(function (v) {
+    return v === undefined;
+  });
+  var isEverythingDefined = arrayParts.every(Boolean);
+
+  // every parts are undefined
+  if (isEverythingUndefined) {
+    if (onFocus) onFocus();
+    onChange(undefined);
+    if (onBlur) onBlur();
+    return;
+  }
+
+  // Do nothing if some input parts are empty
+  if (!isEverythingDefined) {
+    return;
+  }
+  var nextValue = new Date();
+  if (day) nextValue.setDate(day);
+  if (month) nextValue.setMonth(month - 1);
+  if (year) nextValue.setFullYear(year);
+  nextValue.setMinutes(0);
+  nextValue.setHours(0);
+  nextValue.setSeconds(0);
+  nextValue.setMilliseconds(0);
+  if (onFocus) onFocus();
+  onChange(nextValue);
+  if (onBlur) onBlur();
+}
+
+function stringToNumber(text) {
+  if (text.length === 0) return undefined;
+  return parseInt(text, 10);
+}
+
+var keyboardDatePickerReducer = function (state, action) {
+  var handleChange = function (dateParts) {
+    var onFocus = state.onFocus,
+      onBlur = state.onBlur,
+      onChange = state.onChange;
+    onDatePartChange(_objectSpread(_objectSpread({}, dateParts), {}, {
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onChange: onChange
+    }));
+  };
+  switch (action.type) {
+    case 'day-change':
+      {
+        var nextDay = stringToNumber(action.nextDay || '');
+        if (nextDay === undefined || !isNumber(action.nextDay)) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            currentDay: undefined,
+            displayedDay: ''
+          });
+        }
+        handleChange({
+          day: nextDay,
+          month: state.currentMonth,
+          year: state.currentYear
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentDay: nextDay,
+          displayedDay: nextDay.toString()
+        });
+      }
+    case 'month-change':
+      {
+        var nextMonth = stringToNumber(action.nextMonth || '');
+        if (nextMonth === undefined || !isNumber(action.nextMonth)) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            currentMonth: undefined,
+            displayedMonth: ''
+          });
+        }
+        handleChange({
+          day: state.currentDay,
+          month: nextMonth,
+          year: state.currentYear
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentMonth: nextMonth,
+          displayedMonth: nextMonth.toString()
+        });
+      }
+    case 'year-change':
+      {
+        var nextYear = stringToNumber(action.nextYear || '');
+        if (nextYear === undefined || !isNumber(action.nextYear)) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            currentYear: undefined,
+            displayedYear: ''
+          });
+        }
+        handleChange({
+          day: state.currentDay,
+          month: state.currentMonth,
+          year: nextYear
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentYear: nextYear,
+          displayedYear: nextYear.toString()
+        });
+      }
+    case 'day-blur':
+      {
+        var minDate = state.minDate,
+          maxDate = state.maxDate;
+        var nextCurrentDay = getDayInInterval(state.currentDay, minDate, maxDate);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          displayedDay: nextCurrentDay ? dayFormatter(nextCurrentDay) : state.displayedDay
+        });
+      }
+    case 'month-blur':
+      {
+        var _minDate = state.minDate,
+          _maxDate = state.maxDate;
+        var nextCurrentMonth = getMonthInInterval(state.currentMonth, _minDate, _maxDate);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentMonth: nextCurrentMonth,
+          displayedMonth: nextCurrentMonth !== undefined ? monthFormatter(nextCurrentMonth) : state.displayedMonth
+        });
+      }
+    case 'year-blur':
+      {
+        var _minDate2 = state.minDate,
+          _maxDate2 = state.maxDate;
+        var nextCurrentYear = getYearInInterval(state.currentYear, _minDate2, _maxDate2);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          currentYear: nextCurrentYear,
+          displayedYear: nextCurrentYear !== undefined ? yearFormatter(nextCurrentYear) : state.displayedYear
+        });
+      }
+    default:
+      return state;
   }
-  return "".concat(theme.kitt.forms.datePicker[$partName].minWidth, "px");
+};
+
+var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputTextContainer"
+})(["position:relative;"]);
+
+var _excluded$l = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    right = _ref.right;
+    _ref.state;
+    var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    internalForceState = _ref.internalForceState,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$autoCorrect = _ref.autoCorrect,
+    autoCorrect = _ref$autoCorrect === void 0 ? true : _ref$autoCorrect,
+    _ref$textContentType = _ref.textContentType,
+    textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
+    _ref$keyboardType = _ref.keyboardType,
+    keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
+    multiline = _ref.multiline,
+    onSubmitEditing = _ref.onSubmitEditing,
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  var theme = /*#__PURE__*/useTheme();
+  var fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
+  });
+  var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
+  return /*#__PURE__*/jsxs(InputTextContainer, {
+    $isDisabled: disabled,
+    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
+      ref: ref,
+      multiline: multiline,
+      nativeID: id,
+      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
+      keyboardType: keyboardType,
+      autoComplete: autoComplete,
+      autoCorrect: autoCorrect,
+      textContentType: textContentType,
+      fontSize: fontSizeForNativeBase,
+      lineHeight:
+      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && Platform.OS !== 'web' ? 0 : undefined,
+      variant: variant
+    }, props), {}, {
+      onSubmitEditing: multiline ? function () {
+        return null;
+      } : onSubmitEditing
+    })), right ? /*#__PURE__*/jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
+      children: right
+    }) : null]
+  });
 });
-function DatePickerInputPart(_ref4) {
-  var $state = _ref4.$state,
-    placeholder = _ref4.placeholder,
-    value = _ref4.value,
-    partName = _ref4.partName,
-    disabled = _ref4.disabled;
-  return /*#__PURE__*/jsx(ViewInput, {
-    $state: $state,
-    $partName: partName,
-    children: placeholder || value ? /*#__PURE__*/jsx(StyledTypographyText, {
-      color: !value || disabled ? 'black-light' : undefined,
-      children: value || placeholder
-    }) : null
+
+function getCurrentInternalForcedState(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isPressedInternal = _ref.isPressedInternal;
+  if (isDisabled) return 'disabled';
+  if (isHoveredInternal) return 'hover';
+  if (isFocusedInternal) return 'focus';
+  if (isPressedInternal) return 'hover';
+  return 'default';
+}
+var InputPart = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var value = _ref2.value,
+    placeholder = _ref2.placeholder,
+    disabled = _ref2.disabled,
+    isFocusedInternal = _ref2.isFocusedInternal,
+    isHoveredInternal = _ref2.isHoveredInternal,
+    isPressedInternal = _ref2.isPressedInternal,
+    onChange = _ref2.onChange,
+    onBlur = _ref2.onBlur;
+  return /*#__PURE__*/jsx(InputText, {
+    ref: ref,
+    internalForceState: getCurrentInternalForcedState({
+      isDisabled: disabled,
+      isHoveredInternal: isHoveredInternal,
+      isFocusedInternal: isFocusedInternal,
+      isPressedInternal: isPressedInternal
+    }),
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    keyboardType: "numeric",
+    textAlign: "center",
+    onChange: onChange,
+    onBlur: onBlur
+  });
+});
+
+function PartContainer(_ref) {
+  var children = _ref.children,
+    isStretch = _ref.isStretch,
+    width = _ref.width;
+  return /*#__PURE__*/jsx(View, {
+    flex: createResponsiveStyleFromProp(isStretch, 0.33),
+    flexGrow: createResponsiveStyleFromProp(isStretch, 1),
+    width: isStretch ? undefined : width,
+    children: children
   });
 }
 
-function prefixWithZero(value) {
-  return "".concat(value).padStart(2, '0');
+var _excluded$k = ["value", "testID", "id", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onBlur", "onFocus"];
+function KeyboardDatePicker(_ref) {
+  var value = _ref.value,
+    testID = _ref.testID,
+    id = _ref.id,
+    stretch = _ref.stretch,
+    placeholder = _ref.placeholder,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    disabled = _ref.disabled,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isPressedInternal = _ref.isPressedInternal,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus;
+    _objectWithoutProperties(_ref, _excluded$k);
+  var dayRef = useRef(null);
+  var monthRef = useRef(null);
+  var yearRef = useRef(null);
+  var defaultValue = value;
+  var defaultDay = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.getDate();
+  var defaultMonth = defaultValue ? defaultValue.getMonth() + 1 : undefined;
+  var defaultYear = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.getFullYear();
+  var _useReducer = useReducer(keyboardDatePickerReducer, {
+      currentValue: defaultValue,
+      currentDay: defaultDay,
+      currentMonth: defaultMonth,
+      currentYear: defaultYear,
+      displayedDay: defaultDay ? dayFormatter(defaultDay) : '',
+      displayedMonth: defaultMonth ? monthFormatter(defaultMonth) : '',
+      displayedYear: defaultYear ? yearFormatter(defaultYear) : '',
+      minDate: minDate,
+      maxDate: maxDate,
+      onChange: onChange,
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var sharedInputPartProps = {
+    isFocusedInternal: isFocusedInternal,
+    isHoveredInternal: isHoveredInternal,
+    isPressedInternal: isPressedInternal,
+    disabled: disabled
+  };
+  return /*#__PURE__*/jsx(View, {
+    testID: testID,
+    nativeID: id,
+    children: /*#__PURE__*/jsxs(HStack, {
+      space: "kitt.2",
+      children: [/*#__PURE__*/jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.day.minWidth",
+        children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({
+          ref: dayRef
+        }, sharedInputPartProps), {}, {
+          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day,
+          value: state.displayedDay,
+          onChange: function (e) {
+            var nextDay = e.nativeEvent.text;
+            dispatch({
+              type: 'day-change',
+              nextDay: nextDay
+            });
+            if (nextDay.length === 2 && monthRef.current) {
+              monthRef.current.focus();
+            }
+          },
+          onBlur: function () {
+            return dispatch({
+              type: 'day-blur'
+            });
+          }
+        }))
+      }), /*#__PURE__*/jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.month.minWidth",
+        children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({
+          ref: monthRef
+        }, sharedInputPartProps), {}, {
+          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month,
+          value: state.displayedMonth,
+          onChange: function (e) {
+            var nextMonth = e.nativeEvent.text;
+            dispatch({
+              type: 'month-change',
+              nextMonth: e.nativeEvent.text
+            });
+            if (nextMonth.length === 2 && yearRef.current) {
+              yearRef.current.focus();
+            }
+          },
+          onBlur: function () {
+            return dispatch({
+              type: 'month-blur'
+            });
+          }
+        }))
+      }), /*#__PURE__*/jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.year.minWidth",
+        children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({
+          ref: yearRef
+        }, sharedInputPartProps), {}, {
+          placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year,
+          value: state.displayedYear,
+          onChange: function (e) {
+            dispatch({
+              type: 'year-change',
+              nextYear: e.nativeEvent.text
+            });
+          },
+          onBlur: function () {
+            return dispatch({
+              type: 'year-blur'
+            });
+          }
+        }))
+      })]
+    })
+  });
 }
-var PartContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "DatePickerInputs__PartContainer"
-})(["margin-right:", ";", ";"], function (_ref) {
-  var theme = _ref.theme,
-    $isLast = _ref.$isLast;
-  return !$isLast ? "".concat(theme.kitt.spacing * 2, "px") : 0;
-}, function (_ref2) {
-  var $isStretch = _ref2.$isStretch;
-  return $isStretch ? css(["flex:0.33;flex-grow:1;"]) : undefined;
-});
-var DatePickerPressable = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "DatePickerInputs__DatePickerPressable"
-})(["display:flex;flex-direction:row;", ";"], function (_ref3) {
-  var $isStretch = _ref3.$isStretch;
-  if ($isStretch) {
-    return css(["width:100%;"]);
-  }
-  return css(["align-self:baseline;"]);
-});
-function DatePickerInputs(_ref4) {
-  var state = _ref4.state,
-    internalForceState = _ref4.internalForceState,
-    isFocused = _ref4.isFocused,
-    disabled = _ref4.disabled,
-    stretch = _ref4.stretch,
-    id = _ref4.id,
-    testID = _ref4.testID,
-    handleModalOpen = _ref4.handleModalOpen,
-    currentValue = _ref4.currentValue,
-    placeholder = _ref4.placeholder;
-  var currentState = internalForceState || getInputUIState({
-    isFocused: isFocused,
-    isDisabled: Boolean(disabled),
-    formState: state
-  });
-  var sharedPartProps = {
-    disabled: disabled,
-    $state: currentState
+
+function DatePickerInputs(_ref) {
+  var disabled = _ref.disabled,
+    stretch = _ref.stretch,
+    id = _ref.id,
+    testID = _ref.testID,
+    currentValue = _ref.currentValue,
+    placeholder = _ref.placeholder,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isPressedInternal = _ref.isPressedInternal,
+    onPress = _ref.onPress;
+  var sharedInputPartProps = {
+    isFocusedInternal: isFocusedInternal,
+    isHoveredInternal: isHoveredInternal,
+    isPressedInternal: isPressedInternal,
+    disabled: disabled
   };
-  return /*#__PURE__*/jsxs(DatePickerPressable, {
-    $isStretch: stretch,
+  return /*#__PURE__*/jsx(Pressable, {
+    display: "flex",
+    flexDirection: "row",
+    position: "relative",
+    alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'base-line'),
     nativeID: id,
     disabled: disabled,
     testID: testID,
-    onPress: handleModalOpen,
-    children: [/*#__PURE__*/jsx(PartContainer, {
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
-        partName: "day",
-        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day
-      }))
-    }), /*#__PURE__*/jsx(PartContainer, {
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
-        partName: "month",
-        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month
-      }))
-    }), /*#__PURE__*/jsx(PartContainer, {
-      $isLast: true,
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsx(DatePickerInputPart, _objectSpread(_objectSpread({}, sharedPartProps), {}, {
-        partName: "year",
-        value: currentValue ? currentValue.getFullYear() : undefined,
-        placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year
-      }))
-    })]
+    onPress: onPress,
+    children: /*#__PURE__*/jsxs(View, {
+      position: "relative",
+      width: createResponsiveStyleFromProp(stretch, '100%'),
+      children: [/*#__PURE__*/jsxs(HStack, {
+        space: "kitt.2",
+        width: createResponsiveStyleFromProp(stretch, '100%'),
+        children: [/*#__PURE__*/jsx(PartContainer, {
+          isStretch: stretch,
+          width: "kitt.forms.datePicker.day.minWidth",
+          children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({}, sharedInputPartProps), {}, {
+            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day,
+            value: currentValue ? dayFormatter(currentValue.getDate()) : undefined
+          }))
+        }), /*#__PURE__*/jsx(PartContainer, {
+          isStretch: stretch,
+          width: "kitt.forms.datePicker.month.minWidth",
+          children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({}, sharedInputPartProps), {}, {
+            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.month,
+            value: currentValue ? monthFormatter(currentValue.getMonth() + 1) : undefined
+          }))
+        }), /*#__PURE__*/jsx(PartContainer, {
+          isStretch: stretch,
+          width: "kitt.forms.datePicker.year.minWidth",
+          children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({}, sharedInputPartProps), {}, {
+            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.year,
+            value: currentValue ? yearFormatter(currentValue.getFullYear()) : undefined
+          }))
+        })]
+      }), /*#__PURE__*/jsx(View, {
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        top: "0",
+        left: "0"
+      })]
+    })
   });
 }
 
-var _excluded$i = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "setIsFocused", "currentValue", "setCurrentValue", "onChange", "isFocused"];
+var _excluded$j = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
 function DatePickerAndroid(_ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     pickerDefaultDate = _ref.pickerDefaultDate,
     pickerUITestID = _ref.pickerUITestID,
     isDefaultVisible = _ref.isDefaultVisible,
-    setIsFocused = _ref.setIsFocused,
-    currentValue = _ref.currentValue,
-    setCurrentValue = _ref.setCurrentValue,
+    value = _ref.value,
     _onChange = _ref.onChange,
-    isFocused = _ref.isFocused,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentValue = _useState4[0],
+    setCurrentValue = _useState4[1];
   var handleClose = function () {
     if (onBlur) onBlur();
   };
@@ -3606,9 +3954,9 @@ function DatePickerAndroid(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
-    handleModalOpen: handleModalOpen,
     currentValue: currentValue,
-    isFocused: isFocused
+    isFocusedInternal: isFocused,
+    onPress: handleModalOpen
   }, props));
 }
 
@@ -3646,11 +3994,11 @@ function ModalFooter(_ref3) {
   });
 }
 
-var _excluded$h = ["as", "children"];
+var _excluded$i = ["as", "children"];
 function StyleWebWrapper(_ref) {
   var as = _ref.as,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   if (Platform.OS !== 'web') return children;
   // as or default to div. If as is undefined, T is div but typescript is not sure
   return /*#__PURE__*/jsx(as || 'div', _objectSpread(_objectSpread({}, props), {}, {
@@ -3662,7 +4010,7 @@ function PressableIconButtonWebWrapperWithTheme() {
   throw new Error('This component is not supposed to be called in native');
 }
 
-var _excluded$g = ["color", "disabled"];
+var _excluded$h = ["color", "disabled"];
 var PressableIconButtonWebWrapper = /*#__PURE__*/withTheme$1(PressableIconButtonWebWrapperWithTheme);
 var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
   displayName: "PressableIconButton__StyledPressableIconButton"
@@ -3691,7 +4039,7 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 function PressableIconButton(_ref5) {
   var color = _ref5.color,
     disabled = _ref5.disabled,
-    props = _objectWithoutProperties(_ref5, _excluded$g);
+    props = _objectWithoutProperties(_ref5, _excluded$h);
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
     $isWhite: color === 'white',
@@ -4000,7 +4348,7 @@ function PlatformDateTimePicker(_ref) {
   }));
 }
 
-var _excluded$f = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
+var _excluded$g = ["title", "isVisible", "value", "validateButtonLabel", "onClose", "onChange"];
 function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(Modal.Header, {
@@ -4018,7 +4366,7 @@ function ModalPlatformDateTimePicker(_ref2) {
     validateButtonLabel = _ref2.validateButtonLabel,
     onClose = _ref2.onClose,
     onChange = _ref2.onChange,
-    props = _objectWithoutProperties(_ref2, _excluded$f);
+    props = _objectWithoutProperties(_ref2, _excluded$g);
   var _useState = useState(value),
     _useState2 = _slicedToArray(_useState, 2),
     currentValue = _useState2[0],
@@ -4062,18 +4410,21 @@ function ModalPlatformDateTimePicker(_ref2) {
   });
 }
 
-var _excluded$e = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "onChange", "onFocus", "onBlur", "pickerDefaultDate"];
-function DatePicker(_ref) {
+var _excluded$f = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
+function DefaultNativeUIDatePicker(_ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
     pickerUITitle = _ref.pickerUITitle,
     pickerUIValidateButtonLabel = _ref.pickerUIValidateButtonLabel,
     isDefaultVisible = _ref.isDefaultVisible,
+    pickerDefaultDate = _ref.pickerDefaultDate,
+    isFocusedInternal = _ref.isFocusedInternal,
+    isHoveredInternal = _ref.isHoveredInternal,
+    isPressedInternal = _ref.isPressedInternal,
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
-    pickerDefaultDate = _ref.pickerDefaultDate,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var _useState = useState(isDefaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
     isPickerUIVisible = _useState2[0],
@@ -4086,19 +4437,6 @@ function DatePicker(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     currentValue = _useState6[0],
     setCurrentValue = _useState6[1];
-  if (Platform.OS === 'android') {
-    return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
-      pickerDefaultDate: pickerDefaultDate,
-      pickerUITestID: pickerUITestID,
-      isDefaultVisible: isDefaultVisible,
-      currentValue: currentValue,
-      setCurrentValue: setCurrentValue,
-      isFocused: isFocused,
-      setIsFocused: setIsFocused,
-      onChange: onChange,
-      onBlur: onBlur
-    }, props));
-  }
   var handleModalClose = function () {
     if (onBlur) onBlur();
     setIsPickerUIVisible(false);
@@ -4106,13 +4444,15 @@ function DatePicker(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
-      handleModalOpen: function handleModalOpen() {
+      currentValue: currentValue,
+      isFocusedInternal: isFocused || isFocusedInternal,
+      isHoveredInternal: isHoveredInternal,
+      isPressedInternal: isPressedInternal,
+      onPress: function handleModalOpen() {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
-      },
-      currentValue: currentValue,
-      isFocused: isFocused
+      }
     }, props)), /*#__PURE__*/jsx(ModalPlatformDateTimePicker, {
       testID: pickerUITestID,
       value: currentValue,
@@ -4130,73 +4470,44 @@ function DatePicker(_ref) {
   });
 }
 
-var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputTextContainer"
-})(["position:relative;"]);
+var _excluded$e = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
+function NativeUIDatePicker(_ref) {
+  var value = _ref.value,
+    pickerUITestID = _ref.pickerUITestID,
+    isDefaultVisible = _ref.isDefaultVisible,
+    pickerDefaultDate = _ref.pickerDefaultDate,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    props = _objectWithoutProperties(_ref, _excluded$e);
+  if (Platform.OS === 'android') {
+    return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
+      pickerDefaultDate: pickerDefaultDate,
+      pickerUITestID: pickerUITestID,
+      isDefaultVisible: isDefaultVisible,
+      value: value,
+      onChange: onChange,
+      onBlur: onBlur
+    }, props));
+  }
+  return /*#__PURE__*/jsx(DefaultNativeUIDatePicker, _objectSpread({
+    value: value,
+    isDefaultVisible: isDefaultVisible,
+    pickerUITestID: pickerUITestID,
+    onChange: onChange,
+    onBlur: onBlur
+  }, props));
+}
 
-var _excluded$d = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
-var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    right = _ref.right;
-    _ref.state;
-    var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    internalForceState = _ref.internalForceState,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$autoCorrect = _ref.autoCorrect,
-    autoCorrect = _ref$autoCorrect === void 0 ? true : _ref$autoCorrect,
-    _ref$textContentType = _ref.textContentType,
-    textContentType = _ref$textContentType === void 0 ? 'none' : _ref$textContentType,
-    _ref$autoComplete = _ref.autoComplete,
-    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-    _ref$keyboardType = _ref.keyboardType,
-    keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
-    multiline = _ref.multiline,
-    onSubmitEditing = _ref.onSubmitEditing,
+var _excluded$d = ["fillMode"];
+function DatePicker(_ref) {
+  var _ref$fillMode = _ref.fillMode,
+    fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     props = _objectWithoutProperties(_ref, _excluded$d);
-  var theme = /*#__PURE__*/useTheme();
-  var fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
-  });
-  var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    $isDisabled: disabled,
-    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
-      ref: ref,
-      multiline: multiline,
-      nativeID: id,
-      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
-      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
-      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      keyboardType: keyboardType,
-      autoComplete: autoComplete,
-      autoCorrect: autoCorrect,
-      textContentType: textContentType,
-      fontSize: fontSizeForNativeBase,
-      lineHeight:
-      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
-      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
-      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
-      fontWeight: "bodies.regular",
-      fontFamily: "bodies.regular",
-      py: !multiline && Platform.OS !== 'web' ? 0 : undefined,
-      variant: variant
-    }, props), {}, {
-      onSubmitEditing: multiline ? function () {
-        return null;
-      } : onSubmitEditing
-    })), right ? /*#__PURE__*/jsx(View, {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      justifyContent: "center",
-      padding: theme.kitt.forms.input.rightContainer.padding,
-      children: right
-    }) : null]
-  });
-});
+  if (fillMode === 'keyboard') {
+    return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/jsx(NativeUIDatePicker, _objectSpread({}, props));
+}
 
 function InputEmail(props) {
   return /*#__PURE__*/jsx(InputText, _objectSpread({
@@ -5341,6 +5652,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         typography: theme.typography.colors,
         palettes: theme.palettes,
         forms: {
+          input: {
+            states: theme.forms.input.states
+          },
           radioButtonGroup: {
             item: {
               borderColor: theme.forms.radioButtonGroup.item.borderColor,
@@ -5384,6 +5698,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderRadius: theme.dialogModal.borderRadius
         },
         forms: {
+          input: {
+            borderRadius: theme.forms.input.borderRadius
+          },
           radioButtonGroup: {
             item: {
               borderRadius: theme.forms.radioButtonGroup.item.borderRadius
@@ -5415,6 +5732,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderWidth: theme.button.borderWidth
         },
         forms: {
+          input: {
+            borderWidth: theme.forms.input.borderWidth
+          },
           radioButtonGroup: {
             item: {
               borderWidth: theme.forms.radioButtonGroup.item.borderWidth
@@ -5459,6 +5779,21 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           overlayPadding: theme.dialogModal.overlayPadding
         },
         forms: {
+          datePicker: {
+            minHeight: theme.forms.input.minHeight,
+            day: {
+              minWidth: theme.forms.datePicker.day.minWidth
+            },
+            month: {
+              minWidth: theme.forms.datePicker.month.minWidth
+            },
+            year: {
+              minWidth: theme.forms.datePicker.year.minWidth
+            }
+          },
+          input: {
+            minHeight: theme.forms.input.minHeight
+          },
           radioButtonGroup: {
             item: {
               minHeight: theme.forms.radioButtonGroup.item.minHeight
@@ -5503,6 +5838,12 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           overlayPadding: theme.dialogModal.overlayPadding
         },
         forms: {
+          datePicker: {
+            padding: theme.forms.input.padding
+          },
+          input: {
+            padding: theme.forms.input.padding
+          },
           radioButtonGroup: {
             item: {
               padding: theme.forms.radioButtonGroup.item.padding
@@ -5850,12 +6191,13 @@ function ContentPadding(_ref2) {
   }));
 }
 
-var _excluded$6 = ["children", "shouldHandleBottomNotch", "style"];
+var _excluded$6 = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
   displayName: "Body__StyledViewWithPadding"
 })(["padding-top:", "px;padding-bottom:", "px;"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.spacing * 6;
+  var theme = _ref.theme,
+    $insetTop = _ref.$insetTop;
+  return Math.max(theme.kitt.spacing * 6, $insetTop);
 }, function (_ref2) {
   var theme = _ref2.theme,
     $insetBottom = _ref2.$insetBottom;
@@ -5865,12 +6207,16 @@ function Body(_ref3) {
   var children = _ref3.children,
     shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
     style = _ref3.style,
+    shouldHandleTopNotch = _ref3.shouldHandleTopNotch,
     props = _objectWithoutProperties(_ref3, _excluded$6);
   var _useSafeAreaInsets = useSafeAreaInsets(),
-    bottom = _useSafeAreaInsets.bottom;
+    bottom = _useSafeAreaInsets.bottom,
+    top = _useSafeAreaInsets.top;
   var insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  var insetTop = shouldHandleTopNotch ? top : 0;
   return /*#__PURE__*/jsx(StyledViewWithPadding, _objectSpread(_objectSpread({}, props), {}, {
     $insetBottom: insetBottom,
+    $insetTop: insetTop,
     style: style,
     children: children
   }));
@@ -5913,9 +6259,10 @@ function Footer(_ref5) {
 
 var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
   displayName: "Header__HeaderContainer"
-})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.navigationModal.height;
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;padding-top:", "px;", ";"], function (_ref) {
+  var theme = _ref.theme,
+    $insetTop = _ref.$insetTop;
+  return theme.kitt.navigationModal.height + $insetTop;
 }, function (_ref2) {
   var theme = _ref2.theme,
     $isTransparent = _ref2.$isTransparent;
@@ -5930,64 +6277,73 @@ var HeaderContainer = /*#__PURE__*/styled(ContentPadding).withConfig({
     $hasLeft = _ref4.$hasLeft;
   return $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding;
 }, function (_ref5) {
-  var $hasSeparator = _ref5.$hasSeparator;
+  var $insetTop = _ref5.$insetTop;
+  return $insetTop;
+}, function (_ref6) {
+  var $hasSeparator = _ref6.$hasSeparator;
   if (!$hasSeparator) return undefined;
-  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref6) {
-    var theme = _ref6.theme;
+  return css(["border-bottom-width:1px;border-bottom-color:", ";"], function (_ref7) {
+    var theme = _ref7.theme;
     return theme.kitt.colors.separator;
   });
 });
 var Row = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__Row"
-})(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref7) {
-  var $hasContent = _ref7.$hasContent,
-    $hasLeft = _ref7.$hasLeft;
+})(["flex-direction:row;justify-content:", ";align-items:center;"], function (_ref8) {
+  var $hasContent = _ref8.$hasContent,
+    $hasLeft = _ref8.$hasLeft;
   return !$hasContent && !$hasLeft ? 'flex-end' : 'space-between';
 });
 var ButtonContainer = /*#__PURE__*/styled.View.withConfig({
   displayName: "Header__ButtonContainer"
-})(["width:", "px;"], function (_ref8) {
-  var theme = _ref8.theme;
+})(["width:", "px;"], function (_ref9) {
+  var theme = _ref9.theme;
   return theme.kitt.iconButton.width;
 });
 var ChildrenComponent = /*#__PURE__*/styled(View$2).withConfig({
   displayName: "Header__ChildrenComponent"
-})(["flex:1;align-items:center;", ";"], function (_ref9) {
-  var theme = _ref9.theme,
-    $hasLeft = _ref9.$hasLeft,
-    $hasRight = _ref9.$hasRight;
+})(["flex:1;align-items:center;", ";"], function (_ref10) {
+  var theme = _ref10.theme,
+    $hasLeft = _ref10.$hasLeft,
+    $hasRight = _ref10.$hasRight;
   var paddingHorizontal = theme.kitt.spacing * 2;
   return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
 });
 var HeaderTitle = /*#__PURE__*/styled(Typography.Text).withConfig({
   displayName: "Header__HeaderTitle"
-})(["flex:1;text-align:", ";", ";"], function (_ref10) {
-  var $hasLeft = _ref10.$hasLeft,
-    $hasRight = _ref10.$hasRight;
+})(["flex:1;text-align:", ";", ";"], function (_ref11) {
+  var $hasLeft = _ref11.$hasLeft,
+    $hasRight = _ref11.$hasRight;
   if (!$hasLeft && $hasRight) return 'left';
   return 'center';
-}, function (_ref11) {
-  var theme = _ref11.theme,
-    $hasLeft = _ref11.$hasLeft,
-    $hasRight = _ref11.$hasRight;
+}, function (_ref12) {
+  var theme = _ref12.theme,
+    $hasLeft = _ref12.$hasLeft,
+    $hasRight = _ref12.$hasRight;
   var paddingHorizontal = theme.kitt.spacing * 2;
   return css(["padding-right:", "px;padding-left:", "px;"], $hasRight ? paddingHorizontal : 0, $hasLeft ? paddingHorizontal : 0);
 });
-function Header(_ref12) {
-  var _ref12$hasSeparator = _ref12.hasSeparator,
-    hasSeparator = _ref12$hasSeparator === void 0 ? true : _ref12$hasSeparator,
-    isTransparent = _ref12.isTransparent,
-    title = _ref12.title,
-    children = _ref12.children,
-    right = _ref12.right,
-    left = _ref12.left,
-    style = _ref12.style;
+function Header(_ref13) {
+  var _ref13$hasSeparator = _ref13.hasSeparator,
+    hasSeparator = _ref13$hasSeparator === void 0 ? true : _ref13$hasSeparator,
+    isTransparent = _ref13.isTransparent,
+    title = _ref13.title,
+    children = _ref13.children,
+    right = _ref13.right,
+    left = _ref13.left,
+    _ref13$shouldHandleTo = _ref13.shouldHandleTopNotch,
+    shouldHandleTopNotch = _ref13$shouldHandleTo === void 0 ? true : _ref13$shouldHandleTo,
+    style = _ref13.style;
+  var _useSafeAreaInsets = useSafeAreaInsets(),
+    top = _useSafeAreaInsets.top;
+  var insetTop = shouldHandleTopNotch ? top : 0;
   var sharedProps = {
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right)
   };
   return /*#__PURE__*/jsx(HeaderContainer, {
     $isTransparent: isTransparent,
+    $insetTop: insetTop,
     $hasSeparator: hasSeparator,
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right),
@@ -6059,9 +6415,7 @@ function NativeOpacityAnimation(_ref) {
 }
 
 function NativeSlideInAnimation(_ref) {
-  var _ref$topInset = _ref.topInset,
-    topInset = _ref$topInset === void 0 ? 0 : _ref$topInset,
-    visible = _ref.visible,
+  var visible = _ref.visible,
     children = _ref.children,
     onEntered = _ref.onEntered,
     onExited = _ref.onExited;
@@ -6078,7 +6432,6 @@ function NativeSlideInAnimation(_ref) {
     // Since animation callback is called on component mount, we must make sure that the animation has been runed once to call it an exit
     if (!visible && hasRunAnimationRef.current) onExited();
   }
-  var viewportHeight = wHeight - topInset;
   var translateStyle = useAnimatedStyle(function () {
     var _f = function () {
       var _theme$kitt$navigatio = theme.kitt.navigationModal.animation.content,
@@ -6091,7 +6444,7 @@ function NativeSlideInAnimation(_ref) {
         y2 = _easing[3];
       return {
         transform: [{
-          translateY: withTiming(visible ? 0 : viewportHeight, {
+          translateY: withTiming(visible ? 0 : wHeight, {
             duration: duration,
             easing: Easing$1.bezier(x1, y1, x2, y2)
           }, function () {
@@ -6105,7 +6458,7 @@ function NativeSlideInAnimation(_ref) {
             };
             _f.asString = "function _f(isFinished){const{runOnJS,handleAnimationFinished}=jsThis._closure;{if(!isFinished)return;runOnJS(handleAnimationFinished)();}}";
             _f.__workletHash = 14707844242190;
-            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (49:12)";
+            _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (45:12)";
             return _f;
           }())
         }]
@@ -6123,24 +6476,27 @@ function NativeSlideInAnimation(_ref) {
       },
       withTiming: withTiming,
       visible: visible,
-      viewportHeight: viewportHeight,
+      wHeight: wHeight,
       Easing: {
         bezier: Easing$1.bezier
       },
       runOnJS: runOnJS,
       handleAnimationFinished: handleAnimationFinished
     };
-    _f.asString = "function _f(){const{theme,withTiming,visible,viewportHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.navigationModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:viewportHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
-    _f.__workletHash = 505483620545;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (39:42)";
+    _f.asString = "function _f(){const{theme,withTiming,visible,wHeight,Easing,runOnJS,handleAnimationFinished}=jsThis._closure;{const{duration:duration,easing:easing}=theme.kitt.navigationModal.animation.content;const[x1,y1,x2,y2]=easing;return{transform:[{translateY:withTiming(visible?0:wHeight,{duration:duration,easing:Easing.bezier(x1,y1,x2,y2)},function(isFinished){if(!isFinished)return;runOnJS(handleAnimationFinished)();})}]};}}";
+    _f.__workletHash = 14160876288353;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/NavigationModal/components/NativeSlideInAnimation.tsx (35:42)";
     return _f;
   }());
   return /*#__PURE__*/jsx(Animated.View, {
     style: [{
       transform: [{
-        translateY: viewportHeight
+        translateY: wHeight
       }]
-    }, translateStyle],
+    }, translateStyle, {
+      width: '100%',
+      flex: 1
+    }],
     children: children
   });
 }
@@ -6152,8 +6508,6 @@ function NavigationModalAnimation(_ref) {
     onEntered = _ref.onEntered,
     onExit = _ref.onExit,
     onExited = _ref.onExited;
-  var _useSafeAreaInsets = useSafeAreaInsets(),
-    top = _useSafeAreaInsets.top;
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isModalVisible = _useState2[0],
@@ -6194,14 +6548,14 @@ function NavigationModalAnimation(_ref) {
         children: /*#__PURE__*/jsx(Overlay, {
           onPress: handleAnimationExited
         })
-      }), /*#__PURE__*/jsxs(NativeSlideInAnimation, {
-        topInset: top,
+      }), /*#__PURE__*/jsx(NativeSlideInAnimation, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         onEntered: onEntered,
-        children: [/*#__PURE__*/jsx(View, {
-          height: top
-        }), children]
+        children: /*#__PURE__*/jsx(View, {
+          flex: 1,
+          children: children
+        })
       })]
     })
   });
@@ -7302,6 +7656,34 @@ function Tag(_ref6) {
   });
 }
 
+/** @deprecated this mixin is not SSR compatible */
+var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], function (_ref) {
+  var theme = _ref.theme,
+    $state = _ref.$state;
+  return $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states["default"].backgroundColor;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.kitt.forms.input.borderWidth;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.kitt.forms.input.borderRadius;
+}, function (_ref4) {
+  var theme = _ref4.theme,
+    $state = _ref4.$state;
+  return theme.kitt.forms.input.states[$state].borderColor;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return "".concat(theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize, "px");
+}, function (_ref6) {
+  var theme = _ref6.theme,
+    $state = _ref6.$state;
+  return theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states["default"].color;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return Platform.OS === 'web' ? theme.kitt.typography.types.bodies.fontFamily.web.regular : theme.kitt.typography.types.bodies.fontFamily["native"].regular;
+});
+
 function Title(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(Modal.Header, {