@ornikar/kitt-universal 9.34.2 → 9.36.0

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

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Text as Text$1, Input, NativeBaseProvider, extendTheme, useBreakpointValue } from 'native-base';
+import { Stack as Stack$1, VStack as VStack$1, HStack as HStack$1, Center as Center$1, View as View$1, ScrollView as ScrollView$1, Pressable as Pressable$1, Image as Image$1, FlatList as FlatList$1, SectionList as SectionList$1, Text, Input, NativeBaseProvider, extendTheme, useBreakpointValue } from 'native-base';
 export { useBreakpointValue, useClipboard, useToken } from 'native-base';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _extends from '@babel/runtime/helpers/extends';
@@ -9,7 +9,7 @@ import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, withSprin
 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';
-import { Platform, Animated as Animated$1, Easing, useWindowDimensions, View as View$2, Pressable as Pressable$2, StyleSheet, Modal as Modal$1, ScrollView as ScrollView$2, Linking, Text as Text$2, PixelRatio } from 'react-native';
+import { Platform, Animated as Animated$1, Easing, useWindowDimensions, View as View$2, Pressable as Pressable$2, StyleSheet, Modal as Modal$1, ScrollView as ScrollView$2, Linking, Text as Text$1, PixelRatio } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
@@ -224,7 +224,7 @@ function Typography(_ref) {
     });
   }
   var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
-  var text = /*#__PURE__*/jsx(Text$1, _objectSpread({
+  var text = /*#__PURE__*/jsx(Text, _objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
@@ -2698,11 +2698,36 @@ var checkbox = {
   height: 20,
   width: 20,
   iconSize: 14,
-  borderColor: colors.separator,
-  backgroundColor: colors.uiBackgroundLight,
-  checkedBorderColor: colors.primary,
-  checkedBackgroundColor: colors.primary,
-  markColor: colors.uiBackgroundLight
+  markColor: colors.uiBackgroundLight,
+  textSpacing: 10,
+  "default": {
+    borderColor: colors.separator,
+    backgroundColor: colors.uiBackgroundLight
+  },
+  checked: {
+    borderColor: colors.primary,
+    backgroundColor: colors.primary
+  },
+  focus: {
+    borderColor: colors.primary,
+    backgroundColor: colors.uiBackgroundLight
+  },
+  hover: {
+    borderColor: colors.primary,
+    backgroundColor: colors.uiBackgroundLight
+  },
+  pressed: {
+    borderColor: colors.primary,
+    backgroundColor: colors.uiBackgroundLight
+  },
+  disabled: {
+    borderColor: colors.separator,
+    backgroundColor: colors.disabled
+  },
+  transition: {
+    duration: '200ms',
+    timingFunction: 'ease-out'
+  }
 };
 
 var datePicker = {
@@ -2898,18 +2923,31 @@ var inputTag = {
 var radio = {
   size: 18,
   unchecked: {
-    backgroundColor: colors.uiBackgroundLight,
     borderWidth: 2,
+    backgroundColor: colors.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black200
   },
   checked: {
     backgroundColor: colors.primary,
+    borderColor: colors.transparent,
     innerSize: 5,
     innerBackgroundColor: colors.uiBackgroundLight
   },
+  hover: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.primary
+  },
+  pressed: {
+    backgroundColor: colors.uiBackgroundLight,
+    borderColor: colors.primary
+  },
   disabled: {
     backgroundColor: colors.disabled,
     borderColor: colors.separator
+  },
+  transition: {
+    duration: '200ms',
+    timingFunction: 'ease-out'
   }
 };
 
@@ -3351,73 +3389,120 @@ function useKittTheme() {
   }, [dimensions]);
 }
 
-var CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "Checkbox__CheckboxAndLabelPressableWrapper"
-})(["display:flex;flex-direction:row;"]);
-var CheckboxContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Checkbox__CheckboxContainer"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.forms.checkbox.height;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.checkbox.width;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.checkbox.borderRadius;
-}, function (_ref4) {
-  var $isChecked = _ref4.$isChecked,
-    theme = _ref4.theme;
-  var _theme$kitt$forms$che = theme.kitt.forms.checkbox,
-    checkedBackgroundColor = _theme$kitt$forms$che.checkedBackgroundColor,
-    checkedBorderColor = _theme$kitt$forms$che.checkedBorderColor,
-    borderColor = _theme$kitt$forms$che.borderColor,
-    borderWidth = _theme$kitt$forms$che.borderWidth,
-    backgroundColor = _theme$kitt$forms$che.backgroundColor;
-  if ($isChecked) {
-    return css(["background-color:", ";border:", ";"], checkedBackgroundColor, "".concat(borderWidth, "px solid ").concat(checkedBorderColor));
-  }
-  return css(["background-color:", ";border:", ";"], backgroundColor, "".concat(borderWidth, "px solid ").concat(borderColor));
-}, function (_ref5) {
-  var theme = _ref5.theme,
-    $hasLabel = _ref5.$hasLabel;
-  if (!$hasLabel) return '0px';
-  return "".concat(theme.kitt.spacing * 2.5, "px;");
-});
-function Checkbox(_ref6) {
-  var onChange = _ref6.onChange,
-    onBlur = _ref6.onBlur,
-    onFocus = _ref6.onFocus,
-    checked = _ref6.checked,
-    _ref6$hitSlop = _ref6.hitSlop,
-    hitSlop = _ref6$hitSlop === void 0 ? 40 : _ref6$hitSlop,
-    id = _ref6.id,
-    children = _ref6.children;
+function getBackgroundColor$1(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isPressed = _ref.isPressed,
+    isHovered = _ref.isHovered,
+    isFocused = _ref.isFocused,
+    isChecked = _ref.isChecked;
+  if (isChecked) return 'kitt.forms.checkbox.checked.backgroundColor';
+  if (isDisabled) return 'kitt.forms.checkbox.disabled.backgroundColor';
+  if (isPressed) return 'kitt.forms.checkbox.pressed.backgroundColor';
+  if (isHovered) return 'kitt.forms.checkbox.hover.backgroundColor';
+  if (isFocused) return 'kitt.forms.checkbox.focus.backgroundColor';
+  return 'kitt.forms.checkbox.default.backgroundColor';
+}
+
+function getBorderColor$1(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isPressed = _ref.isPressed,
+    isHovered = _ref.isHovered,
+    isFocused = _ref.isFocused,
+    isChecked = _ref.isChecked;
+  if (isChecked) return 'kitt.forms.checkbox.checked.borderColor';
+  if (isDisabled) return 'kitt.forms.checkbox.disabled.borderColor';
+  if (isPressed) return 'kitt.forms.checkbox.pressed.borderColor';
+  if (isHovered) return 'kitt.forms.checkbox.hover.borderColor';
+  if (isFocused) return 'kitt.forms.checkbox.focus.borderColor';
+  return 'kitt.forms.checkbox.default.borderColor';
+}
+
+var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var checked = _ref.checked,
+    _ref$hitSlop = _ref.hitSlop,
+    hitSlop = _ref$hitSlop === void 0 ? 40 : _ref$hitSlop,
+    id = _ref.id,
+    _children = _ref.children,
+    disabled = _ref.disabled,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus;
   var theme = useKittTheme();
-  return /*#__PURE__*/jsxs(CheckboxAndLabelPressableWrapper, {
+  return /*#__PURE__*/jsx(Pressable, {
+    ref: ref,
+    testID: id,
     accessibilityRole: "checkbox",
     accessibilityState: {
       checked: checked
     },
     hitSlop: hitSlop,
+    disabled: disabled,
     onPress: function handlePress(e) {
       if (onFocus) onFocus(e);
       if (onChange) onChange(!checked, e);
       if (onBlur) onBlur(e);
     },
-    children: [/*#__PURE__*/jsx(CheckboxContainer, {
-      $isChecked: checked,
-      $hasLabel: !!children,
-      testID: id,
-      children: checked ? /*#__PURE__*/jsx(Icon, {
-        align: "center",
-        color: theme.kitt.forms.checkbox.markColor,
-        size: theme.kitt.forms.checkbox.iconSize,
-        icon: /*#__PURE__*/jsx(CheckboxMark, {})
-      }) : null
-    }), children]
+    children: function children(_ref2) {
+      var isHovered = _ref2.isHovered,
+        isPressed = _ref2.isPressed,
+        isFocused = _ref2.isFocused;
+      return /*#__PURE__*/jsxs(HStack, {
+        space: _children ? 'kitt.forms.checkbox.textSpacing' : undefined,
+        children: [/*#__PURE__*/jsx(View, {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: _children ? 'kitt.1' : undefined,
+          height: "kitt.forms.checkbox.height",
+          width: "kitt.forms.checkbox.width",
+          borderRadius: "kitt.forms.checkbox.borderRadius",
+          borderWidth: "kitt.forms.checkbox.borderWidth",
+          borderColor: getBorderColor$1({
+            isDisabled: disabled,
+            isFocused: isFocused,
+            isHovered: isHovered,
+            isPressed: isPressed,
+            isChecked: checked
+          }),
+          backgroundColor: getBackgroundColor$1({
+            isDisabled: disabled,
+            isFocused: isFocused,
+            isHovered: isHovered,
+            isPressed: isPressed,
+            isChecked: checked
+          }),
+          _web: {
+            style: {
+              transitionDuration: theme.kitt.forms.checkbox.transition.duration,
+              transitionProperty: 'all',
+              transitionTimingFunction: theme.kitt.forms.checkbox.transition.timingFunction
+            }
+          },
+          children: /*#__PURE__*/jsx(View, {
+            opacity: checked ? 1 : 0,
+            _web: {
+              style: {
+                transitionDuration: theme.kitt.forms.checkbox.transition.duration,
+                transitionProperty: 'opacity',
+                transitionTimingFunction: theme.kitt.forms.checkbox.transition.timingFunction
+              }
+            },
+            children: /*#__PURE__*/jsx(Icon, {
+              align: "center",
+              color: theme.kitt.forms.checkbox.markColor,
+              size: theme.kitt.forms.checkbox.iconSize,
+              icon: /*#__PURE__*/jsx(CheckboxMark, {})
+            })
+          })
+        }), _children ? /*#__PURE__*/jsx(View, {
+          flexShrink: 1,
+          children: _children
+        }) : null]
+      });
+    }
   });
-}
+});
 
 function prefixWithZero(value) {
   var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
@@ -3722,7 +3807,8 @@ var InputPart = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isHoveredInternal = _ref2.isHoveredInternal,
     isPressedInternal = _ref2.isPressedInternal,
     onChange = _ref2.onChange,
-    onBlur = _ref2.onBlur;
+    onBlur = _ref2.onBlur,
+    onSubmitEditing = _ref2.onSubmitEditing;
   return /*#__PURE__*/jsx(InputText, {
     ref: ref,
     internalForceState: getCurrentInternalForcedState({
@@ -3737,7 +3823,8 @@ var InputPart = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     keyboardType: "numeric",
     textAlign: "center",
     onChange: onChange,
-    onBlur: onBlur
+    onBlur: onBlur,
+    onSubmitEditing: onSubmitEditing
   });
 });
 
@@ -3753,8 +3840,8 @@ function PartContainer(_ref) {
   });
 }
 
-var _excluded$k = ["value", "testID", "id", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onBlur", "onFocus"];
-function KeyboardDatePicker(_ref) {
+var _excluded$k = ["value", "testID", "id", "stretch", "placeholder", "minDate", "maxDate", "disabled", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onBlur", "onFocus", "onSubmitEditing"];
+var KeyboardDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     testID = _ref.testID,
     id = _ref.id,
@@ -3768,9 +3855,9 @@ function KeyboardDatePicker(_ref) {
     isPressedInternal = _ref.isPressedInternal,
     onChange = _ref.onChange,
     onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus;
+    onFocus = _ref.onFocus,
+    onSubmitEditing = _ref.onSubmitEditing;
     _objectWithoutProperties(_ref, _excluded$k);
-  var dayRef = useRef(null);
   var monthRef = useRef(null);
   var yearRef = useRef(null);
   var defaultValue = value;
@@ -3809,7 +3896,7 @@ function KeyboardDatePicker(_ref) {
         isStretch: stretch,
         width: "kitt.forms.datePicker.day.minWidth",
         children: /*#__PURE__*/jsx(InputPart, _objectSpread(_objectSpread({
-          ref: dayRef
+          ref: ref
         }, sharedInputPartProps), {}, {
           placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.day,
           value: state.displayedDay,
@@ -3827,6 +3914,9 @@ function KeyboardDatePicker(_ref) {
             return dispatch({
               type: 'day-blur'
             });
+          },
+          onSubmitEditing: function () {
+            if (monthRef.current) monthRef.current.focus();
           }
         }))
       }), /*#__PURE__*/jsx(PartContainer, {
@@ -3851,6 +3941,9 @@ function KeyboardDatePicker(_ref) {
             return dispatch({
               type: 'month-blur'
             });
+          },
+          onSubmitEditing: function () {
+            if (yearRef.current) yearRef.current.focus();
           }
         }))
       }), /*#__PURE__*/jsx(PartContainer, {
@@ -3871,14 +3964,15 @@ function KeyboardDatePicker(_ref) {
             return dispatch({
               type: 'year-blur'
             });
-          }
+          },
+          onSubmitEditing: onSubmitEditing
         }))
       })]
     })
   });
-}
+});
 
-function PressableDateInputs(_ref) {
+var PressableDateInputs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     stretch = _ref.stretch,
     id = _ref.id,
@@ -3896,6 +3990,7 @@ function PressableDateInputs(_ref) {
     disabled: disabled
   };
   return /*#__PURE__*/jsx(Pressable, {
+    ref: ref,
     display: "flex",
     flexDirection: "row",
     position: "relative",
@@ -3942,10 +4037,10 @@ function PressableDateInputs(_ref) {
       })]
     })
   });
-}
+});
 
 var _excluded$j = ["onBlur", "onFocus", "pickerDefaultDate", "pickerUITestID", "isDefaultVisible", "value", "onChange"];
-function DatePickerAndroid(_ref) {
+var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onBlur = _ref.onBlur,
     onFocus = _ref.onFocus,
     pickerDefaultDate = _ref.pickerDefaultDate,
@@ -3989,11 +4084,12 @@ function DatePickerAndroid(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/jsx(PressableDateInputs, _objectSpread({
+    ref: ref,
     value: currentValue,
     isFocusedInternal: isFocused,
     onPress: handleModalOpen
   }, props));
-}
+});
 
 var BodyView = /*#__PURE__*/styled.View.withConfig({
   displayName: "Body__BodyView"
@@ -4438,7 +4534,7 @@ function ModalPlatformDateTimePicker(_ref2) {
           onPress: function handleSubmit() {
             onChange(currentValue);
           },
-          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$2, {
+          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
             children: validateButtonLabel
           }) : /*#__PURE__*/jsx(FormattedMessage, {
             id: "kitt-universal.ModalDateTimePicker.confirm"
@@ -4450,7 +4546,7 @@ function ModalPlatformDateTimePicker(_ref2) {
 }
 
 var _excluded$f = ["value", "pickerUITestID", "pickerUITitle", "pickerUIValidateButtonLabel", "isDefaultVisible", "pickerDefaultDate", "isFocusedInternal", "isHoveredInternal", "isPressedInternal", "onChange", "onFocus", "onBlur"];
-function DefaultNativeUIDatePicker(_ref) {
+var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
     pickerUITitle = _ref.pickerUITitle,
@@ -4483,6 +4579,7 @@ function DefaultNativeUIDatePicker(_ref) {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(PressableDateInputs, _objectSpread({
+      ref: ref,
       value: currentValue,
       isFocusedInternal: isFocused || isFocusedInternal,
       isHoveredInternal: isHoveredInternal,
@@ -4507,10 +4604,10 @@ function DefaultNativeUIDatePicker(_ref) {
       }
     })]
   });
-}
+});
 
 var _excluded$e = ["value", "pickerUITestID", "isDefaultVisible", "pickerDefaultDate", "onChange", "onBlur"];
-function NativeUIDatePicker(_ref) {
+var NativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
     pickerUITestID = _ref.pickerUITestID,
     isDefaultVisible = _ref.isDefaultVisible,
@@ -4520,6 +4617,7 @@ function NativeUIDatePicker(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$e);
   if (Platform.OS === 'android') {
     return /*#__PURE__*/jsx(DatePickerAndroid, _objectSpread({
+      ref: ref,
       pickerDefaultDate: pickerDefaultDate,
       pickerUITestID: pickerUITestID,
       isDefaultVisible: isDefaultVisible,
@@ -4529,40 +4627,48 @@ function NativeUIDatePicker(_ref) {
     }, props));
   }
   return /*#__PURE__*/jsx(DefaultNativeUIDatePicker, _objectSpread({
+    ref: ref,
     value: value,
     isDefaultVisible: isDefaultVisible,
     pickerUITestID: pickerUITestID,
     onChange: onChange,
     onBlur: onBlur
   }, props));
-}
+});
 
-var _excluded$d = ["fillMode", "value"];
-function DatePicker(_ref) {
+var _excluded$d = ["fillMode", "value", "onSubmitEditing"];
+var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$fillMode = _ref.fillMode,
     fillMode = _ref$fillMode === void 0 ? 'native' : _ref$fillMode,
     value = _ref.value,
+    onSubmitEditing = _ref.onSubmitEditing,
     props = _objectWithoutProperties(_ref, _excluded$d);
   // in apps, final-form can give a string value that will break the component
   var currentValue = value || undefined;
   if (fillMode === 'keyboard') {
-    return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({}, props), {}, {
-      value: currentValue
+    return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
+      ref: ref
+    }, props), {}, {
+      value: currentValue,
+      onSubmitEditing: onSubmitEditing
     }));
   }
-  return /*#__PURE__*/jsx(NativeUIDatePicker, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(NativeUIDatePicker, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     value: currentValue
   }));
-}
+});
 
-function InputEmail(props) {
+var InputEmail = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/jsx(InputText, _objectSpread({
+    ref: ref,
     autoComplete: "email",
     keyboardType: "email-address",
     textContentType: "emailAddress",
     autoCapitalize: "none"
   }, props));
-}
+});
 
 var getColorFromState = function (state) {
   switch (state) {
@@ -4639,7 +4745,7 @@ function InputPressable(_ref) {
 }
 
 var _excluded$c = ["isPasswordDefaultVisible", "right"];
-function InputPassword(_ref) {
+var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
     right = _ref.right,
     props = _objectWithoutProperties(_ref, _excluded$c);
@@ -4647,7 +4753,9 @@ function InputPassword(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
-  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     textContentType: "password",
     autoComplete: "password",
     autoCorrect: false,
@@ -4665,15 +4773,17 @@ function InputPassword(_ref) {
       })
     })
   }));
-}
+});
 
-function InputPhone(props) {
-  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({}, props), {}, {
+var InputPhone = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/jsx(InputText, _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
     autoComplete: "tel",
     keyboardType: "number-pad",
     textContentType: "telephoneNumber"
   }));
-}
+});
 
 var getTypographyColor = function (type) {
   return type ? 'white' : 'black';
@@ -4737,96 +4847,150 @@ function Label(_ref) {
   });
 }
 
-var OuterRadio = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Radio__OuterRadio"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], function (_ref) {
-  var theme = _ref.theme,
-    disabled = _ref.disabled;
-  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.radio.size;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.radio.size;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.forms.radio.size / 2;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.kitt.forms.radio.unchecked.borderWidth;
-}, function (_ref6) {
-  var theme = _ref6.theme,
-    disabled = _ref6.disabled;
-  return theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor;
-});
-var SelectedOuterRadio = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Radio__SelectedOuterRadio"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.kitt.forms.radio.checked.backgroundColor;
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.kitt.forms.radio.size;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.forms.radio.size;
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.kitt.forms.radio.size / 2;
-});
-var SelectedInnerRadio = /*#__PURE__*/styled.View.withConfig({
-  displayName: "Radio__SelectedInnerRadio"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.kitt.forms.radio.checked.innerBackgroundColor;
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.kitt.forms.radio.checked.innerSize;
-}, function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.kitt.forms.radio.checked.innerSize;
-}, function (_ref14) {
-  var theme = _ref14.theme;
-  return theme.kitt.forms.radio.checked.innerSize / 2;
-});
-var Container$3 = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "Radio__Container"
-})(["flex-direction:row;align-items:center;"]);
-var Text = /*#__PURE__*/styled(Typography.Text).withConfig({
-  displayName: "Radio__Text"
-})(["margin-left:", "px;"], function (_ref15) {
-  var theme = _ref15.theme;
-  return theme.kitt.spacing * 2;
-});
-function Radio(_ref16) {
-  var id = _ref16.id,
-    checked = _ref16.checked,
-    onChange = _ref16.onChange,
-    value = _ref16.value,
-    _ref16$disabled = _ref16.disabled,
-    disabled = _ref16$disabled === void 0 ? false : _ref16$disabled,
-    children = _ref16.children;
-  return /*#__PURE__*/jsxs(Container$3, {
+function InnerCircle(_ref) {
+  var isChecked = _ref.isChecked;
+  var theme = /*#__PURE__*/useTheme();
+  var sharedTransform = [{
+    scale: isChecked ? 1 : 0
+  }];
+  return /*#__PURE__*/jsx(View, {
+    width: "kitt.forms.radio.innerCircle.size",
+    height: "kitt.forms.radio.innerCircle.size",
+    borderRadius: "kitt.forms.radio.innerCircle.borderRadius",
+    backgroundColor: "kitt.forms.radio.innerCircle.backgroundColor",
+    _web: {
+      style: {
+        transform: sharedTransform,
+        transitionProperty: 'all',
+        transitionDuration: theme.kitt.forms.radio.transition.duration,
+        transitionTimingFunction: theme.kitt.forms.radio.transition.timingFunction
+      }
+    },
+    _ios: {
+      style: {
+        transform: sharedTransform
+      }
+    },
+    _android: {
+      style: {
+        transform: sharedTransform
+      }
+    }
+  });
+}
+
+function getBackgroundColor(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isPressed = _ref.isPressed,
+    isHovered = _ref.isHovered,
+    isFocused = _ref.isFocused,
+    isChecked = _ref.isChecked;
+  if (isChecked) return 'kitt.forms.radio.checked.backgroundColor';
+  if (isDisabled) return 'kitt.forms.radio.disabled.backgroundColor';
+  if (isPressed) return 'kitt.forms.radio.pressed.backgroundColor';
+  if (isHovered) return 'kitt.forms.radio.hover.backgroundColor';
+  if (isFocused) return 'kitt.forms.radio.focus.backgroundColor';
+  return 'kitt.forms.radio.default.backgroundColor';
+}
+
+function getBorderColor(_ref) {
+  var isDisabled = _ref.isDisabled,
+    isPressed = _ref.isPressed,
+    isHovered = _ref.isHovered,
+    isFocused = _ref.isFocused,
+    isChecked = _ref.isChecked;
+  if (isChecked) return 'kitt.forms.radio.checked.borderColor';
+  if (isDisabled) return 'kitt.forms.radio.disabled.borderColor';
+  if (isPressed) return 'kitt.forms.radio.pressed.borderColor';
+  if (isHovered) return 'kitt.forms.radio.hover.borderColor';
+  if (isFocused) return 'kitt.forms.radio.focus.borderColor';
+  return 'kitt.forms.radio.default.borderColor';
+}
+
+function OuterCircle(_ref) {
+  var children = _ref.children,
+    isChecked = _ref.isChecked,
+    isDisabled = _ref.isDisabled,
+    isHovered = _ref.isHovered,
+    isFocused = _ref.isFocused,
+    isPressed = _ref.isPressed;
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsx(View, {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: "kitt.forms.radio.borderWidth",
+    width: "kitt.forms.radio.size",
+    height: "kitt.forms.radio.size",
+    borderRadius: "kitt.forms.radio.borderRadius",
+    backgroundColor: getBackgroundColor({
+      isChecked: isChecked,
+      isDisabled: isDisabled,
+      isFocused: isFocused,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    borderColor: getBorderColor({
+      isChecked: isChecked,
+      isDisabled: isDisabled,
+      isFocused: isFocused,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    _web: {
+      style: {
+        transitionProperty: 'all',
+        transitionDuration: theme.kitt.forms.radio.transition.duration,
+        transitionTimingFunction: theme.kitt.forms.radio.transition.timingFunction
+      }
+    },
+    children: children
+  });
+}
+
+var Radio = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    checked = _ref.checked,
+    onChange = _ref.onChange,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    _children = _ref.children;
+  return /*#__PURE__*/jsx(Pressable, {
+    ref: ref,
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
     focusable: checked && !disabled,
+    flexDirection: "row",
+    alignItems: "center",
     onPress: function handlePress() {
       onChange(value);
     },
-    children: [checked && !disabled ? /*#__PURE__*/jsx(SelectedOuterRadio, {
-      children: /*#__PURE__*/jsx(SelectedInnerRadio, {})
-    }) : /*#__PURE__*/jsx(OuterRadio, {
-      disabled: disabled
-    }), /*#__PURE__*/jsx(Text, {
-      base: "body",
-      color: disabled ? 'black-light' : 'black',
-      children: children
-    })]
+    children: function children(_ref2) {
+      var isHovered = _ref2.isHovered,
+        isPressed = _ref2.isPressed,
+        isFocused = _ref2.isFocused;
+      return /*#__PURE__*/jsxs(HStack, {
+        space: _children ? 'kitt.2' : undefined,
+        alignItems: "center",
+        children: [/*#__PURE__*/jsx(OuterCircle, {
+          isChecked: checked,
+          isDisabled: disabled,
+          isHovered: isHovered,
+          isFocused: isFocused,
+          isPressed: isPressed,
+          children: /*#__PURE__*/jsx(InnerCircle, {
+            isChecked: checked
+          })
+        }), _children ? /*#__PURE__*/jsx(Typography.Text, {
+          base: "body",
+          color: disabled ? 'black-light' : 'black',
+          children: _children
+        }) : null]
+      });
+    }
   });
-}
+});
 
 var StyledAnimatedView = /*#__PURE__*/styled(Animated.View).withConfig({
   displayName: "AnimatedContainer__StyledAnimatedView"
@@ -5120,15 +5284,15 @@ function RadioButtonGroup(_ref2) {
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-function TextArea(_ref) {
+var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/jsx(InputText, _objectSpread({
+    ref: ref,
     multiline: true,
     textAlignVertical: "top",
-    minHeight: theme.kitt.forms.textArea.minHeight
+    minHeight: "kitt.forms.textArea.minHeight"
   }, props));
-}
+});
 
 function Highlight(_ref) {
   var _ref$variant = _ref.variant,
@@ -5657,9 +5821,13 @@ function Message(_ref) {
 }
 
 var createKittSpaces = function (spacing) {
-  var sizes = {};
+  var sizes = {
+    positive: {},
+    negative: {}
+  };
   for (var size = 1; size <= 64; size++) {
-    sizes["kitt.".concat(size)] = size * spacing;
+    sizes.positive["kitt.".concat(size)] = size * spacing;
+    sizes.negative["-kitt.".concat(size)] = -size * spacing;
   }
   return sizes;
 };
@@ -5707,10 +5875,62 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
               backgroundColor: theme.forms.radioButtonGroup.item.backgroundColor
             }
           },
-          skeleton: {
-            backgroundColor: theme.skeleton.backgroundColor,
-            flareColor: theme.skeleton.flareColor
+          checkbox: {
+            markColor: theme.forms.checkbox.markColor,
+            checked: {
+              backgroundColor: theme.forms.checkbox.checked.backgroundColor,
+              borderColor: theme.forms.checkbox.checked.borderColor
+            },
+            hover: {
+              backgroundColor: theme.forms.checkbox.hover.backgroundColor,
+              borderColor: theme.forms.checkbox.hover.borderColor
+            },
+            pressed: {
+              backgroundColor: theme.forms.checkbox.pressed.backgroundColor,
+              borderColor: theme.forms.checkbox.pressed.borderColor
+            },
+            focus: {
+              backgroundColor: theme.forms.checkbox.focus.backgroundColor,
+              borderColor: theme.forms.checkbox.focus.borderColor
+            },
+            "default": {
+              backgroundColor: theme.forms.checkbox["default"].backgroundColor,
+              borderColor: theme.forms.checkbox["default"].borderColor
+            }
+          },
+          radio: {
+            checked: {
+              backgroundColor: theme.forms.radio.checked.backgroundColor,
+              borderColor: theme.forms.radio.checked.borderColor
+            },
+            hover: {
+              backgroundColor: theme.forms.radio.hover.backgroundColor,
+              borderColor: theme.forms.radio.hover.borderColor
+            },
+            pressed: {
+              backgroundColor: theme.forms.radio.pressed.backgroundColor,
+              borderColor: theme.forms.radio.pressed.borderColor
+            },
+            focus: {
+              backgroundColor: theme.forms.radio.pressed.backgroundColor,
+              borderColor: theme.forms.radio.pressed.borderColor
+            },
+            disabled: {
+              backgroundColor: theme.forms.radio.disabled.backgroundColor,
+              borderColor: theme.forms.radio.disabled.borderColor
+            },
+            "default": {
+              backgroundColor: theme.forms.radio.unchecked.backgroundColor,
+              borderColor: theme.forms.radio.unchecked.borderColor
+            },
+            innerCircle: {
+              backgroundColor: theme.forms.radio.checked.innerBackgroundColor
+            }
           }
+        },
+        skeleton: {
+          backgroundColor: theme.skeleton.backgroundColor,
+          flareColor: theme.skeleton.flareColor
         }
       }),
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.colors
@@ -5722,7 +5942,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       sm: Number.MAX_SAFE_INTEGER,
       xl: Number.MAX_SAFE_INTEGER,
       xs: Number.MAX_SAFE_INTEGER
-    }, spaces), {}, {
+    }, spaces.positive), {}, {
       kitt: {
         avatar: {
           borderRadius: theme.avatar.borderRadius,
@@ -5751,6 +5971,15 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             item: {
               borderRadius: theme.forms.radioButtonGroup.item.borderRadius
             }
+          },
+          checkbox: {
+            borderRadius: theme.forms.checkbox.borderRadius
+          },
+          radio: {
+            borderRadius: theme.forms.radio.size * 0.5,
+            innerCircle: {
+              borderRadius: theme.forms.radio.checked.innerSize * 0.5
+            }
           }
         },
         tooltip: {
@@ -5785,6 +6014,12 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             item: {
               borderWidth: theme.forms.radioButtonGroup.item.borderWidth
             }
+          },
+          checkbox: {
+            borderWidth: theme.forms.checkbox.borderWidth
+          },
+          radio: {
+            borderWidth: theme.forms.radio.unchecked.borderWidth
           }
         },
         cardModal: {
@@ -5798,7 +6033,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.borderWidths
     },
-    sizes: _objectSpread(_objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale), {}, {
+    sizes: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, spaces.positive), spaces.negative), overridenNativeBaseSizeandSpaceScale), {}, {
       kitt: {
         avatar: {
           size: theme.avatar.size,
@@ -5844,6 +6079,21 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             item: {
               minHeight: theme.forms.radioButtonGroup.item.minHeight
             }
+          },
+          checkbox: {
+            height: theme.forms.checkbox.height,
+            width: theme.forms.checkbox.width,
+            iconSize: theme.forms.checkbox.iconSize,
+            textSpacing: theme.forms.checkbox.textSpacing
+          },
+          radio: {
+            size: theme.forms.radio.size,
+            innerCircle: {
+              size: theme.forms.radio.checked.innerSize
+            }
+          },
+          textArea: {
+            minHeight: theme.forms.textArea.minHeight
           }
         },
         iconButton: {
@@ -5872,7 +6122,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.sizes
     }),
-    space: _objectSpread(_objectSpread(_objectSpread({}, spaces), overridenNativeBaseSizeandSpaceScale), {}, {
+    space: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, spaces.positive), spaces.negative), overridenNativeBaseSizeandSpaceScale), {}, {
       kitt: {
         button: {
           padding: theme.button.padding
@@ -7783,7 +8033,7 @@ function ModalDateTimePicker(_ref2) {
           onPress: function handleSubmit() {
             onChange(currentValue);
           },
-          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$2, {
+          children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
             children: validateButtonLabel
           }) : /*#__PURE__*/jsx(FormattedMessage, {
             id: "kitt-universal.ModalDateTimePicker.confirm"