"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithSizeKey = exports.BasicUsage = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Atoms / Media',
  parameters: {
    component: _.Media
  }
};
var BasicUsage = exports.BasicUsage = {
  render: function render() {
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Media, {
      query: function query(t) {
        return t.media.lessThan(t.breakpoints.md);
      }
    }, "I am only shown on screens smaller than medium size"), _react.default.createElement(_.Media, {
      query: function query(t) {
        return t.media.between(t.breakpoints.md, t.breakpoints.lg);
      }
    }, "I am only shown between medium and large sizes"), _react.default.createElement(_.Media, {
      query: function query(t) {
        return t.media.greaterThan(t.breakpoints.lg);
      }
    }, "I am only shown on screens bigger than large size"));
  },
  name: 'Basic usage'
};
var WithSizeKey = exports.WithSizeKey = {
  render: function render() {
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Media, {
      query: function query(t) {
        return t.media.lessThan(t.breakpoints.md.size);
      }
    }, "I am only shown on screens smaller than medium size"), _react.default.createElement(_.Media, {
      query: function query(t) {
        return t.media.between(t.breakpoints.md.size, t.breakpoints.lg.size);
      }
    }, "I am only shown between medium and large sizes"), _react.default.createElement(_.Media, {
      query: function query(t) {
        return t.media.greaterThan(t.breakpoints.lg.size);
      }
    }, "I am only shown on screens bigger than large size"));
  },
  name: 'With size key'
};