import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import * as BoxStories from './Box.stories.mdx';
import Box, { COLOR } from './Box';
import { generateChromaticStory, responsivePropsStoryLabel } from '../../chromatic/utils';
export var ResponsiveProps = function ResponsiveProps(args) {
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('shadow', [true, false, null, true])), /*#__PURE__*/React.createElement(Box, _extends({
    shadow: [true, false, null, true]
  }, args), "box"), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('noBorderRadius', [false, true, null, false])), /*#__PURE__*/React.createElement(Box, _extends({
    noBorderRadius: [false, true, null, false]
  }, args), "box"), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('border', [false, true, null, false])), /*#__PURE__*/React.createElement(Box, _extends({
    border: [false, true, null, false]
  }, args, {
    borderColor: COLOR['indigo-40']
  }), "box"), /*#__PURE__*/React.createElement("h3", {
    className: "component__story-name"
  }, responsivePropsStoryLabel('padding', ['xs', null, 'm', 'xl'])), /*#__PURE__*/React.createElement(Box, _extends({
    padding: ['xs', null, 'm', 'xl']
  }, args), "box"));
};
ResponsiveProps.parameters = {
  chromatic: {
    viewports: [680, 900, 1100, 1500]
  }
};
export var Default = generateChromaticStory(BoxStories);

var _BoxStories$default = BoxStories.default,
    includeStories = _BoxStories$default.includeStories,
    meta = _objectWithoutProperties(_BoxStories$default, ["includeStories"]);

export default meta;