import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import ReactSelect from "react-select";
const SourceSelector = ({ value, sources, onChange }) => {
    const options = sources.map((s) => ({
        label: s.name,
        value: s.name,
    }));
    return (_jsx(ReactSelect, { placeholder: "Select a source", styles: {
            control: (provided, state) => (Object.assign(Object.assign({}, provided), { background: "#fff", borderColor: "var(--chakra-colors-gray-200)", minHeight: "30px", height: "30px", boxShadow: state.isFocused ? null : null })),
            valueContainer: (provided) => (Object.assign(Object.assign({}, provided), { height: "30px", padding: "0 6px" })),
            input: (provided) => (Object.assign(Object.assign({}, provided), { margin: "0px" })),
            indicatorSeparator: () => ({
                display: "none",
            }),
            indicatorsContainer: (provided) => (Object.assign(Object.assign({}, provided), { height: "30px" })),
            menuList: (provided) => (Object.assign(Object.assign({}, provided), { padding: "8px 4px 8px 8px", fontFamily: "monospace", "::-webkit-scrollbar": {
                    width: "6px",
                }, "::-webkit-scrollbar-track": {
                    background: "transparent",
                }, "::-webkit-scrollbar-thumb": {
                    background: "#888",
                    borderRadius: "4px",
                }, "::-webkit-scrollbar-thumb:hover": {
                    background: "#555",
                } })),
            option: (provided) => (Object.assign(Object.assign({}, provided), { borderRadius: "4px" })),
        }, value: !value ? null : { value, label: value }, onChange: onChange, options: options }));
};
export default SourceSelector;
//# sourceMappingURL=SourceSelector.js.map