fix(badge): add flex styles to badge

adding flex styles so it has better bahavior when used alongside other elements. the remove of py is
accounted by increasing line-height

BREAKING CHANGE: it now behaves as inline-flex instead of default inline span. py-1 was also removed
in favor of leading increase, so it better aligns in the center of the pill.

__tests__/Badge.test.js

@@ -8,7 +8,7 @@ describe('Badge', () => {
   })
 
   it('should render with base styles', () => {
-    const expected = 'px-2 py-1 text-xs font-medium leading-none rounded-full'
+    const expected = 'inline-flex px-2 text-xs font-medium leading-5 rounded-full'
     const wrapper = mount(<Badge />)
 
     expect(wrapper.find('span').getDOMNode().getAttribute('class')).toContain(expected)

src/themes/default.js

@@ -77,7 +77,7 @@ export default {
   },
   // Badge
   badge: {
-    base: 'px-2 py-1 text-xs font-medium leading-none rounded-full',
+    base: 'inline-flex px-2 text-xs font-medium leading-5 rounded-full',
     success: 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100',
     danger: 'text-red-700 bg-red-100 dark:text-red-100 dark:bg-red-700',
     warning: 'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600',