https://material-ui.netlify.app/_next/static/chunks/pages/experiments/docs/demos-1d0be2867ba91a86.js
1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33591,94356],{4727:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>s});var a=t(29495),o=t(80384);let s=(0,a.A)((0,o.jsx)("path",{d:"M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1"}),"DarkMode")},6217:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>x});var a=t(80384),o=t(63144),s=t(85526),r=t(80182),l=t(11987),i=t(52615),c=t(14110),d=t(81875),p=t(16728),u=t(86781),m=t(22785),h=t(30576),f=t(10409);let g=[{field:"name",headerName:"Name",width:120,editable:!0},{field:"avatar",headerName:"Avatar",display:"flex",renderCell:i.renderAvatar,valueGetter:(e,n)=>null==n.name||null==n.avatar?null:{name:n.name,color:n.avatar},sortable:!1,filterable:!1},{field:"email",headerName:"Email",renderCell:c.renderEmail,width:150,editable:!0},{field:"rating",headerName:"Rating",display:"flex",renderCell:d.renderRating,renderEditCell:d.renderEditRating,width:180,type:"number",editable:!0,availableAggregationFunctions:["avg","min","max","size"]},{field:"country",headerName:"Country",type:"singleSelect",valueOptions:s.COUNTRY_ISO_OPTIONS_SORTED,valueFormatter:e=>e?.label,renderCell:p.renderCountry,renderEditCell:p.renderEditCountry,sortComparator:(e,n,t,a)=>(0,r.Az)(e.label,n.label,t,a),width:150,editable:!0},{field:"salary",headerName:"Salary",type:"number",valueFormatter:e=>e&&"number"==typeof e?`$${e.toLocaleString()}`:e,editable:!0},{field:"monthlyActivity",headerName:"Monthly activity",type:"custom",resizable:!1,filterable:!1,sortable:!1,editable:!1,groupable:!1,display:"flex",renderCell:u.renderSparkline,width:150,valueGetter:(e,n)=>n.monthlyActivity},{field:"budget",headerName:"Budget left",renderCell:m.renderProgress,renderEditCell:m.renderEditProgress,availableAggregationFunctions:["min","max","avg","size"],type:"number",width:120,editable:!0},{field:"status",headerName:"Status",renderCell:h.renderStatus,renderEditCell:h.renderEditStatus,type:"singleSelect",valueOptions:s.STATUS_OPTIONS,width:150,editable:!0},{field:"incoTerm",headerName:"Incoterm",renderCell:f.renderIncoterm,renderEditCell:f.renderEditIncoterm,type:"singleSelect",valueOptions:s.INCOTERM_OPTIONS,editable:!0}],v=Array.from({length:10},(e,n)=>({id:n,name:(0,o.Zm)({},{}),avatar:(0,o.XL)(),email:(0,o.os)(),rating:(0,o.HG)(),country:(0,o.Ux)(),salary:(0,o.HO)(35e3,8e4),monthlyActivity:Array.from({length:30},()=>(0,o.HO)(1,25)),budget:(0,o.Nn)({quantity:100}),status:(0,o.a5)(),incoTerm:(0,o.vh)()}));function x(){return(0,a.jsx)("div",{style:{height:400,width:"100%"},children:(0,a.jsx)(l.z,{rows:v,columns:g})})}},6686:(e,n,t)=>{"use strict";t.r(n),t.d(n,{boxClasses:()=>o.A,default:()=>a.A});var a=t(95427),o=t(75687)},7694:(e,n,t)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/experiments/docs/demos",function(){return t(35257)}])},10409:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>x,renderEditIncoterm:()=>v,renderIncoterm:()=>g});var a=t(80384),o=t(19340),s=t(95427),r=t(69473),l=t(32669),i=t(55021),c=t(68807),d=t(24691),p=t(84306),u=t(32768),m=t(85526);let h=o.memo(function(e){let{value:n}=e;if(!n)return null;let t=n.toString(),o=t.slice(t.indexOf("(")+1,t.indexOf(")")),r=t.slice(0,t.indexOf("(")).trim();return(0,a.jsxs)(s.A,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[(0,a.jsx)("span",{children:r}),(0,a.jsx)(d.A,{title:o,children:(0,a.jsx)(p.default,{sx:{color:"#2196f3",alignSelf:"center",ml:"8px"}})})]})});function f(e){let{id:n,value:t,field:o}=e,s=(0,u.h)(),d=async e=>{await s.current.setEditCellValue({id:n,field:o,value:e.target.value},e),s.current.stopCellEditMode({id:n,field:o})};return(0,a.jsx)(c.A,{value:t,onChange:d,MenuProps:{onClose:(e,t)=>{"backdropClick"===t&&s.current.stopCellEditMode({id:n,field:o})}},sx:{height:"100%","& .MuiSelect-select":{display:"flex",alignItems:"center",pl:1}},autoFocus:!0,fullWidth:!0,open:!0,children:m.INCOTERM_OPTIONS.map(e=>{let n=e.slice(e.indexOf("(")+1,e.indexOf(")")),t=e.slice(0,e.indexOf("(")).trim();return(0,a.jsxs)(i.A,{value:e,children:[(0,a.jsx)(r.A,{sx:{minWidth:36},children:t}),(0,a.jsx)(l.A,{primary:n,sx:{overflow:"hidden"}})]},e)})})}function g(e){return(0,a.jsx)(h,{value:e.value})}function v(e){return(0,a.jsx)(f,{...e})}let x=g},14110:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>i,renderEmail:()=>l});var a=t(80384),o=t(19340);let s=(0,t(49724).Ay)("a")({textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",color:"inherit"}),r=o.memo(function(e){return(0,a.jsx)(s,{tabIndex:e.tabIndex,onClick:e=>{e.preventDefault(),e.stopPropagation()},href:e.href,children:e.children})});function l(e){let n=e.value??"";return(0,a.jsx)(r,{href:`mailto:${n}`,tabIndex:e.tabIndex,children:n})}let i=l},16523:(e,n,t)=>{"use strict";t.r(n),t.d(n,{ColorSchemeTabsBasic:()=>x,default:()=>k});var a=t(80384),o=t(4727),s=t(66233),r=t(63584),l=t(6181),i=t(62291),c=t(38390),d=t(27099),p=t(5999),u=t(95427),m=t(42867),h=t(92183),f=t(83075),g=t(79905);let v="44px";function x(){let{mode:e,setMode:n}=(0,l.Ut)();return e?(0,a.jsxs)(g.A,{defaultValue:"system",row:!0,"aria-label":"demo-mode-toggle-iframe",name:"color-scheme-segmented-control",sx:{dis
1play:"flex",gap:"4px","& svg":{transform:"scale(0.8)",transition:"0.2s"},[`& .${h.A.checked} svg`]:{transform:"scale(1)"},[`& .${h.A.root}`]:{width:v,height:v,border:"1px solid transparent",borderRadius:"8px",[`&.${h.A.checked}`]:{border:"1px solid",borderColor:"divider",color:"text.primary"}},"& label":{margin:0}},onChange:e=>{n(e.target.value)},children:[(0,a.jsx)(m.A,{value:"light",control:(0,a.jsx)(f.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(s.default,{}),icon:(0,a.jsx)(s.default,{})}),label:""}),(0,a.jsx)(m.A,{value:"system",control:(0,a.jsx)(f.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(r.default,{}),icon:(0,a.jsx)(r.default,{})}),label:""}),(0,a.jsx)(m.A,{value:"dark",control:(0,a.jsx)(f.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(o.default,{}),icon:(0,a.jsx)(o.default,{})}),label:""})]}):(0,a.jsxs)(u.A,{sx:{display:"grid",alignItems:"center",height:"44px",gap:"4px",opacity:.5,gridTemplateColumns:`repeat(3, ${v})`,placeItems:"center",color:"text.primary","& > div":{lineHeight:0},"& svg":{transform:"scale(0.8)"}},children:[(0,a.jsx)("div",{children:(0,a.jsx)(s.default,{})}),(0,a.jsx)("div",{children:(0,a.jsx)(r.default,{})}),(0,a.jsx)("div",{children:(0,a.jsx)(o.default,{})})]})}function k(e){return(0,a.jsxs)(i.A,{...e,theme:(0,c.A)({colorSchemes:{light:!0,dark:!0},cssVariables:{cssVarPrefix:e.cssVarPrefix,colorSchemeSelector:e.colorSchemeSelector||"class"}}),children:[(0,a.jsx)(d.Ay,{}),(0,a.jsx)(p.A,{"data-element":"demo-mode-toggle-iframe-paper",sx:{p:2,display:"flex",justifyContent:"center"},children:(0,a.jsx)(x,{})})]})}},16728:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>v,renderCountry:()=>f,renderEditCountry:()=>g});var a=t(80384),o=t(19340),s=t(32768),r=t(85526),l=t(82125),i=t(65265),c=t(95427),d=t(61119),p=t(49724);let u=o.memo(function(e){let{value:n}=e;return(0,a.jsxs)(c.A,{sx:{width:"100%",display:"flex",alignItems:"center","& > img":{mr:.5,flexShrink:0,width:"20px"}},children:[(0,a.jsx)("img",{loading:"lazy",width:"20",src:`https://flagcdn.com/w20/${n.code.toLowerCase()}.png`,srcSet:`https://flagcdn.com/w40/${n.code.toLowerCase()}.png 2x`,alt:""}),(0,a.jsx)(c.A,{component:"span",sx:{overflow:"hidden",textOverflow:"ellipsis"},children:n.label})]})}),m=(0,p.Ay)(l.A)(({theme:e})=>({height:"100%",[`& .${i.A.inputRoot}`]:{...e.typography.body2,padding:"1px 0",height:"100%","& input":{padding:"0 16px",height:"100%"}}}));function h(e){let{id:n,value:t,field:l}=e,i=(0,s.h)(),p=o.useCallback(async(e,t)=>{await i.current.setEditCellValue({id:n,field:l,value:t},e),i.current.stopCellEditMode({id:n,field:l})},[i,l,n]);return(0,a.jsx)(m,{value:t,onChange:p,options:r.COUNTRY_ISO_OPTIONS,getOptionLabel:e=>e.label,autoHighlight:!0,fullWidth:!0,open:!0,disableClearable:!0,renderOption:(e,n)=>(0,o.createElement)(c.A,{component:"li",sx:{"& > img":{mr:1.5,flexShrink:0}},...e,key:n.code,children:[(0,a.jsx)("img",{loading:"lazy",width:"20",src:`https://flagcdn.com/w20/${n.code.toLowerCase()}.png`,srcSet:`https://flagcdn.com/w40/${n.code.toLowerCase()}.png 2x`,alt:""}),n.label]}),renderInput:e=>(0,a.jsx)(d.Ay,{autoFocus:!0,fullWidth:!0,id:e.id,inputProps:{...e.inputProps,autoComplete:"new-password"},...e.InputProps})})}function f(e){return null==e.value?"":(0,a.jsx)(u,{value:e.value})}function g(e){return(0,a.jsx)(h,{...e})}let v=f},16901:(e,n,t)=>{"use strict";t.d(n,{A:()=>r,B:()=>s});var a=t(5339),o=t(42715);function s(e){return(0,o.Ay)("MuiRadioGroup",e)}let r=(0,a.A)("MuiRadioGroup",["root","row","error"])},17758:(e,n,t)=>{"use strict";t.d(n,{A:()=>a});let a=t(19340).createContext(void 0)},17904:(e,n,t)=>{"use strict";t.d(n,{A:()=>a});let a=t(92223).A},18454:(e,n,t)=>{"use strict";t.d(n,{A:()=>o});var a=t(67395);function o(e,n={}){let{breakpoints:t=["sm","md","lg"],disableAlign:s=!1,factor:r=2,variants:l=["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","button","overline"]}=n,i={...e};i.typography={...i.typography};let c=i.typography,d=(0,a.I3)(c.htmlFontSize),p=t.map(e=>i.breakpoints.values[e]);return l.forEach(e=>{let n=c[e];if(!n)return;let t=parseFloat(d(n.fontSize,"rem"));if(t<=1)return;let{lineHeight:o}=n;
1if(!(0,a.a9)(o)&&!s)throw Error("MUI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.");(0,a.a9)(o)||(o=parseFloat(d(o,"rem"))/parseFloat(t));let l=null;s||(l=e=>(0,a.VR)({size:e,grid:(0,a.qW)({pixels:4,lineHeight:o,htmlFontSize:c.htmlFontSize})}));let i=(0,a.yL)({cssProperty:"fontSize",min:1+(t-1)/r,max:t,unit:"rem",breakpoints:p,transform:l});if(p.length>0){let e=p[p.length-1];i[`@media (min-width:${e}px)`]={fontSize:`${Math.round(1e4*t)/1e4}rem`}}c[e]={...n,...i}}),i}},22785:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>w,renderEditProgress:()=>C,renderProgress:()=>y});var a=t(80384),o=t(19340),s=t(9281),r=t(32768),l=t(9588),i=t(65923),c=t(24691),d=t(49724),p=t(99669),u=t(80271);let m=(0,d.Ay)("div")({height:"100%",display:"flex",alignItems:"center"}),h=(0,d.Ay)("div")(({theme:e})=>({border:`1px solid ${(e.vars||e).palette.divider}`,position:"relative",overflow:"hidden",width:"100%",height:26,borderRadius:2})),f=(0,d.Ay)("div")({position:"absolute",lineHeight:"24px",width:"100%",display:"flex",justifyContent:"center"}),g=(0,d.Ay)("div")({height:"100%","&.low":{backgroundColor:"#f44336"},"&.medium":{backgroundColor:"#efbb5aa3"},"&.high":{backgroundColor:"#088208a3"}}),v=o.memo(function(e){let{value:n}=e,t=100*n;return(0,a.jsxs)(h,{children:[(0,a.jsx)(f,{children:`${t.toLocaleString()} %`}),(0,a.jsx)(g,{className:(0,s.A)({low:t<30,medium:t>=30&&t<=70,high:t>70}),style:{maxWidth:`${t}%`}})]})}),x=(0,d.Ay)(l.Ay)(({theme:e})=>({display:"flex",height:"100%",width:"100%",alignItems:"center",justifyContent:"center",padding:0,borderRadius:0,[`& .${i.A.rail}`]:{height:"100%",backgroundColor:"transparent"},[`& .${i.A.track}`]:{height:"100%",transition:e.transitions.create("background-color",{duration:e.transitions.duration.shorter}),"&.low":{backgroundColor:"#f44336"},"&.medium":{backgroundColor:"#efbb5aa3"},"&.high":{backgroundColor:"#088208a3"}},[`& .${i.A.thumb}`]:{height:"100%",width:5,borderRadius:0,marginTop:0,backgroundColor:(0,p.X4)("#000000",.2)}})),k=o.memo(function(e){let{children:n,open:t,value:o}=e;return(0,a.jsx)(c.A,{open:t,enterTouchDelay:0,placement:"top",title:o,children:n})});function b(e){let{id:n,value:t,field:l}=e,[i,c]=o.useState(Number(t)),d=(0,r.h)(),p=o.useCallback(e=>{d.current.setEditCellValue({id:n,field:l,value:e})},[d,l,n]),m=o.useMemo(()=>(0,u.A)(p,60),[p]);return o.useEffect(()=>{c(Number(t))},[t]),(0,a.jsx)(x,{ref:e=>{e&&e.querySelector('[type="range"]').focus()},classes:{track:(0,s.A)({low:i<.3,medium:i>=.3&&i<=.7,high:i>.7})},value:i,max:1,step:1e-5,onChange:(e,n)=>{c(n),m(n)},components:{ValueLabel:k},valueLabelDisplay:"auto",valueLabelFormat:e=>`${(100*e).toLocaleString()} %`})}function y(e){return null==e.value?"":(0,a.jsx)(m,{children:(0,a.jsx)(v,{value:e.value})})}function C(e){return(0,a.jsx)(b,{...e})}let w=y},26972:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a.A,stackClasses:()=>o});var a=t(27955);let o=(0,t(5339).A)("MuiStack",["root"])},30576:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>S,renderEditStatus:()=>w,renderStatus:()=>C});var a=t(80384),o=t(19340),s=t(66501),r=t(69473),l=t(32669),i=t(55021),c=t(68807),d=t(49724),p=t(1655),u=t(84306),m=t(19444),h=t(64098),f=t(70231),g=t(32768),v=t(741),x=t(85526);let k=(0,d.Ay)(s.A)(({theme:e})=>({justifyContent:"left","& .icon":{color:"inherit"},"&.Open":{color:(e.vars||e).palette.info.dark,border:`1px solid ${(e.vars||e).palette.info.main}`},"&.Filled":{color:(e.vars||e).palette.success.dark,border:`1px solid ${(e.vars||e).palette.success.main}`},"&.PartiallyFilled":{color:(e.vars||e).palette.warning.dark,border:`1px solid ${(e.vars||e).palette.warning.main}`},"&.Rejected":{color:(e.vars||e).palette.error.dark,border:`1px solid ${(e.vars||e).palette.error.main}`}})),b=o.memo(e=>{let{status:n}=e,t=null;"Rejected"===n?t=(0,a.jsx)(p.A,{className:"icon"}):"Open"===n?t=(0,a.jsx)(u.default,{className:"icon"}):"PartiallyFilled"===n?t=(0,a.jsx)(m.A,{className:"icon"}):"Filled"===n&&(t=(0,a.jsx)(h.default,{className:"icon"}));let o=n;return"PartiallyFilled"===n&&(o="Partially Filled"),(0,a.jsx)(k,{className:n,icon:t,size:"small",label:o,variant:"outlined"})});function y(e){let{id:n,value:t,field:o}=e,s=(0,f.A)(),d=(0,g.h)(),k=async e=>{await d.current.setEditCellValue({id:n,field:o,value:e.target.value})&&s.editMode===v.RL.Cell&&d.current.stopCellEditMode({id:n,field:o,cellToFocusAfter:"below"})};return(0,a.jsx)(c.A,{value:t,onChange:k,MenuProps:{onClose:(e,t)=>{"backdropClick"===t&&d.current.stopCellEditMode({id:n,field:o,ignoreModifications:!0})}},sx:{height:"100%","& .MuiSelect-select":{display:"flex",alignItems:"center",pl:1}},autoFocus:!0,fullWidth:!0,open:!0,children:x.STATUS_OPTIONS.map(e=>{let n=null;"Rejected"===e?n=p.A:"Open"===e?n=u.default:"PartiallyFilled"===e?n=m.A:"Filled"===e&&(n=h.default);let t=e;return"PartiallyFilled"===e&&(t="Partially Filled"),(0,a.jsxs)(i.A,{value:e,children:[(0,a.jsx)(r.A,{sx:{minWidth:36},children:(0,a.jsx)(n,{fontSize:"small"})}),(0,a.jsx)(l.A,{primary:t,sx:{overflow:"hidden"}})]},e)})})}function C(e){return null==e.value?"":(0,a.jsx)(b,{status:e.value})}function w(e){return(0,a.jsx)(y,{...e})}let S=C},34899:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a.Ay});var a=t(27099)},35257:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>B});var a={};t.r(a),t.d(a,{demoComponents:()=>$,demos:()=>V,docs:()=>N,srcComponents:()=>q});var o=t(80384),s=t(70418),r=t(84221),l=t(26972),i=t(68287),c=t(85526),d=t(15688),p=t(52615
1),u=t(14110),m=t(81875),h=t(16728),f=t(86781),g=t(22785),v=t(30576),x=t(10409),k=t(4727),b=t(66233),y=t(63584),C=t(41489),w=t(98161),S=t(6686),A=t(90096),T=t(81392),j=t(78109),I=t(48541),M=t(34899),R=t(78040),P=t(50981),E=t(6217),D=t(56183),O=t(98993),L=t(16523);let N={en:{description:"The different variants of demo containers we have in the docs.",location:"/docs/pages/experiments/docs/demos.md",rendered:['<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="error-icon" viewBox="0 0 20 20">\n<path fill-rule="evenodd" d="M2 7.4v5.2a2 2 0 0 0 .586 1.414l3.4 3.4A2 2 0 0 0 7.4 18h5.2a2 2 0 0 0 1.414-.586l3.4-3.4A2 2 0 0 0 18 12.6V7.4a2 2 0 0 0-.586-1.414l-3.4-3.4A2 2 0 0 0 12.6 2H7.4a2 2 0 0 0-1.414.586l-3.4 3.4A2 2 0 0 0 2 7.4Zm11.03-.43a.75.75 0 0 1 0 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 1.06-1.06L10 8.94l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="warning-icon" viewBox="0 0 20 20">\n<path d="M2.33 17a.735.735 0 0 1-.665-.375.631.631 0 0 1-.094-.375.898.898 0 0 1 .115-.396L9.353 3.062a.621.621 0 0 1 .281-.27.85.85 0 0 1 .729 0 .622.622 0 0 1 .281.27l7.667 12.792c.07.125.108.257.114.396a.63.63 0 0 1-.093.375.842.842 0 0 1-.271.27.728.728 0 0 1-.394.105H2.33Zm7.664-2.5c.211 0 .39-.072.536-.214a.714.714 0 0 0 .218-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.531-.22.736.736 0 0 0-.536.215.714.714 0 0 0-.219.531c0 .212.072.39.215.536.143.146.32.219.531.219Zm0-2.5c.211 0 .39-.072.536-.216a.72.72 0 0 0 .218-.534v-2.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.531-.216.734.734 0 0 0-.536.216.72.72 0 0 0-.219.534v2.5c0 .212.072.39.215.534a.72.72 0 0 0 .531.216Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="success-icon" viewBox="0 0 20 20">\n<path d="m8.938 10.875-1.25-1.23a.718.718 0 0 0-.521-.228.718.718 0 0 0-.521.229.73.73 0 0 0 0 1.062l1.77 1.771c.153.153.327.23.521.23a.718.718 0 0 0 .521-.23l3.896-3.896a.73.73 0 0 0 0-1.062.718.718 0 0 0-.52-.23.718.718 0 0 0-.521.23l-3.376 3.354ZM10 18a7.796 7.796 0 0 1-3.104-.625 8.065 8.065 0 0 1-2.552-1.719 8.064 8.064 0 0 1-1.719-2.552A7.797 7.797 0 0 1 2 10c0-1.111.208-2.15.625-3.115a8.064 8.064 0 0 1 4.27-4.26A7.797 7.797 0 0 1 10 2c1.111 0 2.15.208 3.115.625a8.096 8.096 0 0 1 4.26 4.26C17.792 7.851 18 8.89 18 10a7.797 7.797 0 0 1-.625 3.104 8.066 8.066 0 0 1-4.26 4.271A7.774 7.774 0 0 1 10 18Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="info-icon" viewBox="0 0 20 20">\n<path d="M9.996 14c.21 0 .39-.072.535-.216a.72.72 0 0 0 .219-.534v-3.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.532-.216.734.734 0 0 0-.535.216.72.72 0 0 0-.219.534v3.5c0 .213.071.39.214.534a.72.72 0 0 0 .532.216Zm0-6.5c.21 0 .39-.071.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219Zm.01 10.5a7.81 7.81 0 0 1-3.11-.625 8.065 8.065 0 0 1-2.552-1.719 8.066 8.066 0 0 1-1.719-2.551A7.818 7.818 0 0 1 2 9.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.818 7.818 0 0 1 10.009 2a7.75 7.75 0 0 1 3.106.625 8.083 8.083 0 0 1 4.26 4.265A7.77 7.77 0 0 1 18 9.994a7.81 7.81 0 0 1-.625 3.11 8.066 8.066 0 0 1-1.719 2.552 8.083 8.083 0 0 1-2.546 1.719 7.77 7.77 0 0 1-3.104.625Z"/>\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="copied-icon" viewBox="0 0 24 24">\n<path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="copy-icon" viewBox="0 0 24 24">\n<path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />\n+</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
1\n<symbol id="anchor-link-icon" viewBox="0 0 12 6">\n<path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />\n</symbol>\n</svg>','<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">\n<symbol id="comment-link-icon" viewBox="0 0 24 24">\n<path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />\n</symbol>\n</svg>','<h1>Demos</h1><p class="description">The different variants of demo containers we have in the docs.</p><h2 id="standard-demo"><a href="#standard-demo" class="title-link-to-anchor">Standard demo<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="standard-demo"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>"Standard" refers to when no background is explicitly defined.\nSo, it renders the "outlined" background variant.</p>\n',{demo:"DemoInDocs.js"},'<h2 id="bg-outlined"><a href="#bg-outlined" class="title-link-to-anchor">"bg": "outlined"<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="bg-outlined"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocs.js",bg:"outlined"},'<h2 id="bg-inline"><a href="#bg-inline" class="title-link-to-anchor">"bg": "inline"<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="bg-inline"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocs.js",bg:"inline"},'<h2 id="bg-true"><a href="#bg-true" class="title-link-to-anchor">"bg": true<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="bg-true"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocs.js",bg:!0},'<h2 id="bg-gradient"><a href="#bg-gradient" class="title-link-to-anchor">"bg": gradient<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="bg-gradient"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocs.js",bg:"gradient"},'<h2 id="hidetoolbar-true"><a href="#hidetoolbar-true" class="title-link-to-anchor">"hideToolbar": true<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="hidetoolbar-true"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocsNotEditable.js",hideToolbar:!0}
1,'<h2 id="hidetoolbar-true-bg-true"><a href="#hidetoolbar-true-bg-true" class="title-link-to-anchor">"hideToolbar": true, "bg": true<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="hidetoolbar-true-bg-true"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocsNotEditable.js",hideToolbar:!0,bg:!0},'<h2 id="hidetoolbar-true-bg-inline"><a href="#hidetoolbar-true-bg-inline" class="title-link-to-anchor">"hideToolbar": true, "bg": "inline"<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="hidetoolbar-true-bg-inline"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoInDocsNotEditable.js",hideToolbar:!0,bg:"inline"},'<h2 id="multiple-tabs-demo"><a href="#multiple-tabs-demo" class="title-link-to-anchor">Multiple Tabs demo<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="multiple-tabs-demo"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>',{demo:"DemoMultiTabs.js",bg:"inline"},'<h2 id="isolated-demo"><a href="#isolated-demo" class="title-link-to-anchor">Isolated demo<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="isolated-demo"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Isolated demos are disconnected from the page's theme and color scheme.\nThey are like mini apps within the documentation.</p>\n<p>When <code>isolated: true</code> is set to the demo options, the demo will get props for creating isolated demo.\nThose props should be passed to the <code>ThemeProvider</code> of the demo.</p>\n<h3 id="basic-theme"><a href="#basic-theme" class="title-link-to-anchor">Basic theme<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-theme"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><div class="MuiCode-root"><div class="MuiCode-title">DemoIsolated.js</div><pre><code class="language-js title="DemoIsolated.js""><span class="token keyword">import</span> <span class="token punctuation">{</span> ThemeProvider<span class="token punctuation">,</span> createTheme<span class="token punctuation">,</span> useColorScheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@mui/material/styles\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">ModeToggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> mode<span class="token punctuation">,</span> setMode <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useColorScheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">DemoIsolated</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span>\n <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span>
1\n <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token comment">// ...custom theme</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token operator">...</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<h3 id="mode-toggle-with-css-variables"><a href="#mode-toggle-with-css-variables" class="title-link-to-anchor">Mode toggle with CSS variables<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="mode-toggle-with-css-variables"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3>',{demo:"DemoModeToggle.js",isolated:!0,bg:"inline"},'<div class="MuiCode-root"><div class="MuiCode-title">DemoModeToggle.js</div><pre><code class="language-js title="DemoModeToggle.js""><span class="token keyword">import</span> <span class="token punctuation">{</span> ThemeProvider<span class="token punctuation">,</span> createTheme<span class="token punctuation">,</span> useColorScheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@mui/material/styles\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">ModeToggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> mode<span class="token punctuation">,</span> setMode <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useColorScheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">DemoModeToggle</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span>\n <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span>\n <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">colorSchemes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">light</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">dark</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
1\n <span class="token literal-property property">cssVariables</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// required to make the demo isolated</span>\n <span class="token literal-property property">cssVarPrefix</span><span class="token operator">:</span> props<span class="token punctuation">.</span>cssVarPrefix<span class="token punctuation">,</span>\n <span class="token literal-property property">colorSchemeSelector</span><span class="token operator">:</span> props<span class="token punctuation">.</span>colorSchemeSelector <span class="token operator">||</span> <span class="token string">\'class\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token operator">...</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<aside class="MuiCallout-root MuiCallout-info"><div class="MuiCallout-icon-container">\n<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24">\n<use class="MuiCode-copied-icon" xlink:href="#info-icon" />\n</svg>\n</div><div class="MuiCallout-content"><p>The demo with <code>isolated</code> will always set to <code>system</code> mode when refresh the page. It will not store the selected mode to the local storage.</p>\n</div></aside><h3 id="custom-theme-with-css-variables"><a href="#custom-theme-with-css-variables" class="title-link-to-anchor">Custom theme with CSS variables<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="custom-theme-with-css-variables"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Provide custom palettes to light and/or dark color schemes.</p>\n',{demo:"DemoModeToggleCustomTheme.js",isolated:!0,bg:"inline",theme:"dark"},'<div class="MuiCode-root"><div class="MuiCode-title">DemoModeToggleCustomTheme.js</div><pre><code class="language-js title="DemoModeToggleCustomTheme.js""><span class="token keyword">import</span> <span class="token punctuation">{</span> ThemeProvider<span class="token punctuation">,</span> createTheme<span class="token punctuation">,</span> useColorScheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@mui/material/styles\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">DemoModeToggleCustomTheme</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">cssVariables</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">cssVarPrefix</span><span class="token operator">:</span> props<span class="token punctuation">.</span>cssVarPrefix<span class="token punctuation">,</span>
1\n <span class="token literal-property property">colorSchemeSelector</span><span class="token operator">:</span> props<span class="token punctuation">.</span>colorSchemeSelector <span class="token operator">||</span> <span class="token string">\'class\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">colorSchemes</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">light</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">palette</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// ...custom palette</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">dark</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">palette</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// ...custom palette</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token operator">...</span>props<span class="token punctuation">}</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token operator">...</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><button data-ga-event-category="code" data-ga-event-action="copy-click" aria-label="Copy the code" class="MuiCode-copy"><span class="MuiCode-copy-label">Copy</span><span class="MuiCode-copied-label">Copied</span><span class="MuiCode-copyKeypress"><span>(or</span> <span class="MuiCode-copyKeypressKey" role="img" aria-label="Ctrl or CMD"></span>C<span>)</span></span></button></div>\n<h3 id="iframe-demo"><a href="#iframe-demo" class="title-link-to-anchor">Iframe demo<span class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></span></a><button title="Post a comment" class="comment-link" data-feedback-hash="iframe-demo"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p><code>isolated: true</code> can be used with iframe demos. The difference is that the node to attach the color scheme selector will be the <code>html</code> of the iframe instead of the demo container.</p>\n',{demo:"DemoModeToggleIframe.js",bg:"inline",defaultCodeOpen:!1,iframe:!0,isolated:!0}],toc:[{text:"Standard demo",level:2,hash:"standard-demo",children:[]},{text:""bg": "outlined"",level:2,hash:"bg-outlined",children:[]},{text:""bg": "inline"",level:2,hash:"bg-inline",children:[]},{text:""bg": true",level:2,hash:"bg-true",children:[]},{text:""bg": gradient",level:2,hash:"bg-gradient",children:[]},{text:""hideToolbar": true",level:2,hash:"hidetoolbar-true",children:[]},{text:""hideToolbar": true, "bg"
1: true",level:2,hash:"hidetoolbar-true-bg-true",children:[]},{text:""hideToolbar": true, "bg": "inline"",level:2,hash:"hidetoolbar-true-bg-inline",children:[]},{text:"Multiple Tabs demo",level:2,hash:"multiple-tabs-demo",children:[]},{text:"Isolated demo",level:2,hash:"isolated-demo",children:[{text:"Basic theme",level:3,hash:"basic-theme"},{text:"Mode toggle with CSS variables",level:3,hash:"mode-toggle-with-css-variables"},{text:"Custom theme with CSS variables",level:3,hash:"custom-theme-with-css-variables"},{text:"Iframe demo",level:3,hash:"iframe-demo"}]}],title:"Demos",headers:{components:[]}}},V={"DemoInDocs.js":{module:"./DemoInDocs.js",raw:"import Alert from '@mui/material/Alert';\nimport Stack from '@mui/material/Stack';\n\nexport default function DemoInDocs() {\n return (\n <Stack sx={{ width: '100%' }} spacing={2}>\n <Alert severity=\"info\">This is an info alert â check it out!</Alert>\n <Alert severity=\"success\">This is a success alert â check it out!</Alert>\n </Stack>\n );\n}\n",jsxPreview:'<Alert severity="info">This is an info alert â check it out!</Alert>\n<Alert severity="success">This is a success alert â check it out!</Alert>'},"DemoInDocsNotEditable.js":{module:"./DemoInDocsNotEditable.js",raw:"import Alert from '@mui/material/Alert';\nimport Stack from '@mui/material/Stack';\n\nexport default function DemoInDocs() {\n return (\n <Stack sx={{ width: '100%' }} spacing={2}>\n <Alert severity=\"info\">This is an info alert â check it out!</Alert>\n <Alert severity=\"success\">This is a success alert â check it out!</Alert>\n </Stack>\n );\n}\n",jsxPreview:'<Alert severity="info">This is an info alert â check it out!</Alert>\n<Alert severity="success">This is a success alert â check it out!</Alert>'},"DemoMultiTabs.js":{module:"./DemoMultiTabs.js",raw:"import {\n generateFilledQuantity,\n randomColor,\n randomCountry,\n randomEmail,\n randomIncoterm,\n randomInt,\n randomName,\n randomRating,\n randomStatusOptions,\n} from '@mui/x-data-grid-generator';\n\n// eslint-disable-next-line no-restricted-imports\nimport {\n COUNTRY_ISO_OPTIONS_SORTED,\n INCOTERM_OPTIONS,\n STATUS_OPTIONS,\n} from '@mui/x-data-grid-generator/services/static-data';\nimport { DataGrid, gridStringOrNumberComparator } from '@mui/x-data-grid';\nimport { renderAvatar } from '../../../data/experiments/renderers/renderAvatar';\nimport { renderEmail } from '../../../data/experiments/renderers/renderEmail';\nimport { renderEditRating, renderRating } from '../../../data/experiments/renderers/renderRating';\nimport {\n renderCountry,\n renderEditCountry,\n} from '../../../data/experiments/renderers/renderCountry';\nimport { renderSparkline } from '../../../data/experiments/renderers/renderSparkline';\nimport {\n renderEditProgress,\n renderProgress,\n} from '../../../data/experiments/renderers/renderProgress';\nimport { renderEditStatus, renderStatus } from '../../../data/experiments/renderers/renderStatus';\nimport {\n renderEditIncoterm,\n renderIncoterm,\n} from '../../../data/experiments/renderers/renderIncoterm';\n\nconst columns = [\n {\n field: 'name',\n headerName: 'Name',\n width: 120,\n editable: true,\n },\n {\n field: 'avatar',\n headerName: 'Avatar',\n display: 'flex',\n renderCell: renderAvatar,\n valueGetter: (value, row) =>\n row.name == null || row.avatar == null ? null : { name: row.name, color: row.avatar },\n sortable: false,\n filterable: false,\n },\n {\n field: 'email',\n headerName: 'Email',\n renderCell: renderEmail,\n width: 150,\n editable: true,\n },\n {\n field: 'rating',\n headerName: 'Rating',\n display: 'flex',\n renderCell: renderRating,\n renderEditCell: renderEditRating,\n width: 180,\n type: 'number',\n editable: true,\n availableAggregationFunctions: ['avg', 'min', 'max', 'size'],\n },\n {\n field: 'country',\n headerName: 'Country',\n type: 'singleSelect',\n valueOptions: COUNTRY_ISO_OPTIONS_SORTED,\n valueFormatter: (value) => value?.label,\n renderCell: renderCountry,\n renderEditCell: renderEditCountry,\n sortComparator: (v1, v2, param1, param2) =>\n gridStringOrNumberComparator(v1.label, v2.label, param1, param2),\n width: 150,\n editable: true,\n },\n {\n field: 'salary',\n headerName: 'Salary',\n type: 'number',\n valueFormatter: (value) => {\n if (!value || typeof value !== 'number') {\n return value;\n }
1\n return `$${value.toLocaleString()}`;\n },\n editable: true,\n },\n {\n field: 'monthlyActivity',\n headerName: 'Monthly activity',\n type: 'custom',\n resizable: false,\n filterable: false,\n sortable: false,\n editable: false,\n groupable: false,\n display: 'flex',\n renderCell: renderSparkline,\n width: 150,\n valueGetter: (value, row) => row.monthlyActivity,\n },\n {\n field: 'budget',\n headerName: 'Budget left',\n renderCell: renderProgress,\n renderEditCell: renderEditProgress,\n availableAggregationFunctions: ['min', 'max', 'avg', 'size'],\n type: 'number',\n width: 120,\n editable: true,\n },\n {\n field: 'status',\n headerName: 'Status',\n renderCell: renderStatus,\n renderEditCell: renderEditStatus,\n type: 'singleSelect',\n valueOptions: STATUS_OPTIONS,\n width: 150,\n editable: true,\n },\n {\n field: 'incoTerm',\n headerName: 'Incoterm',\n renderCell: renderIncoterm,\n renderEditCell: renderEditIncoterm,\n type: 'singleSelect',\n valueOptions: INCOTERM_OPTIONS,\n editable: true,\n },\n];\n\nconst rows = Array.from({ length: 10 }, (_, index) => ({\n id: index,\n name: randomName({}, {}),\n avatar: randomColor(),\n email: randomEmail(),\n rating: randomRating(),\n country: randomCountry(),\n salary: randomInt(35000, 80000),\n monthlyActivity: Array.from({ length: 30 }, () => randomInt(1, 25)),\n budget: generateFilledQuantity({ quantity: 100 }),\n status: randomStatusOptions(),\n incoTerm: randomIncoterm(),\n}));\n\nexport default function CustomColumnFullExample() {\n return (\n <div style={{ height: 400, width: '100%' }}>\n <DataGrid rows={rows} columns={columns} />\n </div>\n );\n}\n",relativeModules:{JS:[{module:"../../../data/experiments/renderers/renderAvatar.js",raw:"import Avatar from '@mui/material/Avatar';\n\nexport function renderAvatar(params) {\n if (params.value == null) {\n return '';\n }\n\n return (\n <Avatar style={{ backgroundColor: params.value.color }}>\n {params.value.name.toUpperCase().substring(0, 1)}\n </Avatar>\n );\n}\n\nexport default renderAvatar;\n"},{module:"../../../data/experiments/renderers/renderEmail.js",raw:"import * as React from 'react';\nimport { styled } from '@mui/material/styles';\n\nconst Link = styled('a')({\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n color: 'inherit',\n});\n\nconst DemoLink = React.memo(function DemoLink(props) {\n const handleClick = (event) => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n return (\n <Link tabIndex={props.tabIndex} onClick={handleClick} href={props.href}>\n {props.children}\n </Link>\n );\n});\n\nexport function renderEmail(params) {\n const email = params.value ?? '';\n\n return (\n <DemoLink href={`mailto:${email}`} tabIndex={params.tabIndex}>\n {email}\n </DemoLink>\n );\n}\n\nexport default renderEmail;\n"},{module:"../../../data/experiments/renderers/renderRating.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport Rating from '@mui/material/Rating';\nimport { useGridApiContext } from '@mui/x-data-grid';\n\nconst RatingValue = React.memo(function RatingValue(props) {\n const { value } = props;\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n lineHeight: '24px',\n color: 'text.secondary',\n }}\n >\n <Rating value={value} sx={{ mr: 1 }} readOnly />{' '}\n {Math.round(Number(value) * 10) / 10}\n </Box>\n );\n});\n\nfunction EditRating(props) {\n const { id, value, field } = props;\n\n const apiRef = useGridApiContext();\n\n const changedThroughKeyboard = React.useRef(false);\n\n const handleChange = async (event) => {\n await apiRef.current.setEditCellValue(\n { id, field, value: Number(event.target.value) },\n event,\n );\n if (!changedThroughKeyboard.current) {\n apiRef.current.stopCellEditMode({ id, field });\n }\n changedThroughKeyboard.current = false;\n };\n\n const handleRef = (element) => {\n if (element) {\n if (value !== 0) {\n element.querySelector(`input[value=\"${value}\"]`).focus();\n } else {\n element.querySelector('input[value=\"\"]').focus();\n }\n }\n };\n\n const handleKeyDown = (event) => {\n if (event.key.startsWith('Arrow')) {\n changedThroughKeyboard.current = true;\n } else {\n changedThroughKeyboard.current = false;\n }\n };\n\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n lineHeight: '24px',\n color: 'text.secondary',\n mr: 1,\n }}\n >\n <Rating\n ref={handleRef}\n name=\"rating\"\n value={Number(value)}\n precision={1}\n onChange={handleChange}\n sx={{ mr: 1 }}\n onKeyDown={handleKeyDown}\n />\n {Number(value)}\n </Box>\n );\n}\n\nexport function renderRating(params) {\n if (params.value == null) {\n return '';\n }\n\n return <RatingValue value={params.value} />;\n}\n\nexport function renderEditRating(params) {\n return <EditRating {...params} />;\n}\n\nexport default renderRating;\n"},{module:"../../../data/experiments/renderers/renderCountry.js",raw:"import * as React from 'react';\nimport { useGridApiContext } from '@mui/x-data-grid';\n// eslint-disable-next-line no-restricted-imports\nimport { COUNTRY_ISO_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';\nimport Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';\nimport Box from '@mui/material/Box';\nimport InputBase from '@mui/material/InputBase';\nimport { styled } from '@mui/material/styles';\n\nconst Country = React.memo(function Country(props) {\n const { value } = props;\n\n return (\n <Box\n sx={{\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n '& > img': {\n mr: 0.5,\n flexShrink: 0,\n width: '20px',\n },\n }}\n >\n <img\n loading=\"lazy\"\n width=\"20\"\n src={`https://flagcdn.com/w20/${value.code.toLowerCase()}.png`}\n srcSet={`https://flagcdn.com/w40/${value.code.toLowerCase()}.png 2x`}\n alt=\"\"\n />\n <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n {value.label}\n </Box>\n </Box>\n );\n});\n\nconst StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({\n height: '100%',\n [`& .${autocompleteClasses.inputRoot}`]: {\n ...theme.typography.body2,\n padding: '1px 0',\n height: '100%',\n '& input': {\n padding: '0 16px',\n height: '100%',\n },\n },\n}));\n\nfunction EditCountry(props) {\n const { id, value, field } = props;\n\n const apiRef = useGridApiContext();\n\n const handleChange = React.useCallback(\n async (event, newValue) => {\n await apiRef.current.setEditCellValue({ id, field, value: newValue }, event);\n apiRef.current.stopCellEditMode({ id, field });\n },\n [apiRef, field, id],\n );\n\n return (\n <StyledAutocomplete\n value={value}\n onChange={handleChange}\n options={COUNTRY_ISO_OPTIONS}\n getOptionLabel={(option) => option.label}\n autoHighlight\n fullWidth\n open\n disableClearable\n renderOption={(optionProps, option) => (\n <Box\n component=\"li\"\n sx={{\n '& > img': {\n mr: 1.5,\n flexShrink: 0,\n },\n }}\n {...optionProps}\n key={option.code}\n >\n <img\n loading=\"lazy\"\n width=\"20\"\n src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}\n srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}\n alt=\"\"\n />\n {option.label}\n </Box>\n )}\n renderInput={(params) => (\n <InputBase\n autoFocus\n fullWidth\n id={params.id}\n inputProps={{\n ...params.inputProps,\n autoComplete: 'new-password', // disable autocomplete and autofill\n }}\n {...params.InputProps}\n />\n )}\n />\n );\n}\n\nexport function renderCountry(params) {\n if (params.value == null) {\n return '';\n }\n\n return <Country value={params.value} />;\n}\n\nexport function renderEditCountry(params) {\n return <EditCountry {...params} />;\n}\n\nexport default renderCountry;\n"},{module:"../../../data/experiments/renderers/renderSparkline.js",raw:"import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
1\n\nexport function renderSparkline(params) {\n if (params.value == null) {\n return '';\n }\n\n return (\n <SparkLineChart\n data={params.value}\n width={params.colDef.computedWidth}\n plotType=\"bar\"\n />\n );\n}\n\nexport default renderSparkline;\n"},{module:"../../../data/experiments/renderers/renderProgress.js",raw:"import * as React from 'react';\nimport clsx from 'clsx';\nimport { useGridApiContext } from '@mui/x-data-grid';\nimport Slider, { sliderClasses } from '@mui/material/Slider';\nimport Tooltip from '@mui/material/Tooltip';\nimport { alpha, styled } from '@mui/material/styles';\nimport { debounce } from '@mui/material/utils';\n\nconst Center = styled('div')({\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n});\n\nconst Element = styled('div')(({ theme }) => ({\n border: `1px solid ${(theme.vars || theme).palette.divider}`,\n position: 'relative',\n overflow: 'hidden',\n width: '100%',\n height: 26,\n borderRadius: 2,\n}));\n\nconst Value = styled('div')({\n position: 'absolute',\n lineHeight: '24px',\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n});\n\nconst Bar = styled('div')({\n height: '100%',\n '&.low': {\n backgroundColor: '#f44336',\n },\n '&.medium': {\n backgroundColor: '#efbb5aa3',\n },\n '&.high': {\n backgroundColor: '#088208a3',\n },\n});\n\nconst ProgressBar = React.memo(function ProgressBar(props) {\n const { value } = props;\n const valueInPercent = value * 100;\n\n return (\n <Element>\n <Value>{`${valueInPercent.toLocaleString()} %`}</Value>\n <Bar\n className={clsx({\n low: valueInPercent < 30,\n medium: valueInPercent >= 30 && valueInPercent <= 70,\n high: valueInPercent > 70,\n })}\n style={{ maxWidth: `${valueInPercent}%` }}\n />\n </Element>\n );\n});\n\nconst StyledSlider = styled(Slider)(({ theme }) => ({\n display: 'flex',\n height: '100%',\n width: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n padding: 0,\n borderRadius: 0,\n [`& .${sliderClasses.rail}`]: {\n height: '100%',\n backgroundColor: 'transparent',\n },\n [`& .${sliderClasses.track}`]: {\n height: '100%',\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shorter,\n }),\n '&.low': {\n backgroundColor: '#f44336',\n },\n '&.medium': {\n backgroundColor: '#efbb5aa3',\n },\n '&.high': {\n backgroundColor: '#088208a3',\n },\n },\n [`& .${sliderClasses.thumb}`]: {\n height: '100%',\n width: 5,\n borderRadius: 0,\n marginTop: 0,\n backgroundColor: alpha('#000000', 0.2),\n },\n}));\n\nconst ValueLabelComponent = React.memo(function ValueLabelComponent(props) {\n const { children, open, value } = props;\n\n return (\n <Tooltip open={open} enterTouchDelay={0} placement=\"top\" title={value}>\n {children}\n </Tooltip>\n );\n});\n\nfunction EditProgress(props) {\n const { id, value, field } = props;\n const [valueState, setValueState] = React.useState(Number(value));\n\n const apiRef = useGridApiContext();\n\n const updateCellEditProps = React.useCallback(\n (newValue) => {\n apiRef.current.setEditCellValue({ id, field, value: newValue });\n },\n [apiRef, field, id],\n );\n\n const debouncedUpdateCellEditProps = React.useMemo(\n () => debounce(updateCellEditProps, 60),\n [updateCellEditProps],\n );\n\n const handleChange = (event, newValue) => {\n setValueState(newValue);\n debouncedUpdateCellEditProps(newValue);\n };\n\n React.useEffect(() => {\n setValueState(Number(value));\n }, [value]);\n\n const handleRef = (element) => {\n if (element) {\n element.querySelector('[type=\"range\"]').focus();\n }\n };\n\n return (\n <StyledSlider\n ref={handleRef}\n classes={{\n track: clsx({\n low: valueState < 0.3,\n medium: valueState >= 0.3 && valueState <= 0.7,\n high: valueState > 0.7,\n }),\n }}\n value={valueState}\n max={1}\n step={0.00001}\n onChange={handleChange}\n components={{ ValueLabel: ValueLabelComponent }}\n valueLabelDisplay=\"auto\"\n valueLabelFormat={(newValue) =>
1 `${(newValue * 100).toLocaleString()} %`}\n />\n );\n}\n\nexport function renderProgress(params) {\n if (params.value == null) {\n return '';\n }\n\n return (\n <Center>\n <ProgressBar value={params.value} />\n </Center>\n );\n}\n\nexport function renderEditProgress(params) {\n return <EditProgress {...params} />;\n}\n\nexport default renderProgress;\n"},{module:"../../../data/experiments/renderers/renderStatus.js",raw:"import * as React from 'react';\nimport Chip from '@mui/material/Chip';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\nimport ReportProblemIcon from '@mui/icons-material/ReportProblem';\nimport InfoIcon from '@mui/icons-material/Info';\nimport AutorenewIcon from '@mui/icons-material/Autorenew';\nimport DoneIcon from '@mui/icons-material/Done';\nimport {\n GridEditModes,\n useGridApiContext,\n useGridRootProps,\n} from '@mui/x-data-grid';\n// eslint-disable-next-line no-restricted-imports\nimport { STATUS_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';\n\nconst StyledChip = styled(Chip)(({ theme }) => ({\n justifyContent: 'left',\n '& .icon': {\n color: 'inherit',\n },\n '&.Open': {\n color: (theme.vars || theme).palette.info.dark,\n border: `1px solid ${(theme.vars || theme).palette.info.main}`,\n },\n '&.Filled': {\n color: (theme.vars || theme).palette.success.dark,\n border: `1px solid ${(theme.vars || theme).palette.success.main}`,\n },\n '&.PartiallyFilled': {\n color: (theme.vars || theme).palette.warning.dark,\n border: `1px solid ${(theme.vars || theme).palette.warning.main}`,\n },\n '&.Rejected': {\n color: (theme.vars || theme).palette.error.dark,\n border: `1px solid ${(theme.vars || theme).palette.error.main}`,\n },\n}));\n\nconst Status = React.memo((props) => {\n const { status } = props;\n\n let icon = null;\n if (status === 'Rejected') {\n icon = <ReportProblemIcon className=\"icon\" />;\n } else if (status === 'Open') {\n icon = <InfoIcon className=\"icon\" />;\n } else if (status === 'PartiallyFilled') {\n icon = <AutorenewIcon className=\"icon\" />;\n } else if (status === 'Filled') {\n icon = <DoneIcon className=\"icon\" />;\n }\n\n let label = status;\n if (status === 'PartiallyFilled') {\n label = 'Partially Filled';\n }\n\n return (\n <StyledChip\n className={status}\n icon={icon}\n size=\"small\"\n label={label}\n variant=\"outlined\"\n />\n );\n});\n\nfunction EditStatus(props) {\n const { id, value, field } = props;\n const rootProps = useGridRootProps();\n const apiRef = useGridApiContext();\n\n const handleChange = async (event) => {\n const isValid = await apiRef.current.setEditCellValue({\n id,\n field,\n value: event.target.value,\n });\n\n if (isValid && rootProps.editMode === GridEditModes.Cell) {\n apiRef.current.stopCellEditMode({ id, field, cellToFocusAfter: 'below' });\n }\n };\n\n const handleClose = (event, reason) => {\n if (reason === 'backdropClick') {\n apiRef.current.stopCellEditMode({ id, field, ignoreModifications: true });\n }\n };\n\n return (\n <Select\n value={value}\n onChange={handleChange}\n MenuProps={{\n onClose: handleClose,\n }}\n sx={{\n height: '100%',\n '& .MuiSelect-select': {\n display: 'flex',\n alignItems: 'center',\n pl: 1,\n },\n }}\n autoFocus\n fullWidth\n open\n >\n {STATUS_OPTIONS.map((option) => {\n let IconComponent = null;\n if (option === 'Rejected') {\n IconComponent = ReportProblemIcon;\n } else if (option === 'Open') {\n IconComponent = InfoIcon;\n } else if (option === 'PartiallyFilled') {\n IconComponent = AutorenewIcon;\n } else if (option === 'Filled') {\n IconComponent = DoneIcon;\n }\n\n let label = option;\n if (option === 'PartiallyFilled') {\n label = 'Partially Filled';\n }\n\n return (\n <MenuItem key={option} value={option}>\n <ListItemIcon sx={{ minWidth: 36 }}>\n <IconComponent fontSize=\"small\" />\n </ListItemIcon>\n <ListItemText primary={label} sx={{ overflow: 'hidden' }} />\n </MenuItem>\n );\n })}\n </Select>\n );\n}
1\n\nexport function renderStatus(params) {\n if (params.value == null) {\n return '';\n }\n\n return <Status status={params.value} />;\n}\n\nexport function renderEditStatus(params) {\n return <EditStatus {...params} />;\n}\n\nexport default renderStatus;\n"},{module:"../../../data/experiments/renderers/renderIncoterm.js",raw:"import * as React from 'react';\nimport Box from '@mui/material/Box';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport Tooltip from '@mui/material/Tooltip';\nimport InfoIcon from '@mui/icons-material/Info';\nimport { useGridApiContext } from '@mui/x-data-grid';\n// eslint-disable-next-line no-restricted-imports\nimport { INCOTERM_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';\n\nconst Incoterm = React.memo(function Incoterm(props) {\n const { value } = props;\n\n if (!value) {\n return null;\n }\n\n const valueStr = value.toString();\n const tooltip = valueStr.slice(valueStr.indexOf('(') + 1, valueStr.indexOf(')'));\n const code = valueStr.slice(0, valueStr.indexOf('(')).trim();\n\n return (\n <Box\n sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}\n >
1\n <span>{code}</span>\n <Tooltip title={tooltip}>\n <InfoIcon sx={{ color: '#2196f3', alignSelf: 'center', ml: '8px' }} />\n </Tooltip>\n </Box>\n );\n});\n\nfunction EditIncoterm(props) {\n const { id, value, field } = props;\n\n const apiRef = useGridApiContext();\n\n const handleChange = async (event) => {\n await apiRef.current.setEditCellValue(\n { id, field, value: event.target.value },\n event,\n );\n apiRef.current.stopCellEditMode({ id, field });\n };\n\n const handleClose = (event, reason) => {\n if (reason === 'backdropClick') {\n apiRef.current.stopCellEditMode({ id, field });\n }\n };\n\n return (\n <Select\n value={value}\n onChange={handleChange}\n MenuProps={{\n onClose: handleClose,\n }}\n sx={{\n height: '100%',\n '& .MuiSelect-select': {\n display: 'flex',\n alignItems: 'center',\n pl: 1,\n },\n }}\n autoFocus\n fullWidth\n open\n >\n {INCOTERM_OPTIONS.map((option) => {\n const tooltip = option.slice(option.indexOf('(') + 1, option.indexOf(')'));\n const code = option.slice(0, option.indexOf('(')).trim();\n\n return (\n <MenuItem key={option} value={option}>\n <ListItemIcon sx={{ minWidth: 36 }}>{code}</ListItemIcon>\n <ListItemText primary={tooltip} sx={{ overflow: 'hidden' }} />\n </MenuItem>\n );\n })}\n </Select>\n );\n}\n\nexport function renderIncoterm(params) {\n return <Incoterm value={params.value} />;\n}\n\nexport function renderEditIncoterm(params) {\n return <EditIncoterm {...params} />;\n}\n\nexport default renderIncoterm;\n"}]}},"DemoModeToggle.js":{module:"./DemoModeToggle.js",raw:"import DarkMode from '@mui/icons-material/DarkMode';\nimport LightMode from '@mui/icons-material/LightMode';\nimport DvrIcon from '@mui/icons-material/Dvr';\nimport { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';\nimport Paper from '@mui/material/Paper';\nimport Box from '@mui/material/Box';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Radio, { radioClasses } from '@mui/material/Radio';\nimport RadioGroup from '@mui/material/RadioGroup';\n\nconst size = '44px';\nconst gap = '4px';\n\nexport function ColorSchemeTabsBasic() {\n const { mode, setMode } = useColorScheme();\n if (!mode) {\n return (\n <Box\n sx={{\n display: 'grid',\n alignItems: 'center',\n height: '44px',\n gap,\n opacity: 0.5,\n gridTemplateColumns: `repeat(3, ${size})`,\n placeItems: 'center',\n color: 'text.primary',\n '& > div': { lineHeight: 0 },\n '& svg': { transform: 'scale(0.8)' },\n }}\n >\n <div>\n <LightMode />\n </div>\n <div>\n <DvrIcon />\n </div>\n <div>\n <DarkMode />\n </div>\n </Box>\n );\n }\n return (\n <RadioGroup\n defaultValue=\"system\"\n row\n aria-label=\"demo-mode-toggle\"\n name=\"color-scheme-segmented-control\"\n sx={{\n display: 'flex',\n gap,\n '& svg': { transform: 'scale(0.8)', transition: '0.2s' },\n [`& .${radioClasses.checked} svg`]: { transform: 'scale(1)' },\n [`& .${radioClasses.root}`]: {\n width: size,\n height: size,\n border: '1px solid transparent',\n borderRadius: '8px',\n [`&.${radioClasses.checked}`]: {\n border: '1px solid',\n borderColor: 'divider',\n color: 'text.primary',\n },\n },\n '& label': { margin: 0 },\n }}\n onChange={(event) => {\n setMode(event.target.value);\n }}\n >\n <FormControlLabel\n value=\"light\"\n control={\n <Radio\n color=\"default\"\n disableTouchRipple\n checkedIcon={<LightMode />}\n icon={<LightMode />}\n />\n }\n label=\"\"\n />
1\n <FormControlLabel\n value=\"system\"\n control={\n <Radio color=\"default\" disableTouchRipple checkedIcon={<DvrIcon />} icon={<DvrIcon />} />\n }\n label=\"\"\n />\n <FormControlLabel\n value=\"dark\"\n control={\n <Radio\n color=\"default\"\n disableTouchRipple\n checkedIcon={<DarkMode />}\n icon={<DarkMode />}\n />\n }\n label=\"\"\n />\n </RadioGroup>\n );\n}\n\nexport default function DemoInDocs(props) {\n return (\n <ThemeProvider\n {...props}\n theme={createTheme({\n colorSchemes: { light: true, dark: true },\n cssVariables: {\n cssVarPrefix: props.cssVarPrefix,\n colorSchemeSelector: props.colorSchemeSelector || 'class',\n },\n })}\n >\n <Paper\n data-element=\"demo-mode-toggle-paper\"\n sx={{\n p: 2,\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n <ColorSchemeTabsBasic />\n </Paper>\n </ThemeProvider>\n );\n}\n"},"DemoModeToggleCustomTheme.js":{module:"./DemoModeToggleCustomTheme.js",raw:"import { red } from '@mui/material/colors';\nimport DarkMode from '@mui/icons-material/DarkMode';\nimport LightMode from '@mui/icons-material/LightMode';\nimport DvrIcon from '@mui/icons-material/Dvr';\nimport { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';\nimport Paper from '@mui/material/Paper';\nimport Box from '@mui/material/Box';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Radio, { radioClasses } from '@mui/material/Radio';\nimport RadioGroup from '@mui/material/RadioGroup';\n\nconst size = '44px';\nconst gap = '4px';\n\nexport function ColorSchemeTabsBasic() {\n const { mode, setMode } = useColorScheme();\n if (!mode) {\n return (\n <Box\n sx={{\n display: 'grid',\n alignItems: 'center',\n height: '44px',\n gap,\n opacity: 0.5,\n gridTemplateColumns: `repeat(3, ${size})`,\n placeItems: 'center',\n color: 'text.primary',\n '& > div': { lineHeight: 0 },\n '& svg': { transform: 'scale(0.8)' },\n }}\n >\n <div>\n <LightMode />\n </div>\n <div>\n <DvrIcon />\n </div>\n <div>\n <DarkMode />\n </div>\n </Box>\n );\n }\n return (\n <RadioGroup\n defaultValue=\"system\"\n row\n aria-label=\"demo-mode-toggle-custom-theme\"\n name=\"color-scheme-segmented-control\"\n sx={{\n display: 'flex',\n gap,\n '& svg': { transform: 'scale(0.8)', transition: '0.2s' },\n [`& .${radioClasses.checked} svg`]: { transform: 'scale(1)' },\n [`& .${radioClasses.root}`]: {\n width: size,\n height: size,\n border: '1px solid transparent',\n borderRadius: '8px',\n [`&.${radioClasses.checked}`]: {\n border: '1px solid',\n borderColor: 'divider',\n color: 'text.primary',\n },\n },\n '& label': { margin: 0 },\n }}\n onChange={(event) => {\n setMode(event.target.value);\n }}\n >\n <FormControlLabel\n value=\"light\"\n control={\n <Radio\n color=\"default\"\n disableTouchRipple\n checkedIcon={<LightMode />}\n icon={<LightMode />}\n />\n }\n label=\"\"\n />\n <FormControlLabel\n value=\"system\"\n control={\n <Radio color=\"default\" disableTouchRipple checkedIcon={<DvrIcon />} icon={<DvrIcon />} />\n }\n label=\"\"\n />\n <FormControlLabel\n value=\"dark\"\n control={\n <Radio\n color=\"default\"\n disableTouchRipple\n checkedIcon={<DarkMode />}\n icon={<DarkMode />}\n />\n }\n label=\"\"\n />\n </RadioGroup>\n );\n}\n\nexport default function DemoModeToggleCustomTheme(props) {\n const theme = createTheme({\n cssVariables: {\n cssVarPrefix: props.cssVarPrefix,\n colorSchemeSelector: props.colorSchemeSelector || 'class',\n },\n colorSchemes: {\n light: {\n palette: {\n background: {\n paper: red[200],\
1n },\n },\n },\n dark: {\n palette: {\n background: {\n paper: red[900],\n },\n },\n },\n },\n });\n return (\n <ThemeProvider {...props} theme={theme}>\n <Paper\n data-element=\"demo-mode-toggle-custom-theme-paper\"\n sx={{\n p: 2,\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n <ColorSchemeTabsBasic />\n </Paper>\n </ThemeProvider>\n );\n}\n"},"DemoModeToggleIframe.js":{module:"./DemoModeToggleIframe.js",raw:"import DarkMode from '@mui/icons-material/DarkMode';\nimport LightMode from '@mui/icons-material/LightMode';\nimport DvrIcon from '@mui/icons-material/Dvr';\nimport { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';\nimport CssBaseline from '@mui/material/CssBaseline';\nimport Paper from '@mui/material/Paper';\nimport Box from '@mui/material/Box';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Radio, { radioClasses } from '@mui/material/Radio';\nimport RadioGroup from '@mui/material/RadioGroup';\n\nconst size = '44px';\nconst gap = '4px';\n\nexport function ColorSchemeTabsBasic() {\n const { mode, setMode } = useColorScheme();\n if (!mode) {\n return (\n <Box\n sx={{\n display: 'grid',\n alignItems: 'center',\n height: '44px',\n gap,\n opacity: 0.5,\n gridTemplateColumns: `repeat(3, ${size})`,\n placeItems: 'center',\n color: 'text.primary',\n '& > div': { lineHeight: 0 },\n '& svg': { transform: 'scale(0.8)' },\n }}\n >\n <div>\n <LightMode />\n </div>\n <div>\n <DvrIcon />\n </div>\n <div>\n <DarkMode />\n </div>\n </Box>\n );\n }\n return (\n <RadioGroup\n defaultValue=\"system\"\n row\n aria-label=\"demo-mode-toggle-iframe\"\n name=\"color-scheme-segmented-control\"\n sx={{\n display: 'flex',\n gap,\n '& svg': { transform: 'scale(0.8)', transition: '0.2s' },\n [`& .${radioClasses.checked} svg`]: { transform: 'scale(1)' },\n [`& .${radioClasses.root}`]: {\n width: size,\n height: size,\n border: '1px solid transparent',\n borderRadius: '8px',\n [`&.${radioClasses.checked}`]: {\n border: '1px solid',\n borderColor: 'divider',\n color: 'text.primary',\n },\n },\n '& label': { margin: 0 },\n }}\n onChange={(event) => {\n setMode(event.target.value);\n }}\n >\n <FormControlLabel\n value=\"light\"\n control={\n <Radio\n color=\"default\"\n disableTouchRipple\n checkedIcon={<LightMode />}\n icon={<LightMode />}\n />\n }\n label=\"\"\n />\n <FormControlLabel\n value=\"system\"\n control={\n <Radio color=\"default\" disableTouchRipple checkedIcon={<DvrIcon />} icon={<DvrIcon />} />\n }\n label=\"\"\n />\n <FormControlLabel\n value=\"dark\"\n control={\n <Radio\n color=\"default\"\n disableTouchRipple\n checkedIcon={<DarkMode />}\n icon={<DarkMode />}\n />\n }\n label=\"\"\n />\n </RadioGroup>\n );\n}\n\nexport default function DemoModeToggleIframe(props) {\n return (\n <ThemeProvider\n {...props}\n theme={createTheme({\n colorSchemes: { light: true, dark: true },\n cssVariables: {\n cssVarPrefix: props.cssVarPrefix,\n colorSchemeSelector: props.colorSchemeSelector || 'class',\n },\n })}\n >\n <CssBaseline />\n <Paper\n data-element=\"demo-mode-toggle-iframe-paper\"\n sx={{\n p: 2,\n display: 'flex',\n justifyContent: 'center',\n }}\n >\n <ColorSchemeTabsBasic />\n </Paper>\n </ThemeProvider>\n );\n}\n"}};V.scope={process:{},import:{"@mui/material/Alert":r,"@mui/material/Stack":l,"@mui/x-data-grid-generator":i,"@mui/x-data-grid-generator/services/static-data":c,"@mui/x-data-grid":d,"../../../data/experiments/renderers/renderAvatar":p,"../../../data/experiments/renderers/renderEmail":u,"../../../data/experiments/renderers/renderRating":m,"../../../data/experiments/renderers/renderCountry":h,"../../../data/experiments/renderers/renderSparkline":f,"../../../data/experiments/renderers/renderProgress":g,"../../../data/experiments/renderers/renderStatus":v,"../../../data/experiments/renderers/renderIncoterm":x,"@mui/icons-material/DarkMode":k,"@mui/icons-material/LightMode":b,"@mui/icons-material/Dvr":y,"@mui/material/styles":C,"@mui/material/Paper":w,"@mui/material/Box":S,"@mui/material/FormControl
1Label":A,"@mui/material/Radio":T,"@mui/material/RadioGroup":j,"@mui/material/colors":I,"@mui/material/CssBaseline":M}};let $={"./DemoInDocs.js":R.default,"./DemoInDocsNotEditable.js":P.default,"./DemoMultiTabs.js":E.default,"./DemoModeToggle.js":D.default,"./DemoModeToggleCustomTheme.js":O.default,"./DemoModeToggleIframe.js":L.default},q={};function B(){return(0,o.jsx)(s.R9,{...a})}},41489:(e,n,t)=>{"use strict";t.r(n),t.d(n,{CssVarsProvider:()=>j.Zr,Experimental_CssVarsProvider:()=>j.Gk,StyledEngineProvider:()=>w.A,THEME_ID:()=>a.A,ThemeProvider:()=>C.A,adaptV4Theme:()=>r,alpha:()=>l.X4,createColorScheme:()=>x.Ay,createStyles:()=>h,createTheme:()=>c.A,createTransitions:()=>v.Ay,css:()=>i.css,darken:()=>l.e$,decomposeColor:()=>l.rP,duration:()=>v.p0,easing:()=>v.cz,emphasize:()=>l.tL,enhanceHighContrast:()=>d.A,experimental_extendTheme:()=>R,experimental_sx:()=>V,extendTheme:()=>I.A,getContrastRatio:()=>l.eM,getInitColorSchemeScript:()=>j.Gs,getLuminance:()=>l.J1,getOverlayAlpha:()=>P.A,hexToRgb:()=>l.E2,hslToRgb:()=>l.YL,keyframes:()=>i.keyframes,lighten:()=>l.a,makeStyles:()=>S,private_applyChildrenFocusVisible:()=>N.EA,private_applyInsetFocusVisible:()=>N.eB,private_createMixins:()=>O.A,private_createTypography:()=>D.A,private_excludeVariablesFromRoot:()=>L.A,private_outsetFocusRing:()=>N.Jc,recomposeColor:()=>l.X0,responsiveFontSizes:()=>g.A,rgbToHex:()=>l.Ob,shouldSkipGeneratingVar:()=>E.A,styled:()=>y.Ay,unstable_createBreakpoints:()=>s.A,unstable_createMuiStrictModeTheme:()=>u,unstable_getUnit:()=>f.l_,unstable_toUnitless:()=>f.db,useColorScheme:()=>j.Ut,useTheme:()=>k.A,useThemeProps:()=>b.A,withStyles:()=>A,withTheme:()=>T});var a=t(98530),o=t(56105),s=t(68373);function r(e){let{defaultProps:n={},mixins:t={},overrides:a={},palette:r={},props:l={},styleOverrides:i={},...c}=e,d={...c,components:{}};Object.keys(n).forEach(e=>{let t=d.components[e]||{};t.defaultProps=n[e],d.components[e]=t}),Object.keys(l).forEach(e=>{let n=d.components[e]||{};n.defaultProps=l[e],d.components[e]=n}
1),Object.keys(i).forEach(e=>{let n=d.components[e]||{};n.styleOverrides=i[e],d.components[e]=n}),Object.keys(a).forEach(e=>{let n=d.components[e]||{};n.styleOverrides=a[e],d.components[e]=n}),d.spacing=(0,o.A)(e.spacing);let p=(0,s.A)(e.breakpoints||{}),u=d.spacing;d.mixins={gutters:(e={})=>({paddingLeft:u(2),paddingRight:u(2),...e,[p.up("sm")]:{paddingLeft:u(3),paddingRight:u(3),...e[p.up("sm")]}}),...t};let{type:m,mode:h,...f}=r,g=h||m||"light";return d.palette={text:{hint:"dark"===g?"rgba(255, 255, 255, 0.5)":"rgba(0, 0, 0, 0.38)"},mode:g,type:g,...f},d}var l=t(99669),i=t(83310),c=t(38390),d=t(79471),p=t(93099);function u(e,...n){return(0,c.A)((0,p.A)({unstable_strictMode:!0},e),...n)}let m=!1;function h(e){return m||(console.warn("MUI: createStyles from @mui/material/styles is deprecated.\nPlease use @mui/styles/createStyles"),m=!0),e}var f=t(67395),g=t(18454),v=t(94369),x=t(96255),k=t(41191),b=t(73315),y=t(49724),C=t(62291),w=t(52606);function S(){throw Error("MUI: makeStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.")}function A(){throw Error("MUI: withStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.")}function T(){throw Error("MUI: withTheme is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.")}var j=t(6181),I=t(93803);let M=!1;function R(...e){return M||(console.warn("MUI: The `experimental_extendTheme` has been stabilized.\n\nYou should use `import { extendTheme } from '@mui/material/styles'`"),M=!0),(0,I.A)(...e)}var P=t(34003),E=t(70030),D=t(99762),O=t(55889),L=t(37114),N=t(3455);function V(){throw Error("MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.For more details, see https://github.com/mui/material-ui/pull/35150.")}},50981:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});var a=t(80384),o=t(72392),s=t(27955);function r(){return(0,a.jsxs)(s.A,{sx:{width:"100%"},spacing:2,children:[(0,a.jsx)(o.A,{severity:"info",children:"This is an info alert â check it out!"}),(0,a.jsx)(o.A,{severity:"success",children:"This is a success alert â check it out!"})]})}},52606:(e,n,t)=>{"use strict";let a;t.d(n,{A:()=>m});var o=t(80384),s=t(19340),r=t(53982),l=t.n(r),i=t(67554),c=t(54040),d=t(84943);let p=new Map,u;if("object"==typeof document&&!(a=document.querySelector('[name="emotion-insertion-point"]'))){(a=document.createElement("meta")).setAttribute("name","emotion-insertion-point"),a.setAttribute("content","");let e=document.querySelector("head");e&&e.prepend(a)}function m(e){let{injectFirst:n,enableCssLayer:t,children:r}=e,l=s.useMemo(()=>{let e=`${n}-${t}`;if("object"==typeof document&&p.has(e))return p.get(e);let o=function(e,n){if(e||n){var t;let o;class s extends d.v{insert(e,n){return u?u(e,n):(this.key&&this.key.endsWith("global")&&(this.before=a),super.insert(e,n))}}let r=(t={key:n?"mui":"css",insertionPoint:e?a:void 0},(o=(0,c.default)(t)).sheet=new s({key:o.key,nonce:o.sheet.nonce,container:o.sheet.container,speedy:o.sheet.isSpeedy,prepend:o.sheet.prepend,insertionPoint:o.sheet.insertionPoint}),o);if(n){let e=r.insert;r.insert=(...n)=>(n[1].styles.match(/^@layer\s[^{]*$/)||(n[1].styles=`@layer mui {${n[1].styles}}`),e(...n))}return r}}(n,t);return p.set(e,o),o},[n,t]);return l?(0,o.jsx)(i.C,{value:l,children:r}):r}m.propTypes={children:l().node,enableCssLayer:l().bool,injectFirst:l().bool}},52615:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r,renderAvatar:()=>s});var a=t(80384),o=t(61093);function s(e){return null==e.value?"":(0,a.jsx)(o.A,{style:{backgroundColor:e.value.color},children:e.value.name.toUpperCase().substring(0,1)})}let r=s},56183:(e,n,t)=>{"use strict";t.r(n),t.d(n,{ColorSchemeTabsBasic:()=>v,default:()=>x});var a=t(80384),o=t(4727),s=t(66233),r=t(63584),l=t(6181),i=t(62291),c=t(38390),d=t(5999),p=t(95427),u=t(42867),m=t(92183),h=t(83075),f=t(79905);let g="44px";function v(){let{mode:e,setMode:n}=(0,l.Ut)();return e?(0,a.jsxs)(f.A,{defaultValue:"system",row:!0,"aria-label":"demo-mode-toggle",name:"color-scheme-segmented-control",sx:{dis
1play:"flex",gap:"4px","& svg":{transform:"scale(0.8)",transition:"0.2s"},[`& .${m.A.checked} svg`]:{transform:"scale(1)"},[`& .${m.A.root}`]:{width:g,height:g,border:"1px solid transparent",borderRadius:"8px",[`&.${m.A.checked}`]:{border:"1px solid",borderColor:"divider",color:"text.primary"}},"& label":{margin:0}},onChange:e=>{n(e.target.value)},children:[(0,a.jsx)(u.A,{value:"light",control:(0,a.jsx)(h.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(s.default,{}),icon:(0,a.jsx)(s.default,{})}),label:""}),(0,a.jsx)(u.A,{value:"system",control:(0,a.jsx)(h.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(r.default,{}),icon:(0,a.jsx)(r.default,{})}),label:""}),(0,a.jsx)(u.A,{value:"dark",control:(0,a.jsx)(h.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(o.default,{}),icon:(0,a.jsx)(o.default,{})}),label:""})]}):(0,a.jsxs)(p.A,{sx:{display:"grid",alignItems:"center",height:"44px",gap:"4px",opacity:.5,gridTemplateColumns:`repeat(3, ${g})`,placeItems:"center",color:"text.primary","& > div":{lineHeight:0},"& svg":{transform:"scale(0.8)"}},children:[(0,a.jsx)("div",{children:(0,a.jsx)(s.default,{})}),(0,a.jsx)("div",{children:(0,a.jsx)(r.default,{})}),(0,a.jsx)("div",{children:(0,a.jsx)(o.default,{})})]})}function x(e){return(0,a.jsx)(i.A,{...e,theme:(0,c.A)({colorSchemes:{light:!0,dark:!0},cssVariables:{cssVarPrefix:e.cssVarPrefix,colorSchemeSelector:e.colorSchemeSelector||"class"}}),children:(0,a.jsx)(d.A,{"data-element":"demo-mode-toggle-paper",sx:{p:2,width:"100%",display:"flex",justifyContent:"center"},children:(0,a.jsx)(v,{})})})}},63584:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>s});var a=t(29495),o=t(80384);let s=(0,a.A)((0,o.jsx)("path",{d:"M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2m0 14H3V5h18zm-2-9H8v2h11zm0 4H8v2h11zM7 8H5v2h2zm0 4H5v2h2z"}),"Dvr")},70418:(e,n,t)=>{"use strict";t.d(n,{R9:()=>m,SW:()=>l.S,kc:()=>p});var a=t(80384);t(19340);var o=t(35500),s=t(32527),r=t(95633),l=t(40398),i=t(89396),c=t(60920);function d(e){return function(){throw Error(`No demo component provided for '${e}'`)}}function p(e){let{activeTab:n,demoComponents:t,demos:o={},disableAd:p,localizedDoc:u,renderedMarkdownOrDemo:m,srcComponents:h}=e,f=(0,s.VQ)(),g=(0,s.WD)();if("string"==typeof m)return(0,a.jsx)(l.S,{renderedMarkdown:m});if(m.component){let e=m.component,t=h?.[e];if(void 0===t)throw Error(`No component found at the path 'docs/src/${e}`);let o={};return"modules/components/ComponentPageTabs.js"===e&&(o.activeTab=n),(0,a.jsx)(t,{...m,...o,markdown:u})}if("codeblock"===m.type)return(0,a.jsx)(r.lX,{tabs:m.data,storageKey:m.storageKey&&`codeblock-${m.storageKey}`});let v=m.demo,x=o?.[v];if(void 0===x){let e=[`Missing demo: ${v}. You can use one of the following:`,Object.keys(o)].join("\n");if("en"===f)throw Error(e);let n=(0,a.jsx)("span",{role:"img","aria-label":g("emojiWarning"),children:"â ï¸"});return(0,a.jsxs)("div",{children:[n," Missing demo `",v,"` ",n]})}let k=u.location.split("/");k.pop();let b=`${k.join("/")}/${v}`;return(0,a.jsx)(i.C,{demo:{raw:x.raw,js:t[x.module]??d(x.module),scope:o.scope,jsxPreview:x.jsxPreview,tailwindJsxPreview:x.tailwindJsxPreview,cssJsxPreview:x.cssJsxPreview,rawTS:x.rawTS,module:x.module,moduleTS:x.moduleTS,tsx:t[x.moduleTS]??d(x.moduleTS),rawTailwind:x.rawTailwind,rawTailwindTS:x.rawTailwindTS,jsTailwind:t[x.moduleTailwind]??null,tsxTailwind:t[x.moduleTSTailwind]??null,rawCSS:x.rawCSS,rawCSSTS:x.rawCSSTS,jsCSS:t[x.moduleCSS]??null,tsxCSS:t[x.moduleTSCSS]??null,gaLabel:b.replace(/^\/docs\/data\//,""),relativeModules:x.relativeModules},disableAd:p??!1,demoOptions:m,githubLocation:`https://github.com/mui/material-ui/blob/v9.4.0${b}`,demoToolbarSlot:c.Z})}var u=t(56419);function m(e){let{disableAd:n=!1,disableToc:t=!1,wideLayout:r,demos:l={},docs:i,demoComponents:c={},srcComponents:d}=e,m=i[(0,s.VQ)()]||i.en;return(0,a.jsxs)(u.d2,{cardOptions:{description:m.headers.cardDescription,title:m.headers.cardTitle},description:m.description,disableAd:n,disableToc:t,wideLayout:r,location:m.location,title:m.title,toc:m.toc,children:[n?null:(0,a.jsx)(o.Wu,{children:(0,a.jsx)(o.Ad,{})}),m.rendered.map((e,t)=>(0,a.jsx)(p,{demoComponents:c,demos:l,disableAd:n,localizedDoc:m,renderedMarkdownOrDemo:e,srcComponents:d},`demos-section-${t}`))]})}},78040:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r});var a=t(80384),o=t(72392),s=t(27955);function r(){return(0,a.jsxs)(s.A,{sx:{width:"100%"},spacing:2,children:[(0,a.jsx)(o.A,{severity:"info",children:"This is an info alert â check it out!"}),(0,a.jsx)(o.A,{severity:"success",children:"This is a success alert â check it out!"})]})}},78109:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a.A,getRadioGroupUtilityClass:()=>s.B,radioGroupClasses:()=>s.A,useRadioGroup:()=>o.A});var a=t(79905),o=t(93678),s=t(16901)},79905:(e,n,t)=>{"use strict";t.d(n,{A:()=>g});var a=t(80384),o=t(19340),s=t(53982),r=t.n(s),l=t(9281),i=t(93993),
1c=t(67387),d=t(16901),p=t(5004),u=t(3969),m=t(17758),h=t(97518);let f=o.forwardRef(function(e,n){let{actions:t,children:s,className:r,defaultValue:f,name:g,onChange:v,value:x,...k}=e,b=o.useRef(null),y=(e=>{let{classes:n,row:t,error:a}=e;return(0,i.A)({root:["root",t&&"row",a&&"error"]},d.B,n)})(e),[C,w]=(0,u.A)({controlled:x,default:f,name:"RadioGroup"});o.useImperativeHandle(t,()=>({focus:()=>{let e=b.current.querySelector("input:not(:disabled):checked");e||(e=b.current.querySelector("input:not(:disabled)")),e&&e.focus()}}),[]);let S=(0,p.A)(n,b),A=(0,h.A)(g),T=o.useMemo(()=>({name:A,onChange(e){w(e.target.value),v&&v(e,e.target.value)},value:C}),[A,v,w,C]);return(0,a.jsx)(m.A.Provider,{value:T,children:(0,a.jsx)(c.A,{role:"radiogroup",ref:S,className:(0,l.A)(y.root,r),...k,children:s})})});f.propTypes={children:r().node,className:r().string,defaultValue:r().any,name:r().string,onChange:r().func,value:r().any};let g=f},81392:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a.A,getRadioUtilityClass:()=>o.q,radioClasses:()=>o.A});var a=t(83075),o=t(92183)},81875:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>u,renderEditRating:()=>p,renderRating:()=>d});var a=t(80384),o=t(19340),s=t(95427),r=t(71632),l=t(32768);let i=o.memo(function(e){let{value:n}=e;return(0,a.jsxs)(s.A,{sx:{display:"flex",alignItems:"center",lineHeight:"24px",color:"text.secondary"},children:[(0,a.jsx)(r.A,{value:n,sx:{mr:1},readOnly:!0})," ",Math.round(10*Number(n))/10]})});function c(e){let{id:n,value:t,field:i}=e,c=(0,l.h)(),d=o.useRef(!1),p=async e=>{await c.current.setEditCellValue({id:n,field:i,value:Number(e.target.value)},e),d.current||c.current.stopCellEditMode({id:n,field:i}),d.current=!1};return(0,a.jsxs)(s.A,{sx:{display:"flex",alignItems:"center",lineHeight:"24px",color:"text.secondary",mr:1},children:[(0,a.jsx)(r.A,{ref:e=>{e&&(0!==t?e.querySelector(`input[value="${t}"]`).focus():e.querySelector('input[value=""]').focus())},name:"rating",value:Number(t),precision:1,onChange:p,sx:{mr:1},onKeyDown:e=>{e.key.startsWith("Arrow")?d.current=!0:d.current=!1}}),Number(t)]})}function d(e){return null==e.value?"":(0,a.jsx)(i,{value:e.value})}function p(e){return(0,a.jsx)(c,{...e})}let u=d},83075:(e,n,t)=>{"use strict";t.d(n,{A:()=>L});var a=t(80384),o=t(19340),s=t(53982),r=t.n(s),l=t(9281),i=t(93993),c=t(44951),d=t(3455),p=t(13410),u=t(29495);let m=(0,u.A)((0,a.jsx)("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"}),"RadioButtonUnchecked"),h=(0,u.A)((0,a.jsx)("path",{d:"M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"}),"RadioButtonChecked");var f=t(88806),g=t(49724),v=t(24927),x=t(53197);let k=(0,g.Ay)("span",{name:"MuiRadioButtonIcon",shouldForwardProp:f.A})({position:"relative",display:"flex"}),b=(0,g.Ay)(m,{name:"MuiRadioButtonIcon"})({transform:"scale(1)"}),y=(0,g.Ay)(h,{name:"MuiRadioButtonIcon"})((0,v.A)(({theme:e})=>({left:0,position:"absolute",transform:"scale(0)",...(0,x.yP)(e,"transform",{easing:e.transitions.easing.easeIn,duration:e.transitions.duration.shortest}),variants:[{props:{checked:!0},style:{transform:"scale(1)",...(0,x.yP)(e,"transform",{easing:e.transitions.easing.easeOut,duration:e.transitions.duration.shortest})}}]})));function C(e){let{checked:n=!1,classes:t={},fontSize:o}=e,s={...e,checked:n};return(0,a.jsxs)(k,{className:t.root,ownerState:s,children:[(0,a.jsx)(b,{fontSize:o,className:t.background,ownerState:s}),(0,a.jsx)(y,{fontSize:o,className:t.dot,ownerState:s})]})}C.propTypes={checked:r().bool,classes:r().object,fontSize:r().oneOf(["small","medium"])};var w=t(21810),S=t(17904),A=t(69620),T=t(93678),j=t(92183),I=t(93012),M=t(84691),R=t(26011);let P=(0,g.Ay)(p.A,{shouldForwardProp:e=>(0,f.A)(e)||"classes"===e,name:"MuiRadio",slot:"Root",overridesResolver:(e,n)=>{let{ownerState:t}=e;return[n.root,"medium"!==t.size&&n[`size${(0,w.A)(t.size)}`],n[`color${(0,w.A)(t.color)}`]]}})((0,v.A)(({theme:e})=>({color:(e.vars||e).palette.text.secondary,...e.focusVisible&&{[`&.${c.A.focusVisible} svg:first-of-type`]:{...d.Jc,borderRadius:99,...e.focusVisible}},[`&.${j.A.disabled}`]:{color:(e.vars||e).palette.action.disabled},variants:[{props:{color:"default",disabled:!1,disableRipple:!1},style:{"&:hover":{backgroundColor:e.alpha((e.vars||e).palette.action.active,(e.vars||e).palette.action.hoverOpacity)}}},...Object.entries(e.palette).filter((0,I.A)()).map(([n])=>({props:{color:n,disabled:!1,disableRipple:!1},style:{"&:hover":{backgroundColor:e.alpha((e.vars||e).palette[n].main,(e.vars||e).palette.action.hoverOpacity)}}})),...Object.entries(e.palette).filter((0,I.A)()).map(([n])=>({props:{color:n,disabled:!1},style:{[`&.${j.A.checked}`]:{color:(e.vars||e).palette[n].main}}})),{props:{disableRipple:!1},style:{"&:hover":{"@media (hover: none)":{backgroundColor:"transparent"}}}}]}))),E=(0,a.jsx)(C,{checked:!0}),D=(0,a.jsx)(C,{}),O=o.forwardRef(function(e,n){let t=(0,R.b)({props:e,name:"MuiRadio"}),{checked:s,checkedIcon:r=E,color:c="primary",icon:d=D,name:p,onChange:u,size:m="medium",className:h,disabled:f,disableRipple:g=!1,slots:v={},slotProps:x={},...k}=t,b=(0,A.A)(),y=f;b&&void 0===y&&(y=b.disabled),y??=!1;let C={...t,disabled:y,disableRipple:g,color:c,size:m},I=(e=>{let{classes:n,color:t,size:a}=e,o={root:["root",`color${(0,w.A)(t)}`,"medium"!==a&&`size${(0,w.A)(a)}`]};return{...n,...(0,i.A)(o,j.q,n)}}
1)(C),O=(0,T.A)(),L=s,N=(0,S.A)(u,O&&O.onChange),V=p;if(O){var $,q;void 0===L&&($=O.value,L="object"==typeof(q=t.value)&&null!==q?$===q:String($)===String(q)),void 0===V&&(V=O.name)}let B=x.input,[F,z]=(0,M.A)("root",{ref:n,elementType:P,className:(0,l.A)(I.root,h),shouldForwardComponentProp:!0,externalForwardedProps:{slots:v,slotProps:x,...k},getSlotProps:e=>({...e,onChange:(n,...t)=>{e.onChange?.(n,...t),N(n,...t)}}),ownerState:C,additionalProps:{type:"radio",icon:o.cloneElement(d,{fontSize:d.props.fontSize??m}),checkedIcon:o.cloneElement(r,{fontSize:r.props.fontSize??m}),disabled:y,name:V,checked:L,disableRipple:t.disableRipple,slots:v,slotProps:{input:"function"==typeof B?B(C):B}}});return(0,a.jsx)(F,{...z,classes:I})});O.propTypes={checked:r().bool,checkedIcon:r().node,classes:r().object,className:r().string,color:r().oneOfType([r().oneOf(["default","primary","secondary","error","info","success","warning"]),r().string]),disabled:r().bool,disableRipple:r().bool,icon:r().node,id:r().string,name:r().string,onChange:r().func,required:r().bool,size:r().oneOfType([r().oneOf(["medium","small"]),r().string]),slotProps:r().shape({input:r().oneOfType([r().func,r().object]),root:r().oneOfType([r().func,r().object])}),slots:r().shape({input:r().elementType,root:r().elementType}),sx:r().oneOfType([r().arrayOf(r().oneOfType([r().func,r().object,r().bool])),r().func,r().object]),value:r().any};let L=O},84221:(e,n,t)=>{"use strict";t.r(n),t.d(n,{alertClasses:()=>o.A,default:()=>a.A,getAlertUtilityClass:()=>o.X});var a=t(72392),o=t(82127)},86781:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>r,renderSparkline:()=>s});var a=t(80384),o=t(79775);function s(e){return null==e.value?"":(0,a.jsx)(o.E,{data:e.value,width:e.colDef.computedWidth,plotType:"bar"})}let r=s},90096:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a.A,formControlLabelClasses:()=>o.A,getFormControlLabelUtilityClasses:()=>o.u});var a=t(42867),o=t(72215)},93678:(e,n,t)=>{"use strict";t.d(n,{A:()=>s});var a=t(19340),o=t(17758);function s(){return a.useContext(o.A)}},98161:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>a.A,getPaperUtilityClass:()=>o.j,paperClasses:()=>o.A});var a=t(5999),o=t(92339)},98993:(e,n,t)=>{"use strict";t.r(n),t.d(n,{ColorSchemeTabsBasic:()=>x,default:()=>k});var a=t(80384),o=t(94894),s=t(4727),r=t(66233),l=t(63584),i=t(6181),c=t(38390),d=t(62291),p=t(5999),u=t(95427),m=t(42867),h=t(92183),f=t(83075),g=t(79905);let v="44px";function x(){let{mode:e,setMode:n}=(0,i.Ut)();return e?(0,a.jsxs)(g.A,{defaultValue:"system",row:!0,"aria-label":"demo-mode-toggle-custom-theme",name:"color-scheme-segmented-control",sx:{display:"flex",gap:"4px","& svg":{transform:"scale(0.8)",transition:"0.2s"},[`& .${h.A.checked} svg`]:{transform:"scale(1)"},[`& .${h.A.root}`]:{width:v,height:v,border:"1px solid transparent",borderRadius:"8px",[`&.${h.A.checked}`]:{border:"1px solid",borderColor:"divider",color:"text.primary"}},"& label":{margin:0}},onChange:e=>{n(e.target.value)},children:[(0,a.jsx)(m.A,{value:"light",control:(0,a.jsx)(f.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(r.default,{}),icon:(0,a.jsx)(r.default,{})}),label:""}),(0,a.jsx)(m.A,{value:"system",control:(0,a.jsx)(f.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(l.default,{}),icon:(0,a.jsx)(l.default,{})}),label:""}),(0,a.jsx)(m.A,{value:"dark",control:(0,a.jsx)(f.A,{color:"default",disableTouchRipple:!0,checkedIcon:(0,a.jsx)(s.default,{}),icon:(0,a.jsx)(s.default,{})}),label:""})]}):(0,a.jsxs)(u.A,{sx:{display:"grid",alignItems:"center",height:"44px",gap:"4px",opacity:.5,gridTemplateColumns:`repeat(3, ${v})`,placeItems:"center",color:"text.primary","& > div":{lineHeight:0},"& svg":{transform:"scale(0.8)"}},children:[(0,a.jsx)("div",{children:(0,a.jsx)(r.default,{})}),(0,a.jsx)("div",{children:(0,a.jsx)(l.default,{})}),(0,a.jsx)("div",{children:(0,a.jsx)(s.default,{})})]})}function k(e){let n=(0,c.A)({cssVariables:{cssVarPrefix:e.cssVarPrefix,colorSchemeSelector:e.colorSchemeSelector||"class"},colorSchemes:{light:{palette:{background:{paper:o.A[200]}}},dark:{palette:{background:{paper:o.A[900]}}}}});
1return(0,a.jsx)(d.A,{...e,theme:n,children:(0,a.jsx)(p.A,{"data-element":"demo-mode-toggle-custom-theme-paper",sx:{p:2,width:"100%",display:"flex",justifyContent:"center"},children:(0,a.jsx)(x,{})})})}}},e=>{e.O(0,[4188,5730,77240,99480,2222,2907,11987,85098,6991,57293,63144,79775,86571,15688,68287,82929,91149,76094,70922,72726,9588,82125,37953,27915,49795,90636,46593,38792],()=>e(e.s=7694)),_N_E=e.O()}]); 2//# sourceMappingURL=demos-1d0be2867ba91a86.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.