import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { Grid, Box } from '../../index';
import { Heading3 } from '../typography';
import GridItem from './GridItem';
export default {
  component: Grid,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Grid')
};
export var basic = function basic(args) {
  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Heading3, null, "Grid Box"), /*#__PURE__*/React.createElement(Box, {
    borderColor: "neutral",
    borderWidth: 1,
    borderRadius: "rounded",
    backgroundColor: "neutral",
    backgroundTint: "light"
  }, /*#__PURE__*/React.createElement(Grid, args, /*#__PURE__*/React.createElement(GridItem, {
    area: "header"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "mint",
    backgroundTint: "lightest",
    borderColor: "mint",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '100%'
    }
  })), /*#__PURE__*/React.createElement(GridItem, {
    area: "sidebar"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "teal",
    backgroundTint: "lightest",
    borderColor: "teal",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '200px'
    }
  })), /*#__PURE__*/React.createElement(GridItem, {
    area: "content"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "gold",
    backgroundTint: "lightest",
    borderColor: "gold",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '100%'
    }
  })), /*#__PURE__*/React.createElement(GridItem, {
    area: "footer"
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "ruby",
    backgroundTint: "lightest",
    borderColor: "ruby",
    borderTint: "light",
    borderWidth: 1,
    borderRadius: "rounded",
    style: {
      height: '100%'
    }
  })))));
};
basic.args = {
  areas: ['header header', 'sidebar content', 'footer footer'],
  rows: ['100px', '1fr', '50px'],
  columns: ['20%', '1fr'],
  gap: 0,
  columnGap: 0,
  rowGap: 0
};