@progress/kendo-themes-html 14.1.1-dev.1 → 14.1.1-dev.2

package/dist/esm/layout/demos/grid-layout.mjs

@@ -0,0 +1 @@
+var c=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((e,s)=>t[s]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var N={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as C}from"react/jsx-runtime";var _=[],O={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},x={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=x.orientation,alignItems:s=x.alignItems,justifyContent:r=x.justifyContent,justifyItems:n=x.justifyItems,wrap:i=x.wrap,style:f,...v}=o;return C("div",{...v,style:{gap:t,...f},className:c(o.className,{[`k-${N.orientationMap[e]||e}`]:e,[`k-align-items-${s}`]:s,[`k-justify-content-${r}`]:r,[`k-justify-items-${n}`]:n,"k-flex-wrap":i}),children:o.children})};a.states=_;a.options=O;a.defaultOptions=x;var b="stack-layout",A="stacklayout",S="grid-layout",M="gridlayout";import{jsx as j}from"react/jsx-runtime";var I="k-grid-layout",E=[],K={},m=o=>{let{className:t,...e}=o;return j(a,{...e,className:c(t,I),children:o.children})};m.states=E;m.options=K;m.className=I;m.moduleName=S;m.folderName=M;import{jsx as $}from"react/jsx-runtime";var T="k-stack-layout",D=[],G={},l=o=>{let{className:t,...e}=o;return $(a,{...e,className:c(t,T),children:o.children})};l.states=D;l.options=G;l.className=T;l.moduleName=b;l.folderName=A;import{Fragment as P,jsx as L,jsxs as R}from"react/jsx-runtime";var g=({alignItems:o="start",justifyContent:t="start",...e})=>L(l,{orientation:"horizontal",alignItems:o,justifyContent:t,children:R(P,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});import{Fragment as jt,jsx as Kt,jsxs as Dt}from"react/jsx-runtime";import{Fragment as Y,jsx as u,jsxs as F}from"react/jsx-runtime";var B=a.options,U=a.states,w={...a.defaultOptions,variant:"stretch"},z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],H=[],k=o=>{let{variant:t,modifiers:e,...s}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(v=>{v==="vertical"&&(r.orientation=e?.[v]?"vertical":"horizontal")});let n="k-border-solid k-border-secondary-subtle k-p-3",i={width:"228px",height:"228px",gap:"8px"},f=F(Y,{children:[u("div",{className:"k-p-5 k-bg-primary-subtle"}),u("div",{className:"k-p-5 k-bg-primary-emphasis"}),u("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"start",children:f});case"middle":return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"center",children:f});case"end":return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"end",children:f});default:return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"stretch",children:f})}};k.options=B;k.states=U;k.variants=z;k.defaultOptions=w;k.modifiers=H;k.className=l.className;import{Fragment as q,jsx as y,jsxs as V}from"react/jsx-runtime";var h=({alignItems:o="start",justifyItems:t="start",...e})=>y(m,{alignItems:o,justifyItems:t,children:V(q,{children:[y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"})]}),...e});import{Fragment as tt,jsx as d,jsxs as et}from"react/jsx-runtime";var W=a.options,J=a.states,Q={...a.defaultOptions,variant:"stretch"},X=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],Z=[],p=o=>{let{variant:t,modifiers:e,...s}={...o},r="k-border-solid k-border-secondary-subtle k-p-3",n={width:"228px",height:"228px",gap:"8px",gridTemplateColumns:"1fr 1fr 1fr"},i=et(tt,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary-subtle"})]});switch(t){case"start":return d(h,{...s,style:n,className:r,alignItems:"start",justifyItems:"start",children:i});case"middle":return d(h,{...s,style:n,className:r,alignItems:"center",justifyItems:"center",children:i});case"end":return d(h,{...s,style:n,className:r,alignItems:"end",justifyItems:"end",children:i});default:return d(h,{...s,style:n,className:r,alignItems:"stretch",justifyItems:"stretch",children:i})}};p.options=W;p.states=J;p.variants=X;p.defaultOptions=Q;p.modifiers=Z;p.className=m.className;var re=p;export{p as GridLayoutDemo,re as default};

package/dist/esm/layout/demos/stack-layout.mjs

@@ -0,0 +1 @@
+var c=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((e,s)=>t[s]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var N={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as C}from"react/jsx-runtime";var _=[],O={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},x={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=x.orientation,alignItems:s=x.alignItems,justifyContent:r=x.justifyContent,justifyItems:n=x.justifyItems,wrap:i=x.wrap,style:f,...v}=o;return C("div",{...v,style:{gap:t,...f},className:c(o.className,{[`k-${N.orientationMap[e]||e}`]:e,[`k-align-items-${s}`]:s,[`k-justify-content-${r}`]:r,[`k-justify-items-${n}`]:n,"k-flex-wrap":i}),children:o.children})};a.states=_;a.options=O;a.defaultOptions=x;var b="stack-layout",A="stacklayout",S="grid-layout",M="gridlayout";import{jsx as j}from"react/jsx-runtime";var I="k-grid-layout",E=[],K={},m=o=>{let{className:t,...e}=o;return j(a,{...e,className:c(t,I),children:o.children})};m.states=E;m.options=K;m.className=I;m.moduleName=S;m.folderName=M;import{jsx as $}from"react/jsx-runtime";var T="k-stack-layout",D=[],G={},l=o=>{let{className:t,...e}=o;return $(a,{...e,className:c(t,T),children:o.children})};l.states=D;l.options=G;l.className=T;l.moduleName=b;l.folderName=A;import{Fragment as P,jsx as u,jsxs as R}from"react/jsx-runtime";var g=({alignItems:o="start",justifyItems:t="start",...e})=>u(m,{alignItems:o,justifyItems:t,children:R(P,{children:[u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"})]}),...e});import{Fragment as jt,jsx as Kt,jsxs as Dt}from"react/jsx-runtime";import{Fragment as Y,jsx as d,jsxs as F}from"react/jsx-runtime";var B=a.options,U=a.states,w={...a.defaultOptions,variant:"stretch"},z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],H=[],k=o=>{let{variant:t,modifiers:e,...s}={...o},r="k-border-solid k-border-secondary-subtle k-p-3",n={width:"228px",height:"228px",gap:"8px",gridTemplateColumns:"1fr 1fr 1fr"},i=F(Y,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary-subtle"})]});switch(t){case"start":return d(g,{...s,style:n,className:r,alignItems:"start",justifyItems:"start",children:i});case"middle":return d(g,{...s,style:n,className:r,alignItems:"center",justifyItems:"center",children:i});case"end":return d(g,{...s,style:n,className:r,alignItems:"end",justifyItems:"end",children:i});default:return d(g,{...s,style:n,className:r,alignItems:"stretch",justifyItems:"stretch",children:i})}};k.options=B;k.states=U;k.variants=z;k.defaultOptions=w;k.modifiers=H;k.className=m.className;import{Fragment as q,jsx as L,jsxs as V}from"react/jsx-runtime";var h=({alignItems:o="start",justifyContent:t="start",...e})=>L(l,{orientation:"horizontal",alignItems:o,justifyContent:t,children:V(q,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});import{Fragment as tt,jsx as y,jsxs as et}from"react/jsx-runtime";var W=a.options,J=a.states,Q={...a.defaultOptions,variant:"stretch"},X=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],Z=[],p=o=>{let{variant:t,modifiers:e,...s}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(v=>{v==="vertical"&&(r.orientation=e?.[v]?"vertical":"horizontal")});let n="k-border-solid k-border-secondary-subtle k-p-3",i={width:"228px",height:"228px",gap:"8px"},f=et(tt,{children:[y("div",{className:"k-p-5 k-bg-primary-subtle"}),y("div",{className:"k-p-5 k-bg-primary-emphasis"}),y("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"start",children:f});case"middle":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"center",children:f});case"end":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"end",children:f});default:return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"stretch",children:f})}};p.options=W;p.states=J;p.variants=X;p.defaultOptions=Q;p.modifiers=Z;p.className=l.className;var re=p;export{p as StackLayoutDemo,re as default};

package/dist/esm/layout/templates/grid-layout-normal.mjs

@@ -1 +1 @@
-var i=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((e,n)=>t[n]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var L={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as _}from"react/jsx-runtime";var S=[],T={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},f={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=f.orientation,alignItems:n=f.alignItems,justifyContent:r=f.justifyContent,justifyItems:l=f.justifyItems,wrap:u=f.wrap,style:y,...h}=o;return _("div",{...h,style:{gap:t,...y},className:i(o.className,{[`k-${L.orientationMap[e]||e}`]:e,[`k-align-items-${n}`]:n,[`k-justify-content-${r}`]:r,[`k-justify-items-${l}`]:l,"k-flex-wrap":u}),children:o.children})};a.states=S;a.options=T;a.defaultOptions=f;var k="stack-layout",v="stacklayout",N="grid-layout",b="gridlayout";import{jsx as I}from"react/jsx-runtime";var A="k-grid-layout",E=[],O={},d=o=>{let{className:t,...e}=o;return I(a,{...e,className:i(t,A),children:o.children})};d.states=E;d.options=O;d.className=A;d.moduleName=N;d.folderName=b;import{jsx as j}from"react/jsx-runtime";var M="k-stack-layout",C=[],K={},s=o=>{let{className:t,...e}=o;return j(a,{...e,className:i(t,M),children:o.children})};s.states=C;s.options=K;s.className=M;s.moduleName=k;s.folderName=v;import{Fragment as D,jsx as g,jsxs as $}from"react/jsx-runtime";var p=({alignItems:o="start",justifyContent:t="start",...e})=>g(s,{orientation:"horizontal",alignItems:o,justifyContent:t,children:$(D,{children:[g("div",{className:"box",children:"Box"}),g("div",{className:"box",children:"Box"}),g("div",{className:"box",children:"Box"})]}),...e});import{Fragment as At,jsx as bt,jsxs as Mt}from"react/jsx-runtime";import{Fragment as w,jsx as c,jsxs as G}from"react/jsx-runtime";var R=a.options,P=a.states,B={...a.defaultOptions,variant:"stretch"},U=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],z=[],x=o=>{let{variant:t,modifiers:e,...n}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(h=>{h==="vertical"&&(r.orientation=e?.[h]?"vertical":"horizontal")});let l="k-border-solid k-border-secondary-subtle k-p-3",u={width:"228px",height:"228px",gap:"8px"},y=G(w,{children:[c("div",{className:"k-p-5 k-bg-primary-subtle"}),c("div",{className:"k-p-5 k-bg-primary-emphasis"}),c("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return c(p,{...n,...r,style:u,className:l,alignItems:"stretch",justifyContent:"start",children:y});case"middle":return c(p,{...n,...r,style:u,className:l,alignItems:"stretch",justifyContent:"center",children:y});case"end":return c(p,{...n,...r,style:u,className:l,alignItems:"stretch",justifyContent:"end",children:y});default:return c(p,{...n,...r,style:u,className:l,alignItems:"stretch",justifyContent:"stretch",children:y})}};x.options=R;x.states=P;x.variants=U;x.defaultOptions=B;x.modifiers=z;x.className=s.className;import{Fragment as H,jsx as m,jsxs as Y}from"react/jsx-runtime";var wt=({alignItems:o="start",justifyItems:t="start",...e})=>m(d,{alignItems:o,justifyItems:t,children:Y(H,{children:[m("div",{className:"box",children:"Box"}),m("div",{className:"box",children:"Box"}),m("div",{className:"box",children:"Box"}),m("div",{className:"box",children:"Box"}),m("div",{className:"box",children:"Box"}),m("div",{className:"box",children:"Box"})]}),...e});export{wt as GridLayoutNormal};
+var c=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((e,s)=>t[s]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var N={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as C}from"react/jsx-runtime";var _=[],O={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},f={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=f.orientation,alignItems:s=f.alignItems,justifyContent:r=f.justifyContent,justifyItems:n=f.justifyItems,wrap:i=f.wrap,style:p,...v}=o;return C("div",{...v,style:{gap:t,...p},className:c(o.className,{[`k-${N.orientationMap[e]||e}`]:e,[`k-align-items-${s}`]:s,[`k-justify-content-${r}`]:r,[`k-justify-items-${n}`]:n,"k-flex-wrap":i}),children:o.children})};a.states=_;a.options=O;a.defaultOptions=f;var b="stack-layout",A="stacklayout",S="grid-layout",M="gridlayout";import{jsx as j}from"react/jsx-runtime";var I="k-grid-layout",E=[],K={},m=o=>{let{className:t,...e}=o;return j(a,{...e,className:c(t,I),children:o.children})};m.states=E;m.options=K;m.className=I;m.moduleName=S;m.folderName=M;import{jsx as $}from"react/jsx-runtime";var T="k-stack-layout",D=[],G={},l=o=>{let{className:t,...e}=o;return $(a,{...e,className:c(t,T),children:o.children})};l.states=D;l.options=G;l.className=T;l.moduleName=b;l.folderName=A;import{Fragment as P,jsx as L,jsxs as R}from"react/jsx-runtime";var g=({alignItems:o="start",justifyContent:t="start",...e})=>L(l,{orientation:"horizontal",alignItems:o,justifyContent:t,children:R(P,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});import{Fragment as jt,jsx as Kt,jsxs as Dt}from"react/jsx-runtime";import{Fragment as Y,jsx as u,jsxs as F}from"react/jsx-runtime";var B=a.options,U=a.states,w={...a.defaultOptions,variant:"stretch"},z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],H=[],x=o=>{let{variant:t,modifiers:e,...s}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(v=>{v==="vertical"&&(r.orientation=e?.[v]?"vertical":"horizontal")});let n="k-border-solid k-border-secondary-subtle k-p-3",i={width:"228px",height:"228px",gap:"8px"},p=F(Y,{children:[u("div",{className:"k-p-5 k-bg-primary-subtle"}),u("div",{className:"k-p-5 k-bg-primary-emphasis"}),u("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"start",children:p});case"middle":return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"center",children:p});case"end":return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"end",children:p});default:return u(g,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"stretch",children:p})}};x.options=B;x.states=U;x.variants=z;x.defaultOptions=w;x.modifiers=H;x.className=l.className;import{Fragment as X,jsx as d,jsxs as Z}from"react/jsx-runtime";var q=a.options,V=a.states,W={...a.defaultOptions,variant:"stretch"},J=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],Q=[],k=o=>{let{variant:t,modifiers:e,...s}={...o},r="k-border-solid k-border-secondary-subtle k-p-3",n={width:"228px",height:"228px",gap:"8px",gridTemplateColumns:"1fr 1fr 1fr"},i=Z(X,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary-subtle"})]});switch(t){case"start":return d(h,{...s,style:n,className:r,alignItems:"start",justifyItems:"start",children:i});case"middle":return d(h,{...s,style:n,className:r,alignItems:"center",justifyItems:"center",children:i});case"end":return d(h,{...s,style:n,className:r,alignItems:"end",justifyItems:"end",children:i});default:return d(h,{...s,style:n,className:r,alignItems:"stretch",justifyItems:"stretch",children:i})}};k.options=q;k.states=V;k.variants=J;k.defaultOptions=W;k.modifiers=Q;k.className=m.className;import{Fragment as tt,jsx as y,jsxs as et}from"react/jsx-runtime";var h=({alignItems:o="start",justifyItems:t="start",...e})=>y(m,{alignItems:o,justifyItems:t,children:et(tt,{children:[y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"}),y("div",{className:"box",children:"Box"})]}),...e});export{h as GridLayoutNormal};

package/dist/esm/layout/templates/stack-layout-normal.mjs

@@ -1 +1 @@
-var i=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((e,n)=>t[n]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var g={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as T}from"react/jsx-runtime";var M=[],S={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},u={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=u.orientation,alignItems:n=u.alignItems,justifyContent:r=u.justifyContent,justifyItems:l=u.justifyItems,wrap:c=u.wrap,style:m,...p}=o;return T("div",{...p,style:{gap:t,...m},className:i(o.className,{[`k-${g.orientationMap[e]||e}`]:e,[`k-align-items-${n}`]:n,[`k-justify-content-${r}`]:r,[`k-justify-items-${l}`]:l,"k-flex-wrap":c}),children:o.children})};a.states=M;a.options=S;a.defaultOptions=u;var L="stack-layout",k="stacklayout",v="grid-layout",N="gridlayout";import{jsx as O}from"react/jsx-runtime";var b="k-grid-layout",_=[],E={},y=o=>{let{className:t,...e}=o;return O(a,{...e,className:i(t,b),children:o.children})};y.states=_;y.options=E;y.className=b;y.moduleName=v;y.folderName=N;import{jsx as K}from"react/jsx-runtime";var A="k-stack-layout",I=[],C={},s=o=>{let{className:t,...e}=o;return K(a,{...e,className:i(t,A),children:o.children})};s.states=I;s.options=C;s.className=A;s.moduleName=L;s.folderName=k;import{Fragment as gt,jsx as ht,jsxs as Lt}from"react/jsx-runtime";import{Fragment as At,jsx as bt,jsxs as Mt}from"react/jsx-runtime";import{Fragment as B,jsx as d,jsxs as U}from"react/jsx-runtime";var j=a.options,D=a.states,$={...a.defaultOptions,variant:"stretch"},R=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],P=[],f=o=>{let{variant:t,modifiers:e,...n}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(p=>{p==="vertical"&&(r.orientation=e?.[p]?"vertical":"horizontal")});let l="k-border-solid k-border-secondary-subtle k-p-3",c={width:"228px",height:"228px",gap:"8px"},m=U(B,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"start",children:m});case"middle":return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"center",children:m});case"end":return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"end",children:m});default:return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"stretch",children:m})}};f.options=j;f.states=D;f.variants=R;f.defaultOptions=$;f.modifiers=P;f.className=s.className;import{Fragment as z,jsx as h,jsxs as w}from"react/jsx-runtime";var x=({alignItems:o="start",justifyContent:t="start",...e})=>h(s,{orientation:"horizontal",alignItems:o,justifyContent:t,children:w(z,{children:[h("div",{className:"box",children:"Box"}),h("div",{className:"box",children:"Box"}),h("div",{className:"box",children:"Box"})]}),...e});export{x as StackLayoutNormal};
+var c=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((e,s)=>t[s]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var N={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as C}from"react/jsx-runtime";var _=[],O={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},f={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=f.orientation,alignItems:s=f.alignItems,justifyContent:r=f.justifyContent,justifyItems:n=f.justifyItems,wrap:i=f.wrap,style:p,...v}=o;return C("div",{...v,style:{gap:t,...p},className:c(o.className,{[`k-${N.orientationMap[e]||e}`]:e,[`k-align-items-${s}`]:s,[`k-justify-content-${r}`]:r,[`k-justify-items-${n}`]:n,"k-flex-wrap":i}),children:o.children})};a.states=_;a.options=O;a.defaultOptions=f;var b="stack-layout",A="stacklayout",S="grid-layout",M="gridlayout";import{jsx as j}from"react/jsx-runtime";var I="k-grid-layout",E=[],K={},m=o=>{let{className:t,...e}=o;return j(a,{...e,className:c(t,I),children:o.children})};m.states=E;m.options=K;m.className=I;m.moduleName=S;m.folderName=M;import{jsx as $}from"react/jsx-runtime";var T="k-stack-layout",D=[],G={},l=o=>{let{className:t,...e}=o;return $(a,{...e,className:c(t,T),children:o.children})};l.states=D;l.options=G;l.className=T;l.moduleName=b;l.folderName=A;import{Fragment as P,jsx as u,jsxs as R}from"react/jsx-runtime";var g=({alignItems:o="start",justifyItems:t="start",...e})=>u(m,{alignItems:o,justifyItems:t,children:R(P,{children:[u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"})]}),...e});import{Fragment as jt,jsx as Kt,jsxs as Dt}from"react/jsx-runtime";import{Fragment as Y,jsx as y,jsxs as F}from"react/jsx-runtime";var B=a.options,U=a.states,w={...a.defaultOptions,variant:"stretch"},z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],H=[],x=o=>{let{variant:t,modifiers:e,...s}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(v=>{v==="vertical"&&(r.orientation=e?.[v]?"vertical":"horizontal")});let n="k-border-solid k-border-secondary-subtle k-p-3",i={width:"228px",height:"228px",gap:"8px"},p=F(Y,{children:[y("div",{className:"k-p-5 k-bg-primary-subtle"}),y("div",{className:"k-p-5 k-bg-primary-emphasis"}),y("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"start",children:p});case"middle":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"center",children:p});case"end":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"end",children:p});default:return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"stretch",children:p})}};x.options=B;x.states=U;x.variants=z;x.defaultOptions=w;x.modifiers=H;x.className=l.className;import{Fragment as X,jsx as d,jsxs as Z}from"react/jsx-runtime";var q=a.options,V=a.states,W={...a.defaultOptions,variant:"stretch"},J=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],Q=[],k=o=>{let{variant:t,modifiers:e,...s}={...o},r="k-border-solid k-border-secondary-subtle k-p-3",n={width:"228px",height:"228px",gap:"8px",gridTemplateColumns:"1fr 1fr 1fr"},i=Z(X,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary-subtle"})]});switch(t){case"start":return d(g,{...s,style:n,className:r,alignItems:"start",justifyItems:"start",children:i});case"middle":return d(g,{...s,style:n,className:r,alignItems:"center",justifyItems:"center",children:i});case"end":return d(g,{...s,style:n,className:r,alignItems:"end",justifyItems:"end",children:i});default:return d(g,{...s,style:n,className:r,alignItems:"stretch",justifyItems:"stretch",children:i})}};k.options=q;k.states=V;k.variants=J;k.defaultOptions=W;k.modifiers=Q;k.className=m.className;import{Fragment as tt,jsx as L,jsxs as et}from"react/jsx-runtime";var h=({alignItems:o="start",justifyContent:t="start",...e})=>L(l,{orientation:"horizontal",alignItems:o,justifyContent:t,children:et(tt,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});export{h as StackLayoutNormal};

package/dist/esm/layout/templates/stack-layout-vertical.mjs

@@ -1 +1 @@
-var i=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((e,n)=>t[n]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var L={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as _}from"react/jsx-runtime";var S=[],T={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},u={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=u.orientation,alignItems:n=u.alignItems,justifyContent:r=u.justifyContent,justifyItems:l=u.justifyItems,wrap:c=u.wrap,style:m,...p}=o;return _("div",{...p,style:{gap:t,...m},className:i(o.className,{[`k-${L.orientationMap[e]||e}`]:e,[`k-align-items-${n}`]:n,[`k-justify-content-${r}`]:r,[`k-justify-items-${l}`]:l,"k-flex-wrap":c}),children:o.children})};a.states=S;a.options=T;a.defaultOptions=u;var k="stack-layout",v="stacklayout",N="grid-layout",b="gridlayout";import{jsx as I}from"react/jsx-runtime";var A="k-grid-layout",E=[],O={},y=o=>{let{className:t,...e}=o;return I(a,{...e,className:i(t,A),children:o.children})};y.states=E;y.options=O;y.className=A;y.moduleName=N;y.folderName=b;import{jsx as j}from"react/jsx-runtime";var M="k-stack-layout",C=[],K={},s=o=>{let{className:t,...e}=o;return j(a,{...e,className:i(t,M),children:o.children})};s.states=C;s.options=K;s.className=M;s.moduleName=k;s.folderName=v;import{Fragment as vt,jsx as kt,jsxs as Nt}from"react/jsx-runtime";import{Fragment as D,jsx as h,jsxs as $}from"react/jsx-runtime";var x=({alignItems:o="start",justifyContent:t="start",...e})=>h(s,{orientation:"horizontal",alignItems:o,justifyContent:t,children:$(D,{children:[h("div",{className:"box",children:"Box"}),h("div",{className:"box",children:"Box"}),h("div",{className:"box",children:"Box"})]}),...e});import{Fragment as w,jsx as d,jsxs as G}from"react/jsx-runtime";var R=a.options,P=a.states,B={...a.defaultOptions,variant:"stretch"},U=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],z=[],f=o=>{let{variant:t,modifiers:e,...n}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(p=>{p==="vertical"&&(r.orientation=e?.[p]?"vertical":"horizontal")});let l="k-border-solid k-border-secondary-subtle k-p-3",c={width:"228px",height:"228px",gap:"8px"},m=G(w,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"start",children:m});case"middle":return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"center",children:m});case"end":return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"end",children:m});default:return d(x,{...n,...r,style:c,className:l,alignItems:"stretch",justifyContent:"stretch",children:m})}};f.options=R;f.states=P;f.variants=U;f.defaultOptions=B;f.modifiers=z;f.className=s.className;import{Fragment as H,jsx as g,jsxs as Y}from"react/jsx-runtime";var wt=({alignItems:o="start",justifyContent:t="start",...e})=>g(s,{orientation:"vertical",alignItems:o,justifyContent:t,children:Y(H,{children:[g("div",{className:"box",children:"Box"}),g("div",{className:"box",children:"Box"}),g("div",{className:"box",children:"Box"})]}),...e});export{wt as StackLayoutVertical};
+var c=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?c(...t):typeof t=="object"?Object.keys(t).map((e,s)=>t[s]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var b={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as E}from"react/jsx-runtime";var O=[],C={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},f={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=f.orientation,alignItems:s=f.alignItems,justifyContent:r=f.justifyContent,justifyItems:n=f.justifyItems,wrap:i=f.wrap,style:p,...v}=o;return E("div",{...v,style:{gap:t,...p},className:c(o.className,{[`k-${b.orientationMap[e]||e}`]:e,[`k-align-items-${s}`]:s,[`k-justify-content-${r}`]:r,[`k-justify-items-${n}`]:n,"k-flex-wrap":i}),children:o.children})};a.states=O;a.options=C;a.defaultOptions=f;var A="stack-layout",S="stacklayout",M="grid-layout",I="gridlayout";import{jsx as D}from"react/jsx-runtime";var T="k-grid-layout",K=[],j={},m=o=>{let{className:t,...e}=o;return D(a,{...e,className:c(t,T),children:o.children})};m.states=K;m.options=j;m.className=T;m.moduleName=M;m.folderName=I;import{jsx as P}from"react/jsx-runtime";var _="k-stack-layout",G=[],$={},l=o=>{let{className:t,...e}=o;return P(a,{...e,className:c(t,_),children:o.children})};l.states=G;l.options=$;l.className=_;l.moduleName=A;l.folderName=S;import{Fragment as R,jsx as u,jsxs as B}from"react/jsx-runtime";var g=({alignItems:o="start",justifyItems:t="start",...e})=>u(m,{alignItems:o,justifyItems:t,children:B(R,{children:[u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"}),u("div",{className:"box",children:"Box"})]}),...e});import{Fragment as U,jsx as L,jsxs as w}from"react/jsx-runtime";var h=({alignItems:o="start",justifyContent:t="start",...e})=>L(l,{orientation:"horizontal",alignItems:o,justifyContent:t,children:w(U,{children:[L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"}),L("div",{className:"box",children:"Box"})]}),...e});import{Fragment as V,jsx as y,jsxs as W}from"react/jsx-runtime";var z=a.options,H=a.states,Y={...a.defaultOptions,variant:"stretch"},F=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],q=[],x=o=>{let{variant:t,modifiers:e,...s}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(v=>{v==="vertical"&&(r.orientation=e?.[v]?"vertical":"horizontal")});let n="k-border-solid k-border-secondary-subtle k-p-3",i={width:"228px",height:"228px",gap:"8px"},p=W(V,{children:[y("div",{className:"k-p-5 k-bg-primary-subtle"}),y("div",{className:"k-p-5 k-bg-primary-emphasis"}),y("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"start",children:p});case"middle":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"center",children:p});case"end":return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"end",children:p});default:return y(h,{...s,...r,style:i,className:n,alignItems:"stretch",justifyContent:"stretch",children:p})}};x.options=z;x.states=H;x.variants=F;x.defaultOptions=Y;x.modifiers=q;x.className=l.className;import{Fragment as et,jsx as d,jsxs as ot}from"react/jsx-runtime";var J=a.options,Q=a.states,X={...a.defaultOptions,variant:"stretch"},Z=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],tt=[],k=o=>{let{variant:t,modifiers:e,...s}={...o},r="k-border-solid k-border-secondary-subtle k-p-3",n={width:"228px",height:"228px",gap:"8px",gridTemplateColumns:"1fr 1fr 1fr"},i=ot(et,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary-subtle"})]});switch(t){case"start":return d(g,{...s,style:n,className:r,alignItems:"start",justifyItems:"start",children:i});case"middle":return d(g,{...s,style:n,className:r,alignItems:"center",justifyItems:"center",children:i});case"end":return d(g,{...s,style:n,className:r,alignItems:"end",justifyItems:"end",children:i});default:return d(g,{...s,style:n,className:r,alignItems:"stretch",justifyItems:"stretch",children:i})}};k.options=J;k.states=Q;k.variants=Z;k.defaultOptions=X;k.modifiers=tt;k.className=m.className;import{Fragment as at,jsx as N,jsxs as st}from"react/jsx-runtime";var re=({alignItems:o="start",justifyContent:t="start",...e})=>N(l,{orientation:"vertical",alignItems:o,justifyContent:t,children:st(at,{children:[N("div",{className:"box",children:"Box"}),N("div",{className:"box",children:"Box"}),N("div",{className:"box",children:"Box"})]}),...e});export{re as StackLayoutVertical};

package/dist/types/layout/demos/{layout.d.ts → grid-layout.d.ts}

@@ -7,7 +7,7 @@ declare const modifiers: Array<{
     name: string;
     title: string;
 }>;
-export declare const LayoutDemo: {
+export declare const GridLayoutDemo: {
     (props: KendoLayoutProps & {
         variant?: (typeof variants)[number]["name"];
     } & {
@@ -40,4 +40,4 @@ export declare const LayoutDemo: {
     }[];
     className: string;
 };
-export default LayoutDemo;
+export default GridLayoutDemo;

package/dist/types/layout/demos/stack-layout.d.ts

@@ -0,0 +1,43 @@
+import { KendoLayoutProps } from '../layout';
+declare const variants: {
+    name: string;
+    title: string;
+}[];
+declare const modifiers: Array<{
+    name: string;
+    title: string;
+}>;
+export declare const StackLayoutDemo: {
+    (props: KendoLayoutProps & {
+        variant?: (typeof variants)[number]["name"];
+    } & {
+        modifiers?: {
+            [key: (typeof modifiers)[number]["name"]]: boolean;
+        };
+    }): import("react/jsx-runtime").JSX.Element;
+    options: {
+        orientation: string[];
+        alignItems: string[];
+        justifyContent: string[];
+        justifyItems: string[];
+    };
+    states: any[];
+    variants: {
+        name: string;
+        title: string;
+    }[];
+    defaultOptions: {
+        variant: string;
+        orientation: null;
+        alignItems: null;
+        justifyContent: null;
+        justifyItems: null;
+        wrap: boolean;
+    };
+    modifiers: {
+        name: string;
+        title: string;
+    }[];
+    className: string;
+};
+export default StackLayoutDemo;

package/dist/types/layout/index.d.ts

@@ -4,4 +4,5 @@ export * from './stack-layout.spec';
 export * from './templates/grid-layout-normal';
 export * from './templates/stack-layout-normal';
 export * from './templates/stack-layout-vertical';
-export * from './demos/layout';
+export * from './demos/stack-layout';
+export * from './demos/grid-layout';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.1.1-dev.1",
+  "version": "14.1.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -62,5 +62,5 @@
     "react-dom": "^19.0.0",
     "vitest": "^4.0.18"
   },
-  "gitHead": "fce3eaf76de6baccd0e1c13eedd206cd64179f42"
+  "gitHead": "7e6facaaa79799eaccdc502e3afc4c0a0c19be0a"
 }

package/src/layout/demos/grid-layout.tsx

@@ -0,0 +1,93 @@
+import { Layout, KendoLayoutProps } from '../layout';
+import { GridLayoutNormal } from '../templates/grid-layout-normal';
+import { GridLayout } from '../grid-layout.spec';
+
+const options = Layout.options;
+const states = Layout.states;
+const defaults = {
+    ...Layout.defaultOptions,
+    variant: 'stretch',
+};
+
+const variants = [
+    {
+        name: 'start',
+        title: 'Start'
+    },
+    {
+        name: 'middle',
+        title: 'Middle'
+    },
+    {
+        name: 'end',
+        title: 'End'
+    },
+    {
+        name: 'stretch',
+        title: 'Stretch'
+    },
+];
+
+const modifiers: Array<{ name: string; title: string }> = [
+
+];
+
+export const GridLayoutDemo = (
+    props: KendoLayoutProps & { variant?: (typeof variants)[number]['name'] } & {
+        modifiers?: { [key: (typeof modifiers)[number]['name']]: boolean };
+    }
+) => {
+    const { variant, modifiers: _mods, ...other } = { ...props };
+
+    const baseStyleClasses = "k-border-solid k-border-secondary-subtle k-p-3";
+    const baseStyles = { width: "228px", height: "228px", gap: "8px", gridTemplateColumns: "1fr 1fr 1fr" };
+
+    const baseGridLayoutContent =
+        <>
+            <div className="k-p-5 k-bg-primary-subtle" />
+            <div className="k-p-5 k-bg-primary-emphasis" />
+            <div className="k-p-5 k-bg-primary" />
+            <div className="k-p-5 k-bg-primary" />
+            <div className="k-p-5 k-bg-primary-emphasis" />
+            <div className="k-p-5 k-bg-primary-subtle" />
+        </>
+    ;
+
+    switch (variant) {
+        case 'start':
+            return (
+                <GridLayoutNormal {...other} style={baseStyles} className={baseStyleClasses} alignItems="start" justifyItems="start">
+                    {baseGridLayoutContent}
+                </GridLayoutNormal>
+            );
+        case 'middle':
+            return (
+                <GridLayoutNormal {...other} style={baseStyles} className={baseStyleClasses} alignItems="center" justifyItems="center">
+                    {baseGridLayoutContent}
+                </GridLayoutNormal>
+            );
+        case 'end':
+            return (
+                <GridLayoutNormal {...other} style={baseStyles} className={baseStyleClasses} alignItems="end" justifyItems="end">
+                    {baseGridLayoutContent}
+                </GridLayoutNormal>
+            );
+        case 'stretch':
+        default:
+            return (
+                <GridLayoutNormal {...other} style={baseStyles} className={baseStyleClasses} alignItems="stretch" justifyItems="stretch">
+                    {baseGridLayoutContent}
+                </GridLayoutNormal>
+            );
+    }
+};
+
+
+GridLayoutDemo.options = options;
+GridLayoutDemo.states = states;
+GridLayoutDemo.variants = variants;
+GridLayoutDemo.defaultOptions = defaults;
+GridLayoutDemo.modifiers = modifiers;
+GridLayoutDemo.className = GridLayout.className;
+
+export default GridLayoutDemo;

package/src/layout/demos/{layout.tsx → stack-layout.tsx}

@@ -6,7 +6,7 @@ const options = Layout.options;
 const states = Layout.states;
 const defaults = {
     ...Layout.defaultOptions,
-  variant: 'stretch',
+    variant: 'stretch',
 };
 
 const variants = [
@@ -32,7 +32,7 @@ const modifiers: Array<{ name: string; title: string }> = [
 
 ];
 
-export const LayoutDemo = (
+export const StackLayoutDemo = (
     props: KendoLayoutProps & { variant?: (typeof variants)[number]['name'] } & {
         modifiers?: { [key: (typeof modifiers)[number]['name']]: boolean };
     }
@@ -89,15 +89,14 @@ export const LayoutDemo = (
                 </StackLayoutNormal>
             );
     }
-}
-
+};
 
-LayoutDemo.options = options;
-LayoutDemo.states = states;
-LayoutDemo.variants = variants;
-LayoutDemo.defaultOptions = defaults;
-LayoutDemo.modifiers = modifiers;
-LayoutDemo.className = StackLayout.className;
 
-export default LayoutDemo;
+StackLayoutDemo.options = options;
+StackLayoutDemo.states = states;
+StackLayoutDemo.variants = variants;
+StackLayoutDemo.defaultOptions = defaults;
+StackLayoutDemo.modifiers = modifiers;
+StackLayoutDemo.className = StackLayout.className;
 
+export default StackLayoutDemo;

package/src/layout/index.ts

@@ -4,4 +4,5 @@ export * from './stack-layout.spec';
 export * from './templates/grid-layout-normal';
 export * from './templates/stack-layout-normal';
 export * from './templates/stack-layout-vertical';
-export * from './demos/layout';
+export * from './demos/stack-layout';
+export * from './demos/grid-layout';

package/dist/cjs/layout/demos/layout.js

@@ -1 +0,0 @@
-var g=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var j=(o,t)=>{for(var e in t)g(o,e,{get:t[e],enumerable:!0})},D=(o,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!K.call(o,a)&&a!==e&&g(o,a,{get:()=>t[a],enumerable:!(n=I(t,a))||n.enumerable});return o};var $=o=>D(g({},"__esModule",{value:!0}),o);var W={};j(W,{LayoutDemo:()=>c,default:()=>V});module.exports=$(W);var d=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?d(...t):typeof t=="object"?Object.keys(t).map((e,n)=>t[n]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var v={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var N=require("react/jsx-runtime"),R=[],P={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},f={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},r=o=>{let{gap:t,orientation:e=f.orientation,alignItems:n=f.alignItems,justifyContent:a=f.justifyContent,justifyItems:m=f.justifyItems,wrap:u=f.wrap,style:y,...h}=o;return(0,N.jsx)("div",{...h,style:{gap:t,...y},className:d(o.className,{[`k-${v.orientationMap[e]||e}`]:e,[`k-align-items-${n}`]:n,[`k-justify-content-${a}`]:a,[`k-justify-items-${m}`]:m,"k-flex-wrap":u}),children:o.children})};r.states=R;r.options=P;r.defaultOptions=f;var b="stack-layout",A="stacklayout",M="grid-layout",S="gridlayout";var _=require("react/jsx-runtime"),T="k-grid-layout",B=[],U={},x=o=>{let{className:t,...e}=o;return(0,_.jsx)(r,{...e,className:d(t,T),children:o.children})};x.states=B;x.options=U;x.className=T;x.moduleName=M;x.folderName=S;var O=require("react/jsx-runtime"),E="k-stack-layout",z=[],w={},i=o=>{let{className:t,...e}=o;return(0,O.jsx)(r,{...e,className:d(t,E),children:o.children})};i.states=z;i.options=w;i.className=E;i.moduleName=b;i.folderName=A;var L=require("react/jsx-runtime");var k=require("react/jsx-runtime");var l=require("react/jsx-runtime"),p=({alignItems:o="start",justifyContent:t="start",...e})=>(0,l.jsx)(i,{orientation:"horizontal",alignItems:o,justifyContent:t,children:(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{className:"box",children:"Box"}),(0,l.jsx)("div",{className:"box",children:"Box"}),(0,l.jsx)("div",{className:"box",children:"Box"})]}),...e});var s=require("react/jsx-runtime"),G=r.options,H=r.states,Y={...r.defaultOptions,variant:"stretch"},F=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],q=[],c=o=>{let{variant:t,modifiers:e,...n}={...o},a={orientation:"vertical"};Object.keys(e||{}).forEach(h=>{h==="vertical"&&(a.orientation=e!=null&&e[h]?"vertical":"horizontal")});let m="k-border-solid k-border-secondary-subtle k-p-3",u={width:"228px",height:"228px",gap:"8px"},y=(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"k-p-5 k-bg-primary-subtle"}),(0,s.jsx)("div",{className:"k-p-5 k-bg-primary-emphasis"}),(0,s.jsx)("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return(0,s.jsx)(p,{...n,...a,style:u,className:m,alignItems:"stretch",justifyContent:"start",children:y});case"middle":return(0,s.jsx)(p,{...n,...a,style:u,className:m,alignItems:"stretch",justifyContent:"center",children:y});case"end":return(0,s.jsx)(p,{...n,...a,style:u,className:m,alignItems:"stretch",justifyContent:"end",children:y});default:return(0,s.jsx)(p,{...n,...a,style:u,className:m,alignItems:"stretch",justifyContent:"stretch",children:y})}};c.options=G;c.states=H;c.variants=F;c.defaultOptions=Y;c.modifiers=q;c.className=i.className;var V=c;

package/dist/esm/layout/demos/layout.mjs

@@ -1 +0,0 @@
-var i=(...o)=>o.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?i(...t):typeof t=="object"?Object.keys(t).map((e,n)=>t[n]||t[e]&&e||null).filter(e=>e!==null).join(" "):t).filter(t=>!!t).join(" ");var g={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};import{jsx as T}from"react/jsx-runtime";var M=[],S={orientation:["horizontal","vertical"],alignItems:["start","center","end","stretch"],justifyContent:["start","center","end","stretch"],justifyItems:["start","center","end","stretch"]},y={orientation:null,alignItems:null,justifyContent:null,justifyItems:null,wrap:!1},a=o=>{let{gap:t,orientation:e=y.orientation,alignItems:n=y.alignItems,justifyContent:r=y.justifyContent,justifyItems:l=y.justifyItems,wrap:m=y.wrap,style:u,...p}=o;return T("div",{...p,style:{gap:t,...u},className:i(o.className,{[`k-${g.orientationMap[e]||e}`]:e,[`k-align-items-${n}`]:n,[`k-justify-content-${r}`]:r,[`k-justify-items-${l}`]:l,"k-flex-wrap":m}),children:o.children})};a.states=M;a.options=S;a.defaultOptions=y;var L="stack-layout",k="stacklayout",v="grid-layout",N="gridlayout";import{jsx as O}from"react/jsx-runtime";var b="k-grid-layout",_=[],E={},f=o=>{let{className:t,...e}=o;return O(a,{...e,className:i(t,b),children:o.children})};f.states=_;f.options=E;f.className=b;f.moduleName=v;f.folderName=N;import{jsx as K}from"react/jsx-runtime";var A="k-stack-layout",I=[],C={},s=o=>{let{className:t,...e}=o;return K(a,{...e,className:i(t,A),children:o.children})};s.states=I;s.options=C;s.className=A;s.moduleName=L;s.folderName=k;import{Fragment as gt,jsx as ht,jsxs as Lt}from"react/jsx-runtime";import{Fragment as At,jsx as bt,jsxs as Mt}from"react/jsx-runtime";import{Fragment as j,jsx as h,jsxs as D}from"react/jsx-runtime";var x=({alignItems:o="start",justifyContent:t="start",...e})=>h(s,{orientation:"horizontal",alignItems:o,justifyContent:t,children:D(j,{children:[h("div",{className:"box",children:"Box"}),h("div",{className:"box",children:"Box"}),h("div",{className:"box",children:"Box"})]}),...e});import{Fragment as z,jsx as d,jsxs as w}from"react/jsx-runtime";var $=a.options,R=a.states,P={...a.defaultOptions,variant:"stretch"},B=[{name:"start",title:"Start"},{name:"middle",title:"Middle"},{name:"end",title:"End"},{name:"stretch",title:"Stretch"}],U=[],c=o=>{let{variant:t,modifiers:e,...n}={...o},r={orientation:"vertical"};Object.keys(e||{}).forEach(p=>{p==="vertical"&&(r.orientation=e?.[p]?"vertical":"horizontal")});let l="k-border-solid k-border-secondary-subtle k-p-3",m={width:"228px",height:"228px",gap:"8px"},u=w(z,{children:[d("div",{className:"k-p-5 k-bg-primary-subtle"}),d("div",{className:"k-p-5 k-bg-primary-emphasis"}),d("div",{className:"k-p-5 k-bg-primary"})]});switch(t){case"start":return d(x,{...n,...r,style:m,className:l,alignItems:"stretch",justifyContent:"start",children:u});case"middle":return d(x,{...n,...r,style:m,className:l,alignItems:"stretch",justifyContent:"center",children:u});case"end":return d(x,{...n,...r,style:m,className:l,alignItems:"stretch",justifyContent:"end",children:u});default:return d(x,{...n,...r,style:m,className:l,alignItems:"stretch",justifyContent:"stretch",children:u})}};c.options=$;c.states=R;c.variants=B;c.defaultOptions=P;c.modifiers=U;c.className=s.className;var wt=c;export{c as LayoutDemo,wt as default};