"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ResponsiveProps = exports.Default = void 0;

var React = _interopRequireWildcard(require("react"));

var FlexStories = _interopRequireWildcard(require("./Flex.stories.mdx"));

var _Flex = _interopRequireWildcard(require("./Flex"));

var _Box = _interopRequireWildcard(require("../box/Box"));

var _utils = require("../../chromatic/utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var indigoBoxStyle = {
  border: true,
  borderColor: _Box.COLOR['indigo-40'],
  color: _Box.COLOR['indigo-20']
};

var ResponsiveProps = function ResponsiveProps(args) {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('direction', [_Flex.DIRECTION.COLUMN, _Flex.DIRECTION.COLUMN_REVERSE, null, _Flex.DIRECTION.ROW])), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    direction: [_Flex.DIRECTION.COLUMN, _Flex.DIRECTION.COLUMN_REVERSE, null, _Flex.DIRECTION.ROW]
  }, args), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1"), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 2")), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.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.default, {
    inlineFlex: [true, false, null, true]
  }, /*#__PURE__*/React.createElement(_Box.default, 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"
  }, (0, _utils.responsivePropsStoryLabel)('justifyContent', [_Flex.JUSTIFY_VALUES.END, _Flex.JUSTIFY_VALUES.START, null, _Flex.JUSTIFY_VALUES.SPACE_BETWEEN])), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    justifyContent: [_Flex.JUSTIFY_VALUES.END, _Flex.JUSTIFY_VALUES.START, null, _Flex.JUSTIFY_VALUES.SPACE_BETWEEN]
  }, args), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      width: 100
    }
  }), "Flex child"), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      width: 100
    }
  }), "Flex child")), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('alignItems', [_Flex.ALIGNMENT_VALUES.CENTER, _Flex.ALIGNMENT_VALUES.END, null, _Flex.ALIGNMENT_VALUES.START])), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    alignItems: [_Flex.ALIGNMENT_VALUES.CENTER, _Flex.ALIGNMENT_VALUES.END, null, _Flex.ALIGNMENT_VALUES.START]
  }, args), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      height: 80
    }
  }), "Flex child"), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      height: 120
    }
  }), "Flex child")), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('margin', [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Flex.default, _extends({
    margin: [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('marginTop', [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    direction: "column"
  }, args), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    marginTop: [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('marginLeft', [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    marginLeft: [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('marginBottom', [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    direction: "column"
  }, args), /*#__PURE__*/React.createElement(_Flex.default, _extends({
    marginBottom: [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 2"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('marginRight', [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE])), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Flex.default, _extends({
    marginRight: [_Flex.MARGINS.XSMALL, _Flex.MARGINS.XXLARGE, null, _Flex.MARGINS.XXXXLARGE]
  }, args), /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 1")), /*#__PURE__*/React.createElement(_Flex.default, args, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child 2"))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('alignContent', [_Flex.ALIGNMENT_VALUES.CENTER, _Flex.ALIGNMENT_VALUES.END, _Flex.ALIGNMENT_VALUES.START, _Flex.ALIGNMENT_VALUES.STRETCH])), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      height: 400,
      width: 400
    }
  }), /*#__PURE__*/React.createElement(_Flex.default, {
    alignContent: [_Flex.ALIGNMENT_VALUES.CENTER, _Flex.ALIGNMENT_VALUES.END, _Flex.ALIGNMENT_VALUES.START, _Flex.ALIGNMENT_VALUES.STRETCH],
    wrap: true,
    fullHeight: true
  }, /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('gap', [_Flex.GAP_VALUES.SMALL, null, _Flex.GAP_VALUES.MEDIUM, _Flex.GAP_VALUES.XLARGE])), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      height: 400,
      width: 400
    }
  }), /*#__PURE__*/React.createElement(_Flex.default, {
    gap: [_Flex.GAP_VALUES.SMALL, null, _Flex.GAP_VALUES.MEDIUM, _Flex.GAP_VALUES.XLARGE],
    wrap: true,
    fullHeight: true
  }, /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(_Flex.default, null, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")))), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, (0, _utils.responsivePropsStoryLabel)('FLEX', [_Flex.FLEX_VALUES.INITIAL, null, _Flex.FLEX_VALUES.AUTO, _Flex.FLEX_VALUES['10']])), /*#__PURE__*/React.createElement(_Box.default, _extends({}, indigoBoxStyle, {
    style: {
      height: 400,
      width: 400
    }
  }), /*#__PURE__*/React.createElement(_Flex.default, {
    wrap: true,
    fullHeight: true
  }, /*#__PURE__*/React.createElement(_Flex.default, {
    flex: [_Flex.FLEX_VALUES.INITIAL, _Flex.FLEX_VALUES['10'], null, _Flex.FLEX_VALUES.AUTO]
  }, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")), /*#__PURE__*/React.createElement(_Flex.default, {
    flex: [_Flex.FLEX_VALUES.INITIAL, _Flex.FLEX_VALUES['2'], null, _Flex.FLEX_VALUES.AUTO]
  }, /*#__PURE__*/React.createElement(_Box.default, indigoBoxStyle, "Flex child")))));
};

exports.ResponsiveProps = ResponsiveProps;
ResponsiveProps.parameters = {
  chromatic: {
    viewports: [680, 900, 1100, 1500]
  }
};
var Default = (0, _utils.generateChromaticStory)(FlexStories);
exports.Default = Default;

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

var _default = meta;
exports.default = _default;