@ornikar/kitt-universal 9.30.2 → 9.32.0

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

@@ -910,6 +910,7 @@ const lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -3354,154 +3355,500 @@ function Checkbox({
   });
 }
 
-/** @deprecated use native-base instead */
-function getInputUIState({
-  isFocused,
+function prefixWithZero(value, maxLength = 2) {
+  return `${value}`.padStart(maxLength, '0');
+}
+function dayFormatter(day) {
+  return prefixWithZero(day);
+}
+function monthFormatter(month) {
+  return prefixWithZero(month);
+}
+function yearFormatter(year) {
+  return prefixWithZero(year, 4);
+}
+
+function getDayInInterval(value, minDate, maxDate) {
+  const minValue = minDate ? minDate.getDate() : 1;
+  const maxValue = maxDate ? maxDate.getDate() : 31;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
+function getMonthInInterval(value, minDate, maxDate) {
+  const minValue = minDate ? minDate.getMonth() + 1 : 1;
+  const maxValue = maxDate ? maxDate.getMonth() + 1 : 12;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
+function getYearInInterval(value, minDate, maxDate) {
+  const minValue = minDate ? minDate.getFullYear() : 1;
+  const maxValue = maxDate ? maxDate.getFullYear() : 9999;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
+
+function isNumber(input) {
+  //  Number.isNaN and isNaN are not consistent
+  // eslint-disable-next-line no-restricted-globals
+  return !isNaN(input);
+}
+
+function onDatePartChange({
+  day,
+  month,
+  year,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const arrayParts = [day, month, year];
+  const isEverythingUndefined = arrayParts.every(v => v === undefined);
+  const 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;
+  }
+  const 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);
+}
+
+const keyboardDatePickerReducer = (state, action) => {
+  const handleChange = dateParts => {
+    const {
+      onFocus,
+      onBlur,
+      onChange
+    } = state;
+    onDatePartChange({
+      ...dateParts,
+      onFocus,
+      onBlur,
+      onChange
+    });
+  };
+  switch (action.type) {
+    case 'day-change':
+      {
+        const nextDay = stringToNumber(action.nextDay || '');
+        if (nextDay === undefined || !isNumber(action.nextDay)) {
+          return {
+            ...state,
+            currentDay: undefined,
+            displayedDay: ''
+          };
+        }
+        handleChange({
+          day: nextDay,
+          month: state.currentMonth,
+          year: state.currentYear
+        });
+        return {
+          ...state,
+          currentDay: nextDay,
+          displayedDay: nextDay.toString()
+        };
+      }
+    case 'month-change':
+      {
+        const nextMonth = stringToNumber(action.nextMonth || '');
+        if (nextMonth === undefined || !isNumber(action.nextMonth)) {
+          return {
+            ...state,
+            currentMonth: undefined,
+            displayedMonth: ''
+          };
+        }
+        handleChange({
+          day: state.currentDay,
+          month: nextMonth,
+          year: state.currentYear
+        });
+        return {
+          ...state,
+          currentMonth: nextMonth,
+          displayedMonth: nextMonth.toString()
+        };
+      }
+    case 'year-change':
+      {
+        const nextYear = stringToNumber(action.nextYear || '');
+        if (nextYear === undefined || !isNumber(action.nextYear)) {
+          return {
+            ...state,
+            currentYear: undefined,
+            displayedYear: ''
+          };
+        }
+        handleChange({
+          day: state.currentDay,
+          month: state.currentMonth,
+          year: nextYear
+        });
+        return {
+          ...state,
+          currentYear: nextYear,
+          displayedYear: nextYear.toString()
+        };
+      }
+    case 'day-blur':
+      {
+        const {
+          minDate,
+          maxDate
+        } = state;
+        const nextCurrentDay = getDayInInterval(state.currentDay, minDate, maxDate);
+        return {
+          ...state,
+          displayedDay: nextCurrentDay ? dayFormatter(nextCurrentDay) : state.displayedDay
+        };
+      }
+    case 'month-blur':
+      {
+        const {
+          minDate,
+          maxDate
+        } = state;
+        const nextCurrentMonth = getMonthInInterval(state.currentMonth, minDate, maxDate);
+        return {
+          ...state,
+          currentMonth: nextCurrentMonth,
+          displayedMonth: nextCurrentMonth !== undefined ? monthFormatter(nextCurrentMonth) : state.displayedMonth
+        };
+      }
+    case 'year-blur':
+      {
+        const {
+          minDate,
+          maxDate
+        } = state;
+        const nextCurrentYear = getYearInInterval(state.currentYear, minDate, maxDate);
+        return {
+          ...state,
+          currentYear: nextCurrentYear,
+          displayedYear: nextCurrentYear !== undefined ? yearFormatter(nextCurrentYear) : state.displayedYear
+        };
+      }
+    default:
+      return state;
+  }
+};
+
+const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
+  displayName: "InputTextContainer",
+  componentId: "kitt-universal__sc-8j6fjq-0"
+})(["position:relative;"]);
+
+const InputText = /*#__PURE__*/React.forwardRef(({
+  id,
+  right,
+  state: formState,
+  variant = 'outline',
+  internalForceState,
+  disabled = false,
+  autoCorrect = true,
+  textContentType = 'none',
+  autoComplete = 'off',
+  keyboardType = 'default',
+  multiline,
+  onSubmitEditing,
+  ...props
+}, ref) => {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const fontSizeForNativeBase = createNativeBaseFontSize({
+    base: 'body'
+  });
+  const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline;
+  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
+    $isDisabled: disabled,
+    children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
+      ref: ref,
+      multiline: multiline,
+      nativeID: id,
+      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
+      keyboardType: keyboardType,
+      autoComplete: autoComplete,
+      autoCorrect: autoCorrect,
+      textContentType: textContentType,
+      fontSize: fontSizeForNativeBase,
+      lineHeight:
+      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
+      fontWeight: "bodies.regular",
+      fontFamily: "bodies.regular",
+      py: !multiline && reactNative.Platform.OS !== 'web' ? 0 : undefined,
+      variant: variant,
+      ...props,
+      onSubmitEditing: multiline ? () => null : onSubmitEditing
+    }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      padding: theme.kitt.forms.input.rightContainer.padding,
+      children: right
+    }) : null]
+  });
+});
+
+function getCurrentInternalForcedState({
   isDisabled,
-  formState
+  isHoveredInternal,
+  isFocusedInternal,
+  isPressedInternal
 }) {
   if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
+  if (isHoveredInternal) return 'hover';
+  if (isFocusedInternal) return 'focus';
+  if (isPressedInternal) return 'hover';
   return 'default';
 }
+const InputPart = /*#__PURE__*/React.forwardRef(({
+  value,
+  placeholder,
+  disabled,
+  isFocusedInternal,
+  isHoveredInternal,
+  isPressedInternal,
+  onChange,
+  onBlur
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    ref: ref,
+    internalForceState: getCurrentInternalForcedState({
+      isDisabled: disabled,
+      isHoveredInternal,
+      isFocusedInternal,
+      isPressedInternal
+    }),
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    keyboardType: "numeric",
+    textAlign: "center",
+    onChange: onChange,
+    onBlur: onBlur
+  });
+});
 
-/** @deprecated this mixin is not SSR compatible */
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
-  theme,
-  $state
-}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
-  theme
-}) => theme.kitt.forms.input.borderWidth, ({
-  theme
-}) => theme.kitt.forms.input.borderRadius, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].borderColor, ({
-  theme
-}) => {
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize}px`;
-}, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states.default.color, ({
-  theme
-}) => reactNative.Platform.OS === 'web' ? theme.kitt.typography.types.bodies.fontFamily.web.regular : theme.kitt.typography.types.bodies.fontFamily.native.regular);
+function PartContainer({
+  children,
+  isStretch,
+  width
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    flex: createResponsiveStyleFromProp(isStretch, 0.33),
+    flexGrow: createResponsiveStyleFromProp(isStretch, 1),
+    width: isStretch ? undefined : width,
+    children: children
+  });
+}
 
-const StyledTypographyText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
-  displayName: "DatePickerInputPart__StyledTypographyText",
-  componentId: "kitt-universal__sc-11fmlmi-0"
-})(["text-align:center;"]);
-const ViewInput = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "DatePickerInputPart__ViewInput",
-  componentId: "kitt-universal__sc-11fmlmi-1"
-})(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, ({
-  theme
-}) => `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`, ({
-  theme
-}) => theme.kitt.forms.input.minHeight, ({
-  theme,
-  $partName
-}) => {
-  if (!$partName) {
-    return undefined;
-  }
-  return `${theme.kitt.forms.datePicker[$partName].minWidth}px`;
-});
-function DatePickerInputPart({
-  $state,
-  placeholder,
+function KeyboardDatePicker({
   value,
-  partName,
-  disabled
+  testID,
+  id,
+  stretch,
+  placeholder,
+  minDate,
+  maxDate,
+  disabled,
+  isFocusedInternal,
+  isHoveredInternal,
+  isPressedInternal,
+  onChange,
+  onBlur,
+  onFocus,
+  ...props
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(ViewInput, {
-    $state: $state,
-    $partName: partName,
-    children: placeholder || value ? /*#__PURE__*/jsxRuntime.jsx(StyledTypographyText, {
-      color: !value || disabled ? 'black-light' : undefined,
-      children: value || placeholder
-    }) : null
+  const dayRef = React.useRef(null);
+  const monthRef = React.useRef(null);
+  const yearRef = React.useRef(null);
+  const defaultValue = value;
+  const defaultDay = defaultValue?.getDate();
+  const defaultMonth = defaultValue ? defaultValue.getMonth() + 1 : undefined;
+  const defaultYear = defaultValue?.getFullYear();
+  const [state, dispatch] = React.useReducer(keyboardDatePickerReducer, {
+    currentValue: defaultValue,
+    currentDay: defaultDay,
+    currentMonth: defaultMonth,
+    currentYear: defaultYear,
+    displayedDay: defaultDay ? dayFormatter(defaultDay) : '',
+    displayedMonth: defaultMonth ? monthFormatter(defaultMonth) : '',
+    displayedYear: defaultYear ? yearFormatter(defaultYear) : '',
+    minDate,
+    maxDate,
+    onChange,
+    onBlur,
+    onFocus
+  });
+  const sharedInputPartProps = {
+    isFocusedInternal,
+    isHoveredInternal,
+    isPressedInternal,
+    disabled
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    testID: testID,
+    nativeID: id,
+    children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+      space: "kitt.2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.day.minWidth",
+        children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+          ref: dayRef,
+          ...sharedInputPartProps,
+          placeholder: placeholder?.day,
+          value: state.displayedDay,
+          onChange: e => {
+            const nextDay = e.nativeEvent.text;
+            dispatch({
+              type: 'day-change',
+              nextDay
+            });
+            if (nextDay.length === 2 && monthRef.current) {
+              monthRef.current.focus();
+            }
+          },
+          onBlur: () => dispatch({
+            type: 'day-blur'
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.month.minWidth",
+        children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+          ref: monthRef,
+          ...sharedInputPartProps,
+          placeholder: placeholder?.month,
+          value: state.displayedMonth,
+          onChange: e => {
+            const nextMonth = e.nativeEvent.text;
+            dispatch({
+              type: 'month-change',
+              nextMonth: e.nativeEvent.text
+            });
+            if (nextMonth.length === 2 && yearRef.current) {
+              yearRef.current.focus();
+            }
+          },
+          onBlur: () => dispatch({
+            type: 'month-blur'
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.year.minWidth",
+        children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+          ref: yearRef,
+          ...sharedInputPartProps,
+          placeholder: placeholder?.year,
+          value: state.displayedYear,
+          onChange: e => {
+            dispatch({
+              type: 'year-change',
+              nextYear: e.nativeEvent.text
+            });
+          },
+          onBlur: () => dispatch({
+            type: 'year-blur'
+          })
+        })
+      })]
+    })
   });
 }
 
-function prefixWithZero(value) {
-  return `${value}`.padStart(2, '0');
-}
-const PartContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "DatePickerInputs__PartContainer",
-  componentId: "kitt-universal__sc-j9hin5-0"
-})(["margin-right:", ";", ";"], ({
-  theme,
-  $isLast
-}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
-  $isStretch
-}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
-const DatePickerPressable = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "DatePickerInputs__DatePickerPressable",
-  componentId: "kitt-universal__sc-j9hin5-1"
-})(["display:flex;flex-direction:row;", ";"], ({
-  $isStretch
-}) => {
-  if ($isStretch) {
-    return styled.css(["width:100%;"]);
-  }
-  return styled.css(["align-self:baseline;"]);
-});
 function DatePickerInputs({
-  state,
-  internalForceState,
-  isFocused,
   disabled,
   stretch,
   id,
   testID,
-  handleModalOpen,
   currentValue,
-  placeholder
+  placeholder,
+  isFocusedInternal,
+  isHoveredInternal,
+  isPressedInternal,
+  onPress
 }) {
-  const currentState = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: Boolean(disabled),
-    formState: state
-  });
-  const sharedPartProps = {
-    disabled,
-    $state: currentState
+  const sharedInputPartProps = {
+    isFocusedInternal,
+    isHoveredInternal,
+    isPressedInternal,
+    disabled
   };
-  return /*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
-    $isStretch: stretch,
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    display: "flex",
+    flexDirection: "row",
+    position: "relative",
+    alignSelf: createResponsiveStyleFromProp(stretch, undefined, 'base-line'),
     nativeID: id,
     disabled: disabled,
     testID: testID,
-    onPress: handleModalOpen,
-    children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, {
-        ...sharedPartProps,
-        partName: "day",
-        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-        placeholder: placeholder?.day
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, {
-        ...sharedPartProps,
-        partName: "month",
-        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-        placeholder: placeholder?.month
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-      $isLast: true,
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, {
-        ...sharedPartProps,
-        partName: "year",
-        value: currentValue ? currentValue.getFullYear() : undefined,
-        placeholder: placeholder?.year
-      })
-    })]
+    onPress: onPress,
+    children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      position: "relative",
+      width: createResponsiveStyleFromProp(stretch, '100%'),
+      children: [/*#__PURE__*/jsxRuntime.jsxs(HStack, {
+        space: "kitt.2",
+        width: createResponsiveStyleFromProp(stretch, '100%'),
+        children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+          isStretch: stretch,
+          width: "kitt.forms.datePicker.day.minWidth",
+          children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+            ...sharedInputPartProps,
+            placeholder: placeholder?.day,
+            value: currentValue ? dayFormatter(currentValue.getDate()) : undefined
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+          isStretch: stretch,
+          width: "kitt.forms.datePicker.month.minWidth",
+          children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+            ...sharedInputPartProps,
+            placeholder: placeholder?.month,
+            value: currentValue ? monthFormatter(currentValue.getMonth() + 1) : undefined
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+          isStretch: stretch,
+          width: "kitt.forms.datePicker.year.minWidth",
+          children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+            ...sharedInputPartProps,
+            placeholder: placeholder?.year,
+            value: currentValue ? yearFormatter(currentValue.getFullYear()) : undefined
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(View, {
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        top: "0",
+        left: "0"
+      })]
+    })
   });
 }
 
@@ -3511,13 +3858,12 @@ function DatePickerAndroid({
   pickerDefaultDate,
   pickerUITestID,
   isDefaultVisible,
-  setIsFocused,
-  currentValue,
-  setCurrentValue,
+  value,
   onChange,
-  isFocused,
   ...props
 }) {
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [currentValue, setCurrentValue] = React.useState(value);
   const handleClose = () => {
     if (onBlur) onBlur();
   };
@@ -3547,9 +3893,9 @@ function DatePickerAndroid({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
-    handleModalOpen: handleModalOpen,
     currentValue: currentValue,
-    isFocused: isFocused,
+    isFocusedInternal: isFocused,
+    onPress: handleModalOpen,
     ...props
   });
 }
@@ -4008,35 +4354,24 @@ function ModalPlatformDateTimePicker({
   });
 }
 
-function DatePicker({
+function DefaultNativeUIDatePicker({
   value,
   pickerUITestID,
   pickerUITitle,
   pickerUIValidateButtonLabel,
   isDefaultVisible,
+  pickerDefaultDate,
+  isFocusedInternal,
+  isHoveredInternal,
+  isPressedInternal,
   onChange,
   onFocus,
   onBlur,
-  pickerDefaultDate,
   ...props
 }) {
   const [isPickerUIVisible, setIsPickerUIVisible] = React.useState(isDefaultVisible);
   const [isFocused, setIsFocused] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value);
-  if (reactNative.Platform.OS === 'android') {
-    return /*#__PURE__*/jsxRuntime.jsx(DatePickerAndroid, {
-      pickerDefaultDate: pickerDefaultDate,
-      pickerUITestID: pickerUITestID,
-      isDefaultVisible: isDefaultVisible,
-      currentValue: currentValue,
-      setCurrentValue: setCurrentValue,
-      isFocused: isFocused,
-      setIsFocused: setIsFocused,
-      onChange: onChange,
-      onBlur: onBlur,
-      ...props
-    });
-  }
   const handleModalClose = () => {
     if (onBlur) onBlur();
     setIsPickerUIVisible(false);
@@ -4044,13 +4379,15 @@ function DatePicker({
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
-      handleModalOpen: () => {
+      currentValue: currentValue,
+      isFocusedInternal: isFocused || isFocusedInternal,
+      isHoveredInternal: isHoveredInternal,
+      isPressedInternal: isPressedInternal,
+      onPress: () => {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
       },
-      currentValue: currentValue,
-      isFocused: isFocused,
       ...props
     }), /*#__PURE__*/jsxRuntime.jsx(ModalPlatformDateTimePicker, {
       testID: pickerUITestID,
@@ -4069,66 +4406,49 @@ function DatePicker({
   });
 }
 
-const InputTextContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "InputTextContainer",
-  componentId: "kitt-universal__sc-8j6fjq-0"
-})(["position:relative;"]);
-
-const InputText = /*#__PURE__*/React.forwardRef(({
-  id,
-  right,
-  state: formState,
-  variant = 'outline',
-  internalForceState,
-  disabled = false,
-  autoCorrect = true,
-  textContentType = 'none',
-  autoComplete = 'off',
-  keyboardType = 'default',
-  multiline,
-  onSubmitEditing,
+function NativeUIDatePicker({
+  value,
+  pickerUITestID,
+  isDefaultVisible,
+  pickerDefaultDate,
+  onChange,
+  onBlur,
   ...props
-}, ref) => {
-  const theme = /*#__PURE__*/styled.useTheme();
-  const fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
+}) {
+  if (reactNative.Platform.OS === 'android') {
+    return /*#__PURE__*/jsxRuntime.jsx(DatePickerAndroid, {
+      pickerDefaultDate: pickerDefaultDate,
+      pickerUITestID: pickerUITestID,
+      isDefaultVisible: isDefaultVisible,
+      value: value,
+      onChange: onChange,
+      onBlur: onBlur,
+      ...props
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(DefaultNativeUIDatePicker, {
+    value: value,
+    isDefaultVisible: isDefaultVisible,
+    pickerUITestID: pickerUITestID,
+    onChange: onChange,
+    onBlur: onBlur,
+    ...props
   });
-  const shouldHandleSingleLineOnIOS = reactNative.Platform.OS === 'ios' && !multiline;
-  return /*#__PURE__*/jsxRuntime.jsxs(InputTextContainer, {
-    $isDisabled: disabled,
-    children: [/*#__PURE__*/jsxRuntime.jsx(nativeBase.Input, {
-      ref: ref,
-      multiline: multiline,
-      nativeID: id,
-      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
-      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
-      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      keyboardType: keyboardType,
-      autoComplete: autoComplete,
-      autoCorrect: autoCorrect,
-      textContentType: textContentType,
-      fontSize: fontSizeForNativeBase,
-      lineHeight:
-      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
-      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
-      shouldHandleSingleLineOnIOS ? 0 : fontSizeForNativeBase,
-      fontWeight: "bodies.regular",
-      fontFamily: "bodies.regular",
-      py: !multiline && reactNative.Platform.OS !== 'web' ? 0 : undefined,
-      variant: variant,
-      ...props,
-      onSubmitEditing: multiline ? () => null : onSubmitEditing
-    }), right ? /*#__PURE__*/jsxRuntime.jsx(View, {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      justifyContent: "center",
-      padding: theme.kitt.forms.input.rightContainer.padding,
-      children: right
-    }) : null]
+}
+
+function DatePicker({
+  fillMode = 'native',
+  ...props
+}) {
+  if (fillMode === 'keyboard') {
+    return /*#__PURE__*/jsxRuntime.jsx(KeyboardDatePicker, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(NativeUIDatePicker, {
+    ...props
   });
-});
+}
 
 function InputEmail(props) {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
@@ -5273,6 +5593,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,
@@ -5317,6 +5640,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderRadius: theme.dialogModal.borderRadius
         },
         forms: {
+          input: {
+            borderRadius: theme.forms.input.borderRadius
+          },
           radioButtonGroup: {
             item: {
               borderRadius: theme.forms.radioButtonGroup.item.borderRadius
@@ -5348,6 +5674,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderWidth: theme.button.borderWidth
         },
         forms: {
+          input: {
+            borderWidth: theme.forms.input.borderWidth
+          },
           radioButtonGroup: {
             item: {
               borderWidth: theme.forms.radioButtonGroup.item.borderWidth
@@ -5394,6 +5723,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
@@ -5440,6 +5784,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
@@ -5794,8 +6144,9 @@ const StyledViewWithPadding = /*#__PURE__*/styled__default(ContentPadding).withC
   displayName: "Body__StyledViewWithPadding",
   componentId: "kitt-universal__sc-oc39vn-0"
 })(["padding-top:", "px;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 6, ({
+  theme,
+  $insetTop
+}) => Math.max(theme.kitt.spacing * 6, $insetTop), ({
   theme,
   $insetBottom
 }) => Math.max(theme.kitt.spacing * 4, $insetBottom));
@@ -5803,15 +6154,19 @@ function Body({
   children,
   shouldHandleBottomNotch,
   style,
+  shouldHandleTopNotch,
   ...props
 }) {
   const {
-    bottom
+    bottom,
+    top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  const insetTop = shouldHandleTopNotch ? top : 0;
   return /*#__PURE__*/jsxRuntime.jsx(StyledViewWithPadding, {
     ...props,
     $insetBottom: insetBottom,
+    $insetTop: insetTop,
     style: style,
     children: children
   });
@@ -5854,9 +6209,10 @@ function Footer({
 const HeaderContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig({
   displayName: "Header__HeaderContainer",
   componentId: "kitt-universal__sc-1g7sbq-0"
-})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], ({
-  theme
-}) => theme.kitt.navigationModal.height, ({
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;padding-top:", "px;", ";"], ({
+  theme,
+  $insetTop
+}) => theme.kitt.navigationModal.height + $insetTop, ({
   theme,
   $isTransparent
 }) => {
@@ -5869,6 +6225,8 @@ const HeaderContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig(
   theme,
   $hasLeft
 }) => $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  $insetTop
+}) => $insetTop, ({
   $hasSeparator
 }) => {
   if (!$hasSeparator) return undefined;
@@ -5924,14 +6282,20 @@ function Header({
   children,
   right,
   left,
+  shouldHandleTopNotch = true,
   style
 }) {
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetTop = shouldHandleTopNotch ? top : 0;
   const sharedProps = {
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right)
   };
   return /*#__PURE__*/jsxRuntime.jsx(HeaderContainer, {
     $isTransparent: isTransparent,
+    $insetTop: insetTop,
     $hasSeparator: hasSeparator,
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right),
@@ -6003,7 +6367,6 @@ function NativeOpacityAnimation({
 }
 
 function NativeSlideInAnimation({
-  topInset = 0,
   visible,
   children,
   onEntered,
@@ -6023,7 +6386,6 @@ function NativeSlideInAnimation({
     // 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();
   }
-  const viewportHeight = wHeight - topInset;
   const translateStyle = Animated.useAnimatedStyle(function () {
     const _f = function () {
       const {
@@ -6033,7 +6395,7 @@ function NativeSlideInAnimation({
       const [x1, y1, x2, y2] = easing;
       return {
         transform: [{
-          translateY: Animated.withTiming(visible ? 0 : viewportHeight, {
+          translateY: Animated.withTiming(visible ? 0 : wHeight, {
             duration,
             easing: Animated.Easing.bezier(x1, y1, x2, y2)
           }, function () {
@@ -6047,7 +6409,7 @@ function NativeSlideInAnimation({
             };
             _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;
           }())
         }]
@@ -6065,24 +6427,27 @@ function NativeSlideInAnimation({
       },
       withTiming: Animated.withTiming,
       visible,
-      viewportHeight,
+      wHeight,
       Easing: {
         bezier: Animated.Easing.bezier
       },
       runOnJS: Animated.runOnJS,
       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__*/jsxRuntime.jsx(Animated__default.View, {
     style: [{
       transform: [{
-        translateY: viewportHeight
+        translateY: wHeight
       }]
-    }, translateStyle],
+    }, translateStyle, {
+      width: '100%',
+      flex: 1
+    }],
     children: children
   });
 }
@@ -6095,9 +6460,6 @@ function NavigationModalAnimation({
   onExit,
   onExited
 }) {
-  const {
-    top
-  } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const [isModalVisible, setIsModalVisible] = React.useState(visible);
   const [isContentVisible, setIsContentVisible] = React.useState(false);
   const handleAnimationExited = () => {
@@ -6132,14 +6494,14 @@ function NavigationModalAnimation({
         children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
           onPress: handleAnimationExited
         })
-      }), /*#__PURE__*/jsxRuntime.jsxs(NativeSlideInAnimation, {
-        topInset: top,
+      }), /*#__PURE__*/jsxRuntime.jsx(NativeSlideInAnimation, {
         visible: isContentVisible,
         onExited: handleAnimationExited,
         onEntered: onEntered,
-        children: [/*#__PURE__*/jsxRuntime.jsx(View, {
-          height: top
-        }), children]
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          flex: 1,
+          children: children
+        })
       })]
     })
   });
@@ -7230,6 +7592,29 @@ function Tag({
   });
 }
 
+/** @deprecated this mixin is not SSR compatible */
+const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
+  theme,
+  $state
+}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
+  theme
+}) => theme.kitt.forms.input.borderWidth, ({
+  theme
+}) => theme.kitt.forms.input.borderRadius, ({
+  theme,
+  $state
+}) => theme.kitt.forms.input.states[$state].borderColor, ({
+  theme
+}) => {
+  const typeConfigKey = getTypographyTypeConfigKey(theme);
+  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize}px`;
+}, ({
+  theme,
+  $state
+}) => theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states.default.color, ({
+  theme
+}) => reactNative.Platform.OS === 'web' ? theme.kitt.typography.types.bodies.fontFamily.web.regular : theme.kitt.typography.types.bodies.fontFamily.native.regular);
+
 function Title({
   children
 }) {