@pubsweet/ui-toolkit/dist/media.js

Helper functions and reusable blocks for use with @pubsweet/ui

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _styledComponents = require("styled-components");

var _themeHelper = require("./themeHelper");

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n    @media (min-width: ", "px) {\n      ", ";\n    }\n  "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var sizes = {
  mobileUp: (0, _themeHelper.th)('breakpoints.0'),
  tabletPortraitUp: (0, _themeHelper.th)('breakpoints.1'),
  tabletLandscapeUp: (0, _themeHelper.th)('breakpoints.2'),
  desktopUp: (0, _themeHelper.th)('breakpoints.3')
};
var media = Object.keys(sizes).reduce(function (acc, label) {
  acc[label] = function () {
    return (0, _styledComponents.css)(_templateObject(), sizes[label], _styledComponents.css.apply(void 0, arguments));
  };

  return acc;
}, {});

var _default = (0, _styledComponents.withTheme)(media);

exports["default"] = _default;