Refactor classname usage

src-web/components/Button.tsx

@@ -18,11 +18,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       className={classnames(
         className,
         'rounded-md text-white flex items-center',
-        { 'h-10 px-4': size === 'md' },
+        size === 'md' && 'h-10 px-4',
-        { 'h-8 px-3': size === 'sm' },
+        size === 'sm' && 'h-8 px-3',
-        { 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]': color === undefined },
+        color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]',
-        { 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80': color === 'primary' },
+        color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80',
-        { 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80': color === 'secondary' },
+        color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80',
       )}
       {...props}
     >

src-web/components/Dropdown.tsx

@@ -300,9 +300,7 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
       className={classnames(
         className,
         'outline-none px-2 py-1.5 flex items-center text-sm text-gray-700',
-        {
+        !noHover && 'focus:bg-gray-50 focus:text-gray-900 rounded',
-          'focus:bg-gray-50 focus:text-gray-900 rounded': !noHover,
-        },
       )}
       {...props}
     >

src-web/components/Input.tsx

@@ -15,9 +15,11 @@ export function Input({ label, labelClassName, hideLabel, className, name, ...pr
     <VStack className="w-full">
       <label
         htmlFor={name}
-        className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
+        className={classnames(
-          'sr-only': hideLabel,
+          labelClassName,
-        })}
+          'font-semibold text-sm uppercase text-gray-700',
+          hideLabel && 'sr-only',
+        )}
       >
         {label}
       </label>

src-web/components/Stacks.tsx

@@ -81,12 +81,14 @@ function BaseStack({ className, items, justify, as = 'div', ...props }: BaseStac
   const Component = as;
   return (
     <Component
-      className={classnames(className, 'flex flex-grow-0', {
+      className={classnames(
-        'items-center': items === 'center',
+        className,
-        'items-start': items === 'start',
+        'flex flex-grow-0',
-        'justify-start': justify === 'start',
+        items === 'center' && 'items-center',
-        'justify-end': justify === 'end',
+        items === 'start' && 'items-start',
-      })}
+        justify === 'start' && 'justify-start',
+        justify === 'end' && 'justify-end',
+      )}
       {...props}
     />
   );