[BUG] Map doesn't render inline styles with strict CSP

[WebDev-Akhil]

Background: This is a next.js project, but this issue should be common for any web project which uses a strict Content Security Policy.

Problem: The map uses inline styles which are not rendering properly when the CSP's style-src is set to self. Adding unsafe-inline to the style-src does the job, but it is not a safe practice, so looking for better ways to handle this.

Suggested Solution: Implement a nonce in the API, so we can pass the nonce to override the styles of the map.

  <WorldMap
     color="red"
     title="Top 10 Populous Countries"
     value-suffix="people"
     size="lg"
     data={data}
     nonce={nonce} //where nonce is a random string passed as a prop. 
  />

More info: https://content-security-policy.com/examples/allow-inline-style/

Screenshot: