diff --git a/package-lock.json b/package-lock.json
index f4232c0..22ddd36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11687,7 +11687,7 @@
     },
     "packages/react": {
       "name": "@sweatpants/react",
-      "version": "0.7.0",
+      "version": "0.7.1",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-dialog": "1.0.4",
diff --git a/packages/react/src/text-field/TextField.tsx b/packages/react/src/text-field/TextField.tsx
index f40cf4b..2f6f807 100644
--- a/packages/react/src/text-field/TextField.tsx
+++ b/packages/react/src/text-field/TextField.tsx
@@ -43,7 +43,8 @@ const inputStyles = cva({
     background: 'transparent',
     fontSize: '3',
     paddingX: '3',
-    transition: '0.15s',
+    transitionDuration: '0.15s',
+    transitionProperty: 'background, border',
     outline: 'none',
     color: 'gray12',
     '&:hover:not(:focus)': {
@@ -116,8 +117,8 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     useEffect(() => {
       const styles: HTMLAttributes<'input'>['style'] = {
-        paddingLeft: undefined,
-        paddingRight: undefined
+        paddingLeft: prefix ? `calc(1rem + 1ch)` : undefined,
+        paddingRight: suffix ? `calc(1rem + 1ch)` : undefined
       };
 
       if (prefixRef.current) {
@@ -129,7 +130,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       }
 
       setPadding(styles);
-    }, [prefixRef, suffixRef]);
+    }, [prefix, suffix, prefixRef, suffixRef]);
 
     return (
       <div className={containerStyles}>