@ornikar/kitt-universal 9.5.0 → 9.6.0

package/dist/definitions/Choices/ChoiceItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceItem.d.ts","sourceRoot":"","sources":["../../../src/Choices/ChoiceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAqC1D,aAAK,iBAAiB,GAAG,SAAS,CAAC;AAuFnC,oBAAY,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,qBAAqB,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,qBAAqB,KAAK,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IACtE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC3E,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,oBAAY,eAAe,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC;AAE1F,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAC5B,IAAe,EACf,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CAqFnC"}
+{"version":3,"file":"ChoiceItem.d.ts","sourceRoot":"","sources":["../../../src/Choices/ChoiceItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAgC1D,aAAK,iBAAiB,GAAG,SAAS,CAAC;AAuFnC,oBAAY,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,qBAAqB,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,qBAAqB,KAAK,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IACtE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,CAAC,CAAC;IAC3E,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,oBAAY,eAAe,CAAC,CAAC,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC,CAAC,CAAC,CAAC;AAE1F,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAC5B,IAAe,EACf,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CA2DnC"}

package/dist/definitions/Choices/hooks/useNativeAnimation.d.ts

@@ -0,0 +1,14 @@
+import type { ViewStyle } from 'react-native';
+interface UseNativeAnimationOptions {
+    selected?: boolean;
+    disabled?: boolean;
+    isPressedInternal?: boolean;
+}
+interface NativeAnimation {
+    onPressIn: () => void;
+    onPressOut: () => void;
+    backgroundStyles: ViewStyle;
+}
+export declare const useNativeAnimation: ({ selected, disabled, isPressedInternal, }: UseNativeAnimationOptions) => NativeAnimation;
+export {};
+//# sourceMappingURL=useNativeAnimation.d.ts.map

package/dist/definitions/Choices/hooks/useNativeAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeAnimation.d.ts","sourceRoot":"","sources":["../../../../src/Choices/hooks/useNativeAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAU9C,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gBAAgB,EAAE,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,kBAAkB,+CAI5B,yBAAyB,KAAG,eAsC9B,CAAC"}

package/dist/definitions/Choices/hooks/useNativeAnimation.web.d.ts

@@ -0,0 +1,7 @@
+import type { ViewStyle } from 'react-native';
+export declare const useNativeAnimation: () => {
+    onPressIn: () => void;
+    onPressOut: () => void;
+    backgroundStyles?: ViewStyle;
+};
+//# sourceMappingURL=useNativeAnimation.web.d.ts.map

package/dist/definitions/Choices/hooks/useNativeAnimation.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeAnimation.web.d.ts","sourceRoot":"","sources":["../../../../src/Choices/hooks/useNativeAnimation.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,eAAO,MAAM,kBAAkB,QAAO;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAO9B,CAAC"}

package/dist/definitions/forms/InputField/InputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/forms/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBrD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,YAAY,CAanG"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/forms/InputField/InputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,YAAY,CAqBnG"}

package/dist/definitions/native-base/KittNativeBaseProvider.d.ts

@@ -379,6 +379,7 @@ export declare const createKittNativeBaseCustomTheme: (theme: Theme) => {
         "kitt.1": number;
         "kitt.4": number;
         "kitt.5": number;
+        "kitt.10": number;
         "kitt.6": number;
         "kitt.2": number;
         "kitt.20": number;
@@ -396,7 +397,6 @@ export declare const createKittNativeBaseCustomTheme: (theme: Theme) => {
         "kitt.7": number;
         "kitt.8": number;
         "kitt.9": number;
-        "kitt.10": number;
         "kitt.11": number;
         "kitt.13": number;
         "kitt.15": number;

package/dist/definitions/themes/default.d.ts

@@ -81,8 +81,14 @@ export declare const theme: {
         input: import("./late-ocean/input").InputTheme;
         radio: import("./late-ocean/radio").RadioTheme;
         inputField: {
+            containerPaddingTop: number;
+            containerPaddingBottom: number;
+            feedbackPaddingTop: {
+                base: number;
+                small: number;
+            };
             labelContainerPaddingBottom: number;
-            iconMarginLeft: number;
+            labelFeedbackMarginLeft: number;
         };
         textArea: import("./late-ocean/textArea").TextAreaTheme;
         checkbox: {

package/dist/definitions/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../src/themes/default.ts"],"names":[],"mappings":"AA4CA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBjB,CAAC;AAEF,oBAAY,KAAK,GAAG,OAAO,KAAK,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../src/themes/default.ts"],"names":[],"mappings":"AA4CA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBjB,CAAC;AAEF,oBAAY,KAAK,GAAG,OAAO,KAAK,CAAC"}

package/dist/definitions/themes/late-ocean/forms.d.ts

@@ -3,8 +3,14 @@ export declare const forms: {
     input: import("./input").InputTheme;
     radio: import("./radio").RadioTheme;
     inputField: {
+        containerPaddingTop: number;
+        containerPaddingBottom: number;
+        feedbackPaddingTop: {
+            base: number;
+            small: number;
+        };
         labelContainerPaddingBottom: number;
-        iconMarginLeft: number;
+        labelFeedbackMarginLeft: number;
     };
     textArea: import("./textArea").TextAreaTheme;
     checkbox: {

package/dist/definitions/themes/late-ocean/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../../src/themes/late-ocean/forms.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAC"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../../src/themes/late-ocean/forms.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQjB,CAAC"}

package/dist/definitions/themes/late-ocean/inputField.d.ts

@@ -1,5 +1,11 @@
 export declare const inputField: {
+    containerPaddingTop: number;
+    containerPaddingBottom: number;
+    feedbackPaddingTop: {
+        base: number;
+        small: number;
+    };
     labelContainerPaddingBottom: number;
-    iconMarginLeft: number;
+    labelFeedbackMarginLeft: number;
 };
 //# sourceMappingURL=inputField.d.ts.map

package/dist/definitions/themes/late-ocean/inputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inputField.d.ts","sourceRoot":"","sources":["../../../../src/themes/late-ocean/inputField.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;CAGtB,CAAC"}
+{"version":3,"file":"inputField.d.ts","sourceRoot":"","sources":["../../../../src/themes/late-ocean/inputField.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;CAMtB,CAAC"}

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

@@ -1048,6 +1048,88 @@ function Card(_ref6) {
   });
 }
 
+var useNativeAnimation = function (_ref) {
+  var selected = _ref.selected,
+      disabled = _ref.disabled,
+      isPressedInternal = _ref.isPressedInternal;
+  var theme = /*#__PURE__*/useTheme();
+  var pressed = useSharedValue(Boolean(isPressedInternal));
+  var progress = useDerivedValue(function () {
+    var _f = function () {
+      return withTiming(pressed.value ? 1 : 0, {
+        duration: theme.kitt.choices.item.transition.duration
+      });
+    };
+
+    _f._closure = {
+      withTiming: withTiming,
+      pressed: pressed,
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              transition: {
+                duration: theme.kitt.choices.item.transition.duration
+              }
+            }
+          }
+        }
+      }
+    };
+    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
+    _f.__workletHash = 1120030177160;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (31:35)";
+    return _f;
+  }());
+  var backgroundStyles = useAnimatedStyle(function () {
+    var _f = function () {
+      var _theme$kitt$choices$i = theme.kitt.choices.item.backgroundColor,
+          defaultBg = _theme$kitt$choices$i["default"],
+          pressedBg = _theme$kitt$choices$i.pressed,
+          selectedBg = _theme$kitt$choices$i.selected,
+          disabledBg = _theme$kitt$choices$i.disabled;
+      if (disabled) return {
+        backgroundColor: disabledBg
+      };
+      if (selected) return {
+        backgroundColor: selectedBg
+      };
+      return {
+        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
+      };
+    };
+
+    _f._closure = {
+      theme: {
+        kitt: {
+          choices: {
+            item: {
+              backgroundColor: theme.kitt.choices.item.backgroundColor
+            }
+          }
+        }
+      },
+      disabled: disabled,
+      selected: selected,
+      interpolateColor: interpolateColor,
+      progress: progress
+    };
+    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
+    _f.__workletHash = 15506726129309;
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/hooks/useNativeAnimation.tsx (35:44)";
+    return _f;
+  }());
+  return {
+    onPressIn: function onPressIn() {
+      pressed.value = true;
+    },
+    onPressOut: function onPressOut() {
+      pressed.value = false;
+    },
+    backgroundStyles: backgroundStyles
+  };
+};
+
 function getCurrentTextColor(_ref) {
   var isDisabled = _ref.isDisabled,
       isSelected = _ref.isSelected,
@@ -1079,7 +1161,7 @@ var DisabledBorder = /*#__PURE__*/styled(View$2).withConfig({
       color = _theme$kitt$choices$i.color;
   return css(["border:", "px solid ", ";"], width, color);
 });
-var ChoiceItemView = /*#__PURE__*/styled(Animated.View).withConfig({
+var ChoiceItemView = /*#__PURE__*/styled(Platform.OS === 'web' ? View$2 : Animated.View).withConfig({
   displayName: "ChoiceItem__ChoiceItemView"
 })(["position:relative;border-radius:", "px;background-color:", ";", ";", ""], function (_ref4) {
   var theme = _ref4.theme,
@@ -1135,73 +1217,15 @@ function ChoiceItem(_ref8) {
       onChange = _ref8.onChange,
       onBlur = _ref8.onBlur,
       onFocus = _ref8.onFocus;
-  var theme = /*#__PURE__*/useTheme();
-  var pressed = useSharedValue(Boolean(isPressedInternal));
-  var progress = useDerivedValue(function () {
-    var _f = function () {
-      return withTiming(pressed.value ? 1 : 0, {
-        duration: theme.kitt.choices.item.transition.duration
-      });
-    };
-
-    _f._closure = {
-      withTiming: withTiming,
-      pressed: pressed,
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              transition: {
-                duration: theme.kitt.choices.item.transition.duration
-              }
-            }
-          }
-        }
-      }
-    };
-    _f.asString = "function _f(){const{withTiming,pressed,theme}=jsThis._closure;{return withTiming(pressed.value?1:0,{duration:theme.kitt.choices.item.transition.duration});}}";
-    _f.__workletHash = 1120030177160;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (180:35)";
-    return _f;
-  }());
-  var backgroundStyles = useAnimatedStyle(function () {
-    var _f = function () {
-      var _theme$kitt$choices$i5 = theme.kitt.choices.item.backgroundColor,
-          defaultBg = _theme$kitt$choices$i5["default"],
-          pressedBg = _theme$kitt$choices$i5.pressed,
-          selectedBg = _theme$kitt$choices$i5.selected,
-          disabledBg = _theme$kitt$choices$i5.disabled;
-      if (disabled) return {
-        backgroundColor: disabledBg
-      };
-      if (selected) return {
-        backgroundColor: selectedBg
-      };
-      return {
-        backgroundColor: interpolateColor(progress.value, [0, 1], [defaultBg, pressedBg])
-      };
-    };
 
-    _f._closure = {
-      theme: {
-        kitt: {
-          choices: {
-            item: {
-              backgroundColor: theme.kitt.choices.item.backgroundColor
-            }
-          }
-        }
-      },
-      disabled: disabled,
-      selected: selected,
-      interpolateColor: interpolateColor,
-      progress: progress
-    };
-    _f.asString = "function _f(){const{theme,disabled,selected,interpolateColor,progress}=jsThis._closure;{const{default:defaultBg,pressed:pressedBg,selected:selectedBg,disabled:disabledBg}=theme.kitt.choices.item.backgroundColor;if(disabled)return{backgroundColor:disabledBg};if(selected)return{backgroundColor:selectedBg};return{backgroundColor:interpolateColor(progress.value,[0,1],[defaultBg,pressedBg])};}}";
-    _f.__workletHash = 15506726129309;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/Choices/ChoiceItem.tsx (184:44)";
-    return _f;
-  }());
+  var _useNativeAnimation = useNativeAnimation({
+    selected: selected,
+    disabled: disabled,
+    isPressedInternal: isPressedInternal
+  }),
+      onPressIn = _useNativeAnimation.onPressIn,
+      onPressOut = _useNativeAnimation.onPressOut,
+      backgroundStyles = _useNativeAnimation.backgroundStyles;
 
   var handleChange = function () {
     if (!onChange) return; // Checkbox can be toggled
@@ -1228,12 +1252,8 @@ function ChoiceItem(_ref8) {
       handleChange();
       if (onBlur) onBlur(e);
     },
-    onPressIn: function onPressIn() {
-      pressed.value = true;
-    },
-    onPressOut: function onPressOut() {
-      pressed.value = false;
-    },
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
     children: function children(_ref9) {
       var isHovered = _ref9.isHovered,
           isPressed = _ref9.isPressed;
@@ -1947,8 +1967,14 @@ var input = {
 };
 
 var inputField = {
+  containerPaddingTop: 5,
+  containerPaddingBottom: 10,
+  feedbackPaddingTop: {
+    base: 5,
+    small: 10
+  },
   labelContainerPaddingBottom: 5,
-  iconMarginLeft: 6
+  labelFeedbackMarginLeft: 6
 };
 
 var inputTag = {
@@ -3208,40 +3234,25 @@ function InputFeedback(_ref) {
   });
 }
 
-var FieldContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldContainer"
-})(["padding:5px 0 10px;"]);
-var FeedbackContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FeedbackContainer"
-})(["", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.responsive.ifWindowSizeMatches({
-    minWidth: KittBreakpoints.SMALL
-  }, 'padding-top: 10px', 'padding-top: 5px');
-});
-var FieldLabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__FieldLabelContainer"
-})(["flex-direction:row;align-items:center;padding-bottom:", "px;"], function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.forms.inputField.labelContainerPaddingBottom;
-});
-var LabelContainer = /*#__PURE__*/styled.View.withConfig({
-  displayName: "InputField__LabelContainer"
-})(["margin-right:", "px;"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.kitt.forms.inputField.iconMarginLeft;
-});
-function InputField(_ref4) {
-  var label = _ref4.label,
-      labelFeedback = _ref4.labelFeedback,
-      input = _ref4.input,
-      feedback = _ref4.feedback;
-  return /*#__PURE__*/jsxs(FieldContainer, {
-    children: [label ? /*#__PURE__*/jsxs(FieldLabelContainer, {
-      children: [/*#__PURE__*/jsx(LabelContainer, {
+function InputField(_ref) {
+  var label = _ref.label,
+      labelFeedback = _ref.labelFeedback,
+      input = _ref.input,
+      feedback = _ref.feedback;
+  var theme = /*#__PURE__*/useTheme();
+  return /*#__PURE__*/jsxs(View, {
+    paddingTop: theme.kitt.forms.inputField.containerPaddingTop,
+    paddingBottom: theme.kitt.forms.inputField.containerPaddingBottom,
+    children: [label ? /*#__PURE__*/jsxs(View, {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingBottom: theme.kitt.forms.inputField.labelContainerPaddingBottom,
+      children: [/*#__PURE__*/jsx(View, {
+        marginRight: theme.kitt.forms.inputField.labelFeedbackMarginLeft,
         children: label
       }), labelFeedback]
-    }) : null, input, feedback ? /*#__PURE__*/jsx(FeedbackContainer, {
+    }) : null, input, feedback ? /*#__PURE__*/jsx(View, {
+      paddingTop: theme.kitt.forms.inputField.feedbackPaddingTop,
       children: feedback
     }) : null]
   });