Better class names for debugging

[siddharthkp]

Fixes #166

This changes ALL the class names and hence all the chromatic snapshots need approval

Converts

<button class="sc-dnqmqq jTtzor" icon="apis">
  <i class="sc-bwzfXH fRCcvq">
    <svg class="sc-htpNat WAuWX"></svg>
  </i>
  <span class="sc-gZMcBi gZDevs">Button</span>
</button>

to

<button class="button__Element-kXFKBl eJZKsk" icon="apis">
  <i class="icon__Element-hNoGcs fCXlyr">
    <svg class="icon__Image-HcNJc ecgQOf"></svg>
  </i>
  <span class="button__Text-csEsbi eoVnij">Button</span>
</button>

[siddharthkp]

Added don't-merge because this disables the class^="sc-" hack that we have in place

https://github.com/auth0/cosmos/blob/master/core/components/_helpers/globals.js#L84

[siddharthkp]

Closing this because it breaks the ^sc- hack.

The right solution depends on this discussion: https://github.com/orgs/auth0/teams/design-system/discussions/24?from_comment=1#discussion-24-comment-1