import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { Flex, Box } from '../../index';
import { Heading3 } from '../typography';
export default {
  component: Flex,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Flex')
};

var MintBox = function MintBox(_ref) {
  var size = _ref.size;
  return /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "mint",
    backgroundTint: "lightest",
    borderColor: "mint",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      minHeight: "".concat(size / 2, "px"),
      width: "".concat(size, "px")
    }
  });
};

export var basic = function basic(args) {
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading3, null, "Flex Box"), /*#__PURE__*/React.createElement(Box, {
    borderColor: "neutral",
    borderWidth: 1,
    borderRadius: "rounded",
    backgroundColor: "neutral",
    backgroundTint: "light"
  }, /*#__PURE__*/React.createElement(Flex, args, /*#__PURE__*/React.createElement(MintBox, {
    size: 50
  }), /*#__PURE__*/React.createElement(MintBox, {
    size: 150
  }), /*#__PURE__*/React.createElement(MintBox, {
    size: 100
  }))));
};
basic.args = {
  direction: 'row',
  gap: 0
};
export var nesting = function nesting() {
  return /*#__PURE__*/React.createElement(Box, {
    borderColor: "neutral",
    borderWidth: 1,
    borderRadius: "rounded",
    backgroundColor: "neutral",
    backgroundTint: "light"
  }, /*#__PURE__*/React.createElement(Flex, {
    gap: 5,
    direction: "column"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "mint",
    backgroundTint: "lightest",
    borderColor: "mint",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      minHeight: '50px',
      width: '100%'
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    gap: 5,
    alignItems: "flex-start"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "teal",
    backgroundTint: "lightest",
    borderColor: "teal",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      minHeight: '100px',
      width: '20%'
    }
  }), /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "teal",
    backgroundTint: "lightest",
    borderColor: "teal",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      minHeight: '150px',
      width: '80%'
    }
  })), /*#__PURE__*/React.createElement(Flex, {
    gap: 5,
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "ruby",
    backgroundTint: "lightest",
    borderColor: "ruby",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      minHeight: '100px',
      width: '50%'
    }
  }), /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "ruby",
    backgroundTint: "lightest",
    borderColor: "ruby",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      minHeight: '150px',
      width: '30%'
    }
  }))));
};