Add Select clear selection example

[taysea]

Deploy Preview

What does this PR do?

Adds example to the site with "Clear selection". This requires grommet/grommet-theme-hpe#412 to be released before merging.

NOTE: Right now in Grommet if a name is passed to Select, that's used to in place of the word "selection" in "Clear selection" button. This just felt a little odd because name is usually more "dev centric" wording than user facing. For now, I've implemented by passing an object to define my own label like clear={{ label: 'Clear selection' }} -- in terms of being able to standardize wording though it does feel a bit off.

Where should the reviewer start?

What testing has been done on this PR?

In addition to the feature you are implementing, have you checked the following:

General UX Checks

• Small, medium, and large screen sizes
• Cross-browsers (FireFox, Chrome, and Safari)
• Light & dark modes
• All hyperlinks route properly

Accessibility Checks

• Keyboard interactions
• Screen reader experience
• Run WAVE accessibility plugin (Chrome)

Code Quality Checks

• Console is free of warnings and errors
• Passes E2E commit checks
• Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Closes #4225

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?