atomic-layout - npm Package Compare versions

Comparing version 0.12.3 to 0.12.4

lib/cjs/index.js

@@ -16,3 +16,3 @@ "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("@atomic-layout/core"),r=require("styled-components"),n=e(r),o=require("react"),s=e(o);const a=n.div`
     `}
-`,b=(e,r=70)=>{const n=o.useRef();o.useEffect(()=>{n.current=t.throttle(e,r)}),o.useEffect(()=>{const{current:e}=n;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},y=(e,r,n=t.Layout.breakpoints)=>{let o;b(()=>{const r=Object.keys(n).find(e=>{const r=t.createMediaQuery(n[e],"only");return matchMedia(r).matches});o!==r&&(e(r),o=r)},r)},h=e=>{const[r,n]=o.useState(),[s,a]=o.useState();return y(a),o.useEffect(()=>{const r=(e=>{return Object.keys(e).map(t.parsePropName).filter(({breakpoint:e,behavior:r})=>{const n=t.createMediaQuery(t.Layout.breakpoints[e.name],r),{matches:o}=matchMedia(n);return o}).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{})})(e);n(r)},[e,s]),r||{}};exports.Box=a,exports.Composition=({children:e,...r})=>{const n=t.parseTemplates(r),s=t.generateComponents(n,d,u),a=Object.keys(s).length>0,i=typeof e,c="function"===i;return t.warn(!(a&&!c),`Failed to render 'Composition' with template areas ["${Object.keys(s).join('", "')}"]: expected children to be a function, but got: ${i}. Please provide render function as children, or remove assigned template props.`),o.createElement(l,Object.assign({},r),a&&c?e(s):e)},exports.MediaQuery=p,exports.Only=({children:e,except:r,for:n,from:s,to:i,...c})=>{const p=((e,t)=>(...r)=>{const n=u(a,r);return o.createElement(n,Object.assign({},t),e)})(e,c);if(n)return p(m(n));const l=m(s),d=m(i);if(l&&d&&!r){return p(t.mergeAreaRecords({behavior:"down",breakpoint:d},{behavior:"up",breakpoint:l},!1).breakpoint)}return l&&d&&r?p(t.closeBreakpoint(l),t.openBreakpoint(d)):l&&!d?p(t.openBreakpoint(l)):!l&&d?p(t.closeBreakpoint(d)):o.createElement(o.Fragment,null,"children")},exports.Visible=({children:e,except:r,for:n,from:o,to:a,...i})=>{const p=m(n),u=m(o),l=m(a);let d=p;if(u&&l&&!r){const{breakpoint:e}=t.mergeAreaRecords({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:u},!1);d=e}u&&l&&r&&(d=[t.closeBreakpoint(u),t.openBreakpoint(l)]),u&&!l&&(d=t.openBreakpoint(u)),!u&&l&&(d=t.closeBreakpoint(l));const b=c(d),y=b?{}:{"aria-hidden":"true"};return s.createElement(f,Object.assign({},i,y,{matches:b}),e)},exports.default=t.Layout,exports.useBreakpointChange=y,exports.useResponsiveComponent=function(e){return s.forwardRef((t,r)=>{const n=h(t);return s.createElement(e,Object.assign({ref:r},n))})},exports.useResponsiveProps=h,exports.useResponsiveValue=(e,r)=>{const[n,s]=o.useState(r);return y(()=>{const n=t.withBreakpoints(e,r);s(n)}),n},exports.useViewportChange=b;
+`,b=(e,r=70)=>{const n=o.useRef();o.useEffect(()=>{n.current=t.throttle(e,r)}),o.useEffect(()=>{const{current:e}=n;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},y=(e,r,n=t.Layout.breakpoints)=>{let o;b(()=>{const r=Object.keys(n).find(e=>{const r=t.createMediaQuery(n[e],"only");return matchMedia(r).matches});o!==r&&(e(r),o=r)},r)},h=e=>{const{breakpoint:r,behavior:n}=e,o=t.createMediaQuery(t.Layout.breakpoints[r.name],n);return matchMedia(o).matches},k=e=>{const{breakpoint:t}=e;return t.isDefault&&"undefined"==typeof window},g=(e,r=h)=>Object.keys(e).map(t.parsePropName).filter(r).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{}),x=e=>{const[t,r]=o.useState(g(e,k)),[n,s]=o.useState();return y(s),o.useEffect(()=>{const t=(e=>g(e))(e);r(t)},[e,n]),t||{}};exports.Box=a,exports.Composition=({children:e,...r})=>{const n=t.parseTemplates(r),s=t.generateComponents(n,d,u),a=Object.keys(s).length>0,i=typeof e,c="function"===i;return t.warn(!(a&&!c),`Failed to render 'Composition' with template areas ["${Object.keys(s).join('", "')}"]: expected children to be a function, but got: ${i}. Please provide render function as children, or remove assigned template props.`),o.createElement(l,Object.assign({},r),a&&c?e(s):e)},exports.MediaQuery=p,exports.Only=({children:e,except:r,for:n,from:s,to:i,...c})=>{const p=((e,t)=>(...r)=>{const n=u(a,r);return o.createElement(n,Object.assign({},t),e)})(e,c);if(n)return p(m(n));const l=m(s),d=m(i);if(l&&d&&!r){return p(t.mergeAreaRecords({behavior:"down",breakpoint:d},{behavior:"up",breakpoint:l},!1).breakpoint)}return l&&d&&r?p(t.closeBreakpoint(l),t.openBreakpoint(d)):l&&!d?p(t.openBreakpoint(l)):!l&&d?p(t.closeBreakpoint(d)):o.createElement(o.Fragment,null,"children")},exports.Visible=({children:e,except:r,for:n,from:o,to:a,...i})=>{const p=m(n),u=m(o),l=m(a);let d=p;if(u&&l&&!r){const{breakpoint:e}=t.mergeAreaRecords({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:u},!1);d=e}u&&l&&r&&(d=[t.closeBreakpoint(u),t.openBreakpoint(l)]),u&&!l&&(d=t.openBreakpoint(u)),!u&&l&&(d=t.closeBreakpoint(l));const b=c(d),y=b?{}:{"aria-hidden":"true"};return s.createElement(f,Object.assign({},i,y,{matches:b}),e)},exports.default=t.Layout,exports.useBreakpointChange=y,exports.useMediaQuery=c,exports.useResponsiveComponent=function(e){return s.forwardRef((t,r)=>{const n=x(t);return s.createElement(e,Object.assign({ref:r},n))})},exports.useResponsiveProps=x,exports.useResponsiveValue=(e,r)=>{const[n,s]=o.useState(r);return y(()=>{const n=t.withBreakpoints(e,r);s(n)}),n},exports.useViewportChange=b;
 //# sourceMappingURL=index.js.map

lib/esm/index.js

@@ -500,2 +500,42 @@ import { applyStyles, compose, joinQueryList, transformNumeric, normalizeQuery, parseTemplates, generateComponents, warn, Layout, mergeAreaRecords, closeBreakpoint, openBreakpoint, throttle, createMediaQuery as createMediaQuery$1, withBreakpoints, parsePropName } from '@atomic-layout/core';
 /**
+ * Default responsive props matcher.
+ * Creates a media query based on the given prop's breakpoint
+ * and uses native "window.matchMedia" to assert the match.
+ */
+
+var defaultMatcher = function defaultMatcher(parsedProp) {
+  var breakpoint = parsedProp.breakpoint,
+      behavior = parsedProp.behavior;
+  var mediaQuery = createMediaQuery$1(Layout.breakpoints[breakpoint.name], behavior);
+  return matchMedia(mediaQuery).matches;
+};
+/**
+ * Server-side responsive props matcher.
+ * Apply props with the default breakpoint on the server.
+ * Server assumes the default breakpoint is currently present.
+ *
+ * @TODO Resolve for non-default breakpoints.
+ * @see https://github.com/kettanaito/atomic-layout/issues/284
+ */
+
+
+var serverMatcher = function serverMatcher(parsedProp) {
+  var breakpoint = parsedProp.breakpoint;
+  return breakpoint.isDefault && typeof window === 'undefined';
+};
+/**
+ * Filters given responsive props against the browser state.
+ * Accepts an optional matcher function to operate on a server.
+ */
+
+
+var filterProps = function filterProps(props) {
+  var matcher = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultMatcher;
+  return Object.keys(props).map(parsePropName).filter(matcher).reduce(function (acc, _ref) {
+    var originPropName = _ref.originPropName,
+        purePropName = _ref.purePropName;
+    return _objectSpread2({}, acc, _defineProperty({}, purePropName, props[originPropName]));
+  }, {});
+};
+/**
  * Accepts an object of responsive props and returns
@@ -505,4 +545,5 @@ * an object of props relative to the current viewport.
 
+
 var useResponsiveProps = function useResponsiveProps(responsiveProps) {
-  var _useState = useState(),
+  var _useState = useState(filterProps(responsiveProps, serverMatcher)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -518,17 +559,3 @@ props = _useState2[0],
   var resolveProps = function resolveProps(inputProps) {
-    var nextProps = Object.keys(inputProps).map(parsePropName).filter(function (_ref) {
-      var breakpoint = _ref.breakpoint,
-          behavior = _ref.behavior;
-      var mediaQuery = createMediaQuery$1(Layout.breakpoints[breakpoint.name], behavior);
-
-      var _matchMedia = matchMedia(mediaQuery),
-          matches = _matchMedia.matches;
-
-      return matches;
-    }).reduce(function (acc, _ref2) {
-      var originPropName = _ref2.originPropName,
-          purePropName = _ref2.purePropName;
-      return _objectSpread2({}, acc, _defineProperty({}, purePropName, inputProps[originPropName]));
-    }, {});
-    return nextProps;
+    return filterProps(inputProps);
   }; // Store the current breakpoint name in the state.
@@ -570,3 +597,3 @@ // That way props update effect below can re-evaluate whenever
 export default Layout;
-export { Box, Composition, MediaQuery, Only, Visible, useBreakpointChange, useResponsiveComponent, useResponsiveProps, useResponsiveValue, useViewportChange };
+export { Box, Composition, MediaQuery, Only, Visible, useBreakpointChange, useMediaQuery, useResponsiveComponent, useResponsiveProps, useResponsiveValue, useViewportChange };
 //# sourceMappingURL=index.js.map

lib/types/index.d.ts

@@ -13,1 +13,2 @@ import { Layout } from '@atomic-layout/core';
 export { default as useResponsiveComponent } from './hooks/useResponsiveComponent';
+export { useMediaQuery } from './hooks/useMediaQuery';

lib/umd/index.js

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

package.json

 {
   "name": "atomic-layout",
   "description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "license": "MIT",
@@ -31,2 +31,3 @@ "esnext": "src/index.ts",
     "cypress:cli": "cypress run --spec=./examples/all.test.js --browser=chrome --env envName=ci",
+    "jest": "jest",
     "test": "yarn test:unit && yarn test:e2e",
@@ -57,3 +58,3 @@ "test:unit": "cross-env BABEL_ENV=test jest --runInBand",
   "dependencies": {
-    "@atomic-layout/core": "^0.11.3"
+    "@atomic-layout/core": "^0.11.4"
   },
@@ -128,3 +129,3 @@ "devDependencies": {
   ],
-  "gitHead": "bb37c3b28d99d8a6728e7e11f4e4ea9a820ba52f"
+  "gitHead": "31317d8aef8cb14e2dd1d646dd4d18e856188a6b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50979

increased by2.66%

Number of package files

22

increased by4.76%

Lines of code

689

increased by4.08%

Dependency changes

• Updated@atomic-layout/core@^0.11.4