'use strict';

var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
var inputField = require('../input-field/input-field.cjs');
var iconButton = require('../icon-button/icon-button.cjs');
var search_module = require('./search.module.css.cjs');
var React = require('react');

const Search = React.forwardRef(({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, onChange, width = "100%", variant = "default", ...props }, ref) => {
    const trailingIconWithClear = showClearButton && value ? (jsxRuntime.jsxRuntimeExports.jsx("div", { className: search_module.default.clearButtonWrapper, children: jsxRuntime.jsxRuntimeExports.jsx(iconButton.IconButton, { size: size === "small" ? 2 : 3, onClick: (e) => {
                e.stopPropagation();
                if (!disabled && onClear) {
                    onClear();
                }
            }, disabled: disabled, "aria-label": "Clear search", className: search_module.default.clearButton, children: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CrossCircledIcon, {}) }) })) : undefined;
    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: search_module.default.container, role: "search", style: { width }, children: jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { leadingIcon: jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.MagnifyingGlassIcon, {}), trailingIcon: trailingIconWithClear, placeholder: placeholder, disabled: disabled, value: value, onChange: onChange, size: size, className: className, "aria-label": placeholder, variant: variant, ref: ref, ...props }) }));
});
Search.displayName = "Search";

exports.Search = Search;
//# sourceMappingURL=search.cjs.map
