weird... it might be using the wrong settings for lint-staged?

packages/react/.husky/pre-commit

@@ -1,4 +1,6 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
+cd packages/react
+
 npx lint-staged

packages/react/src/components/header/searchbar/SearchBar.tsx

@@ -49,7 +49,7 @@ export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
       onKeyDown={handleKeyDown}
       className={cn("overflow-visible bg-transparent", className)}
     >
-      <div className="border-base ring-offset-base-2 focus-within:ring-primary group rounded-md border px-3 py-2 text-sm focus-within:ring-2 focus-within:ring-offset-2">
+      <div className="group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
         <div className="flex flex-wrap gap-1">
           {queryPieces.map((queryItem, i) => {
             return <QueryBadge item={queryItem} key={"badge" + i} />;
@@ -62,14 +62,14 @@ export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
             onBlur={() => setOpen(false)}
             onFocus={() => setOpen(true)}
             placeholder="Select frameworks..."
-            className="placeholder:text-base-8 ml-2 flex-1 bg-transparent outline-none"
+            className="ml-2 flex-1 bg-transparent outline-none placeholder:text-base-8"
           />
         </div>
       </div>
       <div className="relative mt-2">
         {open && autocomplete.length > 0 ? (
           <>
-            <div className="border-base bg-base-1 text-base-11 animate-in absolute top-0 z-10 w-full rounded-md border shadow-md outline-none">
+            <div className="absolute top-0 z-10 w-full rounded-md border border-base bg-base-1 text-base-11 shadow-md outline-none animate-in">
               <CommandGroup heading="Search Options" />
               <CommandSeparator />
               <CommandGroup className="h-full overflow-auto">