fix(ListBox): better typing

src/lib/ListBox/ListBox.tsx

@@ -1,4 +1,5 @@
 import { FocusScope, useFocusManager } from '@react-aria/focus';
+import { StitchesProps } from '@stitches/react';
 import React from 'react';
 
 import { styled } from '../stitches.config';
@@ -29,22 +30,23 @@ const ListInner: React.FC<{ wrap?: boolean }> = ({ wrap, ...props }) => {
 
 ListInner.displayName = 'ListBox.Inner';
 
-const ListBox = React.forwardRef<
-  HTMLUListElement,
-  React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> & {
-    restoreFocus?: boolean;
-    contain?: boolean;
-    wrap?: boolean;
+interface Props extends StitchesProps<typeof List> {
+  restoreFocus?: boolean;
+  contain?: boolean;
+  wrap?: boolean;
+}
+
+const ListBox = React.forwardRef<HTMLUListElement, Props>(
+  ({ children, restoreFocus, contain, wrap, ...props }, ref) => {
+    return (
+      <List role="listbox" tabIndex={-1} {...props} as="ul" ref={ref}>
+        <FocusScope contain={contain} restoreFocus={restoreFocus}>
+          <ListInner wrap={wrap}>{children}</ListInner>
+        </FocusScope>
+      </List>
+    );
   }
->(({ children, restoreFocus, contain, wrap, ...props }, ref) => {
-  return (
-    <List role="listbox" tabIndex={-1} {...props} as="ul" ref={ref}>
-      <FocusScope contain={contain} restoreFocus={restoreFocus}>
-        <ListInner wrap={wrap}>{children}</ListInner>
-      </FocusScope>
-    </List>
-  );
-});
+);
 
 ListInner.displayName = 'ListBox';