import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import * as FlexStories from './Flex.stories.mdx';
import Flex, { DIRECTION, JUSTIFY_VALUES, ALIGNMENT_VALUES, MARGINS, GAP_VALUES, FLEX_VALUES } from './Flex';
import Box, { COLOR } from '../box/Box';
import { generateChromaticStory, responsivePropsStoryLabel } from '../../chromatic/utils';
var indigoBoxStyle = {
  border: true,
  borderColor: COLOR['indigo-40'],
  color: COLOR['indigo-20']
};
export var ResponsiveProps = function ResponsiveProps(args) {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('direction', [DIRECTION.COLUMN, DIRECTION.COLUMN_REVERSE, null, DIRECTION.ROW])), /*#__PURE__*/React.createElement(Flex, _extends({
    direction: [DIRECTION.COLUMN, DIRECTION.COLUMN_REVERSE, null, DIRECTION.ROW]
  }, args), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1"), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 2")), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('inlineFlex', [true, false, null, true])), /*#__PURE__*/React.createElement("div", null, "Labore sint do officia labore sit in magna pariatur mollit duis aliquip exercitation. Tempor veniam reprehenderit ea nulla in sunt do ea nostrud.", ' ', /*#__PURE__*/React.createElement(Flex, {
    inlineFlex: [true, false, null, true]
  }, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), "Officia aute proident laboris nostrud dolor nostrud id aliquip anim magna ullamco cupidatat consectetur."), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('justifyContent', [JUSTIFY_VALUES.END, JUSTIFY_VALUES.START, null, JUSTIFY_VALUES.SPACE_BETWEEN])), /*#__PURE__*/React.createElement(Flex, _extends({
    justifyContent: [JUSTIFY_VALUES.END, JUSTIFY_VALUES.START, null, JUSTIFY_VALUES.SPACE_BETWEEN]
  }, args), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      width: 100
    }
  }), "Flex child"), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      width: 100
    }
  }), "Flex child")), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('alignItems', [ALIGNMENT_VALUES.CENTER, ALIGNMENT_VALUES.END, null, ALIGNMENT_VALUES.START])), /*#__PURE__*/React.createElement(Flex, _extends({
    alignItems: [ALIGNMENT_VALUES.CENTER, ALIGNMENT_VALUES.END, null, ALIGNMENT_VALUES.START]
  }, args), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      height: 80
    }
  }), "Flex child"), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      height: 120
    }
  }), "Flex child")), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('margin', [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Flex, _extends({
    margin: [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('marginTop', [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(Flex, _extends({
    direction: "column"
  }, args), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(Flex, _extends({
    marginTop: [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('marginLeft', [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(Flex, _extends({
    marginLeft: [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('marginBottom', [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(Flex, _extends({
    direction: "column"
  }, args), /*#__PURE__*/React.createElement(Flex, _extends({
    marginBottom: [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 2"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('marginRight', [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Flex, _extends({
    marginRight: [MARGINS.XSMALL, MARGINS.XXLARGE, null, MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child 2"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('alignContent', [ALIGNMENT_VALUES.CENTER, ALIGNMENT_VALUES.END, ALIGNMENT_VALUES.START, ALIGNMENT_VALUES.STRETCH])), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      height: 400,
      width: 400
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    alignContent: [ALIGNMENT_VALUES.CENTER, ALIGNMENT_VALUES.END, ALIGNMENT_VALUES.START, ALIGNMENT_VALUES.STRETCH],
    wrap: true,
    fullHeight: true
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('gap', [GAP_VALUES.SMALL, null, GAP_VALUES.MEDIUM, GAP_VALUES.XLARGE])), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      height: 400,
      width: 400
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    gap: [GAP_VALUES.SMALL, null, GAP_VALUES.MEDIUM, GAP_VALUES.XLARGE],
    wrap: true,
    fullHeight: true
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('FLEX', [FLEX_VALUES.INITIAL, null, FLEX_VALUES.AUTO, FLEX_VALUES['10']])), /*#__PURE__*/React.createElement(Box, _extends({}, indigoBoxStyle, {
    style: {
      height: 400,
      width: 400
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    wrap: true,
    fullHeight: true
  }, /*#__PURE__*/React.createElement(Flex, {
    flex: [FLEX_VALUES.INITIAL, FLEX_VALUES['10'], null, FLEX_VALUES.AUTO]
  }, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(Flex, {
    flex: [FLEX_VALUES.INITIAL, FLEX_VALUES['2'], null, FLEX_VALUES.AUTO]
  }, /*#__PURE__*/React.createElement(Box, indigoBoxStyle, "Flex child")))));
};
ResponsiveProps.parameters = {
  chromatic: {
    viewports: [680, 900, 1100, 1500]
  }
};
export var Default = generateChromaticStory(FlexStories);

var _FlexStories$default = FlexStories.default,
    includeStories = _FlexStories$default.includeStories,
    meta = _objectWithoutProperties(_FlexStories$default, ["includeStories"]);

export default meta;