var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { memo, useMemo } from "react";
import Select from "react-select";
import { useTheme } from "styled-components";
import * as DropdownIndicatorModule from "./DropdownIndicator";
import * as ValueContainerModule from "./ValueContainer";
import * as ControlModule from "./Control";
import * as MenuListModule from "./MenuList";
import * as OptionModule from "./Option";
import { IndicatorsContainer } from "./IndicatorsContainer";
import { InputErrorContainer } from "../BaseInput";
const stylesFn = (theme) => ({
    control: ControlModule.getStyles(theme),
    valueContainer: ValueContainerModule.getStyles(),
    dropdownIndicator: DropdownIndicatorModule.getStyles(),
    menuList: MenuListModule.getStyles(theme),
    option: OptionModule.getStyles(),
    input: provided => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100 })),
    placeholder: provided => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c60 })),
    singleValue: provided => (Object.assign(Object.assign({}, provided), { color: "inherit" })),
    multiValue: provided => (Object.assign(Object.assign({}, provided), { backgroundColor: theme.colors.primary.c20, borderRadius: theme.radii[1] })),
    multiValueLabel: provided => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100 })),
    multiValueRemove: provided => (Object.assign(Object.assign({}, provided), { cursor: "pointer", ":hover": {
            color: theme.colors.error.c50,
            backgroundColor: theme.colors.error.c30,
        } })),
    menu: provided => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none" })),
});
function SelectInput(_a) {
    var { error, rowHeight = 48, unwrapped, extendStyles } = _a, props = __rest(_a, ["error", "rowHeight", "unwrapped", "extendStyles"]);
    const theme = useTheme();
    const styles = useMemo(() => (extendStyles ? extendStyles(stylesFn(theme)) : stylesFn(theme)), [theme, extendStyles]);
    const { isDisabled, components = {} } = props;
    const innerContent = (React.createElement(Select, Object.assign({}, props, { styles: Object.assign(Object.assign({}, styles), props.styles), classNamePrefix: "react-select", components: Object.assign({ Control: ControlModule.Control, ValueContainer: ValueContainerModule.ValueContainer, IndicatorsContainer, DropdownIndicator: DropdownIndicatorModule.DropdownIndicator, MenuList: MenuListModule.MenuList, Option: OptionModule.Option, IndicatorSeparator: null }, components), 
        // @ts-expect-error We want to be able to pass extra props here…
        rowHeight: rowHeight })));
    if (unwrapped)
        return innerContent;
    return (React.createElement("div", null,
        innerContent,
        error && !isDisabled && (React.createElement(InputErrorContainer, { variant: "paragraph" }, error))));
}
export default memo(SelectInput);
//# sourceMappingURL=index.js.map