import _extends from "@babel/runtime/helpers/extends";
import * as Illustrations from '@teamleader/ui-illustrations';
import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import Box from '../box';
import { TextSmall } from '../typography';
import description from './description.md';
var gridStyles = {
  display: 'flex',
  flexWrap: 'wrap'
};
var itemProps = {
  alignItems: 'center',
  display: 'inline-flex',
  marginBottom: 3,
  marginRight: 3
};
var itemStyles = {
  width: '480px',
  whiteSpace: 'nowrap'
};
export default {
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Illustration'),
  parameters: {
    docs: {
      description: {
        component: description
      }
    }
  }
};
export var _24X24 = function _24X24() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('24X24');
  }).map(function (key) {
    var Illustration = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 24px"
    }, /*#__PURE__*/React.createElement(Illustration, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_24X24.storyName = '24x24';
export var _36X24 = function _36X24() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('36X24');
  }).map(function (key) {
    var Illustration = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 36px"
    }, /*#__PURE__*/React.createElement(Illustration, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_36X24.storyName = '36x24';
export var _48X48 = function _48X48() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('48X48');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 48px"
    }, /*#__PURE__*/React.createElement(IllustrationToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_48X48.storyName = '48x48';
export var _60X60 = function _60X60() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('60X60');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 60px"
    }, /*#__PURE__*/React.createElement(IllustrationToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_60X60.storyName = '60x60';
export var _84X84 = function _84X84() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('84X84');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 84px"
    }, /*#__PURE__*/React.createElement(IllustrationToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_84X84.storyName = '84x84';
export var _90X90 = function _90X90() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('90X90');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 90px"
    }, /*#__PURE__*/React.createElement(IllustrationToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_90X90.storyName = '90x90';
export var _120X120 = function _120X120() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('120X120');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 120px"
    }, /*#__PURE__*/React.createElement(IllustrationToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_120X120.storyName = '120x120';
export var _240X240 = function _240X240() {
  return /*#__PURE__*/React.createElement(Box, {
    style: gridStyles
  }, Object.keys(Illustrations).filter(function (key) {
    return key.includes('240X240');
  }).map(function (key) {
    var IllustrationToRender = Illustrations[key];
    return /*#__PURE__*/React.createElement(Box, _extends({
      key: key,
      style: itemStyles
    }, itemProps), /*#__PURE__*/React.createElement(Box, {
      flex: "0 0 240px"
    }, /*#__PURE__*/React.createElement(IllustrationToRender, null)), /*#__PURE__*/React.createElement(TextSmall, {
      marginLeft: 3
    }, key));
  }));
};
_240X240.storyName = '240x240';