(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15703],{33897:function(n,t,e){var o=e(15012),a=/^\s+/;n.exports=function(n){return n?n.slice(0,o(n)+1).replace(a,""):n}},15012:function(n){var t=/\s/;n.exports=function(n){for(var e=n.length;e--&&t.test(n.charAt(e)););return e}},89678:function(n,t,e){var o=e(6627),a=e(85365),s=e(67948),r=Math.max,i=Math.min;n.exports=function(n,t,e){var c,l,p,u,d,m,h=0,f=!1,v=!1,g=!0;if("function"!=typeof n)throw TypeError("Expected a function");function k(t){var e=c,o=l;return c=l=void 0,h=t,u=n.apply(o,e)}function y(n){var e=n-m,o=n-h;return void 0===m||e>=t||e<0||v&&o>=p}function b(){var n,e,o,s=a();if(y(s))return x(s);d=setTimeout(b,(n=s-m,e=s-h,o=t-n,v?i(o,p-e):o))}function x(n){return(d=void 0,g&&c)?k(n):(c=l=void 0,u)}function C(){var n,e=a(),o=y(e);if(c=arguments,l=this,m=e,o){if(void 0===d)return h=n=m,d=setTimeout(b,t),f?k(n):u;if(v)return clearTimeout(d),d=setTimeout(b,t),k(m)}return void 0===d&&(d=setTimeout(b,t)),u}return t=s(t)||0,o(e)&&(f=!!e.leading,p=(v="maxWait"in e)?r(s(e.maxWait)||0,t):p,g="trailing"in e?!!e.trailing:g),C.cancel=function(){void 0!==d&&clearTimeout(d),h=0,c=m=l=d=void 0},C.flush=function(){return void 0===d?u:x(a())},C}},6627:function(n){n.exports=function(n){var t=typeof n;return null!=n&&("object"==t||"function"==t)}},85365:function(n,t,e){var o=e(73401);n.exports=function(){return o.Date.now()}},23763:function(n,t,e){var o=e(89678),a=e(6627);n.exports=function(n,t,e){var s=!0,r=!0;if("function"!=typeof n)throw TypeError("Expected a function");return a(e)&&(s="leading"in e?!!e.leading:s,r="trailing"in e?!!e.trailing:r),o(n,t,{leading:s,maxWait:t,trailing:r})}},67948:function(n,t,e){var o=e(33897),a=e(6627),s=e(42848),r=0/0,i=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,l=/^0o[0-7]+$/i,p=parseInt;n.exports=function(n){if("number"==typeof n)return n;if(s(n))return r;if(a(n)){var t="function"==typeof n.valueOf?n.valueOf():n;n=a(t)?t+"":t}if("string"!=typeof n)return 0===n?n:+n;n=o(n);var e=c.test(n);return e||l.test(n)?p(n.slice(2),e?2:8):i.test(n)?r:+n}},88515:function(n,t,e){"use strict";e.d(t,{h:function(){return p}});var o=e(88465),a=e(13427),s=e.n(a),r=e(92379),i=e(36626),c=e(47076),l=e(84248);function p(n){var t=n.checked,e=n.defaultChecked,a=n.disabled,p=n.onBlur,u=n.onChange,d=n.onFocus,m=n.onFocusVisible,h=n.readOnly,f=n.required,v=(0,i.Z)({controlled:t,default:!!e,name:"Switch",state:"checked"}),g=(0,o.Z)(v,2),k=g[0],y=g[1],b=r.useState(!1),x=(0,o.Z)(b,2),C=x[0],w=x[1];a&&C&&w(!1);var S=r.useRef(null),Z=(0,l.Z)(S);return{checked:k,disabled:!!a,focusVisible:C,getInputProps:function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return s()(s()({checked:t,defaultChecked:e,disabled:a,readOnly:h,ref:Z,required:f,type:"checkbox",role:"switch","aria-checked":t},n),{},{onChange:function(t){var e;t.nativeEvent.defaultPrevented||(y(t.target.checked),null==u||u(t),null==(e=n.onChange)||e.call(n,t))},onFocus:function(t){var e;S.current||(S.current=t.currentTarget),(0,c.Z)(t.target)&&(w(!0),null==m||m(t)),null==d||d(t),null==(e=n.onFocus)||e.call(n,t)},onBlur:function(t){var e;(0,c.Z)(t.target)||w(!1),null==p||p(t),null==(e=n.onBlur)||e.call(n,t)}})},inputRef:Z,readOnly:!!h}}},8480:function(n,t,e){"use strict";var o=e(4142),a=e(77127),s=e(33143),r=e(72259),i=e(27087),c=(0,o.Z)({themeId:r.Z,defaultTheme:s.Z,defaultClassName:i.Z.root,generateClassName:a.Z.generate});t.Z=c},27087:function(n,t,e){"use strict";var o=(0,e(57448).Z)("MuiBox",["root"]);t.Z=o},64564:function(n,t,e){"use strict";e.r(t),e.d(t,{boxClasses:function(){return a.Z},default:function(){return o.Z}});var o=e(8480),a=e(27087)},21878:function(n,t,e){"use strict";var o=e(88465),a=e(26218),s=e(21058),r=e(13427),i=e.n(r),c=e(92379),l=e(53048),p=e(47687),u=e(1540),d=e(25614),m=e(40186),h=e(78534),f=e(71663),v=e(90410),g=e(52593),k=e(28509),y=e(651),b=["id","className","component","disabled","required","error","color","size","orientation","slots","slotProps"],x=function(n){var t=n.disabled,e=n.error,o=n.size,a=n.color,s={root:["root",n.orientation,t&&"disabled",e&&"error",a&&"color".concat((0,p.Z)(a)),o&&"size".concat((0,p.Z)(o))]};return(0,d.Z)(s,v.S,{})},C=(0,h.Z)("div",{name:"JoyFormControl",slot:"Root",overridesResolver:function(n,t){return t.root}})(function(n){var t,e,o,a,r=n.theme,c=n.ownerState;return i()(i()(i()(i()(i()({"--unstable_RadioGroup-margin":"0.5rem 0","--FormLabel-alignSelf":"horizontal"===c.orientation?"align-items":"flex-start","--FormLabel-asteriskColor":r.vars.palette.danger[500]},"sm"===c.size&&{"--FormLabel-fontSize":r.vars.fontSize.xs,"--FormLabel-lineHeight":r.vars.lineHeight.xl,"--FormLabel-margin":"horizontal"===c.orientation?"0 0.5rem 0 0":"0 0 0.25rem 0","--FormHelperText-fontSize":r.vars.fontSize.xs,"--FormHelperText-lineHeight":r.vars.lineHeight.xl}),"md"===c.size&&{"--FormLabel-fontSize":r.vars.fontSize.sm,"--FormLabel-lineHeight":r.vars.lineHeight.sm,"--FormLabel-margin":"horizontal"===c.orientation?"0 0.75rem 0 0":"0 0 0.375rem 0","--FormHelperText-fontSize":r.vars.fontSize.sm,"--FormHelperText-lineHeight":r.vars.lineHeight.sm}),"lg"===c.size&&{"--FormLabel-fontSize":r.vars.fontSize.md,"--FormLabel-lineHeight":r.vars.lineHeight.md,"--FormLabel-margin":"horizontal"===c.orientation?"0 1rem 0 0":"0 0 0.5rem 0","--FormHelperText-fontSize":r.vars.fontSize.sm,"--FormHelperText-lineHeight":r.vars.lineHeight.sm}),c.color&&{"--FormHelperText-color":null==(t=r.vars.palette[c.color])?void 0:t[500]}),{},(a={"--FormHelperText-margin":"0.375rem 0 0 0"},(0,s.Z)(a,"&.".concat(v.Z.error),{"--FormHelperText-color":r.vars.palette.danger[500]}),(0,s.Z)(a,"&.".concat(v.Z.disabled),{"--FormLabel-color":null==(e=r.variants.plainDisabled)||null==(e=e[c.color||"neutral"])?void 0:e.color,"--FormHelperText-color":null==(o=r.variants.plainDisabled)||null==(o=o[c.color||"neutral"])?void 0:o.color}),(0,s.Z)(a,"display","flex"),(0,s.Z)(a,"position","relative"),(0,s.Z)(a,"flexDirection","horizontal"===c.orientation?"row":"column"),a),"horizontal"===c.orientation&&(0,s.Z)({},"& > label ~ .".concat(g.Z.root),{"--unstable_Switch-margin":"0 0 0 auto"}))}),w=c.forwardRef(function(n,t){var e,s=(0,m.Z)({props:n,name:"JoyFormControl"}),r=s.id,p=s.className,d=s.component,h=void 0===d?"div":d,v=s.disabled,g=void 0!==v&&v,w=s.required,S=void 0!==w&&w,Z=s.error,T=void 0!==Z&&Z,F=s.color,P=s.size,R=void 0===P?"md":P,H=s.orientation,j=s.slots,M=s.slotProps,z=(0,a.Z)(s,b),L=(0,u.Z)(r),O=c.useState(null),I=(0,o.Z)(O,2),B=I[0],E=I[1],D=i()(i()({},s),{},{id:L,component:h,color:F,disabled:g,error:T,required:S,size:R,orientation:void 0===H?"vertical":H}),N=x(D),A=(0,k.Z)("root",{ref:t,className:(0,l.default)(N.root,p),elementType:C,externalForwardedProps:i()(i()({},z),{},{component:h,slots:void 0===j?{}:j,slotProps:void 0===M?{}:M}),ownerState:D}),V=(0,o.Z)(A,2),W=V[0],_=V[1],q=c.useMemo(function(){return{disabled:g,required:S,error:T,color:F,size:R,htmlFor:L,labelId:"".concat(L,"-label"),"aria-describedby":B?"".concat(L,"-helper-text"):void 0,setHelperText:E,registerEffect:e}},[F,g,T,B,L,e,S,R]);return(0,y.jsx)(f.Z.Provider,{value:q,children:(0,y.jsx)(W,i()({},_))})});t.Z=w},90410:function(n,t,e){"use strict";e.d(t,{S:function(){return a}});var o=e(13029);function a(n){return(0,o.d6)("MuiFormControl",n)}var s=(0,o.sI)("MuiFormControl",["root","error","disabled","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","sizeSm","sizeMd","sizeLg","horizontal","vertical"]);t.Z=s},91835:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return o.Z},formControlClasses:function(){return a.Z},getFormControlUtilityClass:function(){return a.S}});var o=e(21878),a=e(90410)},78264:function(n,t,e){"use strict";var o=e(88465),a=e(26218),s=e(21058),r=e(13427),i=e.n(r),c=e(92379),l=e(84248),p=e(25614),u=e(78534),d=e(40186),m=e(49469),h=e(71663),f=e(90410),v=e(5744),g=e(28509),k=e(651),y=["children","component","slots","slotProps"],b=(0,u.Z)("div",{name:"JoyFormHelperText",slot:"Root",overridesResolver:function(n,t){return t.root}})(function(n){var t,e=n.theme;return t={"--Icon-fontSize":"calc(var(--FormHelperText-lineHeight) * 1em)",display:"flex",alignItems:"center",gap:"2px",fontFamily:e.vars.fontFamily.body,fontSize:"var(--FormHelperText-fontSize, ".concat(e.vars.fontSize.sm,")"),lineHeight:"var(--FormHelperText-lineHeight, ".concat(e.vars.lineHeight.sm,")"),color:"var(--FormHelperText-color, ".concat(e.vars.palette.text.tertiary,")"),margin:"var(--FormHelperText-margin, 0px)"},(0,s.Z)(t,".".concat(v.Z.root," + &"),{"--FormHelperText-margin":"0px"}),(0,s.Z)(t,".".concat(f.Z.error," &"),{"--Icon-color":"currentColor"}),t}),x=c.forwardRef(function(n,t){var e=(0,d.Z)({props:n,name:"JoyFormHelperText"}),s=e.children,r=e.component,u=e.slots,f=e.slotProps,v=(0,a.Z)(e,y),x=c.useRef(null),C=(0,l.Z)(x,t),w=c.useContext(h.Z),S=null==w?void 0:w.setHelperText;c.useEffect(function(){return null==S||S(x.current),function(){null==S||S(null)}},[S]);var Z=(0,p.Z)({root:["root"]},m.p,{}),T=i()(i()({},v),{},{component:r,slots:void 0===u?{}:u,slotProps:void 0===f?{}:f}),F=(0,g.Z)("root",{ref:C,elementType:b,externalForwardedProps:T,ownerState:e,additionalProps:{as:r,id:null==w?void 0:w["aria-describedby"]},className:Z.root}),P=(0,o.Z)(F,2),R=P[0],H=P[1];return(0,k.jsx)(R,i()(i()({},H),{},{children:s}))});t.Z=x},49469:function(n,t,e){"use strict";e.d(t,{p:function(){return a}});var o=e(13029);function a(n){return(0,o.d6)("MuiFormHelperText",n)}var s=(0,o.sI)("MuiFormHelperText",["root"]);t.Z=s},11761:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return o.Z},formHelperTextClasses:function(){return a.Z},getFormHelperTextUtilityClass:function(){return a.p}});var o=e(78264),a=e(49469)},33308:function(n,t,e){"use strict";var o=e(88465),a=e(26218),s=e(13427),r=e.n(s),i=e(92379),c=e(25614),l=e(78534),p=e(40186),u=e(28509),d=e(5744),m=e(71663),h=e(651),f=["children","component","htmlFor","id","slots","slotProps"],v=(0,l.Z)("label",{name:"JoyFormLabel",slot:"Root",overridesResolver:function(n,t){return t.root}})(function(n){var t=n.theme;return{"--Icon-fontSize":"calc(var(--FormLabel-lineHeight) * 1em)",WebkitTapHighlightColor:"transparent",alignSelf:"var(--FormLabel-alignSelf)",display:"flex",gap:"2px",alignItems:"center",flexWrap:"wrap",userSelect:"none",fontFamily:t.vars.fontFamily.body,fontSize:"var(--FormLabel-fontSize, ".concat(t.vars.fontSize.sm,")"),fontWeight:t.vars.fontWeight.md,lineHeight:"var(--FormLabel-lineHeight, ".concat(t.vars.lineHeight.sm,")"),color:"var(--FormLabel-color, ".concat(t.vars.palette.text.primary,")"),margin:"var(--FormLabel-margin, 0px)"}}),g=(0,l.Z)("span",{name:"JoyFormLabel",slot:"Asterisk",overridesResolver:function(n,t){return t.asterisk}})({color:"var(--FormLabel-asteriskColor)"}),k=i.forwardRef(function(n,t){var e,s,l=(0,p.Z)({props:n,name:"JoyFormLabel"}),k=l.children,y=l.component,b=l.htmlFor,x=l.id,C=l.slots,w=l.slotProps,S=(0,a.Z)(l,f),Z=i.useContext(m.Z),T=null!=(e=null!=(s=n.required)?s:null==Z?void 0:Z.required)&&e,F=r()(r()({},l),{},{required:T}),P=(0,c.Z)({root:["root"],asterisk:["asterisk"]},d.B,{}),R=r()(r()({},S),{},{component:void 0===y?"label":y,slots:void 0===C?{}:C,slotProps:void 0===w?{}:w}),H=(0,u.Z)("root",{additionalProps:{htmlFor:null!=b?b:null==Z?void 0:Z.htmlFor,id:null!=x?x:null==Z?void 0:Z.labelId},ref:t,className:P.root,elementType:v,externalForwardedProps:R,ownerState:F}),j=(0,o.Z)(H,2),M=j[0],z=j[1],L=(0,u.Z)("asterisk",{additionalProps:{"aria-hidden":!0},className:P.asterisk,elementType:g,externalForwardedProps:R,ownerState:F}),O=(0,o.Z)(L,2),I=O[0],B=O[1];return(0,h.jsxs)(M,r()(r()({},z),{},{children:[k,T&&(0,h.jsxs)(I,r()(r()({},B),{},{children:[" ","*"]}))]}))});t.Z=k},5744:function(n,t,e){"use strict";e.d(t,{B:function(){return a}});var o=e(13029);function a(n){return(0,o.d6)("MuiFormLabel",n)}var s=(0,o.sI)("MuiFormLabel",["root","asterisk"]);t.Z=s},41179:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return o.Z},formLabelClasses:function(){return a.Z},getFormLabelUtilityClass:function(){return a.B}});var o=e(33308),a=e(5744)},25586:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return o.ZP},getInputUtilityClass:function(){return a.l},inputClasses:function(){return a.Z}});var o=e(1910),a=e(32167)},14068:function(n,t,e){"use strict";var o=e(88465),a=e(26218),s=e(21058),r=e(13427),i=e.n(r),c=e(92379),l=e(47687),p=e(25614),u=e(88515),d=e(78534),m=e(40186),h=e(28509),f=e(52593),v=e(71663),g=e(651),k=["checked","defaultChecked","disabled","onBlur","onChange","onFocus","onFocusVisible","readOnly","required","id","color","variant","size","startDecorator","endDecorator","component","slots","slotProps"],y=function(n){var t=n.checked,e=n.disabled,o=n.focusVisible,a=n.readOnly,s=n.color,r=n.variant,i=n.size,c={root:["root",t&&"checked",e&&"disabled",o&&"focusVisible",a&&"readOnly",r&&"variant".concat((0,l.Z)(r)),s&&"color".concat((0,l.Z)(s)),i&&"size".concat((0,l.Z)(i))],thumb:["thumb",t&&"checked"],track:["track",t&&"checked"],action:["action",o&&"focusVisible"],input:["input"],startDecorator:["startDecorator"],endDecorator:["endDecorator"]};return(0,p.Z)(c,f.H,{})},b=function(n){var t=n.theme,e=n.ownerState;return function(){var n,o,a,s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=(null==(n=t.variants["".concat(e.variant).concat(s.state||"")])?void 0:n[e.color])||{};return{"--Switch-trackBackground":null!=(o=r.backgroundColor)?o:t.vars.palette.background.surface,"--Switch-trackColor":r.color,"--Switch-trackBorderColor":"outlined"===e.variant?r.borderColor:"currentColor","--Switch-thumbBackground":r.color,"--Switch-thumbColor":null!=(a=r.backgroundColor)?a:t.vars.palette.background.surface}}},x=(0,d.Z)("div",{name:"JoySwitch",slot:"Root",overridesResolver:function(n,t){return t.root}})(function(n){var t,e,o=n.theme,a=n.ownerState,r=b({theme:o,ownerState:a});return i()(i()(i()(i()(i()({"--Icon-color":"currentColor","--variant-borderWidth":null==(t=o.variants[a.variant])||null==(t=t[a.color])?void 0:t["--variant-borderWidth"],"--Switch-trackRadius":o.vars.radius.xl,"--Switch-thumbShadow":"soft"===a.variant?"none":"0 0 0 1px var(--Switch-trackBackground)"},"sm"===a.size&&{"--Switch-trackWidth":"26px","--Switch-trackHeight":"16px","--Switch-thumbSize":"10px",fontSize:o.vars.fontSize.sm,gap:"var(--Switch-gap, 6px)"}),"md"===a.size&&{"--Switch-trackWidth":"32px","--Switch-trackHeight":"20px","--Switch-thumbSize":"14px",fontSize:o.vars.fontSize.md,gap:"var(--Switch-gap, 8px)"}),"lg"===a.size&&{"--Switch-trackWidth":"40px","--Switch-trackHeight":"24px","--Switch-thumbSize":"18px",gap:"var(--Switch-gap, 12px)"}),{},{"--unstable_paddingBlock":"max((var(--Switch-trackHeight) - 2 * var(--variant-borderWidth, 0px) - var(--Switch-thumbSize)) / 2, 0px)","--Switch-thumbRadius":"max(var(--Switch-trackRadius) - var(--unstable_paddingBlock), min(var(--unstable_paddingBlock) / 2, var(--Switch-trackRadius) / 2))","--Switch-thumbWidth":"var(--Switch-thumbSize)","--Switch-thumbOffset":"max((var(--Switch-trackHeight) - var(--Switch-thumbSize)) / 2, 0px)"},r()),{},(e={"&:hover":{"@media (hover: hover)":i()({},r({state:"Hover"}))}},(0,s.Z)(e,"&.".concat(f.Z.checked),i()(i()({},r()),{},{"&:hover":{"@media (hover: hover)":i()({},r({state:"Hover"}))}})),(0,s.Z)(e,"&.".concat(f.Z.disabled),i()({pointerEvents:"none",color:o.vars.palette.text.tertiary},r({state:"Disabled"}))),(0,s.Z)(e,"display","inline-flex"),(0,s.Z)(e,"alignItems","center"),(0,s.Z)(e,"alignSelf","center"),(0,s.Z)(e,"fontFamily",o.vars.fontFamily.body),(0,s.Z)(e,"position","relative"),(0,s.Z)(e,"padding","calc((var(--Switch-thumbSize) / 2) - (var(--Switch-trackHeight) / 2)) calc(-1 * var(--Switch-thumbOffset))"),(0,s.Z)(e,"backgroundColor","initial"),(0,s.Z)(e,"border","none"),(0,s.Z)(e,"margin","var(--unstable_Switch-margin)"),e))}),C=(0,d.Z)("div",{name:"JoySwitch",slot:"Action",overridesResolver:function(n,t){return t.action}})(function(n){var t=n.theme;return(0,s.Z)({borderRadius:"var(--Switch-trackRadius)",position:"absolute",top:0,left:0,bottom:0,right:0},t.focus.selector,t.focus.default)}),w=(0,d.Z)("input",{name:"JoySwitch",slot:"Input",overridesResolver:function(n,t){return t.input}})({margin:0,height:"100%",width:"100%",opacity:0,position:"absolute",cursor:"pointer"}),S=(0,d.Z)("span",{name:"JoySwitch",slot:"Track",overridesResolver:function(n,t){return t.track}})(function(n){var t=n.theme,e=n.ownerState;return i()(i()(i()({position:"relative",color:"var(--Switch-trackColor)",height:"var(--Switch-trackHeight)",width:"var(--Switch-trackWidth)",display:"flex",flexShrink:0,justifyContent:"space-between",alignItems:"center",boxSizing:"border-box",border:"var(--variant-borderWidth, 0px) solid",borderColor:"var(--Switch-trackBorderColor)",backgroundColor:"var(--Switch-trackBackground)",borderRadius:"var(--Switch-trackRadius)",fontFamily:t.vars.fontFamily.body},"sm"===e.size&&{fontSize:t.vars.fontSize.xs}),"md"===e.size&&{fontSize:t.vars.fontSize.sm}),"lg"===e.size&&{fontSize:t.vars.fontSize.md})}),Z=(0,d.Z)("span",{name:"JoySwitch",slot:"Thumb",overridesResolver:function(n,t){return t.thumb}})((0,s.Z)({"--Icon-fontSize":"calc(var(--Switch-thumbSize) * 0.75)",display:"inline-flex",justifyContent:"center",alignItems:"center",position:"absolute",top:"50%",left:"calc(50% - var(--Switch-trackWidth) / 2 + var(--Switch-thumbWidth) / 2 + var(--Switch-thumbOffset))",transform:"translate(-50%, -50%)",width:"var(--Switch-thumbWidth)",height:"var(--Switch-thumbSize)",borderRadius:"var(--Switch-thumbRadius)",boxShadow:"var(--Switch-thumbShadow)",color:"var(--Switch-thumbColor)",backgroundColor:"var(--Switch-thumbBackground)"},"&.".concat(f.Z.checked),{left:"calc(50% + var(--Switch-trackWidth) / 2 - var(--Switch-thumbWidth) / 2 - var(--Switch-thumbOffset))"})),T=(0,d.Z)("span",{name:"JoySwitch",slot:"StartDecorator",overridesResolver:function(n,t){return t.startDecorator}})({display:"inline-flex"}),F=(0,d.Z)("span",{name:"JoySwitch",slot:"EndDecorator",overridesResolver:function(n,t){return t.endDecorator}})({display:"inline-flex"}),P=c.forwardRef(function(n,t){var e,s,r,l,p,d,f=(0,m.Z)({props:n,name:"JoySwitch"});f.checked,f.defaultChecked;var b=f.disabled,P=(f.onBlur,f.onChange,f.onFocus,f.onFocusVisible,f.readOnly,f.required,f.id),R=f.color,H=f.variant,j=f.size,M=f.startDecorator,z=f.endDecorator,L=f.component,O=f.slots,I=f.slotProps,B=(0,a.Z)(f,k),E=c.useContext(v.Z),D=null!=(e=null!=(s=n.size)?s:null==E?void 0:E.size)?e:void 0===j?"md":j,N=null!=(r=n.color)?r:null!=E&&E.error?"danger":null!=(l=null==E?void 0:E.color)?l:R,A=i()({disabled:null!=(p=null!=(d=n.disabled)?d:null==E?void 0:E.disabled)?p:b},f),V=(0,u.h)(A),W=V.getInputProps,_=V.checked,q=V.disabled,J=V.focusVisible,U=V.readOnly,K=i()(i()({},f),{},{id:P,checked:_,disabled:q,focusVisible:J,readOnly:U,color:_?N||"primary":N||"neutral",variant:void 0===H?"solid":H,size:D}),$=y(K),G=i()(i()({},B),{},{component:L,slots:void 0===O?{}:O,slotProps:void 0===I?{}:I}),Y=(0,h.Z)("root",{ref:t,className:$.root,elementType:x,externalForwardedProps:G,ownerState:K}),Q=(0,o.Z)(Y,2),X=Q[0],nn=Q[1],nt=(0,h.Z)("startDecorator",{additionalProps:{"aria-hidden":!0},className:$.startDecorator,elementType:T,externalForwardedProps:G,ownerState:K}),ne=(0,o.Z)(nt,2),no=ne[0],na=ne[1],ns=(0,h.Z)("endDecorator",{additionalProps:{"aria-hidden":!0},className:$.endDecorator,elementType:F,externalForwardedProps:G,ownerState:K}),nr=(0,o.Z)(ns,2),ni=nr[0],nc=nr[1],nl=(0,h.Z)("track",{className:$.track,elementType:S,externalForwardedProps:G,ownerState:K}),np=(0,o.Z)(nl,2),nu=np[0],nd=np[1],nm=(0,h.Z)("thumb",{className:$.thumb,elementType:Z,externalForwardedProps:G,ownerState:K}),nh=(0,o.Z)(nm,2),nf=nh[0],nv=nh[1],ng=(0,h.Z)("action",{className:$.action,elementType:C,externalForwardedProps:G,ownerState:K}),nk=(0,o.Z)(ng,2),ny=nk[0],nb=nk[1],nx=(0,h.Z)("input",{additionalProps:{id:null!=P?P:null==E?void 0:E.htmlFor,"aria-describedby":null==E?void 0:E["aria-describedby"]},className:$.input,elementType:w,externalForwardedProps:G,getSlotProps:W,ownerState:K}),nC=(0,o.Z)(nx,2),nw=nC[0],nS=nC[1];return(0,g.jsxs)(X,i()(i()({},nn),{},{children:[M&&(0,g.jsx)(no,i()(i()({},na),{},{children:"function"==typeof M?M(K):M})),(0,g.jsxs)(nu,i()(i()({},nd),{},{children:[null==nd?void 0:nd.children,(0,g.jsx)(nf,i()({},nv))]})),(0,g.jsx)(ny,i()(i()({},nb),{},{children:(0,g.jsx)(nw,i()({},nS))})),z&&(0,g.jsx)(ni,i()(i()({},nc),{},{children:"function"==typeof z?z(K):z}))]}))});t.Z=P},73814:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return o.Z},getSwitchUtilityClass:function(){return a.H},switchClasses:function(){return a.Z}});var o=e(14068),a=e(52593)},52593:function(n,t,e){"use strict";e.d(t,{H:function(){return a}});var o=e(13029);function a(n){return(0,o.d6)("MuiSwitch",n)}var s=(0,o.sI)("MuiSwitch",["root","checked","disabled","action","input","thumb","track","focusVisible","readOnly","colorPrimary","colorDanger","colorSuccess","colorWarning","colorContext","sizeSm","sizeMd","sizeLg","variantOutlined","variantSoft","variantSolid","startDecorator","endDecorator"]);t.Z=s},41771:function(n,t,e){"use strict";e.d(t,{F:function(){return l},Z:function(){return p}}),e(92379);var o=e(11926),a=e(2002),s=e(33143),r=e(46162),i=e(72259),c=e(651),l=function(){var n=(0,o.Z)(s.Z);return n[i.Z]||n};function p(n){var t=n.children,e=n.theme,o=s.Z;return e&&(o=(0,r.Z)(i.Z in e?e[i.Z]:e)),(0,c.jsx)(a.Z,{theme:o,themeId:e&&i.Z in e?i.Z:void 0,children:t})}},23628:function(n,t,e){"use strict";e.r(t),e.d(t,{CssVarsProvider:function(){return a.lL},StyledEngineProvider:function(){return p.Z},THEME_ID:function(){return o.Z},ThemeProvider:function(){return i.Z},createGetCssVar:function(){return l.N},extendTheme:function(){return l.Z},getInitColorSchemeScript:function(){return a.JO},shouldSkipGeneratingVar:function(){return s.Z},styled:function(){return r.Z},useColorScheme:function(){return a.tv},useTheme:function(){return i.F},useThemeProps:function(){return c.Z}});var o=e(72259),a=e(59498),s=e(96238),r=e(78534),i=e(41771),c=e(40186),l=e(46162),p=e(45917)},45917:function(n,t,e){"use strict";e.d(t,{Z:function(){return f}});var o,a,s,r,i=e(77493),c=e(38918),l=e(86722),p=e(81428);e(92379);var u=e(83872),d=e(91189),m=e(17506),h=e(651);function f(n){var t=n.injectFirst,e=n.children;return t&&r?(0,h.jsx)(u.C,{value:r,children:e}):e}"object"==typeof document&&(o={key:"css",prepend:!0},a=(0,d.default)(o),s=function(n){(0,l.Z)(e,n);var t=(0,p.Z)(e);function e(n){var o;return(0,c.Z)(this,e),(o=t.call(this,n)).prepend=a.sheet.prepend,o}return(0,i.Z)(e)}(m.m),a.sheet=new s({key:a.key,nonce:a.sheet.nonce,container:a.sheet.container,speedy:a.sheet.isSpeedy,prepend:a.sheet.prepend,insertionPoint:a.sheet.insertionPoint}),r=a)},20839:function(n,t,e){"use strict";e.r(t),e.d(t,{default:function(){return $}});var o,a,s,r,i,c={};e.r(c),e.d(c,{demoComponents:function(){return U},demos:function(){return J},docs:function(){return q},srcComponents:function(){return K}});var l=e(13427),p=e.n(l),u=e(92379),d=e.t(u,2),m=e(94447),h=e(53381),f=e(9407),v=e(99778),g=e(91189),k=e(23628),y=e(91835),b=e(41179),x=e(11761),C=e(25586),w=e(64564),S=e(73814),Z=e(79593),T=e(83872),F=e(46162),P=e(59498),R=e(21878),H=e(33308),j=e(78264),M=e(1910),z=e(651),L=(0,F.Z)({direction:"rtl"}),O=(0,g.default)({key:"joyrtl",stylisPlugins:[Z.Ji,h.default]}),I=e(88465),B=e(41726),E=e(78534),D=e(8480),N=e(14068),A=(0,E.Z)("div")(a||(a=(0,B.Z)(["\n  text-align: left;\n"]))),V=(0,E.Z)("div")(s||(s=(0,B.Z)(["\n  /* @noflip */\n  text-align: left;\n"]))),W=(0,g.default)({key:"muirtl",stylisPlugins:[Z.Ji,h.default]}),_=(0,g.default)({key:"mui"}),q={en:{description:"Learn how to implement right-to-left (RTL) text with Joy\xa0UI to support languages such as Arabic, Persian, and Hebrew.",location:"/docs/data/joy/customization/right-to-left/right-to-left.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">\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>Right-to-left support</h1><p class="description">Learn how to implement right-to-left (RTL) text with Joy\xa0UI to support languages such as Arabic, Persian, and Hebrew.</p>\n\n<h2 id="setup"><a href="#setup" class="title-link-to-anchor">Setup<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="setup"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>This guide outlines the three steps necessary to change the direction of text-based components in Joy\xa0UI to support RTL languages, as shown in the demo below:</p>\n',{demo:"RtlDemo.js"},'<h3 id="1-set-the-html-direction"><a href="#1-set-the-html-direction" class="title-link-to-anchor">1. Set the HTML direction<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="1-set-the-html-direction"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>You can set the text direction either globally (across the entire app) or locally (specific to individual components), depending on your use case.</p>\n<h4>Globally</h4><p>Add <code>dir=&quot;rtl&quot;</code> to the app&#39;s root <code>&lt;html&gt;</code> tag to set the global text direction:</p>\n<div class="MuiCode-root"><pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></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> $keyC<span>)</span></span></button></div>\n<p>If you can&#39;t set the <code>dir</code> attribute directly on the root <code>&lt;html&gt;</code> element, as a workaround, use the JavaScript API before the page is rendered:</p>\n<div class="MuiCode-root"><pre><code class="language-js">document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">\'dir\'</span><span class="token punctuation">,</span> <span class="token string">\'rtl\'</span><span class="token punctuation">)</span><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> $keyC<span>)</span></span></button></div>\n<h4>Locally</h4><p>Add the <code>dir=&quot;rtl&quot;</code> attribute to any other HTML element or React component if you need limit the scope of the text direction to that element and its children.</p>\n<aside class="MuiCallout-root MuiCallout-warning"><div class="MuiCallout-icon-container">\n<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyRoundedIcon">\n<use class="MuiCode-copied-icon" xlink:href="#warning-icon" />\n</svg>\n</div><div class="MuiCallout-content"><p>Components that use React portals (like the <a href="/joy-ui/react-modal/">Modal</a>) do <em>not</em> inherit the <code>dir</code> attribute from parents, because they actually render outside of their parental DOM trees.</p>\n<p>You must apply the <code>dir</code> attribute directly to these components if it&#39;s not globally defined as right-to-left:</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Modal</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ❌ this Modal will still be left-to-right (the default)</span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Modal</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rtl<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ this Modal will be right-to-left as intended</span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></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> $keyC<span>)</span></span></button></div>\n</div></aside><h3 id="2-set-the-theme-direction"><a href="#2-set-the-theme-direction" class="title-link-to-anchor">2. Set the theme direction<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="2-set-the-theme-direction"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Use the <code>extendTheme</code> API to set the theme direction to <code>&#39;rtl&#39;</code>:</p>\n<div class="MuiCode-root"><pre><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> extendTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@mui/joy/styles\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n  <span class="token literal-property property">direction</span><span class="token operator">:</span> <span class="token string">\'rtl\'</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><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> $keyC<span>)</span></span></button></div>\n<h3 id="3-configure-rtl-style-plugin"><a href="#3-configure-rtl-style-plugin" class="title-link-to-anchor">3. Configure RTL style plugin<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="3-configure-rtl-style-plugin"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Install the <a href="https://github.com/styled-components/stylis-plugin-rtl"><code>stylis-plugin-rtl</code></a> using one of the commands below:</p>\n',{type:"codeblock",data:[{language:"bash",tab:"npm",code:"npm install stylis stylis-plugin-rtl"},{language:"bash",tab:"pnpm",code:"pnpm add stylis stylis-plugin-rtl"},{language:"bash",tab:"yarn",code:"yarn add stylis stylis-plugin-rtl"}],storageKey:"package-manager"},'<h4>With Emotion</h4><p>If you&#39;re using Emotion, use the <a href="https://emotion.sh/docs/cache-provider">CacheProvider</a> to create a new cache instance that uses <code>rtlPlugin</code> from <code>stylis-plugin-rtl</code> and add that to the top of your application tree:</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> CacheProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@emotion/react\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> createCache <span class="token keyword">from</span> <span class="token string">\'@emotion/cache\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> prefixer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'stylis\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> rtlPlugin <span class="token keyword">from</span> <span class="token string">\'stylis-plugin-rtl\'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// Create rtl cache</span>\n<span class="token keyword">const</span> cacheRtl <span class="token operator">=</span> <span class="token function">createCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n  <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">\'muirtl\'</span><span class="token punctuation">,</span>\n  <span class="token literal-property property">stylisPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>prefixer<span class="token punctuation">,</span> rtlPlugin<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\n<span class="token keyword">function</span> <span class="token function">Rtl</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CacheProvider</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>cacheRtl<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CacheProvider</span></span><span class="token punctuation">></span></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> $keyC<span>)</span></span></button></div>\n<h4>With styled-components</h4><p>If you&#39;re using styled-components, use the <a href="https://styled-components.com/docs/api#stylesheetmanager">StyleSheetManager</a> and provide <code>rtlPlugin</code> to the <code>stylisPlugins</code> property:</p>\n<div class="MuiCode-root"><pre><code class="language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> StyleSheetManager <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'styled-components\'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> rtlPlugin <span class="token keyword">from</span> <span class="token string">\'stylis-plugin-rtl\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">function</span> <span class="token function">Rtl</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">&lt;</span><span class="token class-name">StyleSheetManager</span></span> <span class="token attr-name">stylisPlugins</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>rtlPlugin<span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n      <span class="token punctuation">{</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">StyleSheetManager</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> $keyC<span>)</span></span></button></div>\n<h2 id="opting-out-of-rtl-locally"><a href="#opting-out-of-rtl-locally" class="title-link-to-anchor">Opting out of RTL locally<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="opting-out-of-rtl-locally"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>To turn off RTL on specific components, use the template literal syntax and add the <code>/* @noflip */</code> directive:</p>\n<div class="MuiCode-root"><pre><code class="language-js"><span class="token keyword">const</span> LeftToRightTextInRtlApp <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token string">\'div\'</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">\n  /* @noflip */\n  text-align: left;\n</span><span class="token template-punctuation string">`</span></span><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> $keyC<span>)</span></span></button></div>\n',{demo:"RtlOptOut.js"}],toc:[{text:"Setup",level:2,hash:"setup",children:[{text:"1. Set the HTML direction",level:3,hash:"1-set-the-html-direction"},{text:"2. Set the theme direction",level:3,hash:"2-set-the-theme-direction"},{text:"3. Configure RTL style plugin",level:3,hash:"3-configure-rtl-style-plugin"}]},{text:"Opting out of RTL locally",level:2,hash:"opting-out-of-rtl-locally",children:[]}],title:"Right-to-left support",headers:{components:[]}}},J={"RtlDemo.js":{module:"./RtlDemo.js",raw:"import * as React from 'react';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport { prefixer } from 'stylis';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { CssVarsProvider, extendTheme } from '@mui/joy/styles';\nimport FormControl from '@mui/joy/FormControl';\nimport FormLabel from '@mui/joy/FormLabel';\nimport FormHelperText from '@mui/joy/FormHelperText';\nimport Input from '@mui/joy/Input';\n\nconst theme = extendTheme({\n  direction: 'rtl',\n});\n\nconst cacheRtl = createCache({\n  key: 'joyrtl',\n  stylisPlugins: [prefixer, rtlPlugin],\n});\n\nexport default function RtlDemo() {\n  return (\n    <CacheProvider value={cacheRtl}>\n      <CssVarsProvider theme={theme}>\n        <div dir=\"rtl\">\n          <FormControl>\n            <FormLabel>ملصق</FormLabel>\n            <Input placeholder=\"العنصر النائب\" />\n            <FormHelperText>هذا نص مساعد</FormHelperText>\n          </FormControl>\n        </div>\n      </CssVarsProvider>\n    </CacheProvider>\n  );\n}\n",jsxPreview:'<CacheProvider value={cacheRtl}>\n  <CssVarsProvider theme={theme}>\n    <div dir="rtl">\n      <FormControl>\n        <FormLabel>ملصق</FormLabel>\n        <Input placeholder="العنصر النائب" />\n        <FormHelperText>هذا نص مساعد</FormHelperText>\n      </FormControl>\n    </div>\n  </CssVarsProvider>\n</CacheProvider>',moduleTS:"./RtlDemo.js",rawTS:"import * as React from 'react';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport { prefixer } from 'stylis';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { CssVarsProvider, extendTheme } from '@mui/joy/styles';\nimport FormControl from '@mui/joy/FormControl';\nimport FormLabel from '@mui/joy/FormLabel';\nimport FormHelperText from '@mui/joy/FormHelperText';\nimport Input from '@mui/joy/Input';\n\nconst theme = extendTheme({\n  direction: 'rtl',\n});\n\nconst cacheRtl = createCache({\n  key: 'joyrtl',\n  stylisPlugins: [prefixer, rtlPlugin],\n});\n\nexport default function RtlDemo() {\n  return (\n    <CacheProvider value={cacheRtl}>\n      <CssVarsProvider theme={theme}>\n        <div dir=\"rtl\">\n          <FormControl>\n            <FormLabel>ملصق</FormLabel>\n            <Input placeholder=\"العنصر النائب\" />\n            <FormHelperText>هذا نص مساعد</FormHelperText>\n          </FormControl>\n        </div>\n      </CssVarsProvider>\n    </CacheProvider>\n  );\n}\n"},"RtlOptOut.js":{module:"./RtlOptOut.js",raw:"import * as React from 'react';\nimport { prefixer } from 'stylis';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { styled } from '@mui/joy/styles';\nimport Box from '@mui/joy/Box';\nimport Switch from '@mui/joy/Switch';\n\nconst Normal = styled('div')`\n  text-align: left;\n`;\n\nconst Noflip = styled('div')`\n  /* @noflip */\n  text-align: left;\n`;\n\nconst rtlCache = createCache({\n  key: 'muirtl',\n  stylisPlugins: [prefixer, rtlPlugin],\n});\n\nconst ltrCache = createCache({\n  key: 'mui',\n});\n\nexport default function RtlOptOut() {\n  const [rtl, setRtl] = React.useState(false);\n\n  const handleChange = () => {\n    setRtl(!rtl);\n  };\n\n  return (\n    <Box sx={{ width: '100%', display: 'flex' }}>\n      <Switch onChange={handleChange} endDecorator=\"Toggle RTL\" />\n      <CacheProvider value={rtl ? rtlCache : ltrCache}>\n        <Box sx={{ flexGrow: 1, mx: 2 }} dir={rtl ? 'rtl' : ''}>\n          <Normal>RTL normal behavior</Normal>\n          <Noflip>RTL noflip</Noflip>\n        </Box>\n      </CacheProvider>\n    </Box>\n  );\n}\n",jsxPreview:"<Switch onChange={handleChange} endDecorator=\"Toggle RTL\" />\n<CacheProvider value={rtl ? rtlCache : ltrCache}>\n  <Box sx={{ flexGrow: 1, mx: 2 }} dir={rtl ? 'rtl' : ''}>\n    <Normal>RTL normal behavior</Normal>\n    <Noflip>RTL noflip</Noflip>\n  </Box>\n</CacheProvider>",moduleTS:"./RtlOptOut.js",rawTS:"import * as React from 'react';\nimport { prefixer } from 'stylis';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { styled } from '@mui/joy/styles';\nimport Box from '@mui/joy/Box';\nimport Switch from '@mui/joy/Switch';\n\nconst Normal = styled('div')`\n  text-align: left;\n`;\n\nconst Noflip = styled('div')`\n  /* @noflip */\n  text-align: left;\n`;\n\nconst rtlCache = createCache({\n  key: 'muirtl',\n  stylisPlugins: [prefixer, rtlPlugin],\n});\n\nconst ltrCache = createCache({\n  key: 'mui',\n});\n\nexport default function RtlOptOut() {\n  const [rtl, setRtl] = React.useState(false);\n\n  const handleChange = () => {\n    setRtl(!rtl);\n  };\n\n  return (\n    <Box sx={{ width: '100%', display: 'flex' }}>\n      <Switch onChange={handleChange} endDecorator=\"Toggle RTL\" />\n      <CacheProvider value={rtl ? rtlCache : ltrCache}>\n        <Box sx={{ flexGrow: 1, mx: 2 }} dir={rtl ? 'rtl' : ''}>\n          <Normal>RTL normal behavior</Normal>\n          <Noflip>RTL noflip</Noflip>\n        </Box>\n      </CacheProvider>\n    </Box>\n  );\n}\n"}};J.scope={process:{},import:{react:d,"stylis-plugin-rtl":h,stylis:f,"@emotion/react":v,"@emotion/cache":g,"@mui/joy/styles":k,"@mui/joy/FormControl":y,"@mui/joy/FormLabel":b,"@mui/joy/FormHelperText":x,"@mui/joy/Input":C,"@mui/joy/Box":w,"@mui/joy/Switch":S}};var U={"./RtlDemo.js":function(){return o||(o=(0,z.jsx)(T.C,{value:O,children:(0,z.jsx)(P.lL,{theme:L,children:(0,z.jsx)("div",{dir:"rtl",children:(0,z.jsxs)(R.Z,{children:[(0,z.jsx)(H.Z,{children:"ملصق"}),(0,z.jsx)(M.ZP,{placeholder:"العنصر النائب"}),(0,z.jsx)(j.Z,{children:"هذا نص مساعد"})]})})})}))},"./RtlOptOut.js":function(){var n=u.useState(!1),t=(0,I.Z)(n,2),e=t[0],o=t[1];return(0,z.jsxs)(D.Z,{sx:{width:"100%",display:"flex"},children:[(0,z.jsx)(N.Z,{onChange:function(){o(!e)},endDecorator:"Toggle RTL"}),(0,z.jsx)(T.C,{value:e?W:_,children:(0,z.jsxs)(D.Z,{sx:{flexGrow:1,mx:2},dir:e?"rtl":"",children:[r||(r=(0,z.jsx)(A,{children:"RTL normal behavior"})),i||(i=(0,z.jsx)(V,{children:"RTL noflip"}))]})})]})}},K={};function $(){return(0,z.jsx)(m.Z,p()({},c))}},94447:function(n,t,e){"use strict";e.d(t,{Z:function(){return b}});var o,a=e(13427),s=e.n(a),r=e(92379),i=e(39519),c=e.n(i),l=e(3511),p=e(11926),u=e(59498),d=e(39424),m=e(72435),h=e(40211),f=e(10009),v=e(53433),g=e(92851),k=e(651);function y(n){var t=n.mode,e=(0,u.tv)().setMode;return r.useEffect(function(){e(t)},[t,e]),null}function b(n){var t=(0,p.Z)(),e=(0,l.useRouter)(),a=(0,h.ln)(e.asPath).canonicalAs,i=n.disableAd,c=void 0!==i&&i,b=n.disableToc,x=n.disableCssVarsProvider,C=n.demos,w=void 0===C?{}:C,S=n.docs,Z=n.demoComponents,T=n.srcComponents,F=S[(0,v.fO)()]||S.en,P=a.startsWith("/joy-ui/")&&!(void 0!==x&&x),R=P?u.lL:r.Fragment,H=P?g.BrandingProvider:r.Fragment,j=s()({},P&&{mode:t.palette.mode});return(0,k.jsxs)(f.Z,{cardOptions:{description:F.headers.cardDescription,title:F.headers.cardTitle},description:F.description,disableAd:c,disableToc:void 0!==b&&b,location:F.location,title:F.title,toc:F.toc,children:[c?null:o||(o=(0,k.jsx)(g.BrandingProvider,{children:(0,k.jsx)(d.hw,{children:(0,k.jsx)(d.Ad,{})})})),(0,k.jsxs)(R,{children:[P&&(0,k.jsx)(y,{mode:t.palette.mode}),F.rendered.map(function(n,e){return(0,k.jsx)(m.Z,{demoComponents:Z,demos:w,disableAd:c,localizedDoc:F,renderedMarkdownOrDemo:n,srcComponents:T,theme:t,WrapperComponent:H,wrapperProps:j},"demos-section-".concat(e))})]})]})}y.propTypes={mode:c().oneOf(["light","dark"])}},92116:function(n,t,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/joy-ui/customization/right-to-left",function(){return e(20839)}])},84835:function(n,t,e){"use strict";var o=e(11596);function a(){}function s(){}s.resetWarningCache=a,n.exports=function(){function n(n,t,e,a,s,r){if(r!==o){var i=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function t(){return n}n.isRequired=n;var e={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:t,element:n,elementType:n,instanceOf:t,node:n,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:s,resetWarningCache:a};return e.PropTypes=e,e}},39519:function(n,t,e){n.exports=e(84835)()},11596:function(n){"use strict";n.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},9407:function(n,t,e){"use strict";e.r(t),e.d(t,{CHARSET:function(){return o.YY},COMMENT:function(){return o.Ab},COUNTER_STYLE:function(){return o.W},DECLARATION:function(){return o.h5},DOCUMENT:function(){return o.K0},FONT_FACE:function(){return o.$m},FONT_FEATURE_VALUES:function(){return o.Lt},IMPORT:function(){return o.K$},KEYFRAMES:function(){return o.lK},LAYER:function(){return o.JM},MEDIA:function(){return o.iD},MOZ:function(){return o.uj},MS:function(){return o.MS},NAMESPACE:function(){return o.A7},PAGE:function(){return o.qX},RULESET:function(){return o.Fr},SUPPORTS:function(){return o.QY},VIEWPORT:function(){return o.Li},WEBKIT:function(){return o.G$},abs:function(){return a.Wn},alloc:function(){return i.un},append:function(){return a.R3},assign:function(){return a.f0},caret:function(){return i.Ud},char:function(){return i.Tb},character:function(){return i.GZ},characters:function(){return i.Rr},charat:function(){return a.uO},column:function(){return i.$Q},combine:function(){return a.$e},comment:function(){return s.UI},commenter:function(){return i.q6},compile:function(){return s.MY},copy:function(){return i.JG},dealloc:function(){return i.cE},declaration:function(){return s.CK},delimit:function(){return i.iF},delimiter:function(){return i._W},escaping:function(){return i.kq},from:function(){return a.Dp},hash:function(){return a.vp},identifier:function(){return i.QU},indexof:function(){return a.Cw},length:function(){return i.kE},line:function(){return i.jv},match:function(){return a.EQ},middleware:function(){return l.qR},namespace:function(){return l.uD},next:function(){return i.lp},node:function(){return i.dH},parse:function(){return s.Qc},peek:function(){return i.fj},position:function(){return i.FK},prefix:function(){return r.O},prefixer:function(){return l.Ji},prev:function(){return i.mp},replace:function(){return a.gx},ruleset:function(){return s.BL},rulesheet:function(){return l.cD},serialize:function(){return c.q},sizeof:function(){return a.Ei},slice:function(){return i.tP},stringify:function(){return c.P},strlen:function(){return a.to},substr:function(){return a.tb},token:function(){return i.r},tokenize:function(){return i.wS},tokenizer:function(){return i.qU},trim:function(){return a.fy},whitespace:function(){return i.Qb}});var o=e(20109),a=e(36551),s=e(19011),r=e(73403),i=e(55449),c=e(59881),l=e(79593)}},function(n){n.O(0,[49774,43706,97146,32706,10556,17376,98236,15686,73119,78756,79955,17120,51777,86231,60590,4648,60213,74461,86652,51233,44499,76436,41661,72435,1910,92888,40179],function(){return n(n.s=92116)}),_N_E=n.O()}]);