@ornikar/kitt-universal 3.8.0 → 4.0.0

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

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { UserIcon, EyeIcon, EyeOffIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
+import { UserIcon, EyeOffIcon, EyeIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, TextInput, Pressable, ActivityIndicator, TouchableOpacity, View, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
+import { Animated, Easing, useWindowDimensions, Image, Platform, Linking, Pressable, TextInput, ActivityIndicator, TouchableOpacity, View, StyleSheet, ScrollView, Modal as Modal$1, Text as Text$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components/native';
 import { useRef, useEffect, cloneElement, useContext, createContext, forwardRef, useMemo, useState, Fragment, Children } from 'react';
@@ -136,11 +136,11 @@ var KittBreakpointsMax = {
   LARGE: KittBreakpoints.WIDE - 1
 };
 
-var _excluded$d = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
+var _excluded$e = ["accessibilityRole", "base", "small", "medium", "large", "variant", "color"];
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var IsHeaderTypographyContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -216,7 +216,7 @@ function Typography(_ref4) {
       large = _ref4.large,
       variant = _ref4.variant,
       color = _ref4.color,
-      otherProps = _objectWithoutProperties(_ref4, _excluded$d);
+      otherProps = _objectWithoutProperties(_ref4, _excluded$e);
 
   var isHeaderTypographyInContext = useContext(IsHeaderTypographyContext);
   var hasTypographyAncestor = isHeaderTypographyInContext !== undefined;
@@ -233,14 +233,14 @@ function Typography(_ref4) {
   var nonNullableVariant = variant !== null && variant !== void 0 ? variant : isHeader ? 'bold' : 'regular';
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(IsHeaderTypographyContext.Provider, {
     value: isHeader,
-    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$h({
+    children: /*#__PURE__*/jsx(StyledTypography, _objectSpread$j({
       $color: colorOrDefaultToBlack,
       $isHeader: isHeader,
       $typeForCurrentWindowSize: typeForCurrentWindowSize,
       $variant: nonNullableVariant,
       accessibilityRole: accessibilityRole || undefined
     }, otherProps))
-  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$h({
+  }) : /*#__PURE__*/jsx(StyledTypography, _objectSpread$j({
     $color: colorOrDefaultToBlack,
     $isHeader: isHeader,
     $variant: nonNullableVariant,
@@ -253,13 +253,13 @@ function Typography(_ref4) {
 }
 
 function TypographyText(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$h({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$j({
     accessibilityRole: null
   }, props));
 }
 
 function TypographyParagraph(props) {
-  return /*#__PURE__*/jsx(Typography, _objectSpread$h({
+  return /*#__PURE__*/jsx(Typography, _objectSpread$j({
     accessibilityRole: "paragraph"
   }, props));
 }
@@ -267,7 +267,7 @@ function TypographyParagraph(props) {
 var createHeading = function (level, defaultBase) {
   // https://github.com/necolas/react-native-web/issues/401
   function TypographyHeading(props) {
-    return /*#__PURE__*/jsx(Typography, _objectSpread$h(_objectSpread$h({
+    return /*#__PURE__*/jsx(Typography, _objectSpread$j(_objectSpread$j({
       accessibilityRole: "header",
       base: defaultBase
     }, props), {}, {
@@ -303,11 +303,11 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$c = ["size", "base", "round", "light"];
+var _excluded$d = ["size", "base", "round", "light"];
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getInitials = function (firstname, lastname) {
   return "".concat(firstname[0]).concat(lastname[0]).toUpperCase();
@@ -378,13 +378,13 @@ function Avatar(_ref6) {
       base = _ref6$base === void 0 ? 'body-small' : _ref6$base,
       round = _ref6.round,
       light = _ref6.light,
-      props = _objectWithoutProperties(_ref6, _excluded$c);
+      props = _objectWithoutProperties(_ref6, _excluded$d);
 
   return /*#__PURE__*/jsx(StyledAvatarView, {
     $size: size,
     $isRound: round,
     $isLight: light,
-    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$g({
+    children: /*#__PURE__*/jsx(AvatarContent, _objectSpread$i({
       size: size,
       base: base,
       isLight: light
@@ -526,26 +526,26 @@ var BaseStyledButtonPressable = /*#__PURE__*/styled.View.withConfig({
   return defaultPadding;
 });
 
-var _excluded$b = ["color"],
+var _excluded$c = ["color"],
     _excluded2$2 = ["color"];
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      props = _objectWithoutProperties(_ref, _excluded$b);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(Icon, _objectSpread$f(_objectSpread$f({}, props), {}, {
+  return /*#__PURE__*/jsx(Icon, _objectSpread$h(_objectSpread$h({}, props), {}, {
     color: color === 'inherit' ? 'inherit' : theme.kitt.typography.colors[color]
   }));
 }
 
 function TypographyIconInheritColor(props) {
   var color = useTypographyColor();
-  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
+  return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$h({
     color: color
   }, props));
 }
@@ -555,23 +555,23 @@ function TypographyIcon(_ref2) {
       props = _objectWithoutProperties(_ref2, _excluded2$2);
 
   if (color) {
-    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$f({
+    return /*#__PURE__*/jsx(TypographyIconSpecifiedColor, _objectSpread$h({
       color: color
     }, props));
   }
 
-  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$f({}, props));
+  return /*#__PURE__*/jsx(TypographyIconInheritColor, _objectSpread$h({}, props));
 }
 
 function isSubtle(type) {
   return type.startsWith('subtle');
 }
 
-var _excluded$a = ["type", "isDisabled", "$isStretch", "icon", "children"];
+var _excluded$b = ["type", "isDisabled", "$isStretch", "icon", "children"];
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getTextColorByType = function (type) {
   switch (type) {
@@ -677,7 +677,7 @@ function ButtonContentChildren(_ref4) {
     color: isWebSubtle ? 'inherit' : color
   };
   return /*#__PURE__*/jsxs(StyledChildrenWithIcon, {
-    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, buttonIconSharedProps), {}, {
+    children: [icon && iconPosition === 'left' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$g(_objectSpread$g({}, buttonIconSharedProps), {}, {
       testID: "button-left-icon",
       icon: icon
     })) : null, /*#__PURE__*/jsx(StyledButtonText, {
@@ -688,7 +688,7 @@ function ButtonContentChildren(_ref4) {
       ,
       color: isWebSubtle ? undefined : color,
       children: children
-    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$e(_objectSpread$e({}, buttonIconSharedProps), {}, {
+    }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread$g(_objectSpread$g({}, buttonIconSharedProps), {}, {
       icon: icon
     })) : null]
   });
@@ -714,14 +714,14 @@ function ButtonContent(_ref7) {
       $isStretch = _ref7.$isStretch,
       icon = _ref7.icon,
       children = _ref7.children,
-      props = _objectWithoutProperties(_ref7, _excluded$a);
+      props = _objectWithoutProperties(_ref7, _excluded$b);
 
   var color = isDisabled ? 'black-light' : getTextColorByType(type);
   return /*#__PURE__*/jsx(ButtonContentContainer, {
     $isSubtle: isSubtle(type),
     $isStretch: $isStretch,
     $isIconOnly: Boolean(!children && icon),
-    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$e(_objectSpread$e({
+    children: /*#__PURE__*/jsx(ButtonContentChildren, _objectSpread$g(_objectSpread$g({
       icon: icon,
       type: type,
       isDisabled: isDisabled,
@@ -790,7 +790,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
 });
 
-var Container$7 = /*#__PURE__*/styled.View.withConfig({
+var Container$6 = /*#__PURE__*/styled.View.withConfig({
   displayName: "Card__Container"
 })(["background-color:", ";padding:", ";border-radius:", ";border-width:", ";border-color:", ";"], function (_ref) {
   var theme = _ref.theme,
@@ -813,7 +813,7 @@ var Container$7 = /*#__PURE__*/styled.View.withConfig({
 function Card(_ref6) {
   var children = _ref6.children,
       type = _ref6.type;
-  return /*#__PURE__*/jsx(Container$7, {
+  return /*#__PURE__*/jsx(Container$6, {
     type: type,
     children: children
   });
@@ -858,20 +858,20 @@ var defaultOpenLinkBehavior = {
   web: 'targetBlank'
 };
 
-var _excluded$9 = ["as", "href", "openLinkBehavior", "onPress"];
+var _excluded$a = ["as", "href", "openLinkBehavior", "onPress"];
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ExternalLink(_ref) {
   var Component = _ref.as,
       href = _ref.href,
       _ref$openLinkBehavior = _ref.openLinkBehavior,
       openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
       onPress = _ref.onPress,
-      rest = _objectWithoutProperties(_ref, _excluded$9);
+      rest = _objectWithoutProperties(_ref, _excluded$a);
 
-  return /*#__PURE__*/jsx(Component, _objectSpread$d(_objectSpread$d({}, rest), {}, {
+  return /*#__PURE__*/jsx(Component, _objectSpread$f(_objectSpread$f({}, rest), {}, {
     onPress: function handleOnPress() {
       if (onPress) onPress();
       if (!href) return;
@@ -905,6 +905,7 @@ var getColorFromState = function (state) {
     case 'invalid':
       return 'danger';
 
+    case 'valid':
     default:
       return 'black-light';
   }
@@ -961,43 +962,47 @@ function InputField(_ref4) {
   });
 }
 
-var useInputText = function () {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
+function getIconColor(state, disabled) {
+  if (disabled) return 'black-light';
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isPasswordVisible = _useState4[0],
-      setIsPasswordVisible = _useState4[1];
+  switch (state) {
+    case 'invalid':
+      return 'danger';
 
-  return {
-    isFocused: isFocused,
-    handleInputFocus: function handleInputFocus() {
-      return setIsFocused(true);
-    },
-    handleInputBlur: function handleInputBlur() {
-      return setIsFocused(false);
-    },
-    togglePasswordVisibility: function togglePasswordVisibility() {
-      return setIsPasswordVisible(function (isVisible) {
-        return !isVisible;
-      });
-    },
-    isPasswordVisible: isPasswordVisible
-  };
-};
+    case 'valid':
+      return 'success';
+
+    default:
+      return undefined;
+  }
+}
 
-var _excluded$8 = ["id", "minHeight", "type", "state", "internalForceState", "disabled", "onFocus", "onBlur"];
+function InputIcon(_ref) {
+  var icon = _ref.icon,
+      state = _ref.state,
+      disabled = _ref.disabled;
+  var theme = /*#__PURE__*/useTheme();
+  var color = getIconColor(state, disabled);
+  return /*#__PURE__*/jsx(TypographyIcon, {
+    color: color,
+    icon: icon,
+    size: theme.kitt.forms.input.icon.size
+  });
+}
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function InputPressable(_ref) {
+  var props = _extends({}, _ref);
+
+  return /*#__PURE__*/jsx(Pressable, _objectSpread$e({}, props));
+}
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width:", ";border-radius:", ";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;
+      $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;
@@ -1006,147 +1011,158 @@ var styledTextInputMixin = /*#__PURE__*/css(["background-color:", ";border-width
   return theme.kitt.forms.input.borderRadius;
 }, function (_ref4) {
   var theme = _ref4.theme,
-      state = _ref4.state;
-  return theme.kitt.forms.input.states[state].borderColor;
+      $state = _ref4.$state;
+  return theme.kitt.forms.input.states[$state].borderColor;
 }, function (_ref5) {
   var theme = _ref5.theme;
   var typeConfigKey = getTypographyTypeConfigKey(theme);
   return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize;
 }, function (_ref6) {
   var theme = _ref6.theme,
-      state = _ref6.state;
-  return theme.kitt.typography.colors[theme.kitt.forms.input.states[state].color];
+      $state = _ref6.$state;
+  return theme.kitt.typography.colors[theme.kitt.forms.input.states[$state].color];
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.kitt.typography.types.bodies.fontFamily.regular;
 });
-var Input = /*#__PURE__*/styled(TextInput).withConfig({
-  displayName: "InputText__Input"
-})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, function (_ref8) {
-  var theme = _ref8.theme,
-      multiline = _ref8.multiline;
-  return !multiline && Platform.OS === 'ios' ? theme.kitt.forms.input.paddingSingleLineIOS : theme.kitt.forms.input.padding;
-}, function (_ref9) {
-  var theme = _ref9.theme,
-      multiline = _ref9.multiline;
-  if (!multiline && Platform.OS === 'ios') return 0;
-  var typeConfigKey = getTypographyTypeConfigKey(theme);
-  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
-}, function (_ref10) {
-  var minHeight = _ref10.minHeight;
-  return minHeight;
-});
-var Container$6 = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputText__Container"
-})(["margin-top:", ";margin-bottom:", ";"], function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.kitt.forms.input.marginTop;
-}, function (_ref12) {
-  var theme = _ref12.theme;
-  return theme.kitt.forms.input.marginBottom;
-});
-var PasswordButtonContainer = /*#__PURE__*/styled.Pressable.withConfig({
-  displayName: "InputText__PasswordButtonContainer"
-})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:", "px;"], function (_ref13) {
-  var theme = _ref13.theme;
-  return theme.kitt.forms.input.passwordButtonIconSize / 2;
-});
 
-var getInputState = function (_ref14) {
-  var isDisabled = _ref14.isDisabled,
-      isFocused = _ref14.isFocused,
-      formState = _ref14.formState;
+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';
-};
+}
 
-var keyboardTypeByTextInputType = {
-  text: 'default',
-  email: 'email-address',
-  password: 'default',
-  username: 'default'
-};
-var autoCompleteTypeByType = {
-  text: 'off',
-  email: 'email',
-  password: 'password',
-  username: 'name'
-};
-var autoCorrectByType = {
-  text: true,
-  email: false,
-  password: false,
-  username: false
-};
-var textContentTypeByType = {
-  text: 'none',
-  email: 'emailAddress',
-  password: 'password',
-  username: 'username'
-};
-var InputText = /*#__PURE__*/forwardRef(function (_ref15, ref) {
-  var id = _ref15.id,
-      _ref15$minHeight = _ref15.minHeight,
-      minHeight = _ref15$minHeight === void 0 ? 0 : _ref15$minHeight,
-      type = _ref15.type,
-      formState = _ref15.state,
-      internalForceState = _ref15.internalForceState,
-      _ref15$disabled = _ref15.disabled,
-      disabled = _ref15$disabled === void 0 ? false : _ref15$disabled,
-      _onFocus = _ref15.onFocus,
-      _onBlur = _ref15.onBlur,
-      props = _objectWithoutProperties(_ref15, _excluded$8);
-
-  var _useInputText = useInputText(),
-      isFocused = _useInputText.isFocused,
-      handleInputBlur = _useInputText.handleInputBlur,
-      handleInputFocus = _useInputText.handleInputFocus,
-      isPasswordVisible = _useInputText.isPasswordVisible,
-      togglePasswordVisibility = _useInputText.togglePasswordVisibility;
+var _excluded$9 = ["id", "right", "minHeight", "state", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoCompleteType", "keyboardType", "onFocus", "onBlur"];
+
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledTextInput = /*#__PURE__*/styled(TextInput).withConfig({
+  displayName: "InputText__StyledTextInput"
+})(["", " padding:", ";line-height:", ";min-height:", "px;"], styledTextInputMixin, function (_ref) {
+  var theme = _ref.theme,
+      multiline = _ref.multiline;
+
+  if (!multiline && Platform.OS === 'ios') {
+    return theme.kitt.forms.input.padding.iOSSingleLine;
+  }
+
+  return theme.kitt.forms.input.padding["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      multiline = _ref2.multiline;
+  if (!multiline && Platform.OS === 'ios') return 0;
+  var typeConfigKey = getTypographyTypeConfigKey(theme);
+  return theme.kitt.typography.types.bodies.configs.body[typeConfigKey].lineHeight;
+}, function (_ref3) {
+  var $minHeight = _ref3.$minHeight;
+  return $minHeight;
+});
+var InputTextContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputText__InputTextContainer"
+})(["position:relative;"]);
+var RightInputContainer = /*#__PURE__*/styled.View.withConfig({
+  displayName: "InputText__RightInputContainer"
+})(["position:absolute;right:0;top:0;bottom:0;justify-content:center;padding:10px;"]);
+var InputText = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var id = _ref4.id,
+      right = _ref4.right,
+      _ref4$minHeight = _ref4.minHeight,
+      minHeight = _ref4$minHeight === void 0 ? 0 : _ref4$minHeight,
+      formState = _ref4.state,
+      internalForceState = _ref4.internalForceState,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _ref4$autoCorrect = _ref4.autoCorrect,
+      autoCorrect = _ref4$autoCorrect === void 0 ? true : _ref4$autoCorrect,
+      _ref4$textContentType = _ref4.textContentType,
+      textContentType = _ref4$textContentType === void 0 ? 'none' : _ref4$textContentType,
+      _ref4$autoCompleteTyp = _ref4.autoCompleteType,
+      autoCompleteType = _ref4$autoCompleteTyp === void 0 ? 'off' : _ref4$autoCompleteTyp,
+      _ref4$keyboardType = _ref4.keyboardType,
+      keyboardType = _ref4$keyboardType === void 0 ? 'default' : _ref4$keyboardType,
+      _onFocus = _ref4.onFocus,
+      _onBlur = _ref4.onBlur,
+      props = _objectWithoutProperties(_ref4, _excluded$9);
 
   var theme = /*#__PURE__*/useTheme();
-  var state = internalForceState || getInputState({
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1];
+
+  var state = internalForceState || getInputUIState({
     isFocused: isFocused,
     isDisabled: disabled,
     formState: formState
   });
-  return /*#__PURE__*/jsxs(Container$6, {
-    children: [/*#__PURE__*/jsx(Input, _objectSpread$c(_objectSpread$c({
+  return /*#__PURE__*/jsxs(InputTextContainer, {
+    children: [/*#__PURE__*/jsx(StyledTextInput, _objectSpread$d(_objectSpread$d({
       ref: ref,
       nativeID: id,
       editable: !disabled,
-      keyboardType: keyboardTypeByTextInputType[type],
-      autoCompleteType: autoCompleteTypeByType[type],
-      autoCorrect: autoCorrectByType[type],
-      minHeight: minHeight,
-      textContentType: textContentTypeByType[type],
-      placeholderTextColor: theme.kitt.typography.colors[theme.kitt.forms.input.placeholderColor],
-      selectionColor: theme.kitt.forms.input.selectionColor,
-      secureTextEntry: type === 'password' && !isPasswordVisible
+      keyboardType: keyboardType,
+      autoCompleteType: autoCompleteType,
+      autoCorrect: autoCorrect,
+      $minHeight: minHeight,
+      textContentType: textContentType,
+      placeholderTextColor: theme.kitt.forms.input.color.placeholder,
+      selectionColor: theme.kitt.forms.input.color.selection
     }, props), {}, {
-      state: state,
+      $state: state,
       onFocus: function onFocus(e) {
-        handleInputFocus();
+        setIsFocused(true);
         if (_onFocus) _onFocus(e);
       },
       onBlur: function onBlur(e) {
-        handleInputBlur();
+        setIsFocused(false);
         if (_onBlur) _onBlur(e);
       }
-    })), type === 'password' && !disabled && /*#__PURE__*/jsx(PasswordButtonContainer, {
-      accessibilityRole: "button",
-      onPress: togglePasswordVisibility,
-      children: /*#__PURE__*/jsx(TypographyIcon, {
-        icon: isPasswordVisible ? /*#__PURE__*/jsx(EyeIcon, {}) : /*#__PURE__*/jsx(EyeOffIcon, {}),
-        size: theme.kitt.forms.input.passwordButtonIconSize,
-        color: theme.kitt.forms.input.states[state].passwordButtonIconColor
-      })
-    })]
+    })), right ? /*#__PURE__*/jsx(RightInputContainer, {
+      children: right
+    }) : null]
   });
 });
 
+var _excluded$8 = ["isPasswordDefaultVisible", "right"];
+
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function InputPassword(_ref) {
+  var isPasswordDefaultVisible = _ref.isPasswordDefaultVisible,
+      right = _ref.right,
+      props = _objectWithoutProperties(_ref, _excluded$8);
+
+  var _useState = useState(Boolean(isPasswordDefaultVisible)),
+      _useState2 = _slicedToArray(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  return /*#__PURE__*/jsx(InputText, _objectSpread$c(_objectSpread$c({}, props), {}, {
+    textContentType: "password",
+    autoCompleteType: "password",
+    autoCorrect: false,
+    secureTextEntry: !isVisible,
+    right: right || /*#__PURE__*/jsx(InputPressable, {
+      accessibilityRole: "button",
+      onPress: function onPress() {
+        return setIsVisible(function (prev) {
+          return !prev;
+        });
+      },
+      children: /*#__PURE__*/jsx(InputIcon, {
+        icon: isVisible ? /*#__PURE__*/jsx(EyeOffIcon, {}) : /*#__PURE__*/jsx(EyeIcon, {})
+      })
+    })
+  }));
+}
+
 function Label(_ref) {
   var htmlFor = _ref.htmlFor,
       children = _ref.children;
@@ -1257,13 +1273,11 @@ function TextArea(_ref) {
   var props = _extends({}, _ref);
 
   var theme = /*#__PURE__*/useTheme();
-  return /*#__PURE__*/jsx(InputText, _objectSpread$b(_objectSpread$b({
+  return /*#__PURE__*/jsx(InputText, _objectSpread$b({
     multiline: true,
-    textAlignVertical: "top"
-  }, props), {}, {
-    type: "text",
-    minHeight: theme.kitt.forms.input.textAreaMinHeight
-  }));
+    textAlignVertical: "top",
+    minHeight: theme.kitt.forms.textArea.minHeight
+  }, props));
 }
 
 var Body = /*#__PURE__*/styled.View.withConfig({
@@ -1465,7 +1479,7 @@ function withTheme(WrappedComponent) {
   });
 }
 
-var _excluded$6 = ["color"];
+var _excluded$6 = ["color", "disabled"];
 
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -1475,20 +1489,25 @@ var PressableIconButtonWebWrapper = withTheme( /*#__PURE__*/styled$1("div")({
   "class": "p1nlccvg",
   vars: {
     "p1nlccvg-0": [function (_ref) {
-      var theme = _ref.theme;
-      return theme.kitt.iconButton.scale.base.hover;
+      var theme = _ref.theme,
+          $isDisabled = _ref.$isDisabled;
+      return $isDisabled ? 1 : theme.kitt.iconButton.scale.base.hover;
     }],
     "p1nlccvg-2": [function (_ref2) {
-      var theme = _ref2.theme;
-      return theme.kitt.iconButton.scale.medium.hover;
+      var theme = _ref2.theme,
+          $isDisabled = _ref2.$isDisabled;
+      return $isDisabled ? 1 : theme.kitt.iconButton.scale.medium.hover;
     }],
     "p1nlccvg-3": [function (_ref3) {
-      var theme = _ref3.theme;
-      return theme.kitt.iconButton.scale.base.active;
+      var theme = _ref3.theme,
+          $isDisabled = _ref3.$isDisabled;
+      return $isDisabled ? 1 : theme.kitt.iconButton.scale.base.active;
     }],
     "p1nlccvg-4": [function (_ref4) {
       var theme = _ref4.theme,
-          $isWhite = _ref4.$isWhite;
+          $isWhite = _ref4.$isWhite,
+          $isDisabled = _ref4.$isDisabled;
+      if ($isDisabled) return theme.kitt.iconButton.disabled.backgroundColor;
       var _theme$kitt$iconButto = theme.kitt.iconButton,
           white = _theme$kitt$iconButto.white,
           defaultIconButton = _theme$kitt$iconButto["default"];
@@ -1527,12 +1546,16 @@ var StyledPressableIconButton = /*#__PURE__*/styled.Pressable.withConfig({
 });
 function PressableIconButton(_ref9) {
   var color = _ref9.color,
+      disabled = _ref9.disabled,
       props = _objectWithoutProperties(_ref9, _excluded$6);
 
   return /*#__PURE__*/jsx(StyleWebWrapper, {
     as: PressableIconButtonWebWrapper,
     $isWhite: color === 'white',
-    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$8({}, props))
+    $isDisabled: Boolean(disabled),
+    children: /*#__PURE__*/jsx(StyledPressableIconButton, _objectSpread$8(_objectSpread$8({}, props), {}, {
+      disabled: disabled
+    }))
   });
 }
 
@@ -1563,6 +1586,10 @@ function PressableAnimatedContainer(_ref5) {
   var disabled = _ref5.disabled,
       _ref5$color = _ref5.color,
       color = _ref5$color === void 0 ? 'black' : _ref5$color,
+      testID = _ref5.testID,
+      _ref5$accessibilityRo = _ref5.accessibilityRole,
+      accessibilityRole = _ref5$accessibilityRo === void 0 ? 'button' : _ref5$accessibilityRo,
+      accessibilityLabel = _ref5.accessibilityLabel,
       children = _ref5.children,
       onPress = _ref5.onPress;
   var theme = /*#__PURE__*/useTheme();
@@ -1580,7 +1607,7 @@ function PressableAnimatedContainer(_ref5) {
     };
     _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
     _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (54:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1614,7 +1641,7 @@ function PressableAnimatedContainer(_ref5) {
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
     _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (60:39)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (66:39)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1622,9 +1649,11 @@ function PressableAnimatedContainer(_ref5) {
     return _f;
   }());
   return /*#__PURE__*/jsx(PressableIconButton, {
-    accessibilityRole: "button",
+    accessibilityRole: accessibilityRole,
     disabled: disabled,
     color: color,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
     onPress: onPress,
     onPressIn: function onPressIn() {
       pressed.value = true;
@@ -1686,10 +1715,16 @@ function IconButton(_ref7) {
   var icon = _ref7.icon,
       color = _ref7.color,
       disabled = _ref7.disabled,
+      testID = _ref7.testID,
+      accessibilityLabel = _ref7.accessibilityLabel,
+      accessibilityRole = _ref7.accessibilityRole,
       onPress = _ref7.onPress;
   return /*#__PURE__*/jsx(PressableAnimatedContainer, {
     color: color,
     disabled: disabled,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
     onPress: onPress,
     children: /*#__PURE__*/jsx(IconButtonContent, {
       disabled: disabled,
@@ -2846,54 +2881,137 @@ var feedbackMessageLateOceanTheme = {
   }
 };
 
-var inputFieldLateOceanTheme = {
-  labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+var calcLineHeight = function (fontSize, lineHeightMultiplier) {
+  return Math.round(fontSize * lineHeightMultiplier);
+};
+var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
+  return {
+    baseAndSmall: {
+      fontSize: "".concat(baseAndSmallFontSize, "px"),
+      lineHeight: "".concat(calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier), "px")
+    },
+    mediumAndWide: {
+      fontSize: "".concat(mediumAndWideFontSize, "px"),
+      lineHeight: "".concat(calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier), "px")
+    }
+  };
+};
+var typographyLateOceanTheme = {
+  colors: {
+    black: lateOceanColorPalette.black1000,
+    'black-light': lateOceanColorPalette.black555,
+    white: lateOceanColorPalette.white,
+    'white-light': lateOceanColorPalette.white,
+    primary: lateOceanColorPalette.lateOcean,
+    'primary-light': lateOceanColorPalette.lateOceanLight1,
+    accent: lateOceanColorPalette.warmEmbrace,
+    success: lateOceanColorPalette.viride,
+    danger: lateOceanColorPalette.englishVermillon
+  },
+  types: {
+    headers: {
+      fontFamily: {
+        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
+        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+      },
+      fontWeight: 400,
+      fontStyle: 'normal',
+      configs: {
+        // also known as xxlarge
+        header1: createTypographyTypeConfig(1.3, 38, 62),
+        // also known as xlarge
+        header2: createTypographyTypeConfig(1.3, 32, 48),
+        // also known as medium
+        header3: createTypographyTypeConfig(1.3, 24, 36),
+        // also known as xsmall
+        header4: createTypographyTypeConfig(1.3, 18, 24),
+        // also known as xxsmall
+        header5: createTypographyTypeConfig(1.3, 18, 18)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
+        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        'body-large': createTypographyTypeConfig(1.6, 18, 24),
+        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
+        body: createTypographyTypeConfig(1.6, 16, 16),
+        'body-small': createTypographyTypeConfig(1.6, 14, 14),
+        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
+      }
+    }
+  },
+  link: {
+    disabledColor: lateOceanColorPalette.black200
+  }
 };
 
 var inputStatesStyle = {
   "default": {
-    backgroundColor: lateOceanColorPalette.white,
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black'
+  },
+  pending: {
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black'
+  },
+  valid: {
+    backgroundColor: colorsLateOceanTheme.uiBackgroundLight,
     borderColor: lateOceanColorPalette.black100,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    color: 'black'
   },
   hover: {
     borderColor: lateOceanColorPalette.black200,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    color: 'black'
   },
   focus: {
-    borderColor: lateOceanColorPalette.lateOcean,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    borderColor: colorsLateOceanTheme.primary,
+    color: 'black'
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette.black50,
-    borderColor: lateOceanColorPalette.black100,
-    color: 'black-light',
-    passwordButtonIconColor: 'black-light'
+    backgroundColor: colorsLateOceanTheme.disabled,
+    borderColor: colorsLateOceanTheme.separator,
+    color: 'black-light'
   },
   invalid: {
-    borderColor: lateOceanColorPalette.englishVermillon,
-    color: 'black',
-    passwordButtonIconColor: 'black'
+    borderColor: colorsLateOceanTheme.danger,
+    color: 'black'
   }
 };
-var inputLateOceanTheme = {
-  marginTop: '2px',
-  marginBottom: '4px',
+var input = {
+  color: {
+    selection: colorsLateOceanTheme.primary,
+    placeholder: typographyLateOceanTheme.colors['black-light']
+  },
   borderWidth: '2px',
   borderRadius: '10px',
-  passwordButtonIconSize: 20,
-  padding: '7px 16px',
-  paddingSingleLineIOS: '12px 16px',
-  selectionColor: lateOceanColorPalette.lateOcean,
-  placeholderColor: 'black-light',
-  textAreaMinHeight: 120,
+  icon: {
+    size: 20
+  },
+  padding: {
+    "default": '7px 16px',
+    iOSSingleLine: '12px 16px'
+  },
   states: inputStatesStyle
 };
 
+var inputFieldLateOceanTheme = {
+  labelContainerPaddingBottom: 5,
+  iconMarginLeft: 6
+};
+
 var radioLateOceanTheme = {
   size: 18,
   unchecked: {
@@ -2912,10 +3030,15 @@ var radioLateOceanTheme = {
   }
 };
 
-var formsLateOceanTheme = {
-  input: inputLateOceanTheme,
+var textArea = {
+  minHeight: 120
+};
+
+var forms = {
+  input: input,
   radio: radioLateOceanTheme,
-  inputField: inputFieldLateOceanTheme
+  inputField: inputFieldLateOceanTheme,
+  textArea: textArea
 };
 
 var fullScreenModalLateOceanTheme = {
@@ -3028,81 +3151,6 @@ var tooltip = {
   floatingPadding: 8
 };
 
-var calcLineHeight = function (fontSize, lineHeightMultiplier) {
-  return Math.round(fontSize * lineHeightMultiplier);
-};
-var createTypographyTypeConfig = function (lineHeightMultiplier, baseAndSmallFontSize, mediumAndWideFontSize) {
-  return {
-    baseAndSmall: {
-      fontSize: "".concat(baseAndSmallFontSize, "px"),
-      lineHeight: "".concat(calcLineHeight(baseAndSmallFontSize, lineHeightMultiplier), "px")
-    },
-    mediumAndWide: {
-      fontSize: "".concat(mediumAndWideFontSize, "px"),
-      lineHeight: "".concat(calcLineHeight(mediumAndWideFontSize, lineHeightMultiplier), "px")
-    }
-  };
-};
-var typographyLateOceanTheme = {
-  colors: {
-    black: lateOceanColorPalette.black1000,
-    'black-light': lateOceanColorPalette.black555,
-    white: lateOceanColorPalette.white,
-    'white-light': lateOceanColorPalette.white,
-    primary: lateOceanColorPalette.lateOcean,
-    'primary-light': lateOceanColorPalette.lateOceanLight1,
-    accent: lateOceanColorPalette.warmEmbrace,
-    success: lateOceanColorPalette.viride,
-    danger: lateOceanColorPalette.englishVermillon
-  },
-  types: {
-    headers: {
-      fontFamily: {
-        regular: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
-      },
-      fontWeight: 400,
-      fontStyle: 'normal',
-      configs: {
-        // also known as xxlarge
-        header1: createTypographyTypeConfig(1.3, 38, 62),
-        // also known as xlarge
-        header2: createTypographyTypeConfig(1.3, 32, 48),
-        // also known as medium
-        header3: createTypographyTypeConfig(1.3, 24, 36),
-        // also known as xsmall
-        header4: createTypographyTypeConfig(1.3, 18, 24),
-        // also known as xxsmall
-        header5: createTypographyTypeConfig(1.3, 18, 18)
-      }
-    },
-    bodies: {
-      fontFamily: {
-        regular: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        'body-large': createTypographyTypeConfig(1.6, 18, 24),
-        'body-medium': createTypographyTypeConfig(1.6, 18, 18),
-        body: createTypographyTypeConfig(1.6, 16, 16),
-        'body-small': createTypographyTypeConfig(1.6, 14, 14),
-        'body-xsmall': createTypographyTypeConfig(1.6, 12, 12)
-      }
-    }
-  },
-  link: {
-    disabledColor: lateOceanColorPalette.black200
-  }
-};
-
 var breakpoints = {
   values: {
     base: 0,
@@ -3136,7 +3184,7 @@ var theme = {
   button: buttonLateOceanTheme,
   card: cardLateOceanTheme,
   feedbackMessage: feedbackMessageLateOceanTheme,
-  forms: formsLateOceanTheme,
+  forms: forms,
   typography: typographyLateOceanTheme,
   tag: tagLateOceanTheme,
   shadows: shadowsLateOceanTheme,
@@ -3279,7 +3327,7 @@ function TimePicker(_ref) {
       isTimePickerModalVisible = _useTimePicker.isTimePickerModalVisible;
 
   return /*#__PURE__*/jsxs(Container, {
-    state: timePickerState === 'default' ? state : timePickerState,
+    $state: timePickerState === 'default' ? state : timePickerState,
     accessibilityRole: "button",
     onPress: handleInputPress,
     children: [/*#__PURE__*/jsx(Typography.Text, {
@@ -3696,5 +3744,5 @@ function MatchWindowSize(_ref) {
   });
 }
 
-export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
+export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputIcon, InputPassword, InputPressable, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, Radio, DeprecatedSection as Section, Skeleton, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, Tag, TextArea, TimePicker, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, hex2rgba, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor, withTheme };
 //# sourceMappingURL=index-browser-all.es.js.map