import { Meta, Canvas, Props, Story } from "@storybook/blocks";
import {
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
} from "../../storybook-components";
import { Relative } from "./Relative";

<Meta title="Deprecated/Components/To delete/Relative" component={Relative} />

<ComponentHeading
  componentName="Relative"
  description="A component for wrapping children in a relative-positioned container"
  sourcePath="src/components/Relative/Relative.tsx"
  hideDemosLink
/>

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

This component has been deprecated. To provide relative position to an element, use the `relative` classname.

```jsx
import { Relative } from "@conveyorhq/arrow-ds";
```

<Canvas>
  <Story name="Relative">
    <Relative>This is the Relative component</Relative>
  </Story>
</Canvas>

## Props

<Props of={Relative} />