import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { Typography, Search } from '../../../Common';
export var BrandListSearch = (_ref) => {
  var {
    query,
    setQuery,
    title
  } = _ref;
  return /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
    value: query,
    onChange: e => setQuery(e.target.value)
  }), /*#__PURE__*/React.createElement(Search, null)));
};
var Input = styled.input.attrs({
  className: 'py-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  padding-left: 1rem;\n  padding-right: 4rem;\n  min-height: 4rem;\n\n  width: 100%;\n\n  border: 0.1rem solid ", ";\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.light;
});
var InputWrapper = styled.div.attrs({
  className: 'mb-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  max-width: 40rem;\n\n  & > svg {\n    position: absolute;\n    opacity: 0.6;\n    right: 1.3rem;\n    top: 0.8rem;\n    width: 1.6rem;\n    pointer-events: none;\n  }\n"])));
var Label = styled.label.attrs({
  className: 'd-block pb-2 mt-4 mt-lg-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Title = styled(Typography).attrs({
  as: 'h3',
  variant: '4',
  className: 'mb-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-size: 2.4rem;\n  line-height: 1.6667;\n"])));
//# sourceMappingURL=index.js.map