Refactor the TokenPicker component

[six7]

Our current TokenPicker component is quite poor when it comes to UX.

It wasn't implemented correctly as it's not using a Portal, and as such is always bound by to the constraints of the parent.

We worked around this by increasing the parent's height (as can be seen in the Inspect/Remap modal), but ideally this should just use a Portal and live outside of the parent container.

What I'd like us to do is refactor this so it can use a Portal and split up the uses in two different ones:

Requirements:

• The dropdown should be able to go beyond the bounds of the parent div (implement as Portal)
• We implement { typesuggestions in its own way, it becomes its own component only appearing on typing {.
• We refactor the way we show the TokenPicker

Suggestions

• Suggestions should appear once I type { and should react to text changes.
• I should be able to use arrow up / down to navigate up / down
• Pressing Enter should insert the selected token (with {}) in the position where I was typing
• Pressing Esc should close the suggestions overlay

Dropdown picker

• The picker only appears when I click the dropdown icon
• After opening, the picker moves focus to the input
• After opening, we show suggestions based on the search (like today)
• Entering in the search changes suggestions
• Pressing arrow up / down navigates the list of suggestions
• Pressing Escape closes the picker
• Searching is done in a way where we can do fuzzy search: typing ba se pr ho should show base.selectable.primary.bg-hover

Dropdown picker with value suggestions

• For fontFamily we should show available fonts (from Figma) in the picker, in a second tab
• We can show this both in fontFamily tokens as well as typography tokens in the fontFamily field
• For typography tokens in the fontWeights field we should also show available weights for that specific fontFamily (if a fontFamily has been chosen)