atomic-layout - npm Package Compare versions

Comparing version 0.9.8 to 0.9.9

cjs/index.js

@@ -1,13 +0,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("styled-components"))&&"object"==typeof e&&"default"in e?e.default:e,r=require("react");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 m=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()),d=s(e=>e.join("\n"),e=>e.map(m),e=>e.split("\n"),e=>e.trim()),f={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:d},template:{props:["grid-template"],transformValue:d},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"]},alignContent:{props:["align-content"]},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,m=c===i.defaultBreakpointName;return{originPropName:e,purePropName:l,behavior:s?g(s):i.defaultBehavior,breakpoint:{name:c,isDefault:m}}}function b(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function x(e){return Object.entries(e).filter(([e,t])=>p(t)).map(([e,t])=>[b(e),t])}const y=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)),k=e=>t=>t.map(e).join(" and ");function w(e,t){return s(k(([e,t])=>`(${e}:${String(u(t))})`),y(t),x)(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`
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("styled-components")),r=require("react"),n=e(r);const o={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 a(e,t){if(!e)throw new Error(t)}function i(e,t){e||console.warn(t)}var s=new class{constructor(e){return this.defaultUnit=o.defaultUnit,this.defaultBehavior=o.defaultBehavior,this.breakpoints=o.breakpoints,this.defaultBreakpointName=o.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&i(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),a(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e||{}).forEach(t=>{this[t]=e[t]}),a(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),a(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),a(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function p(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function u(e){return null!=e}function c(e){if(!u(e))return"";return`${e}${"number"==typeof e&&0!==e?s.defaultUnit:""}`}const l=["/","auto"];function m(e){const t=/^[0-9]/.test(e),r=l.includes(e);return!t&&!r}const d=p(e=>{const t=[],r=[];return e.forEach(e=>{m(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()),f=p(e=>e.join("\n"),e=>e.map(d),e=>e.split("\n"),e=>e.trim()),g={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:f},template:{props:["grid-template"],transformValue:f},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:c},gapCol:{props:["grid-column-gap"],transformValue:c},gapRow:{props:["grid-row-gap"],transformValue:c},gutter:{props:["grid-gap"],transformValue:c},gutterCol:{props:["grid-column-gap"],transformValue:c},gutterRow:{props:["grid-row-gap"],transformValue:c},autoRows:{props:["grid-auto-rows"],transformValue:c},autoCols:{props:["grid-auto-columns"],transformValue:c},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},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:c},minHeight:{props:["min-height"],transformValue:c},maxHeight:{props:["max-height"],transformValue:c},width:{props:["width"],transformValue:c},minWidth:{props:["min-width"],transformValue:c},maxWidth:{props:["max-width"],transformValue:c},margin:{props:["margin"],transformValue:c},marginTop:{props:["margin-top"],transformValue:c},marginRight:{props:["margin-right"],transformValue:c},marginBottom:{props:["margin-bottom"],transformValue:c},marginLeft:{props:["margin-left"],transformValue:c},marginVertical:{props:["margin-top","margin-bottom"],transformValue:c},marginHorizontal:{props:["margin-right","margin-left"],transformValue:c},padding:{props:["padding"],transformValue:c},paddingTop:{props:["padding-top"],transformValue:c},paddingRight:{props:["padding-right"],transformValue:c},paddingBottom:{props:["padding-bottom"],transformValue:c},paddingLeft:{props:["padding-left"],transformValue:c},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:c},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:c}};function h(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function b(e){const t=Object.keys(s.breakpoints).join("|"),r=["down","only"].join("|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),a=e.match(o),i=a?a[0]:"",p=e.replace(i,"").match(n),u=p?p[0]:"",c=e.replace(u,"").replace(i,""),l=u?h(u):s.defaultBreakpointName,m=l===s.defaultBreakpointName;return{originPropName:e,purePropName:c,behavior:i?h(i):s.defaultBehavior,breakpoint:{name:l,isDefault:m}}}function k(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function x(e){return Object.entries(e).filter(([e,t])=>u(t)).map(([e,t])=>[k(e),t])}const y=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)),w=e=>t=>t.map(e).join(" and ");function j(e,t){return p(w(([e,t])=>`(${e}:${String(c(t))})`),y(t),x)(e)}const v=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),a=s.breakpoints[r.name];return a&&!(r.isDefault&&n===s.defaultBehavior)?`@media ${j(a,n)} {${o}}`:o};function V(e){return Object.keys(e).map(b).filter(({purePropName:e})=>g.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=g[t],s=e[r],p=i?i(s):s;return v(a,p,n,o)}).join(" ")}const $=t.div`
   display: ${({flex:e,inline:t})=>e?t?"inline-flex":"flex":t?"inline-block":"block"};
 
   && {
-    ${v};
+    ${V};
   }
-`;const $=e=>{const{children:t,...n}=e,o=r.useMemo(()=>(e=>s(k(([e,t])=>`(${e}:${/^\d/.test(String(t))?u(t):t})`),x)(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 E=e=>e.replace(/^min|max/,"_");const L=(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:m,...d}=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=E(e);return n===E(r[t-1]||n)})}(d,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,L(0,B(P))),O(S,L(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`
+`;const O=e=>{const{children:t,...n}=e,o=r.useMemo(()=>(e=>p(w(([e,t])=>{return`(${e}:${/^\d/.test(String(t))?c(t):t})`}),x)(e))(n),[n]),[a,i]=r.useState(!1),s=e=>{i(e.matches)};return r.useEffect(()=>{const e=matchMedia(o);return s(e),e.addListener(s),()=>e.removeListener(s)},Object.keys(n)),t(a)};function B(e){return e.slice(0,e.length-1)}const N=e=>e.replace(/^min|max/,"_");function C(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function E(e,t,r){const{behavior:n}=t,{behavior:o}=e,a="up"===n,i=n===o,s=a&&"down"===o,p=a,u=!r&&p?"down":o,l={...t.breakpoint,...e.breakpoint};return{behavior:u,breakpoint:Object.keys(l).reduce((n,o)=>{let a=l[o];const u=C(o);if("max"===u&&!r&&p){a=`calc(${c(e.breakpoint[o.replace(/^max/,"min")])} - 1px)`}return"min"===u&&(r?(i||s)&&(a=t.breakpoint[o]):p&&(a=t.breakpoint[o])),{...n,[o]:a}},{})}}function P(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===C(r)?void 0:e[r]}),{})}const L=(e,t)=>{const r=e.behavior===t.behavior,n="up"===e.behavior&&"down"===t.behavior;return!(!r&&!n)&&function(e,t){const r=Object.keys(e).concat(Object.keys(t));return r.every((e,t)=>{const n=N(e);return n===N(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},W=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?P(t.breakpoint):t.breakpoint});const R=(e,t)=>{const n=({children:n,...o})=>{const a=t.reduce((t,a,i)=>t.concat(r.createElement(O,Object.assign({},a,{key:`${e.displayName}_${i}`}),t=>t&&r.createElement(e,Object.assign({},o),n))),[]);return r.createElement(r.Fragment,null,a)};return n.displayName=`Placeholder(${e.displayName})`,n},S=e=>t=>r.createElement($,Object.assign({area:e},t));const F=p(e=>e.sort(),e=>Array.from(new Set(e)),e=>e.filter(m),e=>e.filter(Boolean),e=>e.split(" "),e=>e.replace(/\s+/g," "),e=>e.replace(/\r?\n|\'+/g," ")),M=p(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()})(p((function({areas:e,templates:t}){const r=e.reduce((e,r)=>{const n=function(e,t){const r=t.length;return t.reduce((t,n,o)=>{const{areas:a,behavior:i,breakpoint:s}=n,p=o===r-1,u=a.includes(e),c={breakpoint:s,behavior:i},l=t[t.length-1];if(u){if(l&&L(l,c)){const e=E(c,l,u);return B(t).concat(W(p,e))}return t.concat(W(p,c))}if(l){const e=E(c,l,u);return B(t).concat([e,null])}return t.concat(null)},[])}(r,t),o=n.filter(Boolean).map(e=>e.breakpoint),a=1===n.length&&o.every(e=>!e.minWidth&&!e.maxWidth),i=S(r),s=function(e){return e.replace(/^./,e=>e.toUpperCase())}(r);return i.displayName=s,{...e,[s]:a?i:R(i,o)}},{});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}=b(t);return{areas:e.areas.concat(r),templates:e.templates.concat({breakpoint:s.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}=b(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:F(e[r])}),{})),A=t.div`
   && {
-    ${v};
+    ${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);exports.Box=V,exports.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)},exports.MediaQuery=$,exports.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},exports.default=i,exports.useBreakpointChange=q,exports.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},exports.useResponsiveValue=(e,t)=>{const[n,o]=r.useState(t);return q(()=>{const r=G(e,t);o(r)}),n},exports.useViewportChange=I,exports.withBreakpoints=G;
+`;function U(e){return Object.entries(e).map(([e,t])=>[C(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 z=e=>"string"==typeof e?s.breakpoints[e]:e;const D=(e,t=70)=>{const n=r.useRef();r.useEffect(()=>{n.current=function(e,t){let r,n=null;return function o(...a){const i=Date.now();clearTimeout(n),!r||i-r>=t?(e.apply(null,a),r=i):n=setTimeout(o.bind(null,...a),t-(i-r))}}(e,t)}),r.useEffect(()=>{const{current:e}=n;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},H=(e,t,r=s.breakpoints)=>{let n;D(()=>{const t=Object.keys(r).find(e=>{const t=j(r[e],"only");return matchMedia(t).matches});n!==t&&(e(t),n=t)},t)},T=(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=j(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(s.breakpoints),_=e=>{const[t,n]=r.useState();return H(()=>{const t=Object.keys(e).map(b).filter(({breakpoint:e,behavior:t})=>{const r=j(s.breakpoints[e.name],t);return matchMedia(r).matches}).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{});n(t)}),t||{}};exports.Box=$,exports.Composition=({children:e,...t})=>{const n=M(t),o=Object.keys(n).length>0,a=typeof e,s="function"===a;return i(!(o&&!s),`Failed to render 'Composition' with template areas ["${Object.keys(n).join('", "')}"]: expected children to be a function, but got: ${a}. Please provide render function as children, or remove assigned template props.`),r.createElement(A,Object.assign({},t),o&&s?e(n):e)},exports.MediaQuery=O,exports.Only=({children:e,except:t,for:n,from:o,to:a,...i})=>{const s=((e,t)=>(...n)=>{const o=R($,n);return r.createElement(o,Object.assign({},t),e)})(e,i);if(n)return s(z(n));const p=z(o),u=z(a);if(p&&u&&!t){return s(E({behavior:"down",breakpoint:u},{behavior:"up",breakpoint:p},!1).breakpoint)}return p&&u&&t?s(U(p),P(u)):p&&!u?s(P(p)):!p&&u?s(U(u)):e},exports.default=s,exports.defaultOptions=o,exports.useBreakpointChange=H,exports.useResponsiveComponent=function(e){return t=>{const r=_(t);return n.createElement(e,Object.assign({},r))}},exports.useResponsiveProps=_,exports.useResponsiveValue=(e,t)=>{const[n,o]=r.useState(t);return H(()=>{const r=T(e,t);o(r)}),n},exports.useViewportChange=D,exports.withBreakpoints=T;
 //# sourceMappingURL=index.js.map

esm/index.js

 import styled from 'styled-components';
-import { useMemo, useState, useEffect, createElement } from 'react';
+import React__default, { useMemo, useState, useEffect, createElement, Fragment, useRef } from 'react';
 
@@ -141,18 +141,2 @@ function _typeof(obj) {
 
-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) {
@@ -162,7 +146,7 @@ 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) {
+  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
+    return;
+  }
 
-function _iterableToArrayLimit(arr, i) {
   var _arr = [];
@@ -193,6 +177,2 @@ var _n = true;
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
-}
-
 function _nonIterableRest() {
@@ -255,2 +235,4 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance");
    * Applies global layout options.
+   * Make sure to call this method once, preferably on the rool level
+   * of your application.
    */
@@ -276,8 +258,3 @@
       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
+      invariant(this.defaultBreakpointName, "Failed to configure Layout: expected \"defaultBreakpointName\" property set, but got: ".concat(this.defaultBreakpointName, ".")); // Mark configure method as called to prevent its multiple calls
 
@@ -693,3 +670,3 @@ this.isConfigureCalled = warnOnMultiple;
 /**
- * Joins a given query params list with the given transformer function.
+ * Joins a given media query params list with the given transformer function.
  */
@@ -713,31 +690,34 @@
 
-var createStyleString = function createStyleString(propsList, propValue, breakpoint, behavior) {
-  var styleProps = propsList.map(function (propName) {
+/**
+ * Generateds a single CSS string for the set of props,
+ * value, and its responsive information.
+ */
+
+var createStyleString = function createStyleString(cssProps, propValue, parsedBreakpoint, behavior) {
+  var styleString = cssProps.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.
-   */
+  }).join(''); // Get a breakpoint dimensions based on the statically analyzed breakpoint.
 
-  var shouldWrapInMediaQuery = breakpointOptions && !(breakpoint.isDefault && behavior === Layout$1.defaultBehavior);
-  return shouldWrapInMediaQuery ? "@media ".concat(createMediaQuery(breakpointOptions, behavior), " {").concat(styleProps, "}") : styleProps;
+  var breakpointOptions = Layout$1.breakpoints[parsedBreakpoint.name]; // Wrap CSS rule in a media query only if its prop includes
+  // a breakpoint and behavior different from the default ones.
+
+  var shouldWrapInMediaQuery = breakpointOptions && !(parsedBreakpoint.isDefault && behavior === Layout$1.defaultBehavior);
+  return shouldWrapInMediaQuery ? "@media ".concat(createMediaQuery(breakpointOptions, behavior), " {").concat(styleString, "}") : styleString;
 };
+/**
+ * Transforms known prop aliases to CSS rules for the given props.
+ */
 
+
 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 */
+  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 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 each prop to a CSS rule string
   .map(function (_ref3) {
@@ -772,7 +752,7 @@ var purePropName = _ref3.purePropName,
 
-function memoizeWith(mappingFunc) {
+function memoizeWith(saltGenerator) {
   var cache = {};
   return function (func) {
     return function () {
-      var key = mappingFunc.apply(void 0, arguments);
+      var key = saltGenerator.apply(void 0, arguments);
 
@@ -895,12 +875,28 @@ if (!(key in cache)) {
 
-function when(predicate, whenTrueFunc) {
-  return function (args) {
-    return predicate(args) ? whenTrueFunc(args) : args;
-  };
-}
+/**
+ * Replaces the prefixes in a parameter name.
+ * Allows strict comparison of same parameters with different prefixes.
+ * Does not test for inclusion/notch.
+ *
+ * @example
+ * neutralizeParamName('maxWidth') // "_width"
+ * neutralizeParamName('minWidth') // "_width"
+ */
+var neutralizeParamName = function neutralizeParamName(paramName) {
+  return paramName.replace(/^min|max/, '_');
+};
+/**
+ * Determines whether two given breakpoints can be merged.
+ * Assures non-compatible breakpoints are not prompted to
+ * be merged during the area params composition.
+ */
 
-function spread(func) {
-  return function (args) {
-    return func.apply(null, args);
-  };
+
+function shouldCombineBreakpoints(breakpointA, breakpointB) {
+  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;
+  });
 }
@@ -914,30 +910,25 @@
 /**
- * Merges two given mergable breakpoints.
+ * Merges two given area records.
  */
 
-function mergeBreakpoints(breakpointA, breakpointB, includesArea) {
-  var prevBehavior = breakpointB.behavior;
-  var nextBehavior = breakpointA.behavior;
-  var wentUp = prevBehavior === 'up';
-  var goesDown = nextBehavior === 'down';
-  var behavesSame = prevBehavior === nextBehavior;
+function mergeAreaRecords(nextAreaRecord, prevAreaRecord, includesArea) {
+  var prevRecordBehavior = prevAreaRecord.behavior;
+  var nextRecordBehavior = nextAreaRecord.behavior;
+  var wentUp = prevRecordBehavior === 'up';
+  var goesDown = nextRecordBehavior === 'down';
+  var behavesSame = prevRecordBehavior === nextRecordBehavior;
   var behavesInclusive = wentUp && goesDown;
   var shouldStretch = wentUp;
+  var nextBehavior = !includesArea && shouldStretch ? 'down' : nextRecordBehavior;
 
-  var mergedBreakpoint = _objectSpread2({}, breakpointB, {}, breakpointA);
+  var mergedBreakpoint = _objectSpread2({}, prevAreaRecord.breakpoint, {}, nextAreaRecord.breakpoint);
 
-  return Object.keys(mergedBreakpoint).reduce(function (acc, propName) {
+  var nextBreakpoint = 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)");
+        var reversedValue = nextAreaRecord.breakpoint[propName.replace(/^max/, 'min')];
+        nextValue = "calc(".concat(transformNumeric(reversedValue), " - 1px)");
       }
@@ -949,7 +940,7 @@ }
         if (behavesSame || behavesInclusive) {
-          nextValue = breakpointB[propName];
+          nextValue = prevAreaRecord.breakpoint[propName];
         }
       } else {
         if (shouldStretch) {
-          nextValue = breakpointB[propName];
+          nextValue = prevAreaRecord.breakpoint[propName];
         }
@@ -960,5 +951,7 @@ }
     return _objectSpread2({}, acc, _defineProperty({}, propName, nextValue));
-  }, {
-    behavior: defaultOptions.defaultBehavior
-  });
+  }, {});
+  return {
+    behavior: nextBehavior,
+    breakpoint: nextBreakpoint
+  };
 }
@@ -978,137 +971,70 @@
 
-/**
- * Replaces the prefixes in a parameter name.
- * Allows strict comparison of same parameters with different prefixes.
- * Does not test for inclusion/notch.
- *
- * @example
- * neutralizeParamName('maxWidth') // "_width"
- * neutralizeParamName('minWidth') // "_width"
- */
-var neutralizeParamName = function neutralizeParamName(paramName) {
-  return paramName.replace(/^min|max/, '_');
-};
-/**
- * Determines whether two given breakpoints can be merged.
- * Assures non-compatible breakpoints are not prompted to
- * be merged during the area params composition.
- */
+var canMergeRecords = function canMergeRecords(prevRecord, nextRecord) {
+  var hasSameBehavior = prevRecord.behavior === nextRecord.behavior;
+  var hasInclusiveBehavior = prevRecord.behavior === 'up' && nextRecord.behavior === 'down';
+  var shouldMergeRecords = hasSameBehavior || hasInclusiveBehavior;
 
+  if (!shouldMergeRecords) {
+    return false;
+  } // Check if breakpoints are compatible to be merged
 
-function shouldCombineBreakpoints(breakpointA, breakpointB) {
-  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;
-  });
-}
 
-var updateWith = function updateWith(key, updateFunc) {
-  return function (args) {
-    var _args = _toArray(args),
-        first = _args[0],
-        rest = _args.slice(1);
+  return shouldCombineBreakpoints(prevRecord.breakpoint, nextRecord.breakpoint);
+};
 
-    return [updateFunc(args)].concat(_toConsumableArray(rest));
+var handleLastRecord = function handleLastRecord(isLastTempate, areaRecord) {
+  return {
+    behavior: areaRecord.behavior,
+    breakpoint: isLastTempate && areaRecord.behavior === 'up' ? openBreakpoint(areaRecord.breakpoint) : areaRecord.breakpoint
   };
 };
 
-var createContext = function createContext(areaName) {
-  return function (areaBreakpointsList, template, index, templates) {
-    var isLastTemplate = index === templates.length - 1;
+function getAreaRecords(areaName, templates) {
+  var templatesCount = templates.length;
+  return templates.reduce(function (list, template, index) {
     var areas = template.areas,
         behavior = template.behavior,
-        breakpoint = template.breakpoint;
+        breakpoint = template.breakpoint; // Important to know if operating on the last record
+    // to properly construct the trailing breakpoint.
+
+    var isLastTempate = index === templatesCount - 1;
     var includesArea = areas.includes(areaName);
-    var prevAreaBreakpoint = areaBreakpointsList[areaBreakpointsList.length - 1];
-
-    var nextAreaBreakpoint = _objectSpread2({}, breakpoint, {
+    var areaRecord = {
+      breakpoint: breakpoint,
       behavior: behavior
-    });
+    };
+    var lastAreaRecord = list[list.length - 1];
 
-    var _ref = prevAreaBreakpoint || {
-      behavior: ''
-    },
-        prevBehavior = _ref.behavior,
-        prevBreakpoint = _objectWithoutProperties(_ref, ["behavior"]);
+    if (includesArea) {
+      var shouldMergeRecords = lastAreaRecord && canMergeRecords(lastAreaRecord, areaRecord);
 
-    var shouldMerge = Boolean(prevAreaBreakpoint) && shouldCombineBreakpoints(prevBreakpoint, breakpoint);
-    return [nextAreaBreakpoint, prevAreaBreakpoint, includesArea, isLastTemplate, shouldMerge, areaBreakpointsList];
-  };
-};
+      if (shouldMergeRecords) {
+        var mergedAreaRecord = mergeAreaRecords(areaRecord, lastAreaRecord, includesArea); // Replace the preceding area record with the merged instance.
 
-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 pop(list).concat(handleLastRecord(isLastTempate, mergedAreaRecord));
+      } // Append the new area record.
 
-  return shouldMerge;
-};
 
-var shouldOpenBreakpoint = function shouldOpenBreakpoint(_ref4) {
-  var _ref5 = _slicedToArray(_ref4, 4),
-      nextAreaBreakpoint = _ref5[0],
-      prevAreaBreakpoint = _ref5[1],
-      includesArea = _ref5[2],
-      isLastTemplate = _ref5[3];
+      return list.concat(handleLastRecord(isLastTempate, areaRecord));
+    } // When the area is not present in the current template
+    // check if the preceding area record exists. If so,
+    // make sure to close it to prevent it from rendering on this breakpoint.
 
-  return isLastTemplate && nextAreaBreakpoint.behavior === 'up';
-};
 
-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];
+    if (lastAreaRecord) {
+      /**
+       * @todo Confusing that "merge" also closes the breakpoint.
+       * Also it needs prev and next. Uh.
+       */
+      var closedLastAreaRecord = mergeAreaRecords(areaRecord, lastAreaRecord, includesArea);
+      return pop(list).concat([closedLastAreaRecord, null]);
+    } // Appending explicit "null" creates a separation between breakpoints
+    // that prevents them being treated like siblings. Breakpoints separated
+    // by "null" are not attempted to be merged, or analyzed together in any way.
 
-  /* 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 */
+    return list.concat(null);
+  }, []);
+}
 
-  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;
-    }
-  }
-
-  var targetList = shouldReplaceLastArea ? pop(areaBreakpointsList) : areaBreakpointsList;
-  return targetList.concat(newBreakpoint);
-};
-
-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)), []);
-};
-
 /**
@@ -1125,7 +1051,4 @@ * A high-order component that wraps the given area component in a placeholder.
 
-    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, {
+    var PlaceholderComponent = breakpoints.reduce(function (components, breakpoint, index) {
+      return components.concat(createElement(MediaQuery, Object.assign({}, breakpoint, {
         key: "".concat(Component.displayName, "_").concat(index)
@@ -1135,3 +1058,6 @@ }), function (matches) {
       }));
-    }, []);
+    }, []); // Wrapping in a Fragment due to type issue
+    // when returning JSX.Element[].
+
+    return createElement(Fragment, null, PlaceholderComponent);
   };
@@ -1160,4 +1086,7 @@
   var componentsMap = areas.reduce(function (components, areaName) {
-    var areaParams = getAreaBreakpoints(areaName, templates);
-    var shouldAlwaysRender = areaParams.length === 1 && areaParams.every(function (breakpoint) {
+    var areaRecords = getAreaRecords(areaName, templates);
+    var areaBreakpoints = areaRecords.filter(Boolean).map(function (areaRecord) {
+      return areaRecord.breakpoint;
+    });
+    var shouldAlwaysRender = areaRecords.length === 1 && areaBreakpoints.every(function (breakpoint) {
       return !breakpoint.minWidth && !breakpoint.maxWidth;
@@ -1168,9 +1097,6 @@ });
     Component.displayName = capitalizedAreaName;
-    var ResponsiveComponent = shouldAlwaysRender ? Component : withPlaceholder(Component, areaParams);
+    var ResponsiveComponent = shouldAlwaysRender ? Component : withPlaceholder(Component, areaBreakpoints);
     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 plain components map for browsers that don't support Proxy.
+  // Requires safety check before rendering conditional areas.
 
@@ -1182,8 +1108,5 @@ return typeof Proxy === 'undefined' ? componentsMap : new Proxy(componentsMap, {
       } // @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.
-       */
+      // the dummy component that renders nothing.
+      // This prevents from the exception when rendering "undefined"
+      // and allows conditional template areas.
 
@@ -1291,2 +1214,4 @@
  * of the original breakpoint are omitted.
+ * Subtracts 1 from the numeric values of all "min" properties
+ * to not overlap with the given breakpoint.
  *
@@ -1367,4 +1292,3 @@ * @example
 
-  var wrapWith = createWrapper(children, restProps);
-  /* Render on explicit breakpoint */
+  var wrapWith = createWrapper(children, restProps); // Render on explicit breakpoint
 
@@ -1376,13 +1300,14 @@ if (exactBreakpointName) {
   var minBreakpoint = resolveBreakpoint(minBreakpointName);
-  var maxBreakpoint = resolveBreakpoint(maxBreakpointName);
-  /* Bell, __/--\__ */
+  var maxBreakpoint = resolveBreakpoint(maxBreakpointName); // Bell, __/--\__
 
   if (minBreakpoint && maxBreakpoint && !except) {
-    return wrapWith(mergeBreakpoints(_objectSpread2({
-      behavior: 'down'
-    }, maxBreakpoint), _objectSpread2({
-      behavior: 'up'
-    }, minBreakpoint), false));
-  }
-  /* Notch, --\__/-- */
+    var mergedAreaRecord = mergeAreaRecords({
+      behavior: 'down',
+      breakpoint: maxBreakpoint
+    }, {
+      behavior: 'up',
+      breakpoint: minBreakpoint
+    }, false);
+    return wrapWith(mergedAreaRecord.breakpoint);
+  } // Notch, --\__/--
 
@@ -1392,4 +1317,3 @@
     return wrapWith(flipBreakpoint(minBreakpoint), openBreakpoint(maxBreakpoint));
-  }
-  /* High-pass, __/-- */
+  } // High-pass, __/--
 
@@ -1399,4 +1323,3 @@
     return wrapWith(openBreakpoint(minBreakpoint));
-  }
-  /* Low-pass, --\__ */
+  } // Low-pass, --\__
 
@@ -1406,4 +1329,3 @@
     return wrapWith(flipBreakpoint(maxBreakpoint));
-  }
-  /* Render always when no constrains are provided */
+  } // Render always when no constrains are provided
 
@@ -1414,6 +1336,13 @@
 
-function debounce(func) {
-  var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 250;
-  var timeout;
-  return function () {
+/**
+ * Throttles a given function.
+ * Implements both leading and trailing function calls.
+ */
+function throttle(func, interval) {
+  var previous;
+  var queuedToRun = null;
+  return function invoker() {
+    var now = Date.now();
+    clearTimeout(queuedToRun);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -1423,9 +1352,8 @@ args[_key] = arguments[_key];
 
-    var postpone = function postpone() {
-      timeout = null;
-      return func.apply(void 0, args);
-    };
-
-    clearTimeout(timeout);
-    timeout = setTimeout(postpone, duration);
+    if (!previous || now - previous >= interval) {
+      func.apply(null, args);
+      previous = now;
+    } else {
+      queuedToRun = setTimeout(invoker.bind.apply(invoker, [null].concat(args)), interval - (now - previous));
+    }
   };
@@ -1436,13 +1364,17 @@ }
  * Executes a callback on viewport change (window resize).
- * Callback calls are debounced by default.
+ * Callback calls are throttled by default.
  */
 
 var useViewportChange = function useViewportChange(callback) {
-  var debounceDuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
-  var handleWindowResize = debounce(callback, debounceDuration);
+  var throttleInterval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 70;
+  var handleWindowResize = useRef();
   useEffect(function () {
-    handleWindowResize();
-    window.addEventListener('resize', handleWindowResize);
+    handleWindowResize.current = throttle(callback, throttleInterval);
+  });
+  useEffect(function () {
+    var current = handleWindowResize.current;
+    current();
+    window.addEventListener('resize', current);
     return function () {
-      return window.removeEventListener('resize', handleWindowResize);
+      return window.removeEventListener('resize', current);
     };
@@ -1454,6 +1386,6 @@ }, []);
  * Executes a given callback upon any breakpoint change.
- * Callback calls are debounced by default.
+ * Callback calls are throttled by default.
  */
 
-var useBreakpointChange = function useBreakpointChange(callback, debounceDuration) {
+var useBreakpointChange = function useBreakpointChange(callback, throttleInterval) {
   var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Layout$1.breakpoints;
@@ -1465,3 +1397,4 @@ var prevBreakpointName;
       return matchMedia(mediaQuery).matches;
-    });
+    }); // Executes the callback only when breakpoint name has changed
+    // between viewport changes.
 
@@ -1472,3 +1405,3 @@ if (prevBreakpointName !== nextBreakpointName) {
     }
-  }, debounceDuration);
+  }, throttleInterval);
 };
@@ -1523,3 +1456,3 @@
 var useResponsiveProps = function useResponsiveProps(responsiveProps) {
-  var _useState = useState({}),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1530,3 +1463,3 @@ props = _useState2[0],
   useBreakpointChange(function () {
-    var relevantProps = Object.keys(responsiveProps).map(parsePropName).filter(function (_ref) {
+    var nextProps = Object.keys(responsiveProps).map(parsePropName).filter(function (_ref) {
       var breakpoint = _ref.breakpoint,
@@ -1541,9 +1474,24 @@ behavior = _ref.behavior;
     }, {});
-    setProps(relevantProps);
+    setProps(nextProps);
   });
-  return props;
+  return props || {};
 };
 
+/**
+ * Returns a copy of the given React component
+ * that supports Responsive Props API.
+ */
+
+function useResponsiveComponent(Component) {
+  return function (responsiveProps) {
+    /**
+     * @see https://github.com/Microsoft/TypeScript/issues/29049
+     */
+    var actualProps = useResponsiveProps(responsiveProps);
+    return React__default.createElement(Component, Object.assign({}, actualProps));
+  };
+}
+
 export default Layout$1;
-export { Box, Composition, MediaQuery, Only, useBreakpointChange, useResponsiveProps, useResponsiveValue, useViewportChange, withBreakpoints };
+export { Box, Composition, MediaQuery, Only, defaultOptions, useBreakpointChange, useResponsiveComponent, useResponsiveProps, useResponsiveValue, useViewportChange, withBreakpoints };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "atomic-layout",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
@@ -27,2 +27,3 @@ "license": "MIT",
     "cypress:cli": "node_modules/.bin/cypress run --spec examples/all.test.js --browser chrome --env envName=ci",
+    "jest": "jest",
     "test:unit": "cross-env BABEL_ENV=test jest --runInBand",
@@ -32,3 +33,3 @@ "test:e2e": "yarn cypress:cli",
     "bundlesize": "node_modules/.bin/bundlesize",
-    "prepublishOnly": "yarn build && yarn bundlesize && yarn test"
+    "prepublishOnly": "yarn build && yarn bundlesize && yarn build:storybook && yarn test"
   },
@@ -88,3 +89,3 @@ "husky": {
     "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^8.0.4",
+    "@testing-library/react": "^9.1.4",
     "@types/jest": "^24.0.18",
@@ -97,3 +98,2 @@ "@types/react": "^16.9.2",
     "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.0.6",
     "bundlesize": "^0.18.0",
@@ -111,3 +111,3 @@ "chai": "^4.2.0",
     "react-dom": "^16.8.6",
-    "rimraf": "^2.6.3",
+    "rimraf": "^3.0.0",
     "rollup": "^1.20.1",
@@ -121,4 +121,4 @@ "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-typescript2": "^0.21.2",
-    "storybook": "^1.0.0",
+    "rollup-plugin-typescript2": "0.24.1",
+    "storybook": "^5.1.11",
     "styled-components": "^4.3.2",
@@ -125,0 +125,0 @@ "ts-jest": "^24.0.2",

README.md

@@ -1,35 +0,19 @@
-<p align="center">
-  <a href="https://www.npmjs.com/package/atomic-layout" target="_blank">
-    <img src="https://img.shields.io/npm/v/atomic-layout.svg" alt="Package version" />
-  </a>
-  <a href="https://github.com/kettanaito/atomic-layout/releases">
-    <img src="https://img.shields.io/github/release-date/kettanaito/atomic-layout.svg" alt="Release date" />
-  </a>
-  <a href="https://circleci.com/gh/kettanaito/atomic-layout" target="_blank">
-    <img src="https://img.shields.io/circleci/project/github/kettanaito/atomic-layout/master.svg" alt="Build status" />
-  </a>
-  <a href="https://coveralls.io/github/kettanaito/atomic-layout" target="_blank">
-    <img src="https://coveralls.io/repos/github/kettanaito/atomic-layout/badge.svg" alt="Test coverage" />
-  </a>
-  <img src="https://img.shields.io/bundlephobia/minzip/atomic-layout.svg" alt="Package size (minzip)" />
-  <a href="https://david-dm.org/kettanaito/atomic-layout" target="_blank">
-    <img src="https://img.shields.io/david/kettanaito/atomic-layout.svg" alt="Dependencies status" />
-  </a>
-  <a href="https://david-dm.org/kettanaito/atomic-layout?type=dev" target="_blank">
-    <img src="https://img.shields.io/david/dev/kettanaito/atomic-layout.svg" alt="Dev dependencies status" />
-  </a>
-  <a href="https://img.shields.io/discord/102860784329052160.svg?label=Chat&logo=discord&style=flat">
-    <img src="https://img.shields.io/discord/102860784329052160.svg?label=Chat&logo=discord&style=flat" alt="Discord channel">
-  </a>
-</p>
+[![Package version](https://img.shields.io/npm/v/atomic-layout.svg)][npm-url]
+[![Package size](https://img.shields.io/bundlephobia/minzip/atomic-layout.svg)][bundlephobia-url]
+[![Build status](https://img.shields.io/circleci/project/github/kettanaito/atomic-layout/master.svg)][build-url]
+[![Test coverage](https://coveralls.io/repos/github/kettanaito/atomic-layout/badge.svg)][test-coverage-url]
+[![Dependencies status](https://img.shields.io/david/kettanaito/atomic-layout.svg)][dependencies-url]
 
-<br>
+[![Discord channel](https://img.shields.io/discord/102860784329052160.svg?label=Chat&logo=discord&style=flat)][community-reactiflux]
+[![Spectrum channel](https://withspectrum.github.io/badge/badge.svg)][community-spectrum]
 
+<br/>
+
 <p align="center">
-  <img src="./logo.svg" width="200" alt="Atomic layout" />
+  <img src="./logo.svg" width="200" alt="Atomic Layout" />
 </p>
 
-<h1 align="center"><span>Atomic layout</span></h1>
+<h1 align="center">Atomic Layout</h1>
 
-**Atomic layout** is a spatial distribution library for React. It uses [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to define layout areas and render them as React components. This pattern encourages separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts.
+**Atomic Layout** is a spatial distribution library for React. It uses [CSS Grid][css-grid] to define layout areas and render them as React components. This pattern encourages separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts.
 
@@ -40,5 +24,5 @@ ```jsx
 
-// Define layout areas–visual representation
-// of what composes a layout, without caring
-// what components are rendered inside.
+// Define layout areas: visual representation
+// of what composes a layout, detached from
+// what components are actually rendered.
 const areasMobile = `
@@ -50,3 +34,5 @@ thumbnail
 
-// Responsive areas? Built-in!
+// Declare responsive changes of your areas.
+// Operate in two dimensions, remove areas
+// or introduce new ones.
 const areasTablet = `
@@ -80,10 +66,12 @@ thumbnail header
 
-> Atomic layout is responsive by default. It uses [Bootstrap 4 breakpoints](https://getbootstrap.com/docs/4.0/layout/grid/#grid-options), but you can [define custom breakpoints](https://redd.gitbook.io/atomic-layout/api/layout/configure#breakpoints) to match your requirements.
+> Atomic Layout comes with built-in responsive support. It uses [Bootstrap 4 breakpoints][bootstrap-4-breakpoints] by default, which you can always [override with the custom breakpoints](https://redd.gitbook.io/atomic-layout/api/layout/configure#breakpoints) to match your requirements.
 
 ## Motivation
 
-Think of how we create layouts today. Most likely we define a set of reusable units \(atoms\) to combine them into functional compositions. But how do we handle spacing that should describe the position of our units? Usually, we manage CSS properties of those units to make sure the spacing is just right. Not only that results into writing redundant CSS, but it also makes our atoms **contextual** and, thus, **non-maintainable**.
+Modern layout development is about modularity and composition. Following the best practices of [Atomic design][atomic-design], we strive toward independent UI units that gradually compose into more meaningful pieces. While the attention paid to units implementation is thorough, we often overlook how to achieve layout composition that scales. It's as if we forget that _spacing defines composition_.
 
-Atomic layout solves this problem by exposing a dedicated layer responsible for spacial distribution in a layout, or any of its parts. That allows to reuse atom components in any layout possible **without mutating** them.
+When it comes to distributing the spacing things get more difficult. First of all, true contextless spacing is hard. To make things worse, all present solutions couple spacing with UI elements, inevitably making small resusable pieces **contextful** and, thus, hard to maintain.
 
+Atomic Layout helps you to compose your elements by introducing a dedicated spacing layer called _Composition_. It encourages you to separate concerns between UI elements' visual appearance and spacing between them. With the first-class responsive support at your disposal you can build gorgeous responsive permutations of your elements without leaving the dedicated spacing layer, keeping UI elements contextless and predictable. Embrace the era of a true layout composition!
+
 ## Install
@@ -95,9 +83,9 @@
 
-> Make sure to have [React](https://github.com/facebook/react) (16.0+) and [styled-components](https://github.com/styled-components/styled-components) (4.0+) installed.
+> Make sure to have [React][react] (16.0+) and [styled-components][styled-components] (4.0+) installed.
 
 ## Documentation
 
-> See the [Official documentation](https://redd.gitbook.io/atomic-layout).
+> **See the [Official documentation][atomic-layout-docs].**
 
-Here are some shortcuts to get you started:
+There are some shortcuts to get you started:
 
@@ -156,6 +144,13 @@ - [Motivation](https://redd.gitbook.io/atomic-layout/general/motivation)
 
+## Community
+
+- [Spectrum][community-spectrum]
+- [Reactiflux][community-reactiflux]
+
 ## Browser support
 
-> **See the [Support table for CSS Grid](https://caniuse.com/css-grid)**. For Internet Explorer support please read [this issue](https://github.com/kettanaito/atomic-layout/issues/92).
+Atomic Layout's browser support is made by the browser support of underlying technologies the library uses. Pay attention if your project can support CSS Grid to be sure you can use Atomic Layout.
 
+> **See the [Support table for CSS Grid][css-grid-support]**. For Internet Explorer support please read [this issue](https://github.com/kettanaito/atomic-layout/issues/92).
+
 ## Contributing
@@ -165,2 +160,17 @@
 
-Please read the [Contribution guidelines](https://redd.gitbook.io/atomic-layout/developers/contributing), and browse through the issues labeled [`help wanted`](https://github.com/kettanaito/atomic-layout/labels/help%20wanted) or [`good first issue`](https://github.com/kettanaito/atomic-layout/labels/good%20first%20issue). Those are a good place to start. Feature suggestions or bug reports, discussion, and pull requests are always welcome!
+Please read the [Contribution guidelines](https://redd.gitbook.io/atomic-layout/developers/contributing) to get familiar with the contributing process. The issues labeled [`help wanted`](https://github.com/kettanaito/atomic-layout/labels/help%20wanted) or [`good first issue`](https://github.com/kettanaito/atomic-layout/labels/good%20first%20issue) are a good place to start cooperating on Atomic Layout. Feature suggestions or bug reports, discussion, and pull requests are always welcome!
+
+[npm-url]: https://npmjs.com/package/atomic-layout
+[bundlephobia-url]: https://bundlephobia.com/result?p=atomic-layout
+[build-url]: https://circleci.com/gh/kettanaito/atomic-layout
+[test-coverage-url]: https://coveralls.io/github/kettanaito/atomic-layout
+[dependencies-url]: https://david-dm.org/kettanaito/atomic-layout
+[community-spectrum]: https://spectrum.chat/atomic-layout
+[community-reactiflux]: https://discordapp.com/channels/102860784329052160/543033450924474378
+[bootstrap-4-breakpoints]: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
+[css-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[css-grid-support]: https://caniuse.com/css-grid
+[atomic-design]: https://bradfrost.com/blog/post/atomic-web-design/
+[atomic-layout-docs]: https://redd.gitbook.io/atomic-layout
+[react]: https://github.com/facebook/react
+[styled-components]: https://github.com/styled-components/styled-components

types/hooks/useBreakpointChange.d.ts

 import { Breakpoints } from "../const/defaultOptions";
 /**
  * Executes a given callback upon any breakpoint change.
- * Callback calls are debounced by default.
+ * Callback calls are throttled by default.
  */
-declare const useBreakpointChange: (callback: (breakpointName: string) => void, debounceDuration?: number, breakpoints?: Breakpoints) => void;
+declare const useBreakpointChange: (callback: (breakpointName: string) => void, throttleInterval?: number, breakpoints?: Breakpoints) => void;
 export default useBreakpointChange;

types/hooks/useResponsiveProps.d.ts

@@ -0,1 +1,2 @@
+import { Numeric } from "../const/defaultOptions";
 /**
@@ -5,3 +6,3 @@ * Accepts an object of responsive props and returns
  */
-declare const useResponsiveProps: <ResponsiveProps = {}>(responsiveProps: ResponsiveProps) => {};
+declare const useResponsiveProps: <ResponsiveProps extends Record<string, Numeric>>(responsiveProps: ResponsiveProps) => Partial<ResponsiveProps>;
 export default useResponsiveProps;

types/hooks/useResponsiveValue.d.ts

@@ -6,3 +6,3 @@ /**
  */
-declare const useResponsiveValue: <T>(breakpoints: Record<string, T>, defaultValue?: T) => T;
+declare const useResponsiveValue: <ValueType>(breakpoints: Record<string, ValueType>, defaultValue?: ValueType) => ValueType;
 export default useResponsiveValue;

types/hooks/useViewportChange.d.ts

 /**
  * Executes a callback on viewport change (window resize).
- * Callback calls are debounced by default.
+ * Callback calls are throttled by default.
  */
-declare const useViewportChange: (callback: () => void, debounceDuration?: number) => void;
+declare const useViewportChange: (callback: () => void, throttleInterval?: number) => void;
 export default useViewportChange;

types/index.d.ts

 import Layout from './Layout';
 export default Layout;
+export { default as defaultOptions } from "./const/defaultOptions";
 export { default as Box } from "./components/Box";
@@ -11,2 +12,3 @@ export { default as Composition } from "./components/Composition";
 export { default as useResponsiveProps } from './hooks/useResponsiveProps';
+export { default as useResponsiveComponent, } from './hooks/useResponsiveComponent';
 export { default as withBreakpoints } from "./utils/breakpoints/withBreakpoints";

types/Layout.d.ts

@@ -11,2 +11,4 @@ import { LayoutOptions, Breakpoints, MeasurementUnit, BreakpointBehavior } from './const/defaultOptions';
      * Applies global layout options.
+     * Make sure to call this method once, preferably on the rool level
+     * of your application.
      */
@@ -13,0 +15,0 @@ configure(options: Partial<LayoutOptions>, warnOnMultiple?: boolean): this;

types/utils/breakpoints/closeBreakpoint/closeBreakpoint.d.ts

@@ -7,2 +7,4 @@ import { Breakpoint } from "../../../const/defaultOptions";
  * of the original breakpoint are omitted.
+ * Subtracts 1 from the numeric values of all "min" properties
+ * to not overlap with the given breakpoint.
  *
@@ -9,0 +11,0 @@ * @example

types/utils/breakpoints/openBreakpoint/openBreakpoint.d.ts

@@ -7,2 +7,2 @@ import { Breakpoint } from "../../../const/defaultOptions";
  */
-export default function openBreakpoint(breakpoint: Breakpoint): Breakpoint;
+export default function openBreakpoint<T = Breakpoint>(breakpoint: Breakpoint): T;

types/utils/functions/memoizeWith/memoizeWith.d.ts

@@ -1,1 +0,1 @@
-export default function memoizeWith(mappingFunc: (...args: any[]) => string): (func: (...args: any[]) => any) => (...args: any[]) => any;
+export default function memoizeWith(saltGenerator: (...args: any[]) => string): (func: (...args: any[]) => any) => (...args: any[]) => any;

types/utils/strings/parsePropName/parsePropName.d.ts

@@ -8,8 +8,9 @@ import { BreakpointBehavior } from "../../../const/defaultOptions";
     purePropName: string;
-    breakpoint: {
-        name: string;
-        isDefault: boolean;
-    };
+    breakpoint: ParsedBreakpoint;
     behavior: BreakpointBehavior;
 }
+export interface ParsedBreakpoint {
+    name: string;
+    isDefault: boolean;
+}
 /**
@@ -16,0 +17,0 @@ * Returns a parsed prop summary, which includes pure prop name,

types/utils/styles/applyStyles/applyStyles.d.ts

 import { Props } from "../../strings/parsePropName";
+/**
+ * Transforms known prop aliases to CSS rules for the given props.
+ */
 export default function applyStyles(pristineProps: Props): string;

types/utils/styles/createMediaQuery/createMediaQuery.d.ts

 import { Numeric, Breakpoint, BreakpointBehavior } from "../../../const/defaultOptions";
 /**
- * Joins a given query params list with the given transformer function.
+ * Joins a given media query params list with the given transformer function.
  */
-export declare const joinQueryList: (transformer: (pair: [string, Numeric]) => any) => (queryList: any) => any;
+export declare const joinQueryList: (transformer: (pair: [string, Numeric]) => any) => (queryList: [string, Numeric][]) => string;
 export default function createMediaQuery(breakpoint: Breakpoint, behavior: BreakpointBehavior): string;

types/utils/templates/generateComponents/generateComponents.d.ts

@@ -15,8 +15,3 @@ import { AreasList } from '../getAreasList';
  */
-export declare const withPlaceholder: (Component: React.FunctionComponent<BoxProps>, breakpoints: Breakpoint[]) => {
-    ({ children, ...restProps }: {
-        children: React.ReactNode;
-    } & GenericProps): any;
-    displayName: string;
-};
+export declare const withPlaceholder: (Component: React.FunctionComponent<BoxProps>, breakpoints: Breakpoint[]) => React.FunctionComponent<GenericProps>;
 /**
@@ -23,0 +18,0 @@ * Returns a map of React components based on the given grid areas

umd/index.js

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

No alert changes

Improved metrics

Total package byte prevSize

117526

increased by1.55%

Dev dependency count

53

decreased by-1.85%

Number of package files

87

increased by1.16%

Number of lines in readme file

171

increased by6.21%

Worsened metrics

Lines of code

2035

decreased by-1.12%

No dependency changes