@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 24.8 kB
JavaScript
var n=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?n(...t):typeof t=="object"?Object.keys(t).map((o,a)=>t[a]||t[o]&&o||null).filter(o=>o!==null).join(" "):t).filter(t=>!!t).join(" ");var D=(e,t)=>n({[`${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"}),E=(e,t)=>{let{valid:o,invalid:a,hover:r,focus:i,checked:d,active:c,selected:v,disabled:y,indeterminate:f,loading:K,empty:N,readonly:T,highlighted:I,...O}=t;return n({"k-valid":o,"k-invalid":a,"k-hover":r,"k-focus":i,"k-checked":d,"k-active":c,"k-selected":v,"k-disabled":y,"k-indeterminate":f&&!d,"k-loading":K,"k-empty":N,"k-readonly":T,"k-highlighted":I},Object.keys(O).reduce((S,R)=>(R.startsWith("k-")?S[R]=O[R]:S[`k-${R}`]=O[R],S),{}))};function Ke(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!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"},F={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},A={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},s={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},u={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"};var ge="wizard",Ie=ge;import{jsx as ct}from"react/jsx-runtime";var te="k-wizard",pt=[u.disabled],dt={},xe={orientation:"horizontal",contentPosition:"right"},k=e=>{let{disabled:t,orientation:o=xe.orientation,contentPosition:a=xe.contentPosition,...r}=e;return ct("div",{...r,className:n(e.className,te,E(te,{disabled:t}),{[`${te}-${o}`]:o,[`${te}-${a}`]:a&&o!=="horizontal"}),children:e.children})};k.states=pt;k.options=dt;k.className=te;k.defaultOptions=xe;k.moduleName=ge;k.folderName=Ie;k.ariaSpec={selector:".k-wizard",rules:[{selector:".k-step-list",attribute:"role=tablist",usage:"Indicates the role of the tablist container element."},{selector:".k-step",attribute:"role=none",usage:"The implicit semantics of the li element must be removed."},{selector:".k-step-link",attribute:"role=tab",usage:"Specifies the role for the step links."},{selector:".k-step-link",attribute:"aria-controls=.k-wizard-step id (when present)",usage:"Refers to the tabpanel element associated with the tab."},{selector:".k-step.k-disabled>.k-step-link",attribute:"aria-disabled=true",usage:"A disabled (inactive) tab."},{selector:".k-step-current .k-step-link",attribute:"aria-selected=true",usage:"Indicates the tab control is activated."},{selector:".k-step-current .k-step-link",attribute:"aria-current=true",usage:"Indicates the current active step."},{selector:".k-step-current .k-step-link",attribute:"tabindex=0",usage:"Current step is in the page tab sequence."},{selector:".k-step:not(.k-step-current) .k-step-link",attribute:"tabindex=-1",usage:"Non-current steps are removed from tab sequence."},{selector:".k-wizard-step",attribute:"role=tabpanel",usage:"Specifies the role of the element."},{selector:".k-wizard-step",attribute:"aria-label",usage:'Specifies a label for the panel (e.g., "Step 2 of 4").'},{selector:".k-wizard-step",attribute:"tabindex=0",usage:"Keeps the tabpanel in the page tab sequence."}]};import{Fragment as bt,jsx as _e}from"react/jsx-runtime";var he="k-font-icon",mt=[],ut={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info]},ft={},oe=e=>{let{size:t,themeColor:o,icon:a,rotate:r,flip:i,...d}=e;return a?_e("span",{...d,className:n(e.className,he,D(he,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true"}):_e(bt,{})};oe.states=mt;oe.options=ut;oe.className=he;oe.defaultOptions=ft;var He=oe;import{Fragment as ht,jsx as ie}from"react/jsx-runtime";var Se="k-svg-icon",gt=[],xt={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info],variant:[A.outline,A.solid,A.duotone]},ke={viewBox:"0 0 24 24",variant:A.outline},re=e=>{let{size:t,themeColor:o,rotate:a,flip:r,viewBox:i=ke.viewBox,variant:d=ke.variant,icon:c,...v}=e;if(!c)return ie(ht,{});if(c==="none")return ie("span",{...v,className:n(e.className,Se,D("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let y=typeof c=="object"&&c.name&&c.name,f=typeof c=="object"?d&&c.variants?.[d]||c.variants?.outline||c.content:void 0;return ie("span",{...v,className:n(e.className,Se,D("k-icon",{size:t}),{[`k-svg-i-${y}`]:y,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":r==="h"||r==="both","k-flip-v":r==="v"||r==="both"}),"aria-hidden":"true",children:ie("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof c=="object"?c.viewBox:i,dangerouslySetInnerHTML:f!==void 0?{__html:f}:void 0,children:c?void 0:e.children})})};re.states=gt;re.options=xt;re.className=Se;re.defaultOptions=ke;var ve=re;import*as ye from"@progress/kendo-svg-icons";var De="icon",$e="icons";import{useContext as kt}from"react";import{createContext as St}from"react";var Fe=St({iconsType:"svg"});import{Fragment as Ue,jsx as ae}from"react/jsx-runtime";var le="k-icon",vt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),yt=[],Nt={size:[l.undefined,l.xsmall,l.small,l.medium,l.large,l.xlarge,l.xxlarge,l.xxxlarge],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info],variant:[A.outline,A.solid,A.duotone]},pe={viewBox:"0 0 24 24",type:"svg",variant:A.outline},z=e=>{let{iconsType:t}=kt(Fe),{size:o,themeColor:a,icon:r,type:i=t||pe.type,rotate:d,flip:c,viewBox:v=pe.viewBox,variant:y=pe.variant,...f}=e;if(!r)return ae(Ue,{});if((t||i)==="svg"){if(r==="none")return ae(ve,{...f,className:n(e.className,le),icon:r,size:o,variant:y});let N=ye[r]?r:vt(`${r}-icon`);return ye[N]?ae(ve,{...f,className:n(e.className,le),icon:ye[N],size:o,themeColor:a,rotate:d,flip:c,viewBox:v,variant:y}):ae(Ue,{})}return ae(He,{...f,className:n(e.className,le),icon:r,size:o,themeColor:a,rotate:d,flip:c})};z.states=yt;z.options=Nt;z.defaultOptions=pe;z.className=le;z.moduleName=De;z.folderName=$e;z.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 Ne="button",Ve=Ne;import{Fragment as qe,jsx as J,jsxs as Ge}from"react/jsx-runtime";var se="k-button",zt=["icon-button"],Ct=[u.hover,u.focus,u.active,u.selected,u.disabled,u.generating],wt={size:[l.undefined,l.xsmall,l.small,l.medium,l.large],rounded:[$.undefined,$.none,$.small,$.medium,$.large,$.full],fillMode:[F.undefined,F.solid,F.flat,F.outline,F.clear,F.link],themeColor:[s.undefined,s.base,s.primary,s.secondary,s.tertiary,s.success,s.warning,s.error,s.info,s.inverse]},ze={showArrow:!1,arrowIconName:"chevron-down"},b=e=>{let{as:t="button",size:o,rounded:a,fillMode:r,themeColor:i,showArrow:d=ze.showArrow,arrowIconName:c=ze.arrowIconName,variant:v,hover:y,focus:f,active:K,selected:N,disabled:T,togglable:I,ariaDisabled:O,icon:S,iconSize:R,text:Z,iconClassName:ue,className:fe,...be}=e,it=S!=null,lt=e.children!==void 0;return Ge(t,{className:n(fe,se,Ke(se,v),D(se,{size:o,rounded:a,fillMode:r,themeColor:i}),E(se,{hover:y,focus:f,active:K,disabled:T||O,selected:N}),{"k-icon-button":!Z&&!lt&&it}),"aria-pressed":I?N?"true":"false":void 0,...be,"aria-disabled":O?"true":void 0,disabled:T||void 0,children:[typeof S=="string"&&S&&J(z,{className:n(ue,"k-button-icon"),icon:S,size:R}),S&&typeof S!="string"&&J(qe,{children:S}),Z?Ge(qe,{children:[Z&&J("span",{className:"k-button-text",children:Z}),e.children]}):e.children&&J("span",{className:"k-button-text",children:e.children}),d&&J("span",{className:"k-menu-button-arrow k-button-arrow",children:J(z,{icon:c})})]})};b.states=Ct;b.options=wt;b.variants=zt;b.className=se;b.defaultOptions=ze;b.moduleName=Ne;b.folderName=Ve;b.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 Pt}from"react/jsx-runtime";var Ze=e=>Pt(b,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Et}from"react/jsx-runtime";var Je=e=>Et(b,{icon:"folder",children:"Button",...e});import{jsx as Lt}from"react/jsx-runtime";var Xe=e=>Lt(b,{children:"Button",...e});import{jsx as Ce}from"react/jsx-runtime";var Rt=b.options,At=b.states,Bt={...b.defaultOptions,variant:"text"},Mt=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Tt=[],X=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Ce(Ze,{...o,icon:"star"});case"icon-and-text":return Ce(Je,{...o,icon:"star",children:"Button"});default:return Ce(Xe,{...o,children:"Button"})}};X.options=Rt;X.states=At;X.variants=Mt;X.defaultOptions=Bt;X.modifiers=Tt;X.className=b.className;import{Fragment as It,jsx as Q,jsxs as Pe}from"react/jsx-runtime";var we="k-wizard-step",Ot=[u.focus],Wt={},Kt=Pe(It,{children:[Q("span",{className:"k-wizard-buttons-left",children:Q("span",{className:"k-wizard-pager",children:"Step 2 of 3"})}),Pe("span",{className:"k-wizard-buttons-right",children:[Q(b,{children:"Previous"}),Q(b,{themeColor:"primary",children:"Next"})]})]}),Qe={buttons:Kt},C=e=>{let{focus:t,buttons:o=Qe.buttons,stepLabel:a,...r}=e;return Pe("div",{...r,className:n(e.className,we,E(we,{focus:t})),role:"tabpanel","aria-label":a||"Step",tabIndex:0,children:[Q("div",{className:"k-wizard-content",children:e.children}),o&&Q("div",{className:"k-wizard-buttons",children:o})]})};C.states=Ot;C.options=Wt;C.className=we;C.defaultOptions=Qe;import{jsx as $t}from"react/jsx-runtime";var Ye="k-wizard-steps",_t=[],Ht={},Dt={},w=e=>$t("div",{...e,className:n(e.className,Ye),children:e.children});w.states=_t;w.options=Ht;w.className=Ye;w.defaultOptions=Dt;var Ee="stepper",je=Ee;import{jsx as qt}from"react/jsx-runtime";var et="k-stepper",Ft=[],Ut={},Vt={},m=e=>{let{style:t,...o}=e;return qt("nav",{...o,style:t,className:n(e.className,et),"aria-label":"Stepper",children:e.children})};m.options=Ut;m.states=Ft;m.className=et;m.defaultOptions=Vt;m.moduleName=Ee;m.folderName=je;m.ariaSpec={selector:".k-stepper",rules:[{selector:".k-stepper",attribute:"role=navigation or nodeName=nav",usage:"The landmark role navigation must be assigned to the component."},{selector:".k-step.k-disabled>.k-step-link",attribute:"aria-disabled=true",usage:"A disabled (inactive) link."},{selector:".k-step-current>.k-step-link",attribute:"aria-current=step",usage:"The currently selected link."},{selector:".k-step.k-focus .k-step-link",attribute:"tabindex=0",usage:"Focused step link is in the tab order."},{selector:".k-step:not(.k-focus) .k-step-link",attribute:"tabindex=-1",usage:"Non-focused step links are removed from tab order."}]};import{jsx as Jt}from"react/jsx-runtime";var Le="k-step-list",Gt=[],Zt={},tt={orientation:"horizontal"},x=e=>{let{style:t,orientation:o=tt.orientation,wizardContext:a,...r}=e;return Jt("ol",{...r,style:t,className:n(e.className,Le,{[`${Le}-${o}`]:o}),...a&&{role:"tablist"},children:e.children})};x.options=Zt;x.states=Gt;x.className=Le;x.defaultOptions=tt;import{jsx as B,jsxs as Re}from"react/jsx-runtime";var M="k-step",Xt=[u.disabled,u.hover,u.focus,u.invalid,u.valid],Qt={},Yt={},p=e=>{let{style:t,disabled:o,hover:a,focus:r,invalid:i,valid:d,optional:c,first:v,done:y,current:f,last:K,label:N,text:T,icon:I,stepContent:O,wizardContext:S,ariaControls:R,...Z}=e,ue=i?"warning-circle":"check-circle",fe=!!(d||i),be=N||(T?`Step ${T}`:I?"Step":void 0);return Re("li",{...Z,style:t,className:n(e.className,M,{[`${M}-done`]:y,[`${M}-first`]:v,[`${M}-current`]:f,[`${M}-last`]:K,[`${M}-optional`]:c,[`${M}-success`]:d,[`${M}-error`]:i},E(M,{hover:a,focus:r,disabled:o})),...S&&{role:"none"},children:[Re("a",{href:"#",className:"k-step-link",...S&&{role:"tab"},...R&&{"aria-controls":R},...f&&{"aria-current":S?"true":"step"},...f&&S&&{"aria-selected":"true"},...o&&{"aria-disabled":"true"},tabIndex:r||f?0:-1,"aria-label":be,children:[T&&!I&&B("span",{className:"k-step-indicator",children:B("span",{className:"k-step-indicator-text",children:T})}),I&&B("span",{className:"k-step-indicator",children:B(z,{className:"k-step-indicator-icon",icon:I})}),c&&!N&&B("span",{className:"k-step-label",children:B("span",{className:"k-step-label-optional",children:"(Optional)"})}),N&&Re("span",{className:"k-step-label",children:[B("span",{className:"k-step-text",children:N}),fe&&B(z,{icon:ue}),c&&B("span",{className:"k-step-label-optional",children:"(Optional)"})]})]}),O&&B("div",{className:"k-step-content",style:{height:"140px"},children:O})]})};p.options=Qt;p.states=Xt;p.className=M;p.defaultOptions=Yt;var ne="progressbar",de=ne;import{jsx as Be,jsxs as Ae}from"react/jsx-runtime";var L="k-progressbar",jt=[u.disabled,u.indeterminate],eo={orientation:["horizontal","vertical"]},U={indeterminate:!1,label:!0,labelPosition:"start",orientation:"horizontal",reverse:!1,value:"0"},P=e=>{let{disabled:t,height:o,indeterminate:a=U.indeterminate,label:r=U.label,labelPosition:i=U.labelPosition,orientation:d=U.orientation,reverse:c=U.reverse,value:v=U.value,width:y,style:f,ariaLabel:K,...N}=e;return Ae("div",{...N,className:n(e.className,L,E(L,{disabled:t}),{[`${L}-${d}`]:d,[`${L}-indeterminate`]:a,[`${L}-reverse`]:c}),style:{...f,"--kendo-progressbar-value":v,[d==="horizontal"?"height":"width"]:d==="horizontal"?o:y},role:"progressbar","aria-label":K||"progress","aria-valuenow":a?void 0:Number(v),"aria-valuemin":0,"aria-valuemax":100,children:[Be("span",{className:n("k-progress-status-wrap",{[`k-progress-${i}`]:i&&!a}),children:r&&Ae("span",{className:"k-progress-status",children:[v,"%"]})}),!a&&Be("div",{className:"k-progressbar-value k-selected",children:Be("span",{className:n("k-progress-status-wrap",{[`k-progress-${i}`]:i}),children:r&&Ae("span",{className:"k-progress-status",children:[e.value,"%"]})})})]})};P.states=jt;P.options=eo;P.className=L;P.defaultOptions=U;P.moduleName=ne;P.folderName=de;P.ariaSpec={selector:".k-progressbar",implicitRole:"progressbar",rules:[{selector:".k-progressbar",attribute:"role=progressbar",usage:"Sets the proper role for ProgressBar."},{selector:".k-progressbar",attribute:"aria-label or aria-labelledby",usage:"The ProgressBar needs an accessible name to be assigned to it."},{selector:".k-progressbar:not(.k-progressbar-indeterminate)",attribute:"aria-valuenow",usage:"Required if the value is not indeterminate. Decimal value between aria-valuemin and aria-valuemax."},{selector:".k-progressbar",attribute:"aria-valuemin",usage:"Minimum value. Defaults to 0."},{selector:".k-progressbar",attribute:"aria-valuemax",usage:"Maximum value. Defaults to 100."}]};var ot=P;import{jsx as Me}from"react/jsx-runtime";var rt="k-chunk-progressbar",to=(e,t)=>t<=e-1,oo=[u.disabled,u.indeterminate],ro={},ce={chunkCount:5,orientation:"horizontal",progress:0},V=e=>{let{disabled:t,chunkCount:o=ce.chunkCount,indeterminate:a,orientation:r=ce.orientation,progress:i=ce.progress,reverse:d,ariaLabel:c,...v}=e;return Me("div",{...v,className:n(e.className,L,rt,E(L,{disabled:t}),{[`${L}-${r}`]:r,[`${L}-indeterminate`]:a,[`${L}-reverse`]:d}),role:"progressbar","aria-label":c||"progress","aria-valuenow":a?void 0:i,"aria-valuemin":0,"aria-valuemax":o,children:Me("ul",{className:"k-progressbar-chunks k-reset",children:[...Array(o)].map((y,f)=>Me("li",{className:n("k-progressbar-chunk",{"k-first":f===0,"k-last":f===[...Array(o)].length-1,"k-selected":to(i,f)})},f))})})};V.states=oo;V.options=ro;V.className=rt;V.defaultOptions=ce;V.moduleName=ne;V.folderName=de;V.ariaSpec={selector:".k-chunk-progressbar",implicitRole:"progressbar",rules:[{selector:".k-chunk-progressbar",attribute:"role=progressbar",usage:"Sets the proper role for ChunkProgressBar."},{selector:".k-chunk-progressbar",attribute:"aria-label or aria-labelledby",usage:"The ChunkProgressBar needs an accessible name to be assigned to it."},{selector:".k-chunk-progressbar:not(.k-progressbar-indeterminate)",attribute:"aria-valuenow",usage:"Required if the value is not indeterminate. Value between aria-valuemin and aria-valuemax."},{selector:".k-chunk-progressbar",attribute:"aria-valuemin",usage:"Minimum value. Defaults to 0."},{selector:".k-chunk-progressbar",attribute:"aria-valuemax",usage:"Maximum value. Defaults to chunk count."}]};import{jsx as ao}from"react/jsx-runtime";var g=e=>ao(ot,{...e});import{jsx as ma}from"react/jsx-runtime";import{jsx as _}from"react/jsx-runtime";var so=P.options,no=P.states,at={...P.defaultOptions,variant:"start"},io=[{name:"start",title:"Label start"},{name:"center",title:"Label center"},{name:"end",title:"Label end"},{name:"empty",title:"No label"}],lo=[],Y=e=>{let{variant:t,modifiers:o,...a}={...at,...e},r={},i={style:{width:"324px"}};switch(Object.keys(o||{}).forEach(d=>{switch(d){case"reverse":r.reverse=!!o?.[d];break;case"vertical":r.orientation=o?.[d]?"vertical":void 0,i.style=o?.[d]?void 0:{width:"324px"};break}}),t){case"end":return _("div",{...i,children:_(g,{...a,...r,labelPosition:"end",value:"50"})});case"center":return _("div",{...i,children:_(g,{...a,...r,labelPosition:"center",value:"50"})});case"empty":return _("div",{...i,children:_(g,{...a,...r,label:!1,value:"50"})});default:return _("div",{...i,children:_(g,{...a,...r,labelPosition:"start",value:"50"})})}};Y.options=so;Y.states=no;Y.variants=io;Y.defaultOptions=at;Y.modifiers=lo;Y.className=P.className;import{Fragment as Ra,jsx as Ea,jsxs as La}from"react/jsx-runtime";import{Fragment as Ka,jsx as Oa,jsxs as Wa}from"react/jsx-runtime";import{Fragment as Ua,jsx as $a,jsxs as Fa}from"react/jsx-runtime";import{jsx as H,jsxs as me}from"react/jsx-runtime";var po=m.options,co=m.states,st={...m.defaultOptions,variant:"horizontal"},mo=[{name:"horizontal",title:"Horizontal"},{name:"vertical",title:"Vertical"}],uo=[{name:"label",title:"Label"},{name:"optional",title:"Optional"}],j=e=>{let{variant:t,modifiers:o,...a}={...st,...e},r={};return Object.keys(o||{}).forEach(i=>{switch(i){case"label":{r.label=o?.[i]?"Label":void 0;break}case"optional":{r.optional=!!o?.[i];break}}}),t==="vertical"?me(m,{style:{display:"grid",gridTemplateRows:"repeat(3, 1fr)"},...a,children:[me(x,{orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[H(p,{first:!0,done:!0,icon:"check",label:r.label,style:{maxHeight:"33.333%"}}),H(p,{current:!0,focus:!0,text:"2",label:r.label,style:{maxHeight:"33.333%"}}),H(p,{last:!0,optional:r.optional,text:"3",label:r.label,style:{maxHeight:"33.333%"}})]}),H(g,{className:"k-top-5 k-row-start-1 k-row-end-3",orientation:"vertical",reverse:!0,label:!1,value:"50"})]}):me(m,{style:{display:"grid",gridTemplateColumns:"repeat(6, 1fr)"},...a,children:[me(x,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[H(p,{first:!0,done:!0,icon:"check",label:r.label,style:{maxWidth:"33.333%"}}),H(p,{current:!0,focus:!0,text:"2",label:r.label,style:{maxWidth:"33.333%"}}),H(p,{last:!0,optional:r.optional,text:"3",label:r.label,style:{maxWidth:"33.333%"}})]}),H(g,{className:"k-col-start-2 k-col-end-6",style:{width:"400px"},label:!1,value:"50"})]})};j.options=po;j.states=co;j.variants=mo;j.defaultOptions=st;j.modifiers=uo;j.className=m.className;import{Fragment as fo,jsx as q,jsxs as Te}from"react/jsx-runtime";var Oe=({...e})=>q(k,{id:"wizard",orientation:"vertical",children:Te(fo,{children:[Te(m,{style:{display:"grid",gridTemplateRows:"repeat(3, 1fr)"},children:[Te(x,{wizardContext:!0,orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[q(p,{first:!0,done:!0,icon:"check",style:{maxHeight:"33.333%"},wizardContext:!0}),q(p,{current:!0,focus:!0,text:"2",style:{maxHeight:"33.333%"},wizardContext:!0}),q(p,{last:!0,optional:!0,text:"3",style:{maxHeight:"33.333%"},wizardContext:!0})]}),q(g,{orientation:"vertical",reverse:!0,label:!1,value:"50","aria-hidden":"true"})]}),q(w,{children:q(C,{stepLabel:"Step 2 of 3",children:"Short content"})})]}),...e});import{Fragment as hs,jsx as gs,jsxs as xs}from"react/jsx-runtime";import{jsx as h,jsxs as W}from"react/jsx-runtime";var bo=k.options,go=k.states,xo={...k.defaultOptions,variant:"bottom"},ho=[{name:"bottom",title:"Content Bottom"},{name:"right",title:"Content Right"},{name:"left",title:"Content Left"}],So=[],ee=e=>{let{variant:t,...o}=e;switch(t){case"right":return W(Oe,{...o,children:[W(m,{style:{display:"grid",gridTemplateRows:"repeat(3, 1fr)"},children:[W(x,{orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[h(p,{first:!0,done:!0,text:"1",label:"Step 1",style:{maxHeight:"33.333%"}}),h(p,{current:!0,focus:!0,text:"2",label:"Step 2",style:{maxHeight:"33.333%"}}),h(p,{last:!0,text:"3",label:"Step 3",style:{maxHeight:"33.333%"}})]}),h(g,{className:"k-top-5 k-row-start-1 k-row-end-3",orientation:"vertical",reverse:!0,label:!1,value:"50"})]}),h(w,{children:h(C,{children:"Some quick example text to make up the bulk of the Wizard step content. Some quick example text to make up the bulk of the Wizard step content. Some quick example text to make up the bulk of the Wizard step content."})})]});case"left":return W(Oe,{contentPosition:"left",...o,children:[W(m,{style:{display:"grid",gridTemplateRows:"repeat(3, 1fr)"},children:[W(x,{orientation:"vertical",style:{gridRowStart:"1",gridRowEnd:"-1"},children:[h(p,{first:!0,done:!0,text:"1",label:"Step 1",style:{maxHeight:"33.333%"}}),h(p,{current:!0,focus:!0,text:"2",label:"Step 2",style:{maxHeight:"33.333%"}}),h(p,{last:!0,text:"3",label:"Step 3",style:{maxHeight:"33.333%"}})]}),h(g,{className:"k-top-5 k-row-start-1 k-row-end-3",orientation:"vertical",reverse:!0,label:!1,value:"50"})]}),h(w,{children:h(C,{children:"Some quick example text to make up the bulk of the Wizard step content. Some quick example text to make up the bulk of the Wizard step content. Some quick example text to make up the bulk of the Wizard step content."})})]});default:return W(nt,{...o,children:[W(m,{style:{display:"grid",gridTemplateColumns:"repeat(6, 1fr)"},children:[W(x,{style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[h(p,{first:!0,done:!0,icon:"check",label:"Step 1",style:{maxWidth:"33.333%"}}),h(p,{current:!0,focus:!0,text:"2",label:"Step 2",style:{maxWidth:"33.333%"}}),h(p,{last:!0,text:"3",label:"Step 3",style:{maxWidth:"33.333%"}})]}),h(g,{className:"k-col-start-2 k-col-end-6",label:!1,value:"50"})]}),h(w,{children:h(C,{children:"Some quick example text to make up the bulk of the Wizard step content. Some quick example text to make up the bulk of the Wizard step content. Some quick example text to make up the bulk of the Wizard step content."})})]})}};ee.options=bo;ee.states=go;ee.variants=ho;ee.defaultOptions=xo;ee.modifiers=So;ee.className=k.className;import{Fragment as ko,jsx as G,jsxs as We}from"react/jsx-runtime";var nt=({...e})=>G(k,{id:"wizard",children:We(ko,{children:[We(m,{style:{display:"grid",gridTemplateColumns:"repeat(6, 1fr)"},children:[We(x,{wizardContext:!0,style:{gridColumnStart:"1",gridColumnEnd:"-1"},children:[G(p,{first:!0,done:!0,icon:"check",style:{maxWidth:"33.333%"},wizardContext:!0}),G(p,{current:!0,focus:!0,text:"2",style:{maxWidth:"33.333%"},wizardContext:!0}),G(p,{last:!0,optional:!0,text:"3",style:{maxWidth:"33.333%"},wizardContext:!0})]}),G(g,{label:!1,value:"50","aria-hidden":"true"})]}),G(w,{children:G(C,{stepLabel:"Step 2 of 3",children:"Short content"})})]}),...e});export{nt as WizardNormal};