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

<Meta of={DateRangePickerStories} />

# DateRangePicker

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/DateRangePicker"
  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=10458%3A45652&mode=design&t=4Mycc044XjC1WLin-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082094237/Date+Range+Picker"

/>

<KAIOInstallation exportNames="DateRangePicker" />

## Overview

Date range picker form field.

**Note:** While we do not yet have a replacement, this is a legacy component since it is not accessible.

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

## Responsive behaviour

As both the `DatePicker` and `DateRangePicker` use the `CalendarPopover` component under the hood, they share the same responsive behaviour. You can read more on this [here](/docs/components-datepickers-datepicker--docs#responsive-behaviour).

<DocsStory of={DateRangePickerStories.AboveIfAvailable} />
<DocsStory of={DateRangePickerStories.LimitedViewportHeight} />
<DocsStory of={DateRangePickerStories.FullViewportHeight} />