import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import InputSearch from '../InputSearch';
import * as InputSearchStories from './InputSearch.stories';

<Meta of={InputSearchStories} />

# Input Search

<br />

## `Input Searchs` are used as input for searching.

<br />

### Default

<Canvas>
  <Story of={InputSearchStories.Default} />
</Canvas>

### With search button

<Canvas>
  <Story of={InputSearchStories.WithSearchButton} />
</Canvas>

### Custom search icon

<Canvas>
  <Story of={InputSearchStories.CustomSearchIcon} />
</Canvas>

### Only search icon

<Canvas>
  <Story of={InputSearchStories.OnlySearchIcon} />
</Canvas>

### Only search Text

<Canvas>
  <Story of={InputSearchStories.OnlySearchText} />
</Canvas>

### Hidden Label

<Canvas>
  <Story of={InputSearchStories.HiddenLabel} />
</Canvas>

### Without borders

<Canvas>
  <Story of={InputSearchStories.WithoutBorders} />
</Canvas>

### Custom Styles

<Canvas>
  <Story of={InputSearchStories.CustomStyles} />
</Canvas>

## Usage Example

```jsx
import InputSearch from '@appdirect/sfb-theme-components/src/atoms/input-search/InputSearch';

<InputSearch />
```

## Props

<ArgsTable of={InputSearch} />
