"use client";
import { jsx } from 'react/jsx-runtime';
import { CrossCircledIcon, MagnifyingGlassIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
import { IconButton } from '../icon-button/icon-button.js';
import { InputField } from '../input-field/input-field.js';
import { forwardRef } from 'react';
import styles from './search.module.css.js';

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