```jsx
<MetricsPricingWidget>
  <option label="Free" retained="24 hours" value={-50} />
  <option label="Free" retained="24 hours" value={0} />
  <option label="$100/month" logs="100k" retained="Monthly" value={100}></option>
  <option label="$200/month" logs="200k" retained="Monthly" value={200}></option>
  <option label="$300/month" logs="300k" retained="Monthly" value={300}></option>
  <option label="$400/month" logs="400k" retained="Monthly" value={400}></option>
  <option label="$500/month" logs="500k" retained="Monthly" value={500}></option>
  <option label="$600/month" logs="600k" retained="Monthly" value={600}></option>
  <option label="$700/month" logs="700k" retained="Monthly" value={700}></option>
  <option label="$800/month" logs="800k" retained="Monthly" value={800}></option>
  <option label="$900/month" logs="900k" retained="Monthly" value={900}></option>
  <option label="$1000/month" logs="1000k" retained="Monthly" value={1000}></option>
  <option
    details="<b>Need more capacity?</b> <a href=tel:3232062137 style=color:#118cfd;text-decoration:none>Contact us</a> for enterprise solutions."
    label="Get in touch."
    value={1100}
  />
</MetricsPricingWidget>
```

<!-- 
```jsx
const labels = {
  "-50": {
    label: 'Free',
    retained: '24 hours',
  },
  "0": {
    label: 'Free',
    retained: '24 hours',
  },
  "100": {
    label: '$100/month',
    retained: '30 days',
    logs: "100k"
  },
  "200": {
    label: '$200/month',
    retained: '30 days',
    logs: "200k"
  },
  "300": {
    label: '$300/month',
    retained: '30 days',
    logs: "300k"
  },
  "400": {
    label: '$400/month',
    retained: '30 days',
    logs: "400k"
  },
  "500": {
    label: '$500/month',
    retained: '30 days',
    logs: "500k"
  },
  "600": {
    label: '$600/month',
    retained: '30 days',
    logs: "600k"
  },
  "700": {
    label: '$700/month',
    retained: '30 days',
    logs: "700k"
  },
  "800": {
    label: '$800/month',
    retained: '30 days',
    logs: "800k"
  },
  "900": {
    label: '$900/month',
    retained: '30 days',
    logs: "900k"
  },
  "1000": {
    label: '$1000/month',
    retained: '30 days',
    logs: "1000k"
  },
  "1100": {
    label: 'Get in touch.',
    details: '<b>Need more capacity?</b> <a href=tel:3232062137 style=color:#118cfd;text-decoration:none>Contact us</a> for enterprise solutions.'
  },
};

<MetricsPricingWidget labels={labels}/>
```
-->