@ornikar/kitt-universal 9.30.2 → 9.32.0

package/dist/index-browser-all.es.web.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 { useContext, createContext, cloneElement, forwardRef, useState, useRef, useEffect, useMemo, Children, Fragment as Fragment$1 } from 'react';
+import { useContext, createContext, cloneElement, forwardRef, useState, useRef, useEffect, useMemo, Children, useReducer, Fragment as Fragment$1 } from 'react';
 import styled, { useTheme, css, withTheme as withTheme$1, ThemeProvider } from 'styled-components/native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -207,14 +207,6 @@ var TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
 function useTypographyDefaultColor() {
   return useContext(TypographyDefaultColorContext);
 }
-
-/** @deprecated use native-base instead for SSR compatibility */
-var getTypographyTypeConfigKey = function (theme) {
-  var isMediumOrAbove = theme.responsive.matchWindowSize({
-    minWidth: KittBreakpoints.MEDIUM
-  });
-  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
-};
 function getTypographyTypeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === 'base' || breakpointName === 'small' ? 'baseAndSmall' : 'mediumAndWide';
 }
@@ -917,6 +909,7 @@ var lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -2986,171 +2979,188 @@ 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');
 }
-
-/** @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 theme.kitt.typography.types.bodies.fontFamily.web.regular;
-});
-
-var StyledTypographyText = /*#__PURE__*/styled(Typography.Text).withConfig({
-  displayName: "DatePickerInputPart__StyledTypographyText",
-  componentId: "kitt-universal__sc-11fmlmi-0"
-})(["text-align:center;"]);
-var ViewInput = /*#__PURE__*/styled(View$2).withConfig({
-  displayName: "DatePickerInputPart__ViewInput",
-  componentId: "kitt-universal__sc-11fmlmi-1"
-})(["", " 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;
-  }
-  return "".concat(theme.kitt.forms.datePicker[$partName].minWidth, "px");
-});
-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 dayFormatter(day) {
+  return prefixWithZero(day);
+}
+function monthFormatter(month) {
+  return prefixWithZero(month);
+}
+function yearFormatter(year) {
+  return prefixWithZero(year, 4);
 }
 
-function prefixWithZero(value) {
-  return "".concat(value).padStart(2, '0');
+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;
 }
-var PartContainer = /*#__PURE__*/styled(View$2).withConfig({
-  displayName: "DatePickerInputs__PartContainer",
-  componentId: "kitt-universal__sc-j9hin5-0"
-})(["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$2).withConfig({
-  displayName: "DatePickerInputs__DatePickerPressable",
-  componentId: "kitt-universal__sc-j9hin5-1"
-})(["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
-  };
-  return /*#__PURE__*/jsxs(DatePickerPressable, {
-    $isStretch: stretch,
-    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
-      }))
-    })]
-  });
+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 _excluded$h = ["value"];
-// This is not yet implemented
-// We still display the inputs for chromatic
-function DatePicker(_ref) {
-  var value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded$h);
-  return /*#__PURE__*/jsx(DatePickerInputs, _objectSpread({
-    handleModalOpen: function handleModalOpen() {},
-    currentValue: value,
-    isFocused: false
-  }, props));
+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;
+  }
+};
+
 var _exp$3 = /*#__PURE__*/function () {
   return function (_ref) {
     var theme = _ref.theme;
@@ -3169,7 +3179,7 @@ var InputTextContainer = withTheme( /*#__PURE__*/styled$1('div')({
   }
 }));
 
-var _excluded$g = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "keyboardType", "multiline", "onSubmitEditing"];
+var _excluded$h = ["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;
@@ -3189,7 +3199,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     keyboardType = _ref$keyboardType === void 0 ? 'default' : _ref$keyboardType,
     multiline = _ref.multiline,
     onSubmitEditing = _ref.onSubmitEditing,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var theme = /*#__PURE__*/useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body'
@@ -3232,6 +3242,185 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
+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
+  });
+}
+
+var _excluded$g = ["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$g);
+  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'
+            });
+          }
+        }))
+      })]
+    })
+  });
+}
+
+function DatePicker(props) {
+  return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread({}, props));
+}
+
 function InputEmail(props) {
   return /*#__PURE__*/jsx(InputText, _objectSpread({
     autoComplete: "email",
@@ -4642,6 +4831,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,
@@ -4685,6 +4877,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderRadius: theme.dialogModal.borderRadius
         },
         forms: {
+          input: {
+            borderRadius: theme.forms.input.borderRadius
+          },
           radioButtonGroup: {
             item: {
               borderRadius: theme.forms.radioButtonGroup.item.borderRadius
@@ -4716,6 +4911,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderWidth: theme.button.borderWidth
         },
         forms: {
+          input: {
+            borderWidth: theme.forms.input.borderWidth
+          },
           radioButtonGroup: {
             item: {
               borderWidth: theme.forms.radioButtonGroup.item.borderWidth
@@ -4760,6 +4958,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
@@ -4804,6 +5017,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
@@ -5152,13 +5371,14 @@ function ContentPadding(_ref2) {
   }));
 }
 
-var _excluded$7 = ["children", "shouldHandleBottomNotch", "style"];
+var _excluded$7 = ["children", "shouldHandleBottomNotch", "style", "shouldHandleTopNotch"];
 var StyledViewWithPadding = /*#__PURE__*/styled(ContentPadding).withConfig({
   displayName: "Body__StyledViewWithPadding",
   componentId: "kitt-universal__sc-oc39vn-0"
 })(["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;
@@ -5168,12 +5388,16 @@ function Body(_ref3) {
   var children = _ref3.children,
     shouldHandleBottomNotch = _ref3.shouldHandleBottomNotch,
     style = _ref3.style,
+    shouldHandleTopNotch = _ref3.shouldHandleTopNotch,
     props = _objectWithoutProperties(_ref3, _excluded$7);
   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
   }));
@@ -5218,9 +5442,10 @@ function Footer(_ref5) {
 var HeaderContainer = /*#__PURE__*/styled(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;", ";"], 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;
@@ -5235,68 +5460,77 @@ 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",
   componentId: "kitt-universal__sc-1g7sbq-1"
-})(["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$2).withConfig({
   displayName: "Header__ButtonContainer",
   componentId: "kitt-universal__sc-1g7sbq-2"
-})(["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",
   componentId: "kitt-universal__sc-1g7sbq-3"
-})(["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",
   componentId: "kitt-universal__sc-1g7sbq-4"
-})(["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),