'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); exports.keys = undefined; var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); exports.default = createBreakpoints; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } // Sorted ASC by size. That's important. // It can't be configured as it's used statically for propTypes. var keys = exports.keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification. function createBreakpoints(breakpoints) { var _breakpoints$values = breakpoints.values, values = _breakpoints$values === undefined ? { xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920 } : _breakpoints$values, _breakpoints$unit = breakpoints.unit, unit = _breakpoints$unit === undefined ? 'px' : _breakpoints$unit, _breakpoints$step = breakpoints.step, step = _breakpoints$step === undefined ? 5 : _breakpoints$step, other = (0, _objectWithoutProperties3.default)(breakpoints, ['values', 'unit', 'step']); function up(key) { var value = typeof values[key] === 'number' ? values[key] : key; return '@media (min-width:' + value + unit + ')'; } function down(key) { var endIndex = keys.indexOf(key) + 1; var upperbound = values[keys[endIndex]]; if (endIndex === keys.length) { // xl down applies to all sizes return up('xs'); } var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key; return '@media (max-width:' + (value - step / 100) + unit + ')'; } function between(start, end) { var endIndex = keys.indexOf(end) + 1; if (endIndex === keys.length) { return up(start); } return '@media (min-width:' + values[start] + unit + ') and ' + ('(max-width:' + (values[keys[endIndex]] - step / 100) + unit + ')'); } function only(key) { return between(key, key); } function width(key) { return values[key]; } return (0, _extends3.default)({ keys: keys, values: values, up: up, down: down, between: between, only: only, width: width }, other); }