@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 21.2 kB
JavaScript
var r=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?r(...t):typeof t=="object"?Object.keys(t).map((o,n)=>t[n]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var B=(e,t)=>r({[`${e}-xs`]:t.size==="xsmall",[`${e}-sm`]:t.size==="small",[`${e}-md`]:t.size==="medium",[`${e}-lg`]:t.size==="large",[`${e}-xl`]:t.size==="xlarge",[`${e}-xxl`]:t.size==="xxlarge",[`${e}-xxxl`]:t.size==="xxxlarge"},{[`${e}-${t.fillMode}`]:t.fillMode},{[`${e}-${t.themeColor}`]:t.themeColor},{"k-rounded-sm":t.rounded==="small","k-rounded-md":t.rounded==="medium","k-rounded-lg":t.rounded==="large","k-rounded-full":t.rounded==="full","k-rounded-none":t.rounded==="none"}),y=(e,t)=>{let{valid:o,invalid:n,hover:s,focus:m,checked:c,active:d,selected:M,disabled:k,indeterminate:A,loading:se,empty:O,readonly:ie,highlighted:he,...I}=t;return r({"k-valid":o,"k-invalid":n,"k-hover":s,"k-focus":m,"k-checked":c,"k-active":d,"k-selected":M,"k-disabled":k,"k-indeterminate":A&&!c,"k-loading":se,"k-empty":O,"k-readonly":ie,"k-highlighted":he},Object.keys(I).reduce((b,R)=>(R.startsWith("k-")?b[R]=I[R]:b[`k-${R}`]=I[R],b),{}))};function De(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(n=>[`k-${n}`,!0]))}var l={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},_={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},K={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},v={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},a={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},p={open:"open",hover:"hover",focus:"focus",active:"active",selected:"selected",disabled:"disabled",valid:"valid",invalid:"invalid",loading:"loading",required:"required",empty:"empty",indeterminate:"indeterminate",checked:"checked",readonly:"readonly",highlighted:"highlighted",generating:"generating",expanded:"expanded"},Ie={calloutMap:{top:"n",bottom:"s",left:"w",right:"e"},orientationMap:{vertical:"vstack",horizontal:"hstack"}};var Ce={};function xe(e){return Ce[e]=(Ce[e]||0)+1,`k-${e}-${Ce[e]}`}var w="tile-layout",z="tilelayout";import{jsx as Tt}from"react/jsx-runtime";var we="k-tilelayout",Nt=[],bt={},yt={},C=e=>{let{gap:t,columns:o,columnWidth:n,rowHeight:s,style:m,children:c}=e,d={gridTemplateColumns:`repeat(${o}, minmax(0px, ${n}))`,gridAutoRows:`minmax(0px, ${s})`,gap:t,...m};return Tt("div",{className:r(e.className,we),style:d,role:"list",children:c})};C.states=Nt;C.options=bt;C.className=we;C.defaultOptions=yt;C.moduleName=w;C.folderName=z;C.ariaSpec={selector:".k-tilelayout",rules:[{selector:".k-tilelayout",attribute:"role=list",usage:"Sets list role to the TileLayout wrapper."},{selector:".k-tilelayout-item",attribute:"role=listitem",usage:"Sets listitem role to the TileLayout items."},{selector:".k-tilelayout-item",attribute:"aria-labelledby",usage:"Associates the focusable item wrapper with the respective header text element."},{selector:".k-tilelayout-item",attribute:"tabindex=0",usage:"Makes the item wrapper element focusable."},{selector:".k-tilelayout-item",attribute:"aria-keyshortcuts=Enter",usage:"Announces Enter as an available key shortcut when the item is focused."},{selector:".k-tilelayout-item-header .k-card-title",attribute:"id",usage:"Unique identifier to link the header text element to the focusable wrapper."}]};import Po from"react";import{jsx as vt}from"react/jsx-runtime";var At="k-card-callout",ze=e=>{let{callout:t,...o}=e;return vt("span",{...o,className:r(e.className,At,{[`k-callout-${Ie.calloutMap[t]||t}`]:t})})};var N="card",T=N;import{Fragment as Mt,jsx as Pe,jsxs as Et}from"react/jsx-runtime";var Ne="k-card",gt=[p.hover,p.focus,p.selected,p.disabled],Lt={},kt={},u=e=>{let{orientation:t,callout:o,hover:n,focus:s,selected:m,disabled:c,...d}=e;return Et("div",{...d,className:r(e.className,Ne,y(Ne,{hover:n,focus:s,disabled:c,selected:m}),{[`k-card-${t}`]:t,"k-card-with-callout":o}),children:[o&&o!=="true"&&Pe(ze,{callout:o}),Pe(Mt,{children:e.children})]})};u.states=gt;u.options=Lt;u.className=Ne;u.defaultOptions=kt;u.moduleName=N;u.folderName=T;u.ariaSpec={selector:".k-card",rules:[{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"When the card is located in a list, it should have the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card component is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to the title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the bound Enter key that enables navigation inside the card."}]};import{Fragment as Bt,jsx as Ue}from"react/jsx-runtime";var be="k-card-list",St=[],Ot={},Rt={},E=e=>{let{...t}=e;return Ue("div",{...t,className:r(e.className,be,y(be,{})),role:"list",children:Ue(Bt,{children:e.children})})};E.states=St;E.options=Ot;E.className=be;E.defaultOptions=Rt;E.moduleName=N;E.folderName=T;E.ariaSpec={selector:".k-card-list",rules:[{selector:".k-card-list",attribute:"role=list",usage:"The card list container announces its list role."},{selector:".k-card-list .k-card",attribute:"role=listitem",usage:"Each card in the list has the listitem role."},{selector:".k-card-list .k-card",attribute:"tabindex=0",usage:"The card is focusable when navigatable."},{selector:".k-card-list .k-card",attribute:"aria-describedby=.k-card-title id",usage:"Associate the card to its title element."},{selector:".k-card-list .k-card",attribute:"aria-keyshortcuts=Enter",usage:"Announces the Enter key for navigation inside the card."}]};import{jsx as Dt}from"react/jsx-runtime";var Fe="k-card-group",_t=[],Kt={},Ht={},P=e=>{let{...t}=e;return Dt("div",{...t,className:r(e.className,Fe),children:e.children})};P.states=_t;P.options=Kt;P.className=Fe;P.defaultOptions=Ht;P.moduleName=N;P.folderName=T;import{jsx as Pt}from"react/jsx-runtime";var ye="k-card-wrap",It=[p.focus,p.selected],wt={},zt={},U=e=>{let{focus:t,selected:o,...n}=e;return Pt("div",{...n,className:r(e.className,ye,y(ye,{focus:t,selected:o})),children:e.children})};U.states=It;U.options=wt;U.className=ye;U.defaultOptions=zt;U.moduleName=N;U.folderName=T;import{jsx as Ft}from"react/jsx-runtime";var Te="k-card-title",Ut=[p.hover,p.focus],H=e=>{let{hover:t,focus:o,...n}=e;return Ft("div",{...n,className:r(e.className,Te,y(Te,{hover:t,focus:o})),children:e.children})};H.states=Ut;H.className=Te;import{jsx as Wt}from"react/jsx-runtime";var $t="k-card-subtitle",de=e=>{let{...t}=e;return Wt("div",{...t,className:r(e.className,$t),children:e.children})};import{Fragment as We,jsx as ce}from"react/jsx-runtime";var $e="k-card-media",Ae=e=>{let{src:t,...o}=e;return ce(We,{children:t?ce("img",{...o,className:r(e.className,$e),src:t}):ce("span",{...o,className:r(e.className,$e),children:ce(We,{children:e.children})})})};import{Fragment as qt,jsx as Ve}from"react/jsx-runtime";var ve="k-font-icon",Vt=[],Gt={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info]},Yt={},X=e=>{let{size:t,themeColor:o,icon:n,rotate:s,flip:m,...c}=e;return n?Ve("span",{...c,className:r(e.className,ve,B(ve,{size:t}),{[`k-i-${n}`]:n,[`k-color-${o}`]:o,[`k-rotate-${s}`]:s,"k-flip-h":m==="h"||m==="both","k-flip-v":m==="v"||m==="both"}),"aria-hidden":"true"}):Ve(qt,{})};X.states=Vt;X.options=Gt;X.className=ve;X.defaultOptions=Yt;var Ge=X;import{Fragment as Qt,jsx as me}from"react/jsx-runtime";var ge="k-svg-icon",Jt=[],Xt={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[v.outline,v.solid,v.duotone]},Le={viewBox:"0 0 24 24",variant:v.outline},Q=e=>{let{size:t,themeColor:o,rotate:n,flip:s,viewBox:m=Le.viewBox,variant:c=Le.variant,icon:d,...M}=e;if(!d)return me(Qt,{});if(d==="none")return me("span",{...M,className:r(e.className,ge,B("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let k=typeof d=="object"&&d.name&&d.name,A=typeof d=="object"?c&&d.variants?.[c]||d.variants?.outline||d.content:void 0;return me("span",{...M,className:r(e.className,ge,B("k-icon",{size:t}),{[`k-svg-i-${k}`]:k,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":s==="h"||s==="both","k-flip-v":s==="v"||s==="both"}),"aria-hidden":"true",children:me("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof d=="object"?d.viewBox:m,dangerouslySetInnerHTML:A!==void 0?{__html:A}:void 0,children:d?void 0:e.children})})};Q.states=Jt;Q.options=Xt;Q.className=ge;Q.defaultOptions=Le;var ke=Q;import*as Me from"@progress/kendo-svg-icons";var Ye="icon",qe="icons";import{useContext as jt}from"react";import{createContext as Zt}from"react";var Je=Zt({iconsType:"svg"});import{Fragment as Xe,jsx as Z}from"react/jsx-runtime";var pe="k-icon",eo=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),to=[],oo={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info],variant:[v.outline,v.solid,v.duotone]},ue={viewBox:"0 0 24 24",type:"svg",variant:v.outline},g=e=>{let{iconsType:t}=jt(Je),{size:o,themeColor:n,icon:s,type:m=t||ue.type,rotate:c,flip:d,viewBox:M=ue.viewBox,variant:k=ue.variant,...A}=e;if(!s)return Z(Xe,{});if((t||m)==="svg"){if(s==="none")return Z(ke,{...A,className:r(e.className,pe),icon:s,size:o,variant:k});let O=Me[s]?s:eo(`${s}-icon`);return Me[O]?Z(ke,{...A,className:r(e.className,pe),icon:Me[O],size:o,themeColor:n,rotate:c,flip:d,viewBox:M,variant:k}):Z(Xe,{})}return Z(Ge,{...A,className:r(e.className,pe),icon:s,size:o,themeColor:n,rotate:c,flip:d})};g.states=to;g.options=oo;g.defaultOptions=ue;g.className=pe;g.moduleName=Ye;g.folderName=qe;g.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var Ee="button",Qe=Ee;import{Fragment as Ze,jsx as F,jsxs as je}from"react/jsx-runtime";var j="k-button",ro=["icon-button"],ao=[p.hover,p.focus,p.active,p.selected,p.disabled,p.generating],no={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[_.undefined,_.none,_.small,_.medium,_.large,_.full],fillMode:[K.undefined,K.solid,K.flat,K.outline,K.clear,K.link],themeColor:[a.undefined,a.base,a.primary,a.secondary,a.tertiary,a.success,a.warning,a.error,a.info,a.inverse]},Se={showArrow:!1,arrowIconName:"chevron-down"},i=e=>{let{as:t="button",size:o,rounded:n,fillMode:s,themeColor:m,showArrow:c=Se.showArrow,arrowIconName:d=Se.arrowIconName,variant:M,hover:k,focus:A,active:se,selected:O,disabled:ie,togglable:he,ariaDisabled:I,icon:b,iconSize:R,text:le,iconClassName:ut,className:ft,...ht}=e,Ct=b!=null,xt=e.children!==void 0;return je(t,{className:r(ft,j,De(j,M),B(j,{size:o,rounded:n,fillMode:s,themeColor:m}),y(j,{hover:k,focus:A,active:se,disabled:ie||I,selected:O}),{"k-icon-button":!le&&!xt&&Ct}),"aria-pressed":he?O?"true":"false":void 0,...ht,"aria-disabled":I?"true":void 0,disabled:ie||void 0,children:[typeof b=="string"&&b&&F(g,{className:r(ut,"k-button-icon"),icon:b,size:R}),b&&typeof b!="string"&&F(Ze,{children:b}),le?je(Ze,{children:[le&&F("span",{className:"k-button-text",children:le}),e.children]}):e.children&&F("span",{className:"k-button-text",children:e.children}),c&&F("span",{className:"k-menu-button-arrow k-button-arrow",children:F(g,{icon:d})})]})};i.states=ao;i.options=no;i.variants=ro;i.className=j;i.defaultOptions=Se;i.moduleName=Ee;i.folderName=Qe;i.ariaSpec={selector:".k-button",rules:[{selector:".k-button",attribute:"role=button or nodeName=button",usage:"The button role is implicit from the native <button> element."},{selector:".k-button",attribute:"aria-label (when icon-only)",usage:"Required for icon-only buttons that have no visible text."},{selector:".k-button",attribute:"aria-pressed (when togglable)",usage:"Indicates the pressed state of a toggle button."},{selector:".k-button",attribute:"disabled (when disabled)",usage:"Rendered when the button is disabled."}]};import{jsx as so}from"react/jsx-runtime";var et=e=>so(i,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as io}from"react/jsx-runtime";var tt=e=>io(i,{icon:"folder",children:"Button",...e});import{jsx as lo}from"react/jsx-runtime";var ot=e=>lo(i,{children:"Button",...e});import{jsx as Oe}from"react/jsx-runtime";var co=i.options,mo=i.states,po={...i.defaultOptions,variant:"text"},uo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],fo=[],$=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Oe(et,{...o,icon:"star"});case"icon-and-text":return Oe(tt,{...o,icon:"star",children:"Button"});default:return Oe(ot,{...o,children:"Button"})}};$.options=co;$.states=mo;$.variants=uo;$.defaultOptions=po;$.modifiers=fo;$.className=i.className;import{Fragment as Co,jsx as ee,jsxs as xo}from"react/jsx-runtime";var ho="k-card-header",S=e=>{let{title:t,subtitle:o,details:n,...s}=e;return xo("div",{...s,className:r(e.className,ho),children:[t&&ee(H,{children:t}),o&&ee(de,{children:o}),ee(Co,{children:e.children}),n&&ee("span",{className:"k-card-header-actions",children:ee(i,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as bo}from"react/jsx-runtime";var No="k-card-footer",Re=e=>{let{...t}=e;return bo("div",{...t,className:r(e.className,No),children:e.children})};import{Fragment as To,jsx as te,jsxs as Ao}from"react/jsx-runtime";var yo="k-card-body",L=e=>{let{title:t,subtitle:o,details:n,...s}=e;return Ao("div",{...s,className:r(e.className,yo),children:[t&&te(H,{children:t}),o&&te(de,{children:o}),te(To,{children:e.children}),n&&te("span",{className:"k-card-header-actions",children:te(i,{className:"k-card-details",icon:"more-vertical",fillMode:"flat","aria-label":"Card details"})})]})};import{jsx as ko}from"react/jsx-runtime";var rt="k-card-deck",vo=[],go={},Lo={},W=e=>{let{...t}=e;return ko("div",{...t,className:r(e.className,rt),children:e.children})};W.states=vo;W.options=go;W.className=rt;W.defaultOptions=Lo;W.moduleName=N;W.folderName=T;import{jsx as Oo}from"react/jsx-runtime";var at="k-card-deck-scrollwrap",Mo=[],Eo={},So={},V=e=>{let{...t}=e;return Oo("div",{...t,className:r(e.className,at),children:e.children})};V.states=Mo;V.options=Eo;V.className=at;V.defaultOptions=So;V.moduleName=N;V.folderName=T;var Be="action-buttons",nt=Be;import{jsx as _o}from"react/jsx-runtime";var fe="k-actions",Ro=[],Bo={},_e={alignment:"start",orientation:"horizontal"},x=e=>{let{alignment:t=_e.alignment,orientation:o=_e.orientation,...n}=e;return _o("div",{...n,className:r(fe,{[`${fe}-${t}`]:t,[`${fe}-${o}`]:o},e.className),children:e.children})};x.states=Ro;x.options=Bo;x.className=fe;x.defaultOptions=_e;x.moduleName=Be;x.folderName=nt;import{Fragment as Ko,jsx as G,jsxs as st}from"react/jsx-runtime";var it=e=>G(u,{orientation:"vertical",children:st(Ko,{children:[G(S,{children:"Card Header"}),G(L,{children:G("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),st(x,{className:"k-card-actions",children:[G(i,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),G(i,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{Fragment as Ho,jsx as oe,jsxs as lt}from"react/jsx-runtime";var dt=e=>oe(u,{orientation:"horizontal",children:lt(Ho,{children:[oe(L,{title:"Card Title",children:oe("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),lt(x,{orientation:"vertical",className:"k-card-actions",children:[oe(i,{fillMode:"flat",themeColor:"primary",children:"Action 1"}),oe(i,{fillMode:"flat",themeColor:"primary",children:"Action 2"})]})]}),...e});import{jsx as Kn,jsxs as Hn}from"react/jsx-runtime";import{jsx as h,jsxs as re}from"react/jsx-runtime";var Do=u.options,Io=u.states,ct={...u.defaultOptions,variant:"vertical"},wo=[{name:"vertical",title:"Vertical"},{name:"horizontal",title:"Horizontal"}],zo=[{name:"media",title:"Card with Media"},{name:"header",title:"Card with Header"},{name:"footer",title:"Card with Footer"}],Y=e=>{let{variant:t,modifiers:o,...n}={...ct,...e},s=!1,m=!1,c=!1;return Object.keys(o||{}).forEach(d=>{switch(d){case"media":{s=!!o?.[d];break}case"header":{m=!!o?.[d];break}case"footer":{c=!!o?.[d];break}}}),t==="horizontal"?re(dt,{style:{maxWidth:"420px"},...n,children:[s&&h(Ae,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),re("div",{children:[m&&h(S,{title:"Header Title",subtitle:"Header Subtitle"}),h(L,{title:"Title",subtitle:"Subtitle",children:h("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),c&&h(Re,{children:"Card Footer"})]}),(m||c)&&h("span",{className:"k-separator k-separator-vertical"}),re(x,{orientation:"vertical",alignment:"stretched",className:"k-card-actions",children:[h(i,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(i,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]}):re(it,{style:{maxHeight:"450px",width:"300px"},...n,children:[m&&h(S,{title:"Header Title",subtitle:"Header Subtitle"}),s&&h(Ae,{src:"https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg"}),h(L,{title:"Title",subtitle:"Subtitle",children:h("p",{children:"Some quick example text to build on the card title and make up the bulk of the card's content."})}),c&&h(Re,{children:"Card Footer"}),re(x,{className:"k-card-actions",children:[h(i,{fillMode:"flat",themeColor:"primary",children:"Button"}),h(i,{fillMode:"flat",themeColor:"primary",children:"Button"})]})]})};Y.options=Do;Y.states=Io;Y.variants=wo;Y.defaultOptions=ct;Y.modifiers=zo;Y.className=u.className;import{jsx as ae,jsxs as Wo}from"react/jsx-runtime";var Ke="k-tilelayout-item",Uo=[p.focus],Fo={},$o={},f=e=>{let{header:t,body:o,focus:n,resize:s,style:m}=e,c=xe("tilelayout-title");return Wo(u,{className:r(e.className,Ke,y(Ke,{focus:n}),{"k-resize":s===!0,"k-resize-x":s==="horizontal","k-resize-y":s==="vertical"}),style:m,role:"listitem","aria-labelledby":c,tabIndex:0,"aria-keyshortcuts":"Enter",children:[t&&Po.isValidElement(t)?ae(S,{className:"k-tilelayout-item-header k-cursor-move",children:ae("div",{className:"k-card-title",id:c,children:t})}):ae(S,{className:"k-tilelayout-item-header k-cursor-move",children:ae("div",{className:"k-card-title",id:c,children:t})}),o&&ae(L,{className:"k-tilelayout-item-body",children:o})]})};f.states=Uo;f.options=Fo;f.className=Ke;f.defaultOptions=$o;f.moduleName=w;f.folderName=z;import{jsx as qo}from"react/jsx-runtime";var mt="k-layout-item-hint",Vo=[],Go={},Yo={},q=e=>{let{style:t}=e;return qo("div",{className:mt,style:t})};q.states=Vo;q.options=Go;q.className=mt;q.defaultOptions=Yo;q.moduleName=w;q.folderName=z;import{jsx as D,jsxs as pt}from"react/jsx-runtime";var Jo=C.options,Xo=C.states,Qo={...C.defaultOptions,variant:"normal"},Zo=[{name:"normal",title:"Normal"},{name:"resizable",title:"Resizable"}],jo=[],J=e=>{let{variant:t,...o}=e;return t==="resizable"?pt(He,{columns:2,columnWidth:"1fr",rowHeight:"1fr",gap:"4px",style:{width:"467px",height:"365px"},...o,children:[D(f,{resize:"vertical",header:"Title",body:"Vertically resizable card",style:{order:"0",gridColumnEnd:"span 1",gridRowEnd:"span 2"}}),D(f,{resize:"horizontal",header:"Title",body:"Horizontally resizable card",style:{order:"1",gridColumnEnd:"span 1",gridRowEnd:"span 1"}}),D(f,{resize:!0,header:"Title",body:"Horizontally and Vertically resizable card",style:{order:"2",gridColumnEnd:"span 0",gridRowEnd:"span 0"}})]}):pt(He,{columns:3,columnWidth:"1fr",rowHeight:"1fr",gap:"4px",style:{width:"467px",height:"365px"},...o,children:[D(f,{header:"Title",body:"Card Content",style:{order:"0",gridColumnEnd:"span 2",gridRowEnd:"span 1",width:"100%",height:"100%"}}),D(f,{header:"Title",body:"Card Content",style:{order:"1",gridColumnEnd:"span 1",gridRowEnd:"span 2",width:"100%",height:"100%"}}),D(f,{header:"Title",body:"Card Content",style:{order:"3",gridColumnEnd:"span 1",gridRowEnd:"span 1",width:"100%",height:"100%"}}),D(f,{header:"Title",body:"Card Content",style:{order:"4",gridColumnEnd:"span 1",gridRowEnd:"span 1",width:"100%",height:"100%"}})]})};J.options=Jo;J.states=Xo;J.variants=Zo;J.defaultOptions=Qo;J.modifiers=jo;J.className=C.className;import{Fragment as er,jsx as ne,jsxs as tr}from"react/jsx-runtime";var He=e=>ne(C,{children:tr(er,{children:[ne(f,{header:"Title goes here",body:"Content goes here"}),ne(f,{header:"Title goes here",body:"Content goes here"}),ne(f,{header:"Title goes here",body:"Content goes here"}),ne(f,{header:"Title goes here",body:"Content goes here"})]}),...e});export{He as TileLayoutNormal};