feat: migrate styled-components

[gustavopch]

I think this lib would benefit from using styled-components instead of SCSS.

• I have searched the issues of this repository and believe that this is not a duplicate.

Is your feature request related to a problem? Please describe.
No, not related to a problem. It's an improvement.

Expected Behavior 🤔

Not about behavior but architecture.

Context 🔦

By using styled-components, this lib would be able to:

• Stop having duplicated CSS and SCSS files everywhere.
• Remove className helper functions from components (getClassNames, getVariantClassNames etc) as you can inject props into styled-components.
• Stop worrying about vendor prefixes.
• Stop worrying about naming conflicts (I know BEM solves that problem, but it's even better when a problem doesn't even exist in the first place).
• Better theming support as styled-components generates CSS dynamically and theming is supported out-of-the-box with Context API.
• By the way, no need to build anything.
• Basically, a lot less lines of code which generally means less room for bugs and more productivity.

Describe the solution you'd like
Basically replacing CSS/SCSS by styled-components.

Describe alternatives you've considered
I haven't considered other alternatives.

[reiniergs]

styled-components are pretty cool, that's something we should consider, at least new components should use it, replacing CSS/SCSS by styled-components is a major refactor in our codebase at this point.

[LeandroTorresSicilia]

We will refactor all components to use styled-components, here is the first one:
#981
Anyone can help us to make this move with small contributions

[TahimiLeonBravo]

Components list to migrate

• Accordion
• AccordionSection (@TahimiLeonBravo)
• ActivityTimeline (@TahimiLeonBravo)
• Breadcrumb (@TahimiLeonBravo)
• Breadcrumbs (@TahimiLeonBravo)
• Card (@TahimiLeonBravo)
• Modal (@TahimiLeonBravo)
• Pagination (@TahimiLeonBravo)
• Sidebar (@TahimiLeonBravo)
• SidebarItem (@TahimiLeonBravo)
• Tab (@TahimiLeonBravo)
• Tabset (@TahimiLeonBravo)
• TimelineMarker (@TahimiLeonBravo)
• VerticalItem (@TahimiLeonBravo)
• VerticalNavigation (@TahimiLeonBravo)
• VerticalSection (@TahimiLeonBravo)
• VerticalSectionOverflow (@TahimiLeonBravo)
• CheckboxGroup (@TahimiLeonBravo and @LeandroTorresSicilia)
• CheckboxToogle (@TahimiLeonBravo)
• DatePicker (@TahimiLeonBravo and @LeandroTorresSicilia)
• GoogleAddressLookup (@TahimiLeonBravo)
• Input(@LeandroTorresSicilia)
• Lookup (@TahimiLeonBravo and @LeandroTorresSicilia)
• Picklist (@TahimiLeonBravo and @LeandroTorresSicilia)
• PicklistOption (@TahimiLeonBravo)
• RadioButtonGroup (@TahimiLeonBravo)
• RadioGroup (@TahimiLeonBravo and @LeandroTorresSicilia)
• Rating (@TahimiLeonBravo)
• Select (@TahimiLeonBravo)
• Slider (@TahimiLeonBravo)
• Textarea (@TahimiLeonBravo)
• TimePicker (@TahimiLeonBravo and @cmcartaya)
• VisualPicker (@TahimiLeonBravo)
• VisualPickerOption (@TahimiLeonBravo)
• VisualPickerOptionFooter (@TahimiLeonBravo)
• Avatar(@TahimiLeonBravo)
• AvatarMenu (@TahimiLeonBravo)
• Badge (@LeandroTorresSicilia)
• Button (@TahimiLeonBravo)
• ButtonGroup (@TahimiLeonBravo)
• ButtonIcon (@TahimiLeonBravo)
• ButtonMenu
• Calendar (@TahimiLeonBravo)
• Carousel (@TahimiLeonBravo)
• CarouselImage (@TahimiLeonBravo)
• Chip (@TahimiLeonBravo)
• GMap (@TahimiLeonBravo)
• MapMarker (@TahimiLeonBravo)
• MenuDivider (@TahimiLeonBravo)
• MenuItem (@TahimiLeonBravo)
• Notification (@TahimiLeonBravo)
• ProgressBar (@TahimiLeonBravo)
• ProgressCircular (@TahimiLeonBravo)
• ProgressIndicator (@TahimiLeonBravo)
• ProgressStep (@TahimiLeonBravo)
• ReCaptcha (@TahimiLeonBravo)
• Spinner (@TahimiLeonBravo)
• Chart (@TahimiLeonBravo)
• Column
• Dataset
• Table (@TahimiLeonBravo)
• TableWithBrowserPagination (@TahimiLeonBravo)
• ImportRecordsFlow (@TahimiLeonBravo)