atomic-layout - npm Package Compare versions

Comparing version 0.16.1 to 0.16.2

lib/cjs/index.js

@@ -7,3 +7,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=e(require("styled-components")),n=require("react"),o=e(n);const s=r.div`
   }
-`;s.displayName="Box";const i=e=>t.compose(t.joinQueryList(([e,r])=>`(${e}:${/^\d/.test(String(r))?t.transformNumeric(r):r})`),t.normalizeQuery)(e),a=(e,t=!1)=>{const r="undefined"==typeof window?n.useEffect:n.useLayoutEffect,[o,s]=n.useState(t),a=n.useMemo(()=>[].concat(e).map(i).join(","),[e]),c=e=>{s(e.matches)};return r(()=>{const e=matchMedia(a);return c(e),e.addListener(c),()=>{e.removeListener(c)}},Object.keys(e)),o},c=(e,t)=>{const r=({children:r,...o})=>a(t)&&n.createElement(e,Object.assign({},o),r);return r.displayName=`Placeholder(${e.displayName})`,r},p=r.div`
+`;s.displayName="Box";const i=e=>n.forwardRef(e),a=e=>t.compose(t.joinQueryList(([e,r])=>`(${e}:${/^\d/.test(String(r))?t.transformNumeric(r):r})`),t.normalizeQuery)(e),c=(e,t=!1)=>{const r="undefined"==typeof window?n.useEffect:n.useLayoutEffect,[o,s]=n.useState(t),i=n.useMemo(()=>[].concat(e).map(a).join(","),[e]),c=e=>{s(e.matches)};return r(()=>{const e=matchMedia(i);return c(e),e.addListener(c),()=>{e.removeListener(c)}},Object.keys(e)),o},p=(e,t)=>{const r=i(({children:r,...o},s)=>c(t)&&n.createElement(e,Object.assign({ref:s},o),r));return r.displayName=`Placeholder(${e.displayName})`,r},u=r.div`
   && {
@@ -13,5 +13,5 @@ ${t.applyStyles};
   }
-`,u=e=>t=>n.createElement(s,Object.assign({area:e},t)),l=({children:e,...r})=>{const o=t.parseTemplates(r),s=n.useMemo(()=>t.generateComponents(o,u,c),[o]),i=Object.keys(s).length>0,a=typeof e,l="function"===a;return t.warn(!(i&&!l),`Failed to render Composition with template areas ["${Object.keys(s).join('", "')}"]: expected children to be a function, but got: ${a}. Please provide render function as children, or remove assigned template props (\`areas\`/\`template\`).`),n.createElement(p,Object.assign({},r),i&&l?e(s):e)};l.displayName="Composition";const d=(e,r=70)=>{const o=n.useRef();n.useEffect(()=>{o.current=t.throttle(e,r)}),n.useEffect(()=>{const{current:e}=o;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},m=e=>"string"==typeof e?t.Layout.breakpoints[e]:e,f=t.memoizeWith(e=>Object.entries(e).filter(([,e])=>null!=e).reduce((e,[t,r])=>e.concat(`${t}=${r.toString()}`),[]).join())(e=>(e=>{const{for:r,from:n,to:o,except:s}=e;if(r)return[m(r)];const i=m(n),a=m(o);if(i&&a&&!s){return[t.mergeAreaRecords({behavior:"down",breakpoint:a},{behavior:"up",breakpoint:i},!1).breakpoint]}return i&&a&&s?[t.closeBreakpoint(i),t.openBreakpoint(a)]:i&&!a?[t.openBreakpoint(i)]:!i&&a?[t.closeBreakpoint(a)]:[]})(e).map(i).join(e.except?",":" "));function y(e,t=!1){const[r,o]=n.useState(t),s=f(e);return d(()=>{const{matches:e}=matchMedia(s);o(e)}),r}const b=({children:e,except:t,for:r,from:o,to:i,...a})=>y({for:r,from:o,to:i,except:t})&&n.createElement(s,Object.assign({},a),e);b.displayName="Only";const h=r(s)`
+`,l=e=>i((t,r)=>n.createElement(s,Object.assign({ref:r,area:e},t))),d=i(({children:e,...r},o)=>{const s=t.parseTemplates(r),i=n.useMemo(()=>t.generateComponents(s,l,p),[s]),a=Object.keys(i).length>0,c=typeof e,d="function"===c;return t.warn(!(a&&!d),`Failed to render 'Composition' with template areas ["${Object.keys(i).join('", "')}"]: expected children to be a function, but got: ${c}. Please provide render function as children, or remove assigned template props (\`areas\`/\`template\`).`),n.createElement(u,Object.assign({ref:o},r),a&&d?e(i):e)});d.displayName="Composition";const f=(e,r=70)=>{const o=n.useRef();n.useEffect(()=>{o.current=t.throttle(e,r)}),n.useEffect(()=>{const{current:e}=o;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},m=e=>"string"==typeof e?t.Layout.breakpoints[e]:e,y=t.memoizeWith(e=>Object.entries(e).filter(([,e])=>null!=e).reduce((e,[t,r])=>e.concat(`${t}=${r.toString()}`),[]).join())(e=>(e=>{const{for:r,from:n,to:o,except:s}=e;if(r)return[m(r)];const i=m(n),a=m(o);if(i&&a&&!s){return[t.mergeAreaRecords({behavior:"down",breakpoint:a},{behavior:"up",breakpoint:i},!1).breakpoint]}return i&&a&&s?[t.closeBreakpoint(i),t.openBreakpoint(a)]:i&&!a?[t.openBreakpoint(i)]:!i&&a?[t.closeBreakpoint(a)]:[]})(e).map(a).join(e.except?",":" "));function b(e,t=!1){const[r,o]=n.useState(t),s=y(e);return f(()=>{const{matches:e}=matchMedia(s);o(e)}),r}const h=i(({children:e,except:t,for:r,from:o,to:i,...a},c)=>b({for:r,from:o,to:i,except:t})&&n.createElement(s,Object.assign({ref:c},a),e));h.displayName="Only";const x=r(s)`
   ${({matches:e})=>!e&&"\n      visibility: hidden;\n    "}
-`,x=({children:e,except:t,for:r,from:n,to:s,...i})=>{const a=y({except:t,for:r,from:n,to:s}),c=a?{}:{"aria-hidden":"true"};return o.createElement(h,Object.assign({},i,c,{matches:a}),e)};x.displayName="Visible";const k=(e,r,n=t.Layout.breakpoints)=>{let o;d(()=>{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)},g=e=>{const{breakpoint:r,behavior:n}=e,o=t.createMediaQuery(t.Layout.breakpoints[r.name],n);return matchMedia(o).matches},j=e=>{const{breakpoint:t}=e;return t.isDefault&&"undefined"==typeof window},v=(e,r=g)=>Object.keys(e).map(t.parsePropName).filter(r).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{}),O=e=>{const[t,r]=n.useState(v(e,j)),[o,s]=n.useState();return k(s),n.useEffect(()=>{const t=v(e);r(t)},[e,o]),t||{}};exports.Box=s,exports.Composition=l,exports.Only=b,exports.Visible=x,exports.default=t.Layout,exports.makeResponsive=function(e){return o.forwardRef((t,r)=>{const n=O(t);return o.createElement(e,Object.assign({ref:r},n))})},exports.query=f,exports.useBreakpointChange=k,exports.useMediaQuery=a,exports.useResponsiveProps=O,exports.useResponsiveQuery=y,exports.useResponsiveValue=(e,r)=>{const[o,s]=n.useState(r);return k(()=>{const n=t.withBreakpoints(e,r);s(n)}),o},exports.useViewportChange=d;
+`,k=i(({children:e,except:t,for:r,from:n,to:s,...i},a)=>{const c=b({except:t,for:r,from:n,to:s}),p=c?{}:{"aria-hidden":"true"};return o.createElement(x,Object.assign({ref:a},i,p,{matches:c}),e)});k.displayName="Visible";const g=(e,r,n=t.Layout.breakpoints)=>{let o;f(()=>{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)},j=e=>{const{breakpoint:r,behavior:n}=e,o=t.createMediaQuery(t.Layout.breakpoints[r.name],n);return matchMedia(o).matches},v=e=>{const{breakpoint:t}=e;return t.isDefault&&"undefined"==typeof window},w=(e,r=j)=>Object.keys(e).map(t.parsePropName).filter(r).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{}),O=e=>{const[t,r]=n.useState(w(e,v)),[o,s]=n.useState();return g(s),n.useEffect(()=>{const t=w(e);r(t)},[e,o]),t||{}};exports.Box=s,exports.Composition=d,exports.Only=h,exports.Visible=k,exports.default=t.Layout,exports.makeResponsive=function(e){return o.forwardRef((t,r)=>{const n=O(t);return o.createElement(e,Object.assign({ref:r},n))})},exports.query=y,exports.useBreakpointChange=g,exports.useMediaQuery=c,exports.useResponsiveProps=O,exports.useResponsiveQuery=b,exports.useResponsiveValue=(e,r)=>{const[o,s]=n.useState(r),i=()=>{const n=t.withBreakpoints(e,r);s(n)};return n.useEffect(i,[e,r]),g(i),o},exports.useViewportChange=f;
 //# sourceMappingURL=index.js.map

lib/esm/index.js

 import { applyStyles, compose, joinQueryList, transformNumeric, normalizeQuery, parseTemplates, generateComponents, warn, throttle, Layout, mergeAreaRecords, closeBreakpoint, openBreakpoint, memoizeWith, createMediaQuery as createMediaQuery$1, withBreakpoints, parsePropName } from '@atomic-layout/core';
 import styled from 'styled-components';
-import React__default, { useState, useMemo, useEffect, useLayoutEffect, createElement, useRef } from 'react';
+import React__default, { forwardRef as forwardRef$1, useState, useMemo, useEffect, useLayoutEffect, createElement, useRef } from 'react';
 
@@ -176,2 +176,6 @@ function _typeof(obj) {
 
+var forwardRef = function forwardRef(component) {
+  return forwardRef$1(component);
+};
+
 /**
@@ -234,3 +238,3 @@ * Creates a media querty string based on the given params.
 var withPlaceholder = function withPlaceholder(Component, breakpoints) {
-  var Placeholder = function Placeholder(_ref) {
+  var Placeholder = forwardRef(function (_ref, ref) {
     var children = _ref.children,
@@ -240,5 +244,6 @@ restProps = _objectWithoutProperties(_ref, ["children"]);
     var matches = useMediaQuery(breakpoints);
-    return matches && createElement(Component, Object.assign({}, restProps), children);
-  };
-
+    return matches && createElement(Component, Object.assign({
+      ref: ref
+    }, restProps), children);
+  });
   Placeholder.displayName = "Placeholder(".concat(Component.displayName, ")");
@@ -263,10 +268,11 @@ return Placeholder;
 var createAreaComponent = function createAreaComponent(areaName) {
-  return function (props) {
+  return forwardRef(function (props, ref) {
     return createElement(Box, Object.assign({
+      ref: ref,
       area: areaName
     }, props));
-  };
+  });
 };
 
-var Composition = function Composition(_ref2) {
+var Composition = forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -287,6 +293,7 @@ restProps = _objectWithoutProperties(_ref2, ["children"]);
 
-  warn(!(hasAreaComponents && !hasChildrenFunction), "Failed to render Composition with template areas [\"".concat(Object.keys(Areas).join('", "'), "\"]: expected children to be a function, but got: ").concat(childrenType, ". Please provide render function as children, or remove assigned template props (`areas`/`template`)."));
-  return createElement(CompositionWrapper, Object.assign({}, restProps), hasAreaComponents && hasChildrenFunction ? children(Areas) : children);
-};
-
+  warn(!(hasAreaComponents && !hasChildrenFunction), "Failed to render 'Composition' with template areas [\"".concat(Object.keys(Areas).join('", "'), "\"]: expected children to be a function, but got: ").concat(childrenType, ". Please provide render function as children, or remove assigned template props (`areas`/`template`)."));
+  return createElement(CompositionWrapper, Object.assign({
+    ref: ref
+  }, restProps), hasAreaComponents && hasChildrenFunction ? children(Areas) : children);
+});
 Composition.displayName = 'Composition';
@@ -427,3 +434,3 @@
 
-var Only = function Only(_ref) {
+var Only = forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -442,5 +449,6 @@ except = _ref.except,
   });
-  return matches && createElement(Box, Object.assign({}, restProps), children);
-};
-
+  return matches && createElement(Box, Object.assign({
+    ref: ref
+  }, restProps), children);
+});
 Only.displayName = 'Only';
@@ -461,7 +469,3 @@
 });
-/**
- * Displays children when the given responsive query matches.
- */
-
-var Visible = function Visible(_ref2) {
+var Visible = forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -483,7 +487,8 @@ except = _ref2.except,
   } : {};
-  return React__default.createElement(VisibleContainer, Object.assign({}, boxProps, ariaAttributes, {
+  return React__default.createElement(VisibleContainer, Object.assign({
+    ref: ref
+  }, boxProps, ariaAttributes, {
     matches: matches
   }), children);
-};
-
+});
 Visible.displayName = 'Visible';
@@ -525,6 +530,9 @@
 
-  useBreakpointChange(function () {
+  var callback = function callback() {
     var nextValue = withBreakpoints(breakpoints, defaultValue);
     setValue(nextValue);
-  });
+  };
+
+  useEffect(callback, [breakpoints, defaultValue]);
+  useBreakpointChange(callback);
   return value;
@@ -531,0 +539,0 @@ };

lib/types/components/Composition.d.ts

 import * as React from 'react';
 import { CompositionProps } from '@atomic-layout/core';
-declare const Composition: React.FC<CompositionProps>;
+declare const Composition: React.FC<CompositionProps & {
+    ref?: unknown;
+}>;
 export default Composition;

lib/types/components/Only.d.ts

@@ -5,3 +5,5 @@ import * as React from 'react';
 export declare type OnlyProps = BoxProps & ResponsiveQueryParams;
-declare const Only: React.FC<OnlyProps>;
+declare const Only: React.FC<BoxProps & ResponsiveQueryParams & {
+    ref?: unknown;
+}>;
 export default Only;

lib/types/components/Visible.d.ts

 import React from 'react';
-import { OnlyProps } from './Only';
-/**
- * Displays children when the given responsive query matches.
- */
-declare const Visible: React.FC<OnlyProps>;
+declare const Visible: React.FC<import("@atomic-layout/core").BoxProps & import("../hooks/useResponsiveQuery").ResponsiveQueryParams & {
+    ref?: unknown;
+}>;
 export default Visible;

lib/types/utils/withPlaceholder.d.ts

@@ -8,2 +8,4 @@ import * as React from 'react';
  */
-export declare const withPlaceholder: (Component: import("react").FC<import("@atomic-layout/core").BoxProps>, breakpoints: Breakpoint[]) => React.FC<GenericProps>;
+export declare const withPlaceholder: (Component: import("react").FC<import("@atomic-layout/core").BoxProps>, breakpoints: Breakpoint[]) => React.FC<GenericProps & {
+    ref?: unknown;
+}>;

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";t=t&&t.hasOwnProperty("default")?t.default:t;var n="default"in r?r.default:r;var o,a=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=[/\.+/,/^[0-9]/,"/","auto"];function c(e){return p.every(t=>t instanceof RegExp?!t.test(e):e!==t)}const l=i(e=>{const t=[],r=[];return e.forEach(e=>{c(e)||/\.+/.test(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"]},order:{props:["order"]},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){return e.replace(/^./,e=>e.toUpperCase())}function h(e){const t=Object.keys(a.breakpoints).map(g).join("|"),r=["down","only"].map(g).join("|"),n=new RegExp(`(${t})$`,"g"),o=new RegExp(`(${r})$`,"g"),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 b(e){return Object.entries(e).filter(([e,t])=>u(t)).map(([e,t])=>{return[(r=e,r.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())),t];var r})}const y=e=>t=>t.map(e).join(" and ");function v(e,t){return i(y(([e,t])=>`(${e}:${String(s(t))})`),(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)))(t),b)(e)}const k=(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}})(a.breakpoints);function j(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function w(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===j(r)?void 0:e[r]}),{})}function x(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=j(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 O=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 V=e=>{const t={};return r=>function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]}};const P=i(V(e=>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}=h(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}=h(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:O(e[r])}),{}));function B(e){return e.slice(0,e.length-1)}const N=e=>e.replace(/^min|max/,"_");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=N(e);return n===N(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},E=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?w(t.breakpoint):t.breakpoint});t.Layout=a,t.applyStyles=function(e){return Object.keys(e).map(h).filter(({purePropName:e})=>m.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:i,transformValue:u}=m[t],s=e[r];return((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 ${v(i,n)} {${o}}`:o})(i,u?u(s):s,n,o)}).join(" ")},t.closeBreakpoint=function(e){return Object.entries(e).map(([e,t])=>[j(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=v,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&&S(l,c)){const e=x(c,l,p);return B(t).concat(E(s,e))}return t.concat(E(s,c))}if(l){const e=x(c,l,p);return B(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=g(o);return s.displayName=`Area(${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=y,t.memoizeWith=V,t.mergeAreaRecords=x,t.normalizeQuery=b,t.openBreakpoint=w,t.parsePropName=h,t.parseTemplates=P,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=k}));(o=a)&&o.__esModule&&Object.prototype.hasOwnProperty.call(o,"default")&&o.default;var i=a.Layout,u=a.applyStyles,s=a.closeBreakpoint,p=a.compose,c=a.createMediaQuery,l=(a.defaultOptions,a.generateComponents),f=a.joinQueryList,m=a.memoizeWith,d=a.mergeAreaRecords,g=a.normalizeQuery,h=a.openBreakpoint,b=a.parsePropName,y=a.parseTemplates,v=(a.propAliases,a.throttle),k=a.transformNumeric,j=a.warn,w=a.withBreakpoints;function x(e){return(x="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 O(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){O(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=t.div(E(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),u);C.displayName="Box";var $=function(e){return p(f((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)},L=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n="undefined"==typeof window?r.useEffect:r.useLayoutEffect,o=r.useState(t),a=S(o,2),i=a[0],u=a[1],s=r.useMemo((function(){return[].concat(e).map($).join(",")}),[e]),p=function(e){u(e.matches)};return n((function(){var e=matchMedia(s);return p(e),e.addListener(p),function(){e.removeListener(p)}}),Object.keys(e)),i},R=function(e,t){var n=function(n){var o=n.children,a=B(n,["children"]);return L(t)&&r.createElement(e,Object.assign({},a),o)};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 A=t.div(W(),u,(function(e){return e.inline?"inline-grid":"grid"})),M=function(e){return function(t){return r.createElement(C,Object.assign({area:e},t))}},z=function(e){var t=e.children,n=B(e,["children"]),o=y(n),a=r.useMemo((function(){return l(o,M,R)}),[o]),i=Object.keys(a).length>0,u=x(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 (`areas`/`template`).")),r.createElement(A,Object.assign({},n),i&&s?t(a):t)};z.displayName="Composition";var D=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)}}),[])},F=function(e){return"string"==typeof e?i.breakpoints[e]:e},Q=m((function(e){return Object.entries(e).filter((function(e){return null!=S(e,2)[1]})).reduce((function(e,t){var r=S(t,2),n=r[0],o=r[1];return e.concat("".concat(n,"=").concat(o.toString()))}),[]).join()}))((function(e){return function(e){var t=e.for,r=e.from,n=e.to,o=e.except;if(t)return[F(t)];var a=F(r),i=F(n);return a&&i&&!o?[d({behavior:"down",breakpoint:i},{behavior:"up",breakpoint:a},!1).breakpoint]:a&&i&&o?[s(a),h(i)]:a&&!i?[h(a)]:!a&&i?[s(i)]:[]}(e).map($).join(e.except?",":" ")}));function T(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=Q(e);return D((function(){var e=matchMedia(u).matches;i(e)})),a}var _=function(e){var t=e.children,n=e.except,o=e.for,a=e.from,i=e.to,u=B(e,["children","except","for","from","to"]);return T({for:o,from:a,to:i,except:n})&&r.createElement(C,Object.assign({},u),t)};function I(){var e=N(["\n  ","\n"]);return I=function(){return e},e}_.displayName="Only";var U=t(C)(I(),(function(e){return!e.matches&&"\n      visibility: hidden;\n    "})),H=function(e){var t=e.children,r=e.except,o=e.for,a=e.from,i=e.to,u=B(e,["children","except","for","from","to"]),s=T({except:r,for:o,from:a,to:i}),p=s?{}:{"aria-hidden":"true"};return n.createElement(U,Object.assign({},u,p,{matches:s}),t)};H.displayName="Visible";var q=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:i.breakpoints;D((function(){var t=Object.keys(n).find((function(e){var t=c(n[e],"only");return matchMedia(t).matches}));r!==t&&(e(t),r=t)}),t)},G=function(e){var t=e.breakpoint,r=e.behavior,n=c(i.breakpoints[t.name],r);return matchMedia(n).matches},Z=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},J=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:G;return Object.keys(e).map(b).filter(t).reduce((function(t,r){var n=r.originPropName;return P({},t,O({},r.purePropName,e[n]))}),{})},K=function(e){var t=S(r.useState(J(e,Z)),2),n=t[0],o=t[1],a=S(r.useState(),2),i=a[0],u=a[1];return q(u),r.useEffect((function(){var t=J(e);o(t)}),[e,i]),n||{}};e.Box=C,e.Composition=z,e.Only=_,e.Visible=H,e.default=i,e.makeResponsive=function(e){return n.forwardRef((function(t,r){var o=K(t);return n.createElement(e,Object.assign({ref:r},o))}))},e.query=Q,e.useBreakpointChange=q,e.useMediaQuery=L,e.useResponsiveProps=K,e.useResponsiveQuery=T,e.useResponsiveValue=function(e,t){var n=S(r.useState(t),2),o=n[0],a=n[1];return q((function(){var r=w(e,t);a(r)})),o},e.useViewportChange=D,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";t=t&&t.hasOwnProperty("default")?t.default:t;var n="default"in r?r.default:r;var o,a=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=[/\.+/,/^[0-9]/,"/","auto"];function c(e){return p.every(t=>t instanceof RegExp?!t.test(e):e!==t)}const l=i(e=>{const t=[],r=[];return e.forEach(e=>{c(e)||/\.+/.test(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"]},order:{props:["order"]},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){return e.replace(/^./,e=>e.toUpperCase())}function h(e){const t=Object.keys(a.breakpoints).map(g).join("|"),r=["down","only"].map(g).join("|"),n=new RegExp(`(${t})$`,"g"),o=new RegExp(`(${r})$`,"g"),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 b(e){return Object.entries(e).filter(([e,t])=>u(t)).map(([e,t])=>{return[(r=e,r.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())),t];var r})}const y=e=>t=>t.map(e).join(" and ");function v(e,t){return i(y(([e,t])=>`(${e}:${String(s(t))})`),(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)))(t),b)(e)}const k=(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}})(a.breakpoints);function j(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function w(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===j(r)?void 0:e[r]}),{})}function x(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=j(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 O=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 V=e=>{const t={};return r=>function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]}};const P=i(V(e=>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}=h(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}=h(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:O(e[r])}),{}));function B(e){return e.slice(0,e.length-1)}const N=e=>e.replace(/^min|max/,"_");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=N(e);return n===N(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},E=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?w(t.breakpoint):t.breakpoint});t.Layout=a,t.applyStyles=function(e){return Object.keys(e).map(h).filter(({purePropName:e})=>m.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:i,transformValue:u}=m[t],s=e[r];return((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 ${v(i,n)} {${o}}`:o})(i,u?u(s):s,n,o)}).join(" ")},t.closeBreakpoint=function(e){return Object.entries(e).map(([e,t])=>[j(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=v,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&&S(l,c)){const e=x(c,l,p);return B(t).concat(E(s,e))}return t.concat(E(s,c))}if(l){const e=x(c,l,p);return B(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=g(o);return s.displayName=`Area(${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=y,t.memoizeWith=V,t.mergeAreaRecords=x,t.normalizeQuery=b,t.openBreakpoint=w,t.parsePropName=h,t.parseTemplates=P,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=k}));(o=a)&&o.__esModule&&Object.prototype.hasOwnProperty.call(o,"default")&&o.default;var i=a.Layout,u=a.applyStyles,s=a.closeBreakpoint,p=a.compose,c=a.createMediaQuery,l=(a.defaultOptions,a.generateComponents),f=a.joinQueryList,m=a.memoizeWith,d=a.mergeAreaRecords,g=a.normalizeQuery,h=a.openBreakpoint,b=a.parsePropName,y=a.parseTemplates,v=(a.propAliases,a.throttle),k=a.transformNumeric,j=a.warn,w=a.withBreakpoints;function x(e){return(x="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 O(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){O(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=t.div(E(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),u);C.displayName="Box";var $=function(e){return r.forwardRef(e)},L=function(e){return p(f((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)},R=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n="undefined"==typeof window?r.useEffect:r.useLayoutEffect,o=r.useState(t),a=S(o,2),i=a[0],u=a[1],s=r.useMemo((function(){return[].concat(e).map(L).join(",")}),[e]),p=function(e){u(e.matches)};return n((function(){var e=matchMedia(s);return p(e),e.addListener(p),function(){e.removeListener(p)}}),Object.keys(e)),i},W=function(e,t){var n=$((function(n,o){var a=n.children,i=B(n,["children"]);return R(t)&&r.createElement(e,Object.assign({ref:o},i),a)}));return n.displayName="Placeholder(".concat(e.displayName,")"),n};function A(){var e=N(["\n  && {\n    ",";\n    display: ",";\n  }\n"]);return A=function(){return e},e}var M=t.div(A(),u,(function(e){return e.inline?"inline-grid":"grid"})),z=function(e){return $((function(t,n){return r.createElement(C,Object.assign({ref:n,area:e},t))}))},D=$((function(e,t){var n=e.children,o=B(e,["children"]),a=y(o),i=r.useMemo((function(){return l(a,z,W)}),[a]),u=Object.keys(i).length>0,s=x(n),p="function"===s;return j(!(u&&!p),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(i).join('", "'),'"]: expected children to be a function, but got: ').concat(s,". Please provide render function as children, or remove assigned template props (`areas`/`template`).")),r.createElement(M,Object.assign({ref:t},o),u&&p?n(i):n)}));D.displayName="Composition";var F=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)}}),[])},Q=function(e){return"string"==typeof e?i.breakpoints[e]:e},T=m((function(e){return Object.entries(e).filter((function(e){return null!=S(e,2)[1]})).reduce((function(e,t){var r=S(t,2),n=r[0],o=r[1];return e.concat("".concat(n,"=").concat(o.toString()))}),[]).join()}))((function(e){return function(e){var t=e.for,r=e.from,n=e.to,o=e.except;if(t)return[Q(t)];var a=Q(r),i=Q(n);return a&&i&&!o?[d({behavior:"down",breakpoint:i},{behavior:"up",breakpoint:a},!1).breakpoint]:a&&i&&o?[s(a),h(i)]:a&&!i?[h(a)]:!a&&i?[s(i)]:[]}(e).map(L).join(e.except?",":" ")}));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=T(e);return F((function(){var e=matchMedia(u).matches;i(e)})),a}var I=$((function(e,t){var n=e.children,o=e.except,a=e.for,i=e.from,u=e.to,s=B(e,["children","except","for","from","to"]);return _({for:a,from:i,to:u,except:o})&&r.createElement(C,Object.assign({ref:t},s),n)}));function U(){var e=N(["\n  ","\n"]);return U=function(){return e},e}I.displayName="Only";var H=t(C)(U(),(function(e){return!e.matches&&"\n      visibility: hidden;\n    "})),q=$((function(e,t){var r=e.children,o=e.except,a=e.for,i=e.from,u=e.to,s=B(e,["children","except","for","from","to"]),p=_({except:o,for:a,from:i,to:u}),c=p?{}:{"aria-hidden":"true"};return n.createElement(H,Object.assign({ref:t},s,c,{matches:p}),r)}));q.displayName="Visible";var G=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:i.breakpoints;F((function(){var t=Object.keys(n).find((function(e){var t=c(n[e],"only");return matchMedia(t).matches}));r!==t&&(e(t),r=t)}),t)},Z=function(e){var t=e.breakpoint,r=e.behavior,n=c(i.breakpoints[t.name],r);return matchMedia(n).matches},J=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},K=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Z;return Object.keys(e).map(b).filter(t).reduce((function(t,r){var n=r.originPropName;return P({},t,O({},r.purePropName,e[n]))}),{})},X=function(e){var t=S(r.useState(K(e,J)),2),n=t[0],o=t[1],a=S(r.useState(),2),i=a[0],u=a[1];return G(u),r.useEffect((function(){var t=K(e);o(t)}),[e,i]),n||{}};e.Box=C,e.Composition=D,e.Only=I,e.Visible=q,e.default=i,e.makeResponsive=function(e){return n.forwardRef((function(t,r){var o=X(t);return n.createElement(e,Object.assign({ref:r},o))}))},e.query=T,e.useBreakpointChange=G,e.useMediaQuery=R,e.useResponsiveProps=X,e.useResponsiveQuery=_,e.useResponsiveValue=function(e,t){var n=S(r.useState(t),2),o=n[0],a=n[1],i=function(){var r=w(e,t);a(r)};return r.useEffect(i,[e,t]),G(i),o},e.useViewportChange=F,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.16.1",
+  "version": "0.16.2",
   "license": "MIT",
@@ -115,3 +115,3 @@ "esnext": "src/index.ts",
   ],
-  "gitHead": "0bc39effed8e0db8cc4609ff0f9a1c99cdac9f41"
+  "gitHead": "10866d7a428dfbbe9444d11fae8d2f473b66d992"
 }

No alert changes

Improved metrics

Total package byte prevSize

56945

increased by1.41%

Number of package files

28

increased by3.7%

Lines of code

766

increased by2.82%

No dependency changes