Input Component

[alexanderl19]

It should be built with the input html element and the label primitive.

My recommendation would be to place in input element inside the label primitive, so you won't need to generate a unique id.

This component should have the following props:

• color: "sand" | "red"
• icon: React Component
• value: string
• onChange: (value: string) => void
• label: string
• placeholder: string

Refer to this component for styling:
https://www.figma.com/file/72xMrVKCuXWAiSlCSfsD3w/ZotMeet-Design-System?node-id=144%3A247&t=IV19NVOLpJ0Rp21s-1
Opening the inspect tag on Figma allows you to hover to see spacing.

(You can CMD/CTRL click to directly select something in a group!)

Remember you do not need to create separate light and dark versions. Use SCSS variables for colors (eg: colors.$sand1).