import React from 'react';
import { Box } from '../box/index.js';
import * as illustrations from '../illustrations/index.js';
import Label from '../label/index.js';
import Illustration from './illustration.js';
const illustrationVariants = Object.keys(illustrations);
export default {
  title: 'DesignSystem/Atoms/Illustration',
  argTypes: {
    variant: {
      defaultValue: illustrationVariants[0],
      options: illustrationVariants,
      control: {
        type: 'select'
      }
    },
    width: {
      defaultValue: 150,
      control: {
        type: 'number'
      }
    },
    height: {
      defaultValue: 150,
      control: {
        type: 'number'
      }
    }
  }
};
export const Default = props => /*#__PURE__*/React.createElement(Illustration, props);
export const Icons = () => /*#__PURE__*/React.createElement(Box, {
  display: "grid",
  style: {
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 16
  }
}, illustrationVariants.map(key => /*#__PURE__*/React.createElement(Box, {
  key: key,
  flex: true,
  alignItems: "center",
  flexDirection: "column"
}, /*#__PURE__*/React.createElement(Label, null, key), /*#__PURE__*/React.createElement(Illustration, {
  variant: key,
  width: 150,
  height: 150
}))));