atomic-layout - npm Package Compare versions

Comparing version 0.12.1 to 0.12.2

lib/cjs/index.js

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

lib/esm/index.js

@@ -490,7 +490,7 @@ import { applyStyles, compose, joinQueryList, transformNumeric, normalizeQuery, parseTemplates, generateComponents, warn, Layout, mergeAreaRecords, closeBreakpoint, openBreakpoint, throttle, createMediaQuery as createMediaQuery$1, withBreakpoints, parsePropName } from '@atomic-layout/core';
       value = _useState2[0],
-      updateValue = _useState2[1];
+      setValue = _useState2[1];
 
   useBreakpointChange(function () {
     var nextValue = withBreakpoints(breakpoints, defaultValue);
-    updateValue(nextValue);
+    setValue(nextValue);
   });
@@ -511,15 +511,38 @@ return value;
 
-  useBreakpointChange(function () {
-    var nextProps = Object.keys(responsiveProps).map(parsePropName).filter(function (_ref) {
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      breakpointName = _useState4[0],
+      setBreakpointName = _useState4[1];
+
+  var resolveProps = function resolveProps(inputProps) {
+    var nextProps = Object.keys(inputProps).map(parsePropName).filter(function (_ref) {
       var breakpoint = _ref.breakpoint,
           behavior = _ref.behavior;
       var mediaQuery = createMediaQuery$1(Layout.breakpoints[breakpoint.name], behavior);
-      return matchMedia(mediaQuery).matches;
+
+      var _matchMedia = matchMedia(mediaQuery),
+          matches = _matchMedia.matches;
+
+      return matches;
     }).reduce(function (acc, _ref2) {
       var originPropName = _ref2.originPropName,
           purePropName = _ref2.purePropName;
-      return _objectSpread2({}, acc, _defineProperty({}, purePropName, responsiveProps[originPropName]));
+      return _objectSpread2({}, acc, _defineProperty({}, purePropName, inputProps[originPropName]));
     }, {});
+    return nextProps;
+  }; // Store the current breakpoint name in the state.
+  // That way props update effect below can re-evaluate whenever
+  // a breakpoint changes.
+  // When the next prop resolver is given directly to "useBreakpointChange"
+  // it always resolves the input "responsiveProps" to their initial value.
+  // Using `useCallback()` hook doesn't help.
+
+
+  useBreakpointChange(setBreakpointName); // Update props whenever input props change.
+  // Required to trigger re-render on props change.
+
+  useEffect(function () {
+    var nextProps = resolveProps(responsiveProps);
     setProps(nextProps);
-  });
+  }, [responsiveProps, breakpointName]);
   return props || {};
@@ -526,0 +549,0 @@ };

lib/umd/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],t):t((e=e||self).AtomicLayout={},e.styled,e.React)}(this,(function(e,t,r){"use strict";var n="default"in t?t.default:t,o="default"in r?r.default:r;const a={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function i(e,t){if(!e)throw new Error(t)}function u(e,t){e||console.warn(t)}var c=new class{constructor(e){return this.defaultUnit=a.defaultUnit,this.defaultBehavior=a.defaultBehavior,this.breakpoints=a.breakpoints,this.defaultBreakpointName=a.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&u(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),i(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e||{}).forEach(t=>{this[t]=e[t]}),i(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),i(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),i(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function s(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function p(e){return null!=e}function l(e){if(!p(e))return"";return`${e}${"number"==typeof e&&0!==e?c.defaultUnit:""}`}const f=["/","auto"];function m(e){const t=/^[0-9]/.test(e),r=f.includes(e);return!t&&!r}const d=s(e=>{const t=[],r=[];return e.forEach(e=>{m(e)?t.push(e):r.push(e)}),[t.length>0?`'${t.join(" ")}'`:"",r.join(" ")].filter(Boolean).join(" ")},e=>e.split(" "),e=>e.replace(/'+/gm,""),e=>e.trim()),g=s(e=>e.join("\n"),e=>e.map(d),e=>e.split("\n"),e=>e.trim()),h={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:g},template:{props:["grid-template"],transformValue:g},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:l},gapCol:{props:["grid-column-gap"],transformValue:l},gapRow:{props:["grid-row-gap"],transformValue:l},gutter:{props:["grid-gap"],transformValue:l},gutterCol:{props:["grid-column-gap"],transformValue:l},gutterRow:{props:["grid-row-gap"],transformValue:l},autoRows:{props:["grid-auto-rows"],transformValue:l},autoCols:{props:["grid-auto-columns"],transformValue:l},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:l},minHeight:{props:["min-height"],transformValue:l},maxHeight:{props:["max-height"],transformValue:l},width:{props:["width"],transformValue:l},minWidth:{props:["min-width"],transformValue:l},maxWidth:{props:["max-width"],transformValue:l},margin:{props:["margin"],transformValue:l},marginTop:{props:["margin-top"],transformValue:l},marginRight:{props:["margin-right"],transformValue:l},marginBottom:{props:["margin-bottom"],transformValue:l},marginLeft:{props:["margin-left"],transformValue:l},marginVertical:{props:["margin-top","margin-bottom"],transformValue:l},marginHorizontal:{props:["margin-right","margin-left"],transformValue:l},padding:{props:["padding"],transformValue:l},paddingTop:{props:["padding-top"],transformValue:l},paddingRight:{props:["padding-right"],transformValue:l},paddingBottom:{props:["padding-bottom"],transformValue:l},paddingLeft:{props:["padding-left"],transformValue:l},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:l},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:l}};function b(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function y(e){const t=Object.keys(c.breakpoints).join("|"),r=["down","only"].join("|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),a=e.match(o),i=a?a[0]:"",u=e.replace(i,"").match(n),s=u?u[0]:"",p=e.replace(s,"").replace(i,""),l=s?b(s):c.defaultBreakpointName,f=l===c.defaultBreakpointName;return{originPropName:e,purePropName:p,behavior:i?b(i):c.defaultBehavior,breakpoint:{name:l,isDefault:f}}}function v(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function k(e){return Object.entries(e).filter(([e,t])=>p(t)).map(([e,t])=>[v(e),t])}const j=e=>t=>t.filter(([t])=>((e,t)=>{const[r,n]=e.split("-");return!["height","width"].includes(n)||("min"===r&&["up","only"].includes(t)||"max"===r&&["down","only"].includes(t))})(t,e)),w=e=>t=>t.map(e).join(" and ");function x(e,t){return s(w(([e,t])=>`(${e}:${String(l(t))})`),j(t),k)(e)}const O=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),a=c.breakpoints[r.name];return a&&!(r.isDefault&&n===c.defaultBehavior)?`@media ${x(a,n)} {${o}}`:o};function V(e){return Object.keys(e).map(y).filter(({purePropName:e})=>h.hasOwnProperty(e)).filter(({originPropName:t})=>p(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=h[t],u=e[r],c=i?i(u):u;return O(a,c,n,o)}).join(" ")}const P=(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=x(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(c.breakpoints);function E(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function B(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===E(r)?void 0:e[r]}),{})}function S(e){return Object.entries(e).map(([e,t])=>[E(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),c=o?parseFloat(i)-1:i;return{...e,[a]:u?`${c}${u}`:c}},{})}function N(e,t,r){const{behavior:n}=t,{behavior:o}=e,a="up"===n,i=n===o,u=a&&"down"===o,c=a,s=!r&&c?"down":o,p={...t.breakpoint,...e.breakpoint};return{behavior:s,breakpoint:Object.keys(p).reduce((n,o)=>{let a=p[o];const s=E(o);if("max"===s&&!r&&c){a=`calc(${l(e.breakpoint[o.replace(/^max/,"min")])} - 1px)`}return"min"===s&&(r?(i||u)&&(a=t.breakpoint[o]):c&&(a=t.breakpoint[o])),{...n,[o]:a}},{})}}const C=s(e=>e.sort(),e=>Array.from(new Set(e)),e=>e.filter(m),e=>e.filter(Boolean),e=>e.split(" "),e=>e.replace(/\s+/g," "),e=>e.replace(/\r?\n|\'+/g," "));const $=s(function(e){const t={};return r=>(function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]})}(e=>{return function(e){const{length:t}=e;let r=0,n=0;if(t>0)for(;n<t;)r=(r<<5)-r+e.charCodeAt(n++)|0;return r}(Object.entries(e).reduce((e,[t,r])=>e.concat(`${t}:${r.join()}`),[]).join()).toString()})((function(e){const t=Object.entries(e).reduce((e,[t,r])=>{const{breakpoint:n,behavior:o}=y(t);return{areas:e.areas.concat(r),templates:e.templates.concat({breakpoint:c.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}=y(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:C(e[r])}),{}));function L(e){return e.slice(0,e.length-1)}const R=e=>e.replace(/^min|max/,"_");const W=(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=R(e);return n===R(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},A=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?B(t.breakpoint):t.breakpoint});function F({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,c=o===r-1,s=a.includes(e),p={breakpoint:u,behavior:i},l=t[t.length-1];if(s){if(l&&W(l,p)){const e=N(p,l,s);return L(t).concat(A(c,e))}return t.concat(A(c,p))}if(l){const e=N(p,l,s);return L(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),c=r(o),s=function(e){return e.replace(/^./,e=>e.toUpperCase())}(o);return c.displayName=s,{...e,[s]:u?c:n(c,i)}},{});return"undefined"==typeof Proxy?o:new Proxy(o,{get:(e,t)=>t in e||"symbol"==typeof t?e[t]:()=>null})}function D(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))}}function M(e){return(M="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 z(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function I(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 T(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 U(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function H(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 _(){var e=U(["\n  display: ",";\n\n  && {\n    ",";\n  }\n"]);return _=function(){return e},e}var q=n.div(_(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),V),G=function(e){return s(w((function(e){var t=H(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?l(n):n;return"(".concat(r,":").concat(o,")")})),k)(e)},Q=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=r.useState(t),o=H(n,2),a=o[0],i=o[1],u=r.useMemo((function(){return[].concat(e).map(G).join(",")}),[e]),c=function(e){i(e.matches)};return r.useLayoutEffect((function(){var e=matchMedia(u);return c(e),e.addListener(c),function(){e.removeListener(c)}}),Object.keys(e)),a},Z=function(e){var t=e.children,r=e.matches,n=T(e,["children","matches"]);return t(Q(n,r))};Z.defaultProps={matches:!1};var J=function(e,t){var n=function(n){var o=n.children,a=T(n,["children"]),i=t.reduce((function(t,n,i){return t.concat(r.createElement(Z,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 K(){var e=U(["\n  && {\n    ",";\n    display: ",";\n  }\n"]);return K=function(){return e},e}var X=n.div(K(),V,(function(e){return e.inline?"inline-grid":"grid"})),Y=function(e){return function(t){return r.createElement(q,Object.assign({area:e},t))}},ee=function(e){return"string"==typeof e?c.breakpoints[e]:e};function te(){var e=U(["\n      visibility: hidden;\n    "]);return te=function(){return e},e}function re(){var e=U(["\n  ","\n"]);return re=function(){return e},e}var ne=n(q)(re(),(function(e){return!e.matches&&t.css(te())})),oe=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,n=r.useRef();r.useEffect((function(){n.current=D(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},ae=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:c.breakpoints;oe((function(){var t=Object.keys(n).find((function(e){var t=x(n[e],"only");return matchMedia(t).matches}));r!==t&&(e(t),r=t)}),t)},ie=function(e){var t=H(r.useState(),2),n=t[0],o=t[1];return ae((function(){var t=Object.keys(e).map(y).filter((function(e){var t=e.breakpoint,r=e.behavior,n=x(c.breakpoints[t.name],r);return matchMedia(n).matches})).reduce((function(t,r){var n=r.originPropName;return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?I(Object(r),!0).forEach((function(t){z(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):I(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},t,z({},r.purePropName,e[n]))}),{});o(t)})),n||{}};e.Box=q,e.Composition=function(e){var t=e.children,n=T(e,["children"]),o=F($(n),Y,J),a=Object.keys(o).length>0,i=M(t),c="function"===i;return u(!(a&&!c),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(o).join('", "'),'"]: expected children to be a function, but got: ').concat(i,". Please provide render function as children, or remove assigned template props.")),r.createElement(X,Object.assign({},n),a&&c?t(o):t)},e.MediaQuery=Z,e.Only=function(e){var t=e.children,n=e.except,o=e.for,a=e.from,i=e.to,u=function(e,t){return function(){for(var n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];var i=J(q,o);return r.createElement(i,Object.assign({},t),e)}}(t,T(e,["children","except","for","from","to"]));if(o)return u(ee(o));var c=ee(a),s=ee(i);return c&&s&&!n?u(N({behavior:"down",breakpoint:s},{behavior:"up",breakpoint:c},!1).breakpoint):c&&s&&n?u(S(c),B(s)):c&&!s?u(B(c)):!c&&s?u(S(s)):r.createElement(r.Fragment,null,"children")},e.Visible=function(e){var t=e.children,r=e.except,n=e.for,a=e.from,i=e.to,u=T(e,["children","except","for","from","to"]),c=ee(n),s=ee(a),p=ee(i),l=c;s&&p&&!r&&(l=N({behavior:"down",breakpoint:p},{behavior:"up",breakpoint:s},!1).breakpoint);s&&p&&r&&(l=[S(s),B(p)]),s&&!p&&(l=B(s)),!s&&p&&(l=S(p));var f=Q(l),m=f?{}:{"aria-hidden":"true"};return o.createElement(ne,Object.assign({},u,m,{matches:f}),t)},e.default=c,e.useBreakpointChange=ae,e.useResponsiveComponent=function(e){return o.forwardRef((function(t,r){var n=ie(t);return o.createElement(e,Object.assign({ref:r},n))}))},e.useResponsiveProps=ie,e.useResponsiveValue=function(e,t){var n=H(r.useState(t),2),o=n[0],a=n[1];return ae((function(){var r=P(e,t);a(r)})),o},e.useViewportChange=oe,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("styled-components"),require("react")):"function"==typeof define&&define.amd?define(["exports","styled-components","react"],t):t((e=e||self).AtomicLayout={},e.styled,e.React)}(this,(function(e,t,r){"use strict";var n="default"in t?t.default:t,o="default"in r?r.default:r;const a={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"767px"},md:{minWidth:"768px",maxWidth:"991px"},lg:{minWidth:"992px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function i(e,t){if(!e)throw new Error(t)}function u(e,t){e||console.warn(t)}var c=new class{constructor(e){return this.defaultUnit=a.defaultUnit,this.defaultBehavior=a.defaultBehavior,this.breakpoints=a.breakpoints,this.defaultBreakpointName=a.defaultBreakpointName,this.isConfigureCalled=!1,e?this.configure(e,!1):this}configure(e,t=!0){return t&&u(!this.isConfigureCalled,"Failed to configure Layout: do not call `Layout.configure()` more than once. Layout configuration must remain consistent throughout the application."),i(e&&"object"==typeof e,`Failed to configure Layout: expected an options Object, but got: ${e}.`),Object.keys(e||{}).forEach(t=>{this[t]=e[t]}),i(this.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),i(this.breakpoints.hasOwnProperty(this.defaultBreakpointName),`Failed to configure Layout: cannot use "${this.defaultBreakpointName}" as the default breakpoint (breakpoint not found).`),i(this.defaultBreakpointName,`Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ${this.defaultBreakpointName}.`),this.isConfigureCalled=t,this}};function s(...e){return e.reduce((e,t)=>(...r)=>e(t(...r)))}function p(e){return null!=e}function l(e){if(!p(e))return"";return`${e}${"number"==typeof e&&0!==e?c.defaultUnit:""}`}const f=["/","auto"];function m(e){const t=/^[0-9]/.test(e),r=f.includes(e);return!t&&!r}const d=s(e=>{const t=[],r=[];return e.forEach(e=>{m(e)?t.push(e):r.push(e)}),[t.length>0?`'${t.join(" ")}'`:"",r.join(" ")].filter(Boolean).join(" ")},e=>e.split(" "),e=>e.replace(/'+/gm,""),e=>e.trim()),g=s(e=>e.join("\n"),e=>e.map(d),e=>e.split("\n"),e=>e.trim()),h={area:{props:["grid-area"]},areas:{props:["grid-template-areas"],transformValue:g},template:{props:["grid-template"],transformValue:g},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gap:{props:["grid-gap"],transformValue:l},gapCol:{props:["grid-column-gap"],transformValue:l},gapRow:{props:["grid-row-gap"],transformValue:l},gutter:{props:["grid-gap"],transformValue:l},gutterCol:{props:["grid-column-gap"],transformValue:l},gutterRow:{props:["grid-row-gap"],transformValue:l},autoRows:{props:["grid-auto-rows"],transformValue:l},autoCols:{props:["grid-auto-columns"],transformValue:l},autoFlow:{props:["grid-auto-flow"]},align:{props:["align-self"]},alignItems:{props:["align-items"]},alignContent:{props:["align-content"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},flexDirection:{props:["flex-direction"]},flexShrink:{props:["flex-shrink"]},flexGrow:{props:["flex-grow"]},flexWrap:{props:["flex-wrap"]},height:{props:["height"],transformValue:l},minHeight:{props:["min-height"],transformValue:l},maxHeight:{props:["max-height"],transformValue:l},width:{props:["width"],transformValue:l},minWidth:{props:["min-width"],transformValue:l},maxWidth:{props:["max-width"],transformValue:l},margin:{props:["margin"],transformValue:l},marginTop:{props:["margin-top"],transformValue:l},marginRight:{props:["margin-right"],transformValue:l},marginBottom:{props:["margin-bottom"],transformValue:l},marginLeft:{props:["margin-left"],transformValue:l},marginVertical:{props:["margin-top","margin-bottom"],transformValue:l},marginHorizontal:{props:["margin-right","margin-left"],transformValue:l},padding:{props:["padding"],transformValue:l},paddingTop:{props:["padding-top"],transformValue:l},paddingRight:{props:["padding-right"],transformValue:l},paddingBottom:{props:["padding-bottom"],transformValue:l},paddingLeft:{props:["padding-left"],transformValue:l},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:l},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:l}};function b(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function y(e){const t=Object.keys(c.breakpoints).join("|"),r=["down","only"].join("|"),n=new RegExp(`(${t})$`,"gi"),o=new RegExp(`(${r})$`,"gi"),a=e.match(o),i=a?a[0]:"",u=e.replace(i,"").match(n),s=u?u[0]:"",p=e.replace(s,"").replace(i,""),l=s?b(s):c.defaultBreakpointName,f=l===c.defaultBreakpointName;return{originPropName:e,purePropName:p,behavior:i?b(i):c.defaultBehavior,breakpoint:{name:l,isDefault:f}}}function v(e){return e.replace(/[A-Z]/g,e=>`-${e}`.toLowerCase())}function k(e){return Object.entries(e).filter(([e,t])=>p(t)).map(([e,t])=>[v(e),t])}const j=e=>t=>t.filter(([t])=>((e,t)=>{const[r,n]=e.split("-");return!["height","width"].includes(n)||("min"===r&&["up","only"].includes(t)||"max"===r&&["down","only"].includes(t))})(t,e)),w=e=>t=>t.map(e).join(" and ");function x(e,t){return s(w(([e,t])=>`(${e}:${String(l(t))})`),j(t),k)(e)}const O=(e,t,r,n)=>{const o=e.map(e=>`${e}:${String(t)};`).join(""),a=c.breakpoints[r.name];return a&&!(r.isDefault&&n===c.defaultBehavior)?`@media ${x(a,n)} {${o}}`:o};function V(e){return Object.keys(e).map(y).filter(({purePropName:e})=>h.hasOwnProperty(e)).filter(({originPropName:t})=>p(e[t])).map(({purePropName:t,originPropName:r,breakpoint:n,behavior:o})=>{const{props:a,transformValue:i}=h[t],u=e[r],c=i?i(u):u;return O(a,c,n,o)}).join(" ")}const P=(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=x(r,"only");return r&&matchMedia(n).matches});return o?r[o]:n}})(c.breakpoints);function E(e){const t=e.match(/^(min|max)/);return t?t[0]:""}function S(e){return Object.keys(e).reduce((t,r)=>({...t,[r]:"max"===E(r)?void 0:e[r]}),{})}function B(e){return Object.entries(e).map(([e,t])=>[E(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),c=o?parseFloat(i)-1:i;return{...e,[a]:u?`${c}${u}`:c}},{})}function N(e,t,r){const{behavior:n}=t,{behavior:o}=e,a="up"===n,i=n===o,u=a&&"down"===o,c=a,s=!r&&c?"down":o,p={...t.breakpoint,...e.breakpoint};return{behavior:s,breakpoint:Object.keys(p).reduce((n,o)=>{let a=p[o];const s=E(o);if("max"===s&&!r&&c){a=`calc(${l(e.breakpoint[o.replace(/^max/,"min")])} - 1px)`}return"min"===s&&(r?(i||u)&&(a=t.breakpoint[o]):c&&(a=t.breakpoint[o])),{...n,[o]:a}},{})}}const C=s(e=>e.sort(),e=>Array.from(new Set(e)),e=>e.filter(m),e=>e.filter(Boolean),e=>e.split(" "),e=>e.replace(/\s+/g," "),e=>e.replace(/\r?\n|\'+/g," "));const $=s(function(e){const t={};return r=>(function(...n){const o=e(...n);return o in t||(t[o]=r(...n)),t[o]})}(e=>{return function(e){const{length:t}=e;let r=0,n=0;if(t>0)for(;n<t;)r=(r<<5)-r+e.charCodeAt(n++)|0;return r}(Object.entries(e).reduce((e,[t,r])=>e.concat(`${t}:${r.join()}`),[]).join()).toString()})((function(e){const t=Object.entries(e).reduce((e,[t,r])=>{const{breakpoint:n,behavior:o}=y(t);return{areas:e.areas.concat(r),templates:e.templates.concat({breakpoint:c.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}=y(e);return["areas","template"].includes(t)}).reduce((t,r)=>({...t,[r]:C(e[r])}),{}));function L(e){return e.slice(0,e.length-1)}const R=e=>e.replace(/^min|max/,"_");const W=(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=R(e);return n===R(r[t-1]||n)})}(e.breakpoint,t.breakpoint)},A=(e,t)=>({behavior:t.behavior,breakpoint:e&&"up"===t.behavior?S(t.breakpoint):t.breakpoint});function F({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,c=o===r-1,s=a.includes(e),p={breakpoint:u,behavior:i},l=t[t.length-1];if(s){if(l&&W(l,p)){const e=N(p,l,s);return L(t).concat(A(c,e))}return t.concat(A(c,p))}if(l){const e=N(p,l,s);return L(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),c=r(o),s=function(e){return e.replace(/^./,e=>e.toUpperCase())}(o);return c.displayName=s,{...e,[s]:u?c:n(c,i)}},{});return"undefined"==typeof Proxy?o:new Proxy(o,{get:(e,t)=>t in e||"symbol"==typeof t?e[t]:()=>null})}function D(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))}}function M(e){return(M="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 z(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function I(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 T(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 U(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function H(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 _(){var e=U(["\n  display: ",";\n\n  && {\n    ",";\n  }\n"]);return _=function(){return e},e}var q=n.div(_(),(function(e){var t=e.flex,r=e.inline;return t?r?"inline-flex":"flex":r?"inline-block":"block"}),V),G=function(e){return s(w((function(e){var t=H(e,2),r=t[0],n=t[1],o=/^\d/.test(String(n))?l(n):n;return"(".concat(r,":").concat(o,")")})),k)(e)},Q=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=r.useState(t),o=H(n,2),a=o[0],i=o[1],u=r.useMemo((function(){return[].concat(e).map(G).join(",")}),[e]),c=function(e){i(e.matches)};return r.useLayoutEffect((function(){var e=matchMedia(u);return c(e),e.addListener(c),function(){e.removeListener(c)}}),Object.keys(e)),a},Z=function(e){var t=e.children,r=e.matches,n=T(e,["children","matches"]);return t(Q(n,r))};Z.defaultProps={matches:!1};var J=function(e,t){var n=function(n){var o=n.children,a=T(n,["children"]),i=t.reduce((function(t,n,i){return t.concat(r.createElement(Z,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 K(){var e=U(["\n  && {\n    ",";\n    display: ",";\n  }\n"]);return K=function(){return e},e}var X=n.div(K(),V,(function(e){return e.inline?"inline-grid":"grid"})),Y=function(e){return function(t){return r.createElement(q,Object.assign({area:e},t))}},ee=function(e){return"string"==typeof e?c.breakpoints[e]:e};function te(){var e=U(["\n      visibility: hidden;\n    "]);return te=function(){return e},e}function re(){var e=U(["\n  ","\n"]);return re=function(){return e},e}var ne=n(q)(re(),(function(e){return!e.matches&&t.css(te())})),oe=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:70,n=r.useRef();r.useEffect((function(){n.current=D(e,t)})),r.useEffect((function(){var e=n.current;return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[])},ae=function(e,t){var r,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:c.breakpoints;oe((function(){var t=Object.keys(n).find((function(e){var t=x(n[e],"only");return matchMedia(t).matches}));r!==t&&(e(t),r=t)}),t)},ie=function(e){var t=H(r.useState(),2),n=t[0],o=t[1],a=H(r.useState(),2),i=a[0],u=a[1],s=function(e){return Object.keys(e).map(y).filter((function(e){var t=e.breakpoint,r=e.behavior,n=x(c.breakpoints[t.name],r);return matchMedia(n).matches})).reduce((function(t,r){var n=r.originPropName;return function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?I(Object(r),!0).forEach((function(t){z(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):I(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},t,z({},r.purePropName,e[n]))}),{})};return ae(u),r.useEffect((function(){var t=s(e);o(t)}),[e,i]),n||{}};e.Box=q,e.Composition=function(e){var t=e.children,n=T(e,["children"]),o=F($(n),Y,J),a=Object.keys(o).length>0,i=M(t),c="function"===i;return u(!(a&&!c),"Failed to render 'Composition' with template areas [\"".concat(Object.keys(o).join('", "'),'"]: expected children to be a function, but got: ').concat(i,". Please provide render function as children, or remove assigned template props.")),r.createElement(X,Object.assign({},n),a&&c?t(o):t)},e.MediaQuery=Z,e.Only=function(e){var t=e.children,n=e.except,o=e.for,a=e.from,i=e.to,u=function(e,t){return function(){for(var n=arguments.length,o=new Array(n),a=0;a<n;a++)o[a]=arguments[a];var i=J(q,o);return r.createElement(i,Object.assign({},t),e)}}(t,T(e,["children","except","for","from","to"]));if(o)return u(ee(o));var c=ee(a),s=ee(i);return c&&s&&!n?u(N({behavior:"down",breakpoint:s},{behavior:"up",breakpoint:c},!1).breakpoint):c&&s&&n?u(B(c),S(s)):c&&!s?u(S(c)):!c&&s?u(B(s)):r.createElement(r.Fragment,null,"children")},e.Visible=function(e){var t=e.children,r=e.except,n=e.for,a=e.from,i=e.to,u=T(e,["children","except","for","from","to"]),c=ee(n),s=ee(a),p=ee(i),l=c;s&&p&&!r&&(l=N({behavior:"down",breakpoint:p},{behavior:"up",breakpoint:s},!1).breakpoint);s&&p&&r&&(l=[B(s),S(p)]),s&&!p&&(l=S(s)),!s&&p&&(l=B(p));var f=Q(l),m=f?{}:{"aria-hidden":"true"};return o.createElement(ne,Object.assign({},u,m,{matches:f}),t)},e.default=c,e.useBreakpointChange=ae,e.useResponsiveComponent=function(e){return o.forwardRef((function(t,r){var n=ie(t);return o.createElement(e,Object.assign({ref:r},n))}))},e.useResponsiveProps=ie,e.useResponsiveValue=function(e,t){var n=H(r.useState(t),2),o=n[0],a=n[1];return ae((function(){var r=P(e,t);a(r)})),o},e.useViewportChange=oe,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "atomic-layout",
   "description": "Physical representation of layout composition to create declarative, responsive layouts in React.",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "license": "MIT",
@@ -125,3 +125,3 @@ "esnext": "src/index.ts",
   ],
-  "gitHead": "36873f08ee8158b79fcdf8559aa18e12ec863fce"
+  "gitHead": "b946fd9f0c3549d0e5899798ac310595ac6b42fe"
 }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48771

increased by2.14%

Lines of code

659

increased by2.65%

No dependency changes