@ornikar/kitt-universal 32.3.0 → 32.3.1-canary.282229fbcb79b0e70662d8927eccac40f40e40d3.0

package/dist/index.es.web.js

@@ -1136,7 +1136,6 @@ var inputStatesStyle = {
     color: deepPurpleColorPalette.black
   },
   hover: {
-    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: deepPurpleColorPalette['beige.4'],
     color: deepPurpleColorPalette.black
   },
@@ -5434,11 +5433,30 @@ function InputPressable(_ref) {
   return /*#__PURE__*/jsx(Pressable$2, _objectSpread({}, props));
 }
 
-var inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
-function InputTextContainer(props) {
-  return /*#__PURE__*/jsx("div", _objectSpread({
-    className: inputTextContainer
-  }, props));
+function InputTextContainer(_ref) {
+  var children = _ref.children,
+    isHovered = _ref.isHovered;
+  var theme = useTheme();
+  var sx = useSx();
+  var styles = sx({
+    borderRadius: input.borderRadius
+  });
+  var animatedBackground = useAnimatedStyle(function () {
+    var baseBackgroundColor = theme.kitt.palettes.deepPurple.white;
+    var hoverBackgroundColor = theme.kitt.palettes.deepPurple['beige.1'];
+    return {
+      backgroundColor: withTiming(isHovered ? hoverBackgroundColor : baseBackgroundColor, {
+        duration: 200
+      })
+    };
+  }, [isHovered, theme]);
+  return /*#__PURE__*/jsx(Animated$1.View, {
+    style: [styles, animatedBackground],
+    children: /*#__PURE__*/jsx(View, {
+      position: "relative",
+      children: children
+    })
+  });
 }
 
 var _excluded$y = ["id", "right", "state", "variant", "internalForceState", "disabled", "autoCorrect", "textContentType", "autoComplete", "inputMode", "multiline", "height", "onSubmitEditing"];
@@ -5467,41 +5485,47 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
   });
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
-      ref: ref,
-      multiline: multiline,
-      id: id,
-      isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
-      isHovered: internalForceState ? internalForceState === 'hover' : undefined,
-      isFocused: internalForceState ? internalForceState === 'focus' : undefined,
-      inputMode: inputMode,
-      autoComplete: autoComplete,
-      autoCorrect: autoCorrect,
-      textContentType: textContentType,
-      fontSize: fontSizeForNativeBase,
-      lineHeight:
-      // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
-      // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
-      fontSizeForNativeBase,
-      fontWeight: "bodies.regular",
-      fontFamily: "bodies.regular",
-      py: !multiline && "web" !== 'web' ? 0 : undefined,
-      variant: variant
-    }, props), {}, {
-      height: multiline ? height : 'kitt.forms.input.minHeight',
-      onSubmitEditing: multiline ? function () {
-        return null;
-      } : onSubmitEditing
-    })), right ? /*#__PURE__*/jsx(View, {
-      position: "absolute",
-      right: 0,
-      top: 0,
-      bottom: 0,
-      justifyContent: "center",
-      padding: theme.kitt.forms.input.rightContainer.padding,
-      children: right
-    }) : null]
+  return /*#__PURE__*/jsx(Pressable, {
+    children: function (_ref2) {
+      var isHovered = _ref2.isHovered;
+      return /*#__PURE__*/jsxs(InputTextContainer, {
+        isHovered: internalForceState ? internalForceState === 'hover' : isHovered,
+        children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
+          ref: ref,
+          multiline: multiline,
+          id: id,
+          isDisabled: internalForceState ? internalForceState === 'disabled' : disabled,
+          isHovered: internalForceState ? internalForceState === 'hover' : undefined,
+          isFocused: internalForceState ? internalForceState === 'focus' : undefined,
+          inputMode: inputMode,
+          autoComplete: autoComplete,
+          autoCorrect: autoCorrect,
+          textContentType: textContentType,
+          fontSize: fontSizeForNativeBase,
+          lineHeight:
+          // On basic text input, we set the line-height to zero for iOS to fix vertical text alignment
+          // This is a iOS only fix since having 0 as a line-height value breaks text inputs on Android
+          fontSizeForNativeBase,
+          fontWeight: "bodies.regular",
+          fontFamily: "bodies.regular",
+          py: !multiline && "web" !== 'web' ? 0 : undefined,
+          variant: variant
+        }, props), {}, {
+          height: multiline ? height : 'kitt.forms.input.minHeight',
+          onSubmitEditing: multiline ? function () {
+            return null;
+          } : onSubmitEditing
+        })), right ? /*#__PURE__*/jsx(View, {
+          position: "absolute",
+          right: 0,
+          top: 0,
+          bottom: 0,
+          justifyContent: "center",
+          padding: theme.kitt.forms.input.rightContainer.padding,
+          children: right
+        }) : null]
+      });
+    }
   });
 });