"use strict";

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

var _react = require("@storybook/react");

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

var _ = require(".");

var _Box = require("../Box");

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('PseudoBox', module);
stories.addDecorator(function (story) {
  return __jsx(_Box.Box, {
    maxWidth: "md",
    mt: "40px",
    mx: "auto"
  }, story());
});
stories.add('Button', function () {
  return __jsx(_.PseudoBox, {
    as: "button",
    py: 2,
    px: 4,
    userSelect: "none",
    rounded: "md",
    transition: "all 0.2s",
    color: "white",
    bg: "green.400",
    fontWeight: "semibold",
    _hover: {
      bg: 'green.500'
    },
    _active: {
      bg: 'green.600'
    },
    _focus: {
      boxShadow: 'outline'
    },
    _disabled: {
      opacity: '40%'
    }
  }, "Button");
});
stories.add('Input', function () {
  var isDisabled = true;
  return __jsx(_.PseudoBox, {
    as: "input",
    type: "email",
    disabled: isDisabled,
    "aria-disabled": isDisabled,
    placeholder: "sage@adebayosegun.com",
    border: "1px",
    py: "spacing-sm",
    px: "spacing",
    width: "full",
    rounded: "lg",
    transition: "all 0.2s",
    bg: "white",
    borderColor: "gray.200",
    _placeholder: {
      color: 'red.500'
    },
    _hover: {
      borderColor: 'gray.300'
    },
    _focus: {
      boxShadow: 'outline',
      borderColor: 'blue.500'
    },
    _disabled: {
      opacity: '40%',
      bg: 'gray.100'
    }
  });
});
//# sourceMappingURL=examples.js.map