"use strict";

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

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

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

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

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

var _Avatar = _interopRequireDefault(require("./Avatar"));

var _AvatarStack = _interopRequireDefault(require("./AvatarStack"));

var _avatar = _interopRequireDefault(require("../../static/data/avatar"));

var _excluded = ["inverse"];
var _default = {
  component: _AvatarStack.default,
  title: 'AvatarStack'
};
exports.default = _default;

var Wrapper = function Wrapper(_ref) {
  var _ref$inverse = _ref.inverse,
      inverse = _ref$inverse === void 0 ? false : _ref$inverse,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    style: {
      padding: '6px',
      marginBottom: '24px',
      backgroundColor: inverse ? 'grey' : 'transparent'
    }
  }, props));
};

var Main = function Main() {
  return /*#__PURE__*/_react.default.createElement("div", null, ['tiny', 'small', 'medium', 'large', 'hero'].map(function (size) {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: size
    }, /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_AvatarStack.default, {
      size: size
    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[0].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[2].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[3].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[4].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[5].image
    }))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_AvatarStack.default, {
      size: size,
      displayMax: 4
    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[0].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[2].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[3].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[4].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[5].image
    }))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_AvatarStack.default, {
      size: size,
      displayMax: 4,
      selectable: true
    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[0].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[2].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[3].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[4].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[5].image
    }))), /*#__PURE__*/_react.default.createElement(Wrapper, {
      inverse: true
    }, /*#__PURE__*/_react.default.createElement(_AvatarStack.default, {
      size: size,
      displayMax: 4,
      inverse: true
    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[0].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[2].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[3].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[4].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[5].image
    }))), /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_AvatarStack.default, {
      size: size,
      direction: "vertical"
    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[0].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[2].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[3].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[4].image
    }), /*#__PURE__*/_react.default.createElement(_Avatar.default, {
      imageUrl: _avatar.default[5].image
    }))));
  }));
};

exports.Main = Main;