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

package/dist/index-node-22.17.es.web.css

@@ -6,7 +6,6 @@
 .kitt-u_opacityEnterActive_o1t4vl7b{opacity:1;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_opacityExit_ogyytm1{opacity:1;}
 .kitt-u_opacityExitActive_o18xvk52{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
-.kitt-u_inputTextContainer_i1encr9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;}.kitt-u_inputTextContainer_i1encr9g > *::-ms-clear,.kitt-u_inputTextContainer_i1encr9g > *::-ms-reveal{display:none;}.kitt-u_inputTextContainer_i1encr9g > *{-webkit-transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;transition:border-color 200ms ease-in-out,background-color 200ms ease-in-out;}
 /* Overlay animation styles - uses CSS variables for theme values */
 .FullscreenModalAnimation-module_overlay-enter__L1J1X {
   opacity: 0;

package/dist/index-node-22.17.es.web.mjs

@@ -1118,7 +1118,6 @@ const inputStatesStyle = {
     color: deepPurpleColorPalette.black
   },
   hover: {
-    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: deepPurpleColorPalette['beige.4'],
     color: deepPurpleColorPalette.black
   },
@@ -5360,11 +5359,30 @@ function InputPressable({
   });
 }
 
-const inputTextContainer = "kitt-u_inputTextContainer_i1encr9g";
-function InputTextContainer(props) {
-  return /*#__PURE__*/jsx("div", {
-    className: inputTextContainer,
-    ...props
+function InputTextContainer({
+  children,
+  isHovered
+}) {
+  const theme = useTheme();
+  const sx = useSx();
+  const styles = sx({
+    borderRadius: input.borderRadius
+  });
+  const animatedBackground = useAnimatedStyle(() => {
+    const baseBackgroundColor = theme.kitt.palettes.deepPurple.white;
+    const 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
+    })
   });
 }
 
@@ -5388,39 +5406,44 @@ const InputText = /*#__PURE__*/forwardRef(({
   const fontSizeForNativeBase = createNativeBaseFontSize({
     base: 'body-m'
   });
-  return /*#__PURE__*/jsxs(InputTextContainer, {
-    children: [/*#__PURE__*/jsx(Input, {
-      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 ? () => 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: ({
+      isHovered
+    }) => /*#__PURE__*/jsxs(InputTextContainer, {
+      isHovered: internalForceState ? internalForceState === 'hover' : isHovered,
+      children: [/*#__PURE__*/jsx(Input, {
+        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 ? () => 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]
+    })
   });
 });