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