layout-blocks - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -10,2 +10,10 @@ # Changelog
 
+## [v1.1.0](https://github.com/cdonohue/layout-blocks/compare/v1.0.0...v1.1.0)
+
+### Commits
+
+- Update package [`26ae712`](https://github.com/cdonohue/layout-blocks/commit/26ae7121b5f714a88c56c3550d022bdeb85cc24b)
+- Refactor and use CSS modules for styling [`cc2e685`](https://github.com/cdonohue/layout-blocks/commit/cc2e685d324b108a4c5e87ec375c17afc502ae62)
+- Updates [`d90b7aa`](https://github.com/cdonohue/layout-blocks/commit/d90b7aa1d2b0d2b6a497222d33ee28405e64dc02)
+
 ## [v1.0.0](https://github.com/cdonohue/layout-blocks/compare/v0.3.0...v1.0.0) - 2020-07-29
@@ -12,0 +20,0 @@

dist/index.js

@@ -0,8 +1,139 @@
+var zt=Object.create;var _=Object.defineProperty;var Rt=Object.getOwnPropertyDescriptor;var Ct=Object.getOwnPropertyNames;var Et=Object.getPrototypeOf,Vt=Object.prototype.hasOwnProperty;var j=t=>_(t,"__esModule",{value:!0});var $t=(t,e)=>{for(var a in e)_(t,a,{get:e[a],enumerable:!0})},S=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Ct(e))!Vt.call(t,r)&&(a||r!=="default")&&_(t,r,{get:()=>e[r],enumerable:!(o=Rt(e,r))||o.enumerable});return t},p=(t,e)=>S(j(_(t!=null?zt(Et(t)):{},"default",!e&&t&&t.__esModule?{get:()=>t.default,enumerable:!0}:{value:t,enumerable:!0})),t),Ft=(t=>(e,a)=>t&&t.get(e)||(a=S(j({}),e,1),t&&t.set(e,a),a))(typeof WeakMap!="undefined"?new WeakMap:0);var Wt={};$t(Wt,{Center:()=>O,Cluster:()=>K,Frame:()=>X,Grid:()=>at,HStack:()=>dt,Spacer:()=>_t,VStack:()=>nt,ZStack:()=>ut});var y=p(require("react"));var h=p(require("react"));var T="6c5c5e9618df846913ca6b99f1c4ef538d74ad9fadeab7421a76096d9a821df9",It=`._view_182wq_1 {
+  box-sizing: border-box;
+  padding-block-start: var(--layout-padding-top, 0);
+  padding-inline-end: var(--layout-padding-right, 0);
+  padding-block-end: var(--layout-padding-bottom, 0);
+  padding-inline-start: var(--layout-padding-left, 0);
+}
 
-'use strict'
+@supports not (padding-block: var(--layout-padding-top, 0)) {
+  ._view_182wq_1 {
+    padding-top: var(--layout-padding-top, 0);
+    padding-right: var(--layout-padding-right, 0);
+    padding-bottom: var(--layout-padding-bottom, 0);
+    padding-left: var(--layout-padding-left, 0);
+  }
+}
+`;(function(){if(!document.getElementById(T)){var t=document.createElement("style");t.id=T,t.textContent=It,document.head.appendChild(t)}})();var q={view:"_view_182wq_1"};var B=h.forwardRef(({as:t="div",children:e,className:a="",padding:o="",paddingInline:r="",paddingBlock:i="",paddingTop:n="0",paddingRight:s="0",paddingBottom:c="0",paddingLeft:l="0",style:m,...E},V)=>{r&&(l=r,s=r),i&&(n=i,c=i),o&&(l=o,s=o,n=o,c=o);let $={...m,"--layout-padding-top":n,"--layout-padding-right":s,"--layout-padding-bottom":c,"--layout-padding-left":l},x={...E,ref:V,className:`${q.view} ${a}`.trim(),style:$};return h.createElement(t,{...x},e)});var f=B;var v=p(require("react"));var L="94d2da4bbb25e187147ec723669c9d84764697f646a457d8cf5b72a080e1b80f",Pt=`._flex_om2cc_1 {
+  align-items: var(--layout-flex-align, 'center');
+  display: flex;
+  flex-direction: var(--layout-flex-direction, 'row');
+  justify-content: var(--layout-flex-justify, 'center');
+}
+`;(function(){if(!document.getElementById(L)){var t=document.createElement("style");t.id=L,t.textContent=Pt,document.head.appendChild(t)}})();var N={flex:"_flex_om2cc_1"};var H=v.forwardRef(({align:t="center",as:e="div",children:a,className:o="",direction:r="row",justify:i="center",style:n,...s},c)=>{let l={...n,"--layout-flex-align":t,"--layout-flex-direction":r,"--layout-flex-justify":i};console.log(o);let m={...s,ref:c,as:e,className:`${N.flex} ${o}`.trim(),style:l};return v.createElement(f,{...m},a)});var g=H;var G="4a75bbec7f4194aac99b817ae0d3e0e91b665b66daa6c155f15cb7b30105246c",jt=`._center_1kq8v_1 {
+  box-sizing: content-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-inline-size: var(--layout-center-max-width);
+  height: 100%;
+}
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./layout-blocks.cjs.production.min.js')
-} else {
-  module.exports = require('./layout-blocks.cjs.development.js')
+@supports not (max-inline-size: var(--layout-center-max-width)) {
+  ._center_1kq8v_1 {
+    max-width: var(--layout-center-max-width);
+  }
 }
+`;(function(){if(!document.getElementById(G)){var t=document.createElement("style");t.id=G,t.textContent=jt,document.head.appendChild(t)}})();var Z={center:"_center_1kq8v_1"};var A=y.forwardRef(({as:t="div",children:e,max:a,gutter:o=0,centerChildren:r=!1,className:i="",style:n,...s},c)=>{let l={...n,"--layout-center-max-width":a},m={...s,ref:c,as:t,className:`${Z.center} ${i}`.trim(),style:l,paddingInline:o};return r?y.createElement(g,{direction:"column",align:"center",...m},e):y.createElement(f,{...m},e)});var O=A;var b=p(require("react"));var W="f19a93906feb95f87a1634f739a5627b46ddb96e3d4ec6e7acf83269c2d1daab",St=`._cluster_1xivx_1 {
+  flex-wrap: wrap;
+  gap: var(--layout-cluster-spacing, 1rem);
+}
+`;(function(){if(!document.getElementById(W)){var t=document.createElement("style");t.id=W,t.textContent=St,document.head.appendChild(t)}})();var D={cluster:"_cluster_1xivx_1"};var J=b.forwardRef(({align:t="center",justify:e="flex-start",as:a="div",children:o,className:r="",spacing:i="1rem",style:n,...s},c)=>{let l={...n,"--layout-cluster-spacing":i},m={...s,ref:c,as:a,className:`${D.cluster} ${r}`.trim(),style:l};return b.createElement(g,{direction:"row",align:t,justify:e,...m},o)});var K=J;var k=p(require("react"));var M="2d8d6f9f90424affc1824ba93de43260ce2ad88ab75be7f8aec2a53e262b749b",Tt=`._frame_1mo48_1 {
+  position: relative;
+  width: 100%;
+}
+
+._frame_1mo48_1 > * {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+._frame_1mo48_1 > img,
+._frame_1mo48_1 > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@supports (
+  aspect-ratio: var(--layout-frame-ratio-width) / var(--layout-frame-ratio-height)
+) {
+  ._frame_1mo48_1 {
+    aspect-ratio: var(--layout-frame-ratio-width) / var(--layout-frame-ratio-height);
+  }
+}
+
+@supports not (
+  aspect-ratio: var(--layout-frame-ratio-width) / var(--layout-frame-ratio-height)
+) {
+  ._frame_1mo48_1 {
+    padding-bottom: calc(
+      var(--layout-frame-ratio-height) / var(--layout-frame-ratio-width) * 100%
+    );
+  }
+}
+`;(function(){if(!document.getElementById(M)){var t=document.createElement("style");t.id=M,t.textContent=Tt,document.head.appendChild(t)}})();var Q={frame:"_frame_1mo48_1"};var U=k.forwardRef(({as:t="div",children:e,className:a="",style:o,ratio:r="16:9",...i},n)=>{let[s,c]=r.split(/\/|:/),l={...o,"--layout-frame-ratio-width":s,"--layout-frame-ratio-height":c},m={...i,ref:n,as:t,className:`${Q.frame} ${a}`.trim(),style:l};return k.createElement(f,{...m},e)});var X=U;var w=p(require("react"));var Y="d59229bf59c6c43cf15782b1b989002098803afd3cf22b5b7564f1149b262c29",qt=`._grid_4pvmi_1 {
+  display: grid;
+  gap: var(--layout-grid-spacing, 1rem);
+  height: 100%;
+}
+
+@supports (width: min(var(--layout-grid-min-width, 250px), 100%)) {
+  ._grid_4pvmi_1 {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(var(--layout-grid-min-width, 250px), 100%), 1fr)
+    );
+  }
+}
+`;(function(){if(!document.getElementById(Y)){var t=document.createElement("style");t.id=Y,t.textContent=qt,document.head.appendChild(t)}})();var tt={grid:"_grid_4pvmi_1"};var et=w.forwardRef(({as:t="div",children:e,className:a="",spacing:o="1rem",min:r="250px",style:i,...n},s)=>{let c={...i,"--layout-grid-spacing":o,"--layout-grid-min-width":r},l={...n,ref:s,as:t,className:`${tt.grid} ${a}`.trim(),style:c};return w.createElement(f,{...l},e)});var at=et;var z=p(require("react"));var rt="70992452650baabd5b6202d6dca5eed766c88e0084f9927fe610335e003603f3",Bt=`._vstack_isdqz_1 {
+  height: 100%;
+}
+
+._vstack_isdqz_1 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+._vstack_isdqz_1 > * + * {
+  margin-top: var(--layout-vstack-spacing, 0);
+}
+`;(function(){if(!document.getElementById(rt)){var t=document.createElement("style");t.id=rt,t.textContent=Bt,document.head.appendChild(t)}})();var ot={vstack:"_vstack_isdqz_1"};var Lt={alignment:{leading:"flex-start",center:"center",trailing:"flex-end"}},it=z.forwardRef(({alignment:t="center",as:e="div",children:a,className:o="",spacing:r="0",style:i,...n},s)=>{let c={...i,"--layout-vstack-spacing":r},l={...n,ref:s,as:e,className:`${ot.vstack} ${o}`.trim(),style:c};return z.createElement(g,{direction:"column",align:Lt.alignment[t],justify:"center",...l},a)});var nt=it;var R=p(require("react"));var st="82cb06720b8069e4c38d0b48afed34f6eac4a6a62e8a688095fa6656792714bb",Nt=`._hstack_iv0fl_1 {
+  height: 100%;
+}
+
+._hstack_iv0fl_1 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+._hstack_iv0fl_1 > * + * {
+  margin-left: var(--layout-hstack-spacing, 0);
+}
+`;(function(){if(!document.getElementById(st)){var t=document.createElement("style");t.id=st,t.textContent=Nt,document.head.appendChild(t)}})();var ct={hstack:"_hstack_iv0fl_1"};var Ht={alignment:{top:"flex-start",center:"center",bottom:"flex-end"}},lt=R.forwardRef(({alignment:t="center",as:e="div",children:a,className:o="",spacing:r="0",style:i,...n},s)=>{let c={...i,"--layout-hstack--spacing":r},l={...n,ref:s,as:e,className:`${ct.hstack} ${o}`.trim(),style:c};return R.createElement(g,{direction:"row",align:Ht.alignment[t],...l},a)});var dt=lt;var u=p(require("react"));var mt="43cb97e62f61333c4426d8187d29e1fd456b0858374c1e39602bf1299af30683",Gt=`._zstack_ow7up_1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: 'zstack';
+  justify-items: var(--layout-zstack-justify);
+  align-items: var(--layout-zstack-align);
+}
+
+._zstack_ow7up_1 > * {
+  grid-area: zstack;
+  z-index: var(--layout-zstack-zIndex);
+  margin-top: calc(var(--layout-zstack-marginTop) * var(--layout-zstack-layer));
+  margin-right: calc(var(--layout-zstack-marginRight) * var(--layout-zstack-layer));
+  margin-bottom: calc(var(--layout-zstack-marginBottom) * var(--layout-zstack-layer));
+  margin-left: calc(var(--layout-zstack-marginLeft) * var(--layout-zstack-layer));
+}
+`;(function(){if(!document.getElementById(mt)){var t=document.createElement("style");t.id=mt,t.textContent=Gt,document.head.appendChild(t)}})();var ft={zstack:"_zstack_ow7up_1"};var d={topLeading:"topLeading",top:"top",topTrailing:"topTrailing",leading:"leading",center:"center",trailing:"trailing",bottomLeading:"bottomLeading",bottom:"bottom",bottomTrailing:"bottomTrailing"},Zt={[d.topLeading]:["start","start"],[d.top]:["start","center"],[d.topTrailing]:["start","end"],[d.leading]:["center","start"],[d.center]:["center","center"],[d.trailing]:["center","end"],[d.bottomLeading]:["end","start"],[d.bottom]:["end","center"],[d.bottomTrailing]:["end","end"]};function At(t){switch(t){case d.topLeading:return["--layout-zstack-marginTop","--layout-zstack-marginLeft"];case d.top:return["--layout-zstack-marginTop"];case d.topTrailing:return["--layout-zstack-marginTop","--layout-zstack-marginRight"];case d.leading:return["--layout-zstack-marginLeft"];case d.center:return[];case d.trailing:return["--layout-zstack-marginRight"];case d.bottomLeading:return["--layout-zstack-marginBottom","--layout-zstack-marginLeft"];case d.bottom:return["--layout-zstack-marginBottom"];case d.bottomTrailing:return["--layout-zstack-marginBottom","--layout-zstack-layout-zstack-marginRight"]}}var pt=u.forwardRef(({alignment:t="center",as:e="div",offset:a="0",reverse:o=!1,children:r,className:i="",style:n,...s},c)=>{let[l,m]=Zt[t],E=u.Children.count(r),V={...n,"--layout-zstack-align":l,"--layout-zstack-justify":m},$={...s,ref:c,as:e,className:`${ft.zstack} ${i}`.trim(),style:V};return u.createElement(f,{...$},u.Children.toArray(r).map((x,F)=>{let ht=o?E-F-1:F,vt=F,{props:I}=x,bt=At(t).reduce((P,wt)=>(P[wt]=a,P),{}),kt={...I,style:{...I.style,...bt,"--layout-zstack-layer":vt,"--layout-zstack-zIndex":I.zIndex||ht}};return u.cloneElement(x,kt)}))});var ut=pt;var C=p(require("react"));var gt="4d49f0cb6c2e3925bb49b5d1f41a3fce44acd704a6b30d4c0d1d9d6ef65fb373",Ot=`._spacer_1m6lf_1 {
+  flex: 1 1 0%;
+}
+`;(function(){if(!document.getElementById(gt)){var t=document.createElement("style");t.id=gt,t.textContent=Ot,document.head.appendChild(t)}})();var yt={spacer:"_spacer_1m6lf_1"};var xt=C.forwardRef(({as:t="div",children:e,className:a="",...o},r)=>{let i={...o,ref:r,as:t,className:`${yt.spacer} ${a}`.trim()};return C.createElement(f,{...i},e)});var _t=xt;module.exports=Ft(Wt);

dist/layout-blocks.esm.js

@@ -1,199 +0,139 @@
-import React, { forwardRef } from 'react';
+import*as g from"react";import*as x from"react";var I="ed436aae0f2e00d48b65cde0246130e6cc6464388361e6097c3c2b80e0def6b6",ft=`._view_182wq_1 {
+  box-sizing: border-box;
+  padding-block-start: var(--layout-padding-top, 0);
+  padding-inline-end: var(--layout-padding-right, 0);
+  padding-block-end: var(--layout-padding-bottom, 0);
+  padding-inline-start: var(--layout-padding-left, 0);
+}
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+@supports not (padding-block: var(--layout-padding-top, 0)) {
+  ._view_182wq_1 {
+    padding-top: var(--layout-padding-top, 0);
+    padding-right: var(--layout-padding-right, 0);
+    padding-bottom: var(--layout-padding-bottom, 0);
+    padding-left: var(--layout-padding-left, 0);
+  }
+}
+`;(function(){if(!document.getElementById(I)){var t=document.createElement("style");t.id=I,t.textContent=ft,document.head.appendChild(t)}})();var P={view:"_view_182wq_1"};var j=x.forwardRef(({as:t="div",children:o,className:i="",padding:e="",paddingInline:a="",paddingBlock:r="",paddingTop:n="0",paddingRight:s="0",paddingBottom:c="0",paddingLeft:d="0",style:m,...R},C)=>{a&&(d=a,s=a),r&&(n=r,c=r),e&&(d=e,s=e,n=e,c=e);let E={...m,"--layout-padding-top":n,"--layout-padding-right":s,"--layout-padding-bottom":c,"--layout-padding-left":d},y={...R,ref:C,className:`${P.view} ${i}`.trim(),style:E};return x.createElement(t,{...y},o)});var f=j;import*as _ from"react";var S="84345a14e41aba5541c851e413e0353bbe01f845a0cfb9a714032fc330ce21ea",pt=`._flex_om2cc_1 {
+  align-items: var(--layout-flex-align, 'center');
+  display: flex;
+  flex-direction: var(--layout-flex-direction, 'row');
+  justify-content: var(--layout-flex-justify, 'center');
+}
+`;(function(){if(!document.getElementById(S)){var t=document.createElement("style");t.id=S,t.textContent=pt,document.head.appendChild(t)}})();var T={flex:"_flex_om2cc_1"};var q=_.forwardRef(({align:t="center",as:o="div",children:i,className:e="",direction:a="row",justify:r="center",style:n,...s},c)=>{let d={...n,"--layout-flex-align":t,"--layout-flex-direction":a,"--layout-flex-justify":r};console.log(e);let m={...s,ref:c,as:o,className:`${T.flex} ${e}`.trim(),style:d};return _.createElement(f,{...m},i)});var u=q;var B="e973dfee3cceee9ca8620895beb1ad0bb3fc69494bbf6e4e7726493303685cd1",ut=`._center_1kq8v_1 {
+  box-sizing: content-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-inline-size: var(--layout-center-max-width);
+  height: 100%;
+}
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
+@supports not (max-inline-size: var(--layout-center-max-width)) {
+  ._center_1kq8v_1 {
+    max-width: var(--layout-center-max-width);
+  }
+}
+`;(function(){if(!document.getElementById(B)){var t=document.createElement("style");t.id=B,t.textContent=ut,document.head.appendChild(t)}})();var L={center:"_center_1kq8v_1"};var N=g.forwardRef(({as:t="div",children:o,max:i,gutter:e=0,centerChildren:a=!1,className:r="",style:n,...s},c)=>{let d={...n,"--layout-center-max-width":i},m={...s,ref:c,as:t,className:`${L.center} ${r}`.trim(),style:d,paddingInline:e};return a?g.createElement(u,{direction:"column",align:"center",...m},o):g.createElement(f,{...m},o)});var gt=N;import*as h from"react";var H="38d3ad8d0762caac7f5b0d8282bd8426b534ad8e12e1440d7a6319ac0b107e59",yt=`._cluster_1xivx_1 {
+  flex-wrap: wrap;
+  gap: var(--layout-cluster-spacing, 1rem);
+}
+`;(function(){if(!document.getElementById(H)){var t=document.createElement("style");t.id=H,t.textContent=yt,document.head.appendChild(t)}})();var G={cluster:"_cluster_1xivx_1"};var Z=h.forwardRef(({align:t="center",justify:o="flex-start",as:i="div",children:e,className:a="",spacing:r="1rem",style:n,...s},c)=>{let d={...n,"--layout-cluster-spacing":r},m={...s,ref:c,as:i,className:`${G.cluster} ${a}`.trim(),style:d};return h.createElement(u,{direction:"row",align:t,justify:o,...m},e)});var xt=Z;import*as v from"react";var A="879ce83aa1e632774fc54515092ee9425d669ec34a0e264a963b670f7a48f911",_t=`._frame_1mo48_1 {
+  position: relative;
+  width: 100%;
+}
 
-    return target;
-  };
+._frame_1mo48_1 > * {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-  return _extends.apply(this, arguments);
+._frame_1mo48_1 > img,
+._frame_1mo48_1 > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
+@supports (
+  aspect-ratio: var(--layout-frame-ratio-width) / var(--layout-frame-ratio-height)
+) {
+  ._frame_1mo48_1 {
+    aspect-ratio: var(--layout-frame-ratio-width) / var(--layout-frame-ratio-height);
+  }
+}
 
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+@supports not (
+  aspect-ratio: var(--layout-frame-ratio-width) / var(--layout-frame-ratio-height)
+) {
+  ._frame_1mo48_1 {
+    padding-bottom: calc(
+      var(--layout-frame-ratio-height) / var(--layout-frame-ratio-width) * 100%
+    );
   }
+}
+`;(function(){if(!document.getElementById(A)){var t=document.createElement("style");t.id=A,t.textContent=_t,document.head.appendChild(t)}})();var O={frame:"_frame_1mo48_1"};var W=v.forwardRef(({as:t="div",children:o,className:i="",style:e,ratio:a="16:9",...r},n)=>{let[s,c]=a.split(/\/|:/),d={...e,"--layout-frame-ratio-width":s,"--layout-frame-ratio-height":c},m={...r,ref:n,as:t,className:`${O.frame} ${i}`.trim(),style:d};return v.createElement(f,{...m},o)});var ht=W;import*as b from"react";var D="712fa049ba6df93c6b06270d4d8b69d99e373f805e7280ae0538d3ba9e1667de",vt=`._grid_4pvmi_1 {
+  display: grid;
+  gap: var(--layout-grid-spacing, 1rem);
+  height: 100%;
+}
 
-  return target;
+@supports (width: min(var(--layout-grid-min-width, 250px), 100%)) {
+  ._grid_4pvmi_1 {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(var(--layout-grid-min-width, 250px), 100%), 1fr)
+    );
+  }
 }
+`;(function(){if(!document.getElementById(D)){var t=document.createElement("style");t.id=D,t.textContent=vt,document.head.appendChild(t)}})();var J={grid:"_grid_4pvmi_1"};var K=b.forwardRef(({as:t="div",children:o,className:i="",spacing:e="1rem",min:a="250px",style:r,...n},s)=>{let c={...r,"--layout-grid-spacing":e,"--layout-grid-min-width":a},d={...n,ref:s,as:t,className:`${J.grid} ${i}`.trim(),style:c};return b.createElement(f,{...d},o)});var bt=K;import*as k from"react";var M="330d3be72c3e206903fb8f6effb1a4f7d91fe787e7966110ae39612de4490193",kt=`._vstack_isdqz_1 {
+  height: 100%;
+}
 
-var Breakout = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'div' : _props$as,
-      _props$style = props.style,
-      userStyles = _props$style === void 0 ? {} : _props$style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "style", "children"]);
+._vstack_isdqz_1 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
 
-  var style = _extends({
-    width: '100vw',
-    marginLeft: '50%',
-    transform: 'translateX(-50%)'
-  }, userStyles);
+._vstack_isdqz_1 > * + * {
+  margin-top: var(--layout-vstack-spacing, 0);
+}
+`;(function(){if(!document.getElementById(M)){var t=document.createElement("style");t.id=M,t.textContent=kt,document.head.appendChild(t)}})();var Q={vstack:"_vstack_isdqz_1"};var wt={alignment:{leading:"flex-start",center:"center",trailing:"flex-end"}},U=k.forwardRef(({alignment:t="center",as:o="div",children:i,className:e="",spacing:a="0",style:r,...n},s)=>{let c={...r,"--layout-vstack-spacing":a},d={...n,ref:s,as:o,className:`${Q.vstack} ${e}`.trim(),style:c};return k.createElement(u,{direction:"column",align:wt.alignment[t],justify:"center",...d},i)});var zt=U;import*as w from"react";var X="0dc32607c6f2d89d0d3d3055c4b13656fd9e9be071ef796baa0de02943438048",Rt=`._hstack_iv0fl_1 {
+  height: 100%;
+}
 
-  return React.createElement(Tag, Object.assign({}, _extends(_extends({}, rest), {}, {
-    ref: ref,
-    style: style
-  })), children);
-});
+._hstack_iv0fl_1 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
 
-var keyToFlexLookup = {
-  top: 'flex-start',
-  center: 'center',
-  bottom: 'flex-end',
-  stretch: 'stretch'
-};
-
-function translateToFlex(key) {
-  return keyToFlexLookup[key];
+._hstack_iv0fl_1 > * + * {
+  margin-left: var(--layout-hstack-spacing, 0);
 }
+`;(function(){if(!document.getElementById(X)){var t=document.createElement("style");t.id=X,t.textContent=Rt,document.head.appendChild(t)}})();var Y={hstack:"_hstack_iv0fl_1"};var Ct={alignment:{top:"flex-start",center:"center",bottom:"flex-end"}},tt=w.forwardRef(({alignment:t="center",as:o="div",children:i,className:e="",spacing:a="0",style:r,...n},s)=>{let c={...r,"--layout-hstack--spacing":a},d={...n,ref:s,as:o,className:`${Y.hstack} ${e}`.trim(),style:c};return w.createElement(u,{direction:"row",align:Ct.alignment[t],...d},i)});var Et=tt;import*as p from"react";var et="ce23d061dc32720ba7712d83c494ef600806d2aacc73e16337b70177d55642d1",Vt=`._zstack_ow7up_1 {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: 'zstack';
+  justify-items: var(--layout-zstack-justify);
+  align-items: var(--layout-zstack-align);
+}
 
-var HStack = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'div' : _props$as,
-      _props$alignment = props.alignment,
-      alignment = _props$alignment === void 0 ? 'stretch' : _props$alignment,
-      _props$style = props.style,
-      userStyles = _props$style === void 0 ? {} : _props$style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "alignment", "style", "children"]);
-
-  var style = _extends({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: translateToFlex(alignment),
-    justifyContent: 'center'
-  }, userStyles);
-
-  return React.createElement(Tag, Object.assign({}, _extends(_extends({}, rest), {}, {
-    ref: ref,
-    style: style
-  })), children);
-});
-
-var keyToFlexLookup$1 = {
-  leading: 'flex-start',
-  center: 'center',
-  trailing: 'flex-end',
-  stretch: 'stretch'
-};
-
-function translateToFlex$1(key) {
-  return keyToFlexLookup$1[key];
+._zstack_ow7up_1 > * {
+  grid-area: zstack;
+  z-index: var(--layout-zstack-zIndex);
+  margin-top: calc(var(--layout-zstack-marginTop) * var(--layout-zstack-layer));
+  margin-right: calc(var(--layout-zstack-marginRight) * var(--layout-zstack-layer));
+  margin-bottom: calc(var(--layout-zstack-marginBottom) * var(--layout-zstack-layer));
+  margin-left: calc(var(--layout-zstack-marginLeft) * var(--layout-zstack-layer));
 }
-
-var VStack = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'div' : _props$as,
-      _props$alignment = props.alignment,
-      alignment = _props$alignment === void 0 ? 'stretch' : _props$alignment,
-      _props$style = props.style,
-      userStyles = _props$style === void 0 ? {} : _props$style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "alignment", "style", "children"]);
-
-  var style = _extends({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: translateToFlex$1(alignment),
-    justifyContent: 'flex-start'
-  }, userStyles);
-
-  return React.createElement(Tag, Object.assign({}, _extends(_extends({}, rest), {}, {
-    ref: ref,
-    style: style
-  })), children);
-});
-
-var Flex = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$grow = props.grow,
-      grow = _props$grow === void 0 ? '1' : _props$grow,
-      _props$shrink = props.shrink,
-      shrink = _props$shrink === void 0 ? '1' : _props$shrink,
-      _props$basis = props.basis,
-      basis = _props$basis === void 0 ? '0%' : _props$basis,
-      _props$as = props.as,
-      Tag = _props$as === void 0 ? 'div' : _props$as,
-      _props$style = props.style,
-      userStyles = _props$style === void 0 ? {} : _props$style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["grow", "shrink", "basis", "as", "style", "children"]);
-
-  var style = _extends({
-    flex: grow + " " + shrink + " " + basis
-  }, userStyles);
-
-  return React.createElement(Tag, Object.assign({}, _extends(_extends({}, rest), {}, {
-    ref: ref,
-    style: style
-  })), children);
-});
-
-var Spacer = /*#__PURE__*/forwardRef(function (props, ref) {
-  return React.createElement(Flex, Object.assign({}, _extends(_extends({}, props), {}, {
-    ref: ref
-  })));
-});
-
-var Screen = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'div' : _props$as,
-      _props$style = props.style,
-      userStyles = _props$style === void 0 ? {} : _props$style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "style", "children"]);
-
-  var style = _extends({
-    height: '100vh',
-    width: '100vw',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }, userStyles);
-
-  return React.createElement(Tag, Object.assign({}, _extends(_extends({}, rest), {}, {
-    ref: ref,
-    style: style
-  })), children);
-});
-
-var Tiles = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Tag = _props$as === void 0 ? 'div' : _props$as,
-      _props$min = props.min,
-      min = _props$min === void 0 ? '250px' : _props$min,
-      _props$style = props.style,
-      userStyles = _props$style === void 0 ? {} : _props$style,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "min", "style", "children"]);
-
-  var style = _extends({
-    display: 'grid',
-    gridTemplateColumns: "repeat(auto-fit, minmax(min(" + min + ", 100%), 1fr))"
-  }, userStyles);
-
-  return React.createElement(Tag, Object.assign({}, _extends(_extends({}, rest), {}, {
-    ref: ref,
-    style: style
-  })), children);
-});
-
-export { Breakout, Flex, HStack, Screen, Spacer, Tiles, VStack };
-//# sourceMappingURL=layout-blocks.esm.js.map
+`;(function(){if(!document.getElementById(et)){var t=document.createElement("style");t.id=et,t.textContent=Vt,document.head.appendChild(t)}})();var at={zstack:"_zstack_ow7up_1"};var l={topLeading:"topLeading",top:"top",topTrailing:"topTrailing",leading:"leading",center:"center",trailing:"trailing",bottomLeading:"bottomLeading",bottom:"bottom",bottomTrailing:"bottomTrailing"},$t={[l.topLeading]:["start","start"],[l.top]:["start","center"],[l.topTrailing]:["start","end"],[l.leading]:["center","start"],[l.center]:["center","center"],[l.trailing]:["center","end"],[l.bottomLeading]:["end","start"],[l.bottom]:["end","center"],[l.bottomTrailing]:["end","end"]};function Ft(t){switch(t){case l.topLeading:return["--layout-zstack-marginTop","--layout-zstack-marginLeft"];case l.top:return["--layout-zstack-marginTop"];case l.topTrailing:return["--layout-zstack-marginTop","--layout-zstack-marginRight"];case l.leading:return["--layout-zstack-marginLeft"];case l.center:return[];case l.trailing:return["--layout-zstack-marginRight"];case l.bottomLeading:return["--layout-zstack-marginBottom","--layout-zstack-marginLeft"];case l.bottom:return["--layout-zstack-marginBottom"];case l.bottomTrailing:return["--layout-zstack-marginBottom","--layout-zstack-layout-zstack-marginRight"]}}var rt=p.forwardRef(({alignment:t="center",as:o="div",offset:i="0",reverse:e=!1,children:a,className:r="",style:n,...s},c)=>{let[d,m]=$t[t],R=p.Children.count(a),C={...n,"--layout-zstack-align":d,"--layout-zstack-justify":m},E={...s,ref:c,as:o,className:`${at.zstack} ${r}`.trim(),style:C};return p.createElement(f,{...E},p.Children.toArray(a).map((y,V)=>{let st=e?R-V-1:V,ct=V,{props:$}=y,dt=Ft(t).reduce((F,mt)=>(F[mt]=i,F),{}),lt={...$,style:{...$.style,...dt,"--layout-zstack-layer":ct,"--layout-zstack-zIndex":$.zIndex||st}};return p.cloneElement(y,lt)}))});var It=rt;import*as z from"react";var ot="fde433f483ab9193d8ad02e3de323757fa6d433704b8267bf5fe329bb87184a8",Pt=`._spacer_1m6lf_1 {
+  flex: 1 1 0%;
+}
+`;(function(){if(!document.getElementById(ot)){var t=document.createElement("style");t.id=ot,t.textContent=Pt,document.head.appendChild(t)}})();var it={spacer:"_spacer_1m6lf_1"};var nt=z.forwardRef(({as:t="div",children:o,className:i="",...e},a)=>{let r={...e,ref:a,as:t,className:`${it.spacer} ${i}`.trim()};return z.createElement(f,{...r},o)});var jt=nt;export{gt as Center,xt as Cluster,ht as Frame,bt as Grid,Et as HStack,jt as Spacer,zt as VStack,It as ZStack};

package.json

 {
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
   "files": [
@@ -10,12 +9,5 @@ "dist"
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "version": "auto-changelog -p --template keepachangelog && git add CHANGELOG.md",
-    "prepublish": "tsdx build",
-    "prepublishOnly": "git push && git push --tags && gh-release"
+    "version": "auto-changelog -p --template keepachangelog && git add CHANGELOG.md"
   },
@@ -25,7 +17,2 @@ "peerDependencies": {
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "prettier": {
@@ -47,22 +34,7 @@ "printWidth": 80,
   "devDependencies": {
-    "@babel/core": "^7.8.6",
-    "@storybook/addon-actions": "^5.3.14",
-    "@storybook/addon-links": "^5.3.14",
-    "@storybook/addon-storysource": "^5.3.17",
-    "@storybook/addons": "^5.3.14",
-    "@storybook/react": "^5.3.14",
-    "@types/jest": "^25.1.3",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
-    "auto-changelog": "^2.2.0",
-    "babel-loader": "^8.0.6",
-    "gh-release": "^3.5.0",
-    "husky": "^4.2.3",
-    "postcss-import": "^12.0.1",
-    "react-feather": "^2.0.4",
-    "tailwindcss": "^1.5.1",
-    "ts-loader": "^6.2.1",
-    "tsdx": "^0.12.3",
-    "tslib": "^1.11.1",
-    "typescript": "^3.8.3"
+    "auto-changelog": "^2.3.0",
+    "css-tree": "^2.0.3",
+    "esbuild": "^0.14.5",
+    "esbuild-css-modules-plugin": "^2.0.9",
+    "np": "^7.6.0"
   },
@@ -69,0 +41,0 @@ "description": "Reusable layout components for your React project",

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

5

decreased by-75%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

29976

decreased by-42.5%

Number of package files

6

decreased by-79.31%

Lines of code

305

decreased by-37.76%

No dependency changes