"use client";
'use strict';

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

const Search = React.forwardRef(({ className, disabled, placeholder = 'Search', size, showClearButton, onClear, value, onChange, width = '100%', variant = 'default', ...props }, ref) => {
    const trailingIconWithClear = showClearButton && value ? (jsxRuntime.jsx("div", { className: search_module.default.clearButtonWrapper, children: jsxRuntime.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.jsx(reactIcons_esm.CrossCircledIcon, {}) }) })) : undefined;
    return (jsxRuntime.jsx("div", { className: search_module.default.container, role: 'search', style: { width }, children: jsxRuntime.jsx(inputField.InputField, { leadingIcon: jsxRuntime.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
