(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[80281,1655],{7934:function(t,n,e){"use strict";e.d(n,{O:function(){return d},r:function(){return v}});var o=e(63546),i=e(57622),r=e.n(i);e(92379);var a=e(95985),s=e(44752),l=e(78780),c=e(10882),p=e(51880),m=e(651),u=["classNameDescription","classNameTitle","description","icon","link","svg","title","titleProps"];function d(t){var n=t.icon;return(0,m.jsx)(s.Z,{sx:function(t){return r()({width:36,height:36,display:"flex",justifyContent:"center",alignItems:"center",flexShrink:0,borderRadius:1,border:"1px solid",borderColor:"primary.200",bgcolor:"primary.50",boxShadow:"0px 0 0 2px ".concat((0,a.Fq)(t.palette.primary[500],.1),", 0px 2px 12px 0px rgba(234, 237, 241, 0.3) inset"),"& .MuiSvgIcon-root":{fontSize:t.typography.pxToRem(18)}},t.applyDarkStyles({borderColor:(0,a.Fq)(t.palette.primary[400],.25),bgcolor:(0,a.Fq)(t.palette.primary[900],.2),boxShadow:"0 0 0 2px ".concat((0,a.Fq)(t.palette.primary[600],.1),", 0px 2px 12px 0px rgba(0, 0, 0, 0.25) inset")}))},children:n})}function v(t){var n=t.classNameDescription,e=t.classNameTitle,i=t.description,s=t.icon,v=t.link,h=t.svg,g=t.title,f=t.titleProps,y=(0,o.Z)(t,u);return(0,m.jsxs)(l.Z,r()(r()(r()({variant:"outlined",component:v?p.r:"div",href:v},v?{noLinkStyle:!0,prefetch:!1}:{}),{},{sx:function(t){return r()({p:2.5,height:"100%",background:"".concat((t.vars||t).palette.gradients.linearSubtle)},t.applyDarkStyles({bgcolor:(0,a.Fq)(t.palette.primaryDark[800],.25),background:"".concat((t.vars||t).palette.gradients.linearSubtle),borderColor:"primaryDark.700"}))}},y),{},{children:[h&&h,s&&(0,m.jsx)(d,{icon:s}),(0,m.jsx)(c.Z,r()(r()({fontWeight:"semiBold",component:"h3",color:"text.primary",variant:"body2",mt:s?2:0,mb:i?.5:0,className:e},f),{},{children:g})),(0,m.jsx)(c.Z,{variant:"body2",color:"text.secondary",className:n,children:i})]}))}},45522:function(t,n,e){"use strict";var o=e(59060),i=e(63546),r=e(75045),a=e(57622),s=e.n(a),l=e(92379),c=e(89208),p=e(23321),m=e(14117),u=e(51088),d=e(10263),v=e(78911),h=e(95262),g=e(6024),f=e(61198),y=e(651),x=["children","component","slots","slotProps"],L=(0,m.Z)("div",{name:"JoyFormHelperText",slot:"Root",overridesResolver:function(t,n){return n.root}})(function(t){var n,e=t.theme;return n={"--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,r.Z)(n,".".concat(g.Z.root," + &"),{"--FormHelperText-margin":"0px"}),(0,r.Z)(n,".".concat(h.Z.error," &"),{"--Icon-color":"currentColor"}),n}),I=l.forwardRef(function(t,n){var e=(0,u.Z)({props:t,name:"JoyFormHelperText"}),r=e.children,a=e.component,m=e.slots,h=e.slotProps,g=(0,i.Z)(e,x),I=l.useRef(null),b=(0,c.Z)(I,n),w=l.useContext(v.Z),Z=null==w?void 0:w.setHelperText;l.useEffect(function(){return null==Z||Z(I.current),function(){null==Z||Z(null)}},[Z]);var j=(0,p.Z)({root:["root"]},d.p,{}),C=s()(s()({},g),{},{component:a,slots:void 0===m?{}:m,slotProps:void 0===h?{}:h}),k=(0,f.Z)("root",{ref:b,elementType:L,externalForwardedProps:C,ownerState:e,additionalProps:{as:a,id:null==w?void 0:w["aria-describedby"]},className:j.root}),S=(0,o.Z)(k,2),B=S[0],z=S[1];return(0,y.jsx)(B,s()(s()({},z),{},{children:r}))});n.Z=I},10263:function(t,n,e){"use strict";e.d(n,{p:function(){return i}});var o=e(74817);function i(t){return(0,o.d6)("MuiFormHelperText",t)}var r=(0,o.sI)("MuiFormHelperText",["root"]);n.Z=r},5953:function(t,n,e){"use strict";e.r(n),e.d(n,{default:function(){return o.Z},formHelperTextClasses:function(){return i.Z},getFormHelperTextUtilityClass:function(){return i.p}});var o=e(45522),i=e(10263)},9510:function(t,n,e){"use strict";var o=e(92379).createContext(void 0);n.Z=o},86855:function(t,n,e){"use strict";var o=e(92379).createContext(void 0);n.Z=o},20450:function(t,n,e){"use strict";e.d(n,{C:function(){return Z}});var o=e(59060),i=e(63546),r=e(57622),a=e.n(r),s=e(92379),l=e(53048),c=e(29133),p=e(23321),m=e(14117),u=e(51088),d=e(19842),v=e(26719),h=e(13194),g=e(9510),f=e(86855),y=e(57559),x=e(21808),L=e(61198),I=e(651),b=["component","className","children","size","orientation","wrap","variant","color","role","slots","slotProps"],w=function(t){var n=t.variant,e=t.color,o=t.size,i=t.nesting,r=t.orientation,a=t.instanceSize,s={root:["root",r,n&&"variant".concat((0,c.Z)(n)),e&&"color".concat((0,c.Z)(e)),!a&&!i&&o&&"size".concat((0,c.Z)(o)),a&&"size".concat((0,c.Z)(a)),i&&"nesting"]};return(0,p.Z)(s,v.z,{})},Z=(0,m.Z)("ul")(function(t){var n,e=t.theme,o=t.ownerState,i=(0,d.V)({theme:e,ownerState:o},["p","padding","borderRadius"]),r=i.p,s=i.padding,l=i.borderRadius;function c(t){return"sm"===t?{"--ListDivider-gap":"0.25rem","--ListItem-minHeight":"2rem","--ListItem-paddingY":"3px","--ListItem-paddingX":o.marker?"3px":"0.5rem","--ListItem-gap":"0.5rem","--ListItemDecorator-size":"horizontal"===o.orientation?"1.5rem":"2rem","--Icon-fontSize":e.vars.fontSize.lg}:"md"===t?{"--ListDivider-gap":"0.375rem","--ListItem-minHeight":"2.25rem","--ListItem-paddingY":"0.25rem","--ListItem-paddingX":o.marker?"0.25rem":"0.75rem","--ListItem-gap":"0.625rem","--ListItemDecorator-size":"horizontal"===o.orientation?"1.75rem":"2.5rem","--Icon-fontSize":e.vars.fontSize.xl}:"lg"===t?{"--ListDivider-gap":"0.5rem","--ListItem-minHeight":"2.75rem","--ListItem-paddingY":"0.375rem","--ListItem-paddingX":o.marker?"0.5rem":"1rem","--ListItem-gap":"0.75rem","--ListItemDecorator-size":"horizontal"===o.orientation?"2.25rem":"3rem","--Icon-fontSize":e.vars.fontSize.xl2}:{}}return[o.nesting&&a()(a()(a()({},c(o.instanceSize)),{},{"--ListItem-paddingRight":"var(--ListItem-paddingX)","--ListItem-paddingLeft":"var(--NestedListItem-paddingLeft)","--ListItemButton-marginBlock":"0px","--ListItemButton-marginInline":"0px","--ListItem-marginBlock":"0px","--ListItem-marginInline":"0px",padding:0},o.marker&&{paddingInlineStart:"calc(3ch - var(--_List-markerDeduct, 0px))"}),{},{marginInlineStart:"var(--NestedList-marginLeft)",marginInlineEnd:"var(--NestedList-marginRight)",marginBlockStart:"var(--List-gap)",marginBlockEnd:"initial"}),!o.nesting&&a()(a()(a()(a()(a()({},c(o.size)),{},{"--List-gap":"0px","--List-nestedInsetStart":"0px","--ListItem-paddingLeft":"var(--ListItem-paddingX)","--ListItem-paddingRight":"var(--ListItem-paddingX)"},o.marker&&{"--_List-markerDeduct":"1ch"}),{},{"--unstable_List-childRadius":"calc(max(var(--List-radius) - var(--List-padding), min(var(--List-padding) / 2, var(--List-radius) / 2)) - var(--variant-borderWidth, 0px))","--ListItem-radius":"var(--unstable_List-childRadius)","--ListItem-startActionTranslateX":"calc(0.5 * var(--ListItem-paddingLeft))","--ListItem-endActionTranslateX":"calc(-0.5 * var(--ListItem-paddingRight))",margin:"initial"},e.typography["body-".concat(o.size)]),"horizontal"===o.orientation?a()({},o.wrap?{padding:"var(--List-padding)",marginInlineStart:"calc(-1 * var(--List-gap))",marginBlockStart:"calc(-1 * var(--List-gap))"}:{paddingInline:"var(--List-padding, var(--ListDivider-gap))",paddingBlock:"var(--List-padding)"}):{paddingBlock:"var(--List-padding, var(--ListDivider-gap))",paddingInline:"var(--List-padding)"}),o.marker&&{paddingInlineStart:"3ch"}),a()(a()(a()(a()(a()(a()({boxSizing:"border-box",borderRadius:"var(--List-radius)",listStyle:"none",display:"flex",flexDirection:"horizontal"===o.orientation?"row":"column"},o.wrap&&{flexWrap:"wrap"}),o.marker&&{"--_List-markerDisplay":"list-item","--_List-markerType":o.marker,lineHeight:"calc(var(--ListItem-minHeight) - 2 * var(--ListItem-paddingY))"}),{},{flexGrow:1,position:"relative"},null==(n=e.variants[o.variant])?void 0:n[o.color]),{},{"--unstable_List-borderWidth":"var(--variant-borderWidth, 0px)"},void 0!==l&&{"--List-radius":l}),void 0!==r&&{"--List-padding":r}),void 0!==s&&{"--List-padding":s})]}),j=(0,m.Z)(Z,{name:"JoyList",slot:"Root",overridesResolver:function(t,n){return n.root}})({}),C=s.forwardRef(function(t,n){var e,r,c=s.useContext(h.Z),p=s.useContext(f.Z),m=s.useContext(x.Z),d=(0,u.Z)({props:t,name:"JoyList"}),v=d.component,Z=d.className,C=d.children,k=d.size,S=d.orientation,B=void 0===S?"vertical":S,z=d.wrap,T=void 0!==z&&z,F=d.variant,D=d.color,H=d.role,R=d.slots,P=d.slotProps,A=(0,i.Z)(d,b),M=k||(null!=(e=t.size)?e:"md");p&&(r="group"),m&&(r="presentation"),H&&(r=H);var W=a()(a()({},d),{},{instanceSize:t.size,size:M,nesting:c,orientation:B,wrap:T,variant:void 0===F?"plain":F,color:void 0===D?"neutral":D,role:r}),U=w(W),N=a()(a()({},A),{},{component:v,slots:void 0===R?{}:R,slotProps:void 0===P?{}:P}),J=(0,L.Z)("root",{ref:n,className:(0,l.default)(U.root,Z),elementType:j,externalForwardedProps:N,ownerState:W,additionalProps:{as:v,role:r,"aria-labelledby":"string"==typeof c?c:void 0}}),V=(0,o.Z)(J,2),E=V[0],O=V[1];return(0,I.jsx)(E,a()(a()({},O),{},{children:(0,I.jsx)(g.Z.Provider,{value:"".concat("string"==typeof v?v:"",":").concat(r||""),children:(0,I.jsx)(y.Z,{row:"horizontal"===B,wrap:T,children:C})})}))});n.Z=C},57559:function(t,n,e){"use strict";e.d(n,{M:function(){return p}});var o=e(57622),i=e.n(o),r=e(92379),a=e(78960),s=e(27269),l=e(13194),c=e(651),p={"--NestedList-marginRight":"0px","--NestedList-marginLeft":"0px","--NestedListItem-paddingLeft":"var(--ListItem-paddingX)","--ListItemButton-marginBlock":"0px","--ListItemButton-marginInline":"0px","--ListItem-marginBlock":"0px","--ListItem-marginInline":"0px"};n.Z=function(t){var n=t.children,e=t.nested,o=t.row,p=t.wrap,m=(0,c.jsx)(a.Z.Provider,{value:void 0!==o&&o,children:(0,c.jsx)(s.Z.Provider,{value:void 0!==p&&p,children:r.Children.map(n,function(t,e){return r.isValidElement(t)?r.cloneElement(t,i()(i()({},0===e&&{"data-first-child":""}),e===r.Children.count(n)-1&&{"data-last-child":""})):t})})});return void 0===e?m:(0,c.jsx)(l.Z.Provider,{value:e,children:m})}},13194:function(t,n,e){"use strict";var o=e(92379).createContext(!1);n.Z=o},78960:function(t,n,e){"use strict";var o=e(92379).createContext(!1);n.Z=o},27269:function(t,n,e){"use strict";var o=e(92379).createContext(!1);n.Z=o},26719:function(t,n,e){"use strict";e.d(n,{z:function(){return i}});var o=e(74817);function i(t){return(0,o.d6)("MuiList",t)}var r=(0,o.sI)("MuiList",["root","nesting","scoped","sizeSm","sizeMd","sizeLg","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","variantPlain","variantOutlined","variantSoft","variantSolid","horizontal","vertical"]);n.Z=r},74393:function(t,n,e){"use strict";e.d(n,{o:function(){return i}});var o=e(74817);function i(t){return(0,o.d6)("MuiListItem",t)}var r=(0,o.sI)("MuiListItem",["root","startAction","endAction","nested","nesting","sticky","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","variantPlain","variantSoft","variantOutlined","variantSolid"]);n.Z=r},36330:function(t,n,e){"use strict";e.d(n,{r:function(){return Z}});var o=e(59060),i=e(63546),r=e(75045),a=e(57622),s=e.n(a),l=e(92379),c=e(53048),p=e(29133),m=e(89208),u=e(23321),d=e(84357),v=e(14117),h=e(51088),g=e(74393),f=e(71990),y=e(53208),x=e(78960),L=e(61198),I=e(651),b=["children","className","action","component","orientation","role","selected","color","variant","slots","slotProps"],w=function(t){var n=t.color,e=t.disabled,o=t.focusVisible,i=t.focusVisibleClassName,r=t.selected,a=t.variant,s={root:["root",e&&"disabled",o&&"focusVisible",n&&"color".concat((0,p.Z)(n)),r&&"selected",a&&"variant".concat((0,p.Z)(a))]},l=(0,u.Z)(s,f.t,{});return o&&i&&(l.root+=" ".concat(i)),l},Z=(0,v.Z)("div")(function(t){var n,e,o,i,a,l,c,p=t.theme,m=t.ownerState;return s()(s()(s()(s()({"--Icon-margin":"initial","--Icon-color":"neutral"!==m.color||"solid"===m.variant?"currentColor":p.vars.palette.text.icon,WebkitTapHighlightColor:"transparent",boxSizing:"border-box",position:"relative",font:"inherit",display:"flex",flexDirection:"row",alignItems:"center",alignSelf:"stretch",gap:"var(--ListItem-gap)"},"vertical"===m.orientation&&{flexDirection:"column",justifyContent:"center"}),{},{textAlign:"initial",textDecoration:"initial",backgroundColor:"initial",cursor:"pointer",marginInline:"var(--ListItemButton-marginInline)",marginBlock:"var(--ListItemButton-marginBlock)"},void 0===m["data-first-child"]&&{marginInlineStart:m.row?"var(--List-gap)":void 0,marginBlockStart:m.row?void 0:"var(--List-gap)"}),{},(0,r.Z)({paddingBlock:"calc(var(--ListItem-paddingY) - var(--variant-borderWidth, 0px))",paddingInlineStart:"calc(var(--ListItem-paddingLeft) + var(--ListItem-startActionWidth, var(--unstable_startActionWidth, 0px)))",paddingInlineEnd:"calc(var(--ListItem-paddingRight) + var(--ListItem-endActionWidth, var(--unstable_endActionWidth, 0px)))",minBlockSize:"var(--ListItem-minHeight)",border:"1px solid transparent",borderRadius:"var(--ListItem-radius)",flex:"var(--unstable_ListItem-flex, none)",fontSize:"inherit",lineHeight:"inherit",minInlineSize:0},p.focus.selector,s()(s()({},p.focus.default),{},{zIndex:1})),null==(n=p.variants[m.variant])?void 0:n[m.color]),{},(c={"&:active":null==(e=p.variants["".concat(m.variant,"Active")])?void 0:e[m.color]},(0,r.Z)(c,".".concat(g.Z.root," > &"),{"--unstable_ListItem-flex":"1 0 0%"}),(0,r.Z)(c,"&.".concat(f.Z.selected),s()(s()({},null==(o=p.variants["".concat(m.variant,"Active")])?void 0:o[m.color]),{},{"--Icon-color":"currentColor"})),(0,r.Z)(c,"&:not(.".concat(f.Z.selected,', [aria-selected="true"])'),{"&:hover":null==(i=p.variants["".concat(m.variant,"Hover")])?void 0:i[m.color],"&:active":null==(a=p.variants["".concat(m.variant,"Active")])?void 0:a[m.color]}),(0,r.Z)(c,"&.".concat(f.Z.disabled),s()({},null==(l=p.variants["".concat(m.variant,"Disabled")])?void 0:l[m.color])),c))}),j=(0,v.Z)(Z,{name:"JoyListItemButton",slot:"Root",overridesResolver:function(t,n){return n.root}})(function(t){var n=t.ownerState,e=t.theme;return s()({},!n.row&&(0,r.Z)({},"&.".concat(f.Z.selected),{fontWeight:e.vars.fontWeight.md}))}),C=l.forwardRef(function(t,n){var e=(0,h.Z)({props:t,name:"JoyListItemButton"}),r=l.useContext(x.Z),a=e.children,p=e.className,u=e.action,v=e.component,g=void 0===v?"div":v,f=e.orientation,Z=void 0===f?"horizontal":f,C=e.role,k=e.selected,S=e.color,B=e.variant,z=e.slots,T=e.slotProps,F=(0,i.Z)(e,b),D=l.useRef(null),H=(0,m.Z)(D,n),R=(0,d.U)(s()(s()({},e),{},{rootRef:H})),P=R.focusVisible,A=R.setFocusVisible,M=R.getRootProps;l.useImperativeHandle(u,function(){return{focusVisible:function(){var t;A(!0),null==(t=D.current)||t.focus()}}},[A]);var W=s()(s()({},e),{},{component:g,color:void 0===S?"neutral":S,focusVisible:P,orientation:Z,row:r,selected:void 0!==k&&k,variant:void 0===B?"plain":B}),U=w(W),N=s()(s()({},F),{},{component:g,slots:void 0===z?{}:z,slotProps:void 0===T?{}:T}),J=(0,L.Z)("root",{ref:n,className:(0,c.default)(U.root,p),elementType:j,externalForwardedProps:N,ownerState:W,getSlotProps:M}),V=(0,o.Z)(J,2),E=V[0],O=V[1];return(0,I.jsx)(y.Z.Provider,{value:Z,children:(0,I.jsx)(E,s()(s()({},O),{},{role:null!=C?C:O.role,children:a}))})});n.Z=C},53208:function(t,n,e){"use strict";var o=e(92379).createContext("horizontal");n.Z=o},71990:function(t,n,e){"use strict";e.d(n,{t:function(){return i}});var o=e(74817);function i(t){return(0,o.d6)("MuiListItemButton",t)}var r=(0,o.sI)("MuiListItemButton",["root","horizontal","vertical","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","focusVisible","disabled","selected","variantPlain","variantSoft","variantOutlined","variantSolid"]);n.Z=r},21808:function(t,n,e){"use strict";var o=e(92379).createContext(void 0);n.Z=o},71047:function(t,n,e){"use strict";e.d(n,{FR:function(){return x},eu:function(){return L}});var o=e(59060),i=e(63546),r=e(57622),a=e.n(r),s=e(92379),l=e(29133),c=e(29128),p=e(80817),m=e(23321),u=e(14117),d=e(51088),v=e(61198),h=e(69223),g=e(651),f=["color","textColor"],y=["component","gutterBottom","noWrap","level","levelMapping","children","endDecorator","startDecorator","variant","slots","slotProps"],x=s.createContext(!1),L=s.createContext(!1),I=function(t){var n=t.gutterBottom,e=t.noWrap,o=t.level,i=t.color,r=t.variant,a={root:["root",o,n&&"gutterBottom",e&&"noWrap",i&&"color".concat((0,l.Z)(i)),r&&"variant".concat((0,l.Z)(r))],startDecorator:["startDecorator"],endDecorator:["endDecorator"]};return(0,m.Z)(a,h.f,{})},b=(0,u.Z)("span",{name:"JoyTypography",slot:"StartDecorator",overridesResolver:function(t,n){return n.startDecorator}})({display:"inline-flex",marginInlineEnd:"clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)"}),w=(0,u.Z)("span",{name:"JoyTypography",slot:"endDecorator",overridesResolver:function(t,n){return n.endDecorator}})({display:"inline-flex",marginInlineStart:"clamp(4px, var(--Typography-gap, 0.375em), 0.75rem)"}),Z=(0,u.Z)("span",{name:"JoyTypography",slot:"Root",overridesResolver:function(t,n){return n.root}})(function(t){var n,e,o,i,r,s=t.theme,l=t.ownerState,c="inherit"!==l.level?null==(n=s.typography[l.level])?void 0:n.lineHeight:"1";return a()(a()(a()(a()(a()(a()(a()(a()({"--Icon-fontSize":"calc(1em * ".concat(c,")")},l.color&&{"--Icon-color":"currentColor"}),{},{margin:"var(--Typography-margin, 0px)"},l.nesting?{display:"inline"}:a()({display:"block"},l.unstable_hasSkeleton&&{position:"relative"})),(l.startDecorator||l.endDecorator)&&a()({display:"flex",alignItems:"center"},l.nesting&&a()({display:"inline-flex"},l.startDecorator&&{verticalAlign:"bottom"}))),l.level&&"inherit"!==l.level&&s.typography[l.level]),{},{fontSize:"var(--Typography-fontSize, ".concat(l.level&&"inherit"!==l.level&&null!=(e=null==(o=s.typography[l.level])?void 0:o.fontSize)?e:"inherit",")")},l.noWrap&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),l.gutterBottom&&{marginBottom:"0.35em"}),l.color&&{color:"var(--variant-plainColor, rgba(".concat(null==(i=s.vars.palette[l.color])?void 0:i.mainChannel," / 1))")}),l.variant&&a()(a()({borderRadius:s.vars.radius.xs,paddingBlock:"min(0.1em, 4px)",paddingInline:"0.25em"},!l.nesting&&{marginInline:"-0.25em"}),null==(r=s.variants[l.variant])?void 0:r[l.color]))}),j={h1:"h1",h2:"h2",h3:"h3",h4:"h4","title-lg":"p","title-md":"p","title-sm":"p","body-lg":"p","body-md":"p","body-sm":"p","body-xs":"span",inherit:"p"},C=s.forwardRef(function(t,n){var e,r=(0,d.Z)({props:t,name:"JoyTypography"}),l=r.color,m=r.textColor,u=(0,i.Z)(r,f),h=s.useContext(x),C=s.useContext(L),k=(0,p.Z)(a()(a()({},u),{},{color:m})),S=k.component,B=k.gutterBottom,z=k.noWrap,T=k.level,F=k.levelMapping,D=void 0===F?j:F,H=k.children,R=k.endDecorator,P=k.startDecorator,A=k.variant,M=k.slots,W=k.slotProps,U=(0,i.Z)(k,y),N=null!=(e=t.color)?e:A?null!=l?l:"neutral":l,J=h||C?t.level||"inherit":void 0===T?"body-md":T,V=(0,c.Z)(H,["Skeleton"]),E=S||(h?"span":D[J]||j[J]||"span"),O=a()(a()({},k),{},{level:J,component:E,color:N,gutterBottom:void 0!==B&&B,noWrap:void 0!==z&&z,nesting:h,variant:A,unstable_hasSkeleton:V}),_=I(O),G=a()(a()({},U),{},{component:E,slots:void 0===M?{}:M,slotProps:void 0===W?{}:W}),Y=(0,v.Z)("root",{ref:n,className:_.root,elementType:Z,externalForwardedProps:G,ownerState:O}),X=(0,o.Z)(Y,2),K=X[0],q=X[1],$=(0,v.Z)("startDecorator",{className:_.startDecorator,elementType:b,externalForwardedProps:G,ownerState:O}),Q=(0,o.Z)($,2),tt=Q[0],tn=Q[1],te=(0,v.Z)("endDecorator",{className:_.endDecorator,elementType:w,externalForwardedProps:G,ownerState:O}),to=(0,o.Z)(te,2),ti=to[0],tr=to[1];return(0,g.jsx)(x.Provider,{value:!0,children:(0,g.jsxs)(K,a()(a()({},q),{},{children:[P&&(0,g.jsx)(tt,a()(a()({},tn),{},{children:P})),V?s.cloneElement(H,{variant:H.props.variant||"inline"}):H,R&&(0,g.jsx)(ti,a()(a()({},tr),{},{children:R}))]}))})});C.muiName="Typography",n.ZP=C},33859:function(t,n,e){"use strict";e.r(n),e.d(n,{default:function(){return o.ZP},getTypographyUtilityClass:function(){return i.f},typographyClasses:function(){return i.Z}});var o=e(71047),i=e(69223)},69223:function(t,n,e){"use strict";e.d(n,{f:function(){return i}});var o=e(74817);function i(t){return(0,o.d6)("MuiTypography",t)}var r=(0,o.sI)("MuiTypography",["root","h1","h2","h3","h4","title-lg","title-md","title-sm","body-lg","body-md","body-sm","body-xs","noWrap","gutterBottom","startDecorator","endDecorator","colorPrimary","colorNeutral","colorDanger","colorSuccess","colorWarning","colorContext","variantPlain","variantOutlined","variantSoft","variantSolid"]);n.Z=r},75190:function(t,n,e){"use strict";e(57622);var o=e(24404),i=e(4730),r=e(39591),a=(0,o.Z)({createStyledComponent:(0,i.ZP)("div",{name:"MuiGrid2",slot:"Root",overridesResolver:function(t,n){return n.root}}),componentName:"MuiGrid2",useThemeProps:function(t){return(0,r.Z)({props:t,name:"MuiGrid2"})}});n.Z=a},24404:function(t,n,e){"use strict";e.d(n,{Z:function(){return _}});var o=e(63546),i=e(27409),r=e(61445),a=e.n(r),s=e(6980),l=e.n(s),c=e(57622),p=e.n(c),m=e(92379),u=e(53048),d=e(29128),v=e(45024),h=e(23321),g=e(83397),f=e(27586),y=e(66723),x=e(80817),L=e(41929),I=e(59060),b=e(75045),w=e(38818),Z=e.n(w),j=e(92501),C=e.n(j),k=e(17974);function S(t){return"--Grid-".concat(t,"Spacing")}function B(t){return"--Grid-parent-".concat(t,"Spacing")}var z="--Grid-columns",T="--Grid-parent-columns",F=function(t){var n=t.theme,e=t.ownerState,o={};return(0,k.t)(n.breakpoints,e.size,function(t,n){var e={};"grow"===n&&(e={flexBasis:0,flexGrow:1,maxWidth:"100%"}),"auto"===n&&(e={flexBasis:"auto",flexGrow:0,flexShrink:0,maxWidth:"none",width:"auto"}),"number"==typeof n&&(e={flexGrow:0,flexBasis:"auto",width:"calc(100% * ".concat(n," / var(").concat(T,") - (var(").concat(T,") - ").concat(n,") * (var(").concat(B("column"),") / var(").concat(T,")))")}),t(o,e)}),o},D=function(t){var n=t.theme,e=t.ownerState,o={};return(0,k.t)(n.breakpoints,e.offset,function(t,n){var e={};"auto"===n&&(e={marginLeft:"auto"}),"number"==typeof n&&(e={marginLeft:0===n?"0px":"calc(100% * ".concat(n," / var(").concat(T,") + var(").concat(B("column"),") * ").concat(n," / var(").concat(T,"))")}),t(o,e)}),o},H=function(t){var n=t.theme,e=t.ownerState;if(!e.container)return{};var o=(0,b.Z)({},z,12);return(0,k.t)(n.breakpoints,e.columns,function(t,n){var e,i=null!=n?n:12;t(o,(e={},(0,b.Z)(e,z,i),(0,b.Z)(e,"> *",(0,b.Z)({},T,i)),e))}),o},R=function(t){var n=t.theme,e=t.ownerState;if(!e.container)return{};var o={};return(0,k.t)(n.breakpoints,e.rowSpacing,function(t,e){var i,r,a="string"==typeof e?e:null==(i=n.spacing)?void 0:i.call(n,e);t(o,(r={},(0,b.Z)(r,S("row"),a),(0,b.Z)(r,"> *",(0,b.Z)({},B("row"),a)),r))}),o},P=function(t){var n=t.theme,e=t.ownerState;if(!e.container)return{};var o={};return(0,k.t)(n.breakpoints,e.columnSpacing,function(t,e){var i,r,a="string"==typeof e?e:null==(i=n.spacing)?void 0:i.call(n,e);t(o,(r={},(0,b.Z)(r,S("column"),a),(0,b.Z)(r,"> *",(0,b.Z)({},B("column"),a)),r))}),o},A=function(t){var n=t.theme,e=t.ownerState;if(!e.container)return{};var o={};return(0,k.t)(n.breakpoints,e.direction,function(t,n){t(o,{flexDirection:n})}),o},M=function(t){var n=t.ownerState;return p()({minWidth:0,boxSizing:"border-box"},n.container&&p()(p()({display:"flex",flexWrap:"wrap"},n.wrap&&"wrap"!==n.wrap&&{flexWrap:n.wrap}),{},{gap:"var(".concat(S("row"),") var(").concat(S("column"),")")}))},W=function(t){var n=[];return Z()(t).forEach(function(t){var e=(0,I.Z)(t,2),o=e[0],i=e[1];!1!==i&&void 0!==i&&n.push("grid-".concat(o,"-").concat(String(i)))}),n},U=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"xs";function e(t){return void 0!==t&&("string"==typeof t&&!C()(Number(t))||"number"==typeof t&&t>0)}if(e(t))return["spacing-".concat(n,"-").concat(String(t))];if("object"==typeof t&&!a()(t)){var o=[];return Z()(t).forEach(function(t){var n=(0,I.Z)(t,2),i=n[0],r=n[1];e(r)&&o.push("spacing-".concat(i,"-").concat(String(r)))}),o}return[]},N=e(651),J=["className","children","columns","container","component","direction","wrap","size","offset","spacing","rowSpacing","columnSpacing","unstable_level"],V=(0,L.Z)(),E=(0,g.Z)("div",{name:"MuiGrid",slot:"Root",overridesResolver:function(t,n){return n.root}});function O(t){return(0,f.Z)({props:t,name:"MuiGrid",defaultTheme:V})}function _(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.createStyledComponent,e=t.useThemeProps,r=void 0===e?O:e,s=t.componentName,c=void 0===s?"MuiGrid":s,g=function(t,n){var e=t.container,o=t.direction,r=t.spacing,a=t.wrap,s=t.size,l={root:["root",e&&"container","wrap"!==a&&"wrap-xs-".concat(String(a))].concat((0,i.Z)(void 0===o?[]:"object"==typeof o?Z()(o).map(function(t){var n=(0,I.Z)(t,2),e=n[0],o=n[1];return"direction-".concat(e,"-").concat(o)}):["direction-xs-".concat(String(o))]),(0,i.Z)(W(s)),(0,i.Z)(e?U(r,n.breakpoints.keys[0]):[]))};return(0,h.Z)(l,function(t){return(0,v.ZP)(c,t)},{})};function f(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){return!0},o={};return null===t||(a()(t)?t.forEach(function(t,i){null!==t&&e(t)&&n.keys[i]&&(o[n.keys[i]]=t)}):"object"==typeof t?l()(t).forEach(function(n){var i=t[n];null!=i&&e(i)&&(o[n]=i)}):o[n.keys[0]]=t),o}var L=(void 0===n?E:n)(H,P,R,F,A,M,D),b=m.forwardRef(function(t,n){var e,i,a,s,l,c,v=(0,y.Z)(),h=r(t),I=(0,x.Z)(h),b=I.className,w=I.children,Z=I.columns,j=I.container,C=void 0!==j&&j,k=I.component,S=I.direction,B=I.wrap,z=I.size,T=I.offset,F=I.spacing,D=void 0===F?0:F,H=I.rowSpacing,R=I.columnSpacing,P=I.unstable_level,A=void 0===P?0:P,M=(0,o.Z)(I,J),W=f(void 0===z?{}:z,v.breakpoints,function(t){return!1!==t}),U=f(void 0===T?{}:T,v.breakpoints),V=null!=(e=t.columns)?e:A?void 0:void 0===Z?12:Z,E=null!=(i=t.spacing)?i:A?void 0:D,O=null!=(a=null!=(s=t.rowSpacing)?s:t.spacing)?a:A?void 0:void 0===H?D:H,_=null!=(l=null!=(c=t.columnSpacing)?c:t.spacing)?l:A?void 0:void 0===R?D:R,G=p()(p()({},I),{},{level:A,columns:V,container:C,direction:void 0===S?"row":S,wrap:void 0===B?"wrap":B,spacing:E,rowSpacing:O,columnSpacing:_,size:W,offset:U}),Y=g(G,v);return(0,N.jsx)(L,p()(p()({ref:n,as:void 0===k?"div":k,ownerState:G,className:(0,u.default)(Y.root,b)},M),{},{children:m.Children.map(w,function(t){if(m.isValidElement(t)&&(0,d.Z)(t,["Grid"])&&C&&t.props.container){var n,e;return m.cloneElement(t,{unstable_level:null!=(n=null==(e=t.props)?void 0:e.unstable_level)?n:A+1})}return t})}))});return b.muiName="Grid",b}},17974:function(t,n,e){"use strict";e.d(n,{t:function(){return c}});var o=e(61445),i=e.n(o),r=e(57622),a=e.n(r),s=e(6980),l=e.n(s),c=function(t,n,e){var o,r,s=t.keys[0];i()(n)?n.forEach(function(n,o){e(function(n,e){o<=t.keys.length-1&&(0===o?a()(n,e):n[t.up(t.keys[o])]=e)},n)}):n&&"object"==typeof n?(l()(n).length>t.keys.length?t.keys:(o=t.keys,r=l()(n),o.filter(function(t){return r.includes(t)}))).forEach(function(o){if(t.keys.includes(o)){var i=n[o];void 0!==i&&e(function(n,e){s===o?a()(n,e):n[t.up(o)]=e},i)}}):("number"==typeof n||"string"==typeof n)&&e(function(t,n){a()(t,n)},n)}},17581:function(t,n,e){"use strict";e.d(n,{Z:function(){return c}}),e(92379);var o,i=e(17027),r=e(60228),a=e(45522),s=e(59321),l=e(651);function c(){return o||(o=(0,l.jsxs)(i.Z,{children:[(0,l.jsx)(r.Z,{children:"Label"}),(0,l.jsx)(s.ZP,{placeholder:"Placeholder"}),(0,l.jsx)(a.Z,{children:"This is a helper text."})]}))}},50153:function(t,n,e){"use strict";e.d(n,{Z:function(){return B}});var o,i,r,a,s,l,c,p,m,u,d,v,h,g=e(75045),f=e(59060),y=e(92379),x=e(96730),L=e(20450),I=e(50778),b=e(71990),w=e(36330),Z=e(2470),j=e(71047),C=e(32660),k=e(49004),S=e(651);function B(){var t=y.useState(!1),n=(0,f.Z)(t,2),e=n[0],B=n[1],z=y.useState(!1),T=(0,f.Z)(z,2),F=T[0],D=T[1];return(0,S.jsx)(x.Z,{sx:{width:320,pl:"24px"},children:(0,S.jsxs)(L.Z,{size:"sm",sx:function(t){var n;return n={"--joy-palette-primary-plainColor":"#8a4baf","--joy-palette-neutral-plainHoverBg":"transparent","--joy-palette-neutral-plainActiveBg":"transparent","--joy-palette-primary-plainHoverBg":"transparent","--joy-palette-primary-plainActiveBg":"transparent"},(0,g.Z)(n,t.getColorSchemeSelector("dark"),{"--joy-palette-text-secondary":"#635e69","--joy-palette-primary-plainColor":"#d48cff"}),(0,g.Z)(n,"--List-insetStart","32px"),(0,g.Z)(n,"--ListItem-paddingY","0px"),(0,g.Z)(n,"--ListItem-paddingRight","16px"),(0,g.Z)(n,"--ListItem-paddingLeft","21px"),(0,g.Z)(n,"--ListItem-startActionWidth","0px"),(0,g.Z)(n,"--ListItem-startActionTranslateX","-50%"),(0,g.Z)(n,"& .".concat(b.Z.root),{borderLeftColor:"divider"}),(0,g.Z)(n,"& .".concat(b.Z.root,".").concat(b.Z.selected),{borderLeftColor:"currentColor"}),(0,g.Z)(n,'& [class*="startAction"]',{color:"var(--joy-palette-text-tertiary)"}),n},children:[(0,S.jsxs)(I.Z,{nested:!0,children:[(0,S.jsx)(I.Z,{component:"div",startAction:o||(o=(0,S.jsx)(C.default,{})),children:(0,S.jsx)(j.ZP,{level:"body-xs",sx:{textTransform:"uppercase"},children:"Documentation"})}),(0,S.jsx)(L.Z,{sx:{"--List-gap":"0px"},children:i||(i=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{selected:!0,children:"Overview"})}))})]}),(0,S.jsx)(I.Z,{sx:{"--List-gap":"0px"},children:r||(r=(0,S.jsx)(w.Z,{children:"Quick Start"}))}),(0,S.jsxs)(I.Z,{nested:!0,sx:{my:1},startAction:(0,S.jsx)(Z.ZP,{variant:"plain",size:"sm",color:"neutral",onClick:function(){return B(!e)},children:(0,S.jsx)(k.default,{sx:[e?{transform:"initial"}:{transform:"rotate(-90deg)"}]})}),children:[(0,S.jsxs)(I.Z,{children:[(0,S.jsx)(j.ZP,{level:"inherit",sx:[e?{fontWeight:"bold",color:"text.primary"}:{fontWeight:null,color:"inherit"}],children:"Tutorial"}),a||(a=(0,S.jsx)(j.ZP,{component:"span",level:"body-xs",children:"9"}))]}),e&&(0,S.jsxs)(L.Z,{sx:{"--ListItem-paddingY":"8px"},children:[s||(s=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"Overview"})})),l||(l=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"0. Set Up Your Development Environment"})})),c||(c=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"1. Create and Deploy Your First Gatsby Site"})})),p||(p=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"2. Use and Style React components"})}))]})]}),(0,S.jsxs)(I.Z,{nested:!0,sx:{my:1},startAction:(0,S.jsx)(Z.ZP,{variant:"plain",size:"sm",color:"neutral",onClick:function(){return D(function(t){return!t})},children:(0,S.jsx)(k.default,{sx:[F?{transform:"initial"}:{transform:"rotate(-90deg)"}]})}),children:[(0,S.jsxs)(I.Z,{children:[(0,S.jsx)(j.ZP,{level:"inherit",sx:[F?{fontWeight:"bold",color:"text.primary"}:{fontWeight:null,color:"inherit"}],children:"How-to Guides"}),m||(m=(0,S.jsx)(j.ZP,{component:"span",level:"body-xs",children:"39"}))]}),F&&(0,S.jsxs)(L.Z,{sx:{"--ListItem-paddingY":"8px"},children:[u||(u=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"Overview"})})),d||(d=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"Local Development"})})),v||(v=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"Routing"})})),h||(h=(0,S.jsx)(I.Z,{children:(0,S.jsx)(w.Z,{children:"Styling"})}))]})]})]})})}},28543:function(t,n,e){"use strict";e.r(n),e.d(n,{default:function(){return A}});var o={};e.r(o),e.d(o,{demoComponents:function(){return R},demos:function(){return H},docs:function(){return D},srcComponents:function(){return P}});var i=e(57622),r=e.n(i),a=e(92379),s=e.t(a,2),l=e(78262),c=e(13432),p=e(79551),m=e(20552),u=e(10058),d=e(34846),v=e(33859),h=e(32660),g=e(49004),f=e(30990),y=e(9788),x=e(85753),L=e(4378),I=e(39404),b=e(5953),w=e(50153),Z=e(11327),j=e(17581),C=e(75190),k=e(43310),S=e(16759),B=e(86868),z=e(7934),T=e(651),F=[{title:"Installation",description:"Add Joy UI to your project with a few commands.",link:"/joy-ui/getting-started/installation/",icon:(0,T.jsx)(k.Z,{color:"primary"})},{title:"Usage",description:"Learn the basics of working with Joy UI components.",link:"/joy-ui/getting-started/usage/",icon:(0,T.jsx)(B.Z,{color:"primary"})},{title:"Templates",description:"Get started with our selection of free application templates.",link:"/joy-ui/getting-started/templates/",icon:(0,T.jsx)(S.Z,{color:"primary"})},{title:"Joy UI for Figma",description:"The Joy UI components, with variables, variants, and states, in your favorite design tool.",link:"https://www.figma.com/community/file/1293288155415213351/joy-ui-for-figma",icon:(0,T.jsx)("img",{src:"/static/branding/design-kits/figma-logo.svg",alt:"Figma logo",loading:"lazy",width:"24",height:"24"})}],D={en:{description:"Joy\xa0UI is an open-source React component library that implements MUI's own design principles.",location:"/docs/data/joy/getting-started/overview/overview.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>','\n      <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>Joy\xa0UI - Overview</h1><p class="description">Joy\xa0UI is an open-source React component library that implements MUI\'s own design principles.</p>\n\n<h2 id="introduction"><a href="#introduction" class="title-link-to-anchor">Introduction<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="introduction"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Joy\xa0UI is an open-source React component library that follows a lightly opinionated design direction, for a clean and modern UI that gives you plenty of room to customize the look and feel.</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>Joy\xa0UI is in beta and <em>development is currently on hold</em>.\nWhen starting a new project from scratch, we recommend Material\xa0UI over Joy\xa0UI because we can guarantee ongoing support.</p>\n<p>Keep in mind that the maintainers are primarily focused on other projects and may not be able to respond in a timely manner to issues or pull requests related to Joy\xa0UI.</p>\n</div></aside><h2 id="why-use-joy-ui"><a href="#why-use-joy-ui" class="title-link-to-anchor">Why use Joy\xa0UI<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="why-use-joy-ui"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Maintained by MUI, <strong>Joy\xa0UI is an alternative to Material\xa0UI</strong> for projects that <strong>don&#39;t adhere to Material Design</strong> guidelines as a design system starting point.</p>\n<p>These two sister libraries feature many of the same components, with similarly designed component APIs and customization features.\nJoy\xa0UI applies the decade of lessons learned in building and maintaining Material\xa0UI, for developers looking for sleek design, next-gen DX, and extensible components.</p>\n<p>Learn more about why you should use Joy\xa0UI for your next project below.</p>\n<h3 id="beautiful-out-of-the-box"><a href="#beautiful-out-of-the-box" class="title-link-to-anchor">Beautiful out of the box<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="beautiful-out-of-the-box"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Joy\xa0UI follows a lightly opinionated design direction called Joy Design.\nSimple and functional, it offers a thoughtfully crafted set of defaults to ensure that your next project looks and feels great before you even begin customizing.</p>\n<p>For example, the <a href="/joy-ui/getting-started/templates/order-dashboard/">Order Dashboard template</a> (pictured below) is minimally customized beyond defaults, to demonstrate how meticulously we&#39;ve designed each component for consistency and cohesion across the UI:</p>\n<img src="/static/joy-ui/overview/order-dashboard.png" style="width: 814px; margin-top: 4px; margin-bottom: 8px;" alt="The Order Dashboard template, inspired by Untitled UI and built using Joy\xa0UI with very little customizations." width="1628" height="400" />\n\n<h3 id="highly-customizable"><a href="#highly-customizable" class="title-link-to-anchor">Highly customizable<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="highly-customizable"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>You should feel inspired and empowered to change, extend, and revamp Joy\xa0UI&#39;s appearance and behavior with ease.\nDrawing from many years of experience maintaining Material\xa0UI, Joy\xa0UI applies new approaches to customization, enabling you to customize every piece of the components to match your unique design.</p>\n<p>For example, the demo below shows how to customize the <a href="/joy-ui/react-list/">List</a> component using built-in CSS variables to match the design of the <a href="https://www.gatsbyjs.com/docs/">Gatsby documentation side nav</a>:</p>\n',{demo:"../../components/list/ExampleCollapsibleList.js"},'<h3 id="developer-experience"><a href="#developer-experience" class="title-link-to-anchor">Developer experience<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="developer-experience"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Joy\xa0UI draws its name from the idea that it should spark joy in the creative process of building apps.\nProviding an unrivaled developer experience is at the heart of this.</p>\n<p>For example, observe how each element of the <a href="/joy-ui/react-input/">Input</a> component automatically calculates and adjusts its own dimensions relative to the border radius, saving you from the tedium of doing it yourself:</p>\n',{demo:"../../main-features/automatic-adjustment/InputVariables.js"},'<h3 id="accessibility"><a href="#accessibility" class="title-link-to-anchor">Accessibility<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="accessibility"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3><p>Joy\xa0UI components are built on top of <a href="/base-ui/getting-started/">Base\xa0UI&#39;s unstyled components and low-level hooks</a>, giving you many accessibility features out of the box.\nWe strive to make all components accessible to end users who require assistive technology, and offer suggestions for optimizing accessibility throughout our documentation.</p>\n<p>Joy\xa0UI&#39;s Form Control component automatically generates a unique ID that links the Input that it wraps with the Form Label and Form Helper Text components, ensuring that your app complies with this guideline:</p>\n',{demo:"../../components/input/InputField.js"},'<h2 id="start-now"><a href="#start-now" class="title-link-to-anchor">Start now<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="start-now"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2><p>Get started with Joy\xa0UI today through some of these useful resources:</p>\n',{component:"modules/components/JoyStartingLinksCollection.js"}],toc:[{text:"Introduction",level:2,hash:"introduction",children:[]},{text:"Why use Joy\xa0UI",level:2,hash:"why-use-joy-ui",children:[{text:"Beautiful out of the box",level:3,hash:"beautiful-out-of-the-box"},{text:"Highly customizable",level:3,hash:"highly-customizable"},{text:"Developer experience",level:3,hash:"developer-experience"},{text:"Accessibility",level:3,hash:"accessibility"}]},{text:"Start now",level:2,hash:"start-now",children:[]}],title:"Overview",headers:{title:"Overview",components:[],hooks:[]}}},H={"../../components/list/ExampleCollapsibleList.js":{module:"./../../components/list/ExampleCollapsibleList.js",raw:"import * as React from 'react';\nimport Box from '@mui/joy/Box';\nimport List from '@mui/joy/List';\nimport ListItem from '@mui/joy/ListItem';\nimport ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';\nimport IconButton from '@mui/joy/IconButton';\nimport Typography from '@mui/joy/Typography';\nimport ReceiptLong from '@mui/icons-material/ReceiptLong';\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\n\nexport default function ExampleCollapsibleList() {\n  const [open, setOpen] = React.useState(false);\n  const [open2, setOpen2] = React.useState(false);\n  return (\n    <Box sx={{ width: 320, pl: '24px' }}>\n      <List\n        size=\"sm\"\n        sx={(theme) => ({\n          // Gatsby colors\n          '--joy-palette-primary-plainColor': '#8a4baf',\n          '--joy-palette-neutral-plainHoverBg': 'transparent',\n          '--joy-palette-neutral-plainActiveBg': 'transparent',\n          '--joy-palette-primary-plainHoverBg': 'transparent',\n          '--joy-palette-primary-plainActiveBg': 'transparent',\n          [theme.getColorSchemeSelector('dark')]: {\n            '--joy-palette-text-secondary': '#635e69',\n            '--joy-palette-primary-plainColor': '#d48cff',\n          },\n          '--List-insetStart': '32px',\n          '--ListItem-paddingY': '0px',\n          '--ListItem-paddingRight': '16px',\n          '--ListItem-paddingLeft': '21px',\n          '--ListItem-startActionWidth': '0px',\n          '--ListItem-startActionTranslateX': '-50%',\n          [`& .${listItemButtonClasses.root}`]: {\n            borderLeftColor: 'divider',\n          },\n          [`& .${listItemButtonClasses.root}.${listItemButtonClasses.selected}`]: {\n            borderLeftColor: 'currentColor',\n          },\n          '& [class*=\"startAction\"]': {\n            color: 'var(--joy-palette-text-tertiary)',\n          },\n        })}\n      >\n        <ListItem nested>\n          <ListItem component=\"div\" startAction={<ReceiptLong />}>\n            <Typography level=\"body-xs\" sx={{ textTransform: 'uppercase' }}>\n              Documentation\n            </Typography>\n          </ListItem>\n          <List sx={{ '--List-gap': '0px' }}>\n            <ListItem>\n              <ListItemButton selected>Overview</ListItemButton>\n            </ListItem>\n          </List>\n        </ListItem>\n        <ListItem sx={{ '--List-gap': '0px' }}>\n          <ListItemButton>Quick Start</ListItemButton>\n        </ListItem>\n        <ListItem\n          nested\n          sx={{ my: 1 }}\n          startAction={\n            <IconButton\n              variant=\"plain\"\n              size=\"sm\"\n              color=\"neutral\"\n              onClick={() => setOpen(!open)}\n            >\n              <KeyboardArrowDown\n                sx={[\n                  open ? { transform: 'initial' } : { transform: 'rotate(-90deg)' },\n                ]}\n              />\n            </IconButton>\n          }\n        >\n          <ListItem>\n            <Typography\n              level=\"inherit\"\n              sx={[\n                open\n                  ? { fontWeight: 'bold', color: 'text.primary' }\n                  : { fontWeight: null, color: 'inherit' },\n              ]}\n            >\n              Tutorial\n            </Typography>\n            <Typography component=\"span\" level=\"body-xs\">\n              9\n            </Typography>\n          </ListItem>\n          {open && (\n            <List sx={{ '--ListItem-paddingY': '8px' }}>\n              <ListItem>\n                <ListItemButton>Overview</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>\n                  0. Set Up Your Development Environment\n                </ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>\n                  1. Create and Deploy Your First Gatsby Site\n                </ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>2. Use and Style React components</ListItemButton>\n              </ListItem>\n            </List>\n          )}\n        </ListItem>\n        <ListItem\n          nested\n          sx={{ my: 1 }}\n          startAction={\n            <IconButton\n              variant=\"plain\"\n              size=\"sm\"\n              color=\"neutral\"\n              onClick={() => setOpen2((bool) => !bool)}\n            >\n              <KeyboardArrowDown\n                sx={[\n                  open2 ? { transform: 'initial' } : { transform: 'rotate(-90deg)' },\n                ]}\n              />\n            </IconButton>\n          }\n        >\n          <ListItem>\n            <Typography\n              level=\"inherit\"\n              sx={[\n                open2\n                  ? { fontWeight: 'bold', color: 'text.primary' }\n                  : { fontWeight: null, color: 'inherit' },\n              ]}\n            >\n              How-to Guides\n            </Typography>\n            <Typography component=\"span\" level=\"body-xs\">\n              39\n            </Typography>\n          </ListItem>\n          {open2 && (\n            <List sx={{ '--ListItem-paddingY': '8px' }}>\n              <ListItem>\n                <ListItemButton>Overview</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>Local Development</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>Routing</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>Styling</ListItemButton>\n              </ListItem>\n            </List>\n          )}\n        </ListItem>\n      </List>\n    </Box>\n  );\n}\n",moduleTS:"./../../components/list/ExampleCollapsibleList.js",rawTS:"import * as React from 'react';\nimport Box from '@mui/joy/Box';\nimport List from '@mui/joy/List';\nimport ListItem from '@mui/joy/ListItem';\nimport ListItemButton, { listItemButtonClasses } from '@mui/joy/ListItemButton';\nimport IconButton from '@mui/joy/IconButton';\nimport Typography from '@mui/joy/Typography';\nimport ReceiptLong from '@mui/icons-material/ReceiptLong';\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\n\nexport default function ExampleCollapsibleList() {\n  const [open, setOpen] = React.useState(false);\n  const [open2, setOpen2] = React.useState(false);\n  return (\n    <Box sx={{ width: 320, pl: '24px' }}>\n      <List\n        size=\"sm\"\n        sx={(theme) => ({\n          // Gatsby colors\n          '--joy-palette-primary-plainColor': '#8a4baf',\n          '--joy-palette-neutral-plainHoverBg': 'transparent',\n          '--joy-palette-neutral-plainActiveBg': 'transparent',\n          '--joy-palette-primary-plainHoverBg': 'transparent',\n          '--joy-palette-primary-plainActiveBg': 'transparent',\n          [theme.getColorSchemeSelector('dark')]: {\n            '--joy-palette-text-secondary': '#635e69',\n            '--joy-palette-primary-plainColor': '#d48cff',\n          },\n          '--List-insetStart': '32px',\n          '--ListItem-paddingY': '0px',\n          '--ListItem-paddingRight': '16px',\n          '--ListItem-paddingLeft': '21px',\n          '--ListItem-startActionWidth': '0px',\n          '--ListItem-startActionTranslateX': '-50%',\n          [`& .${listItemButtonClasses.root}`]: {\n            borderLeftColor: 'divider',\n          },\n          [`& .${listItemButtonClasses.root}.${listItemButtonClasses.selected}`]: {\n            borderLeftColor: 'currentColor',\n          },\n          '& [class*=\"startAction\"]': {\n            color: 'var(--joy-palette-text-tertiary)',\n          },\n        })}\n      >\n        <ListItem nested>\n          <ListItem component=\"div\" startAction={<ReceiptLong />}>\n            <Typography level=\"body-xs\" sx={{ textTransform: 'uppercase' }}>\n              Documentation\n            </Typography>\n          </ListItem>\n          <List sx={{ '--List-gap': '0px' }}>\n            <ListItem>\n              <ListItemButton selected>Overview</ListItemButton>\n            </ListItem>\n          </List>\n        </ListItem>\n        <ListItem sx={{ '--List-gap': '0px' }}>\n          <ListItemButton>Quick Start</ListItemButton>\n        </ListItem>\n        <ListItem\n          nested\n          sx={{ my: 1 }}\n          startAction={\n            <IconButton\n              variant=\"plain\"\n              size=\"sm\"\n              color=\"neutral\"\n              onClick={() => setOpen(!open)}\n            >\n              <KeyboardArrowDown\n                sx={[\n                  open ? { transform: 'initial' } : { transform: 'rotate(-90deg)' },\n                ]}\n              />\n            </IconButton>\n          }\n        >\n          <ListItem>\n            <Typography\n              level=\"inherit\"\n              sx={[\n                open\n                  ? { fontWeight: 'bold', color: 'text.primary' }\n                  : { fontWeight: null, color: 'inherit' },\n              ]}\n            >\n              Tutorial\n            </Typography>\n            <Typography component=\"span\" level=\"body-xs\">\n              9\n            </Typography>\n          </ListItem>\n          {open && (\n            <List sx={{ '--ListItem-paddingY': '8px' }}>\n              <ListItem>\n                <ListItemButton>Overview</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>\n                  0. Set Up Your Development Environment\n                </ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>\n                  1. Create and Deploy Your First Gatsby Site\n                </ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>2. Use and Style React components</ListItemButton>\n              </ListItem>\n            </List>\n          )}\n        </ListItem>\n        <ListItem\n          nested\n          sx={{ my: 1 }}\n          startAction={\n            <IconButton\n              variant=\"plain\"\n              size=\"sm\"\n              color=\"neutral\"\n              onClick={() => setOpen2((bool) => !bool)}\n            >\n              <KeyboardArrowDown\n                sx={[\n                  open2 ? { transform: 'initial' } : { transform: 'rotate(-90deg)' },\n                ]}\n              />\n            </IconButton>\n          }\n        >\n          <ListItem>\n            <Typography\n              level=\"inherit\"\n              sx={[\n                open2\n                  ? { fontWeight: 'bold', color: 'text.primary' }\n                  : { fontWeight: null, color: 'inherit' },\n              ]}\n            >\n              How-to Guides\n            </Typography>\n            <Typography component=\"span\" level=\"body-xs\">\n              39\n            </Typography>\n          </ListItem>\n          {open2 && (\n            <List sx={{ '--ListItem-paddingY': '8px' }}>\n              <ListItem>\n                <ListItemButton>Overview</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>Local Development</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>Routing</ListItemButton>\n              </ListItem>\n              <ListItem>\n                <ListItemButton>Styling</ListItemButton>\n              </ListItem>\n            </List>\n          )}\n        </ListItem>\n      </List>\n    </Box>\n  );\n}\n"},"../../main-features/automatic-adjustment/InputVariables.js":{module:"./../../main-features/automatic-adjustment/InputVariables.js",raw:"import * as React from 'react';\nimport Box from '@mui/joy/Box';\nimport Button from '@mui/joy/Button';\nimport ListDivider from '@mui/joy/ListDivider';\nimport Input from '@mui/joy/Input';\nimport FormControl from '@mui/joy/FormControl';\nimport FormLabel from '@mui/joy/FormLabel';\n\nexport default function InputVariables() {\n  const [radius, setRadius] = React.useState(16);\n  const [childHeight, setChildHeight] = React.useState(28);\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n      <Input\n        size=\"md\"\n        placeholder=\"email@mui.com\"\n        endDecorator={\n          <Button variant=\"soft\" size=\"sm\">\n            Subscribe\n          </Button>\n        }\n        sx={{\n          '--Input-radius': `${radius}px`,\n          '--Input-decoratorChildHeight': `${childHeight}px`,\n        }}\n      />\n      <ListDivider component=\"hr\" />\n      <Box sx={{ mx: 'auto', display: 'flex', gap: 2 }}>\n        <FormControl>\n          <FormLabel>--Input-radius</FormLabel>\n          <Input\n            size=\"sm\"\n            type=\"number\"\n            value={radius}\n            onChange={(event) => setRadius(event.target.valueAsNumber)}\n          />\n        </FormControl>\n        <FormControl>\n          <FormLabel>--Input-decoratorChildHeight</FormLabel>\n          <Input\n            size=\"sm\"\n            type=\"number\"\n            value={childHeight}\n            onChange={(event) => setChildHeight(event.target.valueAsNumber)}\n          />\n        </FormControl>\n      </Box>\n    </Box>\n  );\n}\n"},"../../components/input/InputField.js":{module:"./../../components/input/InputField.js",raw:"import * as React from 'react';\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\nexport default function InputField() {\n  return (\n    <FormControl>\n      <FormLabel>Label</FormLabel>\n      <Input placeholder=\"Placeholder\" />\n      <FormHelperText>This is a helper text.</FormHelperText>\n    </FormControl>\n  );\n}\n",jsxPreview:'<FormControl>\n  <FormLabel>Label</FormLabel>\n  <Input placeholder="Placeholder" />\n  <FormHelperText>This is a helper text.</FormHelperText>\n</FormControl>',moduleTS:"./../../components/input/InputField.js",rawTS:"import * as React from 'react';\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\nexport default function InputField() {\n  return (\n    <FormControl>\n      <FormLabel>Label</FormLabel>\n      <Input placeholder=\"Placeholder\" />\n      <FormHelperText>This is a helper text.</FormHelperText>\n    </FormControl>\n  );\n}\n"}};H.scope={process:{},import:{react:s,"@mui/joy/Box":c,"@mui/joy/List":p,"@mui/joy/ListItem":m,"@mui/joy/ListItemButton":u,"@mui/joy/IconButton":d,"@mui/joy/Typography":v,"@mui/icons-material/ReceiptLong":h,"@mui/icons-material/KeyboardArrowDown":g,"@mui/joy/Button":f,"@mui/joy/ListDivider":y,"@mui/joy/Input":x,"@mui/joy/FormControl":L,"@mui/joy/FormLabel":I,"@mui/joy/FormHelperText":b}};var R={"./../../components/list/ExampleCollapsibleList.js":w.Z,"./../../main-features/automatic-adjustment/InputVariables.js":Z.Z,"./../../components/input/InputField.js":j.Z},P={"modules/components/JoyStartingLinksCollection.js":function(){return(0,T.jsx)(C.Z,{container:!0,spacing:2,children:F.map(function(t){var n=t.icon,e=t.title,o=t.description,i=t.link;return(0,T.jsx)(C.Z,{size:{xs:12,sm:6},children:(0,T.jsx)(z.r,{classNameTitle:"algolia-lvl3",classNameDescription:"algolia-content",link:i,title:e,icon:n,description:o})},e)})})}};function A(){return(0,T.jsx)(l.Z,r()(r()({},o),{},{disableAd:!0}))}},40239:function(t,n,e){(window.__NEXT_P=window.__NEXT_P||[]).push(["/joy-ui/getting-started",function(){return e(28543)}])},86868:function(t,n,e){"use strict";var o=e(53022),i=e(651);n.Z=(0,o.Z)((0,i.jsx)("path",{d:"m18.85 10.39 1.06-1.06c.78-.78.78-2.05 0-2.83L18.5 5.09c-.78-.78-2.05-.78-2.83 0l-1.06 1.06zm-5.66-2.83-9.05 9.05c-.09.09-.14.22-.14.35v3.54c0 .28.22.5.5.5h3.54c.13 0 .26-.05.35-.15l9.05-9.05zM19 17.5c0 2.19-2.54 3.5-5 3.5-.55 0-1-.45-1-1s.45-1 1-1c1.54 0 3-.73 3-1.5 0-.47-.48-.87-1.23-1.2l1.48-1.48c1.07.63 1.75 1.47 1.75 2.68M4.58 13.35C3.61 12.79 3 12.06 3 11c0-1.8 1.89-2.63 3.56-3.36C7.59 7.18 9 6.56 9 6c0-.41-.78-1-2-1-1.26 0-1.8.61-1.83.64-.35.41-.98.46-1.4.12-.41-.34-.49-.95-.15-1.38C3.73 4.24 4.76 3 7 3s4 1.32 4 3c0 1.87-1.93 2.72-3.64 3.47C6.42 9.88 5 10.5 5 11c0 .31.43.6 1.07.86z"}),"DrawRounded")},43310:function(t,n,e){"use strict";var o=e(53022),i=e(651);n.Z=(0,o.Z)([(0,i.jsx)("path",{d:"M20 17H4V5h8V3H4c-1.1 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v1c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-1h4c1.1 0 2-.9 2-2v-3h-2z"},"0"),(0,i.jsx)("path",{d:"M17.71 13.29 21.3 9.7c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0L18 10.17V4c0-.55-.45-1-1-1s-1 .45-1 1v6.17l-1.89-1.88a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l3.59 3.59c.4.39 1.03.39 1.42 0"},"1")],"InstallDesktopRounded")},49004:function(t,n,e){"use strict";e.r(n);var o=e(53022),i=e(651);n.default=(0,o.Z)((0,i.jsx)("path",{d:"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"}),"KeyboardArrowDown")},32660:function(t,n,e){"use strict";e.r(n);var o=e(53022),i=e(651);n.default=(0,o.Z)([(0,i.jsx)("path",{d:"M19.5 3.5 18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2v14H3v3c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V2zM19 19c0 .55-.45 1-1 1s-1-.45-1-1v-3H8V5h11z"},"0"),(0,i.jsx)("path",{d:"M9 7h6v2H9zm7 0h2v2h-2zm-7 3h6v2H9zm7 0h2v2h-2z"},"1")],"ReceiptLong")}},function(t){t.O(0,[49774,85593,97146,51015,49517,17376,89711,15686,73119,73579,85426,4502,81392,2306,29455,28212,42055,11645,76965,40336,97991,38383,82120,32339,33638,59321,76903,92888,40179],function(){return t(t.s=40239)}),_N_E=t.O()}]);