layout-blocks - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

CHANGELOG.md

@@ -10,6 +10,12 @@ # Changelog
 
-## [v1.1.1](https://github.com/cdonohue/layout-blocks/compare/v1.1.0...v1.1.1)
+## [v1.2.0](https://github.com/cdonohue/layout-blocks/compare/v1.1.1...v1.2.0)
 
 ### Commits
 
+- Add back storybook [`c7576f2`](https://github.com/cdonohue/layout-blocks/commit/c7576f23de86dd70adf14922b0271be7051dce92)
+
+## [v1.1.1](https://github.com/cdonohue/layout-blocks/compare/v1.1.0...v1.1.1) - 2021-12-15
+
+### Commits
+
 - Add Flex to exports [`58c53fb`](https://github.com/cdonohue/layout-blocks/commit/58c53fbe79e895a1872067cfc770502ca77b3e52)
@@ -16,0 +22,0 @@

dist/index.js

@@ -1,2 +0,2 @@
-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 {
+var zt=Object.create;var h=Object.defineProperty;var Rt=Object.getOwnPropertyDescriptor;var Ct=Object.getOwnPropertyNames;var Et=Object.getPrototypeOf,Vt=Object.prototype.hasOwnProperty;var B=t=>h(t,"__esModule",{value:!0});var $t=(t,e)=>{for(var a in e)h(t,a,{get:e[a],enumerable:!0})},L=(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")&&h(t,r,{get:()=>e[r],enumerable:!(o=Rt(e,r))||o.enumerable});return t},p=(t,e)=>L(B(h(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=L(B({}),e,1),t&&t.set(e,a),a))(typeof WeakMap!="undefined"?new WeakMap:0);var Wt={};$t(Wt,{Center:()=>J,Cluster:()=>U,Flex:()=>u,Frame:()=>et,Grid:()=>it,HStack:()=>pt,Spacer:()=>bt,VStack:()=>dt,View:()=>m,ZStack:()=>xt});var _=p(require("react"));var b=p(require("react"));var N="9fcaf4f354669d2d23eebaddb6aaebf9fcbe02cfe379cf61a9a07a076d6429e2",It=`._view_3v1kn_1 {
   box-sizing: border-box;
@@ -7,6 +7,10 @@ padding-block-start: var(--layout-padding-top, 0);
   padding-inline-start: var(--layout-padding-left, 0);
+  border: var(--layout-border-width) var(--layout-border-style)
+    var(--layout-border-color);
+  border-radius: var(layout-border-radius);
+  box-shadow: var(layout-shadow);
 }
 
 @supports not (padding-block: var(--layout-padding-top, 0)) {
-  ._view_182wq_1 {
+  ._view_3v1kn_1 {
     padding-top: var(--layout-padding-top, 0);
@@ -18,3 +22,3 @@ padding-right: var(--layout-padding-right, 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 {
+`;(function(){if(!document.getElementById(N)){var t=document.createElement("style");t.id=N,t.textContent=It,document.head.appendChild(t)}})();var q={view:"_view_3v1kn_1"};var H=b.forwardRef(({as:t="div",children:e,className:a="",padding:o="",paddingInline:r="",paddingBlock:i="",paddingTop:s="0",paddingRight:n="0",paddingBottom:c="0",paddingLeft:d="0",borderRadius:f="0",borderColor:$="black",borderStyle:F="solid",borderWidth:I="0",shadow:v="none",style:g,...P},j)=>{r&&(d=r,n=r),i&&(s=i,c=i),o&&(d=o,n=o,s=o,c=o);let x={...g,"--layout-padding-top":s,"--layout-padding-right":n,"--layout-padding-bottom":c,"--layout-padding-left":d,"--layout-border-radius":f,"--layout-border-color":$,"--layout-border-style":F,"--layout-border-width":I,"--layout-shadow":v},S={...P,ref:j,className:`${q.view} ${a}`.trim(),style:x};return b.createElement(t,{...S},e)});var m=H;var k=p(require("react"));var G="1e32303987dfa08d73d35301400d2a49adb8814bfe2e0810f5160b539aa837f5",Pt=`._flex_om2cc_1 {
   align-items: var(--layout-flex-align, 'center');
@@ -25,3 +29,3 @@ display: flex;
 }
-`;(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 {
+`;(function(){if(!document.getElementById(G)){var t=document.createElement("style");t.id=G,t.textContent=Pt,document.head.appendChild(t)}})();var Z={flex:"_flex_om2cc_1"};var A=k.forwardRef(({align:t="center",as:e="div",children:a,className:o="",direction:r="row",justify:i="center",style:s,...n},c)=>{let d={...s,"--layout-flex-align":t,"--layout-flex-direction":r,"--layout-flex-justify":i},f={...n,ref:c,as:e,className:`${Z.flex} ${o}`.trim(),style:d};return k.createElement(m,{...f},a)});var u=A;var O="a8457c9c92cc1fc2134ad3d9ae91eef6f5413e883fe5a13078927f530c8fab95",jt=`._center_1kq8v_1 {
   box-sizing: content-box;
@@ -39,7 +43,7 @@ margin-left: auto;
 }
-`;(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 {
+`;(function(){if(!document.getElementById(O)){var t=document.createElement("style");t.id=O,t.textContent=jt,document.head.appendChild(t)}})();var W={center:"_center_1kq8v_1"};var D=_.forwardRef(({as:t="div",children:e,max:a,gutter:o=0,centerChildren:r=!1,className:i="",style:s,...n},c)=>{let d={...s,"--layout-center-max-width":a},f={...n,ref:c,as:t,className:`${W.center} ${i}`.trim(),style:d,paddingInline:o};return r?_.createElement(u,{direction:"column",align:"center",...f},e):_.createElement(m,{...f},e)});var J=D;var w=p(require("react"));var K="81fb0e1396c6917af8a9bd0f866c1638a95089087668a2039545bcc01a1a71e9",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 {
+`;(function(){if(!document.getElementById(K)){var t=document.createElement("style");t.id=K,t.textContent=St,document.head.appendChild(t)}})();var M={cluster:"_cluster_1xivx_1"};var Q=w.forwardRef(({align:t="center",justify:e="flex-start",as:a="div",children:o,className:r="",spacing:i="1rem",style:s,...n},c)=>{let d={...s,"--layout-cluster-spacing":i},f={...n,ref:c,as:a,className:`${M.cluster} ${r}`.trim(),style:d};return w.createElement(u,{direction:"row",align:t,justify:e,...f},o)});var U=Q;var z=p(require("react"));var X="50c8ad23eedebe727ff9dfa5121ccfc38d6d8efd79fef72d9c5b00438f7657c7",Tt=`._frame_1mo48_1 {
   position: relative;
@@ -85,3 +89,3 @@ 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 {
+`;(function(){if(!document.getElementById(X)){var t=document.createElement("style");t.id=X,t.textContent=Tt,document.head.appendChild(t)}})();var Y={frame:"_frame_1mo48_1"};var tt=z.forwardRef(({as:t="div",children:e,className:a="",style:o,ratio:r="16:9",...i},s)=>{let[n,c]=r.split(/\/|:/),d={...o,"--layout-frame-ratio-width":n,"--layout-frame-ratio-height":c},f={...i,ref:s,as:t,className:`${Y.frame} ${a}`.trim(),style:d};return z.createElement(m,{...f},e)});var et=tt;var R=p(require("react"));var at="0db112b146cbcd4f57aa5860452f51b023798b4c19ca6ff9078240f0f1dec10c",Bt=`._grid_4pvmi_1 {
   display: grid;
@@ -100,3 +104,3 @@ gap: var(--layout-grid-spacing, 1rem);
 }
-`;(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 {
+`;(function(){if(!document.getElementById(at)){var t=document.createElement("style");t.id=at,t.textContent=Bt,document.head.appendChild(t)}})();var rt={grid:"_grid_4pvmi_1"};var ot=R.forwardRef(({as:t="div",children:e,className:a="",spacing:o="1rem",min:r="250px",style:i,...s},n)=>{let c={...i,"--layout-grid-spacing":o,"--layout-grid-min-width":r},d={...s,ref:n,as:t,className:`${rt.grid} ${a}`.trim(),style:c};return R.createElement(m,{...d},e)});var it=ot;var C=p(require("react"));var st="3eb08caabb528cbbe55301a69f053feb43de35ce88d2ac6ac6610cffe2850f07",Lt=`._vstack_isdqz_1 {
   height: 100%;
@@ -113,3 +117,3 @@ }
 }
-`;(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 {
+`;(function(){if(!document.getElementById(st)){var t=document.createElement("style");t.id=st,t.textContent=Lt,document.head.appendChild(t)}})();var nt={vstack:"_vstack_isdqz_1"};var Nt={alignment:{leading:"flex-start",center:"center",trailing:"flex-end"}},ct=C.forwardRef(({alignment:t="center",as:e="div",children:a,className:o="",spacing:r="0",style:i,...s},n)=>{let c={...i,"--layout-vstack-spacing":r},d={...s,ref:n,as:e,className:`${nt.vstack} ${o}`.trim(),style:c};return C.createElement(u,{direction:"column",align:Nt.alignment[t],justify:"center",...d},a)});var dt=ct;var E=p(require("react"));var lt="34cee9b965aae163398c1fbfd274bd3140509a12adc568bb275055a9afd13194",qt=`._hstack_iv0fl_1 {
   height: 100%;
@@ -126,3 +130,3 @@ }
 }
-`;(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 {
+`;(function(){if(!document.getElementById(lt)){var t=document.createElement("style");t.id=lt,t.textContent=qt,document.head.appendChild(t)}})();var mt={hstack:"_hstack_iv0fl_1"};var Ht={alignment:{top:"flex-start",center:"center",bottom:"flex-end"}},ft=E.forwardRef(({alignment:t="center",as:e="div",children:a,className:o="",spacing:r="0",style:i,...s},n)=>{let c={...i,"--layout-hstack--spacing":r},d={...s,ref:n,as:e,className:`${mt.hstack} ${o}`.trim(),style:c};return E.createElement(u,{direction:"row",align:Ht.alignment[t],...d},a)});var pt=ft;var y=p(require("react"));var ut="5e8f78d630e4d5788cab9cd1d629a5a7b5a03f137e4280de0d4f48d1b5b57643",Gt=`._zstack_ow7up_1 {
   display: grid;
@@ -144,5 +148,5 @@ grid-template-columns: 1fr;
 }
-`;(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 {
+`;(function(){if(!document.getElementById(ut)){var t=document.createElement("style");t.id=ut,t.textContent=Gt,document.head.appendChild(t)}})();var yt={zstack:"_zstack_ow7up_1"};var l={topLeading:"topLeading",top:"top",topTrailing:"topTrailing",leading:"leading",center:"center",trailing:"trailing",bottomLeading:"bottomLeading",bottom:"bottom",bottomTrailing:"bottomTrailing"},Zt={[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 At(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 gt=y.forwardRef(({alignment:t="center",as:e="div",offset:a="0",reverse:o=!1,children:r,className:i="",style:s,...n},c)=>{let[d,f]=Zt[t],$=y.Children.count(r),F={...s,"--layout-zstack-align":d,"--layout-zstack-justify":f},I={...n,ref:c,as:e,className:`${yt.zstack} ${i}`.trim(),style:F};return y.createElement(m,{...I},y.Children.toArray(r).map((v,g)=>{let P=o?$-g-1:g,j=g,{props:x}=v,S=At(t).reduce((T,wt)=>(T[wt]=a,T),{}),kt={...x,style:{...x.style,...S,"--layout-zstack-layer":j,"--layout-zstack-zIndex":x.zIndex||P}};return y.cloneElement(v,kt)}))});var xt=gt;var V=p(require("react"));var _t="e975b67476332dbec75471ed02f0db4da4db4e5320198871a4ded9a4b53455c7",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);
+`;(function(){if(!document.getElementById(_t)){var t=document.createElement("style");t.id=_t,t.textContent=Ot,document.head.appendChild(t)}})();var vt={spacer:"_spacer_1m6lf_1"};var ht=V.forwardRef(({as:t="div",children:e,className:a="",...o},r)=>{let i={...o,ref:r,as:t,className:`${vt.spacer} ${a}`.trim()};return V.createElement(m,{...i},e)});var bt=ht;module.exports=Ft(Wt);

dist/layout-blocks.esm.js

@@ -1,2 +0,2 @@
-import*as g from"react";import*as x from"react";var I="ed436aae0f2e00d48b65cde0246130e6cc6464388361e6097c3c2b80e0def6b6",ft=`._view_182wq_1 {
+import*as x from"react";import*as v from"react";var S="a65ec4c2c80451c5f6e3ecd2624cc9d03fc98dd3e288ca3e4cc5556add6c70b0",ft=`._view_3v1kn_1 {
   box-sizing: border-box;
@@ -7,6 +7,10 @@ padding-block-start: var(--layout-padding-top, 0);
   padding-inline-start: var(--layout-padding-left, 0);
+  border: var(--layout-border-width) var(--layout-border-style)
+    var(--layout-border-color);
+  border-radius: var(layout-border-radius);
+  box-shadow: var(layout-shadow);
 }
 
 @supports not (padding-block: var(--layout-padding-top, 0)) {
-  ._view_182wq_1 {
+  ._view_3v1kn_1 {
     padding-top: var(--layout-padding-top, 0);
@@ -18,3 +22,3 @@ padding-right: var(--layout-padding-right, 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 {
+`;(function(){if(!document.getElementById(S)){var t=document.createElement("style");t.id=S,t.textContent=ft,document.head.appendChild(t)}})();var T={view:"_view_3v1kn_1"};var B=v.forwardRef(({as:t="div",children:o,className:i="",padding:e="",paddingInline:a="",paddingBlock:r="",paddingTop:s="0",paddingRight:n="0",paddingBottom:c="0",paddingLeft:l="0",borderRadius:f="0",borderColor:E="black",borderStyle:V="solid",borderWidth:$="0",shadow:_="none",style:y,...F},I)=>{a&&(l=a,n=a),r&&(s=r,c=r),e&&(l=e,n=e,s=e,c=e);let g={...y,"--layout-padding-top":s,"--layout-padding-right":n,"--layout-padding-bottom":c,"--layout-padding-left":l,"--layout-border-radius":f,"--layout-border-color":E,"--layout-border-style":V,"--layout-border-width":$,"--layout-shadow":_},P={...F,ref:I,className:`${T.view} ${i}`.trim(),style:g};return v.createElement(t,{...P},o)});var m=B;import*as h from"react";var L="f74093b39e35283939e8f40074528661daaebc3a003336c53eb46de31a4e596d",pt=`._flex_om2cc_1 {
   align-items: var(--layout-flex-align, 'center');
@@ -25,3 +29,3 @@ display: flex;
 }
-`;(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 {
+`;(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 q=h.forwardRef(({align:t="center",as:o="div",children:i,className:e="",direction:a="row",justify:r="center",style:s,...n},c)=>{let l={...s,"--layout-flex-align":t,"--layout-flex-direction":a,"--layout-flex-justify":r},f={...n,ref:c,as:o,className:`${N.flex} ${e}`.trim(),style:l};return h.createElement(m,{...f},i)});var p=q;var H="daa5866808a7491f1954f191a4581b5e9ae783d0086e0eda02e81d856c549f67",ut=`._center_1kq8v_1 {
   box-sizing: content-box;
@@ -39,7 +43,7 @@ margin-left: auto;
 }
-`;(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 {
+`;(function(){if(!document.getElementById(H)){var t=document.createElement("style");t.id=H,t.textContent=ut,document.head.appendChild(t)}})();var G={center:"_center_1kq8v_1"};var Z=x.forwardRef(({as:t="div",children:o,max:i,gutter:e=0,centerChildren:a=!1,className:r="",style:s,...n},c)=>{let l={...s,"--layout-center-max-width":i},f={...n,ref:c,as:t,className:`${G.center} ${r}`.trim(),style:l,paddingInline:e};return a?x.createElement(p,{direction:"column",align:"center",...f},o):x.createElement(m,{...f},o)});var yt=Z;import*as b from"react";var A="6e0c789a8144ad79b4392d9c9e7991bf49cde180f3892c4a8075d3059d2008e6",gt=`._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 {
+`;(function(){if(!document.getElementById(A)){var t=document.createElement("style");t.id=A,t.textContent=gt,document.head.appendChild(t)}})();var O={cluster:"_cluster_1xivx_1"};var W=b.forwardRef(({align:t="center",justify:o="flex-start",as:i="div",children:e,className:a="",spacing:r="1rem",style:s,...n},c)=>{let l={...s,"--layout-cluster-spacing":r},f={...n,ref:c,as:i,className:`${O.cluster} ${a}`.trim(),style:l};return b.createElement(p,{direction:"row",align:t,justify:o,...f},e)});var xt=W;import*as k from"react";var D="ea9b40548bbf50cb84ebc390a73c64396f25cfed9d91eceb0b981bb2f1c26be9",_t=`._frame_1mo48_1 {
   position: relative;
@@ -85,3 +89,3 @@ 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 {
+`;(function(){if(!document.getElementById(D)){var t=document.createElement("style");t.id=D,t.textContent=_t,document.head.appendChild(t)}})();var J={frame:"_frame_1mo48_1"};var K=k.forwardRef(({as:t="div",children:o,className:i="",style:e,ratio:a="16:9",...r},s)=>{let[n,c]=a.split(/\/|:/),l={...e,"--layout-frame-ratio-width":n,"--layout-frame-ratio-height":c},f={...r,ref:s,as:t,className:`${J.frame} ${i}`.trim(),style:l};return k.createElement(m,{...f},o)});var vt=K;import*as w from"react";var M="971f6f88f748e1ab0b3e670b2fedaef7ed487c973566254bb31764a076b789f8",ht=`._grid_4pvmi_1 {
   display: grid;
@@ -100,3 +104,3 @@ gap: var(--layout-grid-spacing, 1rem);
 }
-`;(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 {
+`;(function(){if(!document.getElementById(M)){var t=document.createElement("style");t.id=M,t.textContent=ht,document.head.appendChild(t)}})();var Q={grid:"_grid_4pvmi_1"};var U=w.forwardRef(({as:t="div",children:o,className:i="",spacing:e="1rem",min:a="250px",style:r,...s},n)=>{let c={...r,"--layout-grid-spacing":e,"--layout-grid-min-width":a},l={...s,ref:n,as:t,className:`${Q.grid} ${i}`.trim(),style:c};return w.createElement(m,{...l},o)});var bt=U;import*as z from"react";var X="cf87ad6e3d5c8d217ca0068f0407903ab1ce860eaec27303dfe7a12157f36ccb",kt=`._vstack_isdqz_1 {
   height: 100%;
@@ -113,3 +117,3 @@ }
 }
-`;(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 {
+`;(function(){if(!document.getElementById(X)){var t=document.createElement("style");t.id=X,t.textContent=kt,document.head.appendChild(t)}})();var Y={vstack:"_vstack_isdqz_1"};var wt={alignment:{leading:"flex-start",center:"center",trailing:"flex-end"}},tt=z.forwardRef(({alignment:t="center",as:o="div",children:i,className:e="",spacing:a="0",style:r,...s},n)=>{let c={...r,"--layout-vstack-spacing":a},l={...s,ref:n,as:o,className:`${Y.vstack} ${e}`.trim(),style:c};return z.createElement(p,{direction:"column",align:wt.alignment[t],justify:"center",...l},i)});var zt=tt;import*as R from"react";var et="f1d323a52e95b5488e163efa12beebd3bff07dae95e3a350debca4001c23174b",Rt=`._hstack_iv0fl_1 {
   height: 100%;
@@ -126,3 +130,3 @@ }
 }
-`;(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 {
+`;(function(){if(!document.getElementById(et)){var t=document.createElement("style");t.id=et,t.textContent=Rt,document.head.appendChild(t)}})();var at={hstack:"_hstack_iv0fl_1"};var Ct={alignment:{top:"flex-start",center:"center",bottom:"flex-end"}},rt=R.forwardRef(({alignment:t="center",as:o="div",children:i,className:e="",spacing:a="0",style:r,...s},n)=>{let c={...r,"--layout-hstack--spacing":a},l={...s,ref:n,as:o,className:`${at.hstack} ${e}`.trim(),style:c};return R.createElement(p,{direction:"row",align:Ct.alignment[t],...l},i)});var Et=rt;import*as u from"react";var ot="1fc592a4d969fd7693ffd044afc69fc0c84aca2a1eec48ff67bb74bbdce32ad5",Vt=`._zstack_ow7up_1 {
   display: grid;
@@ -144,5 +148,5 @@ grid-template-columns: 1fr;
 }
-`;(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 {
+`;(function(){if(!document.getElementById(ot)){var t=document.createElement("style");t.id=ot,t.textContent=Vt,document.head.appendChild(t)}})();var it={zstack:"_zstack_ow7up_1"};var d={topLeading:"topLeading",top:"top",topTrailing:"topTrailing",leading:"leading",center:"center",trailing:"trailing",bottomLeading:"bottomLeading",bottom:"bottom",bottomTrailing:"bottomTrailing"},$t={[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 Ft(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 st=u.forwardRef(({alignment:t="center",as:o="div",offset:i="0",reverse:e=!1,children:a,className:r="",style:s,...n},c)=>{let[l,f]=$t[t],E=u.Children.count(a),V={...s,"--layout-zstack-align":l,"--layout-zstack-justify":f},$={...n,ref:c,as:o,className:`${it.zstack} ${r}`.trim(),style:V};return u.createElement(m,{...$},u.Children.toArray(a).map((_,y)=>{let F=e?E-y-1:y,I=y,{props:g}=_,P=Ft(t).reduce((j,mt)=>(j[mt]=i,j),{}),dt={...g,style:{...g.style,...P,"--layout-zstack-layer":I,"--layout-zstack-zIndex":g.zIndex||F}};return u.cloneElement(_,dt)}))});var It=st;import*as C from"react";var nt="971b46bafb233c2ef7c97322c92248ef294367e62bfc31713ccaf653ef40916c",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};
+`;(function(){if(!document.getElementById(nt)){var t=document.createElement("style");t.id=nt,t.textContent=Pt,document.head.appendChild(t)}})();var ct={spacer:"_spacer_1m6lf_1"};var lt=C.forwardRef(({as:t="div",children:o,className:i="",...e},a)=>{let r={...e,ref:a,as:t,className:`${ct.spacer} ${i}`.trim()};return C.createElement(m,{...r},o)});var jt=lt;export{yt as Center,xt as Cluster,p as Flex,vt as Frame,bt as Grid,Et as HStack,jt as Spacer,zt as VStack,m as View,It as ZStack};

package.json

 {
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
@@ -32,10 +32,22 @@ "main": "dist/index.js",
   "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-docs": "^6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/react": "^6.4.9",
     "auto-changelog": "^2.3.0",
+    "babel-loader": "^8.2.3",
     "css-tree": "^2.0.3",
     "esbuild": "^0.14.5",
     "esbuild-css-modules-plugin": "^2.0.9",
-    "np": "^7.6.0"
+    "np": "^7.6.0",
+    "open-props": "^1.0.13",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "storybook-css-modules-preset": "^1.1.1"
   },
   "description": "Reusable layout components for your React project",
-  "repository": "https://github.com/cdonohue/layout-blocks.git"
+  "repository": "https://github.com/cdonohue/layout-blocks.git",
+  "dependencies": {}
 }

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

31646

increased by4.76%

Lines of code

315

increased by3.28%

Worsened metrics

Dev dependency count

16

increased by220%

No dependency changes