@quietmind/mdx-docs 0.1.18 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/dist/assets/Avatar-BJ0S7JKg.js +1 -0
- package/dist/assets/Button-BXcSdEL6.js +1 -0
- package/dist/assets/Favorite-DeeoxvxH.js +1 -0
- package/dist/assets/advanced-D_Pa36Nk.js +38 -0
- package/dist/assets/alert-a7rj56bx.js +191 -0
- package/dist/assets/button-D0caik7C.js +97 -0
- package/dist/assets/card-Fe9yzzA9.js +230 -0
- package/dist/assets/chip-CHAwrwxa.js +204 -0
- package/dist/assets/colors-BwOy54bA.js +8 -0
- package/dist/assets/customization-DuuWhJ6e.js +111 -0
- package/dist/assets/examples-DBDWp4fA.js +11 -0
- package/dist/assets/home-9ybgeCk8.js +90 -0
- package/dist/assets/index-C5FzG5L5.js +153 -0
- package/dist/assets/index-Do1AlBnD.css +1 -0
- package/dist/assets/prism-DjoQ0BfU.js +14 -0
- package/dist/assets/react-vendor-BVjvCnQb.js +56 -0
- package/dist/assets/router-d4Dt6g8h.js +12 -0
- package/dist/assets/tabs-D9qsbJnd.js +215 -0
- package/dist/assets/textfield-D0Z_oeqU.js +253 -0
- package/dist/assets/typography-hshX1pgi.js +429 -0
- package/dist/index.html +29 -0
- package/package.json +1 -1
- package/dist/index.css +0 -1
- package/dist/index.js +0 -1548
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
import{r as l,j as g,n as At,o,p as K,F as Xt}from"./react-vendor-BVjvCnQb.js";import{c as pe}from"./prism-DjoQ0BfU.js";import{k as Ue,w as De,z as _t,q as _e,v as $t,a as ae,g as de,u as fe,E as it,s as k,m as ue,d as ne,e as ie,F as Gt,G as jt,c as lt,H as at,j as Ce,f as Qe,J as rt,T as Jt,K as Qt,L as Yt,A as Zt,D as Ge,P as en,b as he,M as tn,N as nn,O as on,x as rn,y as sn,Q as gt,h as Wt,R as ln,S as an,B as vt}from"./index-C5FzG5L5.js";import"./router-d4Dt6g8h.js";function Ke(t){return parseInt(t,10)||0}const dn={shadow:{visibility:"hidden",position:"absolute",overflow:"hidden",height:0,top:0,left:0,transform:"translateZ(0)"}};function un(t){for(const e in t)return!1;return!0}function xt(t){return un(t)||t.outerHeightStyle===0&&!t.overflowing}const cn=l.forwardRef(function(e,n){const{onChange:r,maxRows:i,minRows:a=1,style:s,value:u,...m}=e,{current:v}=l.useRef(u!=null),h=l.useRef(null),P=Ue(n,h),x=l.useRef(null),p=l.useRef(null),y=l.useCallback(()=>{const d=h.current,c=p.current;if(!d||!c)return;const C=De(d).getComputedStyle(d);if(C.width==="0px")return{outerHeightStyle:0,overflowing:!1};c.style.width=C.width,c.value=d.value||e.placeholder||"x",c.value.slice(-1)===`
|
|
2
|
+
`&&(c.value+=" ");const W=C.boxSizing,R=Ke(C.paddingBottom)+Ke(C.paddingTop),H=Ke(C.borderBottomWidth)+Ke(C.borderTopWidth),$=c.scrollHeight;c.value="x";const j=c.scrollHeight;let E=$;a&&(E=Math.max(Number(a)*j,E)),i&&(E=Math.min(Number(i)*j,E)),E=Math.max(E,j);const D=E+(W==="border-box"?R+H:0),_=Math.abs(E-$)<=1;return{outerHeightStyle:D,overflowing:_}},[i,a,e.placeholder]),I=_t(()=>{const d=h.current,c=y();if(!d||!c||xt(c))return!1;const w=c.outerHeightStyle;return x.current!=null&&x.current!==w}),b=l.useCallback(()=>{const d=h.current,c=y();if(!d||!c||xt(c))return;const w=c.outerHeightStyle;x.current!==w&&(x.current=w,d.style.height=`${w}px`),d.style.overflow=c.overflowing?"hidden":""},[y]),f=l.useRef(-1);_e(()=>{const d=$t(b),c=h?.current;if(!c)return;const w=De(c);w.addEventListener("resize",d);let C;return typeof ResizeObserver<"u"&&(C=new ResizeObserver(()=>{I()&&(C.unobserve(c),cancelAnimationFrame(f.current),b(),f.current=requestAnimationFrame(()=>{C.observe(c)}))}),C.observe(c)),()=>{d.clear(),cancelAnimationFrame(f.current),w.removeEventListener("resize",d),C&&C.disconnect()}},[y,b,I]),_e(()=>{b()});const F=d=>{v||b();const c=d.target,w=c.value.length,C=c.value.endsWith(`
|
|
3
|
+
`),W=c.selectionStart===w;C&&W&&c.setSelectionRange(w,w),r&&r(d)};return g.jsxs(l.Fragment,{children:[g.jsx("textarea",{value:u,onChange:F,ref:P,rows:a,style:s,...m}),g.jsx("textarea",{"aria-hidden":!0,className:e.className,readOnly:!0,ref:p,tabIndex:-1,style:{...dn.shadow,...s,paddingTop:0,paddingBottom:0}})]})});function Ae({props:t,states:e,muiFormControl:n}){return e.reduce((r,i)=>(r[i]=t[i],n&&typeof t[i]>"u"&&(r[i]=n[i]),r),{})}const Ye=l.createContext(void 0);function ke(){return l.useContext(Ye)}function yt(t){return t!=null&&!(Array.isArray(t)&&t.length===0)}function Je(t,e=!1){return t&&(yt(t.value)&&t.value!==""||e&&yt(t.defaultValue)&&t.defaultValue!=="")}function pn(t){return t.startAdornment}function fn(t){return de("MuiInputBase",t)}const Ne=ae("MuiInputBase",["root","formControl","focused","disabled","adornedStart","adornedEnd","error","sizeSmall","multiline","colorSecondary","fullWidth","hiddenLabel","readOnly","input","inputSizeSmall","inputMultiline","inputTypeSearch","inputAdornedStart","inputAdornedEnd","inputHiddenLabel"]);var St;const Ze=(t,e)=>{const{ownerState:n}=t;return[e.root,n.formControl&&e.formControl,n.startAdornment&&e.adornedStart,n.endAdornment&&e.adornedEnd,n.error&&e.error,n.size==="small"&&e.sizeSmall,n.multiline&&e.multiline,n.color&&e[`color${ne(n.color)}`],n.fullWidth&&e.fullWidth,n.hiddenLabel&&e.hiddenLabel]},et=(t,e)=>{const{ownerState:n}=t;return[e.input,n.size==="small"&&e.inputSizeSmall,n.multiline&&e.inputMultiline,n.type==="search"&&e.inputTypeSearch,n.startAdornment&&e.inputAdornedStart,n.endAdornment&&e.inputAdornedEnd,n.hiddenLabel&&e.inputHiddenLabel]},mn=t=>{const{classes:e,color:n,disabled:r,error:i,endAdornment:a,focused:s,formControl:u,fullWidth:m,hiddenLabel:v,multiline:h,readOnly:P,size:x,startAdornment:p,type:y}=t,I={root:["root",`color${ne(n)}`,r&&"disabled",i&&"error",m&&"fullWidth",s&&"focused",u&&"formControl",x&&x!=="medium"&&`size${ne(x)}`,h&&"multiline",p&&"adornedStart",a&&"adornedEnd",v&&"hiddenLabel",P&&"readOnly"],input:["input",r&&"disabled",y==="search"&&"inputTypeSearch",h&&"inputMultiline",x==="small"&&"inputSizeSmall",v&&"inputHiddenLabel",p&&"inputAdornedStart",a&&"inputAdornedEnd",P&&"readOnly"]};return ie(I,fn,e)},tt=k("div",{name:"MuiInputBase",slot:"Root",overridesResolver:Ze})(ue(({theme:t})=>({...t.typography.body1,color:(t.vars||t).palette.text.primary,lineHeight:"1.4375em",boxSizing:"border-box",position:"relative",cursor:"text",display:"inline-flex",alignItems:"center",[`&.${Ne.disabled}`]:{color:(t.vars||t).palette.text.disabled,cursor:"default"},variants:[{props:({ownerState:e})=>e.multiline,style:{padding:"4px 0 5px"}},{props:({ownerState:e,size:n})=>e.multiline&&n==="small",style:{paddingTop:1}},{props:({ownerState:e})=>e.fullWidth,style:{width:"100%"}}]}))),nt=k("input",{name:"MuiInputBase",slot:"Input",overridesResolver:et})(ue(({theme:t})=>{const e=t.palette.mode==="light",n={color:"currentColor",...t.vars?{opacity:t.vars.opacity.inputPlaceholder}:{opacity:e?.42:.5},transition:t.transitions.create("opacity",{duration:t.transitions.duration.shorter})},r={opacity:"0 !important"},i=t.vars?{opacity:t.vars.opacity.inputPlaceholder}:{opacity:e?.42:.5};return{font:"inherit",letterSpacing:"inherit",color:"currentColor",padding:"4px 0 5px",border:0,boxSizing:"content-box",background:"none",height:"1.4375em",margin:0,WebkitTapHighlightColor:"transparent",display:"block",minWidth:0,width:"100%","&::-webkit-input-placeholder":n,"&::-moz-placeholder":n,"&::-ms-input-placeholder":n,"&:focus":{outline:0},"&:invalid":{boxShadow:"none"},"&::-webkit-search-decoration":{WebkitAppearance:"none"},[`label[data-shrink=false] + .${Ne.formControl} &`]:{"&::-webkit-input-placeholder":r,"&::-moz-placeholder":r,"&::-ms-input-placeholder":r,"&:focus::-webkit-input-placeholder":i,"&:focus::-moz-placeholder":i,"&:focus::-ms-input-placeholder":i},[`&.${Ne.disabled}`]:{opacity:1,WebkitTextFillColor:(t.vars||t).palette.text.disabled},variants:[{props:({ownerState:a})=>!a.disableInjectingGlobalStyles,style:{animationName:"mui-auto-fill-cancel",animationDuration:"10ms","&:-webkit-autofill":{animationDuration:"5000s",animationName:"mui-auto-fill"}}},{props:{size:"small"},style:{paddingTop:1}},{props:({ownerState:a})=>a.multiline,style:{height:"auto",resize:"none",padding:0,paddingTop:0}},{props:{type:"search"},style:{MozAppearance:"textfield"}}]}})),wt=Gt({"@keyframes mui-auto-fill":{from:{display:"block"}},"@keyframes mui-auto-fill-cancel":{from:{display:"block"}}}),dt=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiInputBase"}),{"aria-describedby":i,autoComplete:a,autoFocus:s,className:u,color:m,components:v={},componentsProps:h={},defaultValue:P,disabled:x,disableInjectingGlobalStyles:p,endAdornment:y,error:I,fullWidth:b=!1,id:f,inputComponent:F="input",inputProps:d={},inputRef:c,margin:w,maxRows:C,minRows:W,multiline:R=!1,name:H,onBlur:$,onChange:j,onClick:E,onFocus:D,onKeyDown:_,onKeyUp:U,placeholder:L,readOnly:Z,renderSuffix:oe,rows:O,size:Q,slotProps:N={},slots:xe={},startAdornment:Y,type:ye="text",value:le,...re}=r,se=d.value!=null?d.value:le,{current:Se}=l.useRef(se!=null),X=l.useRef(),M=l.useCallback(q=>{},[]),A=Ue(X,c,d.ref,M),[V,be]=l.useState(!1),T=ke(),z=Ae({props:r,muiFormControl:T,states:["color","disabled","error","hiddenLabel","size","required","filled"]});z.focused=T?T.focused:V,l.useEffect(()=>{!T&&x&&V&&(be(!1),$&&$())},[T,x,V,$]);const ce=T&&T.onFilled,ge=T&&T.onEmpty,me=l.useCallback(q=>{Je(q)?ce&&ce():ge&&ge()},[ce,ge]);_e(()=>{Se&&me({value:se})},[se,me,Se]);const we=q=>{D&&D(q),d.onFocus&&d.onFocus(q),T&&T.onFocus?T.onFocus(q):be(!0)},Ie=q=>{$&&$(q),d.onBlur&&d.onBlur(q),T&&T.onBlur?T.onBlur(q):be(!1)},ee=(q,...Pe)=>{if(!Se){const Oe=q.target||X.current;if(Oe==null)throw new Error(jt(1));me({value:Oe.value})}d.onChange&&d.onChange(q,...Pe),j&&j(q,...Pe)};l.useEffect(()=>{me(X.current)},[]);const $e=q=>{X.current&&q.currentTarget===q.target&&X.current.focus(),E&&E(q)};let Re=F,G=d;R&&Re==="input"&&(O?G={type:void 0,minRows:O,maxRows:O,...G}:G={type:void 0,maxRows:C,minRows:W,...G},Re=cn);const Ve=q=>{me(q.animationName==="mui-auto-fill-cancel"?X.current:{value:"x"})};l.useEffect(()=>{T&&T.setAdornedStart(!!Y)},[T,Y]);const Fe={...r,color:z.color||"primary",disabled:z.disabled,endAdornment:y,error:z.error,focused:z.focused,formControl:T,fullWidth:b,hiddenLabel:z.hiddenLabel,multiline:R,size:z.size,startAdornment:Y,type:ye},Te=mn(Fe),qe=xe.root||v.Root||tt,Ee=N.root||h.root||{},Le=xe.input||v.Input||nt;return G={...G,...N.input??h.input},g.jsxs(l.Fragment,{children:[!p&&typeof wt=="function"&&(St||(St=g.jsx(wt,{}))),g.jsxs(qe,{...Ee,ref:n,onClick:$e,...re,...!it(qe)&&{ownerState:{...Fe,...Ee.ownerState}},className:pe(Te.root,Ee.className,u,Z&&"MuiInputBase-readOnly"),children:[Y,g.jsx(Ye.Provider,{value:null,children:g.jsx(Le,{"aria-invalid":z.error,"aria-describedby":i,autoComplete:a,autoFocus:s,defaultValue:P,disabled:z.disabled,id:f,onAnimationStart:Ve,name:H,placeholder:L,readOnly:Z,required:z.required,rows:O,value:se,onKeyDown:_,onKeyUp:U,type:ye,...G,...!it(Le)&&{as:Re,ownerState:{...Fe,...G.ownerState}},ref:A,className:pe(Te.input,G.className,Z&&"MuiInputBase-readOnly"),onBlur:Ie,onChange:ee,onFocus:we})}),y,oe?oe({...z,startAdornment:Y}):null]})]})});function hn(t){return de("MuiInput",t)}const je={...Ne,...ae("MuiInput",["root","underline","input"])};function bn(t){return de("MuiOutlinedInput",t)}const ve={...Ne,...ae("MuiOutlinedInput",["root","notchedOutline","input"])};function gn(t){return de("MuiFilledInput",t)}const Me={...Ne,...ae("MuiFilledInput",["root","underline","input","adornedStart","adornedEnd","sizeSmall","multiline","hiddenLabel"])},vn=lt(g.jsx("path",{d:"M7 10l5 5 5-5z"})),xn=t=>{const{classes:e,disableUnderline:n,startAdornment:r,endAdornment:i,size:a,hiddenLabel:s,multiline:u}=t,m={root:["root",!n&&"underline",r&&"adornedStart",i&&"adornedEnd",a==="small"&&`size${ne(a)}`,s&&"hiddenLabel",u&&"multiline"],input:["input"]},v=ie(m,gn,e);return{...e,...v}},yn=k(tt,{shouldForwardProp:t=>Ce(t)||t==="classes",name:"MuiFilledInput",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[...Ze(t,e),!n.disableUnderline&&e.underline]}})(ue(({theme:t})=>{const e=t.palette.mode==="light",n=e?"rgba(0, 0, 0, 0.42)":"rgba(255, 255, 255, 0.7)",r=e?"rgba(0, 0, 0, 0.06)":"rgba(255, 255, 255, 0.09)",i=e?"rgba(0, 0, 0, 0.09)":"rgba(255, 255, 255, 0.13)",a=e?"rgba(0, 0, 0, 0.12)":"rgba(255, 255, 255, 0.12)";return{position:"relative",backgroundColor:t.vars?t.vars.palette.FilledInput.bg:r,borderTopLeftRadius:(t.vars||t).shape.borderRadius,borderTopRightRadius:(t.vars||t).shape.borderRadius,transition:t.transitions.create("background-color",{duration:t.transitions.duration.shorter,easing:t.transitions.easing.easeOut}),"&:hover":{backgroundColor:t.vars?t.vars.palette.FilledInput.hoverBg:i,"@media (hover: none)":{backgroundColor:t.vars?t.vars.palette.FilledInput.bg:r}},[`&.${Me.focused}`]:{backgroundColor:t.vars?t.vars.palette.FilledInput.bg:r},[`&.${Me.disabled}`]:{backgroundColor:t.vars?t.vars.palette.FilledInput.disabledBg:a},variants:[{props:({ownerState:s})=>!s.disableUnderline,style:{"&::after":{left:0,bottom:0,content:'""',position:"absolute",right:0,transform:"scaleX(0)",transition:t.transitions.create("transform",{duration:t.transitions.duration.shorter,easing:t.transitions.easing.easeOut}),pointerEvents:"none"},[`&.${Me.focused}:after`]:{transform:"scaleX(1) translateX(0)"},[`&.${Me.error}`]:{"&::before, &::after":{borderBottomColor:(t.vars||t).palette.error.main}},"&::before":{borderBottom:`1px solid ${t.vars?t.alpha(t.vars.palette.common.onBackground,t.vars.opacity.inputUnderline):n}`,left:0,bottom:0,content:'"\\00a0"',position:"absolute",right:0,transition:t.transitions.create("border-bottom-color",{duration:t.transitions.duration.shorter}),pointerEvents:"none"},[`&:hover:not(.${Me.disabled}, .${Me.error}):before`]:{borderBottom:`1px solid ${(t.vars||t).palette.text.primary}`},[`&.${Me.disabled}:before`]:{borderBottomStyle:"dotted"}}},...Object.entries(t.palette).filter(Qe()).map(([s])=>({props:{disableUnderline:!1,color:s},style:{"&::after":{borderBottom:`2px solid ${(t.vars||t).palette[s]?.main}`}}})),{props:({ownerState:s})=>s.startAdornment,style:{paddingLeft:12}},{props:({ownerState:s})=>s.endAdornment,style:{paddingRight:12}},{props:({ownerState:s})=>s.multiline,style:{padding:"25px 12px 8px"}},{props:({ownerState:s,size:u})=>s.multiline&&u==="small",style:{paddingTop:21,paddingBottom:4}},{props:({ownerState:s})=>s.multiline&&s.hiddenLabel,style:{paddingTop:16,paddingBottom:17}},{props:({ownerState:s})=>s.multiline&&s.hiddenLabel&&s.size==="small",style:{paddingTop:8,paddingBottom:9}}]}})),Sn=k(nt,{name:"MuiFilledInput",slot:"Input",overridesResolver:et})(ue(({theme:t})=>({paddingTop:25,paddingRight:12,paddingBottom:8,paddingLeft:12,...!t.vars&&{"&:-webkit-autofill":{WebkitBoxShadow:t.palette.mode==="light"?null:"0 0 0 100px #266798 inset",WebkitTextFillColor:t.palette.mode==="light"?null:"#fff",caretColor:t.palette.mode==="light"?null:"#fff",borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"}},...t.vars&&{"&:-webkit-autofill":{borderTopLeftRadius:"inherit",borderTopRightRadius:"inherit"},[t.getColorSchemeSelector("dark")]:{"&:-webkit-autofill":{WebkitBoxShadow:"0 0 0 100px #266798 inset",WebkitTextFillColor:"#fff",caretColor:"#fff"}}},variants:[{props:{size:"small"},style:{paddingTop:21,paddingBottom:4}},{props:({ownerState:e})=>e.hiddenLabel,style:{paddingTop:16,paddingBottom:17}},{props:({ownerState:e})=>e.startAdornment,style:{paddingLeft:0}},{props:({ownerState:e})=>e.endAdornment,style:{paddingRight:0}},{props:({ownerState:e})=>e.hiddenLabel&&e.size==="small",style:{paddingTop:8,paddingBottom:9}},{props:({ownerState:e})=>e.multiline,style:{paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0}}]}))),ut=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiFilledInput"}),{disableUnderline:i=!1,components:a={},componentsProps:s,fullWidth:u=!1,hiddenLabel:m,inputComponent:v="input",multiline:h=!1,slotProps:P,slots:x={},type:p="text",...y}=r,I={...r,disableUnderline:i,fullWidth:u,inputComponent:v,multiline:h,type:p},b=xn(r),f={root:{ownerState:I},input:{ownerState:I}},F=P??s?at(f,P??s):f,d=x.root??a.Root??yn,c=x.input??a.Input??Sn;return g.jsx(dt,{slots:{root:d,input:c},slotProps:F,fullWidth:u,inputComponent:v,multiline:h,ref:n,type:p,...y,classes:b})});ut.muiName="Input";function wn(t){return de("MuiFormControl",t)}ae("MuiFormControl",["root","marginNone","marginNormal","marginDense","fullWidth","disabled"]);const Pn=t=>{const{classes:e,margin:n,fullWidth:r}=t,i={root:["root",n!=="none"&&`margin${ne(n)}`,r&&"fullWidth"]};return ie(i,wn,e)},Cn=k("div",{name:"MuiFormControl",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[e.root,e[`margin${ne(n.margin)}`],n.fullWidth&&e.fullWidth]}})({display:"inline-flex",flexDirection:"column",position:"relative",minWidth:0,padding:0,margin:0,border:0,verticalAlign:"top",variants:[{props:{margin:"normal"},style:{marginTop:16,marginBottom:8}},{props:{margin:"dense"},style:{marginTop:8,marginBottom:4}},{props:{fullWidth:!0},style:{width:"100%"}}]}),In=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiFormControl"}),{children:i,className:a,color:s="primary",component:u="div",disabled:m=!1,error:v=!1,focused:h,fullWidth:P=!1,hiddenLabel:x=!1,margin:p="none",required:y=!1,size:I="medium",variant:b="outlined",...f}=r,F={...r,color:s,component:u,disabled:m,error:v,fullWidth:P,hiddenLabel:x,margin:p,required:y,size:I,variant:b},d=Pn(F),[c,w]=l.useState(()=>{let U=!1;return i&&l.Children.forEach(i,L=>{if(!rt(L,["Input","Select"]))return;const Z=rt(L,["Select"])?L.props.input:L;Z&&pn(Z.props)&&(U=!0)}),U}),[C,W]=l.useState(()=>{let U=!1;return i&&l.Children.forEach(i,L=>{rt(L,["Input","Select"])&&(Je(L.props,!0)||Je(L.props.inputProps,!0))&&(U=!0)}),U}),[R,H]=l.useState(!1);m&&R&&H(!1);const $=h!==void 0&&!m?h:R;let j;l.useRef(!1);const E=l.useCallback(()=>{W(!0)},[]),D=l.useCallback(()=>{W(!1)},[]),_=l.useMemo(()=>({adornedStart:c,setAdornedStart:w,color:s,disabled:m,error:v,filled:C,focused:$,fullWidth:P,hiddenLabel:x,size:I,onBlur:()=>{H(!1)},onFocus:()=>{H(!0)},onEmpty:D,onFilled:E,registerEffect:j,required:y,variant:b}),[c,s,m,v,C,$,P,x,j,D,E,y,I,b]);return g.jsx(Ye.Provider,{value:_,children:g.jsx(Cn,{as:u,ownerState:F,className:pe(d.root,a),ref:n,...f,children:i})})});function Fn(t){return de("MuiFormHelperText",t)}const Pt=ae("MuiFormHelperText",["root","error","disabled","sizeSmall","sizeMedium","contained","focused","filled","required"]);var Ct;const Rn=t=>{const{classes:e,contained:n,size:r,disabled:i,error:a,filled:s,focused:u,required:m}=t,v={root:["root",i&&"disabled",a&&"error",r&&`size${ne(r)}`,n&&"contained",u&&"focused",s&&"filled",m&&"required"]};return ie(v,Fn,e)},Tn=k("p",{name:"MuiFormHelperText",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[e.root,n.size&&e[`size${ne(n.size)}`],n.contained&&e.contained,n.filled&&e.filled]}})(ue(({theme:t})=>({color:(t.vars||t).palette.text.secondary,...t.typography.caption,textAlign:"left",marginTop:3,marginRight:0,marginBottom:0,marginLeft:0,[`&.${Pt.disabled}`]:{color:(t.vars||t).palette.text.disabled},[`&.${Pt.error}`]:{color:(t.vars||t).palette.error.main},variants:[{props:{size:"small"},style:{marginTop:4}},{props:({ownerState:e})=>e.contained,style:{marginLeft:14,marginRight:14}}]}))),Mn=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiFormHelperText"}),{children:i,className:a,component:s="p",disabled:u,error:m,filled:v,focused:h,margin:P,required:x,variant:p,...y}=r,I=ke(),b=Ae({props:r,muiFormControl:I,states:["variant","size","disabled","error","filled","focused","required"]}),f={...r,component:s,contained:b.variant==="filled"||b.variant==="outlined",variant:b.variant,size:b.size,disabled:b.disabled,error:b.error,filled:b.filled,focused:b.focused,required:b.required};delete f.ownerState;const F=Rn(f);return g.jsx(Tn,{as:s,className:pe(F.root,a),ref:n,...y,ownerState:f,children:i===" "?Ct||(Ct=g.jsx("span",{className:"notranslate","aria-hidden":!0,children:""})):i})});function kn(t){return de("MuiFormLabel",t)}const He=ae("MuiFormLabel",["root","colorSecondary","focused","disabled","error","filled","required","asterisk"]),En=t=>{const{classes:e,color:n,focused:r,disabled:i,error:a,filled:s,required:u}=t,m={root:["root",`color${ne(n)}`,i&&"disabled",a&&"error",s&&"filled",r&&"focused",u&&"required"],asterisk:["asterisk",a&&"error"]};return ie(m,kn,e)},Ln=k("label",{name:"MuiFormLabel",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[e.root,n.color==="secondary"&&e.colorSecondary,n.filled&&e.filled]}})(ue(({theme:t})=>({color:(t.vars||t).palette.text.secondary,...t.typography.body1,lineHeight:"1.4375em",padding:0,position:"relative",variants:[...Object.entries(t.palette).filter(Qe()).map(([e])=>({props:{color:e},style:{[`&.${He.focused}`]:{color:(t.vars||t).palette[e].main}}})),{props:{},style:{[`&.${He.disabled}`]:{color:(t.vars||t).palette.text.disabled},[`&.${He.error}`]:{color:(t.vars||t).palette.error.main}}}]}))),On=k("span",{name:"MuiFormLabel",slot:"Asterisk"})(ue(({theme:t})=>({[`&.${He.error}`]:{color:(t.vars||t).palette.error.main}}))),zn=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiFormLabel"}),{children:i,className:a,color:s,component:u="label",disabled:m,error:v,filled:h,focused:P,required:x,...p}=r,y=ke(),I=Ae({props:r,muiFormControl:y,states:["color","required","focused","disabled","error","filled"]}),b={...r,color:I.color||"primary",component:u,disabled:I.disabled,error:I.error,filled:I.filled,focused:I.focused,required:I.required},f=En(b);return g.jsxs(Ln,{as:u,ownerState:b,className:pe(f.root,a),ref:n,...p,children:[i,I.required&&g.jsxs(On,{ownerState:b,"aria-hidden":!0,className:f.asterisk,children:[" ","*"]})]})}),Nn=t=>{const{classes:e,disableUnderline:n}=t,i=ie({root:["root",!n&&"underline"],input:["input"]},hn,e);return{...e,...i}},An=k(tt,{shouldForwardProp:t=>Ce(t)||t==="classes",name:"MuiInput",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[...Ze(t,e),!n.disableUnderline&&e.underline]}})(ue(({theme:t})=>{let n=t.palette.mode==="light"?"rgba(0, 0, 0, 0.42)":"rgba(255, 255, 255, 0.7)";return t.vars&&(n=t.alpha(t.vars.palette.common.onBackground,t.vars.opacity.inputUnderline)),{position:"relative",variants:[{props:({ownerState:r})=>r.formControl,style:{"label + &":{marginTop:16}}},{props:({ownerState:r})=>!r.disableUnderline,style:{"&::after":{left:0,bottom:0,content:'""',position:"absolute",right:0,transform:"scaleX(0)",transition:t.transitions.create("transform",{duration:t.transitions.duration.shorter,easing:t.transitions.easing.easeOut}),pointerEvents:"none"},[`&.${je.focused}:after`]:{transform:"scaleX(1) translateX(0)"},[`&.${je.error}`]:{"&::before, &::after":{borderBottomColor:(t.vars||t).palette.error.main}},"&::before":{borderBottom:`1px solid ${n}`,left:0,bottom:0,content:'"\\00a0"',position:"absolute",right:0,transition:t.transitions.create("border-bottom-color",{duration:t.transitions.duration.shorter}),pointerEvents:"none"},[`&:hover:not(.${je.disabled}, .${je.error}):before`]:{borderBottom:`2px solid ${(t.vars||t).palette.text.primary}`,"@media (hover: none)":{borderBottom:`1px solid ${n}`}},[`&.${je.disabled}:before`]:{borderBottomStyle:"dotted"}}},...Object.entries(t.palette).filter(Qe()).map(([r])=>({props:{color:r,disableUnderline:!1},style:{"&::after":{borderBottom:`2px solid ${(t.vars||t).palette[r].main}`}}}))]}})),$n=k(nt,{name:"MuiInput",slot:"Input",overridesResolver:et})({}),ct=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiInput"}),{disableUnderline:i=!1,components:a={},componentsProps:s,fullWidth:u=!1,inputComponent:m="input",multiline:v=!1,slotProps:h,slots:P={},type:x="text",...p}=r,y=Nn(r),b={root:{ownerState:{disableUnderline:i}}},f=h??s?at(h??s,b):b,F=P.root??a.Root??An,d=P.input??a.Input??$n;return g.jsx(dt,{slots:{root:F,input:d},slotProps:f,fullWidth:u,inputComponent:m,multiline:v,ref:n,type:x,...p,classes:y})});ct.muiName="Input";function jn(t){return de("MuiInputAdornment",t)}const It=ae("MuiInputAdornment",["root","filled","standard","outlined","positionStart","positionEnd","disablePointerEvents","hiddenLabel","sizeSmall"]);var Ft;const Wn=(t,e)=>{const{ownerState:n}=t;return[e.root,e[`position${ne(n.position)}`],n.disablePointerEvents===!0&&e.disablePointerEvents,e[n.variant]]},Bn=t=>{const{classes:e,disablePointerEvents:n,hiddenLabel:r,position:i,size:a,variant:s}=t,u={root:["root",n&&"disablePointerEvents",i&&`position${ne(i)}`,s,r&&"hiddenLabel",a&&`size${ne(a)}`]};return ie(u,jn,e)},Hn=k("div",{name:"MuiInputAdornment",slot:"Root",overridesResolver:Wn})(ue(({theme:t})=>({display:"flex",maxHeight:"2em",alignItems:"center",whiteSpace:"nowrap",color:(t.vars||t).palette.action.active,variants:[{props:{variant:"filled"},style:{[`&.${It.positionStart}&:not(.${It.hiddenLabel})`]:{marginTop:16}}},{props:{position:"start"},style:{marginRight:8}},{props:{position:"end"},style:{marginLeft:8}},{props:{disablePointerEvents:!0},style:{pointerEvents:"none"}}]}))),Rt=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiInputAdornment"}),{children:i,className:a,component:s="div",disablePointerEvents:u=!1,disableTypography:m=!1,position:v,variant:h,...P}=r,x=ke()||{};let p=h;h&&x.variant,x&&!p&&(p=x.variant);const y={...r,hiddenLabel:x.hiddenLabel,size:x.size,disablePointerEvents:u,position:v,variant:p},I=Bn(y);return g.jsx(Ye.Provider,{value:null,children:g.jsx(Hn,{as:s,ownerState:y,className:pe(I.root,a),ref:n,...P,children:typeof i=="string"&&!m?g.jsx(Jt,{color:"textSecondary",children:i}):g.jsxs(l.Fragment,{children:[v==="start"?Ft||(Ft=g.jsx("span",{className:"notranslate","aria-hidden":!0,children:""})):null,i]})})})});function Dn(t){return de("MuiInputLabel",t)}ae("MuiInputLabel",["root","focused","disabled","error","required","asterisk","formControl","sizeSmall","shrink","animated","standard","filled","outlined"]);const Un=t=>{const{classes:e,formControl:n,size:r,shrink:i,disableAnimation:a,variant:s,required:u}=t,m={root:["root",n&&"formControl",!a&&"animated",i&&"shrink",r&&r!=="medium"&&`size${ne(r)}`,s],asterisk:[u&&"asterisk"]},v=ie(m,Dn,e);return{...e,...v}},Vn=k(zn,{shouldForwardProp:t=>Ce(t)||t==="classes",name:"MuiInputLabel",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[{[`& .${He.asterisk}`]:e.asterisk},e.root,n.formControl&&e.formControl,n.size==="small"&&e.sizeSmall,n.shrink&&e.shrink,!n.disableAnimation&&e.animated,n.focused&&e.focused,e[n.variant]]}})(ue(({theme:t})=>({display:"block",transformOrigin:"top left",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%",variants:[{props:({ownerState:e})=>e.formControl,style:{position:"absolute",left:0,top:0,transform:"translate(0, 20px) scale(1)"}},{props:{size:"small"},style:{transform:"translate(0, 17px) scale(1)"}},{props:({ownerState:e})=>e.shrink,style:{transform:"translate(0, -1.5px) scale(0.75)",transformOrigin:"top left",maxWidth:"133%"}},{props:({ownerState:e})=>!e.disableAnimation,style:{transition:t.transitions.create(["color","transform","max-width"],{duration:t.transitions.duration.shorter,easing:t.transitions.easing.easeOut})}},{props:{variant:"filled"},style:{zIndex:1,pointerEvents:"none",transform:"translate(12px, 16px) scale(1)",maxWidth:"calc(100% - 24px)"}},{props:{variant:"filled",size:"small"},style:{transform:"translate(12px, 13px) scale(1)"}},{props:({variant:e,ownerState:n})=>e==="filled"&&n.shrink,style:{userSelect:"none",pointerEvents:"auto",transform:"translate(12px, 7px) scale(0.75)",maxWidth:"calc(133% - 24px)"}},{props:({variant:e,ownerState:n,size:r})=>e==="filled"&&n.shrink&&r==="small",style:{transform:"translate(12px, 4px) scale(0.75)"}},{props:{variant:"outlined"},style:{zIndex:1,pointerEvents:"none",transform:"translate(14px, 16px) scale(1)",maxWidth:"calc(100% - 24px)"}},{props:{variant:"outlined",size:"small"},style:{transform:"translate(14px, 9px) scale(1)"}},{props:({variant:e,ownerState:n})=>e==="outlined"&&n.shrink,style:{userSelect:"none",pointerEvents:"auto",maxWidth:"calc(133% - 32px)",transform:"translate(14px, -9px) scale(0.75)"}}]}))),qn=l.forwardRef(function(e,n){const r=fe({name:"MuiInputLabel",props:e}),{disableAnimation:i=!1,margin:a,shrink:s,variant:u,className:m,...v}=r,h=ke();let P=s;typeof P>"u"&&h&&(P=h.filled||h.focused||h.adornedStart);const x=Ae({props:r,muiFormControl:h,states:["size","variant","required","focused"]}),p={...r,disableAnimation:i,formControl:h,shrink:P,size:x.size,variant:x.variant,required:x.required,focused:x.focused},y=Un(p);return g.jsx(Vn,{"data-shrink":P,ref:n,className:pe(y.root,m),...v,ownerState:p,classes:y})});function st(t,e,n){return t===e?t.firstChild:e&&e.nextElementSibling?e.nextElementSibling:n?null:t.firstChild}function Tt(t,e,n){return t===e?n?t.firstChild:t.lastChild:e&&e.previousElementSibling?e.previousElementSibling:n?null:t.lastChild}function Bt(t,e){if(e===void 0)return!0;let n=t.innerText;return n===void 0&&(n=t.textContent),n=n.trim().toLowerCase(),n.length===0?!1:e.repeating?n[0]===e.keys[0]:n.startsWith(e.keys.join(""))}function We(t,e,n,r,i,a){let s=!1,u=i(t,e,e?n:!1);for(;u;){if(u===t.firstChild){if(s)return!1;s=!0}const m=r?!1:u.disabled||u.getAttribute("aria-disabled")==="true";if(!u.hasAttribute("tabindex")||!Bt(u,a)||m)u=i(t,u,n);else return u.focus(),!0}return!1}const Kn=l.forwardRef(function(e,n){const{actions:r,autoFocus:i=!1,autoFocusItem:a=!1,children:s,className:u,disabledItemsFocusable:m=!1,disableListWrap:v=!1,onKeyDown:h,variant:P="selectedMenu",...x}=e,p=l.useRef(null),y=l.useRef({keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null});_e(()=>{i&&p.current.focus()},[i]),l.useImperativeHandle(r,()=>({adjustStyleForScrollbar:(d,{direction:c})=>{const w=!p.current.style.width;if(d.clientHeight<p.current.clientHeight&&w){const C=`${Qt(De(d))}px`;p.current.style[c==="rtl"?"paddingLeft":"paddingRight"]=C,p.current.style.width=`calc(100% + ${C})`}return p.current}}),[]);const I=d=>{const c=p.current,w=d.key;if(d.ctrlKey||d.metaKey||d.altKey){h&&h(d);return}const W=Zt(Ge(c));if(w==="ArrowDown")d.preventDefault(),We(c,W,v,m,st);else if(w==="ArrowUp")d.preventDefault(),We(c,W,v,m,Tt);else if(w==="Home")d.preventDefault(),We(c,null,v,m,st);else if(w==="End")d.preventDefault(),We(c,null,v,m,Tt);else if(w.length===1){const R=y.current,H=w.toLowerCase(),$=performance.now();R.keys.length>0&&($-R.lastTime>500?(R.keys=[],R.repeating=!0,R.previousKeyMatched=!0):R.repeating&&H!==R.keys[0]&&(R.repeating=!1)),R.lastTime=$,R.keys.push(H);const j=W&&!R.repeating&&Bt(W,R);R.previousKeyMatched&&(j||We(c,W,!1,m,st,R))?d.preventDefault():R.previousKeyMatched=!1}h&&h(d)},b=Ue(p,n);let f=-1;l.Children.forEach(s,(d,c)=>{if(!l.isValidElement(d)){f===c&&(f+=1,f>=s.length&&(f=-1));return}d.props.disabled||(P==="selectedMenu"&&d.props.selected||f===-1)&&(f=c),f===c&&(d.props.disabled||d.props.muiSkipListHighlight||d.type.muiSkipListHighlight)&&(f+=1,f>=s.length&&(f=-1))});const F=l.Children.map(s,(d,c)=>{if(c===f){const w={};return a&&(w.autoFocus=!0),d.props.tabIndex===void 0&&P==="selectedMenu"&&(w.tabIndex=0),l.cloneElement(d,w)}return d});return g.jsx(Yt,{role:"menu",ref:b,className:u,onKeyDown:I,tabIndex:i?0:-1,...x,children:F})});function Xn(t){return de("MuiPopover",t)}ae("MuiPopover",["root","paper"]);function Mt(t,e){let n=0;return typeof e=="number"?n=e:e==="center"?n=t.height/2:e==="bottom"&&(n=t.height),n}function kt(t,e){let n=0;return typeof e=="number"?n=e:e==="center"?n=t.width/2:e==="right"&&(n=t.width),n}function Et(t){return[t.horizontal,t.vertical].map(e=>typeof e=="number"?`${e}px`:e).join(" ")}function Xe(t){return typeof t=="function"?t():t}const _n=t=>{const{classes:e}=t;return ie({root:["root"],paper:["paper"]},Xn,e)},Gn=k(on,{name:"MuiPopover",slot:"Root"})({}),Ht=k(en,{name:"MuiPopover",slot:"Paper"})({position:"absolute",overflowY:"auto",overflowX:"hidden",minWidth:16,minHeight:16,maxWidth:"calc(100% - 32px)",maxHeight:"calc(100% - 32px)",outline:0}),Jn=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiPopover"}),{action:i,anchorEl:a,anchorOrigin:s={vertical:"top",horizontal:"left"},anchorPosition:u,anchorReference:m="anchorEl",children:v,className:h,container:P,elevation:x=8,marginThreshold:p=16,open:y,PaperProps:I={},slots:b={},slotProps:f={},transformOrigin:F={vertical:"top",horizontal:"left"},TransitionComponent:d,transitionDuration:c="auto",TransitionProps:w={},disableScrollLock:C=!1,...W}=r,R=l.useRef(),H={...r,anchorOrigin:s,anchorReference:m,elevation:x,marginThreshold:p,transformOrigin:F,TransitionComponent:d,transitionDuration:c,TransitionProps:w},$=_n(H),j=l.useCallback(()=>{if(m==="anchorPosition")return u;const M=Xe(a),V=(M&&M.nodeType===1?M:Ge(R.current).body).getBoundingClientRect();return{top:V.top+Mt(V,s.vertical),left:V.left+kt(V,s.horizontal)}},[a,s.horizontal,s.vertical,u,m]),E=l.useCallback(M=>({vertical:Mt(M,F.vertical),horizontal:kt(M,F.horizontal)}),[F.horizontal,F.vertical]),D=l.useCallback(M=>{const A={width:M.offsetWidth,height:M.offsetHeight},V=E(A);if(m==="none")return{top:null,left:null,transformOrigin:Et(V)};const be=j();let T=be.top-V.vertical,z=be.left-V.horizontal;const ce=T+A.height,ge=z+A.width,me=De(Xe(a)),we=me.innerHeight-p,Ie=me.innerWidth-p;if(p!==null&&T<p){const ee=T-p;T-=ee,V.vertical+=ee}else if(p!==null&&ce>we){const ee=ce-we;T-=ee,V.vertical+=ee}if(p!==null&&z<p){const ee=z-p;z-=ee,V.horizontal+=ee}else if(ge>Ie){const ee=ge-Ie;z-=ee,V.horizontal+=ee}return{top:`${Math.round(T)}px`,left:`${Math.round(z)}px`,transformOrigin:Et(V)}},[a,m,j,E,p]),[_,U]=l.useState(y),L=l.useCallback(()=>{const M=R.current;if(!M)return;const A=D(M);A.top!==null&&M.style.setProperty("top",A.top),A.left!==null&&(M.style.left=A.left),M.style.transformOrigin=A.transformOrigin,U(!0)},[D]);l.useEffect(()=>(C&&window.addEventListener("scroll",L),()=>window.removeEventListener("scroll",L)),[a,C,L]);const Z=()=>{L()},oe=()=>{U(!1)};l.useEffect(()=>{y&&L()}),l.useImperativeHandle(i,()=>y?{updatePosition:()=>{L()}}:null,[y,L]),l.useEffect(()=>{if(!y)return;const M=$t(()=>{L()}),A=De(Xe(a));return A.addEventListener("resize",M),()=>{M.clear(),A.removeEventListener("resize",M)}},[a,y,L]);let O=c;const Q={slots:{transition:d,...b},slotProps:{transition:w,paper:I,...f}},[N,xe]=he("transition",{elementType:tn,externalForwardedProps:Q,ownerState:H,getSlotProps:M=>({...M,onEntering:(A,V)=>{M.onEntering?.(A,V),Z()},onExited:A=>{M.onExited?.(A),oe()}}),additionalProps:{appear:!0,in:y}});c==="auto"&&!N.muiSupportAuto&&(O=void 0);const Y=P||(a?Ge(Xe(a)).body:void 0),[ye,{slots:le,slotProps:re,...se}]=he("root",{ref:n,elementType:Gn,externalForwardedProps:{...Q,...W},shouldForwardComponentProp:!0,additionalProps:{slots:{backdrop:b.backdrop},slotProps:{backdrop:nn(typeof f.backdrop=="function"?f.backdrop(H):f.backdrop,{invisible:!0})},container:Y,open:y},ownerState:H,className:pe($.root,h)}),[Se,X]=he("paper",{ref:R,className:$.paper,elementType:Ht,externalForwardedProps:Q,shouldForwardComponentProp:!0,additionalProps:{elevation:x,style:_?void 0:{opacity:0}},ownerState:H});return g.jsx(ye,{...se,...!it(ye)&&{slots:le,slotProps:re,disableScrollLock:C},children:g.jsx(N,{...xe,timeout:O,children:g.jsx(Se,{...X,children:v})})})});function Qn(t){return de("MuiMenu",t)}ae("MuiMenu",["root","paper","list"]);const Yn={vertical:"top",horizontal:"right"},Zn={vertical:"top",horizontal:"left"},eo=t=>{const{classes:e}=t;return ie({root:["root"],paper:["paper"],list:["list"]},Qn,e)},to=k(Jn,{shouldForwardProp:t=>Ce(t)||t==="classes",name:"MuiMenu",slot:"Root"})({}),no=k(Ht,{name:"MuiMenu",slot:"Paper"})({maxHeight:"calc(100% - 96px)",WebkitOverflowScrolling:"touch"}),oo=k(Kn,{name:"MuiMenu",slot:"List"})({outline:0}),ro=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiMenu"}),{autoFocus:i=!0,children:a,className:s,disableAutoFocusItem:u=!1,MenuListProps:m={},onClose:v,open:h,PaperProps:P={},PopoverClasses:x,transitionDuration:p="auto",TransitionProps:{onEntering:y,...I}={},variant:b="selectedMenu",slots:f={},slotProps:F={},...d}=r,c=rn(),w={...r,autoFocus:i,disableAutoFocusItem:u,MenuListProps:m,onEntering:y,PaperProps:P,transitionDuration:p,TransitionProps:I,variant:b},C=eo(w),W=i&&!u&&h,R=l.useRef(null),H=(O,Q)=>{R.current&&R.current.adjustStyleForScrollbar(O,{direction:c?"rtl":"ltr"}),y&&y(O,Q)},$=O=>{O.key==="Tab"&&(O.preventDefault(),v&&v(O,"tabKeyDown"))};let j=-1;l.Children.map(a,(O,Q)=>{l.isValidElement(O)&&(O.props.disabled||(b==="selectedMenu"&&O.props.selected||j===-1)&&(j=Q))});const E={slots:f,slotProps:{list:m,transition:I,paper:P,...F}},D=sn({elementType:f.root,externalSlotProps:F.root,ownerState:w,className:[C.root,s]}),[_,U]=he("paper",{className:C.paper,elementType:no,externalForwardedProps:E,shouldForwardComponentProp:!0,ownerState:w}),[L,Z]=he("list",{className:pe(C.list,m.className),elementType:oo,shouldForwardComponentProp:!0,externalForwardedProps:E,getSlotProps:O=>({...O,onKeyDown:Q=>{$(Q),O.onKeyDown?.(Q)}}),ownerState:w}),oe=typeof E.slotProps.transition=="function"?E.slotProps.transition(w):E.slotProps.transition;return g.jsx(to,{onClose:v,anchorOrigin:{vertical:"bottom",horizontal:c?"right":"left"},transformOrigin:c?Yn:Zn,slots:{root:f.root,paper:_,backdrop:f.backdrop,...f.transition&&{transition:f.transition}},slotProps:{root:D,paper:U,backdrop:typeof F.backdrop=="function"?F.backdrop(w):F.backdrop,transition:{...oe,onEntering:(...O)=>{H(...O),oe?.onEntering?.(...O)}}},open:h,ref:n,transitionDuration:p,ownerState:w,...d,classes:x,children:g.jsx(L,{actions:R,autoFocus:i&&(j===-1||u),autoFocusItem:W,variant:b,...Z,children:a})})});function so(t){return de("MuiNativeSelect",t)}const pt=ae("MuiNativeSelect",["root","select","multiple","filled","outlined","standard","disabled","icon","iconOpen","iconFilled","iconOutlined","iconStandard","nativeInput","error"]),io=t=>{const{classes:e,variant:n,disabled:r,multiple:i,open:a,error:s}=t,u={select:["select",n,r&&"disabled",i&&"multiple",s&&"error"],icon:["icon",`icon${ne(n)}`,a&&"iconOpen",r&&"disabled"]};return ie(u,so,e)},Dt=k("select",{name:"MuiNativeSelect"})(({theme:t})=>({MozAppearance:"none",WebkitAppearance:"none",userSelect:"none",borderRadius:0,cursor:"pointer","&:focus":{borderRadius:0},[`&.${pt.disabled}`]:{cursor:"default"},"&[multiple]":{height:"auto"},"&:not([multiple]) option, &:not([multiple]) optgroup":{backgroundColor:(t.vars||t).palette.background.paper},variants:[{props:({ownerState:e})=>e.variant!=="filled"&&e.variant!=="outlined",style:{"&&&":{paddingRight:24,minWidth:16}}},{props:{variant:"filled"},style:{"&&&":{paddingRight:32}}},{props:{variant:"outlined"},style:{borderRadius:(t.vars||t).shape.borderRadius,"&:focus":{borderRadius:(t.vars||t).shape.borderRadius},"&&&":{paddingRight:32}}}]})),lo=k(Dt,{name:"MuiNativeSelect",slot:"Select",shouldForwardProp:Ce,overridesResolver:(t,e)=>{const{ownerState:n}=t;return[e.select,e[n.variant],n.error&&e.error,{[`&.${pt.multiple}`]:e.multiple}]}})({}),Ut=k("svg",{name:"MuiNativeSelect"})(({theme:t})=>({position:"absolute",right:0,top:"calc(50% - .5em)",pointerEvents:"none",color:(t.vars||t).palette.action.active,[`&.${pt.disabled}`]:{color:(t.vars||t).palette.action.disabled},variants:[{props:({ownerState:e})=>e.open,style:{transform:"rotate(180deg)"}},{props:{variant:"filled"},style:{right:7}},{props:{variant:"outlined"},style:{right:7}}]})),ao=k(Ut,{name:"MuiNativeSelect",slot:"Icon",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[e.icon,n.variant&&e[`icon${ne(n.variant)}`],n.open&&e.iconOpen]}})({}),uo=l.forwardRef(function(e,n){const{className:r,disabled:i,error:a,IconComponent:s,inputRef:u,variant:m="standard",...v}=e,h={...e,disabled:i,variant:m,error:a},P=io(h);return g.jsxs(l.Fragment,{children:[g.jsx(lo,{ownerState:h,className:pe(P.select,r),disabled:i,ref:u||n,...v}),e.multiple?null:g.jsx(ao,{as:s,ownerState:h,className:P.icon})]})});var Lt;const co=k("fieldset",{name:"MuiNotchedOutlined",shouldForwardProp:Ce})({textAlign:"left",position:"absolute",bottom:0,right:0,top:-5,left:0,margin:0,padding:"0 8px",pointerEvents:"none",borderRadius:"inherit",borderStyle:"solid",borderWidth:1,overflow:"hidden",minWidth:"0%"}),po=k("legend",{name:"MuiNotchedOutlined",shouldForwardProp:Ce})(ue(({theme:t})=>({float:"unset",width:"auto",overflow:"hidden",variants:[{props:({ownerState:e})=>!e.withLabel,style:{padding:0,lineHeight:"11px",transition:t.transitions.create("width",{duration:150,easing:t.transitions.easing.easeOut})}},{props:({ownerState:e})=>e.withLabel,style:{display:"block",padding:0,height:11,fontSize:"0.75em",visibility:"hidden",maxWidth:.01,transition:t.transitions.create("max-width",{duration:50,easing:t.transitions.easing.easeOut}),whiteSpace:"nowrap","& > span":{paddingLeft:5,paddingRight:5,display:"inline-block",opacity:0,visibility:"visible"}}},{props:({ownerState:e})=>e.withLabel&&e.notched,style:{maxWidth:"100%",transition:t.transitions.create("max-width",{duration:100,easing:t.transitions.easing.easeOut,delay:50})}}]})));function fo(t){const{children:e,classes:n,className:r,label:i,notched:a,...s}=t,u=i!=null&&i!=="",m={...t,notched:a,withLabel:u};return g.jsx(co,{"aria-hidden":!0,className:r,ownerState:m,...s,children:g.jsx(po,{ownerState:m,children:u?g.jsx("span",{children:i}):Lt||(Lt=g.jsx("span",{className:"notranslate","aria-hidden":!0,children:""}))})})}const mo=t=>{const{classes:e}=t,r=ie({root:["root"],notchedOutline:["notchedOutline"],input:["input"]},bn,e);return{...e,...r}},ho=k(tt,{shouldForwardProp:t=>Ce(t)||t==="classes",name:"MuiOutlinedInput",slot:"Root",overridesResolver:Ze})(ue(({theme:t})=>{const e=t.palette.mode==="light"?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)";return{position:"relative",borderRadius:(t.vars||t).shape.borderRadius,[`&:hover .${ve.notchedOutline}`]:{borderColor:(t.vars||t).palette.text.primary},"@media (hover: none)":{[`&:hover .${ve.notchedOutline}`]:{borderColor:t.vars?t.alpha(t.vars.palette.common.onBackground,.23):e}},[`&.${ve.focused} .${ve.notchedOutline}`]:{borderWidth:2},variants:[...Object.entries(t.palette).filter(Qe()).map(([n])=>({props:{color:n},style:{[`&.${ve.focused} .${ve.notchedOutline}`]:{borderColor:(t.vars||t).palette[n].main}}})),{props:{},style:{[`&.${ve.error} .${ve.notchedOutline}`]:{borderColor:(t.vars||t).palette.error.main},[`&.${ve.disabled} .${ve.notchedOutline}`]:{borderColor:(t.vars||t).palette.action.disabled}}},{props:({ownerState:n})=>n.startAdornment,style:{paddingLeft:14}},{props:({ownerState:n})=>n.endAdornment,style:{paddingRight:14}},{props:({ownerState:n})=>n.multiline,style:{padding:"16.5px 14px"}},{props:({ownerState:n,size:r})=>n.multiline&&r==="small",style:{padding:"8.5px 14px"}}]}})),bo=k(fo,{name:"MuiOutlinedInput",slot:"NotchedOutline"})(ue(({theme:t})=>{const e=t.palette.mode==="light"?"rgba(0, 0, 0, 0.23)":"rgba(255, 255, 255, 0.23)";return{borderColor:t.vars?t.alpha(t.vars.palette.common.onBackground,.23):e}})),go=k(nt,{name:"MuiOutlinedInput",slot:"Input",overridesResolver:et})(ue(({theme:t})=>({padding:"16.5px 14px",...!t.vars&&{"&:-webkit-autofill":{WebkitBoxShadow:t.palette.mode==="light"?null:"0 0 0 100px #266798 inset",WebkitTextFillColor:t.palette.mode==="light"?null:"#fff",caretColor:t.palette.mode==="light"?null:"#fff",borderRadius:"inherit"}},...t.vars&&{"&:-webkit-autofill":{borderRadius:"inherit"},[t.getColorSchemeSelector("dark")]:{"&:-webkit-autofill":{WebkitBoxShadow:"0 0 0 100px #266798 inset",WebkitTextFillColor:"#fff",caretColor:"#fff"}}},variants:[{props:{size:"small"},style:{padding:"8.5px 14px"}},{props:({ownerState:e})=>e.multiline,style:{padding:0}},{props:({ownerState:e})=>e.startAdornment,style:{paddingLeft:0}},{props:({ownerState:e})=>e.endAdornment,style:{paddingRight:0}}]}))),ft=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiOutlinedInput"}),{components:i={},fullWidth:a=!1,inputComponent:s="input",label:u,multiline:m=!1,notched:v,slots:h={},slotProps:P={},type:x="text",...p}=r,y=mo(r),I=ke(),b=Ae({props:r,muiFormControl:I,states:["color","disabled","error","focused","hiddenLabel","size","required"]}),f={...r,color:b.color||"primary",disabled:b.disabled,error:b.error,focused:b.focused,formControl:I,fullWidth:a,hiddenLabel:b.hiddenLabel,multiline:m,size:b.size,type:x},F=h.root??i.Root??ho,d=h.input??i.Input??go,[c,w]=he("notchedOutline",{elementType:bo,className:y.notchedOutline,shouldForwardComponentProp:!0,ownerState:f,externalForwardedProps:{slots:h,slotProps:P},additionalProps:{label:u!=null&&u!==""&&b.required?g.jsxs(l.Fragment,{children:[u," ","*"]}):u}});return g.jsx(dt,{slots:{root:F,input:d},slotProps:P,renderSuffix:C=>g.jsx(c,{...w,notched:typeof v<"u"?v:!!(C.startAdornment||C.filled||C.focused)}),fullWidth:a,inputComponent:s,multiline:m,ref:n,type:x,...p,classes:{...y,notchedOutline:null}})});ft.muiName="Input";function Vt(t){return de("MuiSelect",t)}const Be=ae("MuiSelect",["root","select","multiple","filled","outlined","standard","disabled","focused","icon","iconOpen","iconFilled","iconOutlined","iconStandard","nativeInput","error"]);var Ot;const vo=k(Dt,{name:"MuiSelect",slot:"Select",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[{[`&.${Be.select}`]:e.select},{[`&.${Be.select}`]:e[n.variant]},{[`&.${Be.error}`]:e.error},{[`&.${Be.multiple}`]:e.multiple}]}})({[`&.${Be.select}`]:{height:"auto",minHeight:"1.4375em",textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}}),xo=k(Ut,{name:"MuiSelect",slot:"Icon",overridesResolver:(t,e)=>{const{ownerState:n}=t;return[e.icon,n.variant&&e[`icon${ne(n.variant)}`],n.open&&e.iconOpen]}})({}),yo=k("input",{shouldForwardProp:t=>ln(t)&&t!=="classes",name:"MuiSelect",slot:"NativeInput"})({bottom:0,left:0,position:"absolute",opacity:0,pointerEvents:"none",width:"100%",boxSizing:"border-box"});function zt(t,e){return typeof e=="object"&&e!==null?t===e:String(t)===String(e)}function So(t){return t==null||typeof t=="string"&&!t.trim()}const wo=t=>{const{classes:e,variant:n,disabled:r,multiple:i,open:a,error:s}=t,u={select:["select",n,r&&"disabled",i&&"multiple",s&&"error"],icon:["icon",`icon${ne(n)}`,a&&"iconOpen",r&&"disabled"],nativeInput:["nativeInput"]};return ie(u,Vt,e)},Po=l.forwardRef(function(e,n){const{"aria-describedby":r,"aria-label":i,autoFocus:a,autoWidth:s,children:u,className:m,defaultOpen:v,defaultValue:h,disabled:P,displayEmpty:x,error:p=!1,IconComponent:y,inputRef:I,labelId:b,MenuProps:f={},multiple:F,name:d,onBlur:c,onChange:w,onClose:C,onFocus:W,onKeyDown:R,onMouseDown:H,onOpen:$,open:j,readOnly:E,renderValue:D,required:_,SelectDisplayProps:U={},tabIndex:L,type:Z,value:oe,variant:O="standard",...Q}=e,[N,xe]=gt({controlled:oe,default:h,name:"Select"}),[Y,ye]=gt({controlled:j,default:v,name:"Select"}),le=l.useRef(null),re=l.useRef(null),[se,Se]=l.useState(null),{current:X}=l.useRef(j!=null),[M,A]=l.useState(),V=Ue(n,I),be=l.useCallback(S=>{re.current=S,S&&Se(S)},[]),T=se?.parentNode;l.useImperativeHandle(V,()=>({focus:()=>{re.current.focus()},node:le.current,value:N}),[N]);const z=se!==null&&Y;l.useEffect(()=>{if(!z||!T||s||typeof ResizeObserver>"u")return;const S=new ResizeObserver(()=>{A(T.clientWidth)});return S.observe(T),()=>{S.disconnect()}},[z,T,s]),l.useEffect(()=>{v&&Y&&se&&!X&&(A(s?null:T.clientWidth),re.current.focus())},[se,s]),l.useEffect(()=>{a&&re.current.focus()},[a]),l.useEffect(()=>{if(!b)return;const S=Ge(re.current).getElementById(b);if(S){const B=()=>{getSelection().isCollapsed&&re.current.focus()};return S.addEventListener("click",B),()=>{S.removeEventListener("click",B)}}},[b]);const ce=(S,B)=>{S?$&&$(B):C&&C(B),X||(A(s?null:T.clientWidth),ye(S))},ge=S=>{H?.(S),S.button===0&&(S.preventDefault(),re.current.focus(),ce(!0,S))},me=S=>{ce(!1,S)},we=l.Children.toArray(u),Ie=S=>{const B=we.find(te=>te.props.value===S.target.value);B!==void 0&&(xe(B.props.value),w&&w(S,B))},ee=S=>B=>{let te;if(B.currentTarget.hasAttribute("tabindex")){if(F){te=Array.isArray(N)?N.slice():[];const ze=N.indexOf(S.props.value);ze===-1?te.push(S.props.value):te.splice(ze,1)}else te=S.props.value;if(S.props.onClick&&S.props.onClick(B),N!==te&&(xe(te),w)){const ze=B.nativeEvent||B,bt=new ze.constructor(ze.type,ze);Object.defineProperty(bt,"target",{writable:!0,value:{value:te,name:d}}),w(bt,S)}F||ce(!1,B)}},$e=S=>{E||([" ","ArrowUp","ArrowDown","Enter"].includes(S.key)&&(S.preventDefault(),ce(!0,S)),R?.(S))},Re=S=>{!z&&c&&(Object.defineProperty(S,"target",{writable:!0,value:{value:N,name:d}}),c(S))};delete Q["aria-invalid"];let G,Ve;const Fe=[];let Te=!1;(Je({value:N})||x)&&(D?G=D(N):Te=!0);const qe=we.map(S=>{if(!l.isValidElement(S))return null;let B;if(F){if(!Array.isArray(N))throw new Error(jt(2));B=N.some(te=>zt(te,S.props.value)),B&&Te&&Fe.push(S.props.children)}else B=zt(N,S.props.value),B&&Te&&(Ve=S.props.children);return l.cloneElement(S,{"aria-selected":B?"true":"false",onClick:ee(S),onKeyUp:te=>{te.key===" "&&te.preventDefault(),S.props.onKeyUp&&S.props.onKeyUp(te)},role:"option",selected:B,value:void 0,"data-value":S.props.value})});Te&&(F?Fe.length===0?G=null:G=Fe.reduce((S,B,te)=>(S.push(B),te<Fe.length-1&&S.push(", "),S),[]):G=Ve);let Ee=M;!s&&X&&se&&(Ee=T.clientWidth);let Le;typeof L<"u"?Le=L:Le=P?null:0;const q=U.id||(d?`mui-component-select-${d}`:void 0),Pe={...e,variant:O,value:N,open:z,error:p},Oe=wo(Pe),ot={...f.PaperProps,...typeof f.slotProps?.paper=="function"?f.slotProps.paper(Pe):f.slotProps?.paper},Kt={...f.MenuListProps,...typeof f.slotProps?.list=="function"?f.slotProps.list(Pe):f.slotProps?.list},ht=Wt();return g.jsxs(l.Fragment,{children:[g.jsx(vo,{as:"div",ref:be,tabIndex:Le,role:"combobox","aria-controls":z?ht:void 0,"aria-disabled":P?"true":void 0,"aria-expanded":z?"true":"false","aria-haspopup":"listbox","aria-label":i,"aria-labelledby":[b,q].filter(Boolean).join(" ")||void 0,"aria-describedby":r,"aria-required":_?"true":void 0,"aria-invalid":p?"true":void 0,onKeyDown:$e,onMouseDown:P||E?null:ge,onBlur:Re,onFocus:W,...U,ownerState:Pe,className:pe(U.className,Oe.select,m),id:q,children:So(G)?Ot||(Ot=g.jsx("span",{className:"notranslate","aria-hidden":!0,children:""})):G}),g.jsx(yo,{"aria-invalid":p,value:Array.isArray(N)?N.join(","):N,name:d,ref:le,"aria-hidden":!0,onChange:Ie,tabIndex:-1,disabled:P,className:Oe.nativeInput,autoFocus:a,required:_,...Q,ownerState:Pe}),g.jsx(xo,{as:y,className:Oe.icon,ownerState:Pe}),g.jsx(ro,{id:`menu-${d||""}`,anchorEl:T,open:z,onClose:me,anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},...f,slotProps:{...f.slotProps,list:{"aria-labelledby":b,role:"listbox","aria-multiselectable":F?"true":void 0,disableListWrap:!0,id:ht,...Kt},paper:{...ot,style:{minWidth:Ee,...ot!=null?ot.style:null}}},children:qe})]})}),Co=t=>{const{classes:e}=t,r=ie({root:["root"]},Vt,e);return{...e,...r}},mt={name:"MuiSelect",slot:"Root",shouldForwardProp:t=>Ce(t)&&t!=="variant"},Io=k(ct,mt)(""),Fo=k(ft,mt)(""),Ro=k(ut,mt)(""),qt=l.forwardRef(function(e,n){const r=fe({name:"MuiSelect",props:e}),{autoWidth:i=!1,children:a,classes:s={},className:u,defaultOpen:m=!1,displayEmpty:v=!1,IconComponent:h=vn,id:P,input:x,inputProps:p,label:y,labelId:I,MenuProps:b,multiple:f=!1,native:F=!1,onClose:d,onOpen:c,open:w,renderValue:C,SelectDisplayProps:W,variant:R="outlined",...H}=r,$=F?uo:Po,j=ke(),E=Ae({props:r,muiFormControl:j,states:["variant","error"]}),D=E.variant||R,_={...r,variant:D,classes:s},U=Co(_),{root:L,...Z}=U,oe=x||{standard:g.jsx(Io,{ownerState:_}),outlined:g.jsx(Fo,{label:y,ownerState:_}),filled:g.jsx(Ro,{ownerState:_})}[D],O=Ue(n,an(oe));return g.jsx(l.Fragment,{children:l.cloneElement(oe,{inputComponent:$,inputProps:{children:a,error:E.error,IconComponent:h,variant:D,type:void 0,multiple:f,...F?{id:P}:{autoWidth:i,defaultOpen:m,displayEmpty:v,labelId:I,MenuProps:b,onClose:d,onOpen:c,open:w,renderValue:C,SelectDisplayProps:{id:P,...W}},...p,classes:p?at(Z,p.classes):Z,...x?x.props.inputProps:{}},...(f&&F||v)&&D==="outlined"?{notched:!0}:{},ref:O,className:pe(oe.props.className,u,U.root),...!x&&{variant:D},...H})})});qt.muiName="Select";function To(t){return de("MuiTextField",t)}ae("MuiTextField",["root"]);const Mo={standard:ct,filled:ut,outlined:ft},ko=t=>{const{classes:e}=t;return ie({root:["root"]},To,e)},Eo=k(In,{name:"MuiTextField",slot:"Root"})({}),J=l.forwardRef(function(e,n){const r=fe({props:e,name:"MuiTextField"}),{autoComplete:i,autoFocus:a=!1,children:s,className:u,color:m="primary",defaultValue:v,disabled:h=!1,error:P=!1,FormHelperTextProps:x,fullWidth:p=!1,helperText:y,id:I,InputLabelProps:b,inputProps:f,InputProps:F,inputRef:d,label:c,maxRows:w,minRows:C,multiline:W=!1,name:R,onBlur:H,onChange:$,onFocus:j,placeholder:E,required:D=!1,rows:_,select:U=!1,SelectProps:L,slots:Z={},slotProps:oe={},type:O,value:Q,variant:N="outlined",...xe}=r,Y={...r,autoFocus:a,color:m,disabled:h,error:P,fullWidth:p,multiline:W,required:D,select:U,variant:N},ye=ko(Y),le=Wt(I),re=y&&le?`${le}-helper-text`:void 0,se=c&&le?`${le}-label`:void 0,Se=Mo[N],X={slots:Z,slotProps:{input:F,inputLabel:b,htmlInput:f,formHelperText:x,select:L,...oe}},M={},A=X.slotProps.inputLabel;N==="outlined"&&(A&&typeof A.shrink<"u"&&(M.notched=A.shrink),M.label=c),U&&((!L||!L.native)&&(M.id=void 0),M["aria-describedby"]=void 0);const[V,be]=he("root",{elementType:Eo,shouldForwardComponentProp:!0,externalForwardedProps:{...X,...xe},ownerState:Y,className:pe(ye.root,u),ref:n,additionalProps:{disabled:h,error:P,fullWidth:p,required:D,color:m,variant:N}}),[T,z]=he("input",{elementType:Se,externalForwardedProps:X,additionalProps:M,ownerState:Y}),[ce,ge]=he("inputLabel",{elementType:qn,externalForwardedProps:X,ownerState:Y}),[me,we]=he("htmlInput",{elementType:"input",externalForwardedProps:X,ownerState:Y}),[Ie,ee]=he("formHelperText",{elementType:Mn,externalForwardedProps:X,ownerState:Y}),[$e,Re]=he("select",{elementType:qt,externalForwardedProps:X,ownerState:Y}),G=g.jsx(T,{"aria-describedby":re,autoComplete:i,autoFocus:a,defaultValue:v,fullWidth:p,multiline:W,name:R,rows:_,maxRows:w,minRows:C,type:O,value:Q,id:le,inputRef:d,onBlur:H,onChange:$,onFocus:j,placeholder:E,inputProps:we,slots:{input:Z.htmlInput?me:void 0},...z});return g.jsxs(V,{...be,children:[c!=null&&c!==""&&g.jsx(ce,{htmlFor:le,id:se,...ge,children:c}),U?g.jsx($e,{"aria-describedby":re,id:le,labelId:se,value:Q,input:G,...Re,children:s}):G,y&&g.jsx(Ie,{id:re,...ee,children:y})]})}),Lo=lt(g.jsx("path",{d:"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4-8 5-8-5V6l8 5 8-5z"})),Oo=lt(g.jsx("path",{d:"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1z"}));function Nt(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...At(),...t.components};return K(Xt,{children:[o(e.h1,{children:"TextField"}),`
|
|
4
|
+
`,K(e.p,{children:["The ",o(e.code,{children:"TextField"})," component is a versatile form input component that wraps the Input component with additional features like labels, helper text, and validation states. Material UI's TextField provides a consistent, accessible, and customizable input implementation for forms."]}),`
|
|
5
|
+
`,o(e.p,{children:"TextField components are used to collect user input in various formats including text, numbers, passwords, emails, and multiline text."}),`
|
|
6
|
+
`,o(e.h2,{children:"Variants"}),`
|
|
7
|
+
`,o(e.p,{children:"Material UI TextFields come in three variants to suit different design needs:"}),`
|
|
8
|
+
`,o(e.h3,{children:"Standard"}),`
|
|
9
|
+
`,o(e.p,{children:"The default variant with an underline:"}),`
|
|
10
|
+
`,o(J,{label:"Standard",variant:"standard",defaultValue:"Standard input"}),`
|
|
11
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Standard" variant="standard" defaultValue="Standard input" />
|
|
12
|
+
`})}),`
|
|
13
|
+
`,o(e.h3,{children:"Outlined"}),`
|
|
14
|
+
`,o(e.p,{children:"A variant with an outlined border:"}),`
|
|
15
|
+
`,o(J,{label:"Outlined",variant:"outlined",defaultValue:"Outlined input"}),`
|
|
16
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Outlined" variant="outlined" defaultValue="Outlined input" />
|
|
17
|
+
`})}),`
|
|
18
|
+
`,o(e.h3,{children:"Filled"}),`
|
|
19
|
+
`,o(e.p,{children:"A variant with a filled background:"}),`
|
|
20
|
+
`,o(J,{label:"Filled",variant:"filled",defaultValue:"Filled input"}),`
|
|
21
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Filled" variant="filled" defaultValue="Filled input" />
|
|
22
|
+
`})}),`
|
|
23
|
+
`,o(e.h2,{children:"Input Types"}),`
|
|
24
|
+
`,o(e.p,{children:"TextField supports various input types for different data formats:"}),`
|
|
25
|
+
`,o(e.h3,{children:"Text Input"}),`
|
|
26
|
+
`,o(J,{label:"Text",type:"text",defaultValue:"Text input"}),`
|
|
27
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Text" type="text" defaultValue="Text input" />
|
|
28
|
+
`})}),`
|
|
29
|
+
`,o(e.h3,{children:"Password Input"}),`
|
|
30
|
+
`,o(J,{label:"Password",type:"password",defaultValue:"password123"}),`
|
|
31
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Password" type="password" />
|
|
32
|
+
`})}),`
|
|
33
|
+
`,o(e.h3,{children:"Password with Toggle Visibility"}),`
|
|
34
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`const [showPassword, setShowPassword] = useState(false);
|
|
35
|
+
|
|
36
|
+
<TextField
|
|
37
|
+
label="Password"
|
|
38
|
+
type={showPassword ? "text" : "password"}
|
|
39
|
+
InputProps={{
|
|
40
|
+
endAdornment: (
|
|
41
|
+
<InputAdornment position="end">
|
|
42
|
+
<IconButton
|
|
43
|
+
onClick={() => setShowPassword(!showPassword)}
|
|
44
|
+
edge="end"
|
|
45
|
+
>
|
|
46
|
+
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
47
|
+
</IconButton>
|
|
48
|
+
</InputAdornment>
|
|
49
|
+
),
|
|
50
|
+
}}
|
|
51
|
+
/>
|
|
52
|
+
`})}),`
|
|
53
|
+
`,o(e.h3,{children:"Email Input"}),`
|
|
54
|
+
`,o(J,{label:"Email",type:"email",defaultValue:"user@example.com"}),`
|
|
55
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Email" type="email" defaultValue="user@example.com" />
|
|
56
|
+
`})}),`
|
|
57
|
+
`,o(e.h3,{children:"Number Input"}),`
|
|
58
|
+
`,o(J,{label:"Number",type:"number",defaultValue:"42"}),`
|
|
59
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Number" type="number" defaultValue="42" />
|
|
60
|
+
`})}),`
|
|
61
|
+
`,o(e.h3,{children:"Multiline Input"}),`
|
|
62
|
+
`,o(J,{label:"Multiline",multiline:!0,rows:4,defaultValue:"This is a multiline text field that can contain multiple lines of text."}),`
|
|
63
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
64
|
+
label="Multiline"
|
|
65
|
+
multiline
|
|
66
|
+
rows={4}
|
|
67
|
+
defaultValue="Multiline text"
|
|
68
|
+
/>
|
|
69
|
+
`})}),`
|
|
70
|
+
`,o(e.h2,{children:"States"}),`
|
|
71
|
+
`,o(e.h3,{children:"Default State"}),`
|
|
72
|
+
`,o(J,{label:"Default",defaultValue:"Default state"}),`
|
|
73
|
+
`,o(e.h3,{children:"Error State"}),`
|
|
74
|
+
`,o(J,{label:"Error",error:!0,helperText:"This field has an error",defaultValue:"Error state"}),`
|
|
75
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
76
|
+
label="Error"
|
|
77
|
+
error
|
|
78
|
+
helperText="This field has an error"
|
|
79
|
+
/>
|
|
80
|
+
`})}),`
|
|
81
|
+
`,o(e.h3,{children:"Disabled State"}),`
|
|
82
|
+
`,o(J,{label:"Disabled",disabled:!0,defaultValue:"Disabled input"}),`
|
|
83
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Disabled" disabled defaultValue="Disabled input" />
|
|
84
|
+
`})}),`
|
|
85
|
+
`,o(e.h3,{children:"Required Field"}),`
|
|
86
|
+
`,o(J,{label:"Required",required:!0,defaultValue:"Required field"}),`
|
|
87
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Required" required />
|
|
88
|
+
`})}),`
|
|
89
|
+
`,o(e.h2,{children:"Helper Text"}),`
|
|
90
|
+
`,o(e.p,{children:"Helper text provides additional context or validation messages:"}),`
|
|
91
|
+
`,K(vt,{sx:{display:"flex",flexDirection:"column",gap:2},children:[o(J,{label:"With Helper Text",helperText:"This is helper text",defaultValue:"Helper text example"}),o(J,{label:"Error with Helper Text",error:!0,helperText:"This field is required",defaultValue:"Error helper text"})]}),`
|
|
92
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
93
|
+
label="With Helper Text"
|
|
94
|
+
helperText="This is helper text"
|
|
95
|
+
/>
|
|
96
|
+
|
|
97
|
+
<TextField
|
|
98
|
+
label="Error with Helper Text"
|
|
99
|
+
error
|
|
100
|
+
helperText="This field is required"
|
|
101
|
+
/>
|
|
102
|
+
`})}),`
|
|
103
|
+
`,o(e.h2,{children:"Icons and Adornments"}),`
|
|
104
|
+
`,o(e.p,{children:"TextField supports icons at the start or end of the input:"}),`
|
|
105
|
+
`,o(e.h3,{children:"Start Adornment"}),`
|
|
106
|
+
`,o(J,{label:"Email",InputProps:{startAdornment:o(Rt,{position:"start",children:o(Lo,{})})},defaultValue:"user@example.com"}),`
|
|
107
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
108
|
+
label="Email"
|
|
109
|
+
InputProps={{
|
|
110
|
+
startAdornment: (
|
|
111
|
+
<InputAdornment position="start">
|
|
112
|
+
<Email />
|
|
113
|
+
</InputAdornment>
|
|
114
|
+
),
|
|
115
|
+
}}
|
|
116
|
+
/>
|
|
117
|
+
`})}),`
|
|
118
|
+
`,o(e.h3,{children:"End Adornment"}),`
|
|
119
|
+
`,o(J,{label:"Password",type:"password",InputProps:{endAdornment:o(Rt,{position:"end",children:o(Oo,{})})},defaultValue:"password123"}),`
|
|
120
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
121
|
+
label="Password"
|
|
122
|
+
type="password"
|
|
123
|
+
InputProps={{
|
|
124
|
+
endAdornment: (
|
|
125
|
+
<InputAdornment position="end">
|
|
126
|
+
<Lock />
|
|
127
|
+
</InputAdornment>
|
|
128
|
+
),
|
|
129
|
+
}}
|
|
130
|
+
/>
|
|
131
|
+
`})}),`
|
|
132
|
+
`,o(e.h2,{children:"Sizes"}),`
|
|
133
|
+
`,o(e.p,{children:"TextField comes in three sizes:"}),`
|
|
134
|
+
`,K(vt,{sx:{display:"flex",flexDirection:"column",gap:2},children:[o(J,{label:"Small",size:"small",defaultValue:"Small size"}),o(J,{label:"Medium",size:"medium",defaultValue:"Medium size"})]}),`
|
|
135
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Small" size="small" />
|
|
136
|
+
<TextField label="Medium" size="medium" />
|
|
137
|
+
`})}),`
|
|
138
|
+
`,o(e.h2,{children:"Full Width"}),`
|
|
139
|
+
`,o(e.p,{children:"TextField can span the full width of its container:"}),`
|
|
140
|
+
`,o(J,{label:"Full Width",fullWidth:!0,defaultValue:"Full width input"}),`
|
|
141
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField label="Full Width" fullWidth />
|
|
142
|
+
`})}),`
|
|
143
|
+
`,o(e.h2,{children:"Common Props"}),`
|
|
144
|
+
`,o(e.p,{children:"The TextField component accepts various props to customize its appearance and behavior:"}),`
|
|
145
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
146
|
+
variant="outlined" // 'standard' | 'outlined' | 'filled'
|
|
147
|
+
label="Label" // string
|
|
148
|
+
placeholder="Placeholder" // string
|
|
149
|
+
type="text" // 'text' | 'password' | 'email' | 'number' | etc.
|
|
150
|
+
multiline={false} // boolean
|
|
151
|
+
rows={1} // number (for multiline)
|
|
152
|
+
required={false} // boolean
|
|
153
|
+
disabled={false} // boolean
|
|
154
|
+
error={false} // boolean
|
|
155
|
+
helperText="" // string
|
|
156
|
+
fullWidth={false} // boolean
|
|
157
|
+
size="medium" // 'small' | 'medium'
|
|
158
|
+
defaultValue="" // string
|
|
159
|
+
value="" // string (controlled)
|
|
160
|
+
onChange={handleChange} // function
|
|
161
|
+
InputProps={{}} // object - for adornments, etc.
|
|
162
|
+
/>
|
|
163
|
+
`})}),`
|
|
164
|
+
`,o(e.h2,{children:"Accessibility"}),`
|
|
165
|
+
`,o(e.p,{children:"Material UI TextFields are built with accessibility in mind:"}),`
|
|
166
|
+
`,K(e.ul,{children:[`
|
|
167
|
+
`,K(e.li,{children:[o(e.strong,{children:"Labels"}),": Proper label association for screen readers"]}),`
|
|
168
|
+
`,K(e.li,{children:[o(e.strong,{children:"Error states"}),": ARIA attributes for error announcements"]}),`
|
|
169
|
+
`,K(e.li,{children:[o(e.strong,{children:"Keyboard navigation"}),": Full keyboard support for all interactions"]}),`
|
|
170
|
+
`,K(e.li,{children:[o(e.strong,{children:"Focus indicators"}),": Clear visual focus indicators"]}),`
|
|
171
|
+
`,K(e.li,{children:[o(e.strong,{children:"Helper text"}),": Properly associated with the input field"]}),`
|
|
172
|
+
`,K(e.li,{children:[o(e.strong,{children:"Required fields"}),": Clear indication for required fields"]}),`
|
|
173
|
+
`]}),`
|
|
174
|
+
`,o(e.h2,{children:"Best Practices"}),`
|
|
175
|
+
`,K(e.ol,{children:[`
|
|
176
|
+
`,K(e.li,{children:[o(e.strong,{children:"Always provide labels"})," - Labels are essential for accessibility and usability"]}),`
|
|
177
|
+
`,K(e.li,{children:[o(e.strong,{children:"Use appropriate input types"})," - Use specific types (email, password, number) for better mobile experience"]}),`
|
|
178
|
+
`,K(e.li,{children:[o(e.strong,{children:"Provide helpful error messages"})," - Use helper text to explain validation errors clearly"]}),`
|
|
179
|
+
`,K(e.li,{children:[o(e.strong,{children:"Use helper text sparingly"})," - Don't overwhelm users with too much information"]}),`
|
|
180
|
+
`,K(e.li,{children:[o(e.strong,{children:"Consider mobile users"})," - Use appropriate input types to trigger correct mobile keyboards"]}),`
|
|
181
|
+
`,K(e.li,{children:[o(e.strong,{children:"Validate on blur"})," - Show validation errors after the user leaves the field"]}),`
|
|
182
|
+
`,K(e.li,{children:[o(e.strong,{children:"Use required sparingly"})," - Only mark fields as required when they're truly necessary"]}),`
|
|
183
|
+
`,K(e.li,{children:[o(e.strong,{children:"Provide clear placeholder text"})," - Use placeholders to show expected format"]}),`
|
|
184
|
+
`]}),`
|
|
185
|
+
`,o(e.h2,{children:"Examples"}),`
|
|
186
|
+
`,o(e.h3,{children:"Login Form"}),`
|
|
187
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<Box sx={{ display: "flex", flexDirection: "column", gap: 2, maxWidth: 400 }}>
|
|
188
|
+
<TextField
|
|
189
|
+
label="Email"
|
|
190
|
+
type="email"
|
|
191
|
+
required
|
|
192
|
+
fullWidth
|
|
193
|
+
/>
|
|
194
|
+
<TextField
|
|
195
|
+
label="Password"
|
|
196
|
+
type="password"
|
|
197
|
+
required
|
|
198
|
+
fullWidth
|
|
199
|
+
/>
|
|
200
|
+
</Box>
|
|
201
|
+
`})}),`
|
|
202
|
+
`,o(e.h3,{children:"Search Input"}),`
|
|
203
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`<TextField
|
|
204
|
+
label="Search"
|
|
205
|
+
placeholder="Search..."
|
|
206
|
+
InputProps={{
|
|
207
|
+
startAdornment: (
|
|
208
|
+
<InputAdornment position="start">
|
|
209
|
+
<SearchIcon />
|
|
210
|
+
</InputAdornment>
|
|
211
|
+
),
|
|
212
|
+
}}
|
|
213
|
+
fullWidth
|
|
214
|
+
/>
|
|
215
|
+
`})}),`
|
|
216
|
+
`,o(e.h3,{children:"Form with Validation"}),`
|
|
217
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`const [email, setEmail] = useState("");
|
|
218
|
+
const [error, setError] = useState(false);
|
|
219
|
+
|
|
220
|
+
const handleEmailChange = (event) => {
|
|
221
|
+
const value = event.target.value;
|
|
222
|
+
setEmail(value);
|
|
223
|
+
setError(!value.includes("@"));
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
<TextField
|
|
227
|
+
label="Email"
|
|
228
|
+
type="email"
|
|
229
|
+
value={email}
|
|
230
|
+
onChange={handleEmailChange}
|
|
231
|
+
error={error}
|
|
232
|
+
helperText={error ? "Please enter a valid email address" : ""}
|
|
233
|
+
required
|
|
234
|
+
/>
|
|
235
|
+
`})}),`
|
|
236
|
+
`,o(e.h3,{children:"Multiline with Character Count"}),`
|
|
237
|
+
`,o(e.pre,{children:o(e.code,{className:"language-jsx",children:`const [value, setValue] = useState("");
|
|
238
|
+
const maxLength = 200;
|
|
239
|
+
|
|
240
|
+
<TextField
|
|
241
|
+
label="Description"
|
|
242
|
+
multiline
|
|
243
|
+
rows={4}
|
|
244
|
+
value={value}
|
|
245
|
+
onChange={(e) => setValue(e.target.value)}
|
|
246
|
+
helperText={\`\${value.length}/\${maxLength} characters\`}
|
|
247
|
+
inputProps={{ maxLength }}
|
|
248
|
+
/>
|
|
249
|
+
`})}),`
|
|
250
|
+
`,o(e.h2,{children:"Documentation"}),`
|
|
251
|
+
`,K(e.ul,{children:[`
|
|
252
|
+
`,o(e.li,{children:o(e.a,{href:"https://mui.com/material-ui/react-text-field/",children:"Material UI - TextField"})}),`
|
|
253
|
+
`]})]})}function jo(t={}){const{wrapper:e}={...At(),...t.components};return e?o(e,{...t,children:o(Nt,{...t})}):Nt(t)}export{jo as default};
|