atomic-layout - npm Package Compare versions

Comparing version 0.10.2 to 0.11.0

cjs/index.js

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

esm/index.js

@@ -1,3 +0,3 @@
-import styled from 'styled-components';
-import React__default, { useMemo, useState, useEffect, createElement, Fragment, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import React__default, { useState, useMemo, useLayoutEffect, createElement, Fragment, useRef, useEffect } from 'react';
 
@@ -74,3 +74,3 @@ function _typeof(obj) {
     if (i % 2) {
-      ownKeys(source, true).forEach(function (key) {
+      ownKeys(Object(source), true).forEach(function (key) {
         _defineProperty(target, key, source[key]);
@@ -81,3 +81,3 @@ });
     } else {
-      ownKeys(source).forEach(function (key) {
+      ownKeys(Object(source)).forEach(function (key) {
         Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
@@ -808,2 +808,6 @@ });
 
+/**
+ * Creates a media querty string based on the given params.
+ */
+
 var createMediaQuery$1 = function createMediaQuery(queryParams) {
@@ -828,15 +832,14 @@ return compose(joinQueryList(function (_ref) {
 
-var MediaQuery = function MediaQuery(props) {
-  var children = props.children,
-      queryParams = _objectWithoutProperties(props, ["children"]);
+var useMediaQuery = function useMediaQuery(queryParams) {
+  var initialMatches = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
+  var _useState = useState(initialMatches),
+      _useState2 = _slicedToArray(_useState, 2),
+      matches = _useState2[0],
+      setMatches = _useState2[1];
+
   var query = useMemo(function () {
-    return createMediaQuery$1(queryParams);
+    return [].concat(queryParams).map(createMediaQuery$1).join(',');
   }, [queryParams]);
 
-  var _React$useState = useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      matches = _React$useState2[0],
-      setMatches = _React$useState2[1];
-
   var handleMediaQueryChange = function handleMediaQueryChange(mediaQueryList) {
@@ -846,3 +849,3 @@ setMatches(mediaQueryList.matches);
 
-  useEffect(function () {
+  useLayoutEffect(function () {
     var mediaQueryList = matchMedia(query);
@@ -852,8 +855,21 @@ handleMediaQueryChange(mediaQueryList);
     return function () {
-      return mediaQueryList.removeListener(handleMediaQueryChange);
+      mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, Object.keys(queryParams));
+  return matches;
+};
+
+var MediaQuery = function MediaQuery(_ref) {
+  var children = _ref.children,
+      initialMatches = _ref.matches,
+      queryParams = _objectWithoutProperties(_ref, ["children", "matches"]);
+
+  var matches = useMediaQuery(queryParams, initialMatches);
   return children(matches);
 };
 
+MediaQuery.defaultProps = {
+  matches: false
+};
+
 function capitalize(str) {
@@ -1318,2 +1334,76 @@ return str.replace(/^./, function (firstLetter) {
 
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n      visibility: hidden;\n    "]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$2() {
+  var data = _taggedTemplateLiteral(["\n  ", "\n"]);
+
+  _templateObject$2 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var VisibleContainer = styled(Box)(_templateObject$2(), function (_ref) {
+  var matches = _ref.matches;
+  return !matches && css(_templateObject2());
+});
+
+var Visible = function Visible(_ref2) {
+  var children = _ref2.children,
+      except = _ref2.except,
+      exactBreakpointName = _ref2["for"],
+      minBreakpointName = _ref2.from,
+      maxBreakpointName = _ref2.to,
+      boxProps = _objectWithoutProperties(_ref2, ["children", "except", "for", "from", "to"]);
+
+  var exactBreakpoint = resolveBreakpoint(exactBreakpointName);
+  var minBreakpoint = resolveBreakpoint(minBreakpointName);
+  var maxBreakpoint = resolveBreakpoint(maxBreakpointName);
+  var mediaQuery = exactBreakpoint; // Bell, __/--\__
+
+  if (minBreakpoint && maxBreakpoint && !except) {
+    var _mergeAreaRecords = mergeAreaRecords({
+      behavior: 'down',
+      breakpoint: maxBreakpoint
+    }, {
+      behavior: 'up',
+      breakpoint: minBreakpoint
+    }, false),
+        breakpoint = _mergeAreaRecords.breakpoint;
+
+    mediaQuery = breakpoint;
+  } // Notch, --\__/--
+
+
+  if (minBreakpoint && maxBreakpoint && except) {
+    mediaQuery = [flipBreakpoint(minBreakpoint), openBreakpoint(maxBreakpoint)];
+  } // High-pass, __/--
+
+
+  if (minBreakpoint && !maxBreakpoint) {
+    mediaQuery = openBreakpoint(minBreakpoint);
+  } // Low-pass, --\__
+
+
+  if (!minBreakpoint && maxBreakpoint) {
+    mediaQuery = flipBreakpoint(maxBreakpoint);
+  }
+
+  var matches = useMediaQuery(mediaQuery);
+  var ariaHidden = !matches ? {
+    'aria-hidden': 'true'
+  } : {};
+  return React__default.createElement(VisibleContainer, Object.assign({}, boxProps, ariaHidden, {
+    matches: matches
+  }), children);
+};
+
 /**
@@ -1470,3 +1560,3 @@ * Throttles a given function.
 export default Layout$1;
-export { Box, Composition, MediaQuery, Only, defaultOptions, useBreakpointChange, useResponsiveComponent, useResponsiveProps, useResponsiveValue, useViewportChange, withBreakpoints };
+export { Box, Composition, MediaQuery, Only, Visible, defaultOptions, useBreakpointChange, useResponsiveComponent, useResponsiveProps, useResponsiveValue, useViewportChange, withBreakpoints };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "atomic-layout",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
@@ -32,3 +32,4 @@ "license": "MIT",
     "bundlesize": "node_modules/.bin/bundlesize",
-    "prepublishOnly": "yarn build && yarn bundlesize && yarn build:storybook && yarn test"
+    "ci": "yarn build && yarn bundlesize && yarn build:storybook && yarn test",
+    "prepublishOnly": "yarn ci"
   },
@@ -79,10 +80,10 @@ "husky": {
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/core": "7.7.2",
+    "@babel/plugin-proposal-class-properties": "7.7.0",
     "@babel/plugin-proposal-export-default-from": "^7.5.2",
     "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.1.0",
+    "@babel/plugin-proposal-object-rest-spread": "7.6.2",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
     "@cypress/webpack-preprocessor": "^4.1.0",
@@ -93,43 +94,43 @@ "@storybook/addon-actions": "5.1.9",
     "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.1.4",
-    "@types/jest": "^24.0.18",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
-    "@types/styled-components": "^4.1.18",
+    "@testing-library/react": "^9.3.2",
+    "@types/jest": "^24.0.23",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "@types/styled-components": "^4.4.0",
     "@zerollup/ts-transform-paths": "^1.7.3",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.6",
     "bundlesize": "^0.18.0",
     "chai": "^4.2.0",
-    "coveralls": "^3.0.6",
+    "coveralls": "^3.0.9",
     "cross-env": "^5.2.0",
-    "cypress": "^3.4.1",
-    "husky": "^3.0.4",
+    "cypress": "^3.7.0",
+    "husky": "^3.1.0",
     "jest": "^24.9.0",
-    "lint-staged": "^9.2.3",
+    "lint-staged": "^9.5.0",
     "match-media-mock": "^0.1.1",
-    "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.20.1",
+    "rollup": "^1.27.5",
     "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-commonjs": "^10.0.2",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
-    "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-typescript2": "0.24.1",
+    "rollup-plugin-typescript2": "^0.25.2",
     "storybook": "^5.1.11",
-    "styled-components": "^4.3.2",
-    "ts-jest": "^24.0.2",
+    "styled-components": "^4.4.1",
+    "ts-jest": "^24.2.0",
     "tslib": "^1.10.0",
     "tslint": "^5.19.0",
-    "tslint-config-prettier": "^1.17.0",
-    "tslint-react": "^4.0.0",
-    "ttypescript": "^1.5.7",
-    "typescript": "^3.5.3",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-react": "^4.1.0",
+    "ttypescript": "^1.5.8",
+    "typescript": "^3.7.2",
     "url": "^0.11.0"
   }
 }

README.md

@@ -155,3 +155,3 @@ [![Package version](https://img.shields.io/npm/v/atomic-layout.svg)][npm-url]
 
-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!
+**Please read the [Contribution guidelines](./.github/CONTRIBUTING.md)** 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!
 
@@ -158,0 +158,0 @@ [npm-url]: https://npmjs.com/package/atomic-layout

types/components/Only.d.ts

@@ -5,2 +5,3 @@ import * as React from 'react';
 export declare type BreakpointRef = string | Breakpoint;
+export declare const resolveBreakpoint: (breakpointRef: BreakpointRef) => Breakpoint;
 export interface OnlyProps extends BoxProps {
@@ -7,0 +8,0 @@ /**

types/index.d.ts

@@ -6,4 +6,5 @@ import Layout from './Layout';
 export { default as Composition } from "./components/Composition";
+export { default as MediaQuery } from "./components/MediaQuery";
 export { default as Only } from "./components/Only";
-export { default as MediaQuery } from "./components/MediaQuery";
+export { default as Visible } from "./components/Visible";
 export { default as useViewportChange } from './hooks/useViewportChange';
@@ -10,0 +11,0 @@ export { default as useResponsiveValue } from './hooks/useResponsiveValue';

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

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

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

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

umd/index.js

@@ -1,1 +0,1 @@
-!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)):r.createElement(r.Fragment,null,"children")},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})}));
+!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";var t="default"in n?n.default:n,o="default"in r?r.default:r;function a(e){return(a="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 i(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 u(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function c(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 p(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?c(Object(r),!0).forEach((function(n){u(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function f(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 s(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function l(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 d={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 m(e,n){if(!e)throw new Error(n)}function g(e,n){e||console.warn(n)}var h=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=d.defaultUnit,this.defaultBehavior=d.defaultBehavior,this.breakpoints=d.breakpoints,this.defaultBreakpointName=d.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&&g(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),m(e&&"object"===a(e),"Failed to configure Layout: expected an options Object, but got: ".concat(e,".")),Object.keys(e||{}).forEach((function(r){n[r]=e[r]})),m(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),m(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),'Failed to configure Layout: cannot use "'.concat(this.defaultBreakpointName,'" as the default breakpoint (breakpoint not found).')),m(this.defaultBreakpointName,'Failed to configure Layout: expected "defaultBreakpointName" property set, but got: '.concat(this.defaultBreakpointName,".")),this.isConfigureCalled=r,this}}])&&i(n.prototype,r),t&&i(n,t),e}());function v(){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 b(e){return null!=e}function y(e){if(!b(e))return"";var n="number"==typeof e&&0!==e?h.defaultUnit:"";return"".concat(e).concat(n)}var k=["/","auto"];function j(e){var n=/^[0-9]/.test(e),r=k.includes(e);return!n&&!r}var w=v((function(e){var n=[],r=[];return e.forEach((function(e){j(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()})),O=v((function(e){return e.join("\n")}),(function(e){return e.map(w)}),(function(e){return e.split("\n")}),(function(e){return e.trim()})),x={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:O},template:{props:["grid-template"],transformValue:O},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:y},gapCol:{props:["grid-column-gap"],transformValue:y},gapRow:{props:["grid-row-gap"],transformValue:y},gutter:{props:["grid-gap"],transformValue:y},gutterCol:{props:["grid-column-gap"],transformValue:y},gutterRow:{props:["grid-row-gap"],transformValue:y},autoRows:{props:["grid-auto-rows"],transformValue:y},autoCols:{props:["grid-auto-columns"],transformValue:y},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:y},minHeight:{props:["min-height"],transformValue:y},maxHeight:{props:["max-height"],transformValue:y},width:{props:["width"],transformValue:y},minWidth:{props:["min-width"],transformValue:y},maxWidth:{props:["max-width"],transformValue:y},margin:{props:["margin"],transformValue:y},marginTop:{props:["margin-top"],transformValue:y},marginRight:{props:["margin-right"],transformValue:y},marginBottom:{props:["margin-bottom"],transformValue:y},marginLeft:{props:["margin-left"],transformValue:y},marginVertical:{props:["margin-top","margin-bottom"],transformValue:y},marginHorizontal:{props:["margin-right","margin-left"],transformValue:y},padding:{props:["padding"],transformValue:y},paddingTop:{props:["padding-top"],transformValue:y},paddingRight:{props:["padding-right"],transformValue:y},paddingBottom:{props:["padding-bottom"],transformValue:y},paddingLeft:{props:["padding-left"],transformValue:y},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:y},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:y}};function V(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function P(e){var n=Object.keys(h.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?V(c):h.defaultBreakpointName,s=f===h.defaultBreakpointName;return{originPropName:e,purePropName:p,behavior:i?V(i):h.defaultBehavior,breakpoint:{name:f,isDefault:s}}}function E(e){return Object.entries(e).filter((function(e){var n=l(e,2);n[0];return b(n[1])})).map((function(e){var n,r=l(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=l(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))}(l(n,1)[0],e)}))}},S=function(e){return function(n){return n.map(e).join(" and ")}};function C(e,n){return v(S((function(e){var n=l(e,2),r=n[0],t=n[1];return"(".concat(r,":").concat(String(y(t)),")")})),B(n),E)(e)}var N=function(e,n,r,t){var o=e.map((function(e){return"".concat(e,":").concat(String(n),";")})).join(""),a=h.breakpoints[r.name];return a&&!(r.isDefault&&t===h.defaultBehavior)?"@media ".concat(C(a,t)," {").concat(o,"}"):o};function L(e){return Object.keys(e).map(P).filter((function(e){var n=e.purePropName;return x.hasOwnProperty(n)})).filter((function(n){var r=n.originPropName;return b(e[r])})).map((function(n){var r=n.purePropName,t=n.originPropName,o=n.breakpoint,a=n.behavior,i=x[r],u=i.props,c=i.transformValue,p=e[t],f=c?c(p):p;return N(u,f,o,a)})).join(" ")}function R(){var e=s(["\n  display: ",";\n\n  && {\n    ",";\n  }\n"]);return R=function(){return e},e}var W=t.div(R(),(function(e){var n=e.flex,r=e.inline;return n?r?"inline-flex":"flex":r?"inline-block":"block"}),L);var A=function(e){return v(S((function(e){var n=l(e,2),r=n[0],t=n[1],o=/^\d/.test(String(t))?y(t):t;return"(".concat(r,":").concat(o,")")})),E)(e)},F=function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],t=r.useState(n),o=l(t,2),a=o[0],i=o[1],u=r.useMemo((function(){return[].concat(e).map(A).join(",")}),[e]),c=function(e){i(e.matches)};return r.useLayoutEffect((function(){var e=matchMedia(u);return c(e),e.addListener(c),function(){e.removeListener(c)}}),Object.keys(e)),a},D=function(e){var n=e.children,r=e.matches,t=f(e,["children","matches"]);return n(F(t,r))};function M(e){return e.slice(0,e.length-1)}D.defaultProps={matches:!1};var z=function(e){return e.replace(/^min|max/,"_")};function T(e){var n=e.match(/^(min|max)/);return n?n[0]:""}function I(e,n,r){var t=n.behavior,o=e.behavior,a="up"===t,i=t===o,c=a&&"down"===o,f=a,s=!r&&f?"down":o,l=p({},n.breakpoint,{},e.breakpoint);return{behavior:s,breakpoint:Object.keys(l).reduce((function(t,o){var a=l[o],s=T(o);if("max"===s&&!r&&f){var d=e.breakpoint[o.replace(/^max/,"min")];a="calc(".concat(y(d)," - 1px)")}return"min"===s&&(r?(i||c)&&(a=n.breakpoint[o]):f&&(a=n.breakpoint[o])),p({},t,u({},o,a))}),{})}}function U(e){return Object.keys(e).reduce((function(n,r){return p({},n,u({},r,"max"===T(r)?void 0:e[r]))}),{})}var H=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=z(e);return r===z(o[n-1]||r)})))},_=function(e,n){return{behavior:n.behavior,breakpoint:e&&"up"===n.behavior?U(n.breakpoint):n.breakpoint}};var q=function(e,n){var t=function(t){var o=t.children,a=f(t,["children"]),i=n.reduce((function(n,t,i){return n.concat(r.createElement(D,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},$=function(e){return function(n){return r.createElement(W,Object.assign({area:e},n))}};var G,Q,Z=v((function(e){return e.sort()}),(function(e){return Array.from(new Set(e))}),(function(e){return e.filter(j)}),(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," ")})),J=v((G=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=l(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=G.apply(void 0,arguments);return n in Q||(Q[n]=e.apply(void 0,arguments)),Q[n]}})(v((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&&H(s,f)){var l=I(f,s,p);return M(n).concat(_(c,l))}return n.concat(_(c,f))}if(s){var d=I(f,s,p);return M(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})),i=$(n),c=n.replace(/^./,(function(e){return e.toUpperCase()}));return i.displayName=c,p({},e,u({},c,a?i:q(i,o)))}),{});return"undefined"==typeof Proxy?t:new Proxy(t,{get:function(e,n){return n in e||"symbol"===a(n)?e[n]:function(){return null}}})}),(function(e){var n=Object.entries(e).reduce((function(e,n){var r=l(n,2),t=r[0],o=r[1],a=P(t),i=a.breakpoint,u=a.behavior;return{areas:e.areas.concat(o),templates:e.templates.concat({breakpoint:h.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=P(e).purePropName;return["areas","template"].includes(n)})).reduce((function(n,r){return p({},n,u({},r,Z(e[r])))}),{})}));function K(){var e=s(["\n  && {\n    ",";\n    display: ",";\n  }\n"]);return K=function(){return e},e}var X=t.div(K(),L,(function(e){return e.inline?"inline-grid":"grid"}));function Y(e){return Object.entries(e).map((function(e){var n=l(e,2),r=n[0],t=n[1];return[T(r),r,t]})).filter((function(e){return"max"!==l(e,1)[0]})).reduce((function(e,n){var r=l(n,3),t=r[0],o=r[1],a=r[2],i="min"===t,c=i?o.replace(/^min/,"max"):o,f=l(/(\d+)(.+)?/.exec(a),3),s=f[1],d=f[2],m=i?parseFloat(s)-1:s;return p({},e,u({},c,d?"".concat(m).concat(d):m))}),{})}var ee=function(e){return"string"==typeof e?h.breakpoints[e]:e};function ne(){var e=s(["\n      visibility: hidden;\n    "]);return ne=function(){return e},e}function re(){var e=s(["\n  ","\n"]);return re=function(){return e},e}var te=t(W)(re(),(function(e){return!e.matches&&n.css(ne())}));function oe(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 ae,ie,ue=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,t=r.useRef();r.useEffect((function(){t.current=oe(e,n)})),r.useEffect((function(){var e=t.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},ce=function(e,n){var r,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:h.breakpoints;ue((function(){var n=Object.keys(t).find((function(e){var n=C(t[e],"only");return matchMedia(n).matches}));r!==n&&(e(n),r=n)}),n)},pe=(ae=h.breakpoints,ie=Object.keys(ae),function(e,n){var r=Object.keys(e).filter((function(e){var n=ie.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,ie.join(", ")),n})).find((function(e){var n=ae[e],r=C(n,"only");return n&&matchMedia(r).matches}));return r?e[r]:n}),fe=function(e){var n=l(r.useState(),2),t=n[0],o=n[1];return ce((function(){var n=Object.keys(e).map(P).filter((function(e){var n=e.breakpoint,r=e.behavior,t=C(h.breakpoints[n.name],r);return matchMedia(t).matches})).reduce((function(n,r){var t=r.originPropName;return p({},n,u({},r.purePropName,e[t]))}),{});o(n)})),t||{}};e.Box=W,e.Composition=function(e){var n=e.children,t=f(e,["children"]),o=J(t),i=Object.keys(o).length>0,u=a(n),c="function"===u;return g(!(i&&!c),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(o).join('", "'),'"]: expected children to be a function, but got: ').concat(u,". Please provide render function as children, or remove assigned template props.")),r.createElement(X,Object.assign({},t),i&&c?n(o):n)},e.MediaQuery=D,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=q(W,o);return r.createElement(i,Object.assign({},n),e)}}(n,f(e,["children","except","for","from","to"]));if(o)return u(ee(o));var c=ee(a),p=ee(i);return c&&p&&!t?u(I({behavior:"down",breakpoint:p},{behavior:"up",breakpoint:c},!1).breakpoint):c&&p&&t?u(Y(c),U(p)):c&&!p?u(U(c)):!c&&p?u(Y(p)):r.createElement(r.Fragment,null,"children")},e.Visible=function(e){var n=e.children,r=e.except,t=e.for,a=e.from,i=e.to,u=f(e,["children","except","for","from","to"]),c=ee(t),p=ee(a),s=ee(i),l=c;p&&s&&!r&&(l=I({behavior:"down",breakpoint:s},{behavior:"up",breakpoint:p},!1).breakpoint);p&&s&&r&&(l=[Y(p),U(s)]),p&&!s&&(l=U(p)),!p&&s&&(l=Y(s));var d=F(l),m=d?{}:{"aria-hidden":"true"};return o.createElement(te,Object.assign({},u,m,{matches:d}),n)},e.default=h,e.defaultOptions=d,e.useBreakpointChange=ce,e.useResponsiveComponent=function(e){return function(n){var r=fe(n);return o.createElement(e,Object.assign({},r))}},e.useResponsiveProps=fe,e.useResponsiveValue=function(e,n){var t=l(r.useState(n),2),o=t[0],a=t[1];return ce((function(){var r=pe(e,n);a(r)})),o},e.useViewportChange=ue,e.withBreakpoints=pe,Object.defineProperty(e,"__esModule",{value:!0})}));

No alert changes

Improved metrics

Total package byte prevSize

122086

increased by3.85%

Number of package files

90

increased by3.45%

Lines of code

2125

increased by4.42%

No dependency changes