import 'react';
import '@emotion/core';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-bfe8e225.js';
import { u as useCustomCss } from './utilities-357c56e6.js';
import { InputWrapper } from './InputWrapper.js';

var SelectBox = function (_a) {
    var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.description, description = _c === void 0 ? '' : _c, _d = _a.placeholder, placeholder = _d === void 0 ? '[Select an option]' : _d, _e = _a.noPlaceholder, noPlaceholder = _e === void 0 ? false : _e, _f = _a.wrapperProps, wrapperProps = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.valid, valid = _h === void 0 ? null : _h, _j = _a.errorMessage, errorMessage = _j === void 0 ? '' : _j, _k = _a.customCss, customCss = _k === void 0 ? '' : _k, onChange = _a.onChange, _l = _a.options, options = _l === void 0 ? [
        {
            value: 'Option 1',
            label: 'Option 1',
        },
        {
            value: 'Option 2',
            label: 'Option 2',
        },
    ] : _l, props = __rest(_a, ["label", "description", "placeholder", "noPlaceholder", "wrapperProps", "className", "valid", "errorMessage", "customCss", "onChange", "options"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(props.id);
    var descriptionId = "desc-" + id;
    var errorId = "err-" + id;
    var handleChange = function (e) {
        if (onChange) {
            onChange(e.target.value, e);
        }
    };
    return (jsx(InputWrapper, __assign({ customCss: resolvedCss, className: className, label: label, description: description, errorMessage: errorMessage, id: id, descriptionId: descriptionId, errorId: errorId }, wrapperProps, { children: jsxs(Select, __assign({ type: "text", placeholder: placeholder, "aria-describedby": description ? descriptionId + " " + errorId : "" + errorId, "aria-invalid": valid === false, "data-valid": valid, id: id, onChange: handleChange }, props, { children: [!noPlaceholder && jsx("option", __assign({ value: "" }, { children: placeholder }), void 0),
                options.map(function (option, index) { return (jsx("option", __assign({ value: option.value }, { children: option.label }), "" + option.value + index)); })] }), void 0) }), void 0));
};
var Select = styled('select')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  font-size: 1em;\n  font-family: 'Open Sans', sans-serif;\n  border: 3px solid;\n  border-color: ", ";\n  height: 35px;\n  border-radius: 5px;\n  padding-left: 5px;\n  &[data-valid='true'] {\n    border-color: ", ";\n  }\n  &[data-valid='false'] {\n    border-color: ", ";\n  }\n  &:focus-visible,\n  &:active {\n    border: 3px solid ", ";\n    outline: none;\n  }\n"], ["\n  width: 100%;\n  font-size: 1em;\n  font-family: 'Open Sans', sans-serif;\n  border: 3px solid;\n  border-color: ", ";\n  height: 35px;\n  border-radius: 5px;\n  padding-left: 5px;\n  &[data-valid='true'] {\n    border-color: ", ";\n  }\n  &[data-valid='false'] {\n    border-color: ", ";\n  }\n  &:focus-visible,\n  &:active {\n    border: 3px solid ", ";\n    outline: none;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.neutral;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.success;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.danger;
}, function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var templateObject_1;

export { SelectBox };
//# sourceMappingURL=SelectBox.js.map
