import React__default from 'react';
import '@emotion/core';
import { a as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers-f108cd30.js';
import { _ as __rest, a as __assign, b as __makeTemplateObject } from './_tslib-5c49bd3f.js';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';
import '@emotion/styled';
import '@emotion/react';
import { s as styled, c as css } from './css-efbd0d2d.js';
import { u as useId } from './auto-id.esm-d84df351.js';
import { c as createIconComponent_1 } from './createIconComponent-c09f9274.js';
import { u as useCustomCss } from './utilities-357c56e6.js';
import { IconButton } from './IconButton.js';
import { C as Cross } from './cross-heavy-c6ad8858.js';

var searchHeavy = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _createIconComponent = _interopRequireDefault(createIconComponent_1);

var _react = _interopRequireDefault(React__default);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var IconSearchHeavy = (0, _createIconComponent["default"])({
  content: _react["default"].createElement("g", null, _react["default"].createElement("path", {
    d: "M30.4 52.86a23.09 23.09 0 1 1 23.09-23.1 23.12 23.12 0 0 1-23.09 23.1zm0-38.46a15.37 15.37 0 1 0 15.37 15.36A15.39 15.39 0 0 0 30.4 14.39z"
  }), _react["default"].createElement("path", {
    d: "M58.83 63.33a3.85 3.85 0 0 1-2.73-1.13L40.61 46.7a3.86 3.86 0 1 1 5.46-5.46l15.49 15.5a3.86 3.86 0 0 1-2.73 6.59z"
  })),
  height: undefined,
  width: undefined
});
IconSearchHeavy.displayName = 'IconSearchHeavy';
var _default = IconSearchHeavy;
exports["default"] = _default;
});

var SearchIconHeavy = /*@__PURE__*/getDefaultExportFromCjs(searchHeavy);

var SearchBox = function (_a) {
    var value = _a.value, label = _a.label, placeholder = _a.placeholder, _b = _a.wrapperProps, _c = _a.className, _d = _a.customCss, customCss = _d === void 0 ? '' : _d, searchDisabled = _a.searchDisabled, disabled = _a.disabled, onChange = _a.onChange, onSubmit = _a.onSubmit, onClear = _a.onClear, _e = _a.showSearchButton, showSearchButton = _e === void 0 ? true : _e, _f = _a.showClearButton, showClearButton = _f === void 0 ? false : _f, props = __rest(_a, ["value", "label", "placeholder", "wrapperProps", "className", "customCss", "searchDisabled", "disabled", "onChange", "onSubmit", "onClear", "showSearchButton", "showClearButton"]);
    var resolvedCss = useCustomCss(customCss);
    var id = useId(props.id);
    var inputRef = React__default.useRef(null);
    var _g = React__default.useState(false), buttonFocused = _g[0], setButtonFocused = _g[1];
    var handleChange = function (e) {
        if (onChange) {
            onChange(e.target.value, e);
        }
    };
    var handleClear = function () {
        if (onClear) {
            onClear();
        }
    };
    var handleSubmit = function (e) {
        if (onSubmit) {
            if (inputRef && inputRef.current) {
                onSubmit(inputRef.current.value, e);
            }
        }
    };
    return (jsxs(Wrapper, __assign({ css: resolvedCss }, { children: [jsx(IconHolder, { children: jsx(SearchIconHeavy, { css: searchIconStyle }, void 0) }, void 0),
            jsx(Input, __assign({ type: "text", "aria-label": label, placeholder: placeholder, disabled: disabled, "aria-disabled": disabled, id: id, value: value, onKeyPress: function (e) {
                    ((e.key && e.key === 'Enter') || (e.keyCode && e.keyCode === 13)) &&
                        !searchDisabled &&
                        handleSubmit(e);
                }, onChange: handleChange, ref: inputRef, "data-button-focused": buttonFocused }, props), void 0),
            jsxs(ButtonHolder, __assign({ showClearButton: showClearButton, showSearchButton: showSearchButton }, { children: [showClearButton && jsx(IconButton, { label: "Clear Search", icon: jsx(Cross, {}, void 0), onClick: handleClear }, void 0),
                    showSearchButton && jsx(Button, __assign({ type: "submit", "aria-disabled": disabled || searchDisabled, onClick: function (e) {
                            return !searchDisabled && handleSubmit(e);
                        }, onFocus: function () {
                            setButtonFocused(true);
                        }, onBlur: function () {
                            setButtonFocused(false);
                        } }, { children: "Search" }), void 0)] }), void 0)] }), void 0));
};
var IconHolder = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 0;\n  height: 0;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  width: 0;\n  height: 0;\n  display: flex;\n  align-items: center;\n"])));
var searchIconStyle = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 10px;\n  fill: #888a90;\n  height: 16px;\n  width: 16px;\n  transform: rotateY(180deg);\n"], ["\n  position: absolute;\n  left: 10px;\n  fill: #888a90;\n  height: 16px;\n  width: 16px;\n  transform: rotateY(180deg);\n"])));
var Wrapper = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  > button:selected & input {\n    width: 350px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  > button:selected & input {\n    width: 350px;\n  }\n"])));
var ButtonHolder = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  fill: #888a90;\n"], ["\n  margin-left: ",
    ";\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  fill: #888a90;\n"])), function (_a) {
    var showClearButton = _a.showClearButton, showSearchButton = _a.showSearchButton;
    var pixels = 0;
    if (showClearButton)
        pixels -= 30;
    if (showSearchButton)
        pixels -= 70;
    return pixels + "px";
});
var Input = styled('input')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: #e9ebef;\n  width: 300px;\n  font-size: 1em;\n  font-weight: 400;\n  border: none;\n  height: 41px;\n  border-radius: 9px;\n  padding: 5px 80px 5px 30px;\n  transition: width cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n  &:hover {\n    width: 310px;\n  }\n  &:focus-visible,\n  &:active {\n    width: 350px;\n    box-shadow: 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n  &[aria-disabled='true'] {\n    width: 300px;\n    box-shadow: none;\n    background-color: #c3c6cc;\n    cursor: not-allowed;\n  }\n  &[data-button-focused='true'] {\n    &:not[aria-disabled='true'] {\n      width: 350px;\n    }\n  }\n"], ["\n  background: #e9ebef;\n  width: 300px;\n  font-size: 1em;\n  font-weight: 400;\n  border: none;\n  height: 41px;\n  border-radius: 9px;\n  padding: 5px 80px 5px 30px;\n  transition: width cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n  &:hover {\n    width: 310px;\n  }\n  &:focus-visible,\n  &:active {\n    width: 350px;\n    box-shadow: 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n  &[aria-disabled='true'] {\n    width: 300px;\n    box-shadow: none;\n    background-color: #c3c6cc;\n    cursor: not-allowed;\n  }\n  &[data-button-focused='true'] {\n    &:not[aria-disabled='true'] {\n      width: 350px;\n    }\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var Button = styled('button')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 0.8em;\n  font-weight: bold;\n  border: none;\n  outline: none;\n  height: 25px;\n  width: 62px;\n  background: #445b88;\n  border-radius: 5px;\n  color: #fff;\n  text-transform: uppercase;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n  &[aria-disabled='true'] {\n    box-shadow: none;\n    cursor: not-allowed;\n    background-color: #a1a4aa;\n  }\n"], ["\n  cursor: pointer;\n  font-size: 0.8em;\n  font-weight: bold;\n  border: none;\n  outline: none;\n  height: 25px;\n  width: 62px;\n  background: #445b88;\n  border-radius: 5px;\n  color: #fff;\n  text-transform: uppercase;\n  &:focus-visible {\n    box-shadow: 0px 0px 0px 2px ", ";\n  }\n  &[aria-disabled='true'] {\n    box-shadow: none;\n    cursor: not-allowed;\n    background-color: #a1a4aa;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.inputFocus;
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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