import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import Caret from './';
import { lightTheme } from '../../../../theme/';
import { GlobalStyles } from '../../../../theme/GlobalStyles';

import * as CaretStories from './Caret.stories.tsx';

<Meta of={CaretStories} />

# Caret Icon

The Caret component creates an arrow icon using inline SVG. Typically, you can use it to indicate that some content can be expanded.

You can define the direction of the caret, e.g. up, right, down, and left.

## Importing

```javascript
import { Caret } from 'amazon-chime-sdk-component-library-react';
```

## Example

With custom width

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Caret width="2rem" />
  </Canvas>
</ThemeProvider>

```jsx
<Caret width="2rem" />
```

Change the direction

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Caret width="2rem" direction="down" />
  </Canvas>
</ThemeProvider>

```jsx
<Caret width="2rem" direction="down" />
```

## Props

<ArgTypes of={Caret} />