import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as SearchFieldStories from './SearchField.stories'

<Meta of={SearchFieldStories} />

# SearchField

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/SearchField"
  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A39914&t=P1w10jr2cpPuaayw-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896613/Search+Field"

/>

<KAIOInstallation exportNames="SearchField" />

## Overview

Search lets users quickly find relevant content. A search field allows a user to type a word or phrase to filter a large amount of data down to a known piece of content or to a narrower list of relevant content without navigation.

<Canvas of={SearchFieldStories.Playground} />
<Controls of={SearchFieldStories.Playground} />

## Secondary

<Canvas of={SearchFieldStories.Secondary} />

## Disabled

<Canvas of={SearchFieldStories.Disabled} />

## Reversed

<Canvas of={SearchFieldStories.Reversed} />