"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchInput = void 0;
const react_1 = __importDefault(require("react"));
const TextInput_1 = require("./TextInput");
const varsUtilities_1 = require("../../varsUtilities");
const icons_1 = require("../../icons");
function SearchInput(props) {
    const { style, ...rest } = props;
    return (react_1.default.createElement(TextInput_1.TextInput, { style: {
            backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleNormal'),
            border: '1px solid transparent',
            '&:hover': {
                backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleHover'),
                border: '1px solid transparent',
            },
            '&:focus-within': {
                border: `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'active', 'default')}`,
                boxShadow: `0 0 0 2px ${(0, varsUtilities_1.color)('border', 'brand', 'subtle')}`,
                backgroundColor: 'transparent',
            },
            ...style,
        }, icon: react_1.default.createElement(icons_1.IconSearch, null), ...rest }));
}
exports.SearchInput = SearchInput;
//# sourceMappingURL=SearchInput.js.map