import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { CrossCircledIcon, MagnifyingGlassIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { InputField } from '../input-field/input-field.js';
import { IconButton } from '../icon-button/icon-button.js';
import styles from './search.module.css.js';
import { forwardRef } from 'react';

const Search = forwardRef(({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, onChange, width = "100%", variant = "default", ...props }, ref) => {
    const trailingIconWithClear = showClearButton && value ? (jsxRuntimeExports.jsx("div", { className: styles.clearButtonWrapper, children: jsxRuntimeExports.jsx(IconButton, { size: size === "small" ? 2 : 3, onClick: (e) => {
                e.stopPropagation();
                if (!disabled && onClear) {
                    onClear();
                }
            }, disabled: disabled, "aria-label": "Clear search", className: styles.clearButton, children: jsxRuntimeExports.jsx(CrossCircledIcon, {}) }) })) : undefined;
    return (jsxRuntimeExports.jsx("div", { className: styles.container, role: "search", style: { width }, children: jsxRuntimeExports.jsx(InputField, { leadingIcon: jsxRuntimeExports.jsx(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";

export { Search };
//# sourceMappingURL=search.js.map
