@progress/kendo-themes-html
Version:
A collection of HTML helpers used for developing Kendo UI themes
2 lines (1 loc) • 24.3 kB
JavaScript
var d=(...e)=>e.filter(t=>t!==!0&&!!t).map(t=>Array.isArray(t)?d(...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 h=(e,t)=>d({[`${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"}),C=(e,t)=>{let{valid:o,invalid:a,hover:n,focus:i,checked:l,active:f,selected:I,disabled:O,indeterminate:b,loading:v,empty:y,readonly:z,highlighted:D,...M}=t;return d({"k-valid":o,"k-invalid":a,"k-hover":n,"k-focus":i,"k-checked":l,"k-active":f,"k-selected":I,"k-disabled":O,"k-indeterminate":b&&!l,"k-loading":v,"k-empty":y,"k-readonly":z,"k-highlighted":D},Object.keys(M).reduce((w,P)=>(P.startsWith("k-")?w[P]=M[P]:w[`k-${P}`]=M[P],w),{}))};function Ge(e,t){if(!t)return{};let o=Array.isArray(t)?t:[t];return Object.fromEntries(o.map(a=>[`k-${a}`,!0]))}var r={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"},c={undefined:void 0,none:"none",small:"small",medium:"medium",large:"large",full:"full"},m={undefined:void 0,solid:"solid",flat:"flat",outline:"outline",clear:"clear",link:"link"},E={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},p={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"},s={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"};import{jsx as Ct,jsxs as Et}from"react/jsx-runtime";var le="k-otp",Pt=[s.invalid,s.disabled],Mt={size:[r.undefined,r.small,r.medium,r.large]},kt={},g=e=>{let{size:t,invalid:o,disabled:a,...n}=e;return Et("div",{...n,role:"group",className:d(e.className,le,h(le,{size:t}),C(le,{invalid:o,disabled:a})),children:[Ct("input",{type:"hidden","aria-hidden":"true"}),e.children]})};g.states=Pt;g.options=Mt;g.className=le;g.defaultOptions=kt;g.moduleName="otp";g.folderName="otp";g.ariaSpec={selector:".k-otp",rules:[{selector:".k-otp",attribute:"role=group",usage:"Sets the proper role for the OTP."},{selector:".k-otp > input",attribute:"type=hidden",usage:"The hidden input holding the OTP inputs value."},{selector:".k-otp > input",attribute:"aria-hidden=true",usage:"Hides the hidden input from assistive technologies."},{selector:".k-otp .k-otp-input > .k-input-inner",attribute:"label for or aria-label or aria-labelledby",usage:"The input needs an accessible name to be assigned to it."},{selector:".k-otp .k-otp-input > .k-input-inner",attribute:"autocomplete=off",usage:"Sets the default autocomplete for the input."},{selector:".k-otp .k-otp-input > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the OTP inputs."},{selector:".k-otp.k-invalid .k-otp-input > .k-input-inner, .k-otp.ng-invalid .k-otp-input > .k-input-inner",attribute:"aria-invalid=true",usage:"Rendered only when the OTP is in a form and announces the invalid state."},{selector:".k-otp.k-disabled .k-otp-input > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered only when the OTP is disabled."}]};var Se="textbox",qe=Se;var te="input",de=te;import{jsx as Dt}from"react/jsx-runtime";var pe="k-input",Lt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],At={size:[r.undefined,r.small,r.medium,r.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},zt={},S=e=>{let{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f,size:I,rounded:O,fillMode:b,...v}=e;return Dt("span",{...v,className:d(e.className,pe,h(pe,{size:I,rounded:O,fillMode:b}),C(pe,{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f}))})};S.states=Lt;S.options=At;S.className=pe;S.defaultOptions=zt;S.moduleName=te;S.folderName=de;import{jsx as _t}from"react/jsx-runtime";var ue="k-picker",Bt=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],Rt={size:[r.undefined,r.small,r.medium,r.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},Kt={},X=e=>{let{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f,size:I,rounded:O,fillMode:b,...v}=e;return _t("span",{...v,className:d(e.className,ue,h(ue,{size:I,rounded:O,fillMode:b}),C(ue,{hover:t,focus:o,disabled:a,invalid:n,valid:i,loading:l,readonly:f})),children:e.children})};X.states=Bt;X.options=Rt;X.className=ue;X.defaultOptions=Kt;X.moduleName=te;X.folderName=de;import{Fragment as Ft,jsx as Xe}from"react/jsx-runtime";var Pe="k-font-icon",Ht=[],Vt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info]},Ut={},oe=e=>{let{size:t,themeColor:o,icon:a,rotate:n,flip:i,...l}=e;return a?Xe("span",{...l,className:d(e.className,Pe,h(Pe,{size:t}),{[`k-i-${a}`]:a,[`k-color-${o}`]:o,[`k-rotate-${n}`]:n,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true"}):Xe(Ft,{})};oe.states=Ht;oe.options=Vt;oe.className=Pe;oe.defaultOptions=Ut;var We=oe;import{Fragment as qt,jsx as ce}from"react/jsx-runtime";var Me="k-svg-icon",$t=[],Gt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info],variant:[E.outline,E.solid,E.duotone]},ke={viewBox:"0 0 24 24",variant:E.outline},ne=e=>{let{size:t,themeColor:o,rotate:a,flip:n,viewBox:i=ke.viewBox,variant:l=ke.variant,icon:f,...I}=e;if(!f)return ce(qt,{});if(f==="none")return ce("span",{...I,className:d(e.className,Me,h("k-icon",{size:t}),"k-none"),"aria-hidden":"true"});let O=typeof f=="object"&&f.name&&f.name,b=typeof f=="object"?l&&f.variants?.[l]||f.variants?.outline||f.content:void 0;return ce("span",{...I,className:d(e.className,Me,h("k-icon",{size:t}),{[`k-svg-i-${O}`]:O,[`k-color-${o}`]:o,[`k-rotate-${a}`]:a,"k-flip-h":n==="h"||n==="both","k-flip-v":n==="v"||n==="both"}),"aria-hidden":"true",children:ce("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof f=="object"?f.viewBox:i,dangerouslySetInnerHTML:b!==void 0?{__html:b}:void 0,children:f?void 0:e.children})})};ne.states=$t;ne.options=Gt;ne.className=Me;ne.defaultOptions=ke;var Ce=ne;import*as Ee from"@progress/kendo-svg-icons";var Je="icon",Qe="icons";import{useContext as Wt}from"react";import{createContext as Xt}from"react";var Ye=Xt({iconsType:"svg"});import{Fragment as Ze,jsx as ae}from"react/jsx-runtime";var me="k-icon",Jt=e=>e.replace(/([-_][a-z0-9])/gi,t=>t.toUpperCase().replace("-","").replace("_","")),Qt=[],Yt={size:[r.undefined,r.xsmall,r.small,r.medium,r.large,r.xlarge,r.xxlarge,r.xxxlarge],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info],variant:[E.outline,E.solid,E.duotone]},fe={viewBox:"0 0 24 24",type:"svg",variant:E.outline},T=e=>{let{iconsType:t}=Wt(Ye),{size:o,themeColor:a,icon:n,type:i=t||fe.type,rotate:l,flip:f,viewBox:I=fe.viewBox,variant:O=fe.variant,...b}=e;if(!n)return ae(Ze,{});if((t||i)==="svg"){if(n==="none")return ae(Ce,{...b,className:d(e.className,me),icon:n,size:o,variant:O});let y=Ee[n]?n:Jt(`${n}-icon`);return Ee[y]?ae(Ce,{...b,className:d(e.className,me),icon:Ee[y],size:o,themeColor:a,rotate:l,flip:f,viewBox:I,variant:O}):ae(Ze,{})}return ae(We,{...b,className:d(e.className,me),icon:n,size:o,themeColor:a,rotate:l,flip:f})};T.states=Qt;T.options=Yt;T.defaultOptions=fe;T.className=me;T.moduleName=Je;T.folderName=Qe;T.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."}]};import{Fragment as eo,jsx as Le}from"react/jsx-runtime";var je="k-clear-value",Zt=[s.disabled,s.loading,s.readonly],jt={},V=e=>{let{disabled:t,loading:o,readonly:a,value:n}=e;return t||a||o||!n?Le(eo,{}):Le("span",{className:d(e.className,je),children:Le(T,{icon:"x"})})};V.states=Zt;V.options=jt;V.className=je;import{jsx as no}from"react/jsx-runtime";var Ae="k-input-inner",to=[],oo={},xe={type:"text",autocomplete:"off",value:"",placeholder:""},U=e=>{let{value:t=xe.value,type:o=xe.type,placeholder:a=xe.placeholder,autocomplete:n=xe.autocomplete,disabled:i,readOnly:l,...f}=e;return no("input",{...f,type:o,className:d(e.className,Ae,h(Ae,e)),placeholder:a,autoComplete:n,defaultValue:t,disabled:i||void 0,readOnly:l||void 0})};U.states=to;U.options=oo;U.className=Ae;import{jsx as et,jsxs as so}from"react/jsx-runtime";var ze="k-input-inner",ao=[],io={},De=e=>{let{value:t,placeholder:o,showValue:a,valueIcon:n,valueIconName:i,...l}=e;return so("span",{...l,className:d(e.className,ze,h(ze,e)),children:[n,!n&&i&&et(T,{className:"k-input-value-icon",icon:i}),a&&!t&&o,a&&t&&et("span",{className:"k-input-value-text",children:t})]})};De.states=ao;De.options=io;De.className=ze;import{jsx as po}from"react/jsx-runtime";var Be="k-input-inner",ro=[],lo={},tt={value:"",placeholder:""},Re=e=>{let{value:t=tt.value,placeholder:o=tt.placeholder,rows:a,disabled:n,...i}=e;return po("textarea",{...i,className:d(e.className,Be,h(Be,e)),placeholder:o,rows:a,defaultValue:t,disabled:n||void 0})};Re.states=ro;Re.options=lo;Re.className=Be;import{Fragment as co,jsx as ot}from"react/jsx-runtime";var nt="k-input-loading-icon",uo=[s.disabled,s.loading],W=e=>{let{disabled:t,loading:o}=e;return t||!o?ot(co,{}):ot("span",{className:d(e.className,nt,"k-icon k-i-loading")})};W.states=uo;W.className=nt;import{Fragment as xo,jsx as at}from"react/jsx-runtime";var it="k-input-validation-icon",mo=[s.valid,s.invalid,s.disabled,s.loading],fo={},F=e=>{let{valid:t,invalid:o,disabled:a,loading:n}=e,i=o?"warning-circle":"check-circle";return a||n||!!!(t||o)?at(xo,{}):at(T,{className:d(it),icon:i})};F.states=mo;F.options=fo;F.className=it;import{Fragment as To,jsx as st}from"react/jsx-runtime";var bo="k-input-prefix",ho={direction:"horizontal"},be=e=>{let{direction:t=ho.direction,...o}=e;return e.children?st("span",{...o,className:d(bo,e.className,{[`k-input-prefix-${t}`]:t}),children:e.children}):st(To,{})};import{Fragment as Oo,jsx as rt}from"react/jsx-runtime";var go="k-input-suffix",Io={direction:"horizontal"},he=e=>{let{direction:t=Io.direction,...o}=e;return e.children?rt("span",{...o,className:d(go,e.className,{[`k-input-suffix-${t}`]:t}),children:e.children}):rt(Oo,{})};import{jsx as Ha}from"react/jsx-runtime";import{jsx as $a}from"react/jsx-runtime";import{jsx as vo}from"react/jsx-runtime";var lt="k-input-separator",No={direction:"vertical"},J=e=>{let{direction:t=No.direction,...o}=e;return vo("span",{...o,className:d(lt,e.className,{[`${lt}-${t}`]:t})})};var Ke="button",dt=Ke;import{Fragment as pt,jsx as Q,jsxs as ut}from"react/jsx-runtime";var ie="k-button",yo=["icon-button"],wo=[s.hover,s.focus,s.active,s.selected,s.disabled,s.generating],So={size:[r.undefined,r.xsmall,r.small,r.medium,r.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.full],fillMode:[m.undefined,m.solid,m.flat,m.outline,m.clear,m.link],themeColor:[p.undefined,p.base,p.primary,p.secondary,p.tertiary,p.success,p.warning,p.error,p.info,p.inverse]},_e={showArrow:!1,arrowIconName:"chevron-down"},N=e=>{let{as:t="button",size:o,rounded:a,fillMode:n,themeColor:i,showArrow:l=_e.showArrow,arrowIconName:f=_e.arrowIconName,variant:I,hover:O,focus:b,active:v,selected:y,disabled:z,togglable:D,ariaDisabled:M,icon:w,iconSize:P,text:k,iconClassName:re,className:Ne,...ve}=e,ye=w!=null,we=e.children!==void 0;return ut(t,{className:d(Ne,ie,Ge(ie,I),h(ie,{size:o,rounded:a,fillMode:n,themeColor:i}),C(ie,{hover:O,focus:b,active:v,disabled:z||M,selected:y}),{"k-icon-button":!k&&!we&&ye}),"aria-pressed":D?y?"true":"false":void 0,...ve,"aria-disabled":M?"true":void 0,disabled:z||void 0,children:[typeof w=="string"&&w&&Q(T,{className:d(re,"k-button-icon"),icon:w,size:P}),w&&typeof w!="string"&&Q(pt,{children:w}),k?ut(pt,{children:[k&&Q("span",{className:"k-button-text",children:k}),e.children]}):e.children&&Q("span",{className:"k-button-text",children:e.children}),l&&Q("span",{className:"k-menu-button-arrow k-button-arrow",children:Q(T,{icon:f})})]})};N.states=wo;N.options=So;N.variants=yo;N.className=ie;N.defaultOptions=_e;N.moduleName=Ke;N.folderName=dt;N.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 Po}from"react/jsx-runtime";var $=e=>Po(N,{children:"Button",...e});import{Fragment as ct,jsx as L,jsxs as He}from"react/jsx-runtime";var Mo=S.states,ko=S.defaultOptions,Co=S.options,Eo=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"},{name:"validation-icon",title:"Validation Icon"},{name:"separators",title:"Separators"}],Lo=[],Y=e=>{let{modifiers:t,valid:o,invalid:a,loading:n,disabled:i,readonly:l,...f}=e,I=t?.prefix,O=t?.suffix,b=t?.["clear-button"],v=t?.["validation-icon"],y=t?.separators;return He(S,{...f,valid:o,invalid:a,loading:n,disabled:i,readonly:l,style:{width:300},children:[I&&He(ct,{children:[L(be,{children:L(T,{icon:"lock"})}),y&&L(J,{})]}),L(U,{placeholder:"Placeholder",value:"Value"}),v&&L(F,{valid:o,invalid:a,loading:n,disabled:i}),L(W,{loading:n,disabled:i}),b&&L(V,{loading:n,disabled:i,readonly:l,value:"Value"}),O&&He(ct,{children:[y&&L(J,{}),L(he,{children:L($,{size:f.size,fillMode:"clear",children:"Send"})})]})]})};Y.options=Co;Y.states=Mo;Y.variants=Lo;Y.defaultOptions=ko;Y.modifiers=Eo;Y.className=S.className;import{Fragment as mt,jsx as B,jsxs as Ve}from"react/jsx-runtime";var ft="k-textbox",Ao=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.loading,s.readonly],zo={size:[r.undefined,r.small,r.medium,r.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},Te={showClearButton:!0,showValidationIcon:!0,separators:!0},x=e=>{let{size:t,rounded:o,fillMode:a,separators:n=Te.separators,showClearButton:i=Te.showClearButton,showValidationIcon:l=Te.showValidationIcon,prefix:f,suffix:I,type:O,value:b,placeholder:v,hover:y,focus:z,valid:D,invalid:M,required:w,loading:P,disabled:k,readonly:re,id:Ne,"aria-label":ve,"aria-describedby":ye,...we}=e;return Ve(S,{...we,size:t,rounded:o,fillMode:a,hover:y,focus:z,valid:D,invalid:M,required:w,loading:P,disabled:k,readonly:re,className:d(e.className,ft),children:[f&&Ve(mt,{children:[B(be,{children:f}),n&&B(J,{})]}),B(U,{id:Ne,placeholder:v,value:b,type:O,disabled:k,"aria-label":ve,"aria-describedby":ye,"aria-invalid":M?"true":void 0}),l&&B(F,{valid:D,invalid:M,loading:P,disabled:k}),B(W,{loading:P,disabled:k}),i&&B(V,{loading:P,disabled:k,readonly:re,value:b}),I&&Ve(mt,{children:[n&&B(J,{}),B(he,{children:I})]})]})};x.states=Ao;x.options=zo;x.className=ft;x.defaultOptions=Te;x.moduleName=Se;x.folderName=qe;x.ariaSpec={selector:".k-textbox",rules:[{selector:".k-textbox > .k-input-inner",attribute:"role=textbox or nodeName=input",usage:"Describes the role of the component."},{selector:".k-textbox > .k-input-inner",attribute:"label for or aria-label or aria-labelledby (when has accessible name)",usage:"The input requires an accessible name (provided by consuming app)."},{selector:".k-textbox > .k-input-inner",attribute:"aria-invalid=true (when invalid)",usage:"Rendered when the TextBox is in an invalid state."},{selector:".k-textbox > .k-input-inner",attribute:"aria-describedby (when has hint or error)",usage:"Points to the hint or error message for the input."},{selector:".k-textbox.k-disabled > .k-input-inner",attribute:"disabled=disabled or aria-disabled=true",usage:"Rendered when the TextBox is disabled."}]};var se=x;import{jsx as Do}from"react/jsx-runtime";var xt=e=>Do(se,{...e});import{Fragment as Gi,jsx as $i}from"react/jsx-runtime";import{jsx as Bo}from"react/jsx-runtime";var bt=e=>Bo(N,{icon:"folder",...e,"aria-label":e["aria-label"]||"Folder",children:void 0});import{jsx as Ro}from"react/jsx-runtime";var ht=e=>Ro(N,{icon:"folder",children:"Button",...e});import{jsx as Ue}from"react/jsx-runtime";var Ko=N.options,_o=N.states,Ho={...N.defaultOptions,variant:"text"},Vo=[{name:"icon-only",title:"Icon Only"},{name:"icon-and-text",title:"Icon & Text"},{name:"text",title:"Text"}],Uo=[],Z=e=>{let{variant:t,...o}=e;switch(t){case"icon-only":return Ue(bt,{...o,icon:"star"});case"icon-and-text":return Ue(ht,{...o,icon:"star",children:"Button"});default:return Ue($,{...o,children:"Button"})}};Z.options=Ko;Z.states=_o;Z.variants=Vo;Z.defaultOptions=Ho;Z.modifiers=Uo;Z.className=N.className;import{Fragment as bs,jsx as xs}from"react/jsx-runtime";import{jsx as Is}from"react/jsx-runtime";import{jsx as Fe}from"react/jsx-runtime";var Fo=x.states,$o=x.defaultOptions,Go=x.options,qo=[{name:"prefix",title:"Prefix"},{name:"suffix",title:"Suffix"},{name:"clear-button",title:"`Clear` Button"}],Xo=[],j=e=>{let{modifiers:t,...o}=e,a={};return Object.keys(t||{}).forEach(n=>{switch(n){case"prefix":a.prefix=t?.[n]?Fe(T,{icon:"lock"}):void 0;break;case"suffix":a.suffix=t?.[n]?Fe($,{size:o.size,fillMode:"clear",children:"Send"}):void 0;break;case"clear-button":a.showClearButton=t?.[n];break;default:break}}),Fe(xt,{value:"Value",style:{width:300},...o,...a})};j.options=Go;j.states=Fo;j.variants=Xo;j.defaultOptions=$o;j.modifiers=qo;j.className=x.className;import{jsx as Qo}from"react/jsx-runtime";var Tt="k-otp-input",Wo=[s.hover,s.focus,s.valid,s.invalid,s.required,s.disabled,s.readonly],Jo={size:[r.undefined,r.small,r.medium,r.large],rounded:[c.undefined,c.none,c.small,c.medium,c.large,c.full],fillMode:[m.undefined,m.solid,m.flat,m.outline]},ge={size:x.defaultOptions.size,rounded:x.defaultOptions.rounded,fillMode:x.defaultOptions.fillMode},u=e=>{let{size:t=ge.size,rounded:o=ge.rounded,fillMode:a=ge.fillMode,type:n,value:i,placeholder:l,hover:f,focus:I,valid:O,invalid:b,required:v,disabled:y,readonly:z,...D}=e;return Qo(x,{...D,size:t,rounded:o,fillMode:a,type:n,value:i,placeholder:l,hover:f,focus:I,valid:O,invalid:b,required:v,disabled:y,readonly:z,showClearButton:!1,showValidationIcon:!1,className:d(e.className,Tt)})};u.states=Wo;u.options=Jo;u.className=Tt;u.defaultOptions=ge;import{jsx as en}from"react/jsx-runtime";var gt="k-otp-separator",Yo=[],Zo={},jo={},R=e=>{let{children:t,...o}=e;return en("div",{...o,className:d(e.className,gt),children:t})};R.states=Yo;R.options=Zo;R.className=gt;R.defaultOptions=jo;import{Fragment as tn,jsx as G,jsxs as on}from"react/jsx-runtime";var It=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>G(g,{invalid:o,size:n,"aria-label":"One-time password",children:on(tn,{children:[G(u,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),G(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),G(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l}),G(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),G(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),G(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})});import{jsx as rn}from"react/jsx-runtime";var Ie="k-input-group",nn=[s.disabled],an={fillMode:[m.undefined,m.solid,m.flat,m.outline,m.clear,m.link]},sn={},A=e=>{let{fillMode:t,disabled:o,...a}=e;return rn("div",{...a,className:d(e.className,Ie,h(Ie,{fillMode:t}),C(Ie,{disabled:o})),children:e.children})};A.states=nn;A.options=an;A.className=Ie;A.defaultOptions=sn;import{Fragment as dn,jsx as K,jsxs as ln}from"react/jsx-runtime";var Ot=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>K(g,{invalid:o,size:n,"aria-label":"One-time password",children:K(dn,{children:ln(A,{fillMode:a,children:[K(u,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),K(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),K(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l}),K(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),K(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),K(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})})});import{Fragment as pn,jsx as _,jsxs as un}from"react/jsx-runtime";var Nt=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>_(g,{invalid:o,size:n,"aria-label":"One-time password",children:un(pn,{children:[_(u,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),_(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),_(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l}),_(R,{children:"-"}),_(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),_(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),_(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})});import{Fragment as cn,jsx as H,jsxs as $e}from"react/jsx-runtime";var vt=({hover:e,focus:t,invalid:o,fillMode:a,size:n,disabled:i,...l})=>H(g,{invalid:o,size:n,"aria-label":"One-time password",children:$e(cn,{children:[$e(A,{fillMode:a,children:[H(u,{size:n,fillMode:a,invalid:o,disabled:i,focus:t,hover:e,"aria-label":"Digit 1 of 6",...l}),H(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 2 of 6",...l}),H(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 3 of 6",...l})]}),H(R,{children:"-"}),$e(A,{fillMode:a,children:[H(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 4 of 6",...l}),H(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 5 of 6",...l}),H(u,{size:n,fillMode:a,invalid:o,disabled:i,"aria-label":"Digit 6 of 6",...l})]})]})});import{Fragment as ur,jsx as pr,jsxs as cr}from"react/jsx-runtime";import{jsx as Oe}from"react/jsx-runtime";var mn=x.options,fn=x.states,yt={...x.defaultOptions,variant:"normal"},xn=[{name:"normal",title:"Normal"},{name:"grouping",title:"Grouping"}],bn=[{name:"no-space",title:"No Space"}],ee=e=>{let{variant:t,modifiers:o,...a}={...yt,...e},n=!0;return Object.keys(o||{}).forEach(i=>{if(i==="no-space"){n=!o?.[i];return}}),t==="grouping"?n?Oe(Nt,{...a}):Oe(vt,{...a}):n?Oe(It,{...a}):Oe(Ot,{...a})};ee.options=mn;ee.states=fn;ee.variants=xn;ee.defaultOptions=yt;ee.modifiers=bn;ee.className=g.className;import{Fragment as hn,jsx as q,jsxs as Tn}from"react/jsx-runtime";var zr=({hover:e,focus:t,fillMode:o,size:a,disabled:n,...i})=>q(g,{invalid:!0,size:a,"aria-label":"One-time password",children:Tn(hn,{children:[q(u,{size:a,fillMode:o,invalid:!0,disabled:n,focus:t,hover:e,"aria-label":"Digit 1 of 6",...i}),q(u,{size:a,fillMode:o,invalid:!0,disabled:n,"aria-label":"Digit 2 of 6",...i}),q(u,{size:a,fillMode:o,invalid:!0,disabled:n,"aria-label":"Digit 3 of 6",...i}),q(u,{size:a,fillMode:o,invalid:!0,disabled:n,"aria-label":"Digit 4 of 6",...i}),q(u,{size:a,fillMode:o,invalid:!0,disabled:n,"aria-label":"Digit 5 of 6",...i}),q(u,{size:a,fillMode:o,invalid:!0,disabled:n,"aria-label":"Digit 6 of 6",...i})]})});export{zr as OneTimePasswordInvalid};