@ornikar/kitt-universal 9.34.2 → 9.36.0

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

@@ -2663,11 +2663,36 @@ const 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'
+  }
 };
 
 const datePicker = {
@@ -2859,18 +2884,31 @@ const inputTag = {
 const 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'
   }
 };
 
@@ -3298,75 +3336,121 @@ function useKittTheme() {
   }, [dimensions]);
 }
 
-const CheckboxAndLabelPressableWrapper = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "Checkbox__CheckboxAndLabelPressableWrapper",
-  componentId: "kitt-universal__sc-1sav1n6-0"
-})(["display:flex;flex-direction:row;"]);
-const CheckboxContainer = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Checkbox__CheckboxContainer",
-  componentId: "kitt-universal__sc-1sav1n6-1"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:center;height:", "px;width:", "px;position:relative;border-radius:", "px;", " margin-right:", ";"], ({
-  theme
-}) => theme.kitt.forms.checkbox.height, ({
-  theme
-}) => theme.kitt.forms.checkbox.width, ({
-  theme
-}) => theme.kitt.forms.checkbox.borderRadius, ({
-  $isChecked,
-  theme
-}) => {
-  const {
-    checkedBackgroundColor,
-    checkedBorderColor,
-    borderColor,
-    borderWidth,
-    backgroundColor
-  } = theme.kitt.forms.checkbox;
-  if ($isChecked) {
-    return styled.css(["background-color:", ";border:", ";"], checkedBackgroundColor, `${borderWidth}px solid ${checkedBorderColor}`);
-  }
-  return styled.css(["background-color:", ";border:", ";"], backgroundColor, `${borderWidth}px solid ${borderColor}`);
-}, ({
-  theme,
-  $hasLabel
-}) => {
-  if (!$hasLabel) return '0px';
-  return `${theme.kitt.spacing * 2.5}px;`;
-});
-function Checkbox({
-  onChange,
-  onBlur,
-  onFocus,
+function getBackgroundColor$1({
+  isDisabled,
+  isPressed,
+  isHovered,
+  isFocused,
+  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({
+  isDisabled,
+  isPressed,
+  isHovered,
+  isFocused,
+  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';
+}
+
+const Checkbox = /*#__PURE__*/React.forwardRef(({
   checked,
   hitSlop = 40,
   id,
-  children
-}) {
+  children,
+  disabled,
+  onChange,
+  onBlur,
+  onFocus
+}, ref) => {
   const theme = useKittTheme();
-  return /*#__PURE__*/jsxRuntime.jsxs(CheckboxAndLabelPressableWrapper, {
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    ref: ref,
+    testID: id,
     accessibilityRole: "checkbox",
     accessibilityState: {
       checked
     },
     hitSlop: hitSlop,
+    disabled: disabled,
     onPress: e => {
       if (onFocus) onFocus(e);
       if (onChange) onChange(!checked, e);
       if (onBlur) onBlur(e);
     },
-    children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxContainer, {
-      $isChecked: checked,
-      $hasLabel: !!children,
-      testID: id,
-      children: checked ? /*#__PURE__*/jsxRuntime.jsx(Icon, {
-        align: "center",
-        color: theme.kitt.forms.checkbox.markColor,
-        size: theme.kitt.forms.checkbox.iconSize,
-        icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckboxMark, {})
-      }) : null
-    }), children]
+    children: ({
+      isHovered,
+      isPressed,
+      isFocused
+    }) => /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+      space: children ? 'kitt.forms.checkbox.textSpacing' : undefined,
+      children: [/*#__PURE__*/jsxRuntime.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,
+          isHovered,
+          isPressed,
+          isChecked: checked
+        }),
+        backgroundColor: getBackgroundColor$1({
+          isDisabled: disabled,
+          isFocused,
+          isHovered,
+          isPressed,
+          isChecked: checked
+        }),
+        _web: {
+          style: {
+            transitionDuration: theme.kitt.forms.checkbox.transition.duration,
+            transitionProperty: 'all',
+            transitionTimingFunction: theme.kitt.forms.checkbox.transition.timingFunction
+          }
+        },
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Icon, {
+            align: "center",
+            color: theme.kitt.forms.checkbox.markColor,
+            size: theme.kitt.forms.checkbox.iconSize,
+            icon: /*#__PURE__*/jsxRuntime.jsx(kittIcons.CheckboxMark, {})
+          })
+        })
+      }), children ? /*#__PURE__*/jsxRuntime.jsx(View, {
+        flexShrink: 1,
+        children: children
+      }) : null]
+    })
   });
-}
+});
 
 function prefixWithZero(value, maxLength = 2) {
   return `${value}`.padStart(maxLength, '0');
@@ -3678,7 +3762,8 @@ const InputPart = /*#__PURE__*/React.forwardRef(({
   isHoveredInternal,
   isPressedInternal,
   onChange,
-  onBlur
+  onBlur,
+  onSubmitEditing
 }, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     ref: ref,
@@ -3694,7 +3779,8 @@ const InputPart = /*#__PURE__*/React.forwardRef(({
     keyboardType: "numeric",
     textAlign: "center",
     onChange: onChange,
-    onBlur: onBlur
+    onBlur: onBlur,
+    onSubmitEditing: onSubmitEditing
   });
 });
 
@@ -3711,7 +3797,7 @@ function PartContainer({
   });
 }
 
-function KeyboardDatePicker({
+const KeyboardDatePicker = /*#__PURE__*/React.forwardRef(({
   value,
   testID,
   id,
@@ -3726,9 +3812,9 @@ function KeyboardDatePicker({
   onChange,
   onBlur,
   onFocus,
+  onSubmitEditing,
   ...props
-}) {
-  const dayRef = React.useRef(null);
+}, ref) => {
   const monthRef = React.useRef(null);
   const yearRef = React.useRef(null);
   const defaultValue = value;
@@ -3764,7 +3850,7 @@ function KeyboardDatePicker({
         isStretch: stretch,
         width: "kitt.forms.datePicker.day.minWidth",
         children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
-          ref: dayRef,
+          ref: ref,
           ...sharedInputPartProps,
           placeholder: placeholder?.day,
           value: state.displayedDay,
@@ -3780,7 +3866,10 @@ function KeyboardDatePicker({
           },
           onBlur: () => dispatch({
             type: 'day-blur'
-          })
+          }),
+          onSubmitEditing: () => {
+            if (monthRef.current) monthRef.current.focus();
+          }
         })
       }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
         isStretch: stretch,
@@ -3802,7 +3891,10 @@ function KeyboardDatePicker({
           },
           onBlur: () => dispatch({
             type: 'month-blur'
-          })
+          }),
+          onSubmitEditing: () => {
+            if (yearRef.current) yearRef.current.focus();
+          }
         })
       }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
         isStretch: stretch,
@@ -3820,14 +3912,15 @@ function KeyboardDatePicker({
           },
           onBlur: () => dispatch({
             type: 'year-blur'
-          })
+          }),
+          onSubmitEditing: onSubmitEditing
         })
       })]
     })
   });
-}
+});
 
-function PressableDateInputs({
+const PressableDateInputs = /*#__PURE__*/React.forwardRef(({
   disabled,
   stretch,
   id,
@@ -3838,7 +3931,7 @@ function PressableDateInputs({
   isHoveredInternal,
   isPressedInternal,
   onPress
-}) {
+}, ref) => {
   const sharedInputPartProps = {
     isFocusedInternal,
     isHoveredInternal,
@@ -3846,6 +3939,7 @@ function PressableDateInputs({
     disabled
   };
   return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    ref: ref,
     display: "flex",
     flexDirection: "row",
     position: "relative",
@@ -3895,9 +3989,9 @@ function PressableDateInputs({
       })]
     })
   });
-}
+});
 
-function DatePickerAndroid({
+const DatePickerAndroid = /*#__PURE__*/React.forwardRef(({
   onBlur,
   onFocus,
   pickerDefaultDate,
@@ -3906,7 +4000,7 @@ function DatePickerAndroid({
   value,
   onChange,
   ...props
-}) {
+}, ref) => {
   const [isFocused, setIsFocused] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value);
   const handleClose = () => {
@@ -3938,12 +4032,13 @@ function DatePickerAndroid({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/jsxRuntime.jsx(PressableDateInputs, {
+    ref: ref,
     value: currentValue,
     isFocusedInternal: isFocused,
     onPress: handleModalOpen,
     ...props
   });
-}
+});
 
 const BodyView = /*#__PURE__*/styled__default.View.withConfig({
   displayName: "Body__BodyView",
@@ -4403,7 +4498,7 @@ function ModalPlatformDateTimePicker({
   });
 }
 
-function DefaultNativeUIDatePicker({
+const DefaultNativeUIDatePicker = /*#__PURE__*/React.forwardRef(({
   value,
   pickerUITestID,
   pickerUITitle,
@@ -4417,7 +4512,7 @@ function DefaultNativeUIDatePicker({
   onFocus,
   onBlur,
   ...props
-}) {
+}, ref) => {
   const [isPickerUIVisible, setIsPickerUIVisible] = React.useState(isDefaultVisible);
   const [isFocused, setIsFocused] = React.useState(false);
   const [currentValue, setCurrentValue] = React.useState(value);
@@ -4428,6 +4523,7 @@ function DefaultNativeUIDatePicker({
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(PressableDateInputs, {
+      ref: ref,
       value: currentValue,
       isFocusedInternal: isFocused || isFocusedInternal,
       isHoveredInternal: isHoveredInternal,
@@ -4453,9 +4549,9 @@ function DefaultNativeUIDatePicker({
       }
     })]
   });
-}
+});
 
-function NativeUIDatePicker({
+const NativeUIDatePicker = /*#__PURE__*/React.forwardRef(({
   value,
   pickerUITestID,
   isDefaultVisible,
@@ -4463,9 +4559,10 @@ function NativeUIDatePicker({
   onChange,
   onBlur,
   ...props
-}) {
+}, ref) => {
   if (reactNative.Platform.OS === 'android') {
     return /*#__PURE__*/jsxRuntime.jsx(DatePickerAndroid, {
+      ref: ref,
       pickerDefaultDate: pickerDefaultDate,
       pickerUITestID: pickerUITestID,
       isDefaultVisible: isDefaultVisible,
@@ -4476,6 +4573,7 @@ function NativeUIDatePicker({
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx(DefaultNativeUIDatePicker, {
+    ref: ref,
     value: value,
     isDefaultVisible: isDefaultVisible,
     pickerUITestID: pickerUITestID,
@@ -4483,36 +4581,41 @@ function NativeUIDatePicker({
     onBlur: onBlur,
     ...props
   });
-}
+});
 
-function DatePicker({
+const DatePicker = /*#__PURE__*/React.forwardRef(({
   fillMode = 'native',
   value,
+  onSubmitEditing,
   ...props
-}) {
+}, ref) => {
   // in apps, final-form can give a string value that will break the component
   const currentValue = value || undefined;
   if (fillMode === 'keyboard') {
     return /*#__PURE__*/jsxRuntime.jsx(KeyboardDatePicker, {
+      ref: ref,
       ...props,
-      value: currentValue
+      value: currentValue,
+      onSubmitEditing: onSubmitEditing
     });
   }
   return /*#__PURE__*/jsxRuntime.jsx(NativeUIDatePicker, {
+    ref: ref,
     ...props,
     value: currentValue
   });
-}
+});
 
-function InputEmail(props) {
+const InputEmail = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    ref: ref,
     autoComplete: "email",
     keyboardType: "email-address",
     textContentType: "emailAddress",
     autoCapitalize: "none",
     ...props
   });
-}
+});
 
 const getColorFromState = state => {
   switch (state) {
@@ -4594,13 +4697,14 @@ function InputPressable({
   });
 }
 
-function InputPassword({
+const InputPassword = /*#__PURE__*/React.forwardRef(({
   isPasswordDefaultVisible,
   right,
   ...props
-}) {
+}, ref) => {
   const [isVisible, setIsVisible] = React.useState(Boolean(isPasswordDefaultVisible));
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    ref: ref,
     ...props,
     textContentType: "password",
     autoComplete: "password",
@@ -4615,16 +4719,17 @@ function InputPassword({
       })
     })
   });
-}
+});
 
-function InputPhone(props) {
+const InputPhone = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    ref: ref,
     ...props,
     autoComplete: "tel",
     keyboardType: "number-pad",
     textContentType: "telephoneNumber"
   });
-}
+});
 
 const getTypographyColor = type => type ? 'white' : 'black';
 const InputTagContainer = /*#__PURE__*/styled__default(reactNative.View).withConfig({
@@ -4688,86 +4793,154 @@ function Label({
   });
 }
 
-const OuterRadio = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Radio__OuterRadio",
-  componentId: "kitt-universal__sc-1mdgr2o-0"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;border-width:", "px;border-color:", ";"], ({
-  theme,
-  disabled
-}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor, ({
-  theme
-}) => theme.kitt.forms.radio.size, ({
-  theme
-}) => theme.kitt.forms.radio.size, ({
-  theme
-}) => theme.kitt.forms.radio.size / 2, ({
-  theme
-}) => theme.kitt.forms.radio.unchecked.borderWidth, ({
-  theme,
-  disabled
-}) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor);
-const SelectedOuterRadio = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Radio__SelectedOuterRadio",
-  componentId: "kitt-universal__sc-1mdgr2o-1"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;justify-content:center;align-items:center;"], ({
-  theme
-}) => theme.kitt.forms.radio.checked.backgroundColor, ({
-  theme
-}) => theme.kitt.forms.radio.size, ({
-  theme
-}) => theme.kitt.forms.radio.size, ({
-  theme
-}) => theme.kitt.forms.radio.size / 2);
-const SelectedInnerRadio = /*#__PURE__*/styled__default.View.withConfig({
-  displayName: "Radio__SelectedInnerRadio",
-  componentId: "kitt-universal__sc-1mdgr2o-2"
-})(["background-color:", ";width:", "px;height:", "px;border-radius:", "px;"], ({
-  theme
-}) => theme.kitt.forms.radio.checked.innerBackgroundColor, ({
-  theme
-}) => theme.kitt.forms.radio.checked.innerSize, ({
-  theme
-}) => theme.kitt.forms.radio.checked.innerSize, ({
-  theme
-}) => theme.kitt.forms.radio.checked.innerSize / 2);
-const Container$3 = /*#__PURE__*/styled__default.Pressable.withConfig({
-  displayName: "Radio__Container",
-  componentId: "kitt-universal__sc-1mdgr2o-3"
-})(["flex-direction:row;align-items:center;"]);
-const Text = /*#__PURE__*/styled__default(Typography.Text).withConfig({
-  displayName: "Radio__Text",
-  componentId: "kitt-universal__sc-1mdgr2o-4"
-})(["margin-left:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 2);
-function Radio({
+function InnerCircle({
+  isChecked
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const sharedTransform = [{
+    scale: isChecked ? 1 : 0
+  }];
+  return /*#__PURE__*/jsxRuntime.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({
+  isDisabled,
+  isPressed,
+  isHovered,
+  isFocused,
+  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({
+  isDisabled,
+  isPressed,
+  isHovered,
+  isFocused,
+  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({
+  children,
+  isChecked,
+  isDisabled,
+  isHovered,
+  isFocused,
+  isPressed
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  return /*#__PURE__*/jsxRuntime.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,
+      isDisabled,
+      isFocused,
+      isHovered,
+      isPressed
+    }),
+    borderColor: getBorderColor({
+      isChecked,
+      isDisabled,
+      isFocused,
+      isHovered,
+      isPressed
+    }),
+    _web: {
+      style: {
+        transitionProperty: 'all',
+        transitionDuration: theme.kitt.forms.radio.transition.duration,
+        transitionTimingFunction: theme.kitt.forms.radio.transition.timingFunction
+      }
+    },
+    children: children
+  });
+}
+
+const Radio = /*#__PURE__*/React.forwardRef(({
   id,
   checked,
   onChange,
   value,
-  disabled = false,
+  disabled,
   children
-}) {
-  return /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    ref: ref,
     nativeID: id,
     disabled: disabled,
     accessibilityRole: "radio",
     "aria-checked": checked,
     focusable: checked && !disabled,
+    flexDirection: "row",
+    alignItems: "center",
     onPress: () => {
       onChange(value);
     },
-    children: [checked && !disabled ? /*#__PURE__*/jsxRuntime.jsx(SelectedOuterRadio, {
-      children: /*#__PURE__*/jsxRuntime.jsx(SelectedInnerRadio, {})
-    }) : /*#__PURE__*/jsxRuntime.jsx(OuterRadio, {
-      disabled: disabled
-    }), /*#__PURE__*/jsxRuntime.jsx(Text, {
-      base: "body",
-      color: disabled ? 'black-light' : 'black',
-      children: children
-    })]
+    children: ({
+      isHovered,
+      isPressed,
+      isFocused
+    }) => /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+      space: children ? 'kitt.2' : undefined,
+      alignItems: "center",
+      children: [/*#__PURE__*/jsxRuntime.jsx(OuterCircle, {
+        isChecked: checked,
+        isDisabled: disabled,
+        isHovered: isHovered,
+        isFocused: isFocused,
+        isPressed: isPressed,
+        children: /*#__PURE__*/jsxRuntime.jsx(InnerCircle, {
+          isChecked: checked
+        })
+      }), children ? /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
+        base: "body",
+        color: disabled ? 'black-light' : 'black',
+        children: children
+      }) : null]
+    })
   });
-}
+});
 
 const StyledAnimatedView = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
   displayName: "AnimatedContainer__StyledAnimatedView",
@@ -5063,17 +5236,17 @@ function RadioButtonGroup({
 }
 RadioButtonGroup.RadioButton = RadioButtonGroupItem;
 
-function TextArea({
+const TextArea = /*#__PURE__*/React.forwardRef(({
   ...props
-}) {
-  const theme = /*#__PURE__*/styled.useTheme();
+}, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    ref: ref,
     multiline: true,
     textAlignVertical: "top",
-    minHeight: theme.kitt.forms.textArea.minHeight,
+    minHeight: "kitt.forms.textArea.minHeight",
     ...props
   });
-}
+});
 
 function Highlight({
   variant = 'regular',
@@ -5607,9 +5780,13 @@ function Message({
 }
 
 const createKittSpaces = spacing => {
-  const sizes = {};
+  const sizes = {
+    positive: {},
+    negative: {}
+  };
   for (let size = 1; size <= 64; size++) {
-    sizes[`kitt.${size}`] = size * spacing;
+    sizes.positive[`kitt.${size}`] = size * spacing;
+    sizes.negative[`-kitt.${size}`] = -size * spacing;
   }
   return sizes;
 };
@@ -5656,10 +5833,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?.colors
@@ -5672,7 +5901,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       xl: Number.MAX_SAFE_INTEGER,
       xs: Number.MAX_SAFE_INTEGER,
       // Allow values like kitt.X
-      ...spaces,
+      ...spaces.positive,
       kitt: {
         avatar: {
           borderRadius: theme.avatar.borderRadius,
@@ -5701,6 +5930,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: {
@@ -5735,6 +5973,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: {
@@ -5749,7 +5993,8 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       app: appTheme?.borderWidths
     },
     sizes: {
-      ...spaces,
+      ...spaces.positive,
+      ...spaces.negative,
       ...overridenNativeBaseSizeandSpaceScale,
       kitt: {
         avatar: {
@@ -5796,6 +6041,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: {
@@ -5825,7 +6085,8 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       app: appTheme?.sizes
     },
     space: {
-      ...spaces,
+      ...spaces.positive,
+      ...spaces.negative,
       ...overridenNativeBaseSizeandSpaceScale,
       kitt: {
         button: {