import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { MagnifyingGlassIcon, CrossCircledIcon } 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 { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
import styles from './search.module.css.js';

const searchField = cva(styles.searchField, {
    variants: {
        size: {
            small: styles["search-small"],
            large: styles["search-large"],
        }
    },
    defaultVariants: {
        size: "large",
    }
});
const Search = ({ className, disabled, placeholder = "Search", size, showClearButton, onClear, value, ref, ...props }) => {
    return (jsxRuntimeExports.jsx("div", { className: styles.container, role: "search", children: jsxRuntimeExports.jsxs("div", { className: styles.inputWrapper, children: [jsxRuntimeExports.jsx("span", { className: styles.leadingIcon, "aria-hidden": "true", children: jsxRuntimeExports.jsx(MagnifyingGlassIcon, {}) }), jsxRuntimeExports.jsx("input", { ref: ref, type: "text", className: clsx(searchField({ size, className }), disabled && styles["search-disabled"]), placeholder: placeholder, disabled: disabled, value: value, "aria-label": placeholder, ...props }), showClearButton && value && (jsxRuntimeExports.jsx("button", { className: styles.clearButton, onClick: onClear, disabled: disabled, type: "button", "aria-label": "Clear search", tabIndex: 0, children: jsxRuntimeExports.jsx(CrossCircledIcon, {}) }))] }) }));
};
Search.displayName = "Search";

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