Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

atomic-layout

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

atomic-layout - npm Package Compare versions

Comparing version 0.14.0 to 0.15.0

6

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 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.displayName="MediaQuery",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 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`
&& {

@@ -13,5 +13,5 @@ ${t.applyStyles};

}
`,l=e=>t=>n.createElement(s,Object.assign({area:e},t)),d=({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)};d.displayName="Composition";const m=(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)},[])},f=e=>"string"==typeof e?t.Layout.breakpoints[e]:e;function y(e,r=!1){const[o,s]=n.useState(r),{for:i,from:c,to:p,except:u}=e,l=n.useMemo(()=>{const e=((e,r,n,o)=>{if(e)return f(e);const s=f(r),a=f(n);if(s&&a&&!o){return t.mergeAreaRecords({behavior:"down",breakpoint:a},{behavior:"up",breakpoint:s},!1).breakpoint}return s&&a&&o?[t.closeBreakpoint(s),t.openBreakpoint(a)]:s&&!a?t.openBreakpoint(s):!s&&a?t.closeBreakpoint(a):void 0})(i,c,p,u);return e?[].concat(e).map(a):[]},[i,c,p,u]);return m(()=>{const e=l.some(e=>matchMedia(e).matches);s(e)}),o}const b=({children:e,except:t,for:r,from:o,to:a,...i})=>y({for:r,from:o,to:a,except:t})&&n.createElement(s,Object.assign({},i),e);b.displayName="Only";const h=r(s)`
`,u=e=>t=>n.createElement(s,Object.assign({area:e},t)),l=({children:e,...r})=>{const o=t.parseTemplates(r),s=t.generateComponents(o,u,c),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;function f(e,r=!1){const[o,s]=n.useState(r),{for:a,from:c,to:p,except:u}=e,l=n.useMemo(()=>{const e=((e,r,n,o)=>{if(e)return m(e);const s=m(r),i=m(n);if(s&&i&&!o){return t.mergeAreaRecords({behavior:"down",breakpoint:i},{behavior:"up",breakpoint:s},!1).breakpoint}return s&&i&&o?[t.closeBreakpoint(s),t.openBreakpoint(i)]:s&&!i?t.openBreakpoint(s):!s&&i?t.closeBreakpoint(i):void 0})(a,c,p,u);return e?[].concat(e).map(i):[]},[a,c,p,u]);return d(()=>{const e=l.some(e=>matchMedia(e).matches);s(e)}),o}const y=({children:e,except:t,for:r,from:o,to:i,...a})=>f({for:r,from:o,to:i,except:t})&&n.createElement(s,Object.assign({},a),e);y.displayName="Only";const b=r(s)`
${({matches:e})=>!e&&"\n visibility: hidden;\n "}
`,k=({children:e,except:r,for:n,from:s,to:a,...c})=>{const p=f(n),u=f(s),l=f(a);let d=p;if(u&&l&&!r){const{breakpoint:e}=t.mergeAreaRecords({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:u},!1);d=e}u&&l&&r&&(d=[t.closeBreakpoint(u),t.openBreakpoint(l)]),u&&!l&&(d=t.openBreakpoint(u)),!u&&l&&(d=t.closeBreakpoint(l));const m=i(d),y=m?{}:{"aria-hidden":"true"};return o.createElement(h,Object.assign({},c,y,{matches:m}),e)};k.displayName="Visible";const x=(e,r,n=t.Layout.breakpoints)=>{let o;m(()=>{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},v=e=>{const{breakpoint:t}=e;return t.isDefault&&"undefined"==typeof window},j=(e,r=g)=>Object.keys(e).map(t.parsePropName).filter(r).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{}),w=e=>{const[t,r]=n.useState(j(e,v)),[o,s]=n.useState();return x(s),n.useEffect(()=>{const t=j(e);r(t)},[e,o]),t||{}};exports.Box=s,exports.Composition=d,exports.MediaQuery=c,exports.Only=b,exports.Visible=k,exports.default=t.Layout,exports.useBreakpointChange=x,exports.useMediaQuery=i,exports.useResponsiveComponent=function(e){return o.forwardRef((t,r)=>{const n=w(t);return o.createElement(e,Object.assign({ref:r},n))})},exports.useResponsiveProps=w,exports.useResponsiveQuery=y,exports.useResponsiveValue=(e,r)=>{const[o,s]=n.useState(r);return x(()=>{const n=t.withBreakpoints(e,r);s(n)}),o},exports.useViewportChange=m;
`,h=({children:e,except:r,for:n,from:s,to:i,...c})=>{const p=m(n),u=m(s),l=m(i);let d=p;if(u&&l&&!r){const{breakpoint:e}=t.mergeAreaRecords({behavior:"down",breakpoint:l},{behavior:"up",breakpoint:u},!1);d=e}u&&l&&r&&(d=[t.closeBreakpoint(u),t.openBreakpoint(l)]),u&&!l&&(d=t.openBreakpoint(u)),!u&&l&&(d=t.closeBreakpoint(l));const f=a(d),y=f?{}:{"aria-hidden":"true"};return o.createElement(b,Object.assign({},c,y,{matches:f}),e)};h.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)},x=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},g=(e,r=x)=>Object.keys(e).map(t.parsePropName).filter(r).reduce((t,{originPropName:r,purePropName:n})=>({...t,[n]:e[r]}),{}),j=e=>{const[t,r]=n.useState(g(e,v)),[o,s]=n.useState();return k(s),n.useEffect(()=>{const t=g(e);r(t)},[e,o]),t||{}};exports.Box=s,exports.Composition=l,exports.Only=y,exports.Visible=h,exports.default=t.Layout,exports.useBreakpointChange=k,exports.useMediaQuery=a,exports.useResponsiveComponent=function(e){return o.forwardRef((t,r)=>{const n=j(t);return o.createElement(e,Object.assign({ref:r},n))})},exports.useResponsiveProps=j,exports.useResponsiveQuery=f,exports.useResponsiveValue=(e,r)=>{const[o,s]=n.useState(r);return k(()=>{const n=t.withBreakpoints(e,r);s(n)}),o},exports.useViewportChange=d;
//# sourceMappingURL=index.js.map

36

lib/esm/index.js
import { applyStyles, compose, joinQueryList, transformNumeric, normalizeQuery, parseTemplates, generateComponents, warn, throttle, Layout, mergeAreaRecords, closeBreakpoint, openBreakpoint, createMediaQuery as createMediaQuery$1, withBreakpoints, parsePropName } from '@atomic-layout/core';
import styled from 'styled-components';
import React__default, { useState, useMemo, useEffect, useLayoutEffect, createElement, Fragment, useRef } from 'react';
import React__default, { useState, useMemo, useEffect, useLayoutEffect, createElement, useRef } from 'react';

@@ -226,20 +226,6 @@ function _typeof(obj) {

var MediaQuery = function MediaQuery(_ref) {
var children = _ref.children,
initialMatches = _ref.matches,
queryParams = _objectWithoutProperties(_ref, ["children", "matches"]);
var matches = useMediaQuery(queryParams, initialMatches);
return children(matches);
};
MediaQuery.displayName = 'MediaQuery';
MediaQuery.defaultProps = {
matches: false
};
/**
* Wraps the given area component in a placeholder.
* Wraps the given area component in a placeholder component.
* This is used for conditional components, where placeholder component is rendered
* until the condition for the area component is met (i.e. breakpoint).
* until the condition for that area component is met (i.e. viewport matches a breakpoint).
*/

@@ -252,12 +238,4 @@

var PlaceholderComponent = breakpoints.reduce(function (components, breakpoint, index) {
return components.concat(createElement(MediaQuery, Object.assign({}, breakpoint, {
key: "".concat(Component.displayName, "_").concat(index)
}), function (matches) {
return matches && createElement(Component, Object.assign({}, restProps), children);
}));
}, []); // Wrapping in a Fragment due to a type issue
// when returning JSX.Element[].
return createElement(Fragment, null, PlaceholderComponent);
var matches = useMediaQuery(breakpoints);
return matches && createElement(Component, Object.assign({}, restProps), children);
};

@@ -303,3 +281,3 @@

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."));
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);

@@ -629,3 +607,3 @@ };

export default Layout;
export { Box, Composition, MediaQuery, Only, Visible, useBreakpointChange, useMediaQuery, useResponsiveComponent, useResponsiveProps, useResponsiveQuery, useResponsiveValue, useViewportChange };
export { Box, Composition, Only, Visible, useBreakpointChange, useMediaQuery, useResponsiveComponent, useResponsiveProps, useResponsiveQuery, useResponsiveValue, useViewportChange };
//# sourceMappingURL=index.js.map

1

lib/types/index.d.ts

@@ -5,3 +5,2 @@ import { Layout } from '@atomic-layout/core';

export { default as Composition } from './components/Composition';
export { default as MediaQuery } from './components/MediaQuery';
export { default as Only } from './components/Only';

@@ -8,0 +7,0 @@ export { default as Visible } from './components/Visible';

4

lib/types/utils/withPlaceholder.d.ts
import * as React from 'react';
import { Breakpoint, GenericProps } from '@atomic-layout/core';
/**
* Wraps the given area component in a placeholder.
* Wraps the given area component in a placeholder component.
* This is used for conditional components, where placeholder component is rendered
* until the condition for the area component is met (i.e. breakpoint).
* until the condition for that area component is met (i.e. viewport matches a breakpoint).
*/
export declare const withPlaceholder: (Component: import("react").FC<import("@atomic-layout/core").BoxProps>, breakpoints: Breakpoint[]) => React.FC<GenericProps>;

2

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=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}=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 P(e){return e.slice(0,e.length-1)}const N=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=N(e);return n===N(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},S=(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&&B(l,c)){const e=x(c,l,p);return P(t).concat(S(s,e))}return t.concat(S(s,c))}if(l){const e=x(c,l,p);return P(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.mergeAreaRecords=x,t.normalizeQuery=b,t.openBreakpoint=w,t.parsePropName=h,t.parseTemplates=V,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.mergeAreaRecords,d=a.normalizeQuery,g=a.openBreakpoint,h=a.parsePropName,b=a.parseTemplates,y=(a.propAliases,a.throttle),v=a.transformNumeric,k=a.warn,j=a.withBreakpoints;function w(e){return(w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(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?O(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(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 S(){var e=N(["\n display: ",";\n\n && {\n ",";\n }\n"]);return S=function(){return e},e}var E=t.div(S(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),u);E.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,")")})),d)(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 M(){var e=N(["\n && {\n ",";\n display: ",";\n }\n"]);return M=function(){return e},e}var A=t.div(M(),u,(function(e){return e.inline?"inline-grid":"grid"})),W=function(e){return function(t){return r.createElement(E,Object.assign({area:e},t))}},Q=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=w(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(A,Object.assign({},n),i&&s?t(a):t)};Q.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=y(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},z=function(e,t,r,n){if(e)return F(e);var o=F(t),a=F(r);return o&&a&&!n?m({behavior:"down",breakpoint:a},{behavior:"up",breakpoint:o},!1).breakpoint:o&&a&&n?[s(o),g(a)]:o&&!a?g(o):!o&&a?s(a):void 0};function _(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=r.useState(t),o=B(n,2),a=o[0],i=o[1],u=e.for,s=e.from,p=e.to,c=e.except,l=r.useMemo((function(){var e=z(u,s,p,c);return e?[].concat(e).map(C):[]}),[u,s,p,c]);return D((function(){var e=l.some((function(e){return matchMedia(e).matches}));i(e)})),a}var T=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"]);return _({for:o,from:a,to:i,except:n})&&r.createElement(E,Object.assign({},u),t)};function I(){var e=N(["\n ","\n"]);return I=function(){return e},e}T.displayName="Only";var U=t(E)(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=P(e,["children","except","for","from","to"]),p=F(o),c=F(a),l=F(i),f=p;c&&l&&!r&&(f=m({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 d=$(f),h=d?{}:{"aria-hidden":"true"};return n.createElement(U,Object.assign({},u,h,{matches:d}),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(h).filter(t).reduce((function(t,r){var n=r.originPropName;return V({},t,x({},r.purePropName,e[n]))}),{})},K=function(e){var t=B(r.useState(J(e,Z)),2),n=t[0],o=t[1],a=B(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=E,e.Composition=Q,e.MediaQuery=L,e.Only=T,e.Visible=H,e.default=i,e.useBreakpointChange=q,e.useMediaQuery=$,e.useResponsiveComponent=function(e){return n.forwardRef((function(t,r){var o=K(t);return n.createElement(e,Object.assign({ref:r},o))}))},e.useResponsiveProps=K,e.useResponsiveQuery=_,e.useResponsiveValue=function(e,t){var n=B(r.useState(t),2),o=n[0],a=n[1];return q((function(){var r=j(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 w(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function j(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===w(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=w(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=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}=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 P(e){return e.slice(0,e.length-1)}const B=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=B(e);return n===B(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},S=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?j(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])=>[w(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&&N(l,c)){const e=x(c,l,p);return P(t).concat(S(s,e))}return t.concat(S(s,c))}if(l){const e=x(c,l,p);return P(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.mergeAreaRecords=x,t.normalizeQuery=b,t.openBreakpoint=j,t.parsePropName=h,t.parseTemplates=V,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.mergeAreaRecords,d=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 x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(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?O(Object(r),!0).forEach((function(t){x(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):O(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 N(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==u.return||u.return()}finally{if(o)throw a}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function S(){var e=B(["\n display: ",";\n\n && {\n ",";\n }\n"]);return S=function(){return e},e}var C=t.div(S(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),u);C.displayName="Box";var E=function(e){return p(f((function(e){var t=N(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?v(n):n;return"(".concat(r,":").concat(o,")")})),d)(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=N(o,2),i=a[0],u=a[1],s=r.useMemo((function(){return[].concat(e).map(E).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,t){var n=function(n){var o=n.children,a=P(n,["children"]);return $(t)&&r.createElement(e,Object.assign({},a),o)};return n.displayName="Placeholder(".concat(e.displayName,")"),n};function R(){var e=B(["\n && {\n ",";\n display: ",";\n }\n"]);return R=function(){return e},e}var A=t.div(R(),u,(function(e){return e.inline?"inline-grid":"grid"})),M=function(e){return function(t){return r.createElement(C,Object.assign({area:e},t))}},W=function(e){var t=e.children,n=P(e,["children"]),o=b(n),a=l(o,M,L),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 (`areas`/`template`).")),r.createElement(A,Object.assign({},n),i&&s?t(a):t)};W.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=y(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},z=function(e){return"string"==typeof e?i.breakpoints[e]:e},F=function(e,t,r,n){if(e)return z(e);var o=z(t),a=z(r);return o&&a&&!n?m({behavior:"down",breakpoint:a},{behavior:"up",breakpoint:o},!1).breakpoint:o&&a&&n?[s(o),g(a)]:o&&!a?g(o):!o&&a?s(a):void 0};function Q(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=r.useState(t),o=N(n,2),a=o[0],i=o[1],u=e.for,s=e.from,p=e.to,c=e.except,l=r.useMemo((function(){var e=F(u,s,p,c);return e?[].concat(e).map(E):[]}),[u,s,p,c]);return D((function(){var e=l.some((function(e){return matchMedia(e).matches}));i(e)})),a}var T=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"]);return Q({for:o,from:a,to:i,except:n})&&r.createElement(C,Object.assign({},u),t)};function _(){var e=B(["\n ","\n"]);return _=function(){return e},e}T.displayName="Only";var I=t(C)(_(),(function(e){return!e.matches&&"\n visibility: hidden;\n "})),U=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=z(o),c=z(a),l=z(i),f=p;c&&l&&!r&&(f=m({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 d=$(f),h=d?{}:{"aria-hidden":"true"};return n.createElement(I,Object.assign({},u,h,{matches:d}),t)};U.displayName="Visible";var H=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)},q=function(e){var t=e.breakpoint,r=e.behavior,n=c(i.breakpoints[t.name],r);return matchMedia(n).matches},G=function(e){return e.breakpoint.isDefault&&"undefined"==typeof window},Z=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:q;return Object.keys(e).map(h).filter(t).reduce((function(t,r){var n=r.originPropName;return V({},t,x({},r.purePropName,e[n]))}),{})},J=function(e){var t=N(r.useState(Z(e,G)),2),n=t[0],o=t[1],a=N(r.useState(),2),i=a[0],u=a[1];return H(u),r.useEffect((function(){var t=Z(e);o(t)}),[e,i]),n||{}};e.Box=C,e.Composition=W,e.Only=T,e.Visible=U,e.default=i,e.useBreakpointChange=H,e.useMediaQuery=$,e.useResponsiveComponent=function(e){return n.forwardRef((function(t,r){var o=J(t);return n.createElement(e,Object.assign({ref:r},o))}))},e.useResponsiveProps=J,e.useResponsiveQuery=Q,e.useResponsiveValue=function(e,t){var n=N(r.useState(t),2),o=n[0],a=n[1];return H((function(){var r=w(e,t);a(r)})),o},e.useViewportChange=D,Object.defineProperty(e,"__esModule",{value:!0})}));

4

package.json
{
"name": "atomic-layout",
"description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
"version": "0.14.0",
"version": "0.15.0",
"license": "MIT",

@@ -115,3 +115,3 @@ "esnext": "src/index.ts",

],
"gitHead": "592fa357f10570cb18e9c1af8112c127bcf6e4e9"
"gitHead": "6fd45cad1657b7d9b4b590d23053a6c1a0e84570"
}

26

README.md

@@ -0,1 +1,7 @@

<p align="center">
<img src="https://raw.githubusercontent.com/kettanaito/atomic-layout/master/packages/atomic-layout/logo-full.png" width="400" alt="Atomic Layout logo" />
</p>
<div align="center">
[![Package version](https://img.shields.io/npm/v/atomic-layout.svg?color=%237B85FF)][npm-url]

@@ -9,10 +15,6 @@ [![Package size](https://img.shields.io/bundlephobia/minzip/atomic-layout.svg?color=%237B85FF)][bundlephobia-url]

</div>
<br />
<p align="center">
<img src="https://raw.githubusercontent.com/kettanaito/atomic-layout/d10ba4587cf70cfacba05d8d71055520ff904d39/logo.svg?sanitize=true" width="200" alt="Atomic Layout logo" />
</p>
<h1 align="center">Atomic Layout</h1>
**Atomic Layout** is a spatial distribution library for React. It uses [CSS Grid][css-grid] to define layout areas and render them as React components. This pattern encourages separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts.

@@ -64,4 +66,2 @@

> Atomic Layout comes with built-in responsive support. It uses [Bootstrap 4 breakpoints][bootstrap-4-breakpoints] by default, which you can always [override with the custom breakpoints](https://redd.gitbook.io/atomic-layout/api/layout/configure#breakpoints) to match your requirements.
## Install

@@ -73,3 +73,3 @@

> Using something else than `styled-components`? See the full list of [Atomic Layout packages](../../README.md#Install).
> Using something else than `styled-components`? See the full list of [Atomic Layout implementations](../../README.md#Implementations).

@@ -87,8 +87,3 @@ ## Documentation

## Contributing
Thank you for deciding to contribute! Your involvement makes a significant impact on the library and its future.
**Please read the [Contribution guidelines](https://github.com/kettanaito/atomic-layout/blob/master/.github/CONTRIBUTING.md)** to get familiar with the contributing process. The issues labeled [`help wanted`](https://github.com/kettanaito/atomic-layout/labels/help%20wanted) or [`good first issue`](https://github.com/kettanaito/atomic-layout/labels/good%20first%20issue) are a good place to start cooperating on Atomic Layout. Feature suggestions or bug reports, discussion, and pull requests are always welcome!
[atomic-layout-docs]: https://redd.gitbook.io/atomic-layout
[npm-url]: https://npmjs.com/package/atomic-layout

@@ -100,3 +95,2 @@ [bundlephobia-url]: https://bundlephobia.com/result?p=atomic-layout

[community-reactiflux]: https://discordapp.com/channels/102860784329052160/543033450924474378
[bootstrap-4-breakpoints]: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
[css-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
lib/types/components/MediaQuery.d.ts
lib/esm/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc