import type { Meta, StoryObj } from "@storybook/react";
import { Flex } from "@appsmith/wds";
/**
 * The Flex component can be used to layout its children in one dimension with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). Any React component can be used as a child, and Flex components can be nested to create more complex layouts.
 *
 * In addition to the properties widely supported by CSS, we also shim the [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property, along with [rowGap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) and [columnGap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap). These properties make it much easier to build layouts with consistent space between each item.
 * The props of component can be defined with [sizing](/?path=/docs/design-system-theme-theme--sizing) and [spacing](http://localhost:6006/?path=/docs/design-system-theme-theme--spacing) dimension variables to ensure consistency across applications, and allow the layout to adapt to different devices automatically. In addition, these values can be autocompleted in many IDEs for convenience.
 */
declare const meta: Meta<typeof Flex>;
export default meta;
type Story = StoryObj<typeof Flex>;
export declare const Main: Story;
export declare const VerticalStack: Story;
export declare const HorizontalStack: Story;
/**
 *
 * The component interface supports `Responsive` props. Using such props, we can easily create responsive interfaces.
 * Specifying the props is based on the principle of **mobile first**, respectively, specifying `base` is applied for the smallest value, then breaking points are added.
 * It should also be taken into account that the break points indicate the width of the parent component and not the user's viewport because we use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries).
 * To make everything work, we just need to add `isContainer` prop to the parent FLex component.
 *
 * **Usage example**: `<Flex isContainer direction={{ base: "column", "520px": "row" }}>...</Flex>`
 */
export declare const ResponsiveCard: Story;
export declare const ResponsiveList: Story;