Better support for swatches

commerce.config.json

@@ -1,6 +1,5 @@
 {
   "features": {
-    "wishlist": true,
-    "customCheckout": false
+    "wishlist": true
   }
 }

components/product/Swatch/Swatch.module.css

@@ -31,3 +31,7 @@
     @apply border-accents-9 border-2;
   }
 }
+
+.wrapper {
+  @apply w-auto px-4;
+}

components/product/Swatch/Swatch.tsx

@@ -37,7 +37,9 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
 
   return (
     <Button
-      className={rootClassName}
+      className={cn(rootClassName, {
+        [s.wrapper]: !color,
+      })}
       style={color ? { backgroundColor: color } : {}}
       aria-label="Variant Swatch"
       {...props}
@@ -47,7 +49,7 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
           <Check />
         </span>
       )}
-      {variant === 'size' ? label : null}
+      {variant !== 'color' ? label : null}
     </Button>
   )
 }