"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _react = _interopRequireDefault(require("react"));

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

var _index = require("../../index");

var _typography = require("../typography");

var _default = {
  component: _index.Flex,
  title: (0, _utils.addStoryInGroup)(_utils.LOW_LEVEL_BLOCKS, 'Flex')
};
exports.default = _default;

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

var basic = function basic(args) {
  return /*#__PURE__*/_react.default.createElement(_index.Box, null, /*#__PURE__*/_react.default.createElement(_typography.Heading3, null, "Flex Box"), /*#__PURE__*/_react.default.createElement(_index.Box, {
    borderColor: "neutral",
    borderWidth: 1,
    borderRadius: "rounded",
    backgroundColor: "neutral",
    backgroundTint: "light"
  }, /*#__PURE__*/_react.default.createElement(_index.Flex, args, /*#__PURE__*/_react.default.createElement(MintBox, {
    size: 50
  }), /*#__PURE__*/_react.default.createElement(MintBox, {
    size: 150
  }), /*#__PURE__*/_react.default.createElement(MintBox, {
    size: 100
  }))));
};

exports.basic = basic;
basic.args = {
  direction: 'row',
  gap: 0
};

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

exports.nesting = nesting;