{"version":3,"file":"search.cjs","sources":["../../../components/search/search.tsx"],"sourcesContent":["'use client';\n\nimport { ClearIcon, SearchIcon } from '~/icons';\nimport { IconButton } from '../icon-button';\nimport { Input } from '../input';\nimport { InputProps } from '../input/input';\n\nimport styles from './search.module.css';\n\nexport interface SearchProps extends Omit<InputProps, 'leadingIcon'> {\n  showClearButton?: boolean;\n  onClear?: () => void;\n  variant?: 'default' | 'borderless';\n}\n\nexport function Search({\n  disabled,\n  placeholder = 'Search',\n  size,\n  showClearButton,\n  onClear,\n  value,\n  width = '100%',\n  variant = 'default',\n  ...props\n}: SearchProps) {\n  const trailingIconWithClear = showClearButton ? (\n    <div className={styles.clearButtonWrapper} data-slot='search-clear'>\n      <IconButton\n        size={size === 'small' ? 2 : 3}\n        onClick={e => {\n          e.stopPropagation();\n          if (!disabled && onClear) {\n            onClear();\n          }\n        }}\n        disabled={disabled}\n        aria-label='Clear search'\n        className={styles.clearButton}\n        data-slot='search-clear-button'\n      >\n        <ClearIcon />\n      </IconButton>\n    </div>\n  ) : undefined;\n\n  return (\n    <div\n      className={styles.container}\n      role='search'\n      style={{ width }}\n      data-slot='search'\n    >\n      <Input\n        data-slot='search-input'\n        leadingIcon={<SearchIcon />}\n        trailingIcon={trailingIconWithClear}\n        placeholder={placeholder}\n        disabled={disabled}\n        value={value}\n        size={size}\n        aria-label={placeholder}\n        variant={variant}\n        {...props}\n      />\n    </div>\n  );\n}\n\nSearch.displayName = 'Search';\n"],"names":[],"mappings":";;;;;;;;;;AAegB;AAWd;;AAMQ;AACE;;;AAaV;AAqBF;AAEA;;"}