const label = props.label ?? "Label"; const placeholder = props.placeholder ?? "Placeholder"; const value = props.value ?? ""; const options = props.options ?? []; const onChange = props.onChange ?? (() => { }); const validate = props.validate ?? (() => { }); const error = props.error ?? ""; const Container = styled.div` display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0px; gap: 0.45em; width: 100%; `; const Label = styled.label` font-style: normal; font-weight: 600; font-size: 0.95em; line-height: 1.25em; color: #344054; `; const Error = styled.span` display: inline-block; font-style: normal; font-weight: 400; font-size: 0.75em; line-height: 1.25em; color: #ff4d4f; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; &.show { height: 1.25em; } `; const Input = styled.input` box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0.5em 0.75em; gap: 0.5em; background: #ffffff; border: 1px solid #d0d5dd; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 4px; color: #101828; width: 100%; `; const Item = styled.span` display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5em; padding: 0.25em 0.5em; background: #f2f4f7; border: 1px solid #d0d5dd; border-radius: 3px; font-style: normal; font-weight: 500; font-size: .95em; line-height: 1.25em; text-align: center; color: #344054; `; return ( <Container> <Label>{label}</Label> <Typeahead id labelKey="name" onChange={onChange} options={[{ name: "test" }, { name: "test2" }]} selected={value} renderToken={(option, props, index) => { console.log({ option, props }); return ( <Item key={index} {...props}> {option.name} <svg onClick={() => props.onRemove()} width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg> </Item> ); }} positionFixed multiple allowNew /> <Error className={error ? "show" : ""}>{error}</Error> </Container> );