atomic-layout - npm Package Compare versions

Comparing version 0.9.4 to 0.9.5

2052

esm/index.js

		import styled from 'styled-components';
		import { useMemo, useState, useEffect, createElement } from 'react';

		const defaultOptions = {
		defaultUnit: 'px',
		defaultBehavior: 'up',
		defaultBreakpointName: 'xs',
		breakpoints: {
		xs: {
		maxWidth: '575px',
		},
		sm: {
		minWidth: '576px',
		maxWidth: '767px',
		},
		md: {
		minWidth: '768px',
		maxWidth: '991px',
		},
		lg: {
		minWidth: '992px',
		maxWidth: '1199px',
		},
		xl: {
		minWidth: '1200px',
		},
		function _typeof(obj) {
		if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
		_typeof = function (obj) {
		return typeof obj;
		};
		} else {
		_typeof = function (obj) {
		return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
		};
		}

		return _typeof(obj);
		}

		function _classCallCheck(instance, Constructor) {
		if (!(instance instanceof Constructor)) {
		throw new TypeError("Cannot call a class as a function");
		}
		}

		function _defineProperties(target, props) {
		for (var i = 0; i < props.length; i++) {
		var descriptor = props[i];
		descriptor.enumerable = descriptor.enumerable \|\| false;
		descriptor.configurable = true;
		if ("value" in descriptor) descriptor.writable = true;
		Object.defineProperty(target, descriptor.key, descriptor);
		}
		}

		function _createClass(Constructor, protoProps, staticProps) {
		if (protoProps) _defineProperties(Constructor.prototype, protoProps);
		if (staticProps) _defineProperties(Constructor, staticProps);
		return Constructor;
		}

		function _defineProperty(obj, key, value) {
		if (key in obj) {
		Object.defineProperty(obj, key, {
		value: value,
		enumerable: true,
		configurable: true,
		writable: true
		});
		} else {
		obj[key] = value;
		}

		return obj;
		}

		function ownKeys(object, enumerableOnly) {
		var keys = Object.keys(object);

		if (Object.getOwnPropertySymbols) {
		keys.push.apply(keys, Object.getOwnPropertySymbols(object));
		}

		if (enumerableOnly) keys = keys.filter(function (sym) {
		return Object.getOwnPropertyDescriptor(object, sym).enumerable;
		});
		return keys;
		}

		function _objectSpread2(target) {
		for (var i = 1; i < arguments.length; i++) {
		if (i % 2) {
		var source = arguments[i] != null ? arguments[i] : {};
		ownKeys(source, true).forEach(function (key) {
		_defineProperty(target, key, source[key]);
		});
		} else if (Object.getOwnPropertyDescriptors) {
		Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i]));
		} else {
		ownKeys(source).forEach(function (key) {
		Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(arguments[i], key));
		});
		}
		}

		return target;
		}

		function _objectWithoutPropertiesLoose(source, excluded) {
		if (source == null) return {};
		var target = {};
		var sourceKeys = Object.keys(source);
		var key, i;

		for (i = 0; i < sourceKeys.length; i++) {
		key = sourceKeys[i];
		if (excluded.indexOf(key) >= 0) continue;
		target[key] = source[key];
		}

		return target;
		}

		function _objectWithoutProperties(source, excluded) {
		if (source == null) return {};

		var target = _objectWithoutPropertiesLoose(source, excluded);

		var key, i;

		if (Object.getOwnPropertySymbols) {
		var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

		for (i = 0; i < sourceSymbolKeys.length; i++) {
		key = sourceSymbolKeys[i];
		if (excluded.indexOf(key) >= 0) continue;
		if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
		target[key] = source[key];
		}
		}

		return target;
		}

		function _taggedTemplateLiteral(strings, raw) {
		if (!raw) {
		raw = strings.slice(0);
		}

		return Object.freeze(Object.defineProperties(strings, {
		raw: {
		value: Object.freeze(raw)
		}
		}));
		}

		function _slicedToArray(arr, i) {
		return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest();
		}

		function _toArray(arr) {
		return _arrayWithHoles(arr) \|\| _iterableToArray(arr) \|\| _nonIterableRest();
		}

		function _toConsumableArray(arr) {
		return _arrayWithoutHoles(arr) \|\| _iterableToArray(arr) \|\| _nonIterableSpread();
		}

		function _arrayWithoutHoles(arr) {
		if (Array.isArray(arr)) {
		for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

		return arr2;
		}
		}

		function _arrayWithHoles(arr) {
		if (Array.isArray(arr)) return arr;
		}

		function _iterableToArray(iter) {
		if (Symbol.iterator in Object(iter) \|\| Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
		}

		function _iterableToArrayLimit(arr, i) {
		var _arr = [];
		var _n = true;
		var _d = false;
		var _e = undefined;

		try {
		for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
		_arr.push(_s.value);

		if (i && _arr.length === i) break;
		}
		} catch (err) {
		_d = true;
		_e = err;
		} finally {
		try {
		if (!_n && _i["return"] != null) _i["return"]();
		} finally {
		if (_d) throw _e;
		}
		}

		return _arr;
		}

		function _nonIterableSpread() {
		throw new TypeError("Invalid attempt to spread non-iterable instance");
		}

		function _nonIterableRest() {
		throw new TypeError("Invalid attempt to destructure non-iterable instance");
		}

		var defaultOptions = {
		defaultUnit: 'px',
		defaultBehavior: 'up',
		defaultBreakpointName: 'xs',
		breakpoints: {
		xs: {
		maxWidth: '575px'
		},
		sm: {
		minWidth: '576px',
		maxWidth: '767px'
		},
		md: {
		minWidth: '768px',
		maxWidth: '991px'
		},
		lg: {
		minWidth: '992px',
		maxWidth: '1199px'
		},
		xl: {
		minWidth: '1200px'
		}
		}
		};

		function invariant(variable, message) {
		if (!variable) {
		throw new Error(message);
		}
		if (!variable) {
		throw new Error(message);
		}
		}

		function warn(predicate, message) {
		if (!predicate) {
		console.warn(message);
		}
		if (!predicate) {
		console.warn(message);
		}
		}

		class Layout {
		constructor(options) {
		this.defaultUnit = defaultOptions.defaultUnit;
		this.defaultBehavior = defaultOptions.defaultBehavior;
		this.breakpoints = defaultOptions.breakpoints;
		this.defaultBreakpointName = defaultOptions.defaultBreakpointName;
		this.isConfigureCalled = false;
		return options ? this.configure(options, false) : this;
		var Layout =
		/#__PURE__/
		function () {
		function Layout(options) {
		_classCallCheck(this, Layout);

		this.defaultUnit = defaultOptions.defaultUnit;
		this.defaultBehavior = defaultOptions.defaultBehavior;
		this.breakpoints = defaultOptions.breakpoints;
		this.defaultBreakpointName = defaultOptions.defaultBreakpointName;
		this.isConfigureCalled = false;
		return options ? this.configure(options, false) : this;
		}
		/**
		* Applies global layout options.
		*/


		_createClass(Layout, [{
		key: "configure",
		value: function configure(options) {
		var _this = this;

		var warnOnMultiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

		if (warnOnMultiple) {
		warn(!this.isConfigureCalled, 'Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application.');
		}

		invariant(options && _typeof(options) === 'object', "Failed to configure Layout: expected an options Object, but got: ".concat(options, "."));
		Object.keys(options \|\| {}).forEach(function (optionName) {
		_this[optionName] = options[optionName];
		});
		invariant(this.breakpoints, 'Failed to configure Layout: expected to have at least one breakpoint specified, but got none.');
		invariant(this.breakpoints.hasOwnProperty(this.defaultBreakpointName), "Failed to configure Layout: cannot use \"".concat(this.defaultBreakpointName, "\" as the default breakpoint (breakpoint not found)."));
		invariant(this.defaultBreakpointName, "Failed to configure Layout: expected \"defaultBreakpointName\" property set, but got: ".concat(this.defaultBreakpointName, ".")); // invariant(
		// typeof this.defaultBreakpointName === 'string',
		// `Failed to configure Layout: expected "defaultBreakpointName" to be a string, but got: ${typeof this
		// .defaultBreakpointName}`,
		// )
		// Mark configure method as called to prevent its multiple calls

		this.isConfigureCalled = warnOnMultiple;
		return this;
		}
		/**
		* Applies global layout options.
		*/
		configure(options, warnOnMultiple = true) {
		if (warnOnMultiple) {
		warn(!this.isConfigureCalled, 'Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application.');
		}
		invariant(options && typeof options === 'object', `Failed to configure Layout: expected an options Object, but got: ${options}.`);
		Object.keys(options \|\| {}).forEach((optionName) => {
		this[optionName] = options[optionName];
		});
		invariant(this.breakpoints, 'Failed to configure Layout: expected to have at least one breakpoint specified, but got none.');
		invariant(this.breakpoints.hasOwnProperty(this.defaultBreakpointName), `Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`);
		invariant(this.defaultBreakpointName, `Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`);
		// invariant(
		// typeof this.defaultBreakpointName === 'string',
		// `Failed to configure Layout: expected "defaultBreakpointName" to be a string, but got: ${typeof this
		// .defaultBreakpointName}`,
		// )
		// Mark configure method as called to prevent its multiple calls
		this.isConfigureCalled = warnOnMultiple;
		return this;
		}
		}
		}]);

		return Layout;
		}();

		var Layout$1 = new Layout();
		@@ -81,58 +291,82 @@
		*/
		function compose(...funcs) {
		return funcs.reduce((f, g) => (...args) => f(g(...args)));
		function compose() {
		for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
		funcs[_key] = arguments[_key];
		}

		return funcs.reduce(function (f, g) {
		return function () {
		return f(g.apply(void 0, arguments));
		};
		});
		}

		function isset(variable) {
		return typeof variable !== 'undefined' && variable !== null;
		return typeof variable !== 'undefined' && variable !== null;
		}

		function transformNumeric(value) {
		if (!isset(value)) {
		return '';
		}
		/**
		* Suffix numeric value with the default unit.
		* Accept explicit (string) value as-is.
		*
		* When given value is zero then its generated as it is, no suffix is attached
		*/
		const suffix = typeof value === 'number' && value !== 0 ? Layout$1.defaultUnit : '';
		return `${value}${suffix}`;
		if (!isset(value)) {
		return '';
		}
		/**
		* Suffix numeric value with the default unit.
		* Accept explicit (string) value as-is.
		*
		* When given value is zero then its generated as it is, no suffix is attached
		*/


		var suffix = typeof value === 'number' && value !== 0 ? Layout$1.defaultUnit : '';
		return "".concat(value).concat(suffix);
		}

		const keywords = ['/', 'auto'];
		// Determines if the given string is a valid area name.
		var keywords = ['/', 'auto']; // Determines if the given string is a valid area name.
		// Takes into account on the row/column dimensions and
		// keywords in the "grid-template" definition.

		function isAreaName(areaName) {
		const startsWithNumber = /^[0-9]/.test(areaName);
		const isKeyword = keywords.includes(areaName);
		return !startsWithNumber && !isKeyword;
		var startsWithNumber = /^[0-9]/.test(areaName);
		var isKeyword = keywords.includes(areaName);
		return !startsWithNumber && !isKeyword;
		}

		// Joins a given template string fragments into a valid template string.
		// Takes into account proper single quote wrapping around the areas
		// and no single quotes around the dimensions (row/columns).
		const joinTemplateFragments = (fragments) => {
		const areas = [];
		const suffixes = [];
		fragments.forEach((areaName) => {
		if (isAreaName(areaName)) {
		areas.push(areaName);
		}
		else {
		suffixes.push(areaName);
		}
		});
		const joinedAreas = areas.length > 0 ? `'${areas.join(' ')}'` : '';
		const joinedSuffixes = suffixes.join(' ');
		return [joinedAreas, joinedSuffixes].filter(Boolean).join(' ');
		};
		// Prepares given "grid-template-areas" string to be digestible.

		var joinTemplateFragments = function joinTemplateFragments(fragments) {
		var areas = [];
		var suffixes = [];
		fragments.forEach(function (areaName) {
		if (isAreaName(areaName)) {
		areas.push(areaName);
		} else {
		suffixes.push(areaName);
		}
		});
		var joinedAreas = areas.length > 0 ? "'".concat(areas.join(' '), "'") : '';
		var joinedSuffixes = suffixes.join(' ');
		return [joinedAreas, joinedSuffixes].filter(Boolean).join(' ');
		}; // Prepares given "grid-template-areas" string to be digestible.
		// Trims whitespace, deduplicates single quotes and wraps
		// each line in single quotes.
		const sanitizeTemplateArea = compose(joinTemplateFragments, (area) => area.split(' '), (area) => area.replace(/'+/gm, ''), (area) => area.trim());

		const transformTemplateString = compose((areas) => areas.join('\n'), (areas) => areas.map(sanitizeTemplateArea), (template) => template.split('\n'), (template) => template.trim());

		var sanitizeTemplateArea = compose(joinTemplateFragments, function (area) {
		return area.split(' ');
		}, function (area) {
		return area.replace(/'+/gm, '');
		}, function (area) {
		return area.trim();
		});

		var transformTemplateString = compose(function (areas) {
		return areas.join('\n');
		}, function (areas) {
		return areas.map(sanitizeTemplateArea);
		}, function (template) {
		return template.split('\n');
		}, function (template) {
		return template.trim();
		});
		/**
		@@ -144,197 +378,201 @@ * Collection of prop aliases.
		*/
		const propAliases = {
		/* CSS Grid */
		area: {
		props: ['grid-area'],
		},
		areas: {
		props: ['grid-template-areas'],
		transformValue: transformTemplateString,
		},
		template: {
		props: ['grid-template'],
		transformValue: transformTemplateString,
		},
		templateCols: {
		props: ['grid-template-columns'],
		},
		templateRows: {
		props: ['grid-template-rows'],
		},
		col: {
		props: ['grid-column'],
		},
		colStart: {
		props: ['grid-column-start'],
		},
		colEnd: {
		props: ['grid-column-end'],
		},
		row: {
		props: ['grid-row'],
		},
		rowStart: {
		props: ['grid-row-start'],
		},
		rowEnd: {
		props: ['grid-row-end'],
		},
		gap: {
		props: ['grid-gap'],
		transformValue: transformNumeric,
		},
		gapCol: {
		props: ['grid-column-gap'],
		transformValue: transformNumeric,
		},
		gapRow: {
		props: ['grid-row-gap'],
		transformValue: transformNumeric,
		},
		gutter: {
		props: ['grid-gap'],
		transformValue: transformNumeric,
		},
		gutterCol: {
		props: ['grid-column-gap'],
		transformValue: transformNumeric,
		},
		gutterRow: {
		props: ['grid-row-gap'],
		transformValue: transformNumeric,
		},
		autoRows: {
		props: ['grid-auto-rows'],
		transformValue: transformNumeric,
		},
		autoCols: {
		props: ['grid-auto-columns'],
		transformValue: transformNumeric,
		},
		autoFlow: {
		props: ['grid-auto-flow'],
		},
		align: {
		props: ['align-self'],
		},
		alignItems: {
		props: ['align-items'],
		},
		justify: {
		props: ['justify-self'],
		},
		justifyItems: {
		props: ['justify-items'],
		},
		justifyContent: {
		props: ['justify-content'],
		},
		place: {
		props: ['place-self'],
		},
		placeItems: {
		props: ['place-items'],
		},
		placeContent: {
		props: ['place-content'],
		},
		/* CSS Flexbox */
		flexDirection: {
		props: ['flex-direction'],
		},
		flexShrink: {
		props: ['flex-shrink'],
		},
		flexGrow: {
		props: ['flex-grow'],
		},
		flexWrap: {
		props: ['flex-wrap'],
		},
		/* Dimensions */
		height: {
		props: ['height'],
		transformValue: transformNumeric,
		},
		minHeight: {
		props: ['min-height'],
		transformValue: transformNumeric,
		},
		maxHeight: {
		props: ['max-height'],
		transformValue: transformNumeric,
		},
		width: {
		props: ['width'],
		transformValue: transformNumeric,
		},
		minWidth: {
		props: ['min-width'],
		transformValue: transformNumeric,
		},
		maxWidth: {
		props: ['max-width'],
		transformValue: transformNumeric,
		},
		/* Space */
		margin: {
		props: ['margin'],
		transformValue: transformNumeric,
		},
		marginTop: {
		props: ['margin-top'],
		transformValue: transformNumeric,
		},
		marginRight: {
		props: ['margin-right'],
		transformValue: transformNumeric,
		},
		marginBottom: {
		props: ['margin-bottom'],
		transformValue: transformNumeric,
		},
		marginLeft: {
		props: ['margin-left'],
		transformValue: transformNumeric,
		},
		marginVertical: {
		props: ['margin-top', 'margin-bottom'],
		transformValue: transformNumeric,
		},
		marginHorizontal: {
		props: ['margin-right', 'margin-left'],
		transformValue: transformNumeric,
		},
		padding: {
		props: ['padding'],
		transformValue: transformNumeric,
		},
		paddingTop: {
		props: ['padding-top'],
		transformValue: transformNumeric,
		},
		paddingRight: {
		props: ['padding-right'],
		transformValue: transformNumeric,
		},
		paddingBottom: {
		props: ['padding-bottom'],
		transformValue: transformNumeric,
		},
		paddingLeft: {
		props: ['padding-left'],
		transformValue: transformNumeric,
		},
		paddingVertical: {
		props: ['padding-top', 'padding-bottom'],
		transformValue: transformNumeric,
		},
		paddingHorizontal: {
		props: ['padding-right', 'padding-left'],
		transformValue: transformNumeric,
		},

		var propAliases = {
		/* CSS Grid */
		area: {
		props: ['grid-area']
		},
		areas: {
		props: ['grid-template-areas'],
		transformValue: transformTemplateString
		},
		template: {
		props: ['grid-template'],
		transformValue: transformTemplateString
		},
		templateCols: {
		props: ['grid-template-columns']
		},
		templateRows: {
		props: ['grid-template-rows']
		},
		col: {
		props: ['grid-column']
		},
		colStart: {
		props: ['grid-column-start']
		},
		colEnd: {
		props: ['grid-column-end']
		},
		row: {
		props: ['grid-row']
		},
		rowStart: {
		props: ['grid-row-start']
		},
		rowEnd: {
		props: ['grid-row-end']
		},
		gap: {
		props: ['grid-gap'],
		transformValue: transformNumeric
		},
		gapCol: {
		props: ['grid-column-gap'],
		transformValue: transformNumeric
		},
		gapRow: {
		props: ['grid-row-gap'],
		transformValue: transformNumeric
		},
		gutter: {
		props: ['grid-gap'],
		transformValue: transformNumeric
		},
		gutterCol: {
		props: ['grid-column-gap'],
		transformValue: transformNumeric
		},
		gutterRow: {
		props: ['grid-row-gap'],
		transformValue: transformNumeric
		},
		autoRows: {
		props: ['grid-auto-rows'],
		transformValue: transformNumeric
		},
		autoCols: {
		props: ['grid-auto-columns'],
		transformValue: transformNumeric
		},
		autoFlow: {
		props: ['grid-auto-flow']
		},
		align: {
		props: ['align-self']
		},
		alignItems: {
		props: ['align-items']
		},
		justify: {
		props: ['justify-self']
		},
		justifyItems: {
		props: ['justify-items']
		},
		justifyContent: {
		props: ['justify-content']
		},
		place: {
		props: ['place-self']
		},
		placeItems: {
		props: ['place-items']
		},
		placeContent: {
		props: ['place-content']
		},

		/* CSS Flexbox */
		flexDirection: {
		props: ['flex-direction']
		},
		flexShrink: {
		props: ['flex-shrink']
		},
		flexGrow: {
		props: ['flex-grow']
		},
		flexWrap: {
		props: ['flex-wrap']
		},

		/* Dimensions */
		height: {
		props: ['height'],
		transformValue: transformNumeric
		},
		minHeight: {
		props: ['min-height'],
		transformValue: transformNumeric
		},
		maxHeight: {
		props: ['max-height'],
		transformValue: transformNumeric
		},
		width: {
		props: ['width'],
		transformValue: transformNumeric
		},
		minWidth: {
		props: ['min-width'],
		transformValue: transformNumeric
		},
		maxWidth: {
		props: ['max-width'],
		transformValue: transformNumeric
		},

		/* Space */
		margin: {
		props: ['margin'],
		transformValue: transformNumeric
		},
		marginTop: {
		props: ['margin-top'],
		transformValue: transformNumeric
		},
		marginRight: {
		props: ['margin-right'],
		transformValue: transformNumeric
		},
		marginBottom: {
		props: ['margin-bottom'],
		transformValue: transformNumeric
		},
		marginLeft: {
		props: ['margin-left'],
		transformValue: transformNumeric
		},
		marginVertical: {
		props: ['margin-top', 'margin-bottom'],
		transformValue: transformNumeric
		},
		marginHorizontal: {
		props: ['margin-right', 'margin-left'],
		transformValue: transformNumeric
		},
		padding: {
		props: ['padding'],
		transformValue: transformNumeric
		},
		paddingTop: {
		props: ['padding-top'],
		transformValue: transformNumeric
		},
		paddingRight: {
		props: ['padding-right'],
		transformValue: transformNumeric
		},
		paddingBottom: {
		props: ['padding-bottom'],
		transformValue: transformNumeric
		},
		paddingLeft: {
		props: ['padding-left'],
		transformValue: transformNumeric
		},
		paddingVertical: {
		props: ['padding-top', 'padding-bottom'],
		transformValue: transformNumeric
		},
		paddingHorizontal: {
		props: ['padding-right', 'padding-left'],
		transformValue: transformNumeric
		}
		};

		function toLowerCaseFirst(str) {
		return (str.slice(0, 1).toLowerCase() + str.slice(1, str.length));
		return str.slice(0, 1).toLowerCase() + str.slice(1, str.length);
		}
		@@ -350,37 +588,31 @@
		*/

		function parsePropName(originPropName) {
		const joinedBreakpointNames = Object.keys(Layout$1.breakpoints).join('\|');
		const joinedBehaviors = ['down', 'only'].join('\|');
		const breakpointExp = new RegExp(`(${joinedBreakpointNames})$`, 'gi');
		const behaviorExp = new RegExp(`(${joinedBehaviors})$`, 'gi');
		const behaviorMatch = originPropName.match(behaviorExp);
		const behavior = behaviorMatch ? behaviorMatch[0] : '';
		const breakpointMatch = originPropName
		.replace(behavior, '')
		.match(breakpointExp);
		const breakpointName = breakpointMatch ? breakpointMatch[0] : '';
		const purePropName = originPropName
		.replace(breakpointName, '')
		.replace(behavior, '');
		/**
		* Get normalized breakpoint name.
		* When a breakpoint name is a part of the prop name, covert it first letter
		* to lowercase to match the layout options. Otherwise, take the default
		* breakpoint name.
		*/
		const normalizedBreakpointName = breakpointName
		? toLowerCaseFirst(breakpointName)
		: Layout$1.defaultBreakpointName;
		const isDefaultBreakpoint = normalizedBreakpointName === Layout$1.defaultBreakpointName;
		return {
		originPropName,
		purePropName,
		behavior: behavior
		? toLowerCaseFirst(behavior)
		: Layout$1.defaultBehavior,
		breakpoint: {
		name: normalizedBreakpointName,
		isDefault: isDefaultBreakpoint,
		},
		};
		var joinedBreakpointNames = Object.keys(Layout$1.breakpoints).join('\|');
		var joinedBehaviors = ['down', 'only'].join('\|');
		var breakpointExp = new RegExp("(".concat(joinedBreakpointNames, ")$"), 'gi');
		var behaviorExp = new RegExp("(".concat(joinedBehaviors, ")$"), 'gi');
		var behaviorMatch = originPropName.match(behaviorExp);
		var behavior = behaviorMatch ? behaviorMatch[0] : '';
		var breakpointMatch = originPropName.replace(behavior, '').match(breakpointExp);
		var breakpointName = breakpointMatch ? breakpointMatch[0] : '';
		var purePropName = originPropName.replace(breakpointName, '').replace(behavior, '');
		/**
		* Get normalized breakpoint name.
		* When a breakpoint name is a part of the prop name, covert it first letter
		* to lowercase to match the layout options. Otherwise, take the default
		* breakpoint name.
		*/

		var normalizedBreakpointName = breakpointName ? toLowerCaseFirst(breakpointName) : Layout$1.defaultBreakpointName;
		var isDefaultBreakpoint = normalizedBreakpointName === Layout$1.defaultBreakpointName;
		return {
		originPropName: originPropName,
		purePropName: purePropName,
		behavior: behavior ? toLowerCaseFirst(behavior) : Layout$1.defaultBehavior,
		breakpoint: {
		name: normalizedBreakpointName,
		isDefault: isDefaultBreakpoint
		}
		};
		}
		@@ -395,5 +627,5 @@
		function toDashedString(str) {
		return str.replace(/[A-Z]/g, (capitalLetter) => {
		return `-${capitalLetter}`.toLowerCase();
		});
		return str.replace(/[A-Z]/g, function (capitalLetter) {
		return "-".concat(capitalLetter).toLowerCase();
		});
		}
		@@ -407,9 +639,17 @@
		*/

		function normalizeQuery(queryProps) {
		return Object.entries(queryProps)
		.filter(([_, propValue]) => isset(propValue))
		.map(([propName, propValue]) => [
		toDashedString(propName),
		propValue,
		]);
		return Object.entries(queryProps).filter(function (_ref) {
		var _ref2 = _slicedToArray(_ref, 2),
		_ = _ref2[0],
		propValue = _ref2[1];

		return isset(propValue);
		}).map(function (_ref3) {
		var _ref4 = _slicedToArray(_ref3, 2),
		propName = _ref4[0],
		propValue = _ref4[1];

		return [toDashedString(propName), propValue];
		});
		}
		@@ -421,13 +661,27 @@
		*/
		const shouldAppendProperty = (queryParam, behavior) => {
		const [prefix, splitPropName] = queryParam.split('-');
		const isDimensionalProp = ['height', 'width'].includes(splitPropName);
		if (!isDimensionalProp) {
		return true;
		}
		return ((prefix === 'min' && ['up', 'only'].includes(behavior)) \|\|
		(prefix === 'max' && ['down', 'only'].includes(behavior)));

		var shouldAppendProperty = function shouldAppendProperty(queryParam, behavior) {
		var _queryParam$split = queryParam.split('-'),
		_queryParam$split2 = _slicedToArray(_queryParam$split, 2),
		prefix = _queryParam$split2[0],
		splitPropName = _queryParam$split2[1];

		var isDimensionalProp = ['height', 'width'].includes(splitPropName);

		if (!isDimensionalProp) {
		return true;
		}

		return prefix === 'min' && ['up', 'only'].includes(behavior) \|\| prefix === 'max' && ['down', 'only'].includes(behavior);
		};
		const filterRelevantQueryParams = (behavior) => (queryList) => {
		return queryList.filter(([queryParam]) => shouldAppendProperty(queryParam, behavior));

		var filterRelevantQueryParams = function filterRelevantQueryParams(behavior) {
		return function (queryList) {
		return queryList.filter(function (_ref) {
		var _ref2 = _slicedToArray(_ref, 1),
		queryParam = _ref2[0];

		return shouldAppendProperty(queryParam, behavior);
		});
		};
		};
		@@ -437,141 +691,189 @@ /**
		*/
		const joinQueryList = (transformer) => (queryList) => {


		var joinQueryList = function joinQueryList(transformer) {
		return function (queryList) {
		return queryList.map(transformer).join(' and ');
		};
		};
		function createMediaQuery(breakpoint, behavior) {
		return compose(joinQueryList(([dashedQueryProp, propValue]) => {
		return `(${dashedQueryProp}:${String(transformNumeric(propValue))})`;
		}), filterRelevantQueryParams(behavior), normalizeQuery)(breakpoint);
		return compose(joinQueryList(function (_ref3) {
		var _ref4 = _slicedToArray(_ref3, 2),
		dashedQueryProp = _ref4[0],
		propValue = _ref4[1];

		return "(".concat(dashedQueryProp, ":").concat(String(transformNumeric(propValue)), ")");
		}), filterRelevantQueryParams(behavior), normalizeQuery)(breakpoint);
		}

		const createStyleString = (propsList, propValue, breakpoint, behavior) => {
		const styleProps = propsList
		.map((propName) => `${propName}:${String(propValue)};`)
		.join('');
		const breakpointOptions = Layout$1.breakpoints[breakpoint.name];
		/**
		* Wrap CSS rule in a media query only if its prop includes
		* a breakpoint and behavior different than the default ones.
		*/
		const shouldWrapInMediaQuery = breakpointOptions &&
		!(breakpoint.isDefault && behavior === Layout$1.defaultBehavior);
		return shouldWrapInMediaQuery
		? `@media ${createMediaQuery(breakpointOptions, behavior)} {${styleProps}}`
		: styleProps;
		var createStyleString = function createStyleString(propsList, propValue, breakpoint, behavior) {
		var styleProps = propsList.map(function (propName) {
		return "".concat(propName, ":").concat(String(propValue), ";");
		}).join('');
		var breakpointOptions = Layout$1.breakpoints[breakpoint.name];
		/**
		* Wrap CSS rule in a media query only if its prop includes
		* a breakpoint and behavior different than the default ones.
		*/

		var shouldWrapInMediaQuery = breakpointOptions && !(breakpoint.isDefault && behavior === Layout$1.defaultBehavior);
		return shouldWrapInMediaQuery ? "@media ".concat(createMediaQuery(breakpointOptions, behavior), " {").concat(styleProps, "}") : styleProps;
		};

		function applyStyles(pristineProps) {
		return (Object.keys(pristineProps)
		/* Parse each prop to include "breakpoint" and "behavior" */
		.map(parsePropName)
		/* Filter out props that are not included in prop aliases */
		.filter(({ purePropName }) => propAliases.hasOwnProperty(purePropName))
		/* Filter out props with "undefined" or "null" as value */
		.filter(({ originPropName }) => isset(pristineProps[originPropName]))
		/* Map each prop to a CSS string */
		.map(({ purePropName, originPropName, breakpoint, behavior }) => {
		const { props, transformValue } = propAliases[purePropName];
		const propValue = pristineProps[originPropName];
		const transformedPropValue = transformValue
		? transformValue(propValue)
		: propValue;
		return createStyleString(props, transformedPropValue, breakpoint, behavior);
		})
		.join(' '));
		return Object.keys(pristineProps)
		/* Parse each prop to include "breakpoint" and "behavior" */
		.map(parsePropName)
		/* Filter out props that are not included in prop aliases */
		.filter(function (_ref) {
		var purePropName = _ref.purePropName;
		return propAliases.hasOwnProperty(purePropName);
		})
		/* Filter out props with "undefined" or "null" as value */
		.filter(function (_ref2) {
		var originPropName = _ref2.originPropName;
		return isset(pristineProps[originPropName]);
		})
		/* Map each prop to a CSS string */
		.map(function (_ref3) {
		var purePropName = _ref3.purePropName,
		originPropName = _ref3.originPropName,
		breakpoint = _ref3.breakpoint,
		behavior = _ref3.behavior;
		var _propAliases$pureProp = propAliases[purePropName],
		props = _propAliases$pureProp.props,
		transformValue = _propAliases$pureProp.transformValue;
		var propValue = pristineProps[originPropName];
		var transformedPropValue = transformValue ? transformValue(propValue) : propValue;
		return createStyleString(props, transformedPropValue, breakpoint, behavior);
		}).join(' ');
		}

		const Box = styled.div `
		display: ${({ flex, inline }) => flex
		? inline
		? 'inline-flex'
		: 'flex'
		: inline
		? 'inline-block'
		: 'block'};
		function _templateObject() {
		var data = _taggedTemplateLiteral(["\n display: ", ";\n\n && {\n ", ";\n }\n"]);

		&& {
		${applyStyles};
		}
		`;
		_templateObject = function _templateObject() {
		return data;
		};

		return data;
		}
		var Box = styled.div(_templateObject(), function (_ref) {
		var flex = _ref.flex,
		inline = _ref.inline;
		return flex ? inline ? 'inline-flex' : 'flex' : inline ? 'inline-block' : 'block';
		}, applyStyles);

		function memoizeWith(mappingFunc) {
		const cache = {};
		return (func) => function (...args) {
		const key = mappingFunc(...args);
		if (!(key in cache)) {
		cache[key] = func(...args);
		}
		return cache[key];
		var cache = {};
		return function (func) {
		return function () {
		var key = mappingFunc.apply(void 0, arguments);

		if (!(key in cache)) {
		cache[key] = func.apply(void 0, arguments);
		}

		return cache[key];
		};
		};
		}

		function getAreasList(templateProps) {
		const areasList = Object.entries(templateProps).reduce((acc, [templateName, templateAreas]) => {
		const { breakpoint, behavior } = parsePropName(templateName);
		const nextAreas = acc.areas.concat(templateAreas);
		const nextTemplates = acc.templates.concat({
		breakpoint: Layout$1.breakpoints[breakpoint.name],
		behavior,
		areas: templateAreas,
		});
		return {
		areas: nextAreas,
		templates: nextTemplates,
		};
		}, {
		areas: [],
		templates: [],
		var areasList = Object.entries(templateProps).reduce(function (acc, _ref) {
		var _ref2 = _slicedToArray(_ref, 2),
		templateName = _ref2[0],
		templateAreas = _ref2[1];

		var _parsePropName = parsePropName(templateName),
		breakpoint = _parsePropName.breakpoint,
		behavior = _parsePropName.behavior;

		var nextAreas = acc.areas.concat(templateAreas);
		var nextTemplates = acc.templates.concat({
		breakpoint: Layout$1.breakpoints[breakpoint.name],
		behavior: behavior,
		areas: templateAreas
		});
		const { areas, templates } = areasList;
		return {
		areas: Array.from(new Set(areas)),
		templates,
		areas: nextAreas,
		templates: nextTemplates
		};
		}, {
		areas: [],
		templates: []
		});
		var areas = areasList.areas,
		templates = areasList.templates;
		return {
		areas: Array.from(new Set(areas)),
		templates: templates
		};
		}

		function hashString(str) {
		const { length } = str;
		let hash = 0;
		let i = 0;
		if (length > 0) {
		while (i < length) {
		hash = ((hash << 5) - hash + str.charCodeAt(i++)) \| 0;
		}
		var length = str.length;
		var hash = 0;
		var i = 0;

		if (length > 0) {
		while (i < length) {
		hash = (hash << 5) - hash + str.charCodeAt(i++) \| 0;
		}
		return hash;
		}

		return hash;
		}

		const createMediaQuery$1 = (queryParams) => {
		return compose(joinQueryList(([paramName, paramValue]) => {
		/**
		* Transform values that begin with a number to prevent
		* transformations of "calc" expressions.
		* Transformation of numerics is necessary when a simple
		* number is used as a value (min-width: 750) is not valid.
		*
		* (min-width: 750) ==> (min-width: 750px)
		*/
		const resolvedParamValue = /^\d/.test(String(paramValue))
		? transformNumeric(paramValue)
		: paramValue;
		return `(${paramName}:${resolvedParamValue})`;
		}), normalizeQuery)(queryParams);
		var createMediaQuery$1 = function createMediaQuery(queryParams) {
		return compose(joinQueryList(function (_ref) {
		var _ref2 = _slicedToArray(_ref, 2),
		paramName = _ref2[0],
		paramValue = _ref2[1];

		/**
		* Transform values that begin with a number to prevent
		* transformations of "calc" expressions.
		* Transformation of numerics is necessary when a simple
		* number is used as a value (min-width: 750) is not valid.
		*
		* (min-width: 750) ==> (min-width: 750px)
		*/
		var resolvedParamValue = /^\d/.test(String(paramValue)) ? transformNumeric(paramValue) : paramValue;
		return "(".concat(paramName, ":").concat(resolvedParamValue, ")");
		}), normalizeQuery)(queryParams);
		};
		const MediaQuery = (props) => {
		const { children, ...queryParams } = props;
		const query = useMemo(() => createMediaQuery$1(queryParams), [queryParams]);
		const [matches, setMatches] = useState(false);
		const handleMediaQueryChange = (mediaQueryList) => {
		setMatches(mediaQueryList.matches);

		var MediaQuery = function MediaQuery(props) {
		var children = props.children,
		queryParams = _objectWithoutProperties(props, ["children"]);

		var query = useMemo(function () {
		return createMediaQuery$1(queryParams);
		}, [queryParams]);

		var _React$useState = useState(false),
		_React$useState2 = _slicedToArray(_React$useState, 2),
		matches = _React$useState2[0],
		setMatches = _React$useState2[1];

		var handleMediaQueryChange = function handleMediaQueryChange(mediaQueryList) {
		setMatches(mediaQueryList.matches);
		};

		useEffect(function () {
		var mediaQueryList = matchMedia(query);
		handleMediaQueryChange(mediaQueryList);
		mediaQueryList.addListener(handleMediaQueryChange);
		return function () {
		return mediaQueryList.removeListener(handleMediaQueryChange);
		};
		useEffect(() => {
		const mediaQueryList = matchMedia(query);
		handleMediaQueryChange(mediaQueryList);
		mediaQueryList.addListener(handleMediaQueryChange);
		return () => mediaQueryList.removeListener(handleMediaQueryChange);
		}, Object.keys(queryParams));
		return children(matches);
		}, Object.keys(queryParams));
		return children(matches);
		};

		function capitalize(str) {
		return str.replace(/^./, (firstLetter) => firstLetter.toUpperCase());
		return str.replace(/^./, function (firstLetter) {
		return firstLetter.toUpperCase();
		});
		}
		@@ -584,16 +886,20 @@
		function pop(list) {
		return list.slice(0, list.length - 1);
		return list.slice(0, list.length - 1);
		}

		function when(predicate, whenTrueFunc) {
		return (args) => (predicate(args) ? whenTrueFunc(args) : args);
		return function (args) {
		return predicate(args) ? whenTrueFunc(args) : args;
		};
		}

		function spread(func) {
		return (args) => func.apply(null, args);
		return function (args) {
		return func.apply(null, args);
		};
		}

		function getPrefix(str) {
		const prompt = str.match(/^(min\|max)/);
		return prompt ? prompt[0] : '';
		var prompt = str.match(/^(min\|max)/);
		return prompt ? prompt[0] : '';
		}
		@@ -604,44 +910,47 @@
		*/

		function mergeBreakpoints(breakpointA, breakpointB, includesArea) {
		const { behavior: prevBehavior } = breakpointB;
		const { behavior: nextBehavior } = breakpointA;
		const wentUp = prevBehavior === 'up';
		const goesDown = nextBehavior === 'down';
		const behavesSame = prevBehavior === nextBehavior;
		const behavesInclusive = wentUp && goesDown;
		const shouldStretch = wentUp;
		const mergedBreakpoint = { ...breakpointB, ...breakpointA };
		return Object.keys(mergedBreakpoint).reduce((acc, propName) => {
		let nextValue = mergedBreakpoint[propName];
		const prefix = getPrefix(propName);
		if (propName === 'behavior') {
		if (!includesArea && shouldStretch) {
		nextValue = 'down';
		}
		var prevBehavior = breakpointB.behavior;
		var nextBehavior = breakpointA.behavior;
		var wentUp = prevBehavior === 'up';
		var goesDown = nextBehavior === 'down';
		var behavesSame = prevBehavior === nextBehavior;
		var behavesInclusive = wentUp && goesDown;
		var shouldStretch = wentUp;

		var mergedBreakpoint = _objectSpread2({}, breakpointB, {}, breakpointA);

		return Object.keys(mergedBreakpoint).reduce(function (acc, propName) {
		var nextValue = mergedBreakpoint[propName];
		var prefix = getPrefix(propName);

		if (propName === 'behavior') {
		if (!includesArea && shouldStretch) {
		nextValue = 'down';
		}
		}

		if (prefix === 'max') {
		if (!includesArea && shouldStretch) {
		var mirrorValue = breakpointA[propName.replace(/^max/, 'min')];
		nextValue = "calc(".concat(transformNumeric(mirrorValue), " - 1px)");
		}
		}

		if (prefix === 'min') {
		if (includesArea) {
		if (behavesSame \|\| behavesInclusive) {
		nextValue = breakpointB[propName];
		}
		if (prefix === 'max') {
		if (!includesArea && shouldStretch) {
		const mirrorValue = breakpointA[propName.replace(/^max/, 'min')];
		nextValue = `calc(${transformNumeric(mirrorValue)} - 1px)`;
		}
		} else {
		if (shouldStretch) {
		nextValue = breakpointB[propName];
		}
		if (prefix === 'min') {
		if (includesArea) {
		if (behavesSame \|\| behavesInclusive) {
		nextValue = breakpointB[propName];
		}
		}
		else {
		if (shouldStretch) {
		nextValue = breakpointB[propName];
		}
		}
		}
		return {
		...acc,
		[propName]: nextValue,
		};
		}, {
		behavior: defaultOptions.defaultBehavior,
		});
		}
		}

		return _objectSpread2({}, acc, _defineProperty({}, propName, nextValue));
		}, {
		behavior: defaultOptions.defaultBehavior
		});
		}
		@@ -654,7 +963,7 @@
		*/

		function openBreakpoint(breakpoint) {
		return Object.keys(breakpoint).reduce((acc, key) => ({
		...acc,
		[key]: getPrefix(key) === 'max' ? undefined : breakpoint[key],
		}), {});
		return Object.keys(breakpoint).reduce(function (acc, key) {
		return _objectSpread2({}, acc, _defineProperty({}, key, getPrefix(key) === 'max' ? undefined : breakpoint[key]));
		}, {});
		}
		@@ -671,4 +980,4 @@
		*/
		const neutralizeParamName = (paramName) => {
		return paramName.replace(/^min\|max/, '_');
		var neutralizeParamName = function neutralizeParamName(paramName) {
		return paramName.replace(/^min\|max/, '_');
		};
		@@ -680,81 +989,120 @@ /**
		*/


		function shouldCombineBreakpoints(breakpointA, breakpointB) {
		const allParams = Object.keys(breakpointA).concat(Object.keys(breakpointB));
		return allParams.every((pristineParamName, index) => {
		const paramName = neutralizeParamName(pristineParamName);
		const prevParamName = neutralizeParamName(allParams[index - 1] \|\| paramName);
		return paramName === prevParamName;
		});
		var allParams = Object.keys(breakpointA).concat(Object.keys(breakpointB));
		return allParams.every(function (pristineParamName, index) {
		var paramName = neutralizeParamName(pristineParamName);
		var prevParamName = neutralizeParamName(allParams[index - 1] \|\| paramName);
		return paramName === prevParamName;
		});
		}

		const updateWith = (key, updateFunc) => {
		return (args) => {
		const [first, ...rest] = args;
		return [updateFunc(args), ...rest];
		};
		var updateWith = function updateWith(key, updateFunc) {
		return function (args) {
		var _args = _toArray(args),
		first = _args[0],
		rest = _args.slice(1);

		return [updateFunc(args)].concat(_toConsumableArray(rest));
		};
		};
		const createContext = (areaName) => {
		return (areaBreakpointsList, template, index, templates) => {
		const isLastTemplate = index === templates.length - 1;
		const { areas, behavior, breakpoint } = template;
		const includesArea = areas.includes(areaName);
		const prevAreaBreakpoint = areaBreakpointsList[areaBreakpointsList.length - 1];
		const nextAreaBreakpoint = {
		...breakpoint,
		behavior,
		};
		const { behavior: prevBehavior, ...prevBreakpoint } = prevAreaBreakpoint \|\| { behavior: '' };
		const shouldMerge = Boolean(prevAreaBreakpoint) &&
		shouldCombineBreakpoints(prevBreakpoint, breakpoint);
		return [
		nextAreaBreakpoint,
		prevAreaBreakpoint,
		includesArea,
		isLastTemplate,
		shouldMerge,
		areaBreakpointsList,
		];
		};

		var createContext = function createContext(areaName) {
		return function (areaBreakpointsList, template, index, templates) {
		var isLastTemplate = index === templates.length - 1;
		var areas = template.areas,
		behavior = template.behavior,
		breakpoint = template.breakpoint;
		var includesArea = areas.includes(areaName);
		var prevAreaBreakpoint = areaBreakpointsList[areaBreakpointsList.length - 1];

		var nextAreaBreakpoint = _objectSpread2({}, breakpoint, {
		behavior: behavior
		});

		var _ref = prevAreaBreakpoint \|\| {
		behavior: ''
		},
		prevBehavior = _ref.behavior,
		prevBreakpoint = _objectWithoutProperties(_ref, ["behavior"]);

		var shouldMerge = Boolean(prevAreaBreakpoint) && shouldCombineBreakpoints(prevBreakpoint, breakpoint);
		return [nextAreaBreakpoint, prevAreaBreakpoint, includesArea, isLastTemplate, shouldMerge, areaBreakpointsList];
		};
		};
		const canMergeBreakpoints = ([nextAreaBreakpoint, prevAreaBreakpoint, includesArea, isLastTemplate, shouldMerge,]) => {
		return shouldMerge;

		var canMergeBreakpoints = function canMergeBreakpoints(_ref2) {
		var _ref3 = _slicedToArray(_ref2, 5),
		nextAreaBreakpoint = _ref3[0],
		prevAreaBreakpoint = _ref3[1],
		includesArea = _ref3[2],
		isLastTemplate = _ref3[3],
		shouldMerge = _ref3[4];

		return shouldMerge;
		};
		const shouldOpenBreakpoint = ([nextAreaBreakpoint, prevAreaBreakpoint, includesArea, isLastTemplate,]) => {
		return isLastTemplate && nextAreaBreakpoint.behavior === 'up';

		var shouldOpenBreakpoint = function shouldOpenBreakpoint(_ref4) {
		var _ref5 = _slicedToArray(_ref4, 4),
		nextAreaBreakpoint = _ref5[0],
		prevAreaBreakpoint = _ref5[1],
		includesArea = _ref5[2],
		isLastTemplate = _ref5[3];

		return isLastTemplate && nextAreaBreakpoint.behavior === 'up';
		};
		const updateBreakpointsList = ([nextAreaBreakpoint, prevAreaBreakpoint, includesArea, isLastTemplate, shouldMerge, areaBreakpointsList,]) => {
		/* Fallback to an empty object when there is no previous breakpoint in the list */
		const { behavior: prevBehavior } = prevAreaBreakpoint \|\| {
		behavior: '',
		};
		const { behavior: nextBehavior } = nextAreaBreakpoint;
		const wentUp = prevBehavior === 'up';
		const goesDown = nextBehavior === 'down';
		const behavesSame = prevBehavior === nextBehavior;
		const behavesInclusive = wentUp && goesDown;
		/* Alias for better readability */
		const shouldStretch = wentUp;
		let shouldReplaceLastArea = includesArea && (behavesSame \|\| behavesInclusive);
		if (!shouldMerge) {
		shouldReplaceLastArea = false;

		var updateBreakpointsList = function updateBreakpointsList(_ref6) {
		var _ref7 = _slicedToArray(_ref6, 6),
		nextAreaBreakpoint = _ref7[0],
		prevAreaBreakpoint = _ref7[1],
		includesArea = _ref7[2],
		isLastTemplate = _ref7[3],
		shouldMerge = _ref7[4],
		areaBreakpointsList = _ref7[5];

		/* Fallback to an empty object when there is no previous breakpoint in the list */
		var _ref8 = prevAreaBreakpoint \|\| {
		behavior: ''
		},
		prevBehavior = _ref8.behavior;

		var nextBehavior = nextAreaBreakpoint.behavior;
		var wentUp = prevBehavior === 'up';
		var goesDown = nextBehavior === 'down';
		var behavesSame = prevBehavior === nextBehavior;
		var behavesInclusive = wentUp && goesDown;
		/* Alias for better readability */

		var shouldStretch = wentUp;
		var shouldReplaceLastArea = includesArea && (behavesSame \|\| behavesInclusive);

		if (!shouldMerge) {
		shouldReplaceLastArea = false;
		}

		var newBreakpoint = [nextAreaBreakpoint];

		if (!includesArea) {
		/**
		* When the area is stretched, append explicit "null" afterward
		* to prevent the stretched area from being treated as a sibling area
		* in any further calculations.
		*/
		newBreakpoint = shouldStretch ? [nextAreaBreakpoint, null] : [null];

		if (shouldStretch) {
		shouldReplaceLastArea = true;
		}
		let newBreakpoint = [nextAreaBreakpoint];
		if (!includesArea) {
		/**
		* When the area is stretched, append explicit "null" afterward
		* to prevent the stretched area from being treated as a sibling area
		* in any further calculations.
		*/
		newBreakpoint = shouldStretch ? [nextAreaBreakpoint, null] : [null];
		if (shouldStretch) {
		shouldReplaceLastArea = true;
		}
		}
		const targetList = shouldReplaceLastArea
		? pop(areaBreakpointsList)
		: areaBreakpointsList;
		return targetList.concat(newBreakpoint);
		}

		var targetList = shouldReplaceLastArea ? pop(areaBreakpointsList) : areaBreakpointsList;
		return targetList.concat(newBreakpoint);
		};
		const getAreaBreakpoints = (areaName, templates) => templates.reduce(compose(updateBreakpointsList, when(shouldOpenBreakpoint, updateWith('nextAreaBreakpoint', spread(openBreakpoint))), when(canMergeBreakpoints, updateWith('nextAreaBreakpoint', spread(mergeBreakpoints))), createContext(areaName)), []);

		var getAreaBreakpoints = function getAreaBreakpoints(areaName, templates) {
		return templates.reduce(compose(updateBreakpointsList, when(shouldOpenBreakpoint, updateWith('nextAreaBreakpoint', spread(openBreakpoint))), when(canMergeBreakpoints, updateWith('nextAreaBreakpoint', spread(mergeBreakpoints))), createContext(areaName)), []);
		};

		/**
		@@ -765,11 +1113,31 @@ * A high-order component that wraps the given area component in a placeholder.
		*/
		const withPlaceholder = (Component, breakpoints) => {
		const Placeholder = ({ children, ...restProps }) => breakpoints.filter(Boolean).reduce((components, breakpointProps, index) => {
		const { behavior, ...queryProps } = breakpointProps;
		return components.concat(createElement(MediaQuery, Object.assign({}, queryProps, { key: `${Component.displayName}_${index}` }), (matches) => matches && createElement(Component, Object.assign({}, restProps), children)));

		var withPlaceholder = function withPlaceholder(Component, breakpoints) {
		var Placeholder = function Placeholder(_ref) {
		var children = _ref.children,
		restProps = _objectWithoutProperties(_ref, ["children"]);

		return breakpoints.filter(Boolean).reduce(function (components, breakpointProps, index) {
		var behavior = breakpointProps.behavior,
		queryProps = _objectWithoutProperties(breakpointProps, ["behavior"]);

		return components.concat(createElement(MediaQuery, Object.assign({}, queryProps, {
		key: "".concat(Component.displayName, "_").concat(index)
		}), function (matches) {
		return matches && createElement(Component, Object.assign({}, restProps), children);
		}));
		}, []);
		Placeholder.displayName = `Placeholder(${Component.displayName})`;
		return Placeholder;
		};

		Placeholder.displayName = "Placeholder(".concat(Component.displayName, ")");
		return Placeholder;
		};
		const createAreaComponent = (areaName) => (props) => (createElement(Box, Object.assign({ area: areaName }, props)));

		var createAreaComponent = function createAreaComponent(areaName) {
		return function (props) {
		return createElement(Box, Object.assign({
		area: areaName
		}, props));
		};
		};
		/**
		@@ -779,56 +1147,67 @@ * Returns a map of React components based on the given grid areas
		*/
		function generateComponents({ areas, templates, }) {
		const componentsMap = areas.reduce((components, areaName) => {
		const areaParams = getAreaBreakpoints(areaName, templates);
		const shouldAlwaysRender = areaParams.length === 1 &&
		areaParams.every((breakpoint) => !breakpoint.minWidth && !breakpoint.maxWidth);
		const Component = createAreaComponent(areaName);
		const capitalizedAreaName = capitalize(areaName);
		Component.displayName = capitalizedAreaName;
		const ResponsiveComponent = shouldAlwaysRender
		? Component
		: withPlaceholder(Component, areaParams);
		return {
		...components,
		[capitalizedAreaName]: ResponsiveComponent,
		};
		}, {});
		/**
		* Return plain components map for browsers that don't support Proxy.
		* Requires safety check before rendering conditional areas.
		*/
		return typeof Proxy === 'undefined'
		? componentsMap
		: new Proxy(componentsMap, {
		get(components, areaName) {
		if (areaName in components \|\| typeof areaName === 'symbol') {
		return components[areaName];
		}
		/**
		* Replace non-existing area component with
		* the dummy component that renders nothing.
		* This prevents from the exception when rendering "undefined"
		* and allows conditional template areas.
		*/
		return () => null;
		},
		});


		function generateComponents(_ref2) {
		var areas = _ref2.areas,
		templates = _ref2.templates;
		var componentsMap = areas.reduce(function (components, areaName) {
		var areaParams = getAreaBreakpoints(areaName, templates);
		var shouldAlwaysRender = areaParams.length === 1 && areaParams.every(function (breakpoint) {
		return !breakpoint.minWidth && !breakpoint.maxWidth;
		});
		var Component = createAreaComponent(areaName);
		var capitalizedAreaName = capitalize(areaName);
		Component.displayName = capitalizedAreaName;
		var ResponsiveComponent = shouldAlwaysRender ? Component : withPlaceholder(Component, areaParams);
		return _objectSpread2({}, components, _defineProperty({}, capitalizedAreaName, ResponsiveComponent));
		}, {});
		/**
		* Return plain components map for browsers that don't support Proxy.
		* Requires safety check before rendering conditional areas.
		*/

		return typeof Proxy === 'undefined' ? componentsMap : new Proxy(componentsMap, {
		get: function get(components, areaName) {
		if (areaName in components \|\| _typeof(areaName) === 'symbol') {
		return components[areaName];
		} // @ts-ignore-line
		/**
		* Replace non-existing area component with
		* the dummy component that renders nothing.
		* This prevents from the exception when rendering "undefined"
		* and allows conditional template areas.
		*/


		return function () {
		return null;
		};
		}
		});
		}

		// Returns an array of unique normalized grid areas
		// from the given template string.
		const sanitizeTemplateString = compose((list) => list.sort(),
		// Deduplicate area strings
		(list) => Array.from(new Set(list)),
		// Filter out "template" row/columns sizes
		(arr) => arr.filter(isAreaName),
		// Filter out empty area strings
		(arr) => arr.filter(Boolean),
		// Split into a list of areas
		(str) => str.split(' '),
		// Deduplicate multiple spaces
		(str) => str.replace(/\s+/g, ' '),
		// Replace new lines and single quotes with spaces
		(str) => str.replace(/\r?\n\|\'+/g, ' '));

		var sanitizeTemplateString = compose(function (list) {
		return list.sort();
		}, // Deduplicate area strings
		function (list) {
		return Array.from(new Set(list));
		}, // Filter out "template" row/columns sizes
		function (arr) {
		return arr.filter(isAreaName);
		}, // Filter out empty area strings
		function (arr) {
		return arr.filter(Boolean);
		}, // Split into a list of areas
		function (str) {
		return str.split(' ');
		}, // Deduplicate multiple spaces
		function (str) {
		return str.replace(/\s+/g, ' ');
		}, // Replace new lines and single quotes with spaces
		function (str) {
		return str.replace(/\r?\n\|\'+/g, ' ');
		});

		/**
		@@ -838,14 +1217,12 @@ * Accepts a props object and filters it to include
		*/
		const filterTemplateProps = (props) => {
		return Object.keys(props)
		.filter((propName) => {
		const { purePropName } = parsePropName(propName);
		return ['areas', 'template'].includes(purePropName);
		})
		.reduce((acc, propName) => {
		return {
		...acc,
		[propName]: sanitizeTemplateString(props[propName]),
		};
		}, {});

		var filterTemplateProps = function filterTemplateProps(props) {
		return Object.keys(props).filter(function (propName) {
		var _parsePropName = parsePropName(propName),
		purePropName = _parsePropName.purePropName;

		return ['areas', 'template'].includes(purePropName);
		}).reduce(function (acc, propName) {
		return _objectSpread2({}, acc, _defineProperty({}, propName, sanitizeTemplateString(props[propName])));
		}, {});
		};
		@@ -858,27 +1235,43 @@
		*/
		const memoized = memoizeWith((templateProps) => {
		const pairs = Object.entries(templateProps).reduce((acc, [propName, templateAreas]) => {
		return acc.concat(`${propName}:${templateAreas.join()}`);
		}, []);
		return hashString(pairs.join()).toString();

		var memoized = memoizeWith(function (templateProps) {
		var pairs = Object.entries(templateProps).reduce(function (acc, _ref) {
		var _ref2 = _slicedToArray(_ref, 2),
		propName = _ref2[0],
		templateAreas = _ref2[1];

		return acc.concat("".concat(propName, ":").concat(templateAreas.join()));
		}, []);
		return hashString(pairs.join()).toString();
		});
		const parseTemplates = compose(memoized(compose(generateComponents, getAreasList)), filterTemplateProps);
		var parseTemplates = compose(memoized(compose(generateComponents, getAreasList)), filterTemplateProps);

		const CompositionWrapper = styled.div `
		&& {
		${applyStyles};
		display: ${({ inline }) => (inline ? 'inline-grid' : 'grid')};
		}
		`;
		const Composition = ({ children, ...restProps }) => {
		const areaComponents = parseTemplates(restProps);
		const hasAreaComponents = Object.keys(areaComponents).length > 0;
		const childrenType = typeof children;
		const hasChildrenFunction = childrenType === 'function';
		// Warn on attempt to use "areas"/"template" props without children-as-function.
		// Render in that case still occurs, but it doesn't produce the expected result.
		warn(!(hasAreaComponents && !hasChildrenFunction), `Failed to render 'Composition' with template areas ["${Object.keys(areaComponents).join('", "')}"]: expected children to be a function, but got: ${childrenType}. Please provide render function as children, or remove assigned template props.`);
		return (createElement(CompositionWrapper, Object.assign({}, restProps), hasAreaComponents && hasChildrenFunction
		? children(areaComponents)
		: children));
		function _templateObject$1() {
		var data = _taggedTemplateLiteral(["\n && {\n ", ";\n display: ", ";\n }\n"]);

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

		return data;
		}
		var CompositionWrapper = styled.div(_templateObject$1(), applyStyles, function (_ref) {
		var inline = _ref.inline;
		return inline ? 'inline-grid' : 'grid';
		});

		var Composition = function Composition(_ref2) {
		var children = _ref2.children,
		restProps = _objectWithoutProperties(_ref2, ["children"]);

		var areaComponents = parseTemplates(restProps);
		var hasAreaComponents = Object.keys(areaComponents).length > 0;

		var childrenType = _typeof(children);

		var hasChildrenFunction = childrenType === 'function'; // Warn on attempt to use "areas"/"template" props without children-as-function.
		// Render in that case still occurs, but it doesn't produce the expected result.

		warn(!(hasAreaComponents && !hasChildrenFunction), "Failed to render 'Composition' with template areas [\"".concat(Object.keys(areaComponents).join('", "'), "\"]: expected children to be a function, but got: ").concat(childrenType, ". Please provide render function as children, or remove assigned template props."));
		return createElement(CompositionWrapper, Object.assign({}, restProps), hasAreaComponents && hasChildrenFunction ? children(areaComponents) : children);
		};
		@@ -896,84 +1289,130 @@
		*/

		function flipBreakpoint(breakpoint) {
		return Object.entries(breakpoint)
		.map(([propName, propValue]) => [getPrefix(propName), propName, propValue])
		.filter(([prefix]) => prefix !== 'max')
		.reduce((newBreakpoint, [prefix, propName, propValue]) => {
		const hasMinPrefix = prefix === 'min';
		const nextPropName = hasMinPrefix
		? propName.replace(/^min/, 'max')
		: propName;
		// Parse a breakpoint property value into a numeric value
		// and its measurement unit.
		const [, numericValue, unit] = /(\d+)(.+)?/.exec(propValue);
		/**
		* Subtracts 1 from the edge to not include the area at the beginning
		* of the breakpoint.
		*
		* @todo
		* How is "parseFloat" going to work with non-dimensional options?
		* (i.e. aspectRatio)
		*/
		const nextNumericValue = hasMinPrefix
		? parseFloat(numericValue) - 1
		: numericValue;
		// Append back the measurement unit.
		// Prevents breakpoints like { "minWidth": "768px" }
		// becoming { "minWidth": 768 } -> { "minWidth": "768rem" }
		// when the measurement unit is not "px".
		const nextValue = unit ? `${nextNumericValue}${unit}` : nextNumericValue;
		return {
		...newBreakpoint,
		[nextPropName]: nextValue,
		};
		}, {});
		return Object.entries(breakpoint).map(function (_ref) {
		var _ref2 = _slicedToArray(_ref, 2),
		propName = _ref2[0],
		propValue = _ref2[1];

		return [getPrefix(propName), propName, propValue];
		}).filter(function (_ref3) {
		var _ref4 = _slicedToArray(_ref3, 1),
		prefix = _ref4[0];

		return prefix !== 'max';
		}).reduce(function (newBreakpoint, _ref5) {
		var _ref6 = _slicedToArray(_ref5, 3),
		prefix = _ref6[0],
		propName = _ref6[1],
		propValue = _ref6[2];

		var hasMinPrefix = prefix === 'min';
		var nextPropName = hasMinPrefix ? propName.replace(/^min/, 'max') : propName; // Parse a breakpoint property value into a numeric value
		// and its measurement unit.

		var _$exec = /(\d+)(.+)?/.exec(propValue),
		_$exec2 = _slicedToArray(_$exec, 3),
		numericValue = _$exec2[1],
		unit = _$exec2[2];
		/**
		* Subtracts 1 from the edge to not include the area at the beginning
		* of the breakpoint.
		*
		* @todo
		* How is "parseFloat" going to work with non-dimensional options?
		* (i.e. aspectRatio)
		*/


		var nextNumericValue = hasMinPrefix ? parseFloat(numericValue) - 1 : numericValue; // Append back the measurement unit.
		// Prevents breakpoints like { "minWidth": "768px" }
		// becoming { "minWidth": 768 } -> { "minWidth": "768rem" }
		// when the measurement unit is not "px".

		var nextValue = unit ? "".concat(nextNumericValue).concat(unit) : nextNumericValue;
		return _objectSpread2({}, newBreakpoint, _defineProperty({}, nextPropName, nextValue));
		}, {});
		}

		const resolveBreakpoint = (breakpointRef) => {
		return typeof breakpointRef === 'string'
		? Layout$1.breakpoints[breakpointRef]
		: breakpointRef;
		var resolveBreakpoint = function resolveBreakpoint(breakpointRef) {
		return typeof breakpointRef === 'string' ? Layout$1.breakpoints[breakpointRef] : breakpointRef;
		};
		const createWrapper = (children, props) => (...breakpoints) => {
		const Placeholder = withPlaceholder(Box, breakpoints);

		var createWrapper = function createWrapper(children, props) {
		return function () {
		for (var _len = arguments.length, breakpoints = new Array(_len), _key = 0; _key < _len; _key++) {
		breakpoints[_key] = arguments[_key];
		}

		var Placeholder = withPlaceholder(Box, breakpoints);
		return createElement(Placeholder, Object.assign({}, props), children);
		};
		};
		const Only = ({ children, except, for: exactBreakpointName, from: minBreakpointName, to: maxBreakpointName, ...restProps }) => {
		const wrapWith = createWrapper(children, restProps);
		/* Render on explicit breakpoint */
		if (exactBreakpointName) {
		return wrapWith(resolveBreakpoint(exactBreakpointName));
		}
		const minBreakpoint = resolveBreakpoint(minBreakpointName);
		const maxBreakpoint = resolveBreakpoint(maxBreakpointName);
		/* Bell, __/--\__ */
		if (minBreakpoint && maxBreakpoint && !except) {
		return wrapWith(mergeBreakpoints({ behavior: 'down', ...maxBreakpoint }, { behavior: 'up', ...minBreakpoint }, false));
		}
		/* Notch, --\__/-- */
		if (minBreakpoint && maxBreakpoint && except) {
		return wrapWith(flipBreakpoint(minBreakpoint), openBreakpoint(maxBreakpoint));
		}
		/* High-pass, __/-- */
		if (minBreakpoint && !maxBreakpoint) {
		return wrapWith(openBreakpoint(minBreakpoint));
		}
		/* Low-pass, --\__ */
		if (!minBreakpoint && maxBreakpoint) {
		return wrapWith(flipBreakpoint(maxBreakpoint));
		}
		/* Render always when no constrains are provided */
		return children;

		var Only = function Only(_ref) {
		var children = _ref.children,
		except = _ref.except,
		exactBreakpointName = _ref["for"],
		minBreakpointName = _ref.from,
		maxBreakpointName = _ref.to,
		restProps = _objectWithoutProperties(_ref, ["children", "except", "for", "from", "to"]);

		var wrapWith = createWrapper(children, restProps);
		/* Render on explicit breakpoint */

		if (exactBreakpointName) {
		return wrapWith(resolveBreakpoint(exactBreakpointName));
		}

		var minBreakpoint = resolveBreakpoint(minBreakpointName);
		var maxBreakpoint = resolveBreakpoint(maxBreakpointName);
		/* Bell, __/--\__ */

		if (minBreakpoint && maxBreakpoint && !except) {
		return wrapWith(mergeBreakpoints(_objectSpread2({
		behavior: 'down'
		}, maxBreakpoint), _objectSpread2({
		behavior: 'up'
		}, minBreakpoint), false));
		}
		/* Notch, --\__/-- */


		if (minBreakpoint && maxBreakpoint && except) {
		return wrapWith(flipBreakpoint(minBreakpoint), openBreakpoint(maxBreakpoint));
		}
		/* High-pass, __/-- */


		if (minBreakpoint && !maxBreakpoint) {
		return wrapWith(openBreakpoint(minBreakpoint));
		}
		/* Low-pass, --\__ */


		if (!minBreakpoint && maxBreakpoint) {
		return wrapWith(flipBreakpoint(maxBreakpoint));
		}
		/* Render always when no constrains are provided */


		return children;
		};

		function debounce(func, duration = 250) {
		let timeout;
		return (...args) => {
		const postpone = () => {
		timeout = null;
		return func(...args);
		};
		clearTimeout(timeout);
		timeout = setTimeout(postpone, duration);
		function debounce(func) {
		var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 250;
		var timeout;
		return function () {
		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		var postpone = function postpone() {
		timeout = null;
		return func.apply(void 0, args);
		};

		clearTimeout(timeout);
		timeout = setTimeout(postpone, duration);
		};
		}
		@@ -984,46 +1423,53 @@
		*/
		const useViewportChange = (callback, debounceDuration = 50) => {
		const handleWindowResize = debounce(callback, debounceDuration);
		useEffect(() => {
		handleWindowResize();
		window.addEventListener('resize', handleWindowResize);
		return () => window.removeEventListener('resize', handleWindowResize);
		}, []);

		var useViewportChange = function useViewportChange(callback) {
		var debounceDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
		var handleWindowResize = debounce(callback, debounceDuration);
		useEffect(function () {
		handleWindowResize();
		window.addEventListener('resize', handleWindowResize);
		return function () {
		return window.removeEventListener('resize', handleWindowResize);
		};
		}, []);
		};

		const useBreakpointChange = (callback, debounceDuration, breakpoints = Layout$1.breakpoints) => {
		let prevBreakpointName;
		useViewportChange(() => {
		const nextBreakpointName = Object.keys(breakpoints).find((breakpointName) => {
		const mediaQuery = createMediaQuery(breakpoints[breakpointName], 'only');
		return matchMedia(mediaQuery).matches;
		});
		if (prevBreakpointName !== nextBreakpointName) {
		callback(nextBreakpointName);
		prevBreakpointName = nextBreakpointName;
		}
		}, debounceDuration);
		var useBreakpointChange = function useBreakpointChange(callback, debounceDuration) {
		var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Layout$1.breakpoints;
		var prevBreakpointName;
		useViewportChange(function () {
		var nextBreakpointName = Object.keys(breakpoints).find(function (breakpointName) {
		var mediaQuery = createMediaQuery(breakpoints[breakpointName], 'only');
		return matchMedia(mediaQuery).matches;
		});

		if (prevBreakpointName !== nextBreakpointName) {
		callback(nextBreakpointName);
		prevBreakpointName = nextBreakpointName;
		}
		}, debounceDuration);
		};

		const createWithBreakpoints = (breakpoints) => {
		const existingBreakpoints = Object.keys(breakpoints);
		return (breakpointsMap, defaultValue) => {
		const breakpointMatch = Object.keys(breakpointsMap)
		.filter((breakpointName) => {
		const hasBreakpoint = existingBreakpoints.includes(breakpointName);
		if (!hasBreakpoint) {
		console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).', breakpointName, existingBreakpoints.join(', '));
		}
		return hasBreakpoint;
		})
		.find((breakpointName) => {
		const breakpoint = breakpoints[breakpointName];
		const mediaQuery = createMediaQuery(breakpoint, 'only');
		return breakpoint && matchMedia(mediaQuery).matches;
		});
		return breakpointMatch ? breakpointsMap[breakpointMatch] : defaultValue;
		};
		var createWithBreakpoints = function createWithBreakpoints(breakpoints) {
		var existingBreakpoints = Object.keys(breakpoints);
		return function (breakpointsMap, defaultValue) {
		var breakpointMatch = Object.keys(breakpointsMap).filter(function (breakpointName) {
		var hasBreakpoint = existingBreakpoints.includes(breakpointName);

		if (!hasBreakpoint) {
		console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).', breakpointName, existingBreakpoints.join(', '));
		}

		return hasBreakpoint;
		}).find(function (breakpointName) {
		var breakpoint = breakpoints[breakpointName];
		var mediaQuery = createMediaQuery(breakpoint, 'only');
		return breakpoint && matchMedia(mediaQuery).matches;
		});
		return breakpointMatch ? breakpointsMap[breakpointMatch] : defaultValue;
		};
		};
		const withBreakpoints = createWithBreakpoints(Layout$1.breakpoints);

		var withBreakpoints = createWithBreakpoints(Layout$1.breakpoints);

		/**
		@@ -1034,9 +1480,14 @@ * Accepts a map of { breakpointName: value } pairs
		*/
		const useResponsiveValue = (breakpoints, defaultValue) => {
		const [value, updateValue] = useState(defaultValue);
		useBreakpointChange(() => {
		const nextValue = withBreakpoints(breakpoints, defaultValue);
		updateValue(nextValue);
		});
		return value;

		var useResponsiveValue = function useResponsiveValue(breakpoints, defaultValue) {
		var _useState = useState(defaultValue),
		_useState2 = _slicedToArray(_useState, 2),
		value = _useState2[0],
		updateValue = _useState2[1];

		useBreakpointChange(function () {
		var nextValue = withBreakpoints(breakpoints, defaultValue);
		updateValue(nextValue);
		});
		return value;
		};
		@@ -1048,18 +1499,23 @@
		*/
		const useResponsiveProps = (responsiveProps) => {
		const [props, setProps] = useState({});
		useBreakpointChange(() => {
		const relevantProps = Object.keys(responsiveProps)
		.map(parsePropName)
		.filter(({ breakpoint, behavior }) => {
		const mediaQuery = createMediaQuery(Layout$1.breakpoints[breakpoint.name], behavior);
		return matchMedia(mediaQuery).matches;
		})
		.reduce((acc, { originPropName, purePropName }) => ({
		...acc,
		[purePropName]: responsiveProps[originPropName],
		}), {});
		setProps(relevantProps);
		});
		return props;

		var useResponsiveProps = function useResponsiveProps(responsiveProps) {
		var _useState = useState({}),
		_useState2 = _slicedToArray(_useState, 2),
		props = _useState2[0],
		setProps = _useState2[1];

		useBreakpointChange(function () {
		var relevantProps = Object.keys(responsiveProps).map(parsePropName).filter(function (_ref) {
		var breakpoint = _ref.breakpoint,
		behavior = _ref.behavior;
		var mediaQuery = createMediaQuery(Layout$1.breakpoints[breakpoint.name], behavior);
		return matchMedia(mediaQuery).matches;
		}).reduce(function (acc, _ref2) {
		var originPropName = _ref2.originPropName,
		purePropName = _ref2.purePropName;
		return _objectSpread2({}, acc, _defineProperty({}, purePropName, responsiveProps[originPropName]));
		}, {});
		setProps(relevantProps);
		});
		return props;
		};
		@@ -1066,0 +1522,0 @@

package.json

		{
		"name": "atomic-layout",
		"version": "0.9.4",
		"version": "0.9.5",
		"description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
		@@ -5,0 +5,0 @@ "esnext": "src/index.ts",

umd/index.js

		@@ -1,12 +0,1 @@
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],t):t((e=e\|\|self).AtomicLayout={},e.styled,e.React)}(this,function(e,t,r){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;const n={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function o(e,t){if(!e)throw new Error(t)}function a(e,t){e\|\|console.warn(t)}var i=new class{constructor(e){return this.defaultUnit=n.defaultUnit,this.defaultBehavior=n.defaultBehavior,this.breakpoints=n.breakpoints,this.defaultBreakpointName=n.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&a(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),o(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e\|\|{}).forEach(t=>{this[t]=e[t]}),o(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),o(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),o(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function s(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function p(e){return null!=e}function u(e){if(!p(e))return"";return`${e}${"number"==typeof e&&0!==e?i.defaultUnit:""}`}const l=["/","auto"];function c(e){const t=/^[0-9]/.test(e),r=l.includes(e);return!t&&!r}const d=s(e=>{const t=[],r=[];return e.forEach(e=>{c(e)?t.push(e):r.push(e)}),[t.length>0?`'${t.join(" ")}'`:"",r.join(" ")].filter(Boolean).join(" ")},e=>e.split(" "),e=>e.replace(/'+/gm,""),e=>e.trim()),m=s(e=>e.join("\n"),e=>e.map(d),e=>e.split("\n"),e=>e.trim()),f={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:m},template:{props:["grid-template"],transformValue:m},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:u},gapCol:{props:["grid-column-gap"],transformValue:u},gapRow:{props:["grid-row-gap"],transformValue:u},gutter:{props:["grid-gap"],transformValue:u},gutterCol:{props:["grid-column-gap"],transformValue:u},gutterRow:{props:["grid-row-gap"],transformValue:u},autoRows:{props:["grid-auto-rows"],transformValue:u},autoCols:{props:["grid-auto-columns"],transformValue:u},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:u},minHeight:{props:["min-height"],transformValue:u},maxHeight:{props:["max-height"],transformValue:u},width:{props:["width"],transformValue:u},minWidth:{props:["min-width"],transformValue:u},maxWidth:{props:["max-width"],transformValue:u},margin:{props:["margin"],transformValue:u},marginTop:{props:["margin-top"],transformValue:u},marginRight:{props:["margin-right"],transformValue:u},marginBottom:{props:["margin-bottom"],transformValue:u},marginLeft:{props:["margin-left"],transformValue:u},marginVertical:{props:["margin-top","margin-bottom"],transformValue:u},marginHorizontal:{props:["margin-right","margin-left"],transformValue:u},padding:{props:["padding"],transformValue:u},paddingTop:{props:["padding-top"],transformValue:u},paddingRight:{props:["padding-right"],transformValue:u},paddingBottom:{props:["padding-bottom"],transformValue:u},paddingLeft:{props:["padding-left"],transformValue:u},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:u},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:u}};function g(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function h(e){const t=Object.keys(i.breakpoints).join("\|"),r=["down","only"].join("\|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),a=e.match(o),s=a?a[0]:"",p=e.replace(s,"").match(n),u=p?p[0]:"",l=e.replace(u,"").replace(s,""),c=u?g(u):i.defaultBreakpointName,d=c===i.defaultBreakpointName;return{originPropName:e,purePropName:l,behavior:s?g(s):i.defaultBehavior,breakpoint:{name:c,isDefault:d}}}function b(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function y(e){return Object.entries(e).filter(([e,t])=>p(t)).map(([e,t])=>[b(e),t])}const k=e=>t=>t.filter(([t])=>((e,t)=>{const[r,n]=e.split("-");return!["height","width"].includes(n)\|\|"min"===r&&["up","only"].includes(t)\|\|"max"===r&&["down","only"].includes(t)})(t,e)),x=e=>t=>t.map(e).join(" and ");function w(e,t){return s(x(([e,t])=>`(${e}:${String(u(t))})`),k(t),y)(e)}const j=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),a=i.breakpoints[r.name];return a&&!(r.isDefault&&n===i.defaultBehavior)?`@media ${w(a,n)} {${o}}`:o};function v(e){return Object.keys(e).map(h).filter(({purePropName:e})=>f.hasOwnProperty(e)).filter(({originPropName:t})=>p(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=f[t],s=e[r],p=i?i(s):s;return j(a,p,n,o)}).join(" ")}const V=t.div`
		display: ${({flex:e,inline:t})=>e?t?"inline-flex":"flex":t?"inline-block":"block"};

		&& {
		${v};
		}
		`;const $=e=>{const{children:t,...n}=e,o=r.useMemo(()=>(e=>s(x(([e,t])=>`(${e}:${/^\d/.test(String(t))?u(t):t})`),y)(e))(n),[n]),[a,i]=r.useState(!1),p=e=>{i(e.matches)};return r.useEffect(()=>{const e=matchMedia(o);return p(e),e.addListener(p),()=>e.removeListener(p)},Object.keys(n)),t(a)};function O(e,t){return r=>e(r)?t(r):r}function B(e){return t=>e.apply(null,t)}function N(e){const t=e.match(/^(min\|max)/);return t?t[0]:""}function C(e,t,r){const{behavior:o}=t,{behavior:a}=e,i="up"===o,s=o===a,p=i&&"down"===a,l=i,c={...t,...e};return Object.keys(c).reduce((n,o)=>{let a=c[o];const i=N(o);if("behavior"===o&&!r&&l&&(a="down"),"max"===i&&!r&&l){a=`calc(${u(e[o.replace(/^max/,"min")])} - 1px)`}return"min"===i&&(r?(s\|\|p)&&(a=t[o]):l&&(a=t[o])),{...n,[o]:a}},{behavior:n.defaultBehavior})}function P(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===N(r)?void 0:e[r]}),{})}const L=e=>e.replace(/^min\|max/,"_");const E=(e,t)=>e=>{const[r,...n]=e;return[t(e),...n]},W=e=>(t,r,n,o)=>{const a=n===o.length-1,{areas:i,behavior:s,breakpoint:p}=r,u=i.includes(e),l=t[t.length-1],c={...p,behavior:s},{behavior:d,...m}=l\|\|{behavior:""};return[c,l,u,a,Boolean(l)&&function(e,t){const r=Object.keys(e).concat(Object.keys(t));return r.every((e,t)=>{const n=L(e);return n===L(r[t-1]\|\|n)})}(m,p),t]},S=([e,t,r,n,o])=>o,R=([e,t,r,n])=>n&&"up"===e.behavior,F=([e,t,r,n,o,a])=>{const{behavior:i}=t\|\|{behavior:""},{behavior:s}=e,p="up"===i;let u=r&&(i===s\|\|p&&"down"===s);o\|\|(u=!1);let l=[e];return r\|\|(l=p?[e,null]:[null],p&&(u=!0)),(u?function(e){return e.slice(0,e.length-1)}(a):a).concat(l)},M=(e,t)=>t.reduce(s(F,O(R,E(0,B(P))),O(S,E(0,B(C))),W(e)),[]),A=(e,t)=>{const n=({children:n,...o})=>t.filter(Boolean).reduce((t,a,i)=>{const{behavior:s,...p}=a;return t.concat(r.createElement($,Object.assign({},p,{key:`${e.displayName}_${i}`}),t=>t&&r.createElement(e,Object.assign({},o),n)))},[]);return n.displayName=`Placeholder(${e.displayName})`,n},U=e=>t=>r.createElement(V,Object.assign({area:e},t));const z=s(e=>e.sort(),e=>Array.from(new Set(e)),e=>e.filter(c),e=>e.filter(Boolean),e=>e.split(" "),e=>e.replace(/\s+/g," "),e=>e.replace(/\r?\n\|\'+/g," ")),H=s(function(e){const t={};return r=>(function(...n){const o=e(...n);return o in t\|\|(t[o]=r(...n)),t[o]})}(e=>{return function(e){const{length:t}=e;let r=0,n=0;if(t>0)for(;n<t;)r=(r<<5)-r+e.charCodeAt(n++)\|0;return r}(Object.entries(e).reduce((e,[t,r])=>e.concat(`${t}:${r.join()}`),[]).join()).toString()})(s(function({areas:e,templates:t}){const r=e.reduce((e,r)=>{const n=M(r,t),o=1===n.length&&n.every(e=>!e.minWidth&&!e.maxWidth),a=U(r),i=function(e){return e.replace(/^./,e=>e.toUpperCase())}(r);return a.displayName=i,{...e,[i]:o?a:A(a,n)}},{});return"undefined"==typeof Proxy?r:new Proxy(r,{get:(e,t)=>t in e\|\|"symbol"==typeof t?e[t]:()=>null})},function(e){const t=Object.entries(e).reduce((e,[t,r])=>{const{breakpoint:n,behavior:o}=h(t);return{areas:e.areas.concat(r),templates:e.templates.concat({breakpoint:i.breakpoints[n.name],behavior:o,areas:r})}},{areas:[],templates:[]}),{areas:r,templates:n}=t;return{areas:Array.from(new Set(r)),templates:n}})),e=>Object.keys(e).filter(e=>{const{purePropName:t}=h(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:z(e[r])}),{})),T=t.div`
		&& {
		${v};
		display: ${({inline:e})=>e?"inline-grid":"grid"};
		}
		`;function _(e){return Object.entries(e).map(([e,t])=>[N(e),e,t]).filter(([e])=>"max"!==e).reduce((e,[t,r,n])=>{const o="min"===t,a=o?r.replace(/^min/,"max"):r,[,i,s]=/(\d+)(.+)?/.exec(n),p=o?parseFloat(i)-1:i;return{...e,[a]:s?`${p}${s}`:p}},{})}const D=e=>"string"==typeof e?i.breakpoints[e]:e;const I=(e,t=50)=>{const n=function(e,t=250){let r;return(...n)=>{clearTimeout(r),r=setTimeout(()=>(r=null,e(...n)),t)}}(e,t);r.useEffect(()=>(n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)),[])},q=(e,t,r=i.breakpoints)=>{let n;I(()=>{const t=Object.keys(r).find(e=>{const t=w(r[e],"only");return matchMedia(t).matches});n!==t&&(e(t),n=t)},t)},G=(e=>{const t=Object.keys(e);return(r,n)=>{const o=Object.keys(r).filter(e=>{const r=t.includes(e);return r\|\|console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',e,t.join(", ")),r}).find(t=>{const r=e[t],n=w(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(i.breakpoints);e.Box=V,e.Composition=({children:e,...t})=>{const n=H(t),o=Object.keys(n).length>0,i=typeof e,s="function"===i;return a(!(o&&!s),`Failed to render 'Composition' with template areas ["${Object.keys(n).join('", "')}"]: expected children to be a function, but got: ${i}. Please provide render function as children, or remove assigned template props.`),r.createElement(T,Object.assign({},t),o&&s?e(n):e)},e.MediaQuery=$,e.Only=({children:e,except:t,for:n,from:o,to:a,...i})=>{const s=((e,t)=>(...n)=>{const o=A(V,n);return r.createElement(o,Object.assign({},t),e)})(e,i);if(n)return s(D(n));const p=D(o),u=D(a);return p&&u&&!t?s(C({behavior:"down",...u},{behavior:"up",...p},!1)):p&&u&&t?s(_(p),P(u)):p&&!u?s(P(p)):!p&&u?s(_(u)):e},e.default=i,e.useBreakpointChange=q,e.useResponsiveProps=e=>{const[t,n]=r.useState({});return q(()=>{const t=Object.keys(e).map(h).filter(({breakpoint:e,behavior:t})=>{const r=w(i.breakpoints[e.name],t);return matchMedia(r).matches}).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{});n(t)}),t},e.useResponsiveValue=(e,t)=>{const[n,o]=r.useState(t);return q(()=>{const r=G(e,t);o(r)}),n},e.useViewportChange=I,e.withBreakpoints=G,Object.defineProperty(e,"__esModule",{value:!0})});
		!function(r,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],e):e((r=r\|\|self).AtomicLayout={},r.styled,r.React)}(this,function(r,e,n){"use strict";function t(r){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r})(r)}function o(r,e){for(var n=0;n<e.length;n++){var t=e[n];t.enumerable=t.enumerable\|\|!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(r,t.key,t)}}function a(r,e,n){return e in r?Object.defineProperty(r,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):r[e]=n,r}function i(r,e){var n=Object.keys(r);return Object.getOwnPropertySymbols&&n.push.apply(n,Object.getOwnPropertySymbols(r)),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),n}function u(r){for(var e=1;e<arguments.length;e++)if(e%2){var n=null!=arguments[e]?arguments[e]:{};i(n,!0).forEach(function(e){a(r,e,n[e])})}else Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(arguments[e])):i(n).forEach(function(n){Object.defineProperty(r,n,Object.getOwnPropertyDescriptor(arguments[e],n))});return r}function c(r,e){if(null==r)return{};var n,t,o=function(r,e){if(null==r)return{};var n,t,o={},a=Object.keys(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0\|\|(o[n]=r[n]);return o}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(t=0;t<a.length;t++)n=a[t],e.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(r,n)&&(o[n]=r[n])}return o}function p(r,e){return e\|\|(e=r.slice(0)),Object.freeze(Object.defineProperties(r,{raw:{value:Object.freeze(e)}}))}function f(r,e){return l(r)\|\|function(r,e){var n=[],t=!0,o=!1,a=void 0;try{for(var i,u=r[Symbol.iterator]();!(t=(i=u.next()).done)&&(n.push(i.value),!e\|\|n.length!==e);t=!0);}catch(r){o=!0,a=r}finally{try{t\|\|null==u.return\|\|u.return()}finally{if(o)throw a}}return n}(r,e)\|\|m()}function s(r){return function(r){if(Array.isArray(r)){for(var e=0,n=new Array(r.length);e<r.length;e++)n[e]=r[e];return n}}(r)\|\|d(r)\|\|function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function l(r){if(Array.isArray(r))return r}function d(r){if(Symbol.iterator in Object(r)\|\|"[object Arguments]"===Object.prototype.toString.call(r))return Array.from(r)}function m(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}e=e&&e.hasOwnProperty("default")?e.default:e;var g={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function h(r,e){if(!r)throw new Error(e)}function v(r,e){r\|\|console.warn(e)}var b=new(function(){function r(e){return function(r,e){if(!(r instanceof e))throw new TypeError("Cannot call a class as a function")}(this,r),this.defaultUnit=g.defaultUnit,this.defaultBehavior=g.defaultBehavior,this.breakpoints=g.breakpoints,this.defaultBreakpointName=g.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}var e,n,a;return e=r,(n=[{key:"configure",value:function(r){var e=this,n=!(arguments.length>1&&void 0!==arguments[1])\|\|arguments[1];return n&&v(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),h(r&&"object"===t(r),"Failed to configure Layout: expected an options Object, but got: ".concat(r,".")),Object.keys(r\|\|{}).forEach(function(n){e[n]=r[n]}),h(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),h(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),'Failed to configure Layout: cannot use "'.concat(this.defaultBreakpointName,'" as the default breakpoint (breakpoint not found).')),h(this.defaultBreakpointName,'Failed to configure Layout: expected "defaultBreakpointName" property set, but got: '.concat(this.defaultBreakpointName,".")),this.isConfigureCalled=n,this}}])&&o(e.prototype,n),a&&o(e,a),r}());function y(){for(var r=arguments.length,e=new Array(r),n=0;n<r;n++)e[n]=arguments[n];return e.reduce(function(r,e){return function(){return r(e.apply(void 0,arguments))}})}function w(r){return null!=r}function j(r){if(!w(r))return"";var e="number"==typeof r&&0!==r?b.defaultUnit:"";return"".concat(r).concat(e)}var k=["/","auto"];function x(r){var e=/^[0-9]/.test(r),n=k.includes(r);return!e&&!n}var O=y(function(r){var e=[],n=[];return r.forEach(function(r){x(r)?e.push(r):n.push(r)}),[e.length>0?"'".concat(e.join(" "),"'"):"",n.join(" ")].filter(Boolean).join(" ")},function(r){return r.split(" ")},function(r){return r.replace(/'+/gm,"")},function(r){return r.trim()}),V=y(function(r){return r.join("\n")},function(r){return r.map(O)},function(r){return r.split("\n")},function(r){return r.trim()}),P={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:V},template:{props:["grid-template"],transformValue:V},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:j},gapCol:{props:["grid-column-gap"],transformValue:j},gapRow:{props:["grid-row-gap"],transformValue:j},gutter:{props:["grid-gap"],transformValue:j},gutterCol:{props:["grid-column-gap"],transformValue:j},gutterRow:{props:["grid-row-gap"],transformValue:j},autoRows:{props:["grid-auto-rows"],transformValue:j},autoCols:{props:["grid-auto-columns"],transformValue:j},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:j},minHeight:{props:["min-height"],transformValue:j},maxHeight:{props:["max-height"],transformValue:j},width:{props:["width"],transformValue:j},minWidth:{props:["min-width"],transformValue:j},maxWidth:{props:["max-width"],transformValue:j},margin:{props:["margin"],transformValue:j},marginTop:{props:["margin-top"],transformValue:j},marginRight:{props:["margin-right"],transformValue:j},marginBottom:{props:["margin-bottom"],transformValue:j},marginLeft:{props:["margin-left"],transformValue:j},marginVertical:{props:["margin-top","margin-bottom"],transformValue:j},marginHorizontal:{props:["margin-right","margin-left"],transformValue:j},padding:{props:["padding"],transformValue:j},paddingTop:{props:["padding-top"],transformValue:j},paddingRight:{props:["padding-right"],transformValue:j},paddingBottom:{props:["padding-bottom"],transformValue:j},paddingLeft:{props:["padding-left"],transformValue:j},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:j},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:j}};function B(r){return r.slice(0,1).toLowerCase()+r.slice(1,r.length)}function S(r){var e=Object.keys(b.breakpoints).join("\|"),n=["down","only"].join("\|"),t=new RegExp("(".concat(e,")$"),"gi"),o=new RegExp("(".concat(n,")$"),"gi"),a=r.match(o),i=a?a[0]:"",u=r.replace(i,"").match(t),c=u?u[0]:"",p=r.replace(c,"").replace(i,""),f=c?B(c):b.defaultBreakpointName,s=f===b.defaultBreakpointName;return{originPropName:r,purePropName:p,behavior:i?B(i):b.defaultBehavior,breakpoint:{name:f,isDefault:s}}}function N(r){return Object.entries(r).filter(function(r){var e=f(r,2);e[0];return w(e[1])}).map(function(r){var e,n=f(r,2),t=n[0],o=n[1];return[(e=t,e.replace(/[A-Z]/g,function(r){return"-".concat(r).toLowerCase()})),o]})}var E=function(r){return function(e){return e.filter(function(e){return function(r,e){var n=f(r.split("-"),2),t=n[0],o=n[1];return!["height","width"].includes(o)\|\|"min"===t&&["up","only"].includes(e)\|\|"max"===t&&["down","only"].includes(e)}(f(e,1)[0],r)})}},C=function(r){return function(e){return e.map(r).join(" and ")}};function L(r,e){return y(C(function(r){var e=f(r,2),n=e[0],t=e[1];return"(".concat(n,":").concat(String(j(t)),")")}),E(e),N)(r)}var A=function(r,e,n,t){var o=r.map(function(r){return"".concat(r,":").concat(String(e),";")}).join(""),a=b.breakpoints[n.name];return a&&!(n.isDefault&&t===b.defaultBehavior)?"@media ".concat(L(a,t)," {").concat(o,"}"):o};function W(r){return Object.keys(r).map(S).filter(function(r){var e=r.purePropName;return P.hasOwnProperty(e)}).filter(function(e){var n=e.originPropName;return w(r[n])}).map(function(e){var n=e.purePropName,t=e.originPropName,o=e.breakpoint,a=e.behavior,i=P[n],u=i.props,c=i.transformValue,p=r[t],f=c?c(p):p;return A(u,f,o,a)}).join(" ")}function R(){var r=p(["\n display: ",";\n\n && {\n ",";\n }\n"]);return R=function(){return r},r}var F=e.div(R(),function(r){var e=r.flex,n=r.inline;return e?n?"inline-flex":"flex":n?"inline-block":"block"},W);var D=function(r){var e=r.children,t=c(r,["children"]),o=n.useMemo(function(){return function(r){return y(C(function(r){var e=f(r,2),n=e[0],t=e[1],o=/^\d/.test(String(t))?j(t):t;return"(".concat(n,":").concat(o,")")}),N)(r)}(t)},[t]),a=f(n.useState(!1),2),i=a[0],u=a[1],p=function(r){u(r.matches)};return n.useEffect(function(){var r=matchMedia(o);return p(r),r.addListener(p),function(){return r.removeListener(p)}},Object.keys(t)),e(i)};function M(r,e){return function(n){return r(n)?e(n):n}}function T(r){return function(e){return r.apply(null,e)}}function z(r){var e=r.match(/^(min\|max)/);return e?e[0]:""}function I(r,e,n){var t=e.behavior,o=r.behavior,i="up"===t,c=t===o,p=i&&"down"===o,f=i,s=u({},e,{},r);return Object.keys(s).reduce(function(t,o){var i=s[o],l=z(o);if("behavior"===o&&!n&&f&&(i="down"),"max"===l&&!n&&f){var d=r[o.replace(/^max/,"min")];i="calc(".concat(j(d)," - 1px)")}return"min"===l&&(n?(c\|\|p)&&(i=e[o]):f&&(i=e[o])),u({},t,a({},o,i))},{behavior:g.defaultBehavior})}function U(r){return Object.keys(r).reduce(function(e,n){return u({},e,a({},n,"max"===z(n)?void 0:r[n]))},{})}var H=function(r){return r.replace(/^min\|max/,"_")};var _=function(r,e){return function(r){var n,t=l(n=r)\|\|d(n)\|\|m(),o=(t[0],t.slice(1));return[e(r)].concat(s(o))}},q=function(r){return function(e,n,t,o){var a,i,p,f=t===o.length-1,s=n.areas,l=n.behavior,d=n.breakpoint,m=s.includes(r),g=e[e.length-1],h=u({},d,{behavior:l}),v=g\|\|{behavior:""},b=(v.behavior,c(v,["behavior"]));return[h,g,m,f,Boolean(g)&&(a=b,i=d,(p=Object.keys(a).concat(Object.keys(i))).every(function(r,e){var n=H(r);return n===H(p[e-1]\|\|n)})),e]}},$=function(r){var e=f(r,5);e[0],e[1],e[2],e[3];return e[4]},G=function(r){var e=f(r,4),n=e[0];e[1],e[2];return e[3]&&"up"===n.behavior},Q=function(r){var e=f(r,6),n=e[0],t=e[1],o=e[2],a=(e[3],e[4]),i=e[5],u=(t\|\|{behavior:""}).behavior,c=n.behavior,p="up"===u,s=o&&(u===c\|\|p&&"down"===c);a\|\|(s=!1);var l,d=[n];return o\|\|(d=p?[n,null]:[null],p&&(s=!0)),(s?(l=i).slice(0,l.length-1):i).concat(d)},Z=function(r,e){return e.reduce(y(Q,M(G,_(0,T(U))),M($,_(0,T(I))),q(r)),[])},J=function(r,e){var t=function(t){var o=t.children,a=c(t,["children"]);return e.filter(Boolean).reduce(function(e,t,i){t.behavior;var u=c(t,["behavior"]);return e.concat(n.createElement(D,Object.assign({},u,{key:"".concat(r.displayName,"_").concat(i)}),function(e){return e&&n.createElement(r,Object.assign({},a),o)}))},[])};return t.displayName="Placeholder(".concat(r.displayName,")"),t},K=function(r){return function(e){return n.createElement(F,Object.assign({area:r},e))}};var X,Y,rr=y(function(r){return r.sort()},function(r){return Array.from(new Set(r))},function(r){return r.filter(x)},function(r){return r.filter(Boolean)},function(r){return r.split(" ")},function(r){return r.replace(/\s+/g," ")},function(r){return r.replace(/\r?\n\|\'+/g," ")}),er=y((X=function(r){return function(r){var e=r.length,n=0,t=0;if(e>0)for(;t<e;)n=(n<<5)-n+r.charCodeAt(t++)\|0;return n}(Object.entries(r).reduce(function(r,e){var n=f(e,2),t=n[0],o=n[1];return r.concat("".concat(t,":").concat(o.join()))},[]).join()).toString()},Y={},function(r){return function(){var e=X.apply(void 0,arguments);return e in Y\|\|(Y[e]=r.apply(void 0,arguments)),Y[e]}})(y(function(r){var e=r.areas,n=r.templates,o=e.reduce(function(r,e){var t=Z(e,n),o=1===t.length&&t.every(function(r){return!r.minWidth&&!r.maxWidth}),i=K(e),c=e.replace(/^./,function(r){return r.toUpperCase()});return i.displayName=c,u({},r,a({},c,o?i:J(i,t)))},{});return"undefined"==typeof Proxy?o:new Proxy(o,{get:function(r,e){return e in r\|\|"symbol"===t(e)?r[e]:function(){return null}}})},function(r){var e=Object.entries(r).reduce(function(r,e){var n=f(e,2),t=n[0],o=n[1],a=S(t),i=a.breakpoint,u=a.behavior;return{areas:r.areas.concat(o),templates:r.templates.concat({breakpoint:b.breakpoints[i.name],behavior:u,areas:o})}},{areas:[],templates:[]}),n=e.areas,t=e.templates;return{areas:Array.from(new Set(n)),templates:t}})),function(r){return Object.keys(r).filter(function(r){var e=S(r).purePropName;return["areas","template"].includes(e)}).reduce(function(e,n){return u({},e,a({},n,rr(r[n])))},{})});function nr(){var r=p(["\n && {\n ",";\n display: ",";\n }\n"]);return nr=function(){return r},r}var tr=e.div(nr(),W,function(r){return r.inline?"inline-grid":"grid"});function or(r){return Object.entries(r).map(function(r){var e=f(r,2),n=e[0],t=e[1];return[z(n),n,t]}).filter(function(r){return"max"!==f(r,1)[0]}).reduce(function(r,e){var n=f(e,3),t=n[0],o=n[1],i=n[2],c="min"===t,p=c?o.replace(/^min/,"max"):o,s=f(/(\d+)(.+)?/.exec(i),3),l=s[1],d=s[2],m=c?parseFloat(l)-1:l;return u({},r,a({},p,d?"".concat(m).concat(d):m))},{})}var ar=function(r){return"string"==typeof r?b.breakpoints[r]:r};function ir(r){var e,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:250;return function(){for(var t=arguments.length,o=new Array(t),a=0;a<t;a++)o[a]=arguments[a];var i=function(){return e=null,r.apply(void 0,o)};clearTimeout(e),e=setTimeout(i,n)}}var ur,cr,pr=function(r){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:50,t=ir(r,e);n.useEffect(function(){return t(),window.addEventListener("resize",t),function(){return window.removeEventListener("resize",t)}},[])},fr=function(r,e){var n,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b.breakpoints;pr(function(){var e=Object.keys(t).find(function(r){var e=L(t[r],"only");return matchMedia(e).matches});n!==e&&(r(e),n=e)},e)},sr=(ur=b.breakpoints,cr=Object.keys(ur),function(r,e){var n=Object.keys(r).filter(function(r){var e=cr.includes(r);return e\|\|console.warn('useBreakpoints: Breakpoint "%s" is not found. Add it via "Layout.configure()", or use one of the existing breakpoints (%s).',r,cr.join(", ")),e}).find(function(r){var e=ur[r],n=L(e,"only");return e&&matchMedia(n).matches});return n?r[n]:e});r.Box=F,r.Composition=function(r){var e=r.children,o=c(r,["children"]),a=er(o),i=Object.keys(a).length>0,u=t(e),p="function"===u;return v(!(i&&!p),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(a).join('", "'),'"]: expected children to be a function, but got: ').concat(u,". Please provide render function as children, or remove assigned template props.")),n.createElement(tr,Object.assign({},o),i&&p?e(a):e)},r.MediaQuery=D,r.Only=function(r){var e=r.children,t=r.except,o=r.for,a=r.from,i=r.to,p=function(r,e){return function(){for(var t=arguments.length,o=new Array(t),a=0;a<t;a++)o[a]=arguments[a];var i=J(F,o);return n.createElement(i,Object.assign({},e),r)}}(e,c(r,["children","except","for","from","to"]));if(o)return p(ar(o));var f=ar(a),s=ar(i);return f&&s&&!t?p(I(u({behavior:"down"},s),u({behavior:"up"},f),!1)):f&&s&&t?p(or(f),U(s)):f&&!s?p(U(f)):!f&&s?p(or(s)):e},r.default=b,r.useBreakpointChange=fr,r.useResponsiveProps=function(r){var e=f(n.useState({}),2),t=e[0],o=e[1];return fr(function(){var e=Object.keys(r).map(S).filter(function(r){var e=r.breakpoint,n=r.behavior,t=L(b.breakpoints[e.name],n);return matchMedia(t).matches}).reduce(function(e,n){var t=n.originPropName;return u({},e,a({},n.purePropName,r[t]))},{});o(e)}),t},r.useResponsiveValue=function(r,e){var t=f(n.useState(e),2),o=t[0],a=t[1];return fr(function(){var n=sr(r,e);a(n)}),o},r.useViewportChange=pr,r.withBreakpoints=sr,Object.defineProperty(r,"__esModule",{value:!0})});

esm/index.js.map

Sorry, the diff of this file is not supported yet

atomic-layout - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics