Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
atomic-layout
Advanced tools
atomic-layout - npm Package Compare versions
Comparing version 0.13.0 to 0.13.1
@@ -1,2 +0,2 @@ | ||
| "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` | ||
| "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"),n=e(require("styled-components")),r=require("react"),o=e(r);const s=n.div` | ||
| display: ${({flex:e,inline:t})=>e?t?"inline-flex":"flex":t?"inline-block":"block"}; | ||
@@ -7,3 +7,3 @@ | ||
| } | ||
| `,a=e=>t.compose(t.joinQueryList(([e,r])=>`(${e}:${/^\d/.test(String(r))?t.transformNumeric(r):r})`),t.normalizeQuery)(e),i=(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},c=({children:e,matches:t,...r})=>e(i(r,t));c.defaultProps={matches:!1};const p=(e,t)=>{const r=({children:r,...o})=>{const s=t.reduce((t,s,a)=>t.concat(n.createElement(c,Object.assign({},s,{key:`${e.displayName}_${a}`}),t=>t&&n.createElement(e,Object.assign({},o),r))),[]);return n.createElement(n.Fragment,null,s)};return r.displayName=`Placeholder(${e.displayName})`,r},u=r.div` | ||
| `;s.displayName="Box";const a=e=>t.compose(t.joinQueryList(([e,n])=>`(${e}:${/^\d/.test(String(n))?t.transformNumeric(n):n})`),t.normalizeQuery)(e),i=(e,t=!1)=>{const n="undefined"==typeof window?r.useEffect:r.useLayoutEffect,[o,s]=r.useState(t),i=r.useMemo(()=>[].concat(e).map(a).join(","),[e]),c=e=>{s(e.matches)};return n(()=>{const e=matchMedia(i);return c(e),e.addListener(c),()=>{e.removeListener(c)}},Object.keys(e)),o},c=({children:e,matches:t,...n})=>e(i(n,t));c.displayName="MediaQuery",c.defaultProps={matches:!1};const p=(e,t)=>{const n=({children:n,...o})=>{const s=t.reduce((t,s,a)=>t.concat(r.createElement(c,Object.assign({},s,{key:`${e.displayName}_${a}`}),t=>t&&r.createElement(e,Object.assign({},o),n))),[]);return r.createElement(r.Fragment,null,s)};return n.displayName=`Placeholder(${e.displayName})`,n},u=n.div` | ||
| && { | ||
@@ -13,5 +13,5 @@ ${t.applyStyles}; | ||
| } | ||
| `,l=e=>t=>n.createElement(s,Object.assign({area:e},t)),d=e=>"string"==typeof e?t.Layout.breakpoints[e]:e,m=r(s)` | ||
| `,l=e=>t=>r.createElement(s,Object.assign({area:e},t)),d=({children:e,...n})=>{const o=t.parseTemplates(n),s=t.generateComponents(o,l,p),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.`),r.createElement(u,Object.assign({},n),a&&c?e(s):e)};d.displayName="Composition";const m=e=>"string"==typeof e?t.Layout.breakpoints[e]:e,f=({children:e,except:n,for:o,from:a,to:i,...c})=>{const u=((e,t,n)=>(...o)=>{const s=p(e,o);return r.createElement(s,Object.assign({},n),t)})(s,e,c);if(o)return u(m(o));const l=m(a),d=m(i);if(l&&d&&!n){return u(t.mergeAreaRecords({behavior:"down",breakpoint:d},{behavior:"up",breakpoint:l},!1).breakpoint)}return l&&d&&n?u(t.closeBreakpoint(l),t.openBreakpoint(d)):l&&!d?u(t.openBreakpoint(l)):!l&&d?u(t.closeBreakpoint(d)):r.createElement(r.Fragment,null,"children")};f.displayName="Only";const y=n(s)` | ||
| ${({matches:e})=>!e&&"\n visibility: hidden;\n "} | ||
| `,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)},[])},y=(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)},b=e=>{const{breakpoint:r,behavior:n}=e,o=t.createMediaQuery(t.Layout.breakpoints[r.name],n);return matchMedia(o).matches},h=e=>{const{breakpoint:t}=e;return t.isDefault&&"undefined"==typeof window},k=(e,r=b)=>Object.keys(e).map(t.parsePropName).filter(r).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{}),g=e=>{const[t,r]=n.useState(k(e,h)),[o,s]=n.useState();return y(s),n.useEffect(()=>{const t=k(e);r(t)},[e,o]),t||{}};exports.Box=s,exports.Composition=({children:e,...r})=>{const o=t.parseTemplates(r),s=t.generateComponents(o,l,p),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.`),n.createElement(u,Object.assign({},r),a&&c?e(s):e)},exports.MediaQuery=c,exports.Only=({children:e,except:r,for:o,from:a,to:i,...c})=>{const u=((e,t,r)=>(...o)=>{const s=p(e,o);return n.createElement(s,Object.assign({},r),t)})(s,e,c);if(o)return u(d(o));const l=d(a),m=d(i);if(l&&m&&!r){return u(t.mergeAreaRecords({behavior:"down",breakpoint:m},{behavior:"up",breakpoint:l},!1).breakpoint)}return l&&m&&r?u(t.closeBreakpoint(l),t.openBreakpoint(m)):l&&!m?u(t.openBreakpoint(l)):!l&&m?u(t.closeBreakpoint(m)):n.createElement(n.Fragment,null,"children")},exports.Visible=({children:e,except:r,for:n,from:s,to:a,...c})=>{const p=d(n),u=d(s),l=d(a);let f=p;if(u&&l&&!r){const{breakpoint:e}=t.mergeAreaRecords({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:u},!1);f=e}u&&l&&r&&(f=[t.closeBreakpoint(u),t.openBreakpoint(l)]),u&&!l&&(f=t.openBreakpoint(u)),!u&&l&&(f=t.closeBreakpoint(l));const y=i(f),b=y?{}:{"aria-hidden":"true"};return o.createElement(m,Object.assign({},c,b,{matches:y}),e)},exports.default=t.Layout,exports.useBreakpointChange=y,exports.useMediaQuery=i,exports.useResponsiveComponent=function(e){return o.forwardRef((t,r)=>{const n=g(t);return o.createElement(e,Object.assign({ref:r},n))})},exports.useResponsiveProps=g,exports.useResponsiveValue=(e,r)=>{const[o,s]=n.useState(r);return y(()=>{const n=t.withBreakpoints(e,r);s(n)}),o},exports.useViewportChange=f; | ||
| `,b=({children:e,except:n,for:r,from:s,to:a,...c})=>{const p=m(r),u=m(s),l=m(a);let d=p;if(u&&l&&!n){const{breakpoint:e}=t.mergeAreaRecords({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:u},!1);d=e}u&&l&&n&&(d=[t.closeBreakpoint(u),t.openBreakpoint(l)]),u&&!l&&(d=t.openBreakpoint(u)),!u&&l&&(d=t.closeBreakpoint(l));const f=i(d),b=f?{}:{"aria-hidden":"true"};return o.createElement(y,Object.assign({},c,b,{matches:f}),e)};b.displayName="Visible";const h=(e,n=70)=>{const o=r.useRef();r.useEffect(()=>{o.current=t.throttle(e,n)}),r.useEffect(()=>{const{current:e}=o;return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[])},k=(e,n,r=t.Layout.breakpoints)=>{let o;h(()=>{const n=Object.keys(r).find(e=>{const n=t.createMediaQuery(r[e],"only");return matchMedia(n).matches});o!==n&&(e(n),o=n)},n)},g=e=>{const{breakpoint:n,behavior:r}=e,o=t.createMediaQuery(t.Layout.breakpoints[n.name],r);return matchMedia(o).matches},x=e=>{const{breakpoint:t}=e;return t.isDefault&&"undefined"==typeof window},v=(e,n=g)=>Object.keys(e).map(t.parsePropName).filter(n).reduce((t,{originPropName:n,purePropName:r})=>({...t,[r]:e[n]}),{}),j=e=>{const[t,n]=r.useState(v(e,x)),[o,s]=r.useState();return k(s),r.useEffect(()=>{const t=v(e);n(t)},[e,o]),t||{}};exports.Box=s,exports.Composition=d,exports.MediaQuery=c,exports.Only=f,exports.Visible=b,exports.default=t.Layout,exports.useBreakpointChange=k,exports.useMediaQuery=i,exports.useResponsiveComponent=function(e){return o.forwardRef((t,n)=>{const r=j(t);return o.createElement(e,Object.assign({ref:n},r))})},exports.useResponsiveProps=j,exports.useResponsiveValue=(e,n)=>{const[o,s]=r.useState(n);return k(()=>{const r=t.withBreakpoints(e,n);s(r)}),o},exports.useViewportChange=h; | ||
| //# sourceMappingURL=index.js.map |
@@ -174,2 +174,3 @@ import { applyStyles, compose, joinQueryList, transformNumeric, normalizeQuery, parseTemplates, generateComponents, warn, Layout, mergeAreaRecords, closeBreakpoint, openBreakpoint, throttle, createMediaQuery as createMediaQuery$1, withBreakpoints, parsePropName } from '@atomic-layout/core'; | ||
| }, applyStyles); | ||
| Box.displayName = 'Box'; | ||
@@ -236,2 +237,3 @@ /** | ||
| MediaQuery.displayName = 'MediaQuery'; | ||
| MediaQuery.defaultProps = { | ||
@@ -306,2 +308,4 @@ matches: false | ||
| Composition.displayName = 'Composition'; | ||
| var resolveBreakpoint = function resolveBreakpoint(breakpointRef) { | ||
@@ -368,2 +372,4 @@ return typeof breakpointRef === 'string' ? Layout.breakpoints[breakpointRef] : breakpointRef; | ||
| Only.displayName = 'Only'; | ||
| function _templateObject$2() { | ||
@@ -433,2 +439,4 @@ var data = _taggedTemplateLiteral(["\n ", "\n"]); | ||
| Visible.displayName = 'Visible'; | ||
| /** | ||
@@ -435,0 +443,0 @@ * Executes a callback on viewport change (window resize). |
@@ -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()),d={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 m(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?m(p):a.defaultBreakpointName,f=l===a.defaultBreakpointName;return{originPropName:e,purePropName:c,behavior:u?m(u):a.defaultBehavior,breakpoint:{name:l,isDefault:f}}}function h(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 b=e=>t=>t.map(e).join(" and ");function y(e,t){return i(b(([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),h)(e)}const v=(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=y(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(a.breakpoints);function k(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function w(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===k(r)?void 0:e[r]}),{})}function j(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=k(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 x=i(function(e){const t={};return r=>function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]}}(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}=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]:O(e[r])}),{}));function V(e){return e.slice(0,e.length-1)}const P=e=>e.replace(/^min|max/,"_");const B=(e,t)=>{const r=e.behavior===t.behavior,n="up"===e.behavior&&"down"===t.behavior;return!(!r&&!n)&&function(e,t){const r=Object.keys(e).concat(Object.keys(t));return r.every((e,t)=>{const n=P(e);return n===P(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},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(g).filter(({purePropName:e})=>d.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:i,transformValue:u}=d[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 ${y(i,n)} {${o}}`:o})(i,u?u(s):s,n,o)}).join(" ")},t.closeBreakpoint=function(e){return Object.entries(e).map(([e,t])=>[k(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=y,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&&B(l,c)){const e=j(c,l,p);return V(t).concat(E(s,e))}return t.concat(E(s,c))}if(l){const e=j(c,l,p);return V(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=o.replace(/^./,e=>e.toUpperCase());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=b,t.mergeAreaRecords=j,t.normalizeQuery=h,t.openBreakpoint=w,t.parsePropName=g,t.parseTemplates=x,t.propAliases=d,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=v}));(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,d=a.mergeAreaRecords,m=a.normalizeQuery,g=a.openBreakpoint,h=a.parsePropName,b=a.parseTemplates,y=(a.propAliases,a.throttle),v=a.transformNumeric,k=a.warn,w=a.withBreakpoints;function j(e){return(j="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 x(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 V(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){O(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}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 E(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 N(){var e=B(["\n display: ",";\n\n && {\n ",";\n }\n"]);return N=function(){return e},e}var S=t.div(N(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),u),C=function(e){return p(f((function(e){var t=E(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?v(n):n;return"(".concat(r,":").concat(o,")")})),m)(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=E(o,2),i=a[0],u=a[1],s=r.useMemo((function(){return[].concat(e).map(C).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},$=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=t.div(A(),u,(function(e){return e.inline?"inline-grid":"grid"})),M=function(e){return function(t){return r.createElement(S,Object.assign({area:e},t))}},F=function(e){return"string"==typeof e?i.breakpoints[e]:e};function D(){var e=B(["\n ","\n"]);return D=function(){return e},e}var z=t(S)(D(),(function(e){return!e.matches&&"\n visibility: hidden;\n "})),Q=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,n=r.useRef();r.useEffect((function(){n.current=y(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},_=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:i.breakpoints;Q((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)},T=function(e){var t=e.breakpoint,r=e.behavior,n=c(i.breakpoints[t.name],r);return matchMedia(n).matches},I=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},U=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:T;return Object.keys(e).map(h).filter(t).reduce((function(t,r){var n=r.originPropName;return V({},t,O({},r.purePropName,e[n]))}),{})},H=function(e){var t=E(r.useState(U(e,I)),2),n=t[0],o=t[1],a=E(r.useState(),2),i=a[0],u=a[1];return _(u),r.useEffect((function(){var t=U(e);o(t)}),[e,i]),n||{}};e.Box=S,e.Composition=function(e){var t=e.children,n=P(e,["children"]),o=b(n),a=l(o,M,R),i=Object.keys(a).length>0,u=j(t),s="function"===u;return k(!(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=P(e,["children","except","for","from","to"]),p=function(e,t,n){return function(){for(var o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];var u=R(e,a);return r.createElement(u,Object.assign({},n),t)}}(S,t,u);if(o)return p(F(o));var c=F(a),l=F(i);return c&&l&&!n?p(d({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:c},!1).breakpoint):c&&l&&n?p(s(c),g(l)):c&&!l?p(g(c)):!c&&l?p(s(l)):r.createElement(r.Fragment,null,"children")},e.Visible=function(e){var t=e.children,r=e.except,o=e.for,a=e.from,i=e.to,u=P(e,["children","except","for","from","to"]),p=F(o),c=F(a),l=F(i),f=p;c&&l&&!r&&(f=d({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:c},!1).breakpoint);c&&l&&r&&(f=[s(c),g(l)]),c&&!l&&(f=g(c)),!c&&l&&(f=s(l));var m=L(f),h=m?{}:{"aria-hidden":"true"};return n.createElement(z,Object.assign({},u,h,{matches:m}),t)},e.default=i,e.useBreakpointChange=_,e.useMediaQuery=L,e.useResponsiveComponent=function(e){return n.forwardRef((function(t,r){var o=H(t);return n.createElement(e,Object.assign({ref:r},o))}))},e.useResponsiveProps=H,e.useResponsiveValue=function(e,t){var n=E(r.useState(t),2),o=n[0],a=n[1];return _((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";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()),d={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 m(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?m(p):a.defaultBreakpointName,f=l===a.defaultBreakpointName;return{originPropName:e,purePropName:c,behavior:u?m(u):a.defaultBehavior,breakpoint:{name:l,isDefault:f}}}function h(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 b=e=>t=>t.map(e).join(" and ");function y(e,t){return i(b(([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),h)(e)}const v=(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=y(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(a.breakpoints);function k(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function w(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===k(r)?void 0:e[r]}),{})}function j(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=k(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 x=i(function(e){const t={};return r=>function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]}}(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}=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]:O(e[r])}),{}));function V(e){return e.slice(0,e.length-1)}const P=e=>e.replace(/^min|max/,"_");const N=(e,t)=>{const r=e.behavior===t.behavior,n="up"===e.behavior&&"down"===t.behavior;return!(!r&&!n)&&function(e,t){const r=Object.keys(e).concat(Object.keys(t));return r.every((e,t)=>{const n=P(e);return n===P(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},B=(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(g).filter(({purePropName:e})=>d.hasOwnProperty(e)).filter(({originPropName:t})=>u(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:i,transformValue:u}=d[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 ${y(i,n)} {${o}}`:o})(i,u?u(s):s,n,o)}).join(" ")},t.closeBreakpoint=function(e){return Object.entries(e).map(([e,t])=>[k(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=y,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&&N(l,c)){const e=j(c,l,p);return V(t).concat(B(s,e))}return t.concat(B(s,c))}if(l){const e=j(c,l,p);return V(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=o.replace(/^./,e=>e.toUpperCase());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=b,t.mergeAreaRecords=j,t.normalizeQuery=h,t.openBreakpoint=w,t.parsePropName=g,t.parseTemplates=x,t.propAliases=d,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=v}));(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,d=a.mergeAreaRecords,m=a.normalizeQuery,g=a.openBreakpoint,h=a.parsePropName,b=a.parseTemplates,y=(a.propAliases,a.throttle),v=a.transformNumeric,k=a.warn,w=a.withBreakpoints;function j(e){return(j="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 x(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 V(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?x(Object(r),!0).forEach((function(t){O(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}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 N(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function B(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 S=t.div(E(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),u);S.displayName="Box";var C=function(e){return p(f((function(e){var t=B(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?v(n):n;return"(".concat(r,":").concat(o,")")})),m)(e)},$=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=B(o,2),i=a[0],u=a[1],s=r.useMemo((function(){return[].concat(e).map(C).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},L=function(e){var t=e.children,r=e.matches,n=P(e,["children","matches"]);return t($(n,r))};L.displayName="MediaQuery",L.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(L,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=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"})),W=function(e){return function(t){return r.createElement(S,Object.assign({area:e},t))}},F=function(e){var t=e.children,n=P(e,["children"]),o=b(n),a=l(o,W,R),i=Object.keys(a).length>0,u=j(t),s="function"===u;return k(!(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)};F.displayName="Composition";var D=function(e){return"string"==typeof e?i.breakpoints[e]:e},Q=function(e){var t=e.children,n=e.except,o=e.for,a=e.from,i=e.to,u=P(e,["children","except","for","from","to"]),p=function(e,t,n){return function(){for(var o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];var u=R(e,a);return r.createElement(u,Object.assign({},n),t)}}(S,t,u);if(o)return p(D(o));var c=D(a),l=D(i);return c&&l&&!n?p(d({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:c},!1).breakpoint):c&&l&&n?p(s(c),g(l)):c&&!l?p(g(c)):!c&&l?p(s(l)):r.createElement(r.Fragment,null,"children")};function z(){var e=N(["\n ","\n"]);return z=function(){return e},e}Q.displayName="Only";var _=t(S)(z(),(function(e){return!e.matches&&"\n visibility: hidden;\n "})),T=function(e){var t=e.children,r=e.except,o=e.for,a=e.from,i=e.to,u=P(e,["children","except","for","from","to"]),p=D(o),c=D(a),l=D(i),f=p;c&&l&&!r&&(f=d({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:c},!1).breakpoint);c&&l&&r&&(f=[s(c),g(l)]),c&&!l&&(f=g(c)),!c&&l&&(f=s(l));var m=$(f),h=m?{}:{"aria-hidden":"true"};return n.createElement(_,Object.assign({},u,h,{matches:m}),t)};T.displayName="Visible";var I=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,n=r.useRef();r.useEffect((function(){n.current=y(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},U=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:i.breakpoints;I((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)},H=function(e){var t=e.breakpoint,r=e.behavior,n=c(i.breakpoints[t.name],r);return matchMedia(n).matches},q=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},G=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:H;return Object.keys(e).map(h).filter(t).reduce((function(t,r){var n=r.originPropName;return V({},t,O({},r.purePropName,e[n]))}),{})},Z=function(e){var t=B(r.useState(G(e,q)),2),n=t[0],o=t[1],a=B(r.useState(),2),i=a[0],u=a[1];return U(u),r.useEffect((function(){var t=G(e);o(t)}),[e,i]),n||{}};e.Box=S,e.Composition=F,e.MediaQuery=L,e.Only=Q,e.Visible=T,e.default=i,e.useBreakpointChange=U,e.useMediaQuery=$,e.useResponsiveComponent=function(e){return n.forwardRef((function(t,r){var o=Z(t);return n.createElement(e,Object.assign({ref:r},o))}))},e.useResponsiveProps=Z,e.useResponsiveValue=function(e,t){var n=B(r.useState(t),2),o=n[0],a=n[1];return U((function(){var r=w(e,t);a(r)})),o},e.useViewportChange=I,Object.defineProperty(e,"__esModule",{value:!0})})); |
| { | ||
| "name": "atomic-layout", | ||
| "description": "Physical representation of layout composition to create declarative, responsive layouts in React.", | ||
| "version": "0.13.0", | ||
| "version": "0.13.1", | ||
| "license": "MIT", | ||
@@ -56,3 +56,3 @@ "esnext": "src/index.ts", | ||
| "dependencies": { | ||
| "@atomic-layout/core": "^0.12.0" | ||
| "@atomic-layout/core": "^0.12.1" | ||
| }, | ||
@@ -116,3 +116,3 @@ "devDependencies": { | ||
| ], | ||
| "gitHead": "e3422ade0bc19401cd129811e0c5b30fa9a51e69" | ||
| "gitHead": "620b5b4757d2633e62044067f64c4bb3845c9aca" | ||
| } |
@@ -1,7 +0,9 @@ | ||
| [][npm-url] | ||
| [][bundlephobia-url] | ||
| [][npm-url] | ||
| [][bundlephobia-url] | ||
| [][build-url] | ||
| [][test-coverage-url] | ||
| [][dependencies-url] | ||
| [][dependencies-url] | ||
| [][community-reactiflux] | ||
| [][community-spectrum] | ||
| <br /> | ||
@@ -91,3 +93,2 @@ | ||
| [build-url]: https://circleci.com/gh/kettanaito/atomic-layout | ||
| [test-coverage-url]: https://coveralls.io/github/kettanaito/atomic-layout | ||
| [dependencies-url]: https://david-dm.org/kettanaito/atomic-layout | ||
@@ -94,0 +95,0 @@ [community-spectrum]: https://spectrum.chat/atomic-layout |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by1.08%
55578
- Lines of code
- increased by0.74%
683
- Number of lines in readme file
- increased by1.03%
98
Dependency changes
Updated@atomic-layout/core@^0.12.1