fix: hydration

packages/website-ue/src/components/TextField/index.css

@@ -9,6 +9,7 @@
 
   background-color: var(--gray-1);
   box-shadow: var(--shadow-interactive), var(--shadow-cavity);
+  cursor: text;
 
   font-size: var(--font-size-regular);
   color: var(--gray-11);
@@ -26,6 +27,17 @@
     box-shadow: var(--shadow-focus);
   }
 
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    background-color: var(--gray-3);
+
+    color: var(--gray-9);
+
+    input::placeholder {
+      color: var(--gray-9);
+    }
+  }
+
   svg {
     width: 1em;
     height: 1em;
@@ -37,6 +49,7 @@
 
     background: none;
     border: none;
+    cursor: inherit;
 
     font-size: inherit;
     font-weight: medium;

packages/website-ue/src/components/TextField/index.tsx

@@ -13,7 +13,7 @@ export interface TextFieldProps extends ComponentProps<"input"> {
 }
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  ({ children, className, ...props }, ref) => {
+  ({ children, className, disabled, ...props }, ref) => {
     const input = useRef<HTMLInputElement>(null);
 
     useImperativeHandle(ref, () => input.current!, []);
@@ -22,9 +22,10 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       <div
         className={classNames("text-field", className)}
         data-has-icon={children !== undefined}
+        data-disabled={disabled}
       >
         {children}
-        <input ref={input} {...props} />
+        <input disabled={disabled} ref={input} {...props} />
       </div>
     );
   }