diff --git a/404.html b/404.html index 976f9b387d1..d9e053d4fd9 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

Nothing found. If some of the Mantine documentation pages are linking to this page, please let us know by opening an issue. -Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file +Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/404/index.html b/404/index.html index 976f9b387d1..d9e053d4fd9 100644 --- a/404/index.html +++ b/404/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

404

Nothing found. If some of the Mantine documentation pages are linking to this page, please let us know by opening an issue. -Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file +Otherwise, get back to the home page.

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/_next/static/chunks/15819-ad3eb6b78d60e69d.js b/_next/static/chunks/15819-612d368fa26fd27f.js similarity index 51% rename from _next/static/chunks/15819-ad3eb6b78d60e69d.js rename to _next/static/chunks/15819-612d368fa26fd27f.js index 33f18703910..6ec8ffbaf78 100644 --- a/_next/static/chunks/15819-ad3eb6b78d60e69d.js +++ b/_next/static/chunks/15819-612d368fa26fd27f.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15819],{71611:function(t,e,a){"use strict";a.d(e,{$:function(){return B}});var n=a(24246);a(27378);var i=a(40624),o=a(56589),r=a(82827),l=a(91428),Text=a(26569),s=a(22971),c=a(17992),d=a(8671),u=a(86010),m=a(9121),b=a(86175),p=a(73832),h=a.n(p);function k(t){let{icon:e,...a}=t;return(0,n.jsx)(d.z,{component:"a",target:"_blank",rel:"noopener noreferrer",leftSection:e,radius:"md",classNames:{root:h().socialButton,section:h().socialButtonSection},...a})}function v(t){let{className:e,...a}=t;return(0,n.jsx)(k,{className:(0,i.Z)(h().discordButton,e),icon:(0,n.jsx)(u.D,{size:16}),href:b.$.discordLink,...a,children:"Join Discord community"})}function f(t){let{className:e,...a}=t;return(0,n.jsx)(k,{className:(0,i.Z)(h().twitterButton,e),icon:(0,n.jsx)(m.Z,{size:16}),href:b.$.twitterLink,...a,children:"Follow Mantine on Twitter"})}let _=[{title:"About",data:[{type:"next",label:"Contribute",link:"/contribute"},{type:"next",label:"About Mantine",link:"/about"},{type:"next",label:"Changelog",link:"/changelog/previous-versions"},{type:"link",label:"Releases",link:b.$.gitHubLinks.releases}]},{title:"Community",data:[{type:"link",label:"Chat on Discord",link:b.$.discordLink},{type:"link",label:"Follow on Twitter",link:b.$.twitterLink},{type:"link",label:"Follow on Github",link:"https://github.com/rtivital"},{type:"link",label:"GitHub discussions",link:b.$.gitHubLinks.discussions}]},{title:"Project",data:[{type:"link",label:"Mantine UI",link:b.$.uiLink},{type:"link",label:"Documentation",link:b.$.docsLink},{type:"link",label:"Github organization",link:b.$.gitHubLinks.organization},{type:"link",label:"npm organization",link:b.$.npmLink}]}];var g=a(79894),x=a.n(g),y=a(13830),w=a.n(y);function T(t){let{data:e,title:a}=t,i=e.map((t,e)=>(0,n.jsx)(Text.x,{className:w().link,component:"next"===t.type?x():"a",href:t.link,children:t.label},e));return(0,n.jsxs)("div",{className:w().wrapper,children:[(0,n.jsx)(Text.x,{className:w().title,children:a}),i]})}var N=a(40872),j=a.n(N);function B(t){let{withNavbar:e}=t,a=_.map(t=>(0,n.jsx)(T,{data:t.data,title:t.title},t.title));return(0,n.jsxs)("div",{className:j().root,children:[(0,n.jsx)("div",{className:j().spacer}),(0,n.jsx)(o.x,{mod:{"with-navbar":e},className:(0,i.Z)(j().wrapper,r.Z.classNames.fullWidth),children:(0,n.jsxs)(l.W,{size:1100,children:[(0,n.jsxs)("div",{className:j().inner,children:[(0,n.jsxs)("div",{className:j().logoSection,children:[(0,n.jsx)(c.T,{}),(0,n.jsx)(Text.x,{className:j().description,fz:"sm",children:"Build fully functional accessible web applications faster than ever"})]}),(0,n.jsx)("div",{className:j().groups,children:a})]}),(0,n.jsx)("div",{className:j().afterFooter,children:(0,n.jsxs)(s.Z,{justify:"space-between",wrap:"wrap",children:[(0,n.jsxs)(Text.x,{fz:"xs",className:j().afterFooterNote,children:["Built by ",(0,n.jsx)("a",{href:"https://github.com/rtivital",children:"Vitaly Rtishchev"})," and"," ",(0,n.jsx)("a",{href:"https://github.com/mantinedev/mantine/graphs/contributors",children:"these awesome people"})]}),(0,n.jsxs)("div",{className:j().social,children:[(0,n.jsx)(v,{className:j().socialButton}),(0,n.jsx)(f,{className:j().socialButton})]})]})})]})})]})}},40872:function(t){t.exports={root:"Footer_root__d69lf",spacer:"Footer_spacer__m8ICY",wrapper:"Footer_wrapper__rpDYh",inner:"Footer_inner__FbJ6a",logoSection:"Footer_logoSection__60cxm",description:"Footer_description__s_1Tl",title:"Footer_title__D7snR",afterFooter:"Footer_afterFooter__Bk3gc",afterFooterNote:"Footer_afterFooterNote__xzYGO",groups:"Footer_groups__y7eTr",social:"Footer_social__RYYyg",socialButton:"Footer_socialButton___uZwM"}},13830:function(t){t.exports={wrapper:"LinksGroup_wrapper__LUD9P",link:"LinksGroup_link__rMava",title:"LinksGroup_title__EBDF3"}},73832:function(t){t.exports={socialButton:"SocialButton_socialButton__YzW0G",socialButtonSection:"SocialButton_socialButtonSection__yZ0Qx",discordButton:"SocialButton_discordButton__WILTe",twitterButton:"SocialButton_twitterButton__Nss83"}},66763:function(t,e,a){"use strict";a.d(e,{a:function(){return n}});let n={selectors:{root:"Root element",label:"Thumb label",thumb:"Thumb element",trackContainer:"Wraps track element",track:"Slider track",bar:"Track filled part",markWrapper:"Contains `mark` and `markLabel` elements",mark:"Mark displayed on track",markLabel:"Label of the associated mark, displayed below track"},vars:{root:{"--slider-size":"Controls track `height`","--slider-color":"Controls filled track, thumb and marks `background`","--slider-thumb-size":"Controls thumb `width` and `height`","--slider-radius":"Controls `border-radius` of track and thumb"}},modifiers:[{modifier:"data-disabled",selector:["trackContainer","track","bar","thumb","mark"],condition:"`disabled` prop is set"},{modifier:"data-inverted",selector:["track","bar"],condition:"`inverted` prop is set"},{modifier:"data-dragging",selector:"thumb",condition:"slider is being dragged"},{modifier:"data-filled",selector:"mark",condition:"mark position is less or equal slider value"}]}},91428:function(t,e,a){"use strict";a.d(e,{W:function(){return b}});var n=a(27378),i=a(92082),o=a(83453),r=a(96739),l=a(6231),s=a(56589),c=a(20410),d={root:"m-7485cace"};let u={},m=(0,o.Z)((t,{size:e,fluid:a})=>({root:{"--container-size":a?void 0:(0,i.ap)(e,"container-size")}})),b=(0,c.d)((t,e)=>{let a=(0,r.w)("Container",u,t),{classNames:i,className:o,style:c,styles:b,unstyled:p,vars:h,fluid:k,mod:v,...f}=a,_=(0,l.y)({name:"Container",classes:d,props:a,className:o,style:c,classNames:i,styles:b,unstyled:p,vars:h,varsResolver:m});return n.createElement(s.x,{ref:e,mod:[{fluid:k},v],..._("root"),...f})});b.classes=d,b.displayName="@mantine/core/Container"},83601:function(t,e,a){"use strict";a.d(e,{m:function(){return z}});var n=a(27378),i=a(31002),o=a(58675),r=a(88140),l=a(92082),s=a(83453),c=a(89738),d=a(34121),u=a(96739),m=a(6231),b=a(56589),p=a(20410),h=a(71656);let[k,v]=(0,h.R)("Tabs component was not found in the tree");var f={root:"m-89d60db1","list--default":"m-576c9d4",list:"m-89d33d6d",panel:"m-b0c91715",tab:"m-4ec4dce6",tabSection:"m-fc420b1f","tab--default":"m-539e827b","list--outline":"m-6772fbd5","tab--outline":"m-b59ab47c","tab--pills":"m-c3381914"};let _={},g=(0,p.d)((t,e)=>{let a=(0,u.w)("TabsList",_,t),{children:i,className:o,grow:r,justify:l,classNames:s,styles:c,style:d,mod:m,...p}=a,h=v();return n.createElement(b.x,{...p,...h.getStyles("list",{className:o,style:d,classNames:s,styles:c,props:a,variant:h.variant}),ref:e,role:"tablist",variant:h.variant,mod:[{grow:r,orientation:h.orientation,placement:"vertical"===h.orientation&&h.placement,inverted:h.inverted},m],"aria-orientation":h.orientation,__vars:{"--tabs-justify":l}},i)});g.classes=f,g.displayName="@mantine/core/TabsList";let x={},y=(0,p.d)((t,e)=>{let a=(0,u.w)("TabsPanel",x,t),{children:i,className:o,value:r,classNames:l,styles:s,style:c,mod:d,...m}=a,p=v(),h=p.value===r,k=p.keepMounted||a.keepMounted?i:h?i:null;return n.createElement(b.x,{...m,...p.getStyles("panel",{className:o,classNames:l,styles:s,style:[c,h?void 0:{display:"none"}],props:a}),ref:e,mod:[{orientation:p.orientation},d],role:"tabpanel",id:p.getPanelId(r),"aria-labelledby":p.getTabId(r)},k)});y.classes=f,y.displayName="@mantine/core/TabsPanel";var w=a(61734),T=a(2256),N=a(49134),j=a(19397);let B={},F=(0,p.d)((t,e)=>{let a=(0,u.w)("TabsTab",B,t),{className:i,children:o,rightSection:r,leftSection:l,value:s,onClick:d,onKeyDown:m,disabled:b,color:p,style:h,classNames:k,styles:f,vars:_,mod:g,...x}=a,y=(0,T.rZ)(),{dir:F}=(0,N.gm)(),C=v(),S=s===C.value,L={classNames:k,styles:f,props:a};return n.createElement(j.k,{...x,...C.getStyles("tab",{className:i,style:h,variant:C.variant,...L}),disabled:b,unstyled:C.unstyled,variant:C.variant,mod:[{active:S,disabled:b,orientation:C.orientation,inverted:C.inverted,placement:"vertical"===C.orientation&&C.placement},g],ref:e,role:"tab",id:C.getTabId(s),"aria-selected":S,tabIndex:S||null===C.value?0:-1,"aria-controls":C.getPanelId(s),onClick:t=>{C.onChange(C.allowTabDeactivation&&s===C.value?null:s),d?.(t)},__vars:{"--tabs-color":p?(0,c.p)(p,y):void 0},onKeyDown:(0,w.R)({siblingSelector:'[role="tab"]',parentSelector:'[role="tablist"]',activateOnFocus:C.activateTabWithKeyboard,loop:C.loop,orientation:C.orientation||"horizontal",dir:F,onKeyDown:m})},l&&n.createElement("span",{...C.getStyles("tabSection",L),"data-position":"left"},l),o&&n.createElement("span",{...C.getStyles("tabLabel",L)},o),r&&n.createElement("span",{...C.getStyles("tabSection",L),"data-position":"right"},r))});F.classes=f,F.displayName="@mantine/core/TabsTab";let C="Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value",S={keepMounted:!0,orientation:"horizontal",loop:!0,activateTabWithKeyboard:!0,allowTabDeactivation:!1,unstyled:!1,inverted:!1,variant:"default",placement:"left"},L=(0,s.Z)((t,{radius:e,color:a,autoContrast:n})=>({root:{"--tabs-radius":(0,l.H5)(e),"--tabs-color":(0,c.p)(a,t),"--tabs-text-color":n?(0,d.R)({color:a,theme:t}):void 0}})),z=(0,p.d)((t,e)=>{let a=(0,u.w)("Tabs",S,t),{defaultValue:l,value:s,onChange:c,orientation:d,children:p,loop:h,id:v,activateTabWithKeyboard:_,allowTabDeactivation:g,variant:x,color:y,radius:w,inverted:T,placement:N,keepMounted:j,classNames:B,styles:F,unstyled:z,className:E,style:$,vars:Z,autoContrast:D,mod:M,...I}=a,P=(0,i.M)(v),[R,W]=(0,o.C)({value:s,defaultValue:l,finalValue:null,onChange:c}),G=(0,m.y)({name:"Tabs",props:a,classes:f,className:E,style:$,classNames:B,styles:F,unstyled:z,vars:Z,varsResolver:L});return n.createElement(k,{value:{placement:N,value:R,orientation:d,id:P,loop:h,activateTabWithKeyboard:_,getTabId:(0,r.A)(`${P}-tab`,C),getPanelId:(0,r.A)(`${P}-panel`,C),onChange:W,allowTabDeactivation:g,variant:x,color:y,radius:w,inverted:T,keepMounted:j,unstyled:z,getStyles:G}},n.createElement(b.x,{ref:e,id:P,variant:x,mod:[{orientation:d,inverted:"horizontal"===d&&T,placement:"vertical"===d&&N},M],...G("root"),...I},p))});z.classes=f,z.displayName="@mantine/core/Tabs",z.Tab=F,z.Panel=y,z.List=g},88140:function(t,e,a){"use strict";function n(t,e){return a=>{if("string"!=typeof a||0===a.trim().length)throw Error(e);return`${t}-${a}`}}a.d(e,{A:function(){return n}})},9121:function(t,e,a){"use strict";a.d(e,{Z:function(){return r}});var n=a(27378),i=a(56589),o=a(71078);function r({size:t,style:e,...a}){return n.createElement(i.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",fill:"currentColor",style:[{width:(0,o.h)(t),height:(0,o.h)(t)},e],...a},n.createElement("path",{fillRule:"nonzero",d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"}))}}}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15819],{71611:function(t,e,a){"use strict";a.d(e,{$:function(){return B}});var n=a(24246);a(27378);var i=a(40624),o=a(56589),r=a(82827),l=a(91428),Text=a(26569),s=a(22971),c=a(17992),d=a(8671),u=a(86010),m=a(9121),b=a(86175),p=a(73832),h=a.n(p);function k(t){let{icon:e,...a}=t;return(0,n.jsx)(d.z,{component:"a",target:"_blank",rel:"noopener noreferrer",leftSection:e,radius:"md",classNames:{root:h().socialButton,section:h().socialButtonSection},...a})}function v(t){let{className:e,...a}=t;return(0,n.jsx)(k,{className:(0,i.Z)(h().discordButton,e),icon:(0,n.jsx)(u.D,{size:16}),href:b.$.discordLink,...a,children:"Join Discord community"})}function f(t){let{className:e,...a}=t;return(0,n.jsx)(k,{className:(0,i.Z)(h().twitterButton,e),icon:(0,n.jsx)(m.Z,{size:16}),href:b.$.twitterLink,...a,children:"Follow Mantine on Twitter"})}let _=[{title:"About",data:[{type:"next",label:"Contribute",link:"/contribute"},{type:"next",label:"About Mantine",link:"/about"},{type:"next",label:"Changelog",link:"/changelog/previous-versions"},{type:"link",label:"Releases",link:b.$.gitHubLinks.releases}]},{title:"Community",data:[{type:"link",label:"Chat on Discord",link:b.$.discordLink},{type:"link",label:"Follow on Twitter",link:b.$.twitterLink},{type:"link",label:"Follow on Github",link:"https://github.com/rtivital"},{type:"link",label:"GitHub discussions",link:b.$.gitHubLinks.discussions}]},{title:"Project",data:[{type:"link",label:"Mantine UI",link:b.$.uiLink},{type:"link",label:"Documentation",link:b.$.docsLink},{type:"link",label:"Github organization",link:b.$.gitHubLinks.organization},{type:"link",label:"npm organization",link:b.$.npmLink}]}];var g=a(79894),x=a.n(g),y=a(13830),w=a.n(y);function T(t){let{data:e,title:a}=t,i=e.map((t,e)=>(0,n.jsx)(Text.x,{className:w().link,component:"next"===t.type?x():"a",href:t.link,children:t.label},e));return(0,n.jsxs)("div",{className:w().wrapper,children:[(0,n.jsx)(Text.x,{className:w().title,children:a}),i]})}var N=a(40872),j=a.n(N);function B(t){let{withNavbar:e}=t,a=_.map(t=>(0,n.jsx)(T,{data:t.data,title:t.title},t.title));return(0,n.jsxs)("div",{className:j().root,children:[(0,n.jsx)("div",{className:j().spacer}),(0,n.jsx)(o.x,{mod:{"with-navbar":e},className:(0,i.Z)(j().wrapper,r.Z.classNames.fullWidth),children:(0,n.jsxs)(l.W,{size:1100,children:[(0,n.jsxs)("div",{className:j().inner,children:[(0,n.jsxs)("div",{className:j().logoSection,children:[(0,n.jsx)(c.T,{}),(0,n.jsx)(Text.x,{className:j().description,fz:"sm",children:"Build fully functional accessible web applications faster than ever"})]}),(0,n.jsx)("div",{className:j().groups,children:a})]}),(0,n.jsx)("div",{className:j().afterFooter,children:(0,n.jsxs)(s.Z,{justify:"space-between",wrap:"wrap",children:[(0,n.jsxs)(Text.x,{fz:"xs",className:j().afterFooterNote,children:["Built by ",(0,n.jsx)("a",{href:"https://github.com/rtivital",children:"Vitaly Rtishchev"})," and"," ",(0,n.jsx)("a",{href:"https://github.com/mantinedev/mantine/graphs/contributors",children:"these awesome people"})]}),(0,n.jsxs)("div",{className:j().social,children:[(0,n.jsx)(v,{className:j().socialButton}),(0,n.jsx)(f,{className:j().socialButton})]})]})})]})})]})}},40872:function(t){t.exports={root:"Footer_root__d69lf",spacer:"Footer_spacer__m8ICY",wrapper:"Footer_wrapper__rpDYh",inner:"Footer_inner__FbJ6a",logoSection:"Footer_logoSection__60cxm",description:"Footer_description__s_1Tl",title:"Footer_title__D7snR",afterFooter:"Footer_afterFooter__Bk3gc",afterFooterNote:"Footer_afterFooterNote__xzYGO",groups:"Footer_groups__y7eTr",social:"Footer_social__RYYyg",socialButton:"Footer_socialButton___uZwM"}},13830:function(t){t.exports={wrapper:"LinksGroup_wrapper__LUD9P",link:"LinksGroup_link__rMava",title:"LinksGroup_title__EBDF3"}},73832:function(t){t.exports={socialButton:"SocialButton_socialButton__YzW0G",socialButtonSection:"SocialButton_socialButtonSection__yZ0Qx",discordButton:"SocialButton_discordButton__WILTe",twitterButton:"SocialButton_twitterButton__Nss83"}},66763:function(t,e,a){"use strict";a.d(e,{a:function(){return n}});let n={selectors:{root:"Root element",label:"Thumb label",thumb:"Thumb element",trackContainer:"Wraps track element",track:"Slider track",bar:"Track filled part",markWrapper:"Contains `mark` and `markLabel` elements",mark:"Mark displayed on track",markLabel:"Label of the associated mark, displayed below track"},vars:{root:{"--slider-size":"Controls track `height`","--slider-color":"Controls filled track, thumb and marks `background`","--slider-thumb-size":"Controls thumb `width` and `height`","--slider-radius":"Controls `border-radius` of track and thumb"}},modifiers:[{modifier:"data-disabled",selector:["trackContainer","track","bar","thumb","mark"],condition:"`disabled` prop is set"},{modifier:"data-inverted",selector:["track","bar"],condition:"`inverted` prop is set"},{modifier:"data-dragging",selector:"thumb",condition:"slider is being dragged"},{modifier:"data-filled",selector:"mark",condition:"mark position is less or equal slider value"}]}},91428:function(t,e,a){"use strict";a.d(e,{W:function(){return b}});var n=a(27378),i=a(92082),o=a(83453),r=a(96739),l=a(6231),s=a(56589),c=a(20410),d={root:"m-7485cace"};let u={},m=(0,o.Z)((t,{size:e,fluid:a})=>({root:{"--container-size":a?void 0:(0,i.ap)(e,"container-size")}})),b=(0,c.d)((t,e)=>{let a=(0,r.w)("Container",u,t),{classNames:i,className:o,style:c,styles:b,unstyled:p,vars:h,fluid:k,mod:v,...f}=a,_=(0,l.y)({name:"Container",classes:d,props:a,className:o,style:c,classNames:i,styles:b,unstyled:p,vars:h,varsResolver:m});return n.createElement(s.x,{ref:e,mod:[{fluid:k},v],..._("root"),...f})});b.classes=d,b.displayName="@mantine/core/Container"},83601:function(t,e,a){"use strict";a.d(e,{m:function(){return E}});var n=a(27378),i=a(31002),o=a(58675),r=a(88140),l=a(92082),s=a(83453),c=a(89738),d=a(34121),u=a(55357),m=a(96739),b=a(6231),p=a(56589),h=a(20410),k=a(71656);let[v,f]=(0,k.R)("Tabs component was not found in the tree");var _={root:"m-89d60db1","list--default":"m-576c9d4",list:"m-89d33d6d",panel:"m-b0c91715",tab:"m-4ec4dce6",tabSection:"m-fc420b1f","tab--default":"m-539e827b","list--outline":"m-6772fbd5","tab--outline":"m-b59ab47c","tab--pills":"m-c3381914"};let g={},x=(0,h.d)((t,e)=>{let a=(0,m.w)("TabsList",g,t),{children:i,className:o,grow:r,justify:l,classNames:s,styles:c,style:d,mod:u,...b}=a,h=f();return n.createElement(p.x,{...b,...h.getStyles("list",{className:o,style:d,classNames:s,styles:c,props:a,variant:h.variant}),ref:e,role:"tablist",variant:h.variant,mod:[{grow:r,orientation:h.orientation,placement:"vertical"===h.orientation&&h.placement,inverted:h.inverted},u],"aria-orientation":h.orientation,__vars:{"--tabs-justify":l}},i)});x.classes=_,x.displayName="@mantine/core/TabsList";let y={},w=(0,h.d)((t,e)=>{let a=(0,m.w)("TabsPanel",y,t),{children:i,className:o,value:r,classNames:l,styles:s,style:c,mod:d,...u}=a,b=f(),h=b.value===r,k=b.keepMounted||a.keepMounted?i:h?i:null;return n.createElement(p.x,{...u,...b.getStyles("panel",{className:o,classNames:l,styles:s,style:[c,h?void 0:{display:"none"}],props:a}),ref:e,mod:[{orientation:b.orientation},d],role:"tabpanel",id:b.getPanelId(r),"aria-labelledby":b.getTabId(r)},k)});w.classes=_,w.displayName="@mantine/core/TabsPanel";var T=a(61734),N=a(2256),j=a(49134),B=a(19397);let F={},C=(0,h.d)((t,e)=>{let a=(0,m.w)("TabsTab",F,t),{className:i,children:o,rightSection:r,leftSection:l,value:s,onClick:d,onKeyDown:u,disabled:b,color:p,style:h,classNames:k,styles:v,vars:_,mod:g,...x}=a,y=(0,N.rZ)(),{dir:w}=(0,j.gm)(),C=f(),S=s===C.value,L={classNames:k,styles:v,props:a};return n.createElement(B.k,{...x,...C.getStyles("tab",{className:i,style:h,variant:C.variant,...L}),disabled:b,unstyled:C.unstyled,variant:C.variant,mod:[{active:S,disabled:b,orientation:C.orientation,inverted:C.inverted,placement:"vertical"===C.orientation&&C.placement},g],ref:e,role:"tab",id:C.getTabId(s),"aria-selected":S,tabIndex:S||null===C.value?0:-1,"aria-controls":C.getPanelId(s),onClick:t=>{C.onChange(C.allowTabDeactivation&&s===C.value?null:s),d?.(t)},__vars:{"--tabs-color":p?(0,c.p)(p,y):void 0},onKeyDown:(0,T.R)({siblingSelector:'[role="tab"]',parentSelector:'[role="tablist"]',activateOnFocus:C.activateTabWithKeyboard,loop:C.loop,orientation:C.orientation||"horizontal",dir:w,onKeyDown:u})},l&&n.createElement("span",{...C.getStyles("tabSection",L),"data-position":"left"},l),o&&n.createElement("span",{...C.getStyles("tabLabel",L)},o),r&&n.createElement("span",{...C.getStyles("tabSection",L),"data-position":"right"},r))});C.classes=_,C.displayName="@mantine/core/TabsTab";let S="Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value",L={keepMounted:!0,orientation:"horizontal",loop:!0,activateTabWithKeyboard:!0,allowTabDeactivation:!1,unstyled:!1,inverted:!1,variant:"default",placement:"left"},z=(0,s.Z)((t,{radius:e,color:a,autoContrast:n})=>({root:{"--tabs-radius":(0,l.H5)(e),"--tabs-color":(0,c.p)(a,t),"--tabs-text-color":(0,u.o)(n,t)?(0,d.R)({color:a,theme:t}):void 0}})),E=(0,h.d)((t,e)=>{let a=(0,m.w)("Tabs",L,t),{defaultValue:l,value:s,onChange:c,orientation:d,children:u,loop:h,id:k,activateTabWithKeyboard:f,allowTabDeactivation:g,variant:x,color:y,radius:w,inverted:T,placement:N,keepMounted:j,classNames:B,styles:F,unstyled:C,className:E,style:$,vars:Z,autoContrast:D,mod:M,...I}=a,P=(0,i.M)(k),[R,W]=(0,o.C)({value:s,defaultValue:l,finalValue:null,onChange:c}),G=(0,b.y)({name:"Tabs",props:a,classes:_,className:E,style:$,classNames:B,styles:F,unstyled:C,vars:Z,varsResolver:z});return n.createElement(v,{value:{placement:N,value:R,orientation:d,id:P,loop:h,activateTabWithKeyboard:f,getTabId:(0,r.A)(`${P}-tab`,S),getPanelId:(0,r.A)(`${P}-panel`,S),onChange:W,allowTabDeactivation:g,variant:x,color:y,radius:w,inverted:T,keepMounted:j,unstyled:C,getStyles:G}},n.createElement(p.x,{ref:e,id:P,variant:x,mod:[{orientation:d,inverted:"horizontal"===d&&T,placement:"vertical"===d&&N},M],...G("root"),...I},u))});E.classes=_,E.displayName="@mantine/core/Tabs",E.Tab=C,E.Panel=w,E.List=x},88140:function(t,e,a){"use strict";function n(t,e){return a=>{if("string"!=typeof a||0===a.trim().length)throw Error(e);return`${t}-${a}`}}a.d(e,{A:function(){return n}})},9121:function(t,e,a){"use strict";a.d(e,{Z:function(){return r}});var n=a(27378),i=a(56589),o=a(71078);function r({size:t,style:e,...a}){return n.createElement(i.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 209",fill:"currentColor",style:[{width:(0,o.h)(t),height:(0,o.h)(t)},e],...a},n.createElement("path",{fillRule:"nonzero",d:"M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 01-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 01-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 01-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 00256 25.45"}))}}}]); \ No newline at end of file diff --git a/_next/static/chunks/16584-a083ad2322f01ac4.js b/_next/static/chunks/16584-a083ad2322f01ac4.js new file mode 100644 index 00000000000..eff9b6186fa --- /dev/null +++ b/_next/static/chunks/16584-a083ad2322f01ac4.js @@ -0,0 +1,13 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[16584],{16584:function(e,t,n){n.d(t,{a:function(){return o}});var a=n(27378),l=n(16161);let r=` +import { TagsInput } from '@mantine/core'; + +function Demo() { + return ( + + ); +} +`,o={type:"code",component:function(){return a.createElement(l.B,{label:"Press Enter to submit a tag",placeholder:"Pick tag from list",data:["React","Angular","Svelte"]})},code:r,maxWidth:340,centered:!0}},81097:function(e,t,n){n.d(t,{r:function(){return p}});var a=n(27378),l=n(40624),r=n(38765),o=n(49849),i=n(45608),s=n(61777),u=n(62443);function c(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:n,checkIconPosition:o,unstyled:p}){if(!(0,s.f)(e)){let s=t&&c(n,e.value)&&a.createElement(r.n,{className:u.Z.optionsDropdownCheckIcon});return a.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,l.Z)({[u.Z.optionsDropdownOption]:!p}),"data-reverse":"right"===o||void 0,"data-checked":c(n,e.value)||void 0,"aria-selected":c(n,e.value)},"left"===o&&s,a.createElement("span",null,e.label),"right"===o&&s)}let d=e.items.map(e=>a.createElement(Option,{data:e,value:n,key:e.value,unstyled:p,withCheckIcon:t,checkIconPosition:o}));return a.createElement(i.h.Group,{label:e.group},d)}function p({data:e,hidden:t,hiddenWhenEmpty:n,filter:l,search:r,limit:u,maxDropdownHeight:c,withScrollArea:p=!0,filterOptions:d=!0,withCheckIcon:m=!1,value:f,checkIconPosition:v,nothingFoundMessage:g,unstyled:h,labelId:E}){!function e(t,n=new Set){if(Array.isArray(t))for(let a of t)if((0,s.f)(a))e(a.items,n);else{if(void 0===a.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof a.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof a.value}`);if(n.has(a.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${a.value}" was provided more than once`);n.add(a.value)}}(e);let y="string"==typeof r,b=y?(l||function e({options:t,search:n,limit:a}){let l=n.trim().toLowerCase(),r=[];for(let o=0;o0)return!1;return!0}(b),D=b.map(e=>a.createElement(Option,{data:e,key:(0,s.f)(e)?e.group:e.value,withCheckIcon:m,value:f,checkIconPosition:v,unstyled:h}));return a.createElement(i.h.Dropdown,{hidden:t||n&&w},a.createElement(i.h.Options,{labelledBy:E},p?a.createElement(o.x.Autosize,{mah:c??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y"},D):D,w&&g&&a.createElement(i.h.Empty,null,g)))}},61777:function(e,t,n){n.d(t,{f:function(){return a}});function a(e){return"group"in e}},38099:function(e,t,n){n.d(t,{g:function(){return function e(t){return t.reduce((t,n)=>"group"in n?{...t,...e(n.items)}:(t[n.value]=n,t),{})}}})},39394:function(e,t,n){n.d(t,{D:function(){return w}});var a=n(27378),l=n(92082),r=n(83453),o=n(96739),i=n(6231),s=n(56589),u=n(20410),c=n(96217),p=n(33),d=n(89871);let[m,f]=(0,d.V)();var v={root:"m-7cda1cd6","root--default":"m-44da308b","root--contrast":"m-e3a01f8",label:"m-1e0e6180",remove:"m-ae386778",group:"m-1dcfd90b"};let g={},h=(0,r.Z)((e,{gap:t},{size:n})=>({group:{"--pg-gap":void 0!==t?(0,l.ap)(t):(0,l.ap)(n,"pg-gap")}})),E=(0,u.d)((e,t)=>{let n=(0,o.w)("PillGroup",g,e),{classNames:l,className:r,style:u,styles:c,unstyled:d,vars:f,size:E,disabled:y,...b}=n,w=(0,p.D)(),D=w?.size||E||void 0,C=(0,i.y)({name:"PillGroup",classes:v,props:n,className:r,style:u,classNames:l,styles:c,unstyled:d,vars:f,varsResolver:h,stylesCtx:{size:D},rootSelector:"group"});return a.createElement(m,{value:{size:D,disabled:y}},a.createElement(s.x,{ref:t,size:D,...C("group"),...b}))});E.classes=v,E.displayName="@mantine/core/PillGroup";let y={variant:"default"},b=(0,r.Z)((e,{radius:t},{size:n})=>({root:{"--pill-fz":(0,l.ap)(n,"pill-fz"),"--pill-height":(0,l.ap)(n,"pill-height"),"--pill-radius":void 0===t?void 0:(0,l.H5)(t)}})),w=(0,u.d)((e,t)=>{let n=(0,o.w)("Pill",y,e),{classNames:l,className:r,style:u,styles:d,unstyled:m,vars:g,variant:h,children:E,withRemoveButton:w,onRemove:D,removeButtonProps:C,radius:P,size:k,disabled:I,mod:x,...S}=n,N=f(),T=(0,p.D)(),_=k||N?.size||void 0,z=T?.variant==="filled"?"contrast":h||"default",O=(0,i.y)({name:"Pill",classes:v,props:n,className:r,style:u,classNames:l,styles:d,unstyled:m,vars:g,varsResolver:b,stylesCtx:{size:_}});return a.createElement(s.x,{component:"span",ref:t,variant:z,size:_,...O("root",{variant:z}),mod:[{"with-remove":w,disabled:I||N?.disabled},x],...S},a.createElement("span",{...O("label")},E),w&&a.createElement(c.P,{variant:"transparent",radius:P,tabIndex:-1,"aria-hidden":!0,unstyled:m,...C,...O("remove",{className:C?.className,style:C?.style}),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),C?.onMouseDown?.(e)},onClick:e=>{e.stopPropagation(),D?.(),C?.onClick?.(e)}}))});w.classes=v,w.displayName="@mantine/core/Pill",w.Group=E},33:function(e,t,n){n.d(t,{D:function(){return r},H:function(){return l}}),n(27378);var a=n(89871);let[l,r]=(0,a.V)()},28639:function(e,t,n){n.d(t,{d:function(){return g}});var a=n(27378),l=n(96739),r=n(20410),o=n(23163),i=n(33),s=n(72840),u=n(6231),c=n(56589),p=n(5739),d={field:"m-45c4369d"};let m={type:"visible"},f=(0,r.d)((e,t)=>{let n=(0,l.w)("PillsInputField",m,e),{classNames:r,className:o,style:f,styles:v,unstyled:g,vars:h,type:E,disabled:y,id:b,pointer:w,mod:D,...C}=n,P=(0,i.D)(),k=(0,p.D)(),I=(0,u.y)({name:"PillsInputField",classes:d,props:n,className:o,style:f,classNames:r,styles:v,unstyled:g,rootSelector:"field"}),x=y||P?.disabled;return a.createElement(c.x,{component:"input",ref:(0,s.Yx)(t,P?.fieldRef),"data-type":E,disabled:x,mod:[{disabled:x,pointer:w},D],...I("field"),...C,id:k?.inputId||b,"aria-invalid":P?.hasError,"aria-describedby":k?.describedBy,type:"text",onMouseDown:e=>!w&&e.stopPropagation()})});f.classes=d,f.displayName="@mantine/core/PillsInputField";let v={},g=(0,r.d)((e,t)=>{let n=(0,l.w)("PillsInput",v,e),{children:r,onMouseDown:s,onClick:u,size:c,disabled:p,__staticSelector:d,error:m,variant:f,...g}=n,h=(0,a.useRef)();return a.createElement(i.H,{value:{fieldRef:h,size:c,disabled:p,hasError:!!m,variant:f}},a.createElement(o.M,{size:c,error:m,variant:f,component:"div",ref:t,onMouseDown:e=>{e.preventDefault(),s?.(e),h.current?.focus()},onClick:e=>{e.preventDefault(),u?.(e),h.current?.focus()},...g,multiline:!0,disabled:p,__staticSelector:d||"PillsInput",withAria:!1},r))});g.displayName="@mantine/core/PillsInput",g.Field=f},16161:function(e,t,n){n.d(t,{B:function(){return D}});var a=n(27378),l=n(31002),r=n(58675),o=n(5564),i=n(6231),s=n(96739),u=n(55934),c=n(20410),p=n(2161),d=n(38099),m=n(45608),f=n(81097),v=n(54526),g=n(23163),h=n(39394),E=n(28639),y=n(61777);function b({splitChars:e,allowDuplicates:t,maxTags:n,value:a,currentTags:l}){let r=e?a.split(RegExp(`[${e.join("")}]`)).map(e=>e.trim()).filter(e=>""!==e):[a],o=t?[...l,...r]:[...new Set([...l,...r])];return n?o.slice(0,n):o}let w={maxTags:1/0,allowDuplicates:!1,splitChars:[","],hiddenInputValuesDivider:","},D=(0,c.d)((e,t)=>{let n=(0,s.w)("TagsInput",w,e),{classNames:c,className:g,style:D,styles:C,unstyled:P,vars:k,size:I,value:x,defaultValue:S,onChange:N,onKeyDown:T,maxTags:_,allowDuplicates:z,onDuplicate:O,variant:A,data:R,dropdownOpened:B,defaultDropdownOpened:F,onDropdownOpen:L,onDropdownClose:M,selectFirstOptionOnChange:G,onOptionSubmit:V,comboboxProps:$,filter:Z,limit:H,withScrollArea:j,maxDropdownHeight:K,searchValue:W,defaultSearchValue:q,onSearchChange:Y,readOnly:J,disabled:Q,splitChars:U,onFocus:X,onBlur:ee,onPaste:et,radius:en,rightSection:ea,rightSectionWidth:el,rightSectionPointerEvents:er,rightSectionProps:eo,leftSection:ei,leftSectionWidth:es,leftSectionPointerEvents:eu,leftSectionProps:ec,inputContainer:ep,inputWrapperOrder:ed,withAsterisk:em,required:ef,labelProps:ev,descriptionProps:eg,errorProps:eh,wrapperProps:eE,description:ey,label:eb,error:ew,withErrorStyles:eD,name:eC,form:eP,id:ek,clearable:eI,clearButtonProps:ex,hiddenInputProps:eS,hiddenInputValuesDivider:eN,mod:eT,...e_}=n,ez=(0,l.M)(ek),eO=(0,p.R)(R),eA=(0,d.g)(eO),eR=(0,v.K)({opened:B,defaultOpened:F,onDropdownOpen:L,onDropdownClose:()=>{M?.(),eR.resetSelectedOption()}}),{styleProps:eB,rest:{type:eF,...eL}}=(0,u.c)(e_),[eM,eG]=(0,r.C)({value:x,defaultValue:S,finalValue:[],onChange:N}),[eV,e$]=(0,r.C)({value:W,defaultValue:q,finalValue:"",onChange:Y}),eZ=(0,i.y)({name:"TagsInput",classes:{},props:n,classNames:c,styles:C,unstyled:P}),{resolvedClassNames:eH,resolvedStyles:ej}=(0,o.h)({props:n,styles:C,classNames:c}),eK=eM.map((e,t)=>a.createElement(h.D,{key:`${e}-${t}`,withRemoveButton:!J,onRemove:()=>eG(eM.filter(t=>e!==t)),unstyled:P,...eZ("pill")},e)),eW=eI&&eM.length>0&&!Q&&!J&&a.createElement(m.h.ClearButton,{size:I,...ex,onClear:()=>{eG([]),e$("")}});return a.createElement(a.Fragment,null,a.createElement(m.h,{store:eR,classNames:eH,styles:ej,unstyled:P,size:I,readOnly:J,__staticSelector:"TagsInput",onOptionSubmit:e=>{V?.(e),e$(""),eM.length<_&&eG([...eM,eA[e].label])},...$},a.createElement(m.h.DropdownTarget,null,a.createElement(E.d,{...eB,__staticSelector:"TagsInput",classNames:eH,styles:ej,unstyled:P,size:I,className:g,style:D,variant:A,disabled:Q,radius:en,rightSection:ea||eW,rightSectionWidth:el,rightSectionPointerEvents:er,rightSectionProps:eo,leftSection:ei,leftSectionWidth:es,leftSectionPointerEvents:eu,leftSectionProps:ec,inputContainer:ep,inputWrapperOrder:ed,withAsterisk:em,required:ef,labelProps:ev,descriptionProps:eg,errorProps:eh,wrapperProps:eE,description:ey,label:eb,error:ew,multiline:!0,withErrorStyles:eD,__stylesApiProps:{...n,multiline:!0},id:ez,mod:eT},a.createElement(h.D.Group,{disabled:Q,unstyled:P,...eZ("pillsList")},eK,a.createElement(m.h.EventsTarget,null,a.createElement(E.d.Field,{...eL,ref:t,...eZ("inputField"),unstyled:P,onKeyDown:e=>{T?.(e);let t=eV.trim(),{length:n}=t;if(U.includes(e.key)&&n>0&&(eG(b({splitChars:U,allowDuplicates:z,maxTags:_,value:eV,currentTags:eM})),e$(""),e.preventDefault()),"Enter"===e.key&&n>0&&!e.nativeEvent.isComposing){e.preventDefault();let n=eM.some(e=>e.toLowerCase()===t.toLowerCase());n&&O?.(t),(!n||n&&z)&&eM.length<_&&(V?.(t),e$(""),t.length>0&&eG([...eM,t]))}"Backspace"===e.key&&0===n&&eM.length>0&&eG(eM.slice(0,eM.length-1))},onFocus:e=>{X?.(e),eR.openDropdown()},onBlur:e=>{ee?.(e),eR.closeDropdown()},onPaste:e=>{if(et?.(e),e.preventDefault(),e.clipboardData){let t=e.clipboardData.getData("text/plain");eG(b({splitChars:U,allowDuplicates:z,maxTags:_,value:t,currentTags:eM})),e$("")}},value:eV,onChange:e=>e$(e.currentTarget.value),required:ef&&0===eM.length,disabled:Q,readOnly:J,id:ez}))))),a.createElement(f.r,{data:function({data:e,value:t}){let n=t.map(e=>e.trim().toLowerCase()),a=e.reduce((e,t)=>((0,y.f)(t)?e.push({group:t.group,items:t.items.filter(e=>-1===n.indexOf(e.label.toLowerCase().trim()))}):-1===n.indexOf(t.label.toLowerCase().trim())&&e.push(t),e),[]);return a}({data:eO,value:eM}),hidden:J||Q,filter:Z,search:eV,limit:H,hiddenWhenEmpty:!0,withScrollArea:j,maxDropdownHeight:K,unstyled:P,labelId:`${ez}-label`})),a.createElement("input",{type:"hidden",name:eC,form:eP,value:eM.join(eN),disabled:Q,...eS}))});D.classes={...g.M.classes,...m.h.classes},D.displayName="@mantine/core/TagsInput"}}]); \ No newline at end of file diff --git a/_next/static/chunks/16584-b3a2e7c0443f168f.js b/_next/static/chunks/16584-b3a2e7c0443f168f.js deleted file mode 100644 index d5887c2c183..00000000000 --- a/_next/static/chunks/16584-b3a2e7c0443f168f.js +++ /dev/null @@ -1,13 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[16584],{16584:function(e,t,n){n.d(t,{a:function(){return o}});var a=n(27378),l=n(16161);let r=` -import { TagsInput } from '@mantine/core'; - -function Demo() { - return ( - - ); -} -`,o={type:"code",component:function(){return a.createElement(l.B,{label:"Press Enter to submit a tag",placeholder:"Pick tag from list",data:["React","Angular","Svelte"]})},code:r,maxWidth:340,centered:!0}},81097:function(e,t,n){n.d(t,{r:function(){return p}});var a=n(27378),l=n(40624),r=n(38765),o=n(49849),i=n(45608),s=n(61777),u=n(62443);function c(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:n,checkIconPosition:o,unstyled:p}){if(!(0,s.f)(e)){let s=t&&c(n,e.value)&&a.createElement(r.n,{className:u.Z.optionsDropdownCheckIcon});return a.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,l.Z)({[u.Z.optionsDropdownOption]:!p}),"data-reverse":"right"===o||void 0,"data-checked":c(n,e.value)||void 0,"aria-selected":c(n,e.value)},"left"===o&&s,a.createElement("span",null,e.label),"right"===o&&s)}let d=e.items.map(e=>a.createElement(Option,{data:e,value:n,key:e.value,unstyled:p,withCheckIcon:t,checkIconPosition:o}));return a.createElement(i.h.Group,{label:e.group},d)}function p({data:e,hidden:t,hiddenWhenEmpty:n,filter:l,search:r,limit:c,maxDropdownHeight:p,withScrollArea:d=!0,filterOptions:m=!0,withCheckIcon:f=!1,value:v,checkIconPosition:g,nothingFoundMessage:h,unstyled:E,labelId:y}){!function e(t,n=new Set){if(Array.isArray(t))for(let a of t)if((0,s.f)(a))e(a.items,n);else{if(void 0===a.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof a.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof a.value}`);if(n.has(a.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${a.value}" was provided more than once`);n.add(a.value)}}(e);let b="string"==typeof r,w=b?(l||function e({options:t,search:n,limit:a}){let l=n.trim().toLowerCase(),r=[];for(let o=0;o0)return!1;return!0}(w),C=w.map(e=>a.createElement(Option,{data:e,key:(0,s.f)(e)?e.group:e.value,withCheckIcon:f,value:v,checkIconPosition:g,unstyled:E}));return a.createElement(i.h.Dropdown,{hidden:t||n&&D},a.createElement(i.h.Options,{labelledBy:y},d?a.createElement(o.x.Autosize,{mah:p??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y",className:u.Z.optionsDropdownScrollArea},C):C,D&&h&&a.createElement(i.h.Empty,null,h)))}},61777:function(e,t,n){n.d(t,{f:function(){return a}});function a(e){return"group"in e}},38099:function(e,t,n){n.d(t,{g:function(){return function e(t){return t.reduce((t,n)=>"group"in n?{...t,...e(n.items)}:(t[n.value]=n,t),{})}}})},39394:function(e,t,n){n.d(t,{D:function(){return w}});var a=n(27378),l=n(92082),r=n(83453),o=n(96739),i=n(6231),s=n(56589),u=n(20410),c=n(96217),p=n(33),d=n(89871);let[m,f]=(0,d.V)();var v={root:"m-7cda1cd6","root--default":"m-44da308b","root--contrast":"m-e3a01f8",label:"m-1e0e6180",remove:"m-ae386778",group:"m-1dcfd90b"};let g={},h=(0,r.Z)((e,{gap:t},{size:n})=>({group:{"--pg-gap":void 0!==t?(0,l.ap)(t):(0,l.ap)(n,"pg-gap")}})),E=(0,u.d)((e,t)=>{let n=(0,o.w)("PillGroup",g,e),{classNames:l,className:r,style:u,styles:c,unstyled:d,vars:f,size:E,disabled:y,...b}=n,w=(0,p.D)(),D=w?.size||E||void 0,C=(0,i.y)({name:"PillGroup",classes:v,props:n,className:r,style:u,classNames:l,styles:c,unstyled:d,vars:f,varsResolver:h,stylesCtx:{size:D},rootSelector:"group"});return a.createElement(m,{value:{size:D,disabled:y}},a.createElement(s.x,{ref:t,size:D,...C("group"),...b}))});E.classes=v,E.displayName="@mantine/core/PillGroup";let y={variant:"default"},b=(0,r.Z)((e,{radius:t},{size:n})=>({root:{"--pill-fz":(0,l.ap)(n,"pill-fz"),"--pill-height":(0,l.ap)(n,"pill-height"),"--pill-radius":void 0===t?void 0:(0,l.H5)(t)}})),w=(0,u.d)((e,t)=>{let n=(0,o.w)("Pill",y,e),{classNames:l,className:r,style:u,styles:d,unstyled:m,vars:g,variant:h,children:E,withRemoveButton:w,onRemove:D,removeButtonProps:C,radius:P,size:k,disabled:I,mod:x,...S}=n,N=f(),T=(0,p.D)(),_=k||N?.size||void 0,z=T?.variant==="filled"?"contrast":h||"default",A=(0,i.y)({name:"Pill",classes:v,props:n,className:r,style:u,classNames:l,styles:d,unstyled:m,vars:g,varsResolver:b,stylesCtx:{size:_}});return a.createElement(s.x,{component:"span",ref:t,variant:z,size:_,...A("root",{variant:z}),mod:[{"with-remove":w,disabled:I||N?.disabled},x],...S},a.createElement("span",{...A("label")},E),w&&a.createElement(c.P,{variant:"transparent",radius:P,tabIndex:-1,"aria-hidden":!0,unstyled:m,...C,...A("remove",{className:C?.className,style:C?.style}),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),C?.onMouseDown?.(e)},onClick:e=>{e.stopPropagation(),D?.(),C?.onClick?.(e)}}))});w.classes=v,w.displayName="@mantine/core/Pill",w.Group=E},33:function(e,t,n){n.d(t,{D:function(){return r},H:function(){return l}}),n(27378);var a=n(89871);let[l,r]=(0,a.V)()},28639:function(e,t,n){n.d(t,{d:function(){return g}});var a=n(27378),l=n(96739),r=n(20410),o=n(23163),i=n(33),s=n(72840),u=n(6231),c=n(56589),p=n(5739),d={field:"m-45c4369d"};let m={type:"visible"},f=(0,r.d)((e,t)=>{let n=(0,l.w)("PillsInputField",m,e),{classNames:r,className:o,style:f,styles:v,unstyled:g,vars:h,type:E,disabled:y,id:b,pointer:w,mod:D,...C}=n,P=(0,i.D)(),k=(0,p.D)(),I=(0,u.y)({name:"PillsInputField",classes:d,props:n,className:o,style:f,classNames:r,styles:v,unstyled:g,rootSelector:"field"}),x=y||P?.disabled;return a.createElement(c.x,{component:"input",ref:(0,s.Yx)(t,P?.fieldRef),"data-type":E,disabled:x,mod:[{disabled:x,pointer:w},D],...I("field"),...C,id:k?.inputId||b,"aria-invalid":P?.hasError,"aria-describedby":k?.describedBy,type:"text",onMouseDown:e=>!w&&e.stopPropagation()})});f.classes=d,f.displayName="@mantine/core/PillsInputField";let v={},g=(0,r.d)((e,t)=>{let n=(0,l.w)("PillsInput",v,e),{children:r,onMouseDown:s,onClick:u,size:c,disabled:p,__staticSelector:d,error:m,variant:f,...g}=n,h=(0,a.useRef)();return a.createElement(i.H,{value:{fieldRef:h,size:c,disabled:p,hasError:!!m,variant:f}},a.createElement(o.M,{size:c,error:m,variant:f,component:"div",ref:t,onMouseDown:e=>{e.preventDefault(),s?.(e),h.current?.focus()},onClick:e=>{e.preventDefault(),u?.(e),h.current?.focus()},...g,multiline:!0,disabled:p,__staticSelector:d||"PillsInput",withAria:!1},r))});g.displayName="@mantine/core/PillsInput",g.Field=f},16161:function(e,t,n){n.d(t,{B:function(){return D}});var a=n(27378),l=n(31002),r=n(58675),o=n(5564),i=n(6231),s=n(96739),u=n(55934),c=n(20410),p=n(2161),d=n(38099),m=n(45608),f=n(81097),v=n(54526),g=n(23163),h=n(39394),E=n(28639),y=n(61777);function b({splitChars:e,allowDuplicates:t,maxTags:n,value:a,currentTags:l}){let r=e?a.split(RegExp(`[${e.join("")}]`)).map(e=>e.trim()).filter(e=>""!==e):[a],o=t?[...l,...r]:[...new Set([...l,...r])];return n?o.slice(0,n):o}let w={maxTags:1/0,allowDuplicates:!1,splitChars:[","],hiddenInputValuesDivider:","},D=(0,c.d)((e,t)=>{let n=(0,s.w)("TagsInput",w,e),{classNames:c,className:g,style:D,styles:C,unstyled:P,vars:k,size:I,value:x,defaultValue:S,onChange:N,onKeyDown:T,maxTags:_,allowDuplicates:z,onDuplicate:A,variant:O,data:R,dropdownOpened:B,defaultDropdownOpened:F,onDropdownOpen:L,onDropdownClose:M,selectFirstOptionOnChange:G,onOptionSubmit:V,comboboxProps:Z,filter:$,limit:H,withScrollArea:j,maxDropdownHeight:K,searchValue:W,defaultSearchValue:q,onSearchChange:Y,readOnly:J,disabled:Q,splitChars:U,onFocus:X,onBlur:ee,onPaste:et,radius:en,rightSection:ea,rightSectionWidth:el,rightSectionPointerEvents:er,rightSectionProps:eo,leftSection:ei,leftSectionWidth:es,leftSectionPointerEvents:eu,leftSectionProps:ec,inputContainer:ep,inputWrapperOrder:ed,withAsterisk:em,required:ef,labelProps:ev,descriptionProps:eg,errorProps:eh,wrapperProps:eE,description:ey,label:eb,error:ew,withErrorStyles:eD,name:eC,form:eP,id:ek,clearable:eI,clearButtonProps:ex,hiddenInputProps:eS,hiddenInputValuesDivider:eN,mod:eT,...e_}=n,ez=(0,l.M)(ek),eA=(0,p.R)(R),eO=(0,d.g)(eA),eR=(0,v.K)({opened:B,defaultOpened:F,onDropdownOpen:L,onDropdownClose:()=>{M?.(),eR.resetSelectedOption()}}),{styleProps:eB,rest:{type:eF,...eL}}=(0,u.c)(e_),[eM,eG]=(0,r.C)({value:x,defaultValue:S,finalValue:[],onChange:N}),[eV,eZ]=(0,r.C)({value:W,defaultValue:q,finalValue:"",onChange:Y}),e$=(0,i.y)({name:"TagsInput",classes:{},props:n,classNames:c,styles:C,unstyled:P}),{resolvedClassNames:eH,resolvedStyles:ej}=(0,o.h)({props:n,styles:C,classNames:c}),eK=eM.map((e,t)=>a.createElement(h.D,{key:`${e}-${t}`,withRemoveButton:!J,onRemove:()=>eG(eM.filter(t=>e!==t)),unstyled:P,...e$("pill")},e)),eW=eI&&eM.length>0&&!Q&&!J&&a.createElement(m.h.ClearButton,{size:I,...ex,onClear:()=>{eG([]),eZ("")}});return a.createElement(a.Fragment,null,a.createElement(m.h,{store:eR,classNames:eH,styles:ej,unstyled:P,size:I,readOnly:J,__staticSelector:"TagsInput",onOptionSubmit:e=>{V?.(e),eZ(""),eM.length<_&&eG([...eM,eO[e].label])},...Z},a.createElement(m.h.DropdownTarget,null,a.createElement(E.d,{...eB,__staticSelector:"TagsInput",classNames:eH,styles:ej,unstyled:P,size:I,className:g,style:D,variant:O,disabled:Q,radius:en,rightSection:ea||eW,rightSectionWidth:el,rightSectionPointerEvents:er,rightSectionProps:eo,leftSection:ei,leftSectionWidth:es,leftSectionPointerEvents:eu,leftSectionProps:ec,inputContainer:ep,inputWrapperOrder:ed,withAsterisk:em,required:ef,labelProps:ev,descriptionProps:eg,errorProps:eh,wrapperProps:eE,description:ey,label:eb,error:ew,multiline:!0,withErrorStyles:eD,__stylesApiProps:{...n,multiline:!0},id:ez,mod:eT},a.createElement(h.D.Group,{disabled:Q,unstyled:P,...e$("pillsList")},eK,a.createElement(m.h.EventsTarget,null,a.createElement(E.d.Field,{...eL,ref:t,...e$("inputField"),unstyled:P,onKeyDown:e=>{T?.(e);let t=eV.trim(),{length:n}=t;if(U.includes(e.key)&&n>0&&(eG(b({splitChars:U,allowDuplicates:z,maxTags:_,value:eV,currentTags:eM})),eZ(""),e.preventDefault()),"Enter"===e.key&&n>0&&!e.nativeEvent.isComposing){e.preventDefault();let n=eM.some(e=>e.toLowerCase()===t.toLowerCase());n&&A?.(t),(!n||n&&z)&&eM.length<_&&(V?.(t),eZ(""),t.length>0&&eG([...eM,t]))}"Backspace"===e.key&&0===n&&eM.length>0&&eG(eM.slice(0,eM.length-1))},onFocus:e=>{X?.(e),eR.openDropdown()},onBlur:e=>{ee?.(e),eR.closeDropdown()},onPaste:e=>{if(et?.(e),e.preventDefault(),e.clipboardData){let t=e.clipboardData.getData("text/plain");eG(b({splitChars:U,allowDuplicates:z,maxTags:_,value:t,currentTags:eM})),eZ("")}},value:eV,onChange:e=>eZ(e.currentTarget.value),required:ef&&0===eM.length,disabled:Q,readOnly:J,id:ez}))))),a.createElement(f.r,{data:function({data:e,value:t}){let n=t.map(e=>e.trim().toLowerCase()),a=e.reduce((e,t)=>((0,y.f)(t)?e.push({group:t.group,items:t.items.filter(e=>-1===n.indexOf(e.label.toLowerCase().trim()))}):-1===n.indexOf(t.label.toLowerCase().trim())&&e.push(t),e),[]);return a}({data:eA,value:eM}),hidden:J||Q,filter:$,search:eV,limit:H,hiddenWhenEmpty:!0,withScrollArea:j,maxDropdownHeight:K,unstyled:P,labelId:`${ez}-label`})),a.createElement("input",{type:"hidden",name:eC,form:eP,value:eM.join(eN),disabled:Q,...eS}))});D.classes={...g.M.classes,...m.h.classes},D.displayName="@mantine/core/TagsInput"}}]); \ No newline at end of file diff --git a/_next/static/chunks/17932-6bda9e56d81df990.js b/_next/static/chunks/17932-cc2fc8a61a7637aa.js similarity index 84% rename from _next/static/chunks/17932-6bda9e56d81df990.js rename to _next/static/chunks/17932-cc2fc8a61a7637aa.js index 4b1f7949ca8..38399a66c60 100644 --- a/_next/static/chunks/17932-6bda9e56d81df990.js +++ b/_next/static/chunks/17932-cc2fc8a61a7637aa.js @@ -18,4 +18,4 @@ function Demo() { ); } -`,i={type:"code",component:function(){return o.createElement(n.l,{withIndicators:!0,height:200,slideSize:{base:"100%",sm:"50%",md:"33.333333%"},slideGap:{base:0,sm:"md"},loop:!0,align:"start"},o.createElement(a.M,{count:6}))},code:l}},39202:function(e,t,r){r.d(t,{M:function(){return s}});var o=r(27378),n=r(61871),a=r(56589),l=r(71078);function i({children:e}){return o.createElement(a.x,{style:{backgroundColor:"var(--mantine-color-blue-filled)",color:"var(--mantine-color-white)",height:"100%",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",fontSize:(0,l.h)(50),fontWeight:"bold"}},e)}function s({count:e}){let t=Array(e).fill(0).map((e,t)=>o.createElement(n.l.Slide,{key:t},o.createElement(i,null,t+1)));return o.createElement(o.Fragment,null,t)}},61871:function(e,t,r){r.d(t,{l:function(){return G}});var o=r(27378),n=r(60213),a=r(83453),l=r(71078),i=r(92082),s=r(20410),c=r(96739),d=r(6231),u=r(40593),m=r(49134),f=r(19397),p=r(56589),v=r(1189),g=r(28086),b=r(71656);let[h,y]=(0,b.R)("Carousel component was not found in tree");var C={root:"m-17884d0f",viewport:"m-a2dae653",container:"m-fcd81474",controls:"m-39bc3463",control:"m-64f58e10",indicators:"m-71ea3ab1",indicator:"m-eae68602",slide:"m-d98df724"};let E={},S=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:l,vars:i,mod:s,...d}=(0,c.w)("CarouselSlide",E,e),u=y();return o.createElement(p.x,{ref:t,mod:[{orientation:u.orientation},s],...u.getStyles("slide",{className:n,style:a,classNames:r,styles:l}),...d})});S.classes=C,S.displayName="@mantine/core/CarouselSlide";var w=r(2256),k=r(86689),x=r(75001),N=r(53007),z=r(31582),I=r(9889);function P({slideGap:e,slideSize:t,selector:r}){let n=(0,w.rZ)(),a=(0,k.L)({"--carousel-slide-gap":(0,i.bG)((0,x.v)(e)),"--carousel-slide-size":(0,l.h)((0,x.v)(t))}),s=(0,N.X)(n.breakpoints).reduce((r,o)=>(r[o]||(r[o]={}),"object"==typeof e&&void 0!==e[o]&&(r[o]["--carousel-slide-gap"]=(0,i.bG)(e[o])),"object"==typeof t&&void 0!==t[o]&&(r[o]["--carousel-slide-size"]=(0,i.bG)(t[o])),r),{}),c=(0,z.I)((0,N.X)(s),n).filter(e=>(0,N.X)(s[e.value]).length>0),d=c.map(e=>({query:`(min-width: ${n.breakpoints[e.value]})`,styles:s[e.value]}));return o.createElement(I.f,{styles:a,media:d,selector:r})}function L({dir:e,orientation:t,direction:r}){return"previous"===r?"horizontal"===t?90*("ltr"===e?1:-1):-180:"horizontal"===t?90*("ltr"===e?-1:1):0}let R={controlSize:26,controlsOffset:"sm",slideSize:"100%",slideGap:0,orientation:"horizontal",align:"center",slidesToScroll:1,includeGapInSize:!0,draggable:!0,dragFree:!1,loop:!1,speed:10,initialSlide:0,inViewThreshold:0,withControls:!0,withIndicators:!1,skipSnaps:!1,containScroll:"",withKeyboardEvents:!0},A=(0,a.Z)((e,{height:t,controlSize:r,controlsOffset:o})=>({root:{"--carousel-height":(0,l.h)(t),"--carousel-control-size":(0,l.h)(r),"--carousel-controls-offset":(0,i.bG)(o)}})),G=(0,s.d)((e,t)=>{let r=(0,c.w)("Carousel",R,e),{classNames:a,className:l,style:i,styles:s,unstyled:b,vars:y,children:E,getEmblaApi:S,onNextSlide:w,onPreviousSlide:k,onSlideChange:x,nextControlProps:N,previousControlProps:z,controlSize:I,controlsOffset:G,slideSize:Z,slideGap:$,orientation:_,height:j,align:D,slidesToScroll:M,includeGapInSize:Q,draggable:T,dragFree:X,loop:F,speed:H,initialSlide:K,inViewThreshold:q,withControls:B,withIndicators:O,plugins:V,nextControlIcon:W,previousControlIcon:J,skipSnaps:U,containScroll:Y,withKeyboardEvents:ee,mod:et,...er}=r,eo=(0,d.y)({name:"Carousel",classes:C,props:r,className:l,style:i,classNames:a,styles:s,unstyled:b,vars:y,varsResolver:A}),en=(0,u.m)(),{dir:ea}=(0,m.gm)(),[el,ei]=(0,n.Z)({axis:"horizontal"===_?"x":"y",direction:"horizontal"===_?ea:void 0,startIndex:K,loop:F,align:D,slidesToScroll:M,draggable:T,dragFree:X,speed:H,inViewThreshold:q,skipSnaps:U,containScroll:Y},V),[es,ec]=(0,o.useState)(0),[ed,eu]=(0,o.useState)(0),em=(0,o.useCallback)(e=>ei&&ei.scrollTo(e),[ei]),ef=(0,o.useCallback)(()=>{if(!ei)return;let e=ei.selectedScrollSnap();ec(e),x?.(e)},[ei,ec]),ep=(0,o.useCallback)(()=>{ei?.scrollPrev(),k?.()},[ei]),ev=(0,o.useCallback)(()=>{ei?.scrollNext(),w?.()},[ei]),eg=(0,o.useCallback)(e=>{ee&&("ArrowRight"===e.key&&(e.preventDefault(),ev()),"ArrowLeft"===e.key&&(e.preventDefault(),ep()))},[ei]);(0,o.useEffect)(()=>{if(ei)return S?.(ei),ef(),eu(ei.scrollSnapList().length),ei.on("select",ef),()=>{ei.off("select",ef)}},[ei,M]),(0,o.useEffect)(()=>{ei&&(ei.reInit(),eu(ei.scrollSnapList().length),ec(e=>(0,g.u)(e,0,o.Children.toArray(E).length-1)))},[o.Children.toArray(E).length,M]);let eb=ei?.canScrollPrev()||!1,eh=ei?.canScrollNext()||!1,ey=Array(ed).fill(0).map((e,t)=>o.createElement(f.k,{...eo("indicator"),key:t,"data-active":t===es||void 0,"aria-hidden":!0,tabIndex:-1,onClick:()=>em(t)}));return o.createElement(h,{value:{getStyles:eo,orientation:_}},o.createElement(P,{...r,selector:`.${en}`}),o.createElement(p.x,{ref:t,...eo("root",{className:en}),...er,mod:[{orientation:_,"include-gap-in-size":Q},et],onKeyDownCapture:eg},o.createElement("div",{...eo("viewport"),ref:el},o.createElement("div",{...eo("container"),"data-orientation":_},E)),O&&o.createElement("div",{...eo("indicators")},ey),B&&o.createElement("div",{...eo("controls")},o.createElement(f.k,{...z,...eo("control",{className:z?.className,style:z?.style}),onClick:e=>{ep(),z?.onClick?.(e)},"data-inactive":!eb||void 0,tabIndex:eb?0:-1},void 0!==J?J:o.createElement(v.Q,{style:{transform:`rotate(${L({dir:ea,orientation:_,direction:"previous"})}deg)`}})),o.createElement(f.k,{...eo("control",{className:N?.className,style:N?.style}),...N,onClick:e=>{ev(),N?.onClick?.(e)},"data-inactive":!eh||void 0,tabIndex:eh?0:-1},void 0!==W?W:o.createElement(v.Q,{style:{transform:`rotate(${L({dir:ea,orientation:_,direction:"next"})}deg)`}})))))});G.classes=C,G.displayName="@mantine/core/Carousel",G.Slide=S},1189:function(e,t,r){r.d(t,{Q:function(){return a}});var o=r(27378),n=r(71078);function a({style:e,size:t=16,...r}){return o.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{...e,width:(0,n.h)(t),height:(0,n.h)(t),display:"block"},...r},o.createElement("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}a.displayName="@mantine/core/AccordionChevron"},58818:function(e,t,r){r.d(t,{E:function(){return Image}});var o=r(27378),n=r(92082),a=r(83453),l=r(96739),i=r(6231),s=r(56589),c=r(50332),d={root:"m-9e117634"};let u={},m=(0,a.Z)((e,{radius:t,fit:r})=>({root:{"--image-radius":void 0===t?void 0:(0,n.H5)(t),"--image-object-fit":r}})),Image=(0,c.b)((e,t)=>{let r=(0,l.w)("Image",u,e),{classNames:n,className:a,style:c,styles:f,unstyled:p,vars:v,onError:g,src:b,radius:h,fit:y,fallbackSrc:C,mod:E,...S}=r,[w,k]=(0,o.useState)(!b);(0,o.useEffect)(()=>k(!b),[b]);let x=(0,i.y)({name:"Image",classes:d,props:r,className:a,style:c,classNames:n,styles:f,unstyled:p,vars:v,varsResolver:m});return w&&C?o.createElement(s.x,{component:"img",src:C,...x("root"),onError:g,mod:["fallback",E],...S}):o.createElement(s.x,{component:"img",ref:t,...x("root"),src:b,onError:e=>{g?.(e),k(!0)},mod:E,...S})});Image.classes=d,Image.displayName="@mantine/core/Image"},30454:function(e,t,r){r.d(t,{E:function(){return N}});var o=r(27378),n=r(5564),a=r(96739),l=r(20410),i=r(56589),s=r(71656);let[c,d]=(0,s.R)("Progress.Root component was not found in tree");var u={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let m={},f=(0,l.d)((e,t)=>{let{classNames:r,className:n,style:l,styles:s,vars:c,...u}=(0,a.w)("ProgressLabel",m,e),f=d();return o.createElement(i.x,{ref:t,...f.getStyles("label",{className:n,style:l,classNames:r,styles:s}),...u})});f.classes=u,f.displayName="@mantine/core/ProgressLabel";var p=r(92082),v=r(83453),g=r(6231);let b={},h=(0,v.Z)((e,{size:t,radius:r,transitionDuration:o})=>({root:{"--progress-size":(0,p.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,p.H5)(r),"--progress-transition-duration":"number"==typeof o?`${o}ms`:void 0}})),y=(0,l.d)((e,t)=>{let r=(0,a.w)("ProgressRoot",b,e),{classNames:n,className:l,style:s,styles:d,unstyled:m,vars:f,autoContrast:p,transitionDuration:v,...y}=r,C=(0,g.y)({name:"Progress",classes:u,props:r,className:l,style:s,classNames:n,styles:d,unstyled:m,vars:f,varsResolver:h});return o.createElement(c,{value:{getStyles:C,autoContrast:p}},o.createElement(i.x,{ref:t,...C("root"),...y}))});y.classes=u,y.displayName="@mantine/core/ProgressRoot";var C=r(89738),E=r(34121),S=r(2256);let w={withAria:!0},k=(0,l.d)((e,t)=>{let{classNames:r,className:n,style:l,styles:s,vars:c,value:u,withAria:m,color:f,striped:p,animated:v,mod:g,...b}=(0,a.w)("ProgressSection",w,e),h=d(),y=(0,S.rZ)(),k=m?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":u,"aria-valuetext":`${u}%`}:{};return o.createElement(i.x,{ref:t,...h.getStyles("section",{className:n,classNames:r,styles:s,style:l}),...b,...k,mod:[{striped:p||v,animated:v},g],__vars:{"--progress-section-width":`${u}%`,"--progress-section-color":(0,C.p)(f,y),"--progress-label-color":h.autoContrast?(0,E.R)({color:f,theme:y}):void 0}})});k.classes=u,k.displayName="@mantine/core/ProgressSection";let x={},N=(0,l.d)((e,t)=>{let r=(0,a.w)("Progress",x,e),{value:l,classNames:i,styles:s,vars:c,color:d,striped:u,animated:m,"aria-label":f,...p}=r,{resolvedClassNames:v,resolvedStyles:g}=(0,n.h)({classNames:i,styles:s,props:r});return o.createElement(y,{ref:t,classNames:v,styles:g,vars:c,...p},o.createElement(k,{value:l,color:d,striped:u,animated:m,"aria-label":f}))});N.classes=u,N.displayName="@mantine/core/Progress",N.Section=k,N.Root=y,N.Label=f},75001:function(e,t,r){r.d(t,{v:function(){return o}});function o(e){return"object"==typeof e&&null!==e?"base"in e?e.base:void 0:e}},10874:function(e,t,r){r.d(t,{o:function(){return n}});var o=r(27589);function n(e,t){return e in t.breakpoints?(0,o.px)(t.breakpoints[e]):(0,o.px)(e)}},31582:function(e,t,r){r.d(t,{I:function(){return n}});var o=r(10874);function n(e,t){let r=e.map(e=>({value:e,px:(0,o.o)(e,t)}));return r.sort((e,t)=>e.px-t.px),r}}}]); \ No newline at end of file +`,i={type:"code",component:function(){return o.createElement(n.l,{withIndicators:!0,height:200,slideSize:{base:"100%",sm:"50%",md:"33.333333%"},slideGap:{base:0,sm:"md"},loop:!0,align:"start"},o.createElement(a.M,{count:6}))},code:l}},39202:function(e,t,r){r.d(t,{M:function(){return s}});var o=r(27378),n=r(61871),a=r(56589),l=r(71078);function i({children:e}){return o.createElement(a.x,{style:{backgroundColor:"var(--mantine-color-blue-filled)",color:"var(--mantine-color-white)",height:"100%",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",fontSize:(0,l.h)(50),fontWeight:"bold"}},e)}function s({count:e}){let t=Array(e).fill(0).map((e,t)=>o.createElement(n.l.Slide,{key:t},o.createElement(i,null,t+1)));return o.createElement(o.Fragment,null,t)}},61871:function(e,t,r){r.d(t,{l:function(){return G}});var o=r(27378),n=r(60213),a=r(83453),l=r(71078),i=r(92082),s=r(20410),c=r(96739),d=r(6231),u=r(40593),m=r(49134),f=r(19397),p=r(56589),v=r(1189),g=r(28086),b=r(71656);let[h,y]=(0,b.R)("Carousel component was not found in tree");var C={root:"m-17884d0f",viewport:"m-a2dae653",container:"m-fcd81474",controls:"m-39bc3463",control:"m-64f58e10",indicators:"m-71ea3ab1",indicator:"m-eae68602",slide:"m-d98df724"};let E={},S=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:l,vars:i,mod:s,...d}=(0,c.w)("CarouselSlide",E,e),u=y();return o.createElement(p.x,{ref:t,mod:[{orientation:u.orientation},s],...u.getStyles("slide",{className:n,style:a,classNames:r,styles:l}),...d})});S.classes=C,S.displayName="@mantine/core/CarouselSlide";var w=r(2256),k=r(86689),x=r(75001),N=r(53007),z=r(31582),I=r(9889);function P({slideGap:e,slideSize:t,selector:r}){let n=(0,w.rZ)(),a=(0,k.L)({"--carousel-slide-gap":(0,i.bG)((0,x.v)(e)),"--carousel-slide-size":(0,l.h)((0,x.v)(t))}),s=(0,N.X)(n.breakpoints).reduce((r,o)=>(r[o]||(r[o]={}),"object"==typeof e&&void 0!==e[o]&&(r[o]["--carousel-slide-gap"]=(0,i.bG)(e[o])),"object"==typeof t&&void 0!==t[o]&&(r[o]["--carousel-slide-size"]=(0,i.bG)(t[o])),r),{}),c=(0,z.I)((0,N.X)(s),n).filter(e=>(0,N.X)(s[e.value]).length>0),d=c.map(e=>({query:`(min-width: ${n.breakpoints[e.value]})`,styles:s[e.value]}));return o.createElement(I.f,{styles:a,media:d,selector:r})}function L({dir:e,orientation:t,direction:r}){return"previous"===r?"horizontal"===t?90*("ltr"===e?1:-1):-180:"horizontal"===t?90*("ltr"===e?-1:1):0}let R={controlSize:26,controlsOffset:"sm",slideSize:"100%",slideGap:0,orientation:"horizontal",align:"center",slidesToScroll:1,includeGapInSize:!0,draggable:!0,dragFree:!1,loop:!1,speed:10,initialSlide:0,inViewThreshold:0,withControls:!0,withIndicators:!1,skipSnaps:!1,containScroll:"",withKeyboardEvents:!0},A=(0,a.Z)((e,{height:t,controlSize:r,controlsOffset:o})=>({root:{"--carousel-height":(0,l.h)(t),"--carousel-control-size":(0,l.h)(r),"--carousel-controls-offset":(0,i.bG)(o)}})),G=(0,s.d)((e,t)=>{let r=(0,c.w)("Carousel",R,e),{classNames:a,className:l,style:i,styles:s,unstyled:b,vars:y,children:E,getEmblaApi:S,onNextSlide:w,onPreviousSlide:k,onSlideChange:x,nextControlProps:N,previousControlProps:z,controlSize:I,controlsOffset:G,slideSize:Z,slideGap:$,orientation:_,height:j,align:D,slidesToScroll:M,includeGapInSize:Q,draggable:T,dragFree:X,loop:F,speed:H,initialSlide:K,inViewThreshold:q,withControls:B,withIndicators:O,plugins:V,nextControlIcon:W,previousControlIcon:J,skipSnaps:U,containScroll:Y,withKeyboardEvents:ee,mod:et,...er}=r,eo=(0,d.y)({name:"Carousel",classes:C,props:r,className:l,style:i,classNames:a,styles:s,unstyled:b,vars:y,varsResolver:A}),en=(0,u.m)(),{dir:ea}=(0,m.gm)(),[el,ei]=(0,n.Z)({axis:"horizontal"===_?"x":"y",direction:"horizontal"===_?ea:void 0,startIndex:K,loop:F,align:D,slidesToScroll:M,draggable:T,dragFree:X,speed:H,inViewThreshold:q,skipSnaps:U,containScroll:Y},V),[es,ec]=(0,o.useState)(0),[ed,eu]=(0,o.useState)(0),em=(0,o.useCallback)(e=>ei&&ei.scrollTo(e),[ei]),ef=(0,o.useCallback)(()=>{if(!ei)return;let e=ei.selectedScrollSnap();ec(e),x?.(e)},[ei,ec]),ep=(0,o.useCallback)(()=>{ei?.scrollPrev(),k?.()},[ei]),ev=(0,o.useCallback)(()=>{ei?.scrollNext(),w?.()},[ei]),eg=(0,o.useCallback)(e=>{ee&&("ArrowRight"===e.key&&(e.preventDefault(),ev()),"ArrowLeft"===e.key&&(e.preventDefault(),ep()))},[ei]);(0,o.useEffect)(()=>{if(ei)return S?.(ei),ef(),eu(ei.scrollSnapList().length),ei.on("select",ef),()=>{ei.off("select",ef)}},[ei,M]),(0,o.useEffect)(()=>{ei&&(ei.reInit(),eu(ei.scrollSnapList().length),ec(e=>(0,g.u)(e,0,o.Children.toArray(E).length-1)))},[o.Children.toArray(E).length,M]);let eb=ei?.canScrollPrev()||!1,eh=ei?.canScrollNext()||!1,ey=Array(ed).fill(0).map((e,t)=>o.createElement(f.k,{...eo("indicator"),key:t,"data-active":t===es||void 0,"aria-hidden":!0,tabIndex:-1,onClick:()=>em(t)}));return o.createElement(h,{value:{getStyles:eo,orientation:_}},o.createElement(P,{...r,selector:`.${en}`}),o.createElement(p.x,{ref:t,...eo("root",{className:en}),...er,mod:[{orientation:_,"include-gap-in-size":Q},et],onKeyDownCapture:eg},o.createElement("div",{...eo("viewport"),ref:el},o.createElement("div",{...eo("container"),"data-orientation":_},E)),O&&o.createElement("div",{...eo("indicators")},ey),B&&o.createElement("div",{...eo("controls")},o.createElement(f.k,{...z,...eo("control",{className:z?.className,style:z?.style}),onClick:e=>{ep(),z?.onClick?.(e)},"data-inactive":!eb||void 0,tabIndex:eb?0:-1},void 0!==J?J:o.createElement(v.Q,{style:{transform:`rotate(${L({dir:ea,orientation:_,direction:"previous"})}deg)`}})),o.createElement(f.k,{...eo("control",{className:N?.className,style:N?.style}),...N,onClick:e=>{ev(),N?.onClick?.(e)},"data-inactive":!eh||void 0,tabIndex:eh?0:-1},void 0!==W?W:o.createElement(v.Q,{style:{transform:`rotate(${L({dir:ea,orientation:_,direction:"next"})}deg)`}})))))});G.classes=C,G.displayName="@mantine/core/Carousel",G.Slide=S},1189:function(e,t,r){r.d(t,{Q:function(){return a}});var o=r(27378),n=r(71078);function a({style:e,size:t=16,...r}){return o.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{...e,width:(0,n.h)(t),height:(0,n.h)(t),display:"block"},...r},o.createElement("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}a.displayName="@mantine/core/AccordionChevron"},58818:function(e,t,r){r.d(t,{E:function(){return Image}});var o=r(27378),n=r(92082),a=r(83453),l=r(96739),i=r(6231),s=r(56589),c=r(50332),d={root:"m-9e117634"};let u={},m=(0,a.Z)((e,{radius:t,fit:r})=>({root:{"--image-radius":void 0===t?void 0:(0,n.H5)(t),"--image-object-fit":r}})),Image=(0,c.b)((e,t)=>{let r=(0,l.w)("Image",u,e),{classNames:n,className:a,style:c,styles:f,unstyled:p,vars:v,onError:g,src:b,radius:h,fit:y,fallbackSrc:C,mod:E,...S}=r,[w,k]=(0,o.useState)(!b);(0,o.useEffect)(()=>k(!b),[b]);let x=(0,i.y)({name:"Image",classes:d,props:r,className:a,style:c,classNames:n,styles:f,unstyled:p,vars:v,varsResolver:m});return w&&C?o.createElement(s.x,{component:"img",src:C,...x("root"),onError:g,mod:["fallback",E],...S}):o.createElement(s.x,{component:"img",ref:t,...x("root"),src:b,onError:e=>{g?.(e),k(!0)},mod:E,...S})});Image.classes=d,Image.displayName="@mantine/core/Image"},30454:function(e,t,r){r.d(t,{E:function(){return z}});var o=r(27378),n=r(5564),a=r(96739),l=r(20410),i=r(56589),s=r(71656);let[c,d]=(0,s.R)("Progress.Root component was not found in tree");var u={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let m={},f=(0,l.d)((e,t)=>{let{classNames:r,className:n,style:l,styles:s,vars:c,...u}=(0,a.w)("ProgressLabel",m,e),f=d();return o.createElement(i.x,{ref:t,...f.getStyles("label",{className:n,style:l,classNames:r,styles:s}),...u})});f.classes=u,f.displayName="@mantine/core/ProgressLabel";var p=r(92082),v=r(83453),g=r(6231);let b={},h=(0,v.Z)((e,{size:t,radius:r,transitionDuration:o})=>({root:{"--progress-size":(0,p.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,p.H5)(r),"--progress-transition-duration":"number"==typeof o?`${o}ms`:void 0}})),y=(0,l.d)((e,t)=>{let r=(0,a.w)("ProgressRoot",b,e),{classNames:n,className:l,style:s,styles:d,unstyled:m,vars:f,autoContrast:p,transitionDuration:v,...y}=r,C=(0,g.y)({name:"Progress",classes:u,props:r,className:l,style:s,classNames:n,styles:d,unstyled:m,vars:f,varsResolver:h});return o.createElement(c,{value:{getStyles:C,autoContrast:p}},o.createElement(i.x,{ref:t,...C("root"),...y}))});y.classes=u,y.displayName="@mantine/core/ProgressRoot";var C=r(89738),E=r(34121),S=r(55357),w=r(2256);let k={withAria:!0},x=(0,l.d)((e,t)=>{let{classNames:r,className:n,style:l,styles:s,vars:c,value:u,withAria:m,color:f,striped:p,animated:v,mod:g,...b}=(0,a.w)("ProgressSection",k,e),h=d(),y=(0,w.rZ)(),x=m?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":u,"aria-valuetext":`${u}%`}:{};return o.createElement(i.x,{ref:t,...h.getStyles("section",{className:n,classNames:r,styles:s,style:l}),...b,...x,mod:[{striped:p||v,animated:v},g],__vars:{"--progress-section-width":`${u}%`,"--progress-section-color":(0,C.p)(f,y),"--progress-label-color":(0,S.o)(h.autoContrast,y)?(0,E.R)({color:f,theme:y}):void 0}})});x.classes=u,x.displayName="@mantine/core/ProgressSection";let N={},z=(0,l.d)((e,t)=>{let r=(0,a.w)("Progress",N,e),{value:l,classNames:i,styles:s,vars:c,color:d,striped:u,animated:m,"aria-label":f,...p}=r,{resolvedClassNames:v,resolvedStyles:g}=(0,n.h)({classNames:i,styles:s,props:r});return o.createElement(y,{ref:t,classNames:v,styles:g,vars:c,...p},o.createElement(x,{value:l,color:d,striped:u,animated:m,"aria-label":f}))});z.classes=u,z.displayName="@mantine/core/Progress",z.Section=x,z.Root=y,z.Label=f},75001:function(e,t,r){r.d(t,{v:function(){return o}});function o(e){return"object"==typeof e&&null!==e?"base"in e?e.base:void 0:e}},10874:function(e,t,r){r.d(t,{o:function(){return n}});var o=r(27589);function n(e,t){return e in t.breakpoints?(0,o.px)(t.breakpoints[e]):(0,o.px)(e)}},31582:function(e,t,r){r.d(t,{I:function(){return n}});var o=r(10874);function n(e,t){let r=e.map(e=>({value:e,px:(0,o.o)(e,t)}));return r.sort((e,t)=>e.px-t.px),r}}}]); \ No newline at end of file diff --git a/_next/static/chunks/2775-2ea0f641793ea829.js b/_next/static/chunks/2775-325f81d8102d098b.js similarity index 88% rename from _next/static/chunks/2775-2ea0f641793ea829.js rename to _next/static/chunks/2775-325f81d8102d098b.js index dcac30f516e..9b6d469316e 100644 --- a/_next/static/chunks/2775-2ea0f641793ea829.js +++ b/_next/static/chunks/2775-325f81d8102d098b.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2775],{89114:function(e,t,o){"use strict";o.d(t,{O:function(){return r}});var n=o(24246);o(27378);var Text=o(26569);function r(e){let{children:t,...o}=e;return(0,n.jsx)(Text.x,{component:"span","data-docs-inline-code":!0,dangerouslySetInnerHTML:{__html:t.replace(/`([^`]+)`/g,"$1").replace(/!important!/g,"Important")},fz:"sm",...o})}},3916:function(e,t,o){"use strict";o.d(t,{A:function(){return ep}});var n=o(24246),r=o(27378),a=o(91699),i=o(942),d=o(90878),s=o(49258),l=o(56589),c=o(57847),Text=o(26569),p=o(71078),u=o(56695),m=o(53781),f=o(37127),h=o(99684),y=o(19397),b=o(1674),v=o(73133),g=o(40624),w=o(1535),q=o.n(w);function C(e){let{label:t,children:o,className:r}=e;return(0,n.jsxs)("div",{className:(0,g.Z)(q().item,r),children:[(0,n.jsx)(Text.x,{className:q().label,fz:"sm",children:t}),o]})}var S=o(90576),P=o.n(S);function D(e){let{code:t}=e,o=(0,b.V)(),r=(0,v.a)("(max-width: ".concat((0,p.em)(500),")"));return(0,n.jsx)(C,{label:"Import",className:P().wrapper,children:(0,n.jsx)(h.u,{label:o.copied?"Copied":"Copy code",position:"right",offset:10,disabled:r,children:(0,n.jsx)(y.k,{className:P().copy,type:"button",onClick:()=>o.copy(t),children:(0,n.jsx)(f._,{className:P().code,language:"tsx",styles:{code:{padding:0,margin:0}},code:t})})})})}var R=o(79894),x=o.n(R),k=o(9136),I=o(85008),z=o.n(I);function M(e){let{label:t,icon:o,children:r,link:a}=e;return(0,n.jsx)(C,{label:t,children:(0,n.jsx)("div",{className:z().wrapper,children:(0,n.jsxs)(k.e,{component:a.startsWith("/")?x():"a",className:z().link,href:a,fz:"sm",children:[(0,n.jsx)("div",{className:z().icon,children:o}),r]})})})}var L=o(11258),A=o.n(L);let N="https://github.com/mantinedev/mantine/blob/master",O="".concat(N,"/docs/src/pages"),T="".concat(N,"/packages");function E(e){let{meta:t}=e,o=Array.isArray(t.props),r=!!(t.import||t.source),f=!!t.title;return!t.hideHeader&&(r||o||t.release||f)?(0,n.jsx)("div",{className:A().wrapper,children:(0,n.jsxs)(l.x,{className:A().header,mod:{"with-tabs":o},children:[(0,n.jsx)(c.D,{className:A().title,children:t.title}),(0,n.jsx)(Text.x,{className:A().description,children:t.description}),t.import&&(0,n.jsx)(D,{code:t.import}),t.polymorphic&&(0,n.jsx)(M,{label:"Polymorphic",icon:(0,n.jsx)(a.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:"/guides/polymorphic",children:"Polymorphic component"}),t.source&&(0,n.jsx)(M,{label:"Source",icon:(0,n.jsx)(u.E,{size:14}),link:"".concat(T,"/").concat(t.source),children:"View source code"}),t.date&&t.release&&(0,n.jsx)(M,{label:"Release date",icon:(0,n.jsx)(i.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:t.release,children:t.date}),t.release&&(0,n.jsx)(M,{label:"Source code",icon:(0,n.jsx)(u.E,{size:14}),link:t.release,children:"Release on GitHub"}),t.docs&&(0,n.jsx)(M,{label:"Docs",icon:(0,n.jsx)(d.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:"".concat(O,"/").concat(t.docs),children:"Edit this page"}),t.package&&(0,n.jsx)(M,{label:"Package",icon:(0,n.jsx)(m._,{size:14}),link:"https://www.npmjs.com/package/".concat(t.package),children:t.package}),t.license&&(0,n.jsx)(M,{label:"License",icon:(0,n.jsx)(s.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:"https://github.com/mantinedev/mantine/blob/master/LICENSE",children:"MIT"})]})}):null}var F=o(87393),W=o(4687),j=o(29995),Y=o(54568),B=o(73279),K=o.n(B);function V(e){let{meta:t}=e,{next:o,prev:r}=function(e){let t=Y.YU.findIndex(t=>t.slug===e),o=Y.YU[t-1],n=Y.YU[t+1];return{prev:o,next:n}}(t.slug);return t.hideSiblings?null:(0,n.jsxs)("div",{className:K().root,children:[r&&(0,n.jsxs)(x(),{href:r.slug,className:(0,g.Z)(K().link,j.C.auto),children:[(0,n.jsx)(F.Z,{stroke:1.5,className:K().icon}),(0,n.jsxs)(l.x,{mod:"prev",className:K().body,children:[(0,n.jsx)(Text.x,{className:K().title,children:"Previous"}),(0,n.jsx)(Text.x,{c:"dimmed",className:K().description,children:r.title})]})]}),o&&(0,n.jsxs)(x(),{href:o.slug,className:(0,g.Z)(K().link,j.C.auto),children:[(0,n.jsxs)(l.x,{mod:"next",className:K().body,children:[(0,n.jsx)(Text.x,{className:K().title,children:"Next"}),(0,n.jsx)(Text.x,{c:"dimmed",className:K().description,children:o.title})]}),(0,n.jsx)(W.Z,{stroke:1.5,className:K().icon})]})]})}var _=o(25179),H=o(86677),G=o(47261),U=o(49849),X=o(19787),Z=o.n(X);function J(e){if(0===e.length)return -1;let t=e.reduce((e,t,o)=>Math.abs(e.position)e.depth>1),m=()=>{a(J(s.current.map(e=>e.getNode().getBoundingClientRect())))};if((0,r.useEffect)(()=>{let e=function(){let e=document.getElementById("mdx");return e?function(e){let t=[];for(let o=0;odocument.getElementById(n.id)})}return t}(Array.from(e.querySelectorAll("[data-heading]"))):[]}();return s.current=e,d(e),a(J(e.map(e=>e.getNode().getBoundingClientRect()))),window.addEventListener("scroll",m),()=>window.removeEventListener("scroll",m)},[]),0===u.length)return null;let f=u.map((e,t)=>(0,n.jsx)(Text.x,{component:"a",fz:"sm",className:Z().link,mod:{active:o===t},href:"#".concat(e.id),__vars:{"--toc-link-offset":"".concat(e.depth-1)},onClick:t=>{t.preventDefault(),c.replace("".concat(c.pathname,"#").concat(e.id))},children:e.content},e.id));return(0,n.jsx)(l.x,{component:"nav",mod:{"with-tabs":t},className:Z().wrapper,children:(0,n.jsx)("div",{className:Z().inner,children:(0,n.jsxs)("div",{children:[(0,n.jsxs)("div",{className:Z().header,children:[(0,n.jsx)(G.Z,{style:{width:(0,p.h)(20),height:(0,p.h)(20)},stroke:1.5}),(0,n.jsx)(Text.x,{className:Z().title,children:"Table of contents"})]}),(0,n.jsx)(U.x.Autosize,{mah:"calc(100vh - ".concat((0,p.h)(140),")"),type:"never",offsetScrollbars:!0,children:(0,n.jsx)("div",{className:Z().items,children:f})})]})})})}var $=o(81026),ee=o.n($);function et(e){let{children:t,meta:o}=e;return(0,n.jsx)(_._,{children:(0,n.jsxs)("div",{className:ee().wrapper,children:[(0,n.jsxs)("div",{className:ee().container,children:[t,(0,n.jsx)(V,{meta:o})]}),(0,n.jsx)("div",{className:ee().tableOfContents,children:(0,n.jsx)(Q,{withTabs:!1})})]})})}var eo=o(83601),en=o(40184),er=o(1103),ea=o(69684),ei=o.n(ea);function ed(e){let{children:t,meta:o}=e,a=(0,H.useRouter)(),[i,d]=(0,r.useState)("docs"),s=Array.isArray(o.props),l=Array.isArray(o.styles);return((0,r.useEffect)(()=>{d(window.location.search.replace("?t=","")||"docs")},[]),s||l)?(0,n.jsx)(_._,{children:(0,n.jsxs)(eo.m,{variant:"outline",value:i,classNames:{list:ei().tabsList,tab:ei().tab},keepMounted:!1,radius:"md",onChange:e=>{a.replace("docs"===e?a.pathname:"".concat(a.pathname,"?t=").concat(e)),d(e)},children:[(0,n.jsx)("div",{className:ei().tabsWrapper,children:(0,n.jsxs)(eo.m.List,{children:[(0,n.jsx)(eo.m.Tab,{value:"docs",children:"Documentation"}),s&&(0,n.jsx)(eo.m.Tab,{value:"props",children:"Props"}),l&&(0,n.jsx)(eo.m.Tab,{value:"styles-api",children:"Styles API"})]})}),(0,n.jsx)(eo.m.Panel,{value:"docs",children:(0,n.jsxs)("div",{className:ei().tabContent,style:{display:"flex",position:"relative",justifyContent:"space-between"},children:[(0,n.jsxs)("div",{className:ei().main,children:[t,(0,n.jsx)(V,{meta:o})]}),(0,n.jsx)("div",{className:ei().tableOfContents,children:(0,n.jsx)(Q,{withTabs:!0})})]})}),(0,n.jsx)(eo.m.Panel,{value:"props",children:(0,n.jsx)("div",{style:{maxWidth:(0,p.h)(1178),marginLeft:"auto",marginRight:"auto",marginTop:(0,p.h)(24)},className:ei().tabContent,children:(0,n.jsx)(en.ek,{components:o.props,componentPrefix:o.componentPrefix})})}),(0,n.jsx)(eo.m.Panel,{value:"styles-api",children:(0,n.jsx)("div",{style:{maxWidth:(0,p.h)(1178),marginLeft:"auto",marginRight:"auto",marginTop:(0,p.h)(24)},className:ei().tabContent,children:(0,n.jsx)(er.D5,{components:o.styles,componentPrefix:o.componentPrefix})})})]})}):null}function es(e){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(E,{...e}),Array.isArray(e.meta.props)?(0,n.jsx)(ed,{...e}):(0,n.jsx)(et,{...e})]})}var el=o(93046);function ec(e){let{meta:t,children:o}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(el.y,{title:t.title,description:t.description}),(0,n.jsx)(es,{meta:t,children:o})]})}function ep(e){return t=>{let{children:o}=t;return(0,n.jsx)(ec,{meta:e,children:o})}}},25179:function(e,t,o){"use strict";o.d(t,{_:function(){return d}});var n=o(24246);o(27378);var r=o(71611),a=o(21400),i=o.n(a);function d(e){let{children:t}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:i().content,children:t}),(0,n.jsx)(r.$,{withNavbar:!0})]})}},93046:function(e,t,o){"use strict";o.d(t,{y:function(){return i}});var n=o(24246);o(27378);var r=o(88038),a=o.n(r);function i(e){let{title:t,description:o}=e,r=t?"".concat(t," | Mantine"):"Mantine",i=o||"React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience";return(0,n.jsxs)(a(),{children:[(0,n.jsx)("title",{children:r}),(0,n.jsx)("meta",{name:"description",content:i}),(0,n.jsx)("meta",{name:"og:title",content:r}),(0,n.jsx)("meta",{name:"og:description",content:i}),(0,n.jsx)("meta",{name:"twitter:title",content:r}),(0,n.jsx)("meta",{name:"twitter:description",content:i})]})}},40184:function(e,t,o){"use strict";o.d(t,{ek:function(){return w},iY:function(){return b}});var n=o(24246),r=o(27378),a=o(28862),i=o(26853),Text=o(26569),d=JSON.parse('{"Accordion":{"props":{"chevron":{"description":"Custom chevron icon that will be used in all items","name":"chevron","required":false,"type":{"name":"React.ReactNode"}},"chevronPosition":{"description":"Position of the chevron relative to the item label, right by default","name":"chevronPosition","required":false,"type":{"name":"AccordionChevronPosition","raw":"AccordionChevronPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"chevronSize":{"description":"Size of the chevron icon container, 24 by default","name":"chevronSize","required":false,"type":{"name":"string | number"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string | string[] | null"}},"disableChevronRotation":{"description":"Determines whether chevron rotation should be disabled, false by default","name":"disableChevronRotation","required":false,"type":{"name":"boolean"}},"loop":{"description":"Determines whether arrow key presses should loop though items (first to last and last to first), true by default","name":"loop","required":false,"type":{"name":"boolean"}},"multiple":{"description":"Determines whether multiple items can be opened at a time, false by default","name":"multiple","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: AccordionValue) => void)"}},"order":{"description":"Heading order, has no effect on visuals","name":"order","required":false,"type":{"name":"AccordionHeadingOrder","raw":"AccordionHeadingOrder | undefined","value":[{"value":"undefined"},{"value":"2"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"transitionDuration":{"description":"Transition duration in ms, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"string | string[] | null"}}}},"Accordion.Item":{"props":{"value":{"description":"Value that is used to manage accordion state","name":"value","required":true,"type":{"name":"string"}}}},"Accordion.Panel":{"description":"","props":{}},"Accordion.Control":{"props":{"chevron":{"description":"Custom chevron icon","name":"chevron","required":false,"type":{"name":"React.ReactNode"}},"children":{"description":"Control label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Disables control button","name":"disabled","required":false,"type":{"name":"boolean"}},"icon":{"description":"Icon displayed next to the label","name":"icon","required":false,"type":{"name":"React.ReactNode"}}}},"Accordion.Chevron":{"props":{"size":{"description":"Controls width and height of the icon, 16 by default","name":"size","required":false,"type":{"name":"string | number"}}}},"ActionIcon":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Icon displayed inside the button","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color. Default value is theme.primaryColor.","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Sets disabled and data-disabled attributes on the button element","name":"disabled","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Gradient data used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"loaderProps":{"description":"Props added to the Loader component (only visible when loading prop is set)","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether Loader component should be displayed instead of the children, false by default","name":"loading","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the button. Numbers are converted to rem. \'md\' by default.","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Affix":{"props":{"portalProps":{"description":"Props to pass down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Affix position on screen, defaults value is { bottom: 0, right: 0 }","name":"position","required":false,"type":{"name":"{ top?: string | number; left?: string | number | undefined; bottom?: string | number | undefined; right?: string | number | undefined; } | undefined"}},"withinPortal":{"description":"Determines whether component should be rendered within portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Root element z-index property, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Alert":{"props":{"autoContrast":{"description":"Determines whether text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"closeButtonLabel":{"description":"Close button aria-label","name":"closeButtonLabel","required":false,"type":{"name":"string"}},"color":{"description":"Key of theme.colors or any valid CSS color, default value is theme.primaryColor","name":"color","required":false,"type":{"name":"MantineColor"}},"icon":{"description":"Icon displayed next to the title","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"onClose":{"description":"Called when the close button is clicked","name":"onClose","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"title":{"description":"Alert title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"withCloseButton":{"description":"Determines whether close button should be displayed, false by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}}}},"Anchor":{"props":{"color":{"description":"@deprecated Use c prop instead","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient configuration, ignored when variant is not gradient, theme.defaultGradient by default","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"inherit":{"description":"Determines whether font properties should be inherited from the parent, false by default","name":"inherit","required":false,"type":{"name":"boolean"}},"inline":{"description":"Sets line-height to 1 for centering, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"truncate":{"description":"Side on which Text must be truncated, if true, text is truncated from the start","name":"truncate","required":false,"type":{"name":"TextTruncate"}},"underline":{"description":"Determines in which cases link should have text-decoration: underline styles, hover by default","name":"underline","required":false,"type":{"name":"\\"always\\" | \\"hover\\" | \\"never\\"","raw":"\\"always\\" | \\"hover\\" | \\"never\\" | undefined","value":[{"value":"undefined"},{"value":"\\"always\\""},{"value":"\\"hover\\""},{"value":"\\"never\\""}]}}}},"AppShell":{"props":{"aside":{"description":"AppShell.Aside configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Aside component.","name":"aside","required":false,"type":{"name":"AppShellAsideConfiguration"}},"disabled":{"description":"If set, Navbar, Aside, Header and Footer components be hidden","name":"disabled","required":false,"type":{"name":"boolean"}},"footer":{"description":"AppShell.Footer configuration, controls height, offset and collapsed state. Required if you use AppShell.Footer component.","name":"footer","required":false,"type":{"name":"AppShellFooterConfiguration"}},"header":{"description":"AppShell.Header configuration, controls height, offset and collapsed state. Required if you use AppShell.Header component.","name":"header","required":false,"type":{"name":"AppShellHeaderConfiguration"}},"layout":{"description":"Determines how Navbar/Aside are arranged relative to Header/Footer, default by default","name":"layout","required":false,"type":{"name":"\\"default\\" | \\"alt\\"","raw":"\\"default\\" | \\"alt\\" | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"alt\\""}]}},"navbar":{"description":"AppShell.Navbar configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Navbar component.","name":"navbar","required":false,"type":{"name":"AppShellNavbarConfiguration"}},"offsetScrollbars":{"description":"Determines whether Header and Footer components should include styles to offset scrollbars. Based on react-remove-scroll. true by default","name":"offsetScrollbars","required":false,"type":{"name":"boolean"}},"padding":{"description":"Controls padding of the main section, 0 by default. !important!: use padding prop instead of p.","name":"padding","required":false,"type":{"name":"MantineSpacing | AppShellResponsiveSize"}},"transitionDuration":{"description":"Duration of all transitions in ms, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"Timing function of all transitions, ease by default","name":"transitionTimingFunction","required":false,"type":{"name":"TransitionTimingFunction"}},"withBorder":{"description":"Determines whether associated components should have a border, true by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index of all associated elements, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AspectRatio":{"props":{"ratio":{"description":"Aspect ratio, e.g. 16 / 9, 4 / 3, 1920 / 1080, 1 by default","name":"ratio","required":false,"type":{"name":"number"}}}},"Autocomplete":{"props":{"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data displayed in the dropdown","name":"data","required":false,"type":{"name":"ComboboxStringData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Avatar":{"props":{"alt":{"description":"Image alt attribute, also used as title attribute for placeholder","name":"alt","required":false,"type":{"name":"string"}},"autoContrast":{"description":"Determines whether text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Avatar placeholder, displayed when src={null} or when the image cannot be loaded","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, default value is theme.primaryColor","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient configuration used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"imageProps":{"description":"img tag attributes","name":"imageProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"img\\">"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \'100%\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Width and height of the avatar, numbers are converted to rem, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"src":{"description":"Image url, if the image cannot be loaded or src={null}, then placeholder is displayed instead","name":"src","required":false,"type":{"name":"string | null"}}}},"BackgroundImage":{"props":{"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"src":{"description":"Image url","name":"src","required":true,"type":{"name":"string"}}}},"Badge":{"props":{"autoContrast":{"description":"Determines whether text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Main badge content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"circle":{"description":"If set, badge min-width becomes equal to its height and horizontal padding is removed","name":"circle","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"fullWidth":{"description":"Determines whether Badge should take 100% of its parent width, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Gradient configuration used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"leftSection":{"description":"Content displayed on the left side of the badge label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rightSection":{"description":"Content displayed on the right side of the badge label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"Controls font-size, height and horizontal padding, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"Blockquote":{"props":{"cite":{"description":"Reference to a cited quote","name":"cite","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"icon":{"description":"Blockquote icon, displayed on the top left","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"iconSize":{"description":"Controls icon width and height, numbers are converted to rem, 40 by default","name":"iconSize","required":false,"type":{"name":"string | number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}}}},"Breadcrumbs":{"props":{"children":{"description":"React nodes that should be separated with separator","name":"children","required":true,"type":{"name":"React.ReactNode"}},"separator":{"description":"Separator between children, \'/\' by default","name":"separator","required":false,"type":{"name":"React.ReactNode"}},"separatorMargin":{"description":"Controls spacing between separator and breadcrumb, \'xs\' by default","name":"separatorMargin","required":false,"type":{"name":"MantineSpacing"}}}},"Burger":{"props":{"color":{"description":"Key of theme.colors of any valid CSS value, by default theme.white in dark color scheme and theme.black in light","name":"color","required":false,"type":{"name":"MantineColor"}},"opened":{"description":"State of the burger, when true burger is transformed into X, false by default","name":"opened","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls burger width and height, numbers are converted to rem, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionDuration":{"description":"transition-duration property value in ms, 300 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"transition-timing-function property value, \'ease\' by default","name":"transitionTimingFunction","required":false,"type":{"name":"string"}}}},"Button":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Button content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Indicates disabled state","name":"disabled","required":false,"type":{"name":"boolean"}},"fullWidth":{"description":"Determines whether button should take 100% width of its parent container, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Gradient configuration used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"justify":{"description":"Sets justify-content of inner element, can be used to change distribution of sections and label, \'center\' by default","name":"justify","required":false,"type":{"name":"JustifyContent"}},"leftSection":{"description":"Content displayed on the left side of the button label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"loaderProps":{"description":"Props added to the Loader component (only visible when loading prop is set)","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether the Loader component should be displayed over the button","name":"loading","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rightSection":{"description":"Content displayed on the right side of the button label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"Controls button height, font-size and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {}) | \\"compact-xs\\" | \\"compact-sm\\" | \\"compact-md\\" | \\"compact-lg\\" | \\"compact-xl\\""}}}},"Card":{"props":{"children":{"description":"Card content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"padding":{"description":"Controls padding, key of theme.spacing or any valid CSS value, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"shadow":{"description":"Key of theme.shadows or any valid CSS value to set box-shadow, none by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"withBorder":{"description":"Determines whether the card should have border, border color depends on color scheme, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}}}},"Center":{"props":{"children":{"description":"Content that should be centered vertically and horizontally","name":"children","required":false,"type":{"name":"React.ReactNode"}},"inline":{"description":"Determines whether inline-flex should be used instead of flex, false by default","name":"inline","required":false,"type":{"name":"boolean"}}}},"Checkbox":{"props":{"autoContrast":{"description":"Determines whether icon color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color to set input background color in checked state, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"description":{"description":"Description displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"error":{"description":"Error message displayed below the label","name":"error","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"Icon displayed when checkbox is in checked or indeterminate state","name":"icon","required":false,"type":{"name":"FC<{ indeterminate: boolean; className: string; }> | undefined"}},"iconColor":{"description":"Key of theme.colors or any valid CSS color to set icon color, by default value depends on theme.autoContrast","name":"iconColor","required":false,"type":{"name":"MantineColor"}},"id":{"description":"Id used to connect input with the label. If not set, unique id is generated instead.","name":"id","required":false,"type":{"name":"string"}},"indeterminate":{"description":"Indeterminate state of the checkbox. If set, checked prop is ignored.","name":"indeterminate","required":false,"type":{"name":"boolean"}},"label":{"description":"Content of the label associated with the checkbox","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Position of the label relative to the input, \'right\' by default","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls size of the component, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Chip":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"checked":{"description":"Checked state for controlled component","name":"checked","required":false,"type":{"name":"boolean"}},"children":{"description":"label element associated with the input","name":"children","required":true,"type":{"name":"React.ReactNode"}},"color":{"description":"Controls components colors based on variant prop. Key of theme.colors or any valid CSS color. theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultChecked":{"description":"Default checked state for uncontrolled component","name":"defaultChecked","required":false,"type":{"name":"boolean"}},"icon":{"description":"Any element or component to replace default icon","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Static id to connect input with the label, by default id is randomly generated","name":"id","required":false,"type":{"name":"string"}},"onChange":{"description":"Calls when checked state changes","name":"onChange","required":false,"type":{"name":"((checked: boolean) => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls various properties related to component size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Chip input type, \'checkbox\' by default","name":"type","required":false,"type":{"name":"\\"checkbox\\" | \\"radio\\"","raw":"\\"checkbox\\" | \\"radio\\" | undefined","value":[{"value":"undefined"},{"value":"\\"checkbox\\""},{"value":"\\"radio\\""}]}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"CloseButton":{"props":{"children":{"description":"Content rendered inside the button, for example VisuallyHidden with label for screen readers","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Sets disabled and data-disabled attributes on the button element","name":"disabled","required":false,"type":{"name":"boolean"}},"icon":{"description":"Replaces default close icon. If set, iconSize prop is ignored.","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"iconSize":{"description":"X icon width and height, 80% by default","name":"iconSize","required":false,"type":{"name":"string | number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the button. Numbers are converted to rem. \'md\' by default.","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Code":{"props":{"block":{"description":"If set code will be rendered inside pre, false by default","name":"block","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls background-color of the code, by default value is calculated based on color scheme","name":"color","required":false,"type":{"name":"MantineColor"}}}},"Collapse":{"props":{"animateOpacity":{"description":"Determines whether opacity should be animated, true by default","name":"animateOpacity","required":false,"type":{"name":"boolean"}},"in":{"description":"Opened state","name":"in","required":true,"type":{"name":"boolean"}},"onTransitionEnd":{"description":"Called each time transition ends","name":"onTransitionEnd","required":false,"type":{"name":"(() => void)"}},"transitionDuration":{"description":"Transition duration in ms, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"Transition timing function, default value is ease","name":"transitionTimingFunction","required":false,"type":{"name":"string"}}}},"ColorInput":{"props":{"closeOnColorSwatchClick":{"description":"Determines whether the dropdown should be closed when one of the color swatches is clicked, false by default","name":"closeOnColorSwatchClick","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"disallowInput":{"description":"If input is not allowed, the user can only pick value with color picker and swatches, false by default","name":"disallowInput","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"eyeDropperButtonProps":{"description":"Props passed down to the eye dropper button","name":"eyeDropperButtonProps","required":false,"type":{"name":"Record"}},"eyeDropperIcon":{"description":"An icon to replace the default eye dropper icon","name":"eyeDropperIcon","required":false,"type":{"name":"React.ReactNode"}},"fixOnBlur":{"description":"Determines whether the input value should be reset to the last known valid value when the input loses focus, true by default","name":"fixOnBlur","required":false,"type":{"name":"boolean"}},"format":{"description":"Color format, \'hex\' by default","name":"format","required":false,"type":{"name":"ColorFormat","raw":"ColorFormat | undefined","value":[{"value":"undefined"},{"value":"\\"hex\\""},{"value":"\\"hexa\\""},{"value":"\\"rgba\\""},{"value":"\\"rgb\\""},{"value":"\\"hsl\\""},{"value":"\\"hsla\\""}]}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onChangeEnd":{"description":"Called when the user stops dragging one of the sliders or changes the value with arrow keys","name":"onChangeEnd","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to the Popover component","name":"popoverProps","required":false,"type":{"name":"PopoverProps"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"swatches":{"description":"An array of colors in one of the supported formats. Used to render swatches list below the color picker.","name":"swatches","required":false,"type":{"name":"string[]"}},"swatchesPerRow":{"description":"Number of swatches per row, 7 by default","name":"swatchesPerRow","required":false,"type":{"name":"number"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withEyeDropper":{"description":"Determines whether eye dropper button should be displayed in the right section, true by default","name":"withEyeDropper","required":false,"type":{"name":"boolean"}},"withPicker":{"description":"Determines whether the color picker should be displayed, true by default","name":"withPicker","required":false,"type":{"name":"boolean"}},"withPreview":{"description":"Determines whether the preview color swatch should be displayed in the left section of the input, true by default","name":"withPreview","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"ColorPicker":{"props":{"alphaLabel":{"description":"Alpha slider aria-label prop","name":"alphaLabel","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"focusable":{"description":"Determines whether interactive elements (sliders thumbs and swatches) should be focusable, true by default","name":"focusable","required":false,"type":{"name":"boolean"}},"format":{"description":"Color format, \'hex\' by default","name":"format","required":false,"type":{"name":"ColorFormat","raw":"ColorFormat | undefined","value":[{"value":"undefined"},{"value":"\\"hex\\""},{"value":"\\"hexa\\""},{"value":"\\"rgba\\""},{"value":"\\"rgb\\""},{"value":"\\"hsl\\""},{"value":"\\"hsla\\""}]}},"fullWidth":{"description":"Determines whether the component should take 100% width of its container, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"hueLabel":{"description":"Hue slider aria-label prop","name":"hueLabel","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onChangeEnd":{"description":"Called when the user stops dragging one of the sliders or changes the value with arrow keys","name":"onChangeEnd","required":false,"type":{"name":"((value: string) => void)"}},"onColorSwatchClick":{"description":"Called when one of the color swatches is clicked","name":"onColorSwatchClick","required":false,"type":{"name":"((color: string) => void)"}},"saturationLabel":{"description":"Saturation slider aria-label prop","name":"saturationLabel","required":false,"type":{"name":"string"}},"size":{"description":"Controls size of hue, alpha and saturation sliders, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"swatches":{"description":"An array of colors in one of the supported formats. Used to render swatches list below the color picker.","name":"swatches","required":false,"type":{"name":"string[]"}},"swatchesPerRow":{"description":"Number of swatches per row, 7 by default","name":"swatchesPerRow","required":false,"type":{"name":"number"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withPicker":{"description":"Determines whether the color picker should be displayed, true by default","name":"withPicker","required":false,"type":{"name":"boolean"}}}},"ColorSwatch":{"props":{"children":{"description":"Content rendered inside the swatch","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Color to display, not related to theme.colors – supports only CSS color values","name":"color","required":true,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the swatch, any valid CSS value, numbers are converted to rem","name":"size","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"withShadow":{"description":"Determines whether the swatch should have inner box-shadow, true by default","name":"withShadow","required":false,"type":{"name":"boolean"}}}},"Combobox":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Combobox content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownPadding":{"description":"Controls padding of the dropdown, 4 by default","name":"dropdownPadding","required":false,"type":{"name":"Padding"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onClose":{"description":"Called when dropdown closes","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when dropdown opens","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when item is selected with Enter key or by clicking it","name":"onOptionSubmit","required":false,"type":{"name":"((value: string, optionProps: ComboboxOptionProps) => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether Combobox value can be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"resetSelectionOnOptionHover":{"description":"Determines whether selection should be reset when option is hovered, false by default","name":"resetSelectionOnOptionHover","required":false,"type":{"name":"boolean"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls items font-size and padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"store":{"description":"Combobox store, can be used to control combobox state","name":"store","required":false,"type":{"name":"ComboboxStore"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Combobox.Target":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"Combobox.Dropdown":{"props":{"hidden":{"description":"Determines whether the dropdown should be hidden, for example, when there are no options to display","name":"hidden","required":false,"type":{"name":"boolean"}}}},"Combobox.Options":{"props":{"labelledBy":{"description":"Id of the element that should label the options list","name":"labelledBy","required":false,"type":{"name":"string"}}}},"Combobox.Option":{"props":{"active":{"description":"Determines whether the option is selected","name":"active","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether the option can be selected","name":"disabled","required":false,"type":{"name":"boolean"}},"selected":{"description":"Determines whether item is selected, useful for virtualized comboboxes","name":"selected","required":false,"type":{"name":"boolean"}},"value":{"description":"Option value","name":"value","required":true,"type":{"name":"string"}}}},"Combobox.Search":{"props":{"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Determines whether the input should have error styles and aria-invalid attribute","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Input element id","name":"id","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Sets required attribute on the input element","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withAriaAttributes":{"description":"Determines whether the search input should have aria- attribute, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether the search input should handle keyboard navigation, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element of the Input component","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Combobox.Empty":{"description":"","props":{}},"Combobox.Chevron":{"props":{"error":{"description":"","name":"error","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"Combobox.Footer":{"description":"","props":{}},"Combobox.Header":{"description":"","props":{}},"Combobox.EventsTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"Combobox.DropdownTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"Combobox.Group":{"props":{"label":{"description":"Group label","name":"label","required":false,"type":{"name":"React.ReactNode"}}}},"Container":{"props":{"fluid":{"description":"Determines whether the container should take 100% of its parent width. If set, size prop is ignored. false by default.","name":"fluid","required":false,"type":{"name":"boolean"}},"size":{"description":"Sets max-width of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when fluid prop is set. \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"CopyButton":{"props":{"children":{"description":"Children callback, provides current status and copy function as an argument","name":"children","required":true,"type":{"name":"(payload: { copied: boolean; copy: () => void; }) => ReactNode"}},"timeout":{"description":"Copied status timeout in ms, 1000 by default","name":"timeout","required":false,"type":{"name":"number"}},"value":{"description":"Value that will be copied to the clipboard when the button is clicked","name":"value","required":true,"type":{"name":"string"}}}},"Dialog":{"props":{"children":{"description":"Dialog content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"keepMounted":{"description":"If set dialog will not be unmounted from the DOM when it is hidden, display: none styles will be added instead","name":"keepMounted","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when the close button is clicked","name":"onClose","required":false,"type":{"name":"(() => void)"}},"opened":{"description":"Opened state","name":"opened","required":true,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Affix position on screen, defaults value is { bottom: 0, right: 0 }","name":"position","required":false,"type":{"name":"{ top?: string | number; left?: string | number | undefined; bottom?: string | number | undefined; right?: string | number | undefined; } | undefined"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"shadow":{"description":"Key of theme.shadows or any valid CSS value to set box-shadow, none by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the dialog, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionProps":{"description":"Overrides default transition, { transition: \'pop-top-right\', duration: 200 } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"withBorder":{"description":"Determines whether the paper should have border, border color depends on color scheme, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether the close button should be displayed, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether component should be rendered within portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Root element z-index property, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Divider":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color value, by default value depends on color scheme","name":"color","required":false,"type":{"name":"MantineColor"}},"label":{"description":"Divider label, visible only when orientation is horizontal","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Controls label position, \'left\' by default","name":"labelPosition","required":false,"type":{"name":"\\"center\\" | \\"left\\" | \\"right\\"","raw":"\\"center\\" | \\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"orientation":{"description":"Controls orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"size":{"description":"Controls width/height (depends on orientation), \'xs\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Drawer":{"props":{"children":{"description":"Drawer content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeButtonProps":{"description":"Props passed down to the close button","name":"closeButtonProps","required":false,"type":{"name":"ModalBaseCloseButtonProps"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"offset":{"description":"Drawer container offset from the viewport end, 0 by default","name":"offset","required":false,"type":{"name":"string | number"}},"onClose":{"description":"Called when modal/drawer is closed","name":"onClose","required":true,"type":{"name":"() => void"}},"opened":{"description":"Determines whether modal/drawer is opened","name":"opened","required":true,"type":{"name":"boolean"}},"overlayProps":{"description":"Props passed down to the Overlay component, can be used to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Side of the screen on which drawer will be opened, \'left\' by default","name":"position","required":false,"type":{"name":"DrawerPosition","raw":"DrawerPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"title":{"description":"Drawer title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether the close button should be rendered, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Fieldset":{"props":{"legend":{"description":"Fieldset legend","name":"legend","required":false,"type":{"name":"React.ReactNode"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}}}},"FileButton":{"props":{"accept":{"description":"File input accept attribute, for example, \\"image/png,image/jpeg\\"","name":"accept","required":false,"type":{"name":"string"}},"capture":{"description":"Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.","name":"capture","required":false,"type":{"name":"boolean | \\"user\\" | \\"environment\\""}},"children":{"description":"Function that receives button props and returns react node that should be rendered","name":"children","required":true,"type":{"name":"(props: { onClick: () => void; }) => ReactNode"}},"disabled":{"description":"Disables file picker","name":"disabled","required":false,"type":{"name":"boolean"}},"form":{"description":"Input form attribute","name":"form","required":false,"type":{"name":"string"}},"inputProps":{"description":"Passes down props to the input element used to capture files","name":"inputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"multiple":{"description":"Determines whether user can pick more than one file","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Input name attribute","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when files are picked","name":"onChange","required":true,"type":{"name":"(payload: Multiple extends true ? File[] : File | null) => void"}},"resetRef":{"description":"Reference of the function that should be called when value changes to null or empty array","name":"resetRef","required":false,"type":{"name":"ForwardedRef<() => void>"}}}},"FileInput":{"props":{"accept":{"description":"File input accept attribute, for example, \\"image/png,image/jpeg\\"","name":"accept","required":false,"type":{"name":"string"}},"capture":{"description":"Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.","name":"capture","required":false,"type":{"name":"boolean | \\"user\\" | \\"environment\\""}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether clear button should be displayed in the right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"File | File[] | null"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"fileInputProps":{"description":"Props passed down to the hidden input element which is used to capture files","name":"fileInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"form":{"description":"Input form attribute","name":"form","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiple":{"description":"Determines whether user can pick more than one file, false by default","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Input name attribute","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((payload: Multiple extends true ? File[] : File | null) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"React.ReactNode"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"If set, the input value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"File | File[] | null"}},"valueComponent":{"description":"Value renderer. By default, file name is displayed.","name":"valueComponent","required":false,"type":{"name":"FC<{ value: File | File[] | null; }>"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Flex":{"props":{"align":{"description":"align-items CSS property","name":"align","required":false,"type":{"name":"StyleProp"}},"columnGap":{"description":"column-gap CSS property","name":"columnGap","required":false,"type":{"name":"StyleProp"}},"direction":{"description":"flex-direction CSS property","name":"direction","required":false,"type":{"name":"StyleProp"}},"gap":{"description":"gap CSS property","name":"gap","required":false,"type":{"name":"StyleProp"}},"justify":{"description":"justify-content CSS property","name":"justify","required":false,"type":{"name":"StyleProp"}},"rowGap":{"description":"row-gap CSS property","name":"rowGap","required":false,"type":{"name":"StyleProp"}},"wrap":{"description":"flex-wrap CSS property","name":"wrap","required":false,"type":{"name":"StyleProp"}}}},"FocusTrap":{"props":{"active":{"description":"Determines whether focus should be trapped within child element","name":"active","required":false,"type":{"name":"boolean"}},"children":{"description":"Element at which focus should be trapped, should support ref prop","name":"children","required":true,"type":{"name":"any"}},"refProp":{"description":"Prop that should be used to access component ref","name":"refProp","required":false,"type":{"name":"string"}}}},"Grid":{"props":{"align":{"description":"Sets align-items, stretch by default","name":"align","required":false,"type":{"name":"AlignItems"}},"columns":{"description":"Number of columns in each row, 12 by default","name":"columns","required":false,"type":{"name":"number"}},"grow":{"description":"Determines whether columns in the last row should expand to fill all available space, false by default","name":"grow","required":false,"type":{"name":"boolean"}},"gutter":{"description":"Gutter between columns, key of theme.spacing or any valid CSS value, \'md\' by default","name":"gutter","required":false,"type":{"name":"StyleProp"}},"justify":{"description":"Sets justify-content, flex-start by default","name":"justify","required":false,"type":{"name":"JustifyContent"}},"overflow":{"description":"Sets overflow CSS property on the root element, \'visible\' by default","name":"overflow","required":false,"type":{"name":"Overflow"}}}},"Group":{"props":{"align":{"description":"Controls align-items CSS property, \'center\' by default","name":"align","required":false,"type":{"name":"AlignItems"}},"gap":{"description":"Key of theme.spacing or any valid CSS value for gap, numbers are converted to rem, \'md\' by default","name":"gap","required":false,"type":{"name":"MantineSpacing"}},"grow":{"description":"Determines whether each child element should have flex-grow: 1 style, false by default","name":"grow","required":false,"type":{"name":"boolean"}},"justify":{"description":"Controls justify-content CSS property, \'flex-start\' by default","name":"justify","required":false,"type":{"name":"JustifyContent"}},"preventGrowOverflow":{"description":"Determines whether children should take only dedicated amount of space (max-width style is set based on the number of children), true by default","name":"preventGrowOverflow","required":false,"type":{"name":"boolean"}},"wrap":{"description":"Controls flex-wrap CSS property, \'wrap\' by default","name":"wrap","required":false,"type":{"name":"FlexWrap","raw":"FlexWrap | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"wrap\\""},{"value":"\\"nowrap\\""},{"value":"\\"wrap-reverse\\""}]}}}},"Highlight":{"props":{"children":{"description":"String parts of which must be highlighted","name":"children","required":true,"type":{"name":"string"}},"color":{"description":"Key of theme.colors or any valid CSS color, passed to Mark component color prop, yellow by default","name":"color","required":false,"type":{"name":"string | (string & {})"}},"gradient":{"description":"Gradient configuration, ignored when variant is not gradient, theme.defaultGradient by default","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"highlight":{"description":"Substring or an array of substrings to highlight in children","name":"highlight","required":true,"type":{"name":"string | string[]"}},"highlightStyles":{"description":"Styles applied to mark elements","name":"highlightStyles","required":false,"type":{"name":"CSSProperties | ((theme: MantineTheme) => CSSProperties)"}},"inherit":{"description":"Determines whether font properties should be inherited from the parent, false by default","name":"inherit","required":false,"type":{"name":"boolean"}},"inline":{"description":"Sets line-height to 1 for centering, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"span":{"description":"Shorthand for component=\\"span\\", false by default, default root element is p","name":"span","required":false,"type":{"name":"boolean"}},"truncate":{"description":"Side on which Text must be truncated, if true, text is truncated from the start","name":"truncate","required":false,"type":{"name":"TextTruncate"}}}},"HoverCard":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Popover.Target and Popover.Dropdown components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clickOutsideEvents":{"description":"Events that trigger outside clicks","name":"clickOutsideEvents","required":false,"type":{"name":"string[]"}},"closeDelay":{"description":"Close delay in ms","name":"closeDelay","required":false,"type":{"name":"number"}},"closeOnClickOutside":{"description":"Determines whether dropdown should be closed on outside clicks, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether dropdown should be closed when Escape key is pressed, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"defaultOpened":{"description":"Initial opened state for uncontrolled component","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"id":{"description":"id base to create accessibility connections","name":"id","required":false,"type":{"name":"string"}},"initiallyOpened":{"description":"Initial opened state","name":"initiallyOpened","required":false,"type":{"name":"boolean"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onClose":{"description":"Called when dropdown is closed","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when dropdown is opened","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"openDelay":{"description":"Open delay in ms","name":"openDelay","required":false,"type":{"name":"number"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped within dropdown, false by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withRoles":{"description":"Determines whether dropdown and target elements should have accessible roles, true by default","name":"withRoles","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"HoverCard.Dropdown":{"props":{"children":{"description":"Dropdown content","name":"children","required":false,"type":{"name":"React.ReactNode"}}}},"Image":{"props":{"fallbackSrc":{"description":"Image url that will be used as a fallback in case src prop is not set or image cannot be loaded","name":"fallbackSrc","required":false,"type":{"name":"string"}},"fit":{"description":"Controls object-fit style, \'cover\' by default","name":"fit","required":false,"type":{"name":"ObjectFit","raw":"ObjectFit | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"contain\\""},{"value":"\\"cover\\""},{"value":"\\"fill\\""},{"value":"\\"scale-down\\""}]}},"onError":{"description":"Called when image fails to load","name":"onError","required":false,"type":{"name":"((event: SyntheticEvent) => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"src":{"description":"Image url","name":"src","required":false,"type":{"name":"any"}}}},"Indicator":{"props":{"autoContrast":{"description":"Determines whether text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color value, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"When Indicator is disabled it renders children only","name":"disabled","required":false,"type":{"name":"boolean"}},"inline":{"description":"Determines whether the indicator container should be an inline element, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"label":{"description":"Label rendered inside the indicator, for example, notification count","name":"label","required":false,"type":{"name":"React.ReactNode"}},"offset":{"description":"Indicator offset relative to the target element, usually used for elements with border-radius, equals to size by default","name":"offset","required":false,"type":{"name":"number"}},"position":{"description":"Indicator position relative to the target element, \'top-end\' by default","name":"position","required":false,"type":{"name":"\\"bottom-end\\" | \\"bottom-start\\" | \\"top-end\\" | \\"top-start\\" | \\"bottom-center\\" | \\"top-center\\" | \\"middle-center\\" | \\"middle-end\\" | \\"middle-start\\"","raw":"\\"bottom-end\\" | \\"bottom-start\\" | \\"top-end\\" | \\"top-start\\" | \\"bottom-center\\" | \\"top-center\\" | \\"middle-center\\" | \\"middle-end\\" | \\"middle-start\\" | undefined","value":[{"value":"undefined"},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""},{"value":"\\"bottom-center\\""},{"value":"\\"top-center\\""},{"value":"\\"middle-center\\""},{"value":"\\"middle-end\\""},{"value":"\\"middle-start\\""}]}},"processing":{"description":"Determines whether the indicator should have processing animation, false by default","name":"processing","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, 100 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Indicator width and height, 10 by default","name":"size","required":false,"type":{"name":"string | number"}},"withBorder":{"description":"Determines whether the indicator should have a border (color of the border is the same as the body element), false by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Indicator z-index, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"InlineInput":{"props":{"description":{"description":"","name":"description","required":true,"type":{"name":"React.ReactNode"}},"disabled":{"description":"","name":"disabled","required":true,"type":{"name":"boolean"}},"error":{"description":"","name":"error","required":true,"type":{"name":"React.ReactNode"}},"id":{"description":"","name":"id","required":true,"type":{"name":"string"}},"label":{"description":"","name":"label","required":true,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"size":{"description":"","name":"size","required":true,"type":{"name":"MantineSize | (string & {})"}}}},"Input":{"props":{"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Determines whether the input should have error styles and aria-invalid attribute","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Input element id","name":"id","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Sets required attribute on the input element","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element of the Input component","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"InputBase":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element (Input.Wrapper component)","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"InputsGroupFieldset":{"props":{"role":{"description":"","name":"role","required":true,"type":{"name":"\\"group\\" | \\"radiogroup\\"","raw":"\\"group\\" | \\"radiogroup\\"","value":[{"value":"\\"group\\""},{"value":"\\"radiogroup\\""}]}}}},"JsonInput":{"props":{"autosize":{"description":"Determines whether the textarea height should grow with its content, false by default","name":"autosize","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"deserialize":{"description":"Function to deserialize string value, used for value formatting and input JSON validation, must throw error if string cannot be processed, JSON.parse by default","name":"deserialize","required":false,"type":{"name":"((text: string, reviver?: ((this: any, key: string, value: any) => any)) => any) | undefined"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"formatOnBlur":{"description":"Determines whether the value should be formatted on blur, false by default","name":"formatOnBlur","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"maxRows":{"description":"Maximum rows for autosize textarea to grow, ignored if autosize prop is not set","name":"maxRows","required":false,"type":{"name":"number"}},"minRows":{"description":"Minimum rows of autosize textarea, ignored if autosize prop is not set","name":"minRows","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"resize":{"description":"Controls resize CSS property, \'none\' by default","name":"resize","required":false,"type":{"name":"Resize","raw":"Resize | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"block\\""},{"value":"\\"inline\\""},{"value":"\\"both\\""},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"serialize":{"description":"Function to serialize value into a string, used for value formatting, JSON.stringify by default","name":"serialize","required":false,"type":{"name":"{ (value: any, replacer?: ((this: any, key: string, value: any) => any), space?: string | number | undefined): string; (value: any, replacer?: (string | number)[] | null | undefined, space?: string | ... 1 more ... | undefined): string; } | undefined"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"validationError":{"description":"Error message displayed when value is not valid JSON","name":"validationError","required":false,"type":{"name":"React.ReactNode"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Kbd":{"props":{"size":{"description":"Controls font-size and padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"List":{"props":{"center":{"description":"Determines whether items must be centered with their icon, false by default","name":"center","required":false,"type":{"name":"boolean"}},"children":{"description":"List.Item components only","name":"children","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"Icon that replaces list item dot","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"listStyleType":{"description":"Controls list-style-type, by default inferred from type","name":"listStyleType","required":false,"type":{"name":"ListStyleType"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"spacing":{"description":"Key of theme.spacing or any valid CSS value to set spacing between items, 0 by default","name":"spacing","required":false,"type":{"name":"MantineSpacing"}},"type":{"description":"List type: ol or ul, \'unordered\' by default","name":"type","required":false,"type":{"name":"\\"ordered\\" | \\"unordered\\"","raw":"\\"ordered\\" | \\"unordered\\" | undefined","value":[{"value":"undefined"},{"value":"\\"ordered\\""},{"value":"\\"unordered\\""}]}},"withPadding":{"description":"Determines whether list items should be offset with padding, false by default","name":"withPadding","required":false,"type":{"name":"boolean"}}}},"Loader":{"props":{"children":{"description":"Overrides default loader with given content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, default value is theme.primaryColor","name":"color","required":false,"type":{"name":"MantineColor"}},"loaders":{"description":"Object of loaders components, can be customized via default props or inline. Default value contains bars, oval and dots","name":"loaders","required":false,"type":{"name":"Partial>"}},"size":{"description":"Controls width and height of the loader. Loader has predefined xs-xl values. Numbers are converted to rem. Default value is \'md\'","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"type":{"description":"Loader type, key of loaders prop, default value is \'oval\'","name":"type","required":false,"type":{"name":"(string & {}) | \\"bars\\" | \\"dots\\" | \\"oval\\""}}}},"LoadingOverlay":{"props":{"loaderProps":{"description":"Props passed down to Loader component","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"overlayProps":{"description":"Props passed down to Overlay component","name":"overlayProps","required":false,"type":{"name":"OverlayProps"}},"transitionProps":{"description":"Props passed down to Transition component, { transition: \'fade\', duration: 0 } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"visible":{"description":"Determines whether the overlay should be visible, false by default","name":"visible","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Controls overlay z-index, 400 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Mark":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, yellow by default","name":"color","required":false,"type":{"name":"MantineColor"}}}},"Menu":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Menu content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clickOutsideEvents":{"description":"Events that trigger outside clicks","name":"clickOutsideEvents","required":false,"type":{"name":"string[]"}},"closeDelay":{"description":"Close delay in ms, applicable only to trigger=\\"hover\\" variant","name":"closeDelay","required":false,"type":{"name":"number"}},"closeOnClickOutside":{"description":"Determines whether dropdown should be closed on outside clicks","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether dropdown should be closed when Escape key is pressed","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"closeOnItemClick":{"description":"Determines whether Menu should be closed when item is clicked","name":"closeOnItemClick","required":false,"type":{"name":"boolean"}},"defaultOpened":{"description":"Uncontrolled menu initial opened state","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"id":{"description":"id base to create accessibility connections","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"loop":{"description":"Determines whether arrow key presses should loop though items (first to last and last to first)","name":"loop","required":false,"type":{"name":"boolean"}},"menuItemTabIndex":{"description":"Set the tabindex on all menu items. Defaults to -1","name":"menuItemTabIndex","required":false,"type":{"name":"0 | -1","raw":"0 | -1 | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"-1"}]}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onChange":{"description":"Called when menu opened state changes","name":"onChange","required":false,"type":{"name":"((opened: boolean) => void)"}},"onClose":{"description":"Called when Menu is closed","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when Menu is opened","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"openDelay":{"description":"Open delay in ms, applicable only to trigger=\\"hover\\" variant","name":"openDelay","required":false,"type":{"name":"number"}},"opened":{"description":"Controlled menu opened state","name":"opened","required":false,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether dropdown should trap focus of keyboard events","name":"trapFocus","required":false,"type":{"name":"boolean"}},"trigger":{"description":"Event which should open menu","name":"trigger","required":false,"type":{"name":"\\"hover\\" | \\"click\\" | \\"click-hover\\"","raw":"\\"hover\\" | \\"click\\" | \\"click-hover\\" | undefined","value":[{"value":"undefined"},{"value":"\\"hover\\""},{"value":"\\"click\\""},{"value":"\\"click-hover\\""}]}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Menu.Item":{"props":{"children":{"description":"Item label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeMenuOnClick":{"description":"Determines whether the menu should be closed when the item is clicked, overrides closeOnItemClick prop on the Menu component","name":"closeMenuOnClick","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Disables item","name":"disabled","required":false,"type":{"name":"boolean"}},"leftSection":{"description":"Section displayed on the left side of the label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Section displayed on the right side of the label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"Menu.Label":{"description":"","props":{}},"Menu.Dropdown":{"description":"","props":{}},"Menu.Divider":{"description":"","props":{}},"Modal":{"props":{"centered":{"description":"Determines whether the modal should be centered vertically, false by default","name":"centered","required":false,"type":{"name":"boolean"}},"children":{"description":"Modal content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeButtonProps":{"description":"Props passed down to the close button","name":"closeButtonProps","required":false,"type":{"name":"ModalBaseCloseButtonProps"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"fullScreen":{"description":"Determines whether the modal should take the entire screen, false by default","name":"fullScreen","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when modal/drawer is closed","name":"onClose","required":true,"type":{"name":"() => void"}},"opened":{"description":"Determines whether modal/drawer is opened","name":"opened","required":true,"type":{"name":"boolean"}},"overlayProps":{"description":"Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"title":{"description":"Modal title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether the close button should be rendered, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"xOffset":{"description":"Left/right modal offset, 5vw by default","name":"xOffset","required":false,"type":{"name":"MarginLeft"}},"yOffset":{"description":"Top/bottom modal offset, 5dvh by default","name":"yOffset","required":false,"type":{"name":"MarginTop"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"ModalBase":{"props":{"children":{"description":"Modal/drawer content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when modal/drawer is closed","name":"onClose","required":true,"type":{"name":"() => void"}},"opened":{"description":"Determines whether modal/drawer is opened","name":"opened","required":true,"type":{"name":"boolean"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"MultiSelect":{"props":{"checkIconPosition":{"description":"Position of the check icon relative to the option label, \'left\' by default","name":"checkIconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"(__CloseButtonProps & ElementProps<\\"button\\">)"}},"clearable":{"description":"Determines whether the clear button should be displayed in the right section when the component has value, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data used to generate options","name":"data","required":false,"type":{"name":"ComboboxData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultSearchValue":{"description":"Default search value","name":"defaultSearchValue","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"hiddenInputValuesDivider":{"description":"Divider used to separate values in the hidden input value attribute, \',\' by default","name":"hiddenInputValuesDivider","required":false,"type":{"name":"string"}},"hidePickedOptions":{"description":"Determines whether picked options should be removed from the options list, false by default","name":"hidePickedOptions","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"maxValues":{"description":"Maximum number of values, Infinity by default","name":"maxValues","required":false,"type":{"name":"number"}},"nothingFoundMessage":{"description":"Message displayed when no option matched current search query, only applicable when searchable prop is set","name":"nothingFoundMessage","required":false,"type":{"name":"React.ReactNode"}},"onChange":{"description":"Called whe value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"onSearchChange":{"description":"Called when search changes","name":"onSearchChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"searchValue":{"description":"Controlled search value","name":"searchValue","required":false,"type":{"name":"string"}},"searchable":{"description":"Determines whether the select should be searchable, false by default","name":"searchable","required":false,"type":{"name":"boolean"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCheckIcon":{"description":"Determines whether check icon should be displayed near the selected option label, true by default","name":"withCheckIcon","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"NativeSelect":{"props":{"data":{"description":"Data used to render options, can be replaced with children","name":"data","required":false,"type":{"name":"ComboboxData"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"NavLink":{"props":{"active":{"description":"Determines whether the link should have active styles, false by default","name":"active","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Child NavLink components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"childrenOffset":{"description":"Key of theme.spacing or any valid CSS value to set collapsed links padding-left, \'lg\' by default","name":"childrenOffset","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"color":{"description":"Key of theme.colors of any valid CSS color to control active styles, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultOpened":{"description":"Uncontrolled nested items collapse initial state","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"description":{"description":"Link description, displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"disableRightSectionRotation":{"description":"If set, right section will not be rotated when collapse is opened, false by default","name":"disableRightSectionRotation","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, disabled styles will be added to the root element, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"label":{"description":"Main link label","name":"label","required":false,"type":{"name":"React.ReactNode"}},"leftSection":{"description":"Section displayed on the left side of the label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"noWrap":{"description":"If set, label and description will not wrap to the next line, false by default","name":"noWrap","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when open state changes","name":"onChange","required":false,"type":{"name":"((opened: boolean) => void)"}},"onClick":{"description":"Called when the link is clicked","name":"onClick","required":false,"type":{"name":"((event: MouseEvent) => void)"}},"onKeyDown":{"description":"Link onkeydown event","name":"onKeyDown","required":false,"type":{"name":"((event: KeyboardEvent) => void)"}},"opened":{"description":"Controlled nested items collapse state","name":"opened","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Section displayed on the right side of the label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"Notification":{"props":{"children":{"description":"Notification body, place main text here","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeButtonProps":{"description":"Props passed down to the close button","name":"closeButtonProps","required":false,"type":{"name":"Record"}},"color":{"description":"Controls notification line or icon color, key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"icon":{"description":"Notification icon, replaces color line","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"loading":{"description":"Replaces colored line or icon with Loader component","name":"loading","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when close button is clicked","name":"onClose","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"title":{"description":"Notification title, displayed before body","name":"title","required":false,"type":{"name":"React.ReactNode"}},"withBorder":{"description":"Determines whether notification should have a border, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether close button should be visible, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}}}},"NumberFormatter":{"props":{"allowNegative":{"description":"Determines whether negative values are allowed, true by default","name":"allowNegative","required":false,"type":{"name":"boolean"}},"decimalScale":{"description":"Limits the number of digits that are displayed after the decimal point, by default there is no limit","name":"decimalScale","required":false,"type":{"name":"number"}},"decimalSeparator":{"description":"Character used as a decimal separator, \'.\' by default","name":"decimalSeparator","required":false,"type":{"name":"string"}},"fixedDecimalScale":{"description":"If set, 0s are added after decimalSeparator to match given decimalScale. false by default","name":"fixedDecimalScale","required":false,"type":{"name":"boolean"}},"prefix":{"description":"Prefix added before the value","name":"prefix","required":false,"type":{"name":"string"}},"suffix":{"description":"Suffix added after the value","name":"suffix","required":false,"type":{"name":"string"}},"thousandSeparator":{"description":"A character used to separate thousands, \',\' by default","name":"thousandSeparator","required":false,"type":{"name":"string | boolean"}},"thousandsGroupStyle":{"description":"Defines the thousand grouping style","name":"thousandsGroupStyle","required":false,"type":{"name":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\"","raw":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"thousand\\""},{"value":"\\"lakh\\""},{"value":"\\"wan\\""}]}},"value":{"description":"Value to format","name":"value","required":false,"type":{"name":"string | number"}}}},"NumberInput":{"props":{"allowDecimal":{"description":"Determines whether decimal values are allowed, true by default","name":"allowDecimal","required":false,"type":{"name":"boolean"}},"allowLeadingZeros":{"description":"Determines whether leading zeros are allowed. If not set, leading zeros are removed when the input is blurred. false by default","name":"allowLeadingZeros","required":false,"type":{"name":"boolean"}},"allowNegative":{"description":"Determines whether negative values are allowed, true by default","name":"allowNegative","required":false,"type":{"name":"boolean"}},"allowedDecimalSeparators":{"description":"Characters which when pressed result in a decimal separator, [\'.\'] by default","name":"allowedDecimalSeparators","required":false,"type":{"name":"string[]"}},"clampBehavior":{"description":"Controls how value is clamped, strict – user is not allowed to enter values that are not in [min, max] range, blur – user is allowed to enter any values, but the value is clamped when the input loses focus (default behavior), none – lifts all restrictions, [min, max] range is applied only for controls and up/down keys","name":"clampBehavior","required":false,"type":{"name":"\\"none\\" | \\"blur\\" | \\"strict\\"","raw":"\\"none\\" | \\"blur\\" | \\"strict\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"blur\\""},{"value":"\\"strict\\""}]}},"decimalScale":{"description":"Limits the number of digits that can be entered after the decimal point","name":"decimalScale","required":false,"type":{"name":"number"}},"decimalSeparator":{"description":"Character used as a decimal separator, \'.\' by default","name":"decimalSeparator","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string | number"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"fixedDecimalScale":{"description":"If set, 0s are added after decimalSeparator to match given decimalScale. false by default","name":"fixedDecimalScale","required":false,"type":{"name":"boolean"}},"handlersRef":{"description":"Increment/decrement handlers","name":"handlersRef","required":false,"type":{"name":"ForwardedRef | undefined"}},"hideControls":{"description":"Determines whether the up/down controls should be hidden, false by default","name":"hideControls","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"isAllowed":{"description":"A function to validate the input value. If this function returns false, the onChange will not be called and the input value will not change.","name":"isAllowed","required":false,"type":{"name":"((values: NumberFormatValues) => boolean)"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"max":{"description":"Maximum possible value","name":"max","required":false,"type":{"name":"number"}},"min":{"description":"Minimum possible value","name":"min","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string | number) => void)"}},"onValueChange":{"description":"Called when value changes with react-number-format payload","name":"onValueChange","required":false,"type":{"name":"OnValueChange"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"prefix":{"description":"Prefix added before the input value","name":"prefix","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"startValue":{"description":"Value set to the input when increment/decrement buttons are clicked or up/down arrows pressed if the input is empty, 0 by default","name":"startValue","required":false,"type":{"name":"number"}},"step":{"description":"Number by which value will be incremented/decremented with up/down controls and keyboard arrows, 1 by default","name":"step","required":false,"type":{"name":"number"}},"stepHoldDelay":{"description":"Initial delay in milliseconds before stepping the value.","name":"stepHoldDelay","required":false,"type":{"name":"number"}},"stepHoldInterval":{"description":"Delay before stepping the value. Can be a number of milliseconds or a function that receives the current step count and returns the delay in milliseconds.","name":"stepHoldInterval","required":false,"type":{"name":"number | ((stepCount: number) => number)"}},"suffix":{"description":"Suffix added after the input value","name":"suffix","required":false,"type":{"name":"string"}},"thousandSeparator":{"description":"A character used to separate thousands","name":"thousandSeparator","required":false,"type":{"name":"string | boolean"}},"thousandsGroupStyle":{"description":"Defines the thousand grouping style.","name":"thousandsGroupStyle","required":false,"type":{"name":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\"","raw":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"thousand\\""},{"value":"\\"lakh\\""},{"value":"\\"wan\\""}]}},"type":{"description":"Controls input type attribute, \'text\' by default","name":"type","required":false,"type":{"name":"\\"text\\" | \\"tel\\" | \\"password\\"","raw":"\\"text\\" | \\"tel\\" | \\"password\\" | undefined","value":[{"value":"undefined"},{"value":"\\"text\\""},{"value":"\\"tel\\""},{"value":"\\"password\\""}]}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string | number"}},"valueIsNumericString":{"description":"If value is passed as string representation of numbers (unformatted) and number is used in any format props like in prefix or suffix in numeric format and format prop in pattern format then this should be passed as true. false by default.","name":"valueIsNumericString","required":false,"type":{"name":"boolean"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Overlay":{"props":{"backgroundOpacity":{"description":"Controls overlay background-color opacity 0–1, disregarded when gradient prop is set, 0.6 by default","name":"backgroundOpacity","required":false,"type":{"name":"number"}},"blur":{"description":"Overlay background blur, 0 by default","name":"blur","required":false,"type":{"name":"string | number"}},"center":{"description":"Determines whether content inside overlay should be vertically and horizontally centered, false by default","name":"center","required":false,"type":{"name":"boolean"}},"children":{"description":"Content inside overlay","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Overlay background-color, #000 by default","name":"color","required":false,"type":{"name":"BackgroundColor"}},"fixed":{"description":"Determines whether overlay should have fixed position instead of absolute, false by default","name":"fixed","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Changes overlay to gradient. If set, color prop is ignored","name":"gradient","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"zIndex":{"description":"Overlay z-index, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Pagination":{"props":{"autoContrast":{"description":"Determines whether active item text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"boundaries":{"description":"Number of elements visible on the left/right edges, 1 by default","name":"boundaries","required":false,"type":{"name":"number"}},"color":{"description":"Key of theme.colors, active item color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Active page for uncontrolled component, must be an integer in [0, total] interval","name":"defaultValue","required":false,"type":{"name":"number"}},"disabled":{"description":"Determines whether all controls should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"dotsIcon":{"description":"Dots icon component","name":"dotsIcon","required":false,"type":{"name":"PaginationIcon"}},"firstIcon":{"description":"First control icon component","name":"firstIcon","required":false,"type":{"name":"PaginationIcon"}},"gap":{"description":"Key of theme.spacing, gap between controls, 8 by default","name":"gap","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"getControlProps":{"description":"Adds props to next/previous/first/last controls","name":"getControlProps","required":false,"type":{"name":"((control: \\"next\\" | \\"previous\\" | \\"first\\" | \\"last\\") => Record)"}},"getItemProps":{"description":"Additional props passed down to controls","name":"getItemProps","required":false,"type":{"name":"((page: number) => Record)"}},"lastIcon":{"description":"Last control icon component","name":"lastIcon","required":false,"type":{"name":"PaginationIcon"}},"nextIcon":{"description":"Next control icon component","name":"nextIcon","required":false,"type":{"name":"PaginationIcon"}},"onChange":{"description":"Called when page changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onFirstPage":{"description":"Called when first page control is clicked","name":"onFirstPage","required":false,"type":{"name":"(() => void)"}},"onLastPage":{"description":"Called when last page control is clicked","name":"onLastPage","required":false,"type":{"name":"(() => void)"}},"onNextPage":{"description":"Called when next page control is clicked","name":"onNextPage","required":false,"type":{"name":"(() => void)"}},"onPreviousPage":{"description":"Called when previous page control is clicked","name":"onPreviousPage","required":false,"type":{"name":"(() => void)"}},"previousIcon":{"description":"Previous control icon component","name":"previousIcon","required":false,"type":{"name":"PaginationIcon"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"siblings":{"description":"Number of siblings displayed on the left/right side of the selected page, 1 by default","name":"siblings","required":false,"type":{"name":"number"}},"size":{"description":"height and min-width of controls, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"total":{"description":"Total number of pages, must be an integer","name":"total","required":true,"type":{"name":"number"}},"value":{"description":"Active page for controlled component, must be an integer in [0, total] interval","name":"value","required":false,"type":{"name":"number"}},"withControls":{"description":"Determines whether next/previous controls should be rendered, true by default","name":"withControls","required":false,"type":{"name":"boolean"}},"withEdges":{"description":"Determines whether first/last controls should be rendered, false by default","name":"withEdges","required":false,"type":{"name":"boolean"}}}},"Paper":{"props":{"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"shadow":{"description":"Key of theme.shadows or any valid CSS value to set box-shadow, none by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"withBorder":{"description":"Determines whether the paper should have border, border color depends on color scheme, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}}}},"PasswordInput":{"props":{"defaultVisible":{"description":"Determines whether input content should be visible by default","name":"defaultVisible","required":false,"type":{"name":"boolean"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"onVisibilityChange":{"description":"Called when visibility changes","name":"onVisibilityChange","required":false,"type":{"name":"((visible: boolean) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"visibilityToggleButtonProps":{"description":"Props passed down to the visibility toggle button","name":"visibilityToggleButtonProps","required":false,"type":{"name":"Record"}},"visibilityToggleIcon":{"description":"A component to replace visibility toggle icon","name":"visibilityToggleIcon","required":false,"type":{"name":"FC<{ reveal: boolean; }>"}},"visible":{"description":"Determines whether input content should be visible","name":"visible","required":false,"type":{"name":"boolean"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Pill":{"props":{"disabled":{"description":"If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden","name":"disabled","required":false,"type":{"name":"boolean"}},"onRemove":{"description":"Called when the remove button is clicked","name":"onRemove","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. \'xl\' by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeButtonProps":{"description":"Props passed down to the remove button","name":"removeButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"size":{"description":"Controls pill font-size and padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withRemoveButton":{"description":"Determines whether the remove button should be displayed, false by default","name":"withRemoveButton","required":false,"type":{"name":"boolean"}}}},"PillsInput":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"PinInput":{"props":{"ariaLabel":{"description":"aria-label for the inputs","name":"ariaLabel","required":false,"type":{"name":"string"}},"autoFocus":{"description":"If set, the first input is focused when component is mounted, false by default","name":"autoFocus","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"disabled":{"description":"If set, disabled attribute is added to all inputs","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"If set, adds error styles and aria-invalid attribute to all inputs","name":"error","required":false,"type":{"name":"boolean"}},"form":{"description":"Hidden input form attribute","name":"form","required":false,"type":{"name":"string"}},"gap":{"description":"Key of theme.spacing or any valid CSS value to set gap between inputs, numbers are converted to rem, \'md\' by default","name":"gap","required":false,"type":{"name":"MantineSpacing"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"id":{"description":"Base id used for all inputs. By default, inputs\' ids are generated randomly.","name":"id","required":false,"type":{"name":"string"}},"inputMode":{"description":"inputmode attribute, inferred from the type prop if not specified","name":"inputMode","required":false,"type":{"name":"\\"search\\" | \\"text\\" | \\"none\\" | \\"tel\\" | \\"url\\" | \\"email\\" | \\"numeric\\" | \\"decimal\\"","raw":"\\"search\\" | \\"text\\" | \\"none\\" | \\"tel\\" | \\"url\\" | \\"email\\" | \\"numeric\\" | \\"decimal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"search\\""},{"value":"\\"text\\""},{"value":"\\"none\\""},{"value":"\\"tel\\""},{"value":"\\"url\\""},{"value":"\\"email\\""},{"value":"\\"numeric\\""},{"value":"\\"decimal\\""}]}},"inputType":{"description":"Inputs type attribute, inferred from the type prop if not specified","name":"inputType","required":false,"type":{"name":"HTMLInputTypeAttribute"}},"length":{"description":"Number of inputs, 4 by default","name":"length","required":false,"type":{"name":"number"}},"manageFocus":{"description":"Determines whether focus should be moved automatically to the next input once filled, true by default","name":"manageFocus","required":false,"type":{"name":"boolean"}},"mask":{"description":"Changes input type to \\"password\\", false by default","name":"mask","required":false,"type":{"name":"boolean"}},"name":{"description":"Hidden input name attribute","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onComplete":{"description":"Called when all inputs have value","name":"onComplete","required":false,"type":{"name":"((value: string) => void)"}},"oneTimeCode":{"description":"Determines whether autocomplete=\\"one-time-code\\" attribute should be set on all inputs, true by default","name":"oneTimeCode","required":false,"type":{"name":"boolean"}},"placeholder":{"description":"Inputs placeholder, \'○\' by default","name":"placeholder","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"If set, the user cannot edit the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls inputs width and height, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Determines which values can be entered, \'alphanumeric\' by default","name":"type","required":false,"type":{"name":"\\"number\\" | RegExp | \\"alphanumeric\\""}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}}}},"Popover":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Popover.Target and Popover.Dropdown components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clickOutsideEvents":{"description":"Events that trigger outside clicks","name":"clickOutsideEvents","required":false,"type":{"name":"string[]"}},"closeOnClickOutside":{"description":"Determines whether dropdown should be closed on outside clicks, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether dropdown should be closed when Escape key is pressed, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"defaultOpened":{"description":"Initial opened state for uncontrolled component","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"id":{"description":"id base to create accessibility connections","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onChange":{"description":"Called with current state when dropdown opens or closes","name":"onChange","required":false,"type":{"name":"((opened: boolean) => void)"}},"onClose":{"description":"Called when dropdown closes","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when dropdown opens","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"opened":{"description":"Controlled dropdown opened state","name":"opened","required":false,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped within dropdown, false by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withRoles":{"description":"Determines whether dropdown and target elements should have accessible roles, true by default","name":"withRoles","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Popover.Target":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"popupType":{"description":"Popup accessible type, \'dialog\' by default","name":"popupType","required":false,"type":{"name":"string"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"Popover.Dropdown":{"description":"","props":{}},"Portal":{"props":{"children":{"description":"Portal children, for example, custom modal or popover","name":"children","required":true,"type":{"name":"React.ReactNode"}},"target":{"description":"Element inside which portal should be created, by default a new div element is created and appended to the document.body","name":"target","required":false,"type":{"name":"string | HTMLElement"}}}},"Progress":{"props":{"animated":{"description":"Determines whether the sections stripes should be animated, if set, striped prop is ignored, false by default","name":"animated","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether label text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS value, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls track height, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"striped":{"description":"Determines whether the section should have stipes, false by default","name":"striped","required":false,"type":{"name":"boolean"}},"transitionDuration":{"description":"Controls sections width transition duration, value is specified in ms, 100 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"value":{"description":"Value of the progress","name":"value","required":true,"type":{"name":"number"}}}},"Radio":{"props":{"autoContrast":{"description":"Determines whether icon color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color to set input color in checked state, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"description":{"description":"Description displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"error":{"description":"Error displayed below the label","name":"error","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"A component that replaces default check icon","name":"icon","required":false,"type":{"name":"FC"}},"iconColor":{"description":"Key of theme.colors or any valid CSS color to set icon color, by default value depends on theme.autoContrast","name":"iconColor","required":false,"type":{"name":"MantineColor"}},"label":{"description":"Content of the label associated with the radio","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Position of the label relative to the input, \'right\' by default","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \\"xl\\" by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls size of the component, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Rating":{"props":{"color":{"description":"Key of theme.colors or any CSS color value, \'yellow\' by default","name":"color","required":false,"type":{"name":"MantineColor"}},"count":{"description":"Number of controls, 5 by default","name":"count","required":false,"type":{"name":"number"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"number"}},"emptySymbol":{"description":"Icon displayed when the symbol is empty","name":"emptySymbol","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"fractions":{"description":"Number of fractions each item can be divided into, 1 by default","name":"fractions","required":false,"type":{"name":"number"}},"fullSymbol":{"description":"Icon displayed when the symbol is full","name":"fullSymbol","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"getSymbolLabel":{"description":"A function to assign aria-label of the the control at index given in the argument. If not specified, control index is used as aria-label.","name":"getSymbolLabel","required":false,"type":{"name":"((index: number) => string)"}},"highlightSelectedOnly":{"description":"If set, only the selected symbol changes to full symbol when selected, false by default","name":"highlightSelectedOnly","required":false,"type":{"name":"boolean"}},"name":{"description":"name attribute passed down to all inputs. By default, name is generated randomly.","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onHover":{"description":"Called when one of the controls is hovered","name":"onHover","required":false,"type":{"name":"((value: number) => void)"}},"readOnly":{"description":"If set, the user cannot interact with the component, false by default","name":"readOnly","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls component size, \'sm\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"number"}}}},"RingProgress":{"props":{"label":{"description":"Label displayed in the center of the ring","name":"label","required":false,"type":{"name":"React.ReactNode"}},"rootColor":{"description":"Color of the root section, key of theme.colors or CSS color value","name":"rootColor","required":false,"type":{"name":"MantineColor"}},"roundCaps":{"description":"Sets whether the edges of the progress circle are rounded","name":"roundCaps","required":false,"type":{"name":"boolean"}},"sections":{"description":"Ring sections","name":"sections","required":true,"type":{"name":"RingProgressSection[]"}},"size":{"description":"Width and height of the progress ring","name":"size","required":false,"type":{"name":"number"}},"thickness":{"description":"Ring thickness","name":"thickness","required":false,"type":{"name":"number"}}}},"ScrollArea":{"props":{"offsetScrollbars":{"description":"Determines whether scrollbars should be offset with padding on given axis, false by default","name":"offsetScrollbars","required":false,"type":{"name":"boolean | \\"x\\" | \\"y\\""}},"onScrollPositionChange":{"description":"Called with current position (x and y coordinates) when viewport is scrolled","name":"onScrollPositionChange","required":false,"type":{"name":"((position: { x: number; y: number; }) => void)"}},"scrollHideDelay":{"description":"Scroll hide delay in ms, applicable only when type is set to hover or scroll, 1000 by default","name":"scrollHideDelay","required":false,"type":{"name":"number"}},"scrollbarSize":{"description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem","name":"scrollbarSize","required":false,"type":{"name":"string | number"}},"scrollbars":{"description":"Axis at which scrollbars must be rendered, \'xy\' by default","name":"scrollbars","required":false,"type":{"name":"false | \\"x\\" | \\"y\\" | \\"xy\\""}},"type":{"description":"Defines scrollbars behavior, hover by default\\n- hover – scrollbars are visible when mouse is over the scroll area\\n- scroll – scrollbars are visible when the scroll area is scrolled\\n- always – scrollbars are always visible\\n- never – scrollbars are always hidden\\n- auto – similar to overflow: auto – scrollbars are always visible when the content is overflowing","name":"type","required":false,"type":{"name":"\\"auto\\" | \\"scroll\\" | \\"always\\" | \\"hover\\" | \\"never\\"","raw":"\\"auto\\" | \\"scroll\\" | \\"always\\" | \\"hover\\" | \\"never\\" | undefined","value":[{"value":"undefined"},{"value":"\\"auto\\""},{"value":"\\"scroll\\""},{"value":"\\"always\\""},{"value":"\\"hover\\""},{"value":"\\"never\\""}]}},"viewportProps":{"description":"Props passed down to the viewport element","name":"viewportProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"viewportRef":{"description":"Assigns viewport element (scrollable container) ref","name":"viewportRef","required":false,"type":{"name":"ForwardedRef"}}}},"SegmentedControl":{"props":{"autoContrast":{"description":"Determines whether text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color, changes color of indicator, by default color is based on current color scheme","name":"color","required":false,"type":{"name":"MantineColor"}},"data":{"description":"Data based on which controls are rendered","name":"data","required":true,"type":{"name":"(string | SegmentedControlItem)[]"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"disabled":{"description":"Determines whether the component is disabled","name":"disabled","required":false,"type":{"name":"boolean"}},"fullWidth":{"description":"Determines whether the component should take 100% width of its parent, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"name":{"description":"Name of the radio group, by default random name is generated","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"orientation":{"description":"Determines in which orientation component id displayed, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the value can be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls font-size, padding and height properties, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"transitionDuration":{"description":"Indicator transition-duration in ms, set 0 to turn off transitions, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"Indicator transition-timing-function property, ease by default","name":"transitionTimingFunction","required":false,"type":{"name":"string"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withItemsBorders":{"description":"Determines whether there should be borders between items, true by default","name":"withItemsBorders","required":false,"type":{"name":"boolean"}}}},"Select":{"props":{"allowDeselect":{"description":"Determines whether it should be possible to deselect value by clicking on the selected option, true by default","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"checkIconPosition":{"description":"Position of the check icon relative to the option label, \'left\' by default","name":"checkIconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"(__CloseButtonProps & ElementProps<\\"button\\">)"}},"clearable":{"description":"Determines whether the clear button should be displayed in the right section when the component has value, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data used to generate options","name":"data","required":false,"type":{"name":"ComboboxData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultSearchValue":{"description":"Default search value","name":"defaultSearchValue","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string | null"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"nothingFoundMessage":{"description":"Message displayed when no option matched current search query, only applicable when searchable prop is set","name":"nothingFoundMessage","required":false,"type":{"name":"React.ReactNode"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string | null, option: ComboboxItem) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"onSearchChange":{"description":"Called when search changes","name":"onSearchChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"searchValue":{"description":"Controlled search value","name":"searchValue","required":false,"type":{"name":"string"}},"searchable":{"description":"Determines whether the select should be searchable, false by default","name":"searchable","required":false,"type":{"name":"boolean"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string | null"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCheckIcon":{"description":"Determines whether check icon should be displayed near the selected option label, true by default","name":"withCheckIcon","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"SimpleGrid":{"props":{"cols":{"description":"Number of columns, 1 by default","name":"cols","required":false,"type":{"name":"StyleProp"}},"spacing":{"description":"Spacing between columns, \'md\' by default","name":"spacing","required":false,"type":{"name":"StyleProp"}},"verticalSpacing":{"description":"Spacing between rows, \'md\' by default","name":"verticalSpacing","required":false,"type":{"name":"StyleProp"}}}},"Skeleton":{"props":{"animate":{"description":"Determines whether Skeleton should be animated, true by default","name":"animate","required":false,"type":{"name":"boolean"}},"circle":{"description":"If set, Skeleton width and border-radius are equal to its height, false by default","name":"circle","required":false,"type":{"name":"boolean"}},"height":{"description":"Skeleton height, numbers are converted to rem, auto by default","name":"height","required":false,"type":{"name":"Height"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"visible":{"description":"Determines whether Skeleton overlay should be displayed, true by default","name":"visible","required":false,"type":{"name":"boolean"}},"width":{"description":"Skeleton width, numbers are converted to rem, 100% by default, ignored when circle prop is set","name":"width","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}}}},"Space":{"description":"","props":{}},"Spoiler":{"props":{"controlRef":{"description":"Get ref of spoiler toggle button","name":"controlRef","required":false,"type":{"name":"ForwardedRef"}},"hideLabel":{"description":"Label for close spoiler action","name":"hideLabel","required":true,"type":{"name":"React.ReactNode"}},"initialState":{"description":"Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state is updated on mount","name":"initialState","required":false,"type":{"name":"boolean"}},"maxHeight":{"description":"Maximum height of the visible content, when this point is reached spoiler appears, 100 by default","name":"maxHeight","required":false,"type":{"name":"number"}},"showLabel":{"description":"Label for open spoiler action","name":"showLabel","required":true,"type":{"name":"React.ReactNode"}},"transitionDuration":{"description":"Spoiler reveal transition duration in ms, set 0 or null to turn off animation, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}}}},"Stack":{"props":{"align":{"description":"Controls align-items CSS property, \'stretch\' by default","name":"align","required":false,"type":{"name":"AlignItems"}},"gap":{"description":"Key of theme.spacing or any valid CSS value to set gap property, numbers are converted to rem, \'md\' by default","name":"gap","required":false,"type":{"name":"MantineSpacing"}},"justify":{"description":"Controls justify-content CSS property, \'flex-start\' by default","name":"justify","required":false,"type":{"name":"JustifyContent"}}}},"Stepper":{"props":{"active":{"description":"Index of the active step","name":"active","required":true,"type":{"name":"number"}},"allowNextStepsSelect":{"description":"Determines whether next steps can be selected, true by default *","name":"allowNextStepsSelect","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether icon color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":" components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls colors of active and progress steps, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"completedIcon":{"description":"Step icon displayed when step is completed, check icon by default","name":"completedIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"contentPadding":{"description":"Key of theme.spacing or any valid CSS value to set padding-top of the content","name":"contentPadding","required":false,"type":{"name":"MantineSpacing"}},"icon":{"description":"Step icon, default value is step index + 1","name":"icon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"iconPosition":{"description":"Icon position relative to the step body, \'left\' by default","name":"iconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"iconSize":{"description":"Controls size of the step icon, by default icon size is inferred from size prop","name":"iconSize","required":false,"type":{"name":"string | number"}},"onStepClick":{"description":"Called when step is clicked","name":"onStepClick","required":false,"type":{"name":"((stepIndex: number) => void)"}},"orientation":{"description":"Stepper orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"progressIcon":{"description":"Step icon displayed when step is in progress, default value is step index + 1","name":"progressIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set steps border-radius, \\"xl\\" by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls size of various Stepper elements","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"wrap":{"description":"Determines whether steps should wrap to the next line if no space is available, true by default","name":"wrap","required":false,"type":{"name":"boolean"}}}},"Switch":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color to set input color in checked state, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"description":{"description":"Description displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"error":{"description":"Error displayed below the label","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Id used to bind input and label, if not passed, unique id will be generated instead","name":"id","required":false,"type":{"name":"string"}},"label":{"description":"Content of the label associated with the radio","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Position of the label relative to the input, \'right\' by default","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"offLabel":{"description":"Inner label when the Switch is in unchecked state","name":"offLabel","required":false,"type":{"name":"React.ReactNode"}},"onLabel":{"description":"Inner label when the Switch is in checked state","name":"onLabel","required":false,"type":{"name":"React.ReactNode"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \\"xl\\" by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls size of all elements","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"thumbIcon":{"description":"Icon inside the thumb of the switch","name":"thumbIcon","required":false,"type":{"name":"React.ReactNode"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Table":{"props":{"borderColor":{"description":"Color of table borders, key of theme.colors or any valid CSS color","name":"borderColor","required":false,"type":{"name":"MantineColor"}},"captionSide":{"description":"Determines on which side Table.Caption is displayed, bottom by default","name":"captionSide","required":false,"type":{"name":"\\"bottom\\" | \\"top\\"","raw":"\\"bottom\\" | \\"top\\" | undefined","value":[{"value":"undefined"},{"value":"\\"bottom\\""},{"value":"\\"top\\""}]}},"data":{"description":"Data that should be used to generate table, ignored if children prop is set","name":"data","required":false,"type":{"name":"TableData"}},"highlightOnHover":{"description":"Determines whether table rows background should change to highlightOnHoverColor when hovered, false by default","name":"highlightOnHover","required":false,"type":{"name":"boolean"}},"highlightOnHoverColor":{"description":"Background color of table rows when hovered, key of theme.colors or any valid CSS color","name":"highlightOnHoverColor","required":false,"type":{"name":"MantineColor"}},"horizontalSpacing":{"description":"Horizontal cells spacing, key of theme.spacing or any valid CSS value for padding, numbers are converted to rem, default value is xs","name":"horizontalSpacing","required":false,"type":{"name":"MantineSpacing"}},"layout":{"description":"Value of table-layout style, auto by default","name":"layout","required":false,"type":{"name":"TableLayout","raw":"TableLayout | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"auto\\""},{"value":"\\"fixed\\""}]}},"stickyHeader":{"description":"Determines whether Table.Thead should be sticky, false by default","name":"stickyHeader","required":false,"type":{"name":"boolean"}},"stickyHeaderOffset":{"description":"Offset from top at which Table.Thead should become sticky, 0 by default","name":"stickyHeaderOffset","required":false,"type":{"name":"string | number"}},"striped":{"description":"Determines whether every odd/even row background should be changed to strippedColor, if set to true, then odd value will be used, false by default","name":"striped","required":false,"type":{"name":"boolean | \\"odd\\" | \\"even\\""}},"stripedColor":{"description":"Background color of striped rows, key of theme.colors or any valid CSS color","name":"stripedColor","required":false,"type":{"name":"MantineColor"}},"verticalSpacing":{"description":"Vertical cells spacing, key of theme.spacing or any valid CSS value for padding, numbers are converted to rem, default value is xs","name":"verticalSpacing","required":false,"type":{"name":"MantineSpacing"}},"withColumnBorders":{"description":"Determines whether the table should have borders between columns, false by default","name":"withColumnBorders","required":false,"type":{"name":"boolean"}},"withRowBorders":{"description":"Determines whether the table should have borders between rows, true by default","name":"withRowBorders","required":false,"type":{"name":"boolean"}},"withTableBorder":{"description":"Determines whether the table should have outer border, false by default","name":"withTableBorder","required":false,"type":{"name":"boolean"}}}},"Tabs":{"props":{"activateTabWithKeyboard":{"description":"Determines whether tab should be activated with arrow key press, true by default","name":"activateTabWithKeyboard","required":false,"type":{"name":"boolean"}},"allowTabDeactivation":{"description":"Determines whether tab can be deactivated, false by default","name":"allowTabDeactivation","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether active item text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast. Only applicable when variant=\\"pills\\"","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Tabs content","name":"children","required":true,"type":{"name":"React.ReactNode"}},"color":{"description":"Changes colors of Tabs.Tab components when variant is pills or default, does nothing for other variants","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string | null"}},"id":{"description":"Base id, used to generate ids to connect labels with controls, generated randomly by default","name":"id","required":false,"type":{"name":"string"}},"inverted":{"description":"Determines whether tabs should have inverted styles, false by default","name":"inverted","required":false,"type":{"name":"boolean"}},"keepMounted":{"description":"If set to false, Tabs.Panel content will be unmounted when the associated tab is not active, true by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"loop":{"description":"Determines whether arrow key presses should loop though items (first to last and last to first), true by default","name":"loop","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string | null) => void)"}},"orientation":{"description":"Tabs orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"placement":{"description":"Tabs.List placement relative to Tabs.Panel, applicable only when orientation=\\"vertical\\", \'left\' by default","name":"placement","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"string | null"}}}},"TagsInput":{"props":{"allowDuplicates":{"description":"Determines whether duplicate tags are allowed, false by default","name":"allowDuplicates","required":false,"type":{"name":"boolean"}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"(__CloseButtonProps & ElementProps<\\"button\\">)"}},"clearable":{"description":"Determines whether the clear button should be displayed in the right section when the component has value, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data displayed in the dropdown","name":"data","required":false,"type":{"name":"ComboboxStringData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultSearchValue":{"description":"Default search value","name":"defaultSearchValue","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"hiddenInputValuesDivider":{"description":"Divider used to separate values in the hidden input value attribute, \',\' by default","name":"hiddenInputValuesDivider","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"maxTags":{"description":"Maximum number of tags, Infinity by default","name":"maxTags","required":false,"type":{"name":"number"}},"onChange":{"description":"Called whe value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onDuplicate":{"description":"Called when user tries to submit a duplicated tag","name":"onDuplicate","required":false,"type":{"name":"((value: string) => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"onSearchChange":{"description":"Called when search changes","name":"onSearchChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"searchValue":{"description":"Controlled search value","name":"searchValue","required":false,"type":{"name":"string"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"splitChars":{"description":"Characters that should trigger tags split, [\',\'] by default","name":"splitChars","required":false,"type":{"name":"string[]"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Text":{"props":{"color":{"description":"@deprecated Use c prop instead","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient configuration, ignored when variant is not gradient, theme.defaultGradient by default","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"inherit":{"description":"Determines whether font properties should be inherited from the parent, false by default","name":"inherit","required":false,"type":{"name":"boolean"}},"inline":{"description":"Sets line-height to 1 for centering, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"span":{"description":"Shorthand for component=\\"span\\", false by default, default root element is p","name":"span","required":false,"type":{"name":"boolean"}},"truncate":{"description":"Side on which Text must be truncated, if true, text is truncated from the start","name":"truncate","required":false,"type":{"name":"TextTruncate"}}}},"TextInput":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Textarea":{"props":{"autosize":{"description":"Determines whether the textarea height should grow with its content, false by default","name":"autosize","required":false,"type":{"name":"boolean"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"maxRows":{"description":"Maximum rows for autosize textarea to grow, ignored if autosize prop is not set","name":"maxRows","required":false,"type":{"name":"number"}},"minRows":{"description":"Minimum rows of autosize textarea, ignored if autosize prop is not set","name":"minRows","required":false,"type":{"name":"number"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"resize":{"description":"Controls resize CSS property, \'none\' by default","name":"resize","required":false,"type":{"name":"Resize","raw":"Resize | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"block\\""},{"value":"\\"inline\\""},{"value":"\\"both\\""},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"ThemeIcon":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Icon displayed inside the component","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color. Default value is theme.primaryColor.","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient data used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the button. Numbers are converted to rem. \'md\' by default.","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Timeline":{"props":{"active":{"description":"Index of active element","name":"active","required":false,"type":{"name":"number"}},"align":{"description":"Controls how the content is positioned relative to the bullet, \'left\' by default","name":"align","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"autoContrast":{"description":"Determines whether icon color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"bulletSize":{"description":"Controls size of the bullet, 20 by default","name":"bulletSize","required":false,"type":{"name":"string | number"}},"children":{"description":"Timeline.Item components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color to control active item colors, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"lineWidth":{"description":"Control width of the line","name":"lineWidth","required":false,"type":{"name":"string | number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"reverseActive":{"description":"Determines whether the active items direction should be reversed without reversing items order, false by default","name":"reverseActive","required":false,"type":{"name":"boolean"}}}},"Title":{"props":{"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"order":{"description":"Determines which tag will be used (h1-h6), controls font-size style if size prop is not set, 1 by default","name":"order","required":false,"type":{"name":"TitleOrder","raw":"TitleOrder | undefined","value":[{"value":"undefined"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"size":{"description":"Changes title size, if not set, then size is controlled by order prop","name":"size","required":false,"type":{"name":"TitleSize"}},"textWrap":{"description":"Controls text-wrap property, \'wrap\' by default","name":"textWrap","required":false,"type":{"name":"\\"wrap\\" | \\"nowrap\\" | \\"balance\\" | \\"pretty\\" | \\"stable\\"","raw":"\\"wrap\\" | \\"nowrap\\" | \\"balance\\" | \\"pretty\\" | \\"stable\\" | undefined","value":[{"value":"undefined"},{"value":"\\"wrap\\""},{"value":"\\"nowrap\\""},{"value":"\\"balance\\""},{"value":"\\"pretty\\""},{"value":"\\"stable\\""}]}}}},"Tooltip":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position relative to the tooltip, side by default","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 4 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Target element, must support ref prop and ...others","name":"children","required":true,"type":{"name":"React.ReactNode"}},"closeDelay":{"description":"Close delay in ms, 0 by default","name":"closeDelay","required":false,"type":{"name":"number"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls tooltip background, by default set based on current color scheme","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"If set, tooltip element will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"events":{"description":"Determines which events will be used to show tooltip, { hover: true, focus: false, touch: false } by default","name":"events","required":false,"type":{"name":"{ hover: boolean; focus: boolean; touch: boolean; }"}},"inline":{"description":"Must be set if the tooltip target is an inline element","name":"inline","required":false,"type":{"name":"boolean"}},"keepMounted":{"description":"If set, the tooltip will not be unmounted from the DOM when it is hidden, display: none styles will be applied instead","name":"keepMounted","required":false,"type":{"name":"boolean"}},"label":{"description":"Tooltip content","name":"label","required":true,"type":{"name":"React.ReactNode"}},"multiline":{"description":"Determines whether content should be wrapped on to the next line, false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"offset":{"description":"Space between target element and tooltip in px, 5 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onPositionChange":{"description":"Called when tooltip position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"openDelay":{"description":"Open delay in ms","name":"openDelay","required":false,"type":{"name":"number"}},"opened":{"description":"Controlled opened state","name":"opened","required":false,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Tooltip position relative to target element (Tooltip component) or mouse (Tooltip.Floating component)","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update tooltip position","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"refProp":{"description":"Key of the prop that can be used to access element ref, ref by default","name":"refProp","required":false,"type":{"name":"string"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate tooltip presence, use to configure duration and animation type, { duration: 100, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"withArrow":{"description":"Determines whether the tooltip should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether tooltip should be rendered within Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Tooltip z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Transition":{"props":{"children":{"description":"Render function with transition styles argument","name":"children","required":true,"type":{"name":"(styles: CSSProperties) => Element"}},"duration":{"description":"Transition duration in ms, 250 by default","name":"duration","required":false,"type":{"name":"number"}},"exitDuration":{"description":"Exit transition duration in ms, 250 by default","name":"exitDuration","required":false,"type":{"name":"number"}},"keepMounted":{"description":"If set element will not be unmounted from the DOM when it is hidden, display: none styles will be applied instead","name":"keepMounted","required":false,"type":{"name":"boolean"}},"mounted":{"description":"Determines whether component should be mounted to the DOM","name":"mounted","required":true,"type":{"name":"boolean"}},"onEnter":{"description":"Called when enter transition starts","name":"onEnter","required":false,"type":{"name":"(() => void)"}},"onEntered":{"description":"Called when enter transition ends","name":"onEntered","required":false,"type":{"name":"(() => void)"}},"onExit":{"description":"Called when exit transition starts","name":"onExit","required":false,"type":{"name":"(() => void)"}},"onExited":{"description":"Called when exit transition ends","name":"onExited","required":false,"type":{"name":"(() => void)"}},"timingFunction":{"description":"Transition timing function, theme.transitionTimingFunction by default","name":"timingFunction","required":false,"type":{"name":"string"}},"transition":{"description":"Transition name or object","name":"transition","required":false,"type":{"name":"MantineTransition"}}}},"TypographyStylesProvider":{"description":"","props":{}},"UnstyledButton":{"props":{"size":{"description":"Size passed from parent component, sets data-size if value is not number like","name":"size","required":false,"type":{"name":"string | number"}}}},"VisuallyHidden":{"description":"","props":{}},"Calendar":{"props":{"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"minLevel":{"description":"Min level that user can go down to (decade, year, month), defaults to month","name":"minLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthMouseEnter":{"description":"Called when mouse enters month control","name":"onMonthMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearMouseEnter":{"description":"Called when mouse enters year control","name":"onYearMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"CalendarHeader":{"props":{"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"label":{"description":"Label displayed between next and previous buttons","name":"label","required":true,"type":{"name":"React.ReactNode"}},"levelControlAriaLabel":{"description":"aria-label for level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}}}},"DateInput":{"props":{"allowDeselect":{"description":"Determines whether value can be deselected when the user clicks on the selected date in the calendar (only when clearable prop is set), defaults to true if clearable prop is set, false otherwise","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props added to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"dateParser":{"description":"Parses user input to convert it to Date object","name":"dateParser","required":false,"type":{"name":"((value: string) => Date | null)"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"fixOnBlur":{"description":"Determines whether input value should be reverted to last known valid value on blur, true by default","name":"fixOnBlur","required":false,"type":{"name":"boolean"}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DateValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props added to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"preserveTime":{"description":"Determines whether time (hours, minutes, seconds and milliseconds) should be preserved when new date is picked, true by default","name":"preserveTime","required":false,"type":{"name":"boolean"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue"}},"valueFormat":{"description":"Dayjs format to display input value, \\"MMMM D, YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DatePicker":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthMouseEnter":{"description":"Called when mouse enters month control","name":"onMonthMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearMouseEnter":{"description":"Called when mouse enters year control","name":"onYearMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DatePickerInput":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthMouseEnter":{"description":"Called when mouse enters month control","name":"onMonthMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearMouseEnter":{"description":"Called when mouse enters year control","name":"onYearMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"valueFormat":{"description":"Dayjs format to display input value, \\"MMMM D, YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DateTimePicker":{"props":{"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DateValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"submitButtonProps":{"description":"Props passed down to the submit button","name":"submitButtonProps","required":false,"type":{"name":"(ActionIconProps & Omit, HTMLButtonElement>, \\"ref\\">)"}},"timeInputProps":{"description":"TimeInput component props","name":"timeInputProps","required":false,"type":{"name":"(TimeInputProps & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject | null; }) | undefined"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"DateValue"}},"valueFormat":{"description":"Dayjs format to display input value, \\"DD/MM/YYYY HH:mm\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withSeconds":{"description":"Determines whether seconds input should be rendered","name":"withSeconds","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DatesProvider":{"props":{"settings":{"description":"","name":"settings","required":true,"type":{"name":"Partial"}}}},"Day":{"props":{"date":{"description":"Date that should be displayed","name":"date","required":true,"type":{"name":"Date"}},"firstInRange":{"description":"Determines whether the day is first in range selection, false by default","name":"firstInRange","required":false,"type":{"name":"boolean"}},"hidden":{"description":"Determines whether the day should not de displayed, false by default","name":"hidden","required":false,"type":{"name":"boolean"}},"inRange":{"description":"Determines whether the day is selected in range, false by default","name":"inRange","required":false,"type":{"name":"boolean"}},"lastInRange":{"description":"Determines whether the day is last in range selection, false by default","name":"lastInRange","required":false,"type":{"name":"boolean"}},"outside":{"description":"Determines whether the day is outside of the current month, false by default","name":"outside","required":false,"type":{"name":"boolean"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"selected":{"description":"Determines whether the day is selected, false by default","name":"selected","required":false,"type":{"name":"boolean"}},"size":{"description":"Control width and height of the day, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines which element should be used as root, \'button\' by default, \'div\' if static prop is set","name":"static","required":false,"type":{"name":"boolean"}},"weekend":{"description":"Determines whether the day should be considered to be a weekend, false by default","name":"weekend","required":false,"type":{"name":"boolean"}}}},"DecadeLevel":{"props":{"decade":{"description":"Decade that is currently displayed","name":"decade","required":true,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"levelControlAriaLabel":{"description":"aria-label for change level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DecadeLevelGroup":{"props":{"decade":{"description":"Decade that is currently displayed","name":"decade","required":true,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"levelControlAriaLabel":{"description":"Function that returns level control aria-label based on year date","name":"levelControlAriaLabel","required":false,"type":{"name":"string | ((decade: Date) => string)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"HiddenDatesInput":{"props":{"form":{"description":"","name":"form","required":true,"type":{"name":"string"}},"name":{"description":"","name":"name","required":true,"type":{"name":"string"}},"type":{"description":"","name":"type","required":true,"type":{"name":"DatePickerType","raw":"DatePickerType","value":[{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"","name":"value","required":true,"type":{"name":"HiddenDatesInputValue"}}}},"LevelsGroup":{"props":{"size":{"description":"","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}}}},"Month":{"props":{"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"month":{"description":"Month to display","name":"month","required":true,"type":{"name":"Date"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}}}},"MonthLevel":{"props":{"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"aria-label for change level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"month":{"description":"Month that is currently displayed","name":"month","required":true,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}}}},"MonthLevelGroup":{"props":{"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"Function that returns level control aria-label based on month date","name":"levelControlAriaLabel","required":false,"type":{"name":"string | ((month: Date) => string)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"month":{"description":"Month that is currently displayed","name":"month","required":true,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}}}},"MonthPicker":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year), defaults to decade","name":"maxLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: MonthPickerLevel) => void)"}},"onMonthSelect":{"description":"Called when month is selected","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"MonthPickerInput":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year), defaults to decade","name":"maxLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: MonthPickerLevel) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"valueFormat":{"description":"Dayjs format to display input value, \\"MMMM YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"MonthsList":{"props":{"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"year":{"description":"Year for which months list should be displayed","name":"year","required":true,"type":{"name":"Date"}}}},"PickerControl":{"props":{"children":{"description":"Control children","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Determines whether control should be disabled","name":"disabled","required":false,"type":{"name":"boolean"}},"firstInRange":{"description":"Determines whether control is first in range selection","name":"firstInRange","required":false,"type":{"name":"boolean"}},"inRange":{"description":"Determines whether control is selected in range","name":"inRange","required":false,"type":{"name":"boolean"}},"lastInRange":{"description":"Determines whether control is last in range selection","name":"lastInRange","required":false,"type":{"name":"boolean"}},"selected":{"description":"Determines whether control should have selected styles","name":"selected","required":false,"type":{"name":"boolean"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}}}},"PickerInputBase":{"props":{"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownHandlers":{"description":"","name":"dropdownHandlers","required":true,"type":{"name":"{ readonly open: () => void; readonly close: () => void; readonly toggle: () => void; }"}},"dropdownOpened":{"description":"","name":"dropdownOpened","required":true,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"formattedValue":{"description":"","name":"formattedValue","required":true,"type":{"name":"string | null"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"onClear":{"description":"","name":"onClear","required":true,"type":{"name":"() => void"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"shouldClear":{"description":"","name":"shouldClear","required":true,"type":{"name":"boolean"}},"size":{"description":"","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"","name":"type","required":true,"type":{"name":"DatePickerType","raw":"DatePickerType","value":[{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"","name":"value","required":true,"type":{"name":"HiddenDatesInputValue"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"TimeInput":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withSeconds":{"description":"Determines whether seconds input should be rendered","name":"withSeconds","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"WeekdaysRow":{"props":{"cellComponent":{"description":"Choose cell type that will be used to render weekdays, defaults to th","name":"cellComponent","required":false,"type":{"name":"\\"td\\" | \\"th\\"","raw":"\\"td\\" | \\"th\\" | undefined","value":[{"value":"undefined"},{"value":"\\"td\\""},{"value":"\\"th\\""}]}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"weekdayFormat":{"description":"dayjs format to get weekday name, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}}}},"YearLevel":{"props":{"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"aria-label for change level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}},"year":{"description":"Year that is currently displayed","name":"year","required":true,"type":{"name":"Date"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}}}},"YearLevelGroup":{"props":{"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"Function that returns level control aria-label based on year date","name":"levelControlAriaLabel","required":false,"type":{"name":"string | ((year: Date) => string)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"year":{"description":"Year that is currently displayed","name":"year","required":true,"type":{"name":"Date"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}}}},"YearPicker":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onYearSelect":{"description":"Called when year is selected","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"YearPickerInput":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"valueFormat":{"description":"Dayjs format to display input value, \\"YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"YearsList":{"props":{"decade":{"description":"Decade for which years list should be displayed","name":"decade","required":true,"type":{"name":"Date"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"AreaChart":{"props":{"activeDotProps":{"description":"Props passed down to all active dots. Ignored if withDots={false} is set.","name":"activeDotProps","required":false,"type":{"name":"RechartsProps"}},"areaChartProps":{"description":"Props passed down to recharts AreaChart component","name":"areaChartProps","required":false,"type":{"name":"RechartsProps"}},"connectNulls":{"description":"Determines whether points with null values should be connected, true by default","name":"connectNulls","required":false,"type":{"name":"boolean"}},"curveType":{"description":"Type of the curve, \'monotone\' by default","name":"curveType","required":false,"type":{"name":"AreaChartCurveType","raw":"AreaChartCurveType | undefined","value":[{"value":"undefined"},{"value":"\\"step\\""},{"value":"\\"linear\\""},{"value":"\\"bump\\""},{"value":"\\"natural\\""},{"value":"\\"monotone\\""},{"value":"\\"stepBefore\\""},{"value":"\\"stepAfter\\""}]}},"data":{"description":"Data used to display chart","name":"data","required":true,"type":{"name":"ChartData"}},"dataKey":{"description":"Key of the data object for x-axis values","name":"dataKey","required":true,"type":{"name":"string"}},"dotProps":{"description":"Props passed down to all dots. Ignored if withDots={false} is set.","name":"dotProps","required":false,"type":{"name":"RechartsProps"}},"fillOpacity":{"description":"Controls fill opacity of all areas, 0.2 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"gridAxis":{"description":"Specifies which lines should be displayed in the grid, \'x\' by default","name":"gridAxis","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"gridColor":{"description":"Color of the grid and cursor lines, by default depends on color scheme","name":"gridColor","required":false,"type":{"name":"MantineColor"}},"gridProps":{"description":"Props passed down to the CartesianGrid component","name":"gridProps","required":false,"type":{"name":"RechartsProps"}},"legendProps":{"description":"Props passed down to the Legend component","name":"legendProps","required":false,"type":{"name":"RechartsProps"}},"orientation":{"description":"Chart orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"referenceLines":{"description":"Reference lines that should be displayed on the chart","name":"referenceLines","required":false,"type":{"name":"ChartReferenceLineProps[]"}},"series":{"description":"An array of objects with name and color keys. Determines which data should be consumed from the data array.","name":"series","required":true,"type":{"name":"AreaChartSeries[]"}},"splitColors":{"description":"A tuple of colors used when type=\\"split\\" is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors [\'green.7\', \'red.7\'] by default.","name":"splitColors","required":false,"type":{"name":"[MantineColor, MantineColor]"}},"splitOffset":{"description":"Offset for the split gradient. By default, value is inferred from data and series if possible. Must be generated from the data array with getSplitOffset function.","name":"splitOffset","required":false,"type":{"name":"number"}},"strokeDasharray":{"description":"Dash array for the grid lines and cursor, \'5 5\' by default","name":"strokeDasharray","required":false,"type":{"name":"string | number"}},"strokeWidth":{"description":"Stroke width for the chart areas, 2 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"textColor":{"description":"Color of the text displayed inside the chart, \'dimmed\' by default","name":"textColor","required":false,"type":{"name":"MantineColor"}},"tickLine":{"description":"Specifies which axis should have tick line, \'y\' by default","name":"tickLine","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"tooltipAnimationDuration":{"description":"Tooltip position animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipProps":{"description":"Props passed down to the Tooltip component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"type":{"description":"Controls how chart areas are positioned relative to each other, \'default\' by default","name":"type","required":false,"type":{"name":"AreaChartType","raw":"AreaChartType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"stacked\\""},{"value":"\\"percent\\""},{"value":"\\"split\\""}]}},"unit":{"description":"Unit displayed next to each tick in y-axis","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values on Y axis and inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withDots":{"description":"Determines whether dots should be displayed, true by default","name":"withDots","required":false,"type":{"name":"boolean"}},"withGradient":{"description":"Determines whether the chart area should be represented with a gradient instead of the solid color, false by default","name":"withGradient","required":false,"type":{"name":"boolean"}},"withLegend":{"description":"Determines whether chart legend should be displayed, false by default","name":"withLegend","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether chart tooltip should be displayed, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}},"withXAxis":{"description":"Determines whether x-axis should be hidden, true by default","name":"withXAxis","required":false,"type":{"name":"boolean"}},"withYAxis":{"description":"Determines whether y-axis should be hidden, true by default","name":"withYAxis","required":false,"type":{"name":"boolean"}},"xAxisProps":{"description":"Props passed down to the XAxis recharts component","name":"xAxisProps","required":false,"type":{"name":"RechartsProps"}},"yAxisProps":{"description":"Props passed down to the YAxis recharts component","name":"yAxisProps","required":false,"type":{"name":"RechartsProps"}}}},"BarChart":{"props":{"barChartProps":{"description":"Props passed down to recharts BarChart component","name":"barChartProps","required":false,"type":{"name":"RechartsProps"}},"cursorFill":{"description":"Fill of hovered bar section, by default value is based on color scheme","name":"cursorFill","required":false,"type":{"name":"MantineColor"}},"data":{"description":"Data used to display chart","name":"data","required":true,"type":{"name":"Record[]"}},"dataKey":{"description":"Key of the data object for x-axis values","name":"dataKey","required":true,"type":{"name":"string"}},"fillOpacity":{"description":"Controls fill opacity of all bars, 1 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"gridAxis":{"description":"Specifies which lines should be displayed in the grid, \'x\' by default","name":"gridAxis","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"gridColor":{"description":"Color of the grid and cursor lines, by default depends on color scheme","name":"gridColor","required":false,"type":{"name":"MantineColor"}},"gridProps":{"description":"Props passed down to the CartesianGrid component","name":"gridProps","required":false,"type":{"name":"RechartsProps"}},"legendProps":{"description":"Props passed down to the Legend component","name":"legendProps","required":false,"type":{"name":"RechartsProps"}},"orientation":{"description":"Chart orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"referenceLines":{"description":"Reference lines that should be displayed on the chart","name":"referenceLines","required":false,"type":{"name":"ChartReferenceLineProps[]"}},"series":{"description":"An array of objects with name and color keys. Determines which data should be consumed from the data array.","name":"series","required":true,"type":{"name":"BarChartSeries[]"}},"strokeDasharray":{"description":"Dash array for the grid lines and cursor, \'5 5\' by default","name":"strokeDasharray","required":false,"type":{"name":"string | number"}},"textColor":{"description":"Color of the text displayed inside the chart, \'dimmed\' by default","name":"textColor","required":false,"type":{"name":"MantineColor"}},"tickLine":{"description":"Specifies which axis should have tick line, \'y\' by default","name":"tickLine","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"tooltipAnimationDuration":{"description":"Tooltip position animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipProps":{"description":"Props passed down to the Tooltip component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"type":{"description":"Controls how bars are positioned relative to each other, \'default\' by default","name":"type","required":false,"type":{"name":"BarChartType","raw":"BarChartType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"stacked\\""},{"value":"\\"percent\\""}]}},"unit":{"description":"Unit displayed next to each tick in y-axis","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values on Y axis and inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withLegend":{"description":"Determines whether chart legend should be displayed, false by default","name":"withLegend","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether chart tooltip should be displayed, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}},"withXAxis":{"description":"Determines whether x-axis should be hidden, true by default","name":"withXAxis","required":false,"type":{"name":"boolean"}},"withYAxis":{"description":"Determines whether y-axis should be hidden, true by default","name":"withYAxis","required":false,"type":{"name":"boolean"}},"xAxisProps":{"description":"Props passed down to the XAxis recharts component","name":"xAxisProps","required":false,"type":{"name":"RechartsProps"}},"yAxisProps":{"description":"Props passed down to the YAxis recharts component","name":"yAxisProps","required":false,"type":{"name":"RechartsProps"}}}},"ChartLegend":{"description":"","props":{}},"ChartTooltip":{"props":{"label":{"description":"Main tooltip label","name":"label","required":false,"type":{"name":"React.ReactNode"}},"payload":{"description":"Chart data provided by recharts","name":"payload","required":true,"type":{"name":"Record[]"}},"segmentId":{"description":"Id of the segment to display data for. Only applicable when type=\\"radial\\". If not set, all data is rendered.","name":"segmentId","required":false,"type":{"name":"string"}},"series":{"description":"Chart series data, applicable only for area type","name":"series","required":false,"type":{"name":"ChartSeries[]"}},"type":{"description":"Tooltip type that determines the content and styles, area for LineChart, AreaChart and BarChart, radial for DonutChart and PieChart, \'area\' by default","name":"type","required":false,"type":{"name":"\\"area\\" | \\"radial\\"","raw":"\\"area\\" | \\"radial\\" | undefined","value":[{"value":"undefined"},{"value":"\\"area\\""},{"value":"\\"radial\\""}]}},"unit":{"description":"Data units, provided by parent component","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}}}},"DonutChart":{"props":{"chartLabel":{"description":"Chart label, displayed in the center of the chart","name":"chartLabel","required":false,"type":{"name":"string | number"}},"children":{"description":"Additional elements rendered inside PieChart component","name":"children","required":false,"type":{"name":"React.ReactNode"}},"data":{"description":"Data used to render chart","name":"data","required":true,"type":{"name":"DonutChartCell[]"}},"endAngle":{"description":"Controls angle at which charts ends, 360 by default. Set to 0 to render the chart as semicircle.","name":"endAngle","required":false,"type":{"name":"number"}},"labelColor":{"description":"Controls text color of all labels, by default depends on color scheme","name":"labelColor","required":false,"type":{"name":"MantineColor"}},"paddingAngle":{"description":"Controls padding between segments, 0 by default","name":"paddingAngle","required":false,"type":{"name":"number"}},"pieChartProps":{"description":"Props passed down to recharts PieChart component","name":"pieChartProps","required":false,"type":{"name":"RechartsProps"}},"pieProps":{"description":"Props passed down to recharts Pie component","name":"pieProps","required":false,"type":{"name":"RechartsProps"}},"size":{"description":"Controls chart width and height, height is increased by 40 if withLabels prop is set. Cannot be less than thickness. 80 by default","name":"size","required":false,"type":{"name":"number"}},"startAngle":{"description":"Controls angle at which chart starts, 0 by default. Set to 180 to render the chart as semicircle.","name":"startAngle","required":false,"type":{"name":"number"}},"strokeColor":{"description":"Controls color of the segments stroke, by default depends on color scheme","name":"strokeColor","required":false,"type":{"name":"MantineColor"}},"strokeWidth":{"description":"Controls width of segments stroke, 1 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"thickness":{"description":"Controls thickness of the chart segments, 20 by default","name":"thickness","required":false,"type":{"name":"number"}},"tooltipAnimationDuration":{"description":"Tooltip animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipDataSource":{"description":"Determines which data is displayed in the tooltip. \'all\' – display all values, \'segment\' – display only hovered segment. \'all\' by default.","name":"tooltipDataSource","required":false,"type":{"name":"\\"all\\" | \\"segment\\"","raw":"\\"all\\" | \\"segment\\" | undefined","value":[{"value":"undefined"},{"value":"\\"all\\""},{"value":"\\"segment\\""}]}},"tooltipProps":{"description":"Props passed down to Tooltip recharts component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"valueFormatter":{"description":"A function to format values inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withLabels":{"description":"Determines whether each segment should have associated label, false by default","name":"withLabels","required":false,"type":{"name":"boolean"}},"withLabelsLine":{"description":"Determines whether segments labels should have lines that connect the segment with the label, true by default","name":"withLabelsLine","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether the tooltip should be displayed when one of the section is hovered, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}}}},"LineChart":{"props":{"activeDotProps":{"description":"Props passed down to all active dots. Ignored if withDots={false} is set.","name":"activeDotProps","required":false,"type":{"name":"RechartsProps"}},"connectNulls":{"description":"Determines whether points with null values should be connected, true by default","name":"connectNulls","required":false,"type":{"name":"boolean"}},"curveType":{"description":"Type of the curve, \'monotone\' by default","name":"curveType","required":false,"type":{"name":"LineChartCurveType","raw":"LineChartCurveType | undefined","value":[{"value":"undefined"},{"value":"\\"step\\""},{"value":"\\"linear\\""},{"value":"\\"bump\\""},{"value":"\\"natural\\""},{"value":"\\"monotone\\""},{"value":"\\"stepBefore\\""},{"value":"\\"stepAfter\\""}]}},"data":{"description":"Data used to display chart","name":"data","required":true,"type":{"name":"Record[]"}},"dataKey":{"description":"Key of the data object for x-axis values","name":"dataKey","required":true,"type":{"name":"string"}},"dotProps":{"description":"Props passed down to all dots. Ignored if withDots={false} is set.","name":"dotProps","required":false,"type":{"name":"RechartsProps"}},"fillOpacity":{"description":"Controls fill opacity of all lines, 1 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"gridAxis":{"description":"Specifies which lines should be displayed in the grid, \'x\' by default","name":"gridAxis","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"gridColor":{"description":"Color of the grid and cursor lines, by default depends on color scheme","name":"gridColor","required":false,"type":{"name":"MantineColor"}},"gridProps":{"description":"Props passed down to the CartesianGrid component","name":"gridProps","required":false,"type":{"name":"RechartsProps"}},"legendProps":{"description":"Props passed down to the Legend component","name":"legendProps","required":false,"type":{"name":"RechartsProps"}},"lineChartProps":{"description":"Props passed down to recharts LineChart component","name":"lineChartProps","required":false,"type":{"name":"RechartsProps"}},"orientation":{"description":"Chart orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"referenceLines":{"description":"Reference lines that should be displayed on the chart","name":"referenceLines","required":false,"type":{"name":"ChartReferenceLineProps[]"}},"series":{"description":"An array of objects with name and color keys. Determines which data should be consumed from the data array.","name":"series","required":true,"type":{"name":"LineChartSeries[]"}},"strokeDasharray":{"description":"Dash array for the grid lines and cursor, \'5 5\' by default","name":"strokeDasharray","required":false,"type":{"name":"string | number"}},"strokeWidth":{"description":"Stroke width for the chart lines, 2 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"textColor":{"description":"Color of the text displayed inside the chart, \'dimmed\' by default","name":"textColor","required":false,"type":{"name":"MantineColor"}},"tickLine":{"description":"Specifies which axis should have tick line, \'y\' by default","name":"tickLine","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"tooltipAnimationDuration":{"description":"Tooltip position animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipProps":{"description":"Props passed down to the Tooltip component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"unit":{"description":"Unit displayed next to each tick in y-axis","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values on Y axis and inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withDots":{"description":"Determines whether dots should be displayed, true by default","name":"withDots","required":false,"type":{"name":"boolean"}},"withLegend":{"description":"Determines whether chart legend should be displayed, false by default","name":"withLegend","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether chart tooltip should be displayed, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}},"withXAxis":{"description":"Determines whether x-axis should be hidden, true by default","name":"withXAxis","required":false,"type":{"name":"boolean"}},"withYAxis":{"description":"Determines whether y-axis should be hidden, true by default","name":"withYAxis","required":false,"type":{"name":"boolean"}},"xAxisProps":{"description":"Props passed down to the XAxis recharts component","name":"xAxisProps","required":false,"type":{"name":"RechartsProps"}},"yAxisProps":{"description":"Props passed down to the YAxis recharts component","name":"yAxisProps","required":false,"type":{"name":"RechartsProps"}}}},"PieChart":{"props":{"children":{"description":"Additional elements rendered inside PieChart component","name":"children","required":false,"type":{"name":"React.ReactNode"}},"data":{"description":"Data used to render chart","name":"data","required":true,"type":{"name":"PieChartCell[]"}},"endAngle":{"description":"Controls angle at which charts ends, 360 by default. Set to 0 to render the chart as semicircle.","name":"endAngle","required":false,"type":{"name":"number"}},"labelColor":{"description":"Controls text color of all labels, white by default","name":"labelColor","required":false,"type":{"name":"MantineColor"}},"labelsPosition":{"description":"Controls labels position relative to the segment, \'outside\' by default","name":"labelsPosition","required":false,"type":{"name":"\\"outside\\" | \\"inside\\"","raw":"\\"outside\\" | \\"inside\\" | undefined","value":[{"value":"undefined"},{"value":"\\"outside\\""},{"value":"\\"inside\\""}]}},"paddingAngle":{"description":"Controls padding between segments, 0 by default","name":"paddingAngle","required":false,"type":{"name":"number"}},"pieChartProps":{"description":"Props passed down to recharts PieChart component","name":"pieChartProps","required":false,"type":{"name":"RechartsProps"}},"pieProps":{"description":"Props passed down to recharts Pie component","name":"pieProps","required":false,"type":{"name":"RechartsProps"}},"size":{"description":"Controls chart width and height, height is increased by 40 if withLabels prop is set. Cannot be less than thickness. 80 by default","name":"size","required":false,"type":{"name":"number"}},"startAngle":{"description":"Controls angle at which chart starts, 0 by default. Set to 180 to render the chart as semicircle.","name":"startAngle","required":false,"type":{"name":"number"}},"strokeColor":{"description":"Controls color of the segments stroke, by default depends on color scheme","name":"strokeColor","required":false,"type":{"name":"MantineColor"}},"strokeWidth":{"description":"Controls width of segments stroke, 1 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"tooltipAnimationDuration":{"description":"Tooltip animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipDataSource":{"description":"Determines which data is displayed in the tooltip. \'all\' – display all values, \'segment\' – display only hovered segment. \'all\' by default.","name":"tooltipDataSource","required":false,"type":{"name":"\\"all\\" | \\"segment\\"","raw":"\\"all\\" | \\"segment\\" | undefined","value":[{"value":"undefined"},{"value":"\\"all\\""},{"value":"\\"segment\\""}]}},"tooltipProps":{"description":"Props passed down to Tooltip recharts component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"valueFormatter":{"description":"A function to format values inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withLabels":{"description":"Determines whether each segment should have associated label, false by default","name":"withLabels","required":false,"type":{"name":"boolean"}},"withLabelsLine":{"description":"Determines whether segments labels should have lines that connect the segment with the label, true by default","name":"withLabelsLine","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether the tooltip should be displayed when one of the section is hovered, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}}}},"Sparkline":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"curveType":{"description":"Type of the curve, \'linear\' by default","name":"curveType","required":false,"type":{"name":"AreaChartCurveType","raw":"AreaChartCurveType | undefined","value":[{"value":"undefined"},{"value":"\\"step\\""},{"value":"\\"linear\\""},{"value":"\\"bump\\""},{"value":"\\"natural\\""},{"value":"\\"monotone\\""},{"value":"\\"stepBefore\\""},{"value":"\\"stepAfter\\""}]}},"data":{"description":"Data used to render the chart","name":"data","required":true,"type":{"name":"number[]"}},"fillOpacity":{"description":"Controls fill opacity of the area, 0.6 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"strokeWidth":{"description":"Area stroke width, 2 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"withGradient":{"description":"Determines whether the chart fill should be a gradient, true by default","name":"withGradient","required":false,"type":{"name":"boolean"}}}},"InputLabel":{"props":{"labelElement":{"description":"Root element of the label, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"required":{"description":"Determines whether the required asterisk should be displayed","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls label font-size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"InputWrapper":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of Input.Label, Input.Description and Input.Error components","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}}}},"InputDescription":{"props":{"size":{"description":"Controls description font-size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"InputError":{"props":{"size":{"description":"Controls error font-size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"ButtonGroup":{"props":{"borderWidth":{"description":"border-width of the child Button components. Numbers are converted to rem. Default value in 1.","name":"borderWidth","required":false,"type":{"name":"string | number"}},"children":{"description":"Button components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"orientation":{"description":"Orientation of the group, horizontal by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}}}},"ActionIconGroup":{"props":{"borderWidth":{"description":"border-width of the child ActionIcon components. Default value in 1","name":"borderWidth","required":false,"type":{"name":"string | number"}},"children":{"description":"ActionIcon components only","name":"children","required":false,"type":{"name":"React.ReactNode"}},"orientation":{"description":"Controls group orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}}}},"PopoverTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"popupType":{"description":"Popup accessible type, \'dialog\' by default","name":"popupType","required":false,"type":{"name":"string"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"PopoverDropdown":{"description":"","props":{}},"Slider":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, controls color of track and thumb, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"number"}},"disabled":{"description":"Disables slider","name":"disabled","required":false,"type":{"name":"boolean"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"inverted":{"description":"Determines whether track value representation should be inverted, false by default","name":"inverted","required":false,"type":{"name":"boolean"}},"label":{"description":"Function to generate label or any react node to render instead, set to null to disable label","name":"label","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"labelAlwaysOn":{"description":"Determines whether the label should be visible when the slider is not being dragged or hovered, false by default","name":"labelAlwaysOn","required":false,"type":{"name":"boolean"}},"labelTransitionProps":{"description":"Props passed down to the Transition component, { transition: \'fade\', duration: 0 } by default","name":"labelTransitionProps","required":false,"type":{"name":"TransitionProps"}},"marks":{"description":"Marks displayed on the track","name":"marks","required":false,"type":{"name":"{ value: number; label?: ReactNode; }[]"}},"max":{"description":"Maximum possible value, 100 by default","name":"max","required":false,"type":{"name":"number"}},"min":{"description":"Minimal possible value, 0 by default","name":"min","required":false,"type":{"name":"number"}},"name":{"description":"Hidden input name, use with uncontrolled component","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onChangeEnd":{"description":"Called when user stops dragging slider or changes value with arrows","name":"onChangeEnd","required":false,"type":{"name":"((value: number) => void)"}},"precision":{"description":"Number of significant digits after the decimal point","name":"precision","required":false,"type":{"name":"number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"scale":{"description":"A transformation function to change the scale of the slider","name":"scale","required":false,"type":{"name":"((value: number) => number)"}},"showLabelOnHover":{"description":"Determines whether the label should be displayed when the slider is hovered, true by default","name":"showLabelOnHover","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the track, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"step":{"description":"Number by which value will be incremented/decremented with thumb drag and arrows, 1 by default","name":"step","required":false,"type":{"name":"number"}},"thumbChildren":{"description":"Content rendered inside thumb","name":"thumbChildren","required":false,"type":{"name":"React.ReactNode"}},"thumbLabel":{"description":"Thumb aria-label","name":"thumbLabel","required":false,"type":{"name":"string"}},"thumbSize":{"description":"Thumb width and height, by default value is computed based on size prop","name":"thumbSize","required":false,"type":{"name":"string | number"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"number"}}}},"RangeSlider":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, controls color of track and thumb, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"RangeSliderValue"}},"disabled":{"description":"Disables slider","name":"disabled","required":false,"type":{"name":"boolean"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"inverted":{"description":"Determines whether track values representation should be inverted, false by default","name":"inverted","required":false,"type":{"name":"boolean"}},"label":{"description":"Function to generate label or any react node to render instead, set to null to disable label","name":"label","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"labelAlwaysOn":{"description":"Determines whether the label should be visible when the slider is not being dragged or hovered, false by default","name":"labelAlwaysOn","required":false,"type":{"name":"boolean"}},"labelTransitionProps":{"description":"Props passed down to the Transition component, { transition: \'fade\', duration: 0 } by default","name":"labelTransitionProps","required":false,"type":{"name":"TransitionProps"}},"marks":{"description":"Marks displayed on the track","name":"marks","required":false,"type":{"name":"{ value: number; label?: ReactNode; }[]"}},"max":{"description":"Maximum possible value, 100 by default","name":"max","required":false,"type":{"name":"number"}},"maxRange":{"description":"Maximum range interval, Infinity by default","name":"maxRange","required":false,"type":{"name":"number"}},"min":{"description":"Minimal possible value, 0 by default","name":"min","required":false,"type":{"name":"number"}},"minRange":{"description":"Minimal range interval, 10 by default","name":"minRange","required":false,"type":{"name":"number"}},"name":{"description":"Hidden input name, use with uncontrolled component","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: RangeSliderValue) => void)"}},"onChangeEnd":{"description":"Called when user stops dragging slider or changes value with arrows","name":"onChangeEnd","required":false,"type":{"name":"((value: RangeSliderValue) => void)"}},"precision":{"description":"Number of significant digits after the decimal point","name":"precision","required":false,"type":{"name":"number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"scale":{"description":"A transformation function to change the scale of the slider","name":"scale","required":false,"type":{"name":"((value: number) => number)"}},"showLabelOnHover":{"description":"Determines whether the label should be displayed when the slider is hovered, true by default","name":"showLabelOnHover","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the track, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"step":{"description":"Number by which value will be incremented/decremented with thumb drag and arrows, 1 by default","name":"step","required":false,"type":{"name":"number"}},"thumbChildren":{"description":"Content rendered inside thumb","name":"thumbChildren","required":false,"type":{"name":"React.ReactNode"}},"thumbFromLabel":{"description":"First thumb aria-label","name":"thumbFromLabel","required":false,"type":{"name":"string"}},"thumbSize":{"description":"Thumb width and height, by default value is computed based on size prop","name":"thumbSize","required":false,"type":{"name":"string | number"}},"thumbToLabel":{"description":"Second thumb aria-label","name":"thumbToLabel","required":false,"type":{"name":"string"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"RangeSliderValue"}}}},"SwitchGroup":{"props":{"children":{"description":"Switch components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"readOnly":{"description":"If set, value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the Input.Wrapper, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the Input.Wrapper","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"CheckboxGroup":{"props":{"children":{"description":"Checkbox components and any other elements","name":"children","required":true,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"onChange":{"description":"Called with an array of selected checkboxes values when value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"readOnly":{"description":"If set, value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the Input.Wrapper, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element (Input.Wrapper component)","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"RadioGroup":{"props":{"children":{"description":"Radio components and any other elements","name":"children","required":true,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"name":{"description":"name attribute of child radio inputs. By default, name is generated randomly.","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"readOnly":{"description":"If set, value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the Input.Wrapper, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the Input.Wrapper","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"TabsTab":{"props":{"children":{"description":"Tab label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls control color based on variant","name":"color","required":false,"type":{"name":"MantineColor"}},"leftSection":{"description":"Content displayed on the left side of the label, for example, icon","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Content displayed on the right side of the label, for example, icon","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"Size passed from parent component, sets data-size if value is not number like","name":"size","required":false,"type":{"name":"string | number"}},"value":{"description":"Value of associated panel","name":"value","required":true,"type":{"name":"string"}}}},"TabsList":{"props":{"children":{"description":"Tabs.Tab components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"grow":{"description":"Determines whether tabs should take all available space, false by default","name":"grow","required":false,"type":{"name":"boolean"}},"justify":{"description":"Tabs alignment, flex-start by default","name":"justify","required":false,"type":{"name":"JustifyContent"}}}},"TabsPanel":{"props":{"children":{"description":"Panel content","name":"children","required":true,"type":{"name":"React.ReactNode"}},"keepMounted":{"description":"If set to true, the content will be kept mounted, even if keepMounted is set false in the parent Tabs component","name":"keepMounted","required":false,"type":{"name":"boolean"}},"value":{"description":"Value of associated control","name":"value","required":true,"type":{"name":"string"}}}},"AccordionItem":{"props":{"value":{"description":"Value that is used to manage accordion state","name":"value","required":true,"type":{"name":"string"}}}},"AccordionControl":{"props":{"chevron":{"description":"Custom chevron icon","name":"chevron","required":false,"type":{"name":"React.ReactNode"}},"children":{"description":"Control label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Disables control button","name":"disabled","required":false,"type":{"name":"boolean"}},"icon":{"description":"Icon displayed next to the label","name":"icon","required":false,"type":{"name":"React.ReactNode"}}}},"PillGroup":{"props":{"disabled":{"description":"Determines whether child Pill components should be disabled","name":"disabled","required":false,"type":{"name":"boolean"}},"gap":{"description":"Controls spacing between pills, by default controlled by size","name":"gap","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"size":{"description":"Controls size of the child Pill components and gap between them, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"PillsInputField":{"props":{"pointer":{"description":"If set, cursor is changed to pointer","name":"pointer","required":false,"type":{"name":"boolean"}},"type":{"description":"Controls input styles when focused. If auto the input is hidden when not focused. If visible the input will always remain visible. \'visible\' by default","name":"type","required":false,"type":{"name":"\\"hidden\\" | \\"auto\\" | \\"visible\\"","raw":"\\"hidden\\" | \\"auto\\" | \\"visible\\" | undefined","value":[{"value":"undefined"},{"value":"\\"hidden\\""},{"value":"\\"auto\\""},{"value":"\\"visible\\""}]}}}},"PaginationRoot":{"props":{"autoContrast":{"description":"Determines whether active item text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"boundaries":{"description":"Number of elements visible on the left/right edges, 1 by default","name":"boundaries","required":false,"type":{"name":"number"}},"color":{"description":"Key of theme.colors, active item color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Active page for uncontrolled component, must be an integer in [0, total] interval","name":"defaultValue","required":false,"type":{"name":"number"}},"disabled":{"description":"Determines whether all controls should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"getItemProps":{"description":"Additional props passed down to controls","name":"getItemProps","required":false,"type":{"name":"((page: number) => Record)"}},"onChange":{"description":"Called when page changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onFirstPage":{"description":"Called when first page control is clicked","name":"onFirstPage","required":false,"type":{"name":"(() => void)"}},"onLastPage":{"description":"Called when last page control is clicked","name":"onLastPage","required":false,"type":{"name":"(() => void)"}},"onNextPage":{"description":"Called when next page control is clicked","name":"onNextPage","required":false,"type":{"name":"(() => void)"}},"onPreviousPage":{"description":"Called when previous page control is clicked","name":"onPreviousPage","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"siblings":{"description":"Number of siblings displayed on the left/right side of the selected page, 1 by default","name":"siblings","required":false,"type":{"name":"number"}},"size":{"description":"height and min-width of controls, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"total":{"description":"Total number of pages, must be an integer","name":"total","required":true,"type":{"name":"number"}},"value":{"description":"Active page for controlled component, must be an integer in [0, total] interval","name":"value","required":false,"type":{"name":"number"}}}},"PaginationItems":{"props":{"dotsIcon":{"description":"Dots icon component","name":"dotsIcon","required":false,"type":{"name":"PaginationIcon"}}}},"PaginationDots":{"props":{"icon":{"description":"Custom dots icon component, must accept svg element props and size prop","name":"icon","required":false,"type":{"name":"FC"}}}},"createEdgeComponent":{"props":{"action":{"description":"","name":"action","required":true,"type":{"name":"\\"onNext\\" | \\"onPrevious\\" | \\"onFirst\\" | \\"onLast\\"","raw":"\\"onNext\\" | \\"onPrevious\\" | \\"onFirst\\" | \\"onLast\\"","value":[{"value":"\\"onNext\\""},{"value":"\\"onPrevious\\""},{"value":"\\"onFirst\\""},{"value":"\\"onLast\\""}]}},"icon":{"description":"","name":"icon","required":true,"type":{"name":"FC"}},"name":{"description":"","name":"name","required":true,"type":{"name":"string"}},"type":{"description":"","name":"type","required":true,"type":{"name":"\\"next\\" | \\"previous\\"","raw":"\\"next\\" | \\"previous\\"","value":[{"value":"\\"next\\""},{"value":"\\"previous\\""}]}}}},"PaginationNext":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationPrevious":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationFirst":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationLast":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationControl":{"props":{"active":{"description":"Determines whether control should have active styles","name":"active","required":false,"type":{"name":"boolean"}},"withPadding":{"description":"Determines whether control should have padding, true by default","name":"withPadding","required":false,"type":{"name":"boolean"}}}},"ComboboxOption":{"props":{"active":{"description":"Determines whether the option is selected","name":"active","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether the option can be selected","name":"disabled","required":false,"type":{"name":"boolean"}},"selected":{"description":"Determines whether item is selected, useful for virtualized comboboxes","name":"selected","required":false,"type":{"name":"boolean"}},"value":{"description":"Option value","name":"value","required":true,"type":{"name":"string"}}}},"ComboboxDropdown":{"props":{"hidden":{"description":"Determines whether the dropdown should be hidden, for example, when there are no options to display","name":"hidden","required":false,"type":{"name":"boolean"}}}},"ComboboxTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"ComboboxDropdownTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"ComboboxEventsTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"ComboboxGroup":{"props":{"label":{"description":"Group label","name":"label","required":false,"type":{"name":"React.ReactNode"}}}},"AppShellAside":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellNavbar":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellHeader":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellFooter":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellSection":{"props":{"grow":{"description":"Determines whether the section should take all available space, false by default","name":"grow","required":false,"type":{"name":"boolean"}}}},"GridCol":{"props":{"offset":{"description":"Column offset on the left side – number of columns that should be left empty before this column","name":"offset","required":false,"type":{"name":"StyleProp"}},"order":{"description":"Column order, can be used to reorder columns at different viewport sizes","name":"order","required":false,"type":{"name":"StyleProp"}},"span":{"description":"Column span, 12 by default","name":"span","required":false,"type":{"name":"StyleProp"}}}},"HoverCardTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"eventPropsWrapperName":{"description":"Key of the prop that is used to pass event listeners, by default event listeners are passed directly to component","name":"eventPropsWrapperName","required":false,"type":{"name":"string"}},"popupType":{"description":"Popup accessible type, \'dialog\' by default","name":"popupType","required":false,"type":{"name":"string"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"MenuItem":{"props":{"children":{"description":"Item label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeMenuOnClick":{"description":"Determines whether the menu should be closed when the item is clicked, overrides closeOnItemClick prop on the Menu component","name":"closeMenuOnClick","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Disables item","name":"disabled","required":false,"type":{"name":"boolean"}},"leftSection":{"description":"Section displayed on the left side of the label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Section displayed on the right side of the label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"MenuTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to get element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"ProgressSection":{"props":{"animated":{"description":"Determines whether the sections stripes should be animated, if set, striped prop is ignored, false by default","name":"animated","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS value, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"striped":{"description":"Determines whether the section should have stipes, false by default","name":"striped","required":false,"type":{"name":"boolean"}},"value":{"description":"Value of the section in 0–100 range","name":"value","required":true,"type":{"name":"number"}},"withAria":{"description":"Determines whether aria-* props should be added to the root element, true by default","name":"withAria","required":false,"type":{"name":"boolean"}}}},"ProgressRoot":{"props":{"autoContrast":{"description":"Determines whether label text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls track height, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionDuration":{"description":"Controls sections width transition duration, value is specified in ms, 100 by default","name":"transitionDuration","required":false,"type":{"name":"number"}}}},"ChipGroup":{"props":{"children":{"description":"Chip components and any other elements","name":"children","required":false,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Uncontrolled component initial value","name":"defaultValue","required":false,"type":{"name":"string | string[] | null"}},"multiple":{"description":"Determines whether it is allowed to select multiple values, false by default","name":"multiple","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when value changes. If multiple prop is set, called with an array of selected values. If not, called with a string value of selected chip.","name":"onChange","required":false,"type":{"name":"((value: T extends true ? string[] : string) => void)"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string | string[] | null"}}}},"CardSection":{"props":{"inheritPadding":{"description":"Determines whether the section should inherit padding from the parent Card, false by default","name":"inheritPadding","required":false,"type":{"name":"boolean"}},"withBorder":{"description":"Determines whether the section should have a border, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}}}},"StepperStep":{"props":{"allowStepClick":{"description":"Set to false to disable clicks on step","name":"allowStepClick","required":false,"type":{"name":"boolean"}},"allowStepSelect":{"description":"Should step selection be allowed","name":"allowStepSelect","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors, by default controlled by Stepper component","name":"color","required":false,"type":{"name":"MantineColor"}},"completedIcon":{"description":"Step icon displayed when step is completed","name":"completedIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"description":{"description":"Step description","name":"description","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"icon":{"description":"Step icon, defaults to step index + 1 when rendered within Stepper","name":"icon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"iconPosition":{"description":"Icon position relative to step body, controlled by Stepper component","name":"iconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"iconSize":{"description":"Icon wrapper size","name":"iconSize","required":false,"type":{"name":"number"}},"label":{"description":"Step label, render after icon","name":"label","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"loading":{"description":"Indicates loading state of the step","name":"loading","required":false,"type":{"name":"boolean"}},"orientation":{"description":"Component orientation","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"progressIcon":{"description":"Step icon displayed when step is in progress","name":"progressIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"state":{"description":"Step state, controlled by Stepper component","name":"state","required":false,"type":{"name":"\\"stepInactive\\" | \\"stepProgress\\" | \\"stepCompleted\\"","raw":"\\"stepInactive\\" | \\"stepProgress\\" | \\"stepCompleted\\" | undefined","value":[{"value":"undefined"},{"value":"\\"stepInactive\\""},{"value":"\\"stepProgress\\""},{"value":"\\"stepCompleted\\""}]}},"step":{"description":"Step index, controlled by Stepper component *","name":"step","required":false,"type":{"name":"number"}},"withIcon":{"description":"Determines whether the icon should be displayed","name":"withIcon","required":false,"type":{"name":"boolean"}}}},"TimelineItem":{"props":{"bullet":{"description":"React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.","name":"bullet","required":false,"type":{"name":"React.ReactNode"}},"children":{"description":"Content displayed below the title","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color to control active item colors, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"lineVariant":{"description":"Controls line border style, \'solid\' by default","name":"lineVariant","required":false,"type":{"name":"\\"dashed\\" | \\"dotted\\" | \\"solid\\"","raw":"\\"dashed\\" | \\"dotted\\" | \\"solid\\" | undefined","value":[{"value":"undefined"},{"value":"\\"dashed\\""},{"value":"\\"dotted\\""},{"value":"\\"solid\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"title":{"description":"Item title, displayed next to the bullet","name":"title","required":false,"type":{"name":"React.ReactNode"}}}},"ListItem":{"props":{"children":{"description":"Item content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"Icon to replace item bullet","name":"icon","required":false,"type":{"name":"React.ReactNode"}}}},"Spotlight":{"props":{"actions":{"description":"Actions data, passed down to Spotlight.Action component","name":"actions","required":true,"type":{"name":"SpotlightActions[]"}},"centered":{"description":"Determines whether the modal should be centered vertically, false by default","name":"centered","required":false,"type":{"name":"boolean"}},"children":{"description":"Modal content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clearQueryOnClose":{"description":"Determines whether the search query should be cleared when the spotlight is closed, true by default","name":"clearQueryOnClose","required":false,"type":{"name":"boolean"}},"closeOnActionTrigger":{"description":"Determines whether spotlight should be closed when one of the actions is triggered, true by default","name":"closeOnActionTrigger","required":false,"type":{"name":"boolean"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, spotlight will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"filter":{"description":"Function to filter actions data based on search query, by default actions are filtered by title, description and keywords","name":"filter","required":false,"type":{"name":"SpotlightFilterFunction"}},"forceOpened":{"description":"Forces opened state, useful for tests","name":"forceOpened","required":false,"type":{"name":"boolean"}},"fullScreen":{"description":"Determines whether the modal should take the entire screen, false by default","name":"fullScreen","required":false,"type":{"name":"boolean"}},"highlightQuery":{"description":"Determines whether search query should be highlighted in action label, false by default","name":"highlightQuery","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"limit":{"description":"Maximum number of actions displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"maxHeight":{"description":"Spotlight content max-height. Ignored unless scrollable prop is set. 400 by default","name":"maxHeight","required":false,"type":{"name":"MaxHeight"}},"nothingFound":{"description":"Message displayed when none of the actions match given filter","name":"nothingFound","required":false,"type":{"name":"React.ReactNode"}},"onQueryChange":{"description":"Called when query changes","name":"onQueryChange","required":false,"type":{"name":"((query: string) => void)"}},"onSpotlightClose":{"description":"Called when spotlight closes","name":"onSpotlightClose","required":false,"type":{"name":"(() => void)"}},"onSpotlightOpen":{"description":"Called when spotlight opens","name":"onSpotlightOpen","required":false,"type":{"name":"(() => void)"}},"overlayProps":{"description":"Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"query":{"description":"Controlled Spotlight search query","name":"query","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"scrollable":{"description":"Determines whether the actions list should be scrollable. If not set, maxHeight is ignored, false by default","name":"scrollable","required":false,"type":{"name":"boolean"}},"searchProps":{"description":"Props passed down to the Spotlight.Search","name":"searchProps","required":false,"type":{"name":"SpotlightSearchProps"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"shortcut":{"description":"Keyboard shortcut or a list of shortcuts to trigger spotlight, \'mod + K\' by default","name":"shortcut","required":false,"type":{"name":"string | string[] | null"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"store":{"description":"Spotlight store, can be used to create multiple instances of spotlight","name":"store","required":false,"type":{"name":"SpotlightStore"}},"tagsToIgnore":{"description":"A list of tags which when focused will be ignored by shortcut, [\'input\', \'textarea\', \'select\'] by default","name":"tagsToIgnore","required":false,"type":{"name":"string[]"}},"title":{"description":"Modal title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"triggerOnContentEditable":{"description":"Determines whether shortcut should trigger based in contentEditable, false by default","name":"triggerOnContentEditable","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"xOffset":{"description":"Left/right modal offset, 5vw by default","name":"xOffset","required":false,"type":{"name":"MarginLeft"}},"yOffset":{"description":"Top/bottom modal offset, 5dvh by default","name":"yOffset","required":false,"type":{"name":"MarginTop"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"SpotlightAction":{"props":{"children":{"description":"Children override default action elements, if passed, label, description and sections are hidden","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeSpotlightOnTrigger":{"description":"Determines whether the spotlight should be closed when action is triggered, overrides closeOnActionTrigger prop set on Spotlight","name":"closeSpotlightOnTrigger","required":false,"type":{"name":"boolean"}},"description":{"description":"Action description, pass string to use in default filter","name":"description","required":false,"type":{"name":"string"}},"dimmedSections":{"description":"Determines whether left and right sections should have dimmed styles, true by default","name":"dimmedSections","required":false,"type":{"name":"boolean"}},"highlightColor":{"description":"Key of theme.colors of any valid CSS color that will be used to highlight search query, \'yellow\' by default","name":"highlightColor","required":false,"type":{"name":"MantineColor"}},"highlightQuery":{"description":"Determines whether search query should be highlighted in action label, false by default","name":"highlightQuery","required":false,"type":{"name":"boolean"}},"keywords":{"description":"Keywords that are used for default filtering, not displayed anywhere, can be a string: \\"react,router,javascript\\" or an array: [\'react\', \'router\', \'javascript\']","name":"keywords","required":false,"type":{"name":"string | string[]"}},"label":{"description":"Action label, pass string to use in default filter","name":"label","required":false,"type":{"name":"string"}},"leftSection":{"description":"Section displayed on the left side of the label, for example, icon","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Section displayed on the right side of the label, for example, hotkey","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"SpotlightActionsGroup":{"props":{"children":{"description":"Spotlight.Action components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"label":{"description":"Group label","name":"label","required":false,"type":{"name":"React.ReactNode"}}}},"SpotlightRoot":{"props":{"centered":{"description":"Determines whether the modal should be centered vertically, false by default","name":"centered","required":false,"type":{"name":"boolean"}},"children":{"description":"Modal content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clearQueryOnClose":{"description":"Determines whether the search query should be cleared when the spotlight is closed, true by default","name":"clearQueryOnClose","required":false,"type":{"name":"boolean"}},"closeOnActionTrigger":{"description":"Determines whether spotlight should be closed when one of the actions is triggered, true by default","name":"closeOnActionTrigger","required":false,"type":{"name":"boolean"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, spotlight will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"forceOpened":{"description":"Forces opened state, useful for tests","name":"forceOpened","required":false,"type":{"name":"boolean"}},"fullScreen":{"description":"Determines whether the modal should take the entire screen, false by default","name":"fullScreen","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"maxHeight":{"description":"Spotlight content max-height. Ignored unless scrollable prop is set. 400 by default","name":"maxHeight","required":false,"type":{"name":"MaxHeight"}},"onQueryChange":{"description":"Called when query changes","name":"onQueryChange","required":false,"type":{"name":"((query: string) => void)"}},"onSpotlightClose":{"description":"Called when spotlight closes","name":"onSpotlightClose","required":false,"type":{"name":"(() => void)"}},"onSpotlightOpen":{"description":"Called when spotlight opens","name":"onSpotlightOpen","required":false,"type":{"name":"(() => void)"}},"overlayProps":{"description":"Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"query":{"description":"Controlled Spotlight search query","name":"query","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"scrollable":{"description":"Determines whether the actions list should be scrollable. If not set, maxHeight is ignored, false by default","name":"scrollable","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"shortcut":{"description":"Keyboard shortcut or a list of shortcuts to trigger spotlight, \'mod + K\' by default","name":"shortcut","required":false,"type":{"name":"string | string[] | null"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"store":{"description":"Spotlight store, can be used to create multiple instances of spotlight","name":"store","required":false,"type":{"name":"SpotlightStore"}},"tagsToIgnore":{"description":"A list of tags which when focused will be ignored by shortcut, [\'input\', \'textarea\', \'select\'] by default","name":"tagsToIgnore","required":false,"type":{"name":"string[]"}},"title":{"description":"Modal title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"triggerOnContentEditable":{"description":"Determines whether shortcut should trigger based in contentEditable, false by default","name":"triggerOnContentEditable","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"xOffset":{"description":"Left/right modal offset, 5vw by default","name":"xOffset","required":false,"type":{"name":"MarginLeft"}},"yOffset":{"description":"Top/bottom modal offset, 5dvh by default","name":"yOffset","required":false,"type":{"name":"MarginTop"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"SpotlightSearch":{"props":{"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Determines whether the input should have error styles and aria-invalid attribute","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Input element id","name":"id","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Sets required attribute on the input element","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element of the Input component","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Carousel":{"props":{"align":{"description":"Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 is 50%, \'center\' by default","name":"align","required":false,"type":{"name":"number | \\"center\\" | \\"end\\" | \\"start\\""}},"children":{"description":" components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"containScroll":{"description":"Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.","name":"containScroll","required":false,"type":{"name":"\\"\\" | \\"trimSnaps\\" | \\"keepSnaps\\"","raw":"\\"\\" | \\"trimSnaps\\" | \\"keepSnaps\\" | undefined","value":[{"value":"undefined"},{"value":"\\"\\""},{"value":"\\"trimSnaps\\""},{"value":"\\"keepSnaps\\""}]}},"controlSize":{"description":"Controls size of the next and previous controls, 26 by default","name":"controlSize","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"controlsOffset":{"description":"Controls position of the next and previous controls, key of theme.spacing or any valid CSS value, \'sm\' by default","name":"controlsOffset","required":false,"type":{"name":"MantineSpacing"}},"dragFree":{"description":"Determines whether momentum scrolling should be enabled, false by default","name":"dragFree","required":false,"type":{"name":"boolean"}},"draggable":{"description":"Determines whether the carousel can be scrolled with mouse and touch interactions, true by default","name":"draggable","required":false,"type":{"name":"boolean"}},"getEmblaApi":{"description":"Get embla API as ref","name":"getEmblaApi","required":false,"type":{"name":"((embla: EmblaCarouselType) => void)"}},"height":{"description":"Slides container height, required for vertical orientation","name":"height","required":false,"type":{"name":"Height"}},"inViewThreshold":{"description":"Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%.","name":"inViewThreshold","required":false,"type":{"name":"number"}},"includeGapInSize":{"description":"Determines whether gap between slides should be treated as part of the slide size, true by default","name":"includeGapInSize","required":false,"type":{"name":"boolean"}},"initialSlide":{"description":"Index of initial slide","name":"initialSlide","required":false,"type":{"name":"number"}},"loop":{"description":"Enables infinite looping. true by default, automatically falls back to false if slide content isn\'t enough to loop.","name":"loop","required":false,"type":{"name":"boolean"}},"nextControlIcon":{"description":"Icon of the next control","name":"nextControlIcon","required":false,"type":{"name":"React.ReactNode"}},"nextControlProps":{"description":"Props passed down to next control","name":"nextControlProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"onNextSlide":{"description":"Called when next slide is shown","name":"onNextSlide","required":false,"type":{"name":"(() => void)"}},"onPreviousSlide":{"description":"Called when previous slider is shown","name":"onPreviousSlide","required":false,"type":{"name":"(() => void)"}},"onSlideChange":{"description":"Called with slide index when slide changes","name":"onSlideChange","required":false,"type":{"name":"((index: number) => void)"}},"orientation":{"description":"Carousel orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"plugins":{"description":"An array of embla plugins","name":"plugins","required":false,"type":{"name":"CreatePluginType[]"}},"previousControlIcon":{"description":"Icon of the previous control","name":"previousControlIcon","required":false,"type":{"name":"React.ReactNode"}},"previousControlProps":{"description":"Props passed down to previous control","name":"previousControlProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"skipSnaps":{"description":"Allow the carousel to skip scroll snaps if it is dragged vigorously. Note that this option will be ignored if the dragFree option is set to true, false by default","name":"skipSnaps","required":false,"type":{"name":"boolean"}},"slideGap":{"description":"Key of theme.spacing or number to set gap between slides","name":"slideGap","required":false,"type":{"name":"StyleProp"}},"slideSize":{"description":"Controls slide width based on viewport width, \'100%\' by default","name":"slideSize","required":false,"type":{"name":"StyleProp"}},"slidesToScroll":{"description":"Number of slides that will be scrolled with next/previous buttons, 1 by default","name":"slidesToScroll","required":false,"type":{"name":"number | \\"auto\\""}},"speed":{"description":"Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling.","name":"speed","required":false,"type":{"name":"number"}},"withControls":{"description":"Determines whether next/previous controls should be displayed, true by default","name":"withControls","required":false,"type":{"name":"boolean"}},"withIndicators":{"description":"Determines whether indicators should be displayed, false by default","name":"withIndicators","required":false,"type":{"name":"boolean"}},"withKeyboardEvents":{"description":"Determines whether arrow key should switch slides, true by default","name":"withKeyboardEvents","required":false,"type":{"name":"boolean"}}}},"Dropzone":{"props":{"accept":{"description":"Mime types of the files that dropzone can accepts. By default, dropzone accepts all file types.","name":"accept","required":false,"type":{"name":"string[] | Accept"}},"acceptColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Accept, theme.primaryColor by default","name":"acceptColor","required":false,"type":{"name":"MantineColor"}},"activateOnClick":{"description":"If false, disables click to open the native file selection dialog","name":"activateOnClick","required":false,"type":{"name":"boolean"}},"activateOnDrag":{"description":"If false, disables drag \'n\' drop","name":"activateOnDrag","required":false,"type":{"name":"boolean"}},"activateOnKeyboard":{"description":"If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state.","name":"activateOnKeyboard","required":false,"type":{"name":"boolean"}},"autoFocus":{"description":"Set to autofocus the root element","name":"autoFocus","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether files capturing should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"dragEventsBubbling":{"description":"If false, stops drag event propagation to parents","name":"dragEventsBubbling","required":false,"type":{"name":"boolean"}},"enablePointerEvents":{"description":"Determines whether pointer events should be enabled on the inner element, false by default","name":"enablePointerEvents","required":false,"type":{"name":"boolean"}},"getFilesFromEvent":{"description":"Use this to provide a custom file aggregator","name":"getFilesFromEvent","required":false,"type":{"name":"((event: DropEvent) => Promise<(File | DataTransferItem)[]>)"}},"loaderProps":{"description":"Props passed down to the Loader component","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether a loading overlay should be displayed over the dropzone, false by default","name":"loading","required":false,"type":{"name":"boolean"}},"maxFiles":{"description":"Maximum number of files that can be picked at once","name":"maxFiles","required":false,"type":{"name":"number"}},"maxSize":{"description":"Maximum file size in bytes","name":"maxSize","required":false,"type":{"name":"number"}},"multiple":{"description":"Determines whether multiple files can be dropped to the dropzone or selected from file system picker, true by default","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Name of the form control. Submitted with the form as part of a name/value pair.","name":"name","required":false,"type":{"name":"string"}},"onDragEnter":{"description":"Called when the dragenter event occurs","name":"onDragEnter","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragLeave":{"description":"Called when the dragleave event occurs","name":"onDragLeave","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragOver":{"description":"Called when the dragover event occurs","name":"onDragOver","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDrop":{"description":"Called when valid files are dropped to the dropzone","name":"onDrop","required":true,"type":{"name":"(files: FileWithPath[]) => void"}},"onDropAny":{"description":"Called when any files are dropped to the dropzone","name":"onDropAny","required":false,"type":{"name":"((files: FileWithPath[], fileRejections: FileRejection[]) => void)"}},"onFileDialogCancel":{"description":"Called when user closes the file selection dialog with no selection","name":"onFileDialogCancel","required":false,"type":{"name":"(() => void)"}},"onFileDialogOpen":{"description":"Called when user opens the file selection dialog","name":"onFileDialogOpen","required":false,"type":{"name":"(() => void)"}},"onReject":{"description":"Called when dropped files do not meet file restrictions","name":"onReject","required":false,"type":{"name":"((fileRejections: FileRejection[]) => void)"}},"openRef":{"description":"A ref function which when called opens the file system file picker","name":"openRef","required":false,"type":{"name":"ForwardedRef<() => void> | undefined"}},"preventDropOnDocument":{"description":"If false, allow dropped items to take over the current browser window","name":"preventDropOnDocument","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rejectColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Reject, \'red\' by default","name":"rejectColor","required":false,"type":{"name":"MantineColor"}},"useFsAccessApi":{"description":"Set to true to use the File System Access API to open the file picker instead of using an click event, defaults to true","name":"useFsAccessApi","required":false,"type":{"name":"boolean"}},"validator":{"description":"Custom validation function. It must return null if there\'s no errors.","name":"validator","required":false,"type":{"name":"((file: T) => FileError | FileError[] | null)"}}}},"DropzoneFullScreen":{"props":{"accept":{"description":"Mime types of the files that dropzone can accepts. By default, dropzone accepts all file types.","name":"accept","required":false,"type":{"name":"string[] | Accept"}},"acceptColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Accept, theme.primaryColor by default","name":"acceptColor","required":false,"type":{"name":"MantineColor"}},"activateOnClick":{"description":"If false, disables click to open the native file selection dialog","name":"activateOnClick","required":false,"type":{"name":"boolean"}},"activateOnDrag":{"description":"If false, disables drag \'n\' drop","name":"activateOnDrag","required":false,"type":{"name":"boolean"}},"activateOnKeyboard":{"description":"If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state.","name":"activateOnKeyboard","required":false,"type":{"name":"boolean"}},"active":{"description":"Determines whether user can drop files to browser window, true by default","name":"active","required":false,"type":{"name":"boolean"}},"autoFocus":{"description":"Set to autofocus the root element","name":"autoFocus","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether files capturing should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"dragEventsBubbling":{"description":"If false, stops drag event propagation to parents","name":"dragEventsBubbling","required":false,"type":{"name":"boolean"}},"enablePointerEvents":{"description":"Determines whether pointer events should be enabled on the inner element, false by default","name":"enablePointerEvents","required":false,"type":{"name":"boolean"}},"getFilesFromEvent":{"description":"Use this to provide a custom file aggregator","name":"getFilesFromEvent","required":false,"type":{"name":"((event: DropEvent) => Promise<(File | DataTransferItem)[]>)"}},"loaderProps":{"description":"Props passed down to the Loader component","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether a loading overlay should be displayed over the dropzone, false by default","name":"loading","required":false,"type":{"name":"boolean"}},"maxFiles":{"description":"Maximum number of files that can be picked at once","name":"maxFiles","required":false,"type":{"name":"number"}},"maxSize":{"description":"Maximum file size in bytes","name":"maxSize","required":false,"type":{"name":"number"}},"multiple":{"description":"Determines whether multiple files can be dropped to the dropzone or selected from file system picker, true by default","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Name of the form control. Submitted with the form as part of a name/value pair.","name":"name","required":false,"type":{"name":"string"}},"onDragEnter":{"description":"Called when the dragenter event occurs","name":"onDragEnter","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragLeave":{"description":"Called when the dragleave event occurs","name":"onDragLeave","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragOver":{"description":"Called when the dragover event occurs","name":"onDragOver","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDrop":{"description":"Called when valid files are dropped to the dropzone","name":"onDrop","required":true,"type":{"name":"(files: FileWithPath[]) => void"}},"onDropAny":{"description":"Called when any files are dropped to the dropzone","name":"onDropAny","required":false,"type":{"name":"((files: FileWithPath[], fileRejections: FileRejection[]) => void)"}},"onFileDialogCancel":{"description":"Called when user closes the file selection dialog with no selection","name":"onFileDialogCancel","required":false,"type":{"name":"(() => void)"}},"onFileDialogOpen":{"description":"Called when user opens the file selection dialog","name":"onFileDialogOpen","required":false,"type":{"name":"(() => void)"}},"onReject":{"description":"Called when dropped files do not meet file restrictions","name":"onReject","required":false,"type":{"name":"((fileRejections: FileRejection[]) => void)"}},"openRef":{"description":"A ref function which when called opens the file system file picker","name":"openRef","required":false,"type":{"name":"ForwardedRef<() => void> | undefined"}},"portalProps":{"description":"Props to pass down to the portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"preventDropOnDocument":{"description":"If false, allow dropped items to take over the current browser window","name":"preventDropOnDocument","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rejectColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Reject, \'red\' by default","name":"rejectColor","required":false,"type":{"name":"MantineColor"}},"useFsAccessApi":{"description":"Set to true to use the File System Access API to open the file picker instead of using an click event, defaults to true","name":"useFsAccessApi","required":false,"type":{"name":"boolean"}},"validator":{"description":"Custom validation function. It must return null if there\'s no errors.","name":"validator","required":false,"type":{"name":"((file: T) => FileError | FileError[] | null)"}},"withinPortal":{"description":"Determines whether component should be rendered within Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index value, 9999 by default","name":"zIndex","required":false,"type":{"name":"ZIndex"}}}},"CodeHighlight":{"props":{"code":{"description":"Code to highlight","name":"code","required":true,"type":{"name":"string"}},"copiedLabel":{"description":"Copied tooltip label, \'Copied\' by default","name":"copiedLabel","required":false,"type":{"name":"string"}},"copyLabel":{"description":"Copy tooltip label, \'Copy code\' by default","name":"copyLabel","required":false,"type":{"name":"string"}},"highlightOnClient":{"description":"Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), false by default","name":"highlightOnClient","required":false,"type":{"name":"boolean"}},"language":{"description":"Code language, \'tsx\' by default","name":"language","required":false,"type":{"name":"string"}},"withCopyButton":{"description":"Determines whether copy button should be displayed, true by default","name":"withCopyButton","required":false,"type":{"name":"boolean"}}}},"CodeHighlightTabs":{"props":{"activeTab":{"description":"Index of controlled active tab state","name":"activeTab","required":false,"type":{"name":"number"}},"code":{"description":"Code to highlight with meta data (file name and icon)","name":"code","required":true,"type":{"name":"CodeHighlightTabsCode | CodeHighlightTabsCode[]"}},"collapseCodeLabel":{"description":"Collapse button label and tooltip, \'Collapse code\' by default","name":"collapseCodeLabel","required":false,"type":{"name":"string"}},"copiedLabel":{"description":"Copied tooltip label, \'Copied\' by default","name":"copiedLabel","required":false,"type":{"name":"string"}},"copyLabel":{"description":"Copy tooltip label, \'Copy code\' by default","name":"copyLabel","required":false,"type":{"name":"string"}},"defaultActiveTab":{"description":"Default active tab index","name":"defaultActiveTab","required":false,"type":{"name":"number"}},"defaultExpanded":{"description":"Uncontrolled expanded state initial value","name":"defaultExpanded","required":false,"type":{"name":"boolean"}},"expandCodeLabel":{"description":"Expand button label and tooltip, \'Expand code\' by default","name":"expandCodeLabel","required":false,"type":{"name":"string"}},"expanded":{"description":"Controlled expanded state","name":"expanded","required":false,"type":{"name":"boolean"}},"getFileIcon":{"description":"Function that returns icon based on file name","name":"getFileIcon","required":false,"type":{"name":"((fileName: string) => ReactNode)"}},"maxCollapsedHeight":{"description":"max-height of code in collapsed state","name":"maxCollapsedHeight","required":false,"type":{"name":"MaxHeight"}},"onExpandedChange":{"description":"Called when expanded state changes","name":"onExpandedChange","required":false,"type":{"name":"((expanded: boolean) => void)"}},"onTabChange":{"description":"Called when tab changes","name":"onTabChange","required":false,"type":{"name":"((tab: number) => void)"}},"withExpandButton":{"description":"Determines whether to show the expand button, false by default","name":"withExpandButton","required":false,"type":{"name":"boolean"}},"withHeader":{"description":"Determines whether header with file names and copy button should be rendered, true by default","name":"withHeader","required":false,"type":{"name":"boolean"}}}},"InlineCodeHighlight":{"props":{"code":{"description":"Code to highlight","name":"code","required":true,"type":{"name":"string"}},"language":{"description":"Code language, \'tsx\' by default","name":"language","required":false,"type":{"name":"string"}}}},"NavigationProgress":{"props":{"color":{"description":"Key of theme.colors of any other valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"initialProgress":{"description":"Initial progress value, 0 by default","name":"initialProgress","required":false,"type":{"name":"number"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"size":{"description":"Controls height of the progress bar","name":"size","required":false,"type":{"name":"number"}},"stepInterval":{"description":"Step interval in ms, 500 by default","name":"stepInterval","required":false,"type":{"name":"number"}},"store":{"description":"Component store, controls state","name":"store","required":false,"type":{"name":"NprogressStore"}},"withinPortal":{"description":"Determines whether the progress bar should be rendered within Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Progressbar z-index, 9999 by default","name":"zIndex","required":false,"type":{"name":"ZIndex"}}}},"ModalsProvider":{"props":{"children":{"description":"Your app","name":"children","required":true,"type":{"name":"React.ReactNode"}},"labels":{"description":"Confirm modal labels","name":"labels","required":false,"type":{"name":"ConfirmLabels"}},"modalProps":{"description":"Shared Modal component props, applied for every modal","name":"modalProps","required":false,"type":{"name":"ModalSettings"}},"modals":{"description":"Predefined modals","name":"modals","required":false,"type":{"name":"Record>>"}}}},"RichTextEditor":{"props":{"children":{"description":"Child editor components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"editor":{"description":"Tiptap editor instance","name":"editor","required":true,"type":{"name":"Editor | null"}},"labels":{"description":"Labels that are used in controls","name":"labels","required":false,"type":{"name":"Partial"}},"withCodeHighlightStyles":{"description":"Determines whether code highlight styles should be added, true by default","name":"withCodeHighlightStyles","required":false,"type":{"name":"boolean"}},"withTypographyStyles":{"description":"Determines whether typography styles should be added, true by default","name":"withTypographyStyles","required":false,"type":{"name":"boolean"}}}},"Notifications":{"props":{"autoClose":{"description":"Auto close timeout for all notifications in ms, false to disable auto close, can be overwritten for individual notifications in notifications.show function, 4000 by defualt","name":"autoClose","required":false,"type":{"name":"number | false"}},"containerWidth":{"description":"Notification width, cannot exceed 100%, 440 by default","name":"containerWidth","required":false,"type":{"name":"string | number"}},"limit":{"description":"Maximum number of notifications displayed at a time, other new notifications will be added to queue, 5 by default","name":"limit","required":false,"type":{"name":"number"}},"notificationMaxHeight":{"description":"Notification max-height, used for transitions, 200 by default","name":"notificationMaxHeight","required":false,"type":{"name":"string | number"}},"portalProps":{"description":"Props passed down to the Portal component","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Notifications position, \'bottom-right\' by default","name":"position","required":false,"type":{"name":"\\"bottom-center\\" | \\"top-center\\" | \\"top-left\\" | \\"top-right\\" | \\"bottom-left\\" | \\"bottom-right\\"","raw":"\\"bottom-center\\" | \\"top-center\\" | \\"top-left\\" | \\"top-right\\" | \\"bottom-left\\" | \\"bottom-right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"bottom-center\\""},{"value":"\\"top-center\\""},{"value":"\\"top-left\\""},{"value":"\\"top-right\\""},{"value":"\\"bottom-left\\""},{"value":"\\"bottom-right\\""}]}},"store":{"description":"Store for notifications state, can be used to create multiple instances of notifications system in your application","name":"store","required":false,"type":{"name":"NotificationsStore"}},"transitionDuration":{"description":"Notification transition duration in ms, 250 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"withinPortal":{"description":"Determines whether notifications container should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Notifications container z-index, 400 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}}}'),s=o(74490),l=o(89114),c=o(60626),p=o(61461);let u={"{ (value: any, replacer?: ((this: any, key: string, value: any) => any), space?: string | number | undefined): string; (value: any, replacer?: (string | number)[] | null | undefined, space?: string | ... 1 more ... | undefined): string; } | undefined":"typeof JSON.stringify","((text: string, reviver?: ((this: any, key: string, value: any) => any)) => any) | undefined":"typeof JSON.parse"};function m(e){let{component:t,query:o}=e;if(!d[t])return(0,n.jsx)(c.z,{errorOf:"props"});let r=Object.keys(d[t].props).filter(e=>d[t].props[e].name.toLowerCase().includes(o.toLowerCase().trim())).map(e=>{let r=d[t].props[e];return(0,n.jsxs)(a.i.Tr,{children:[(0,n.jsxs)(a.i.Td,{style:{whiteSpace:"nowrap"},children:[(0,n.jsx)(i.y,{highlight:o,component:"span",fz:"sm",children:r.name}),r.required&&(0,n.jsxs)(Text.x,{component:"sup",c:"red",fz:"xs",children:[" ","*"]})]}),(0,n.jsx)(a.i.Td,{children:(0,n.jsx)(p.e,{children:r.type.name in u?u[r.type.name]:r.type.name})}),(0,n.jsx)(a.i.Td,{children:(0,n.jsx)(l.O,{fz:"sm",children:r.description})})]},e)});return 0===r.length?(0,n.jsx)(Text.x,{c:"dimmed",mb:"xl",fz:"sm",children:"Nothing found"}):(0,n.jsx)(s.U,{children:(0,n.jsx)(a.i.ScrollContainer,{minWidth:800,children:(0,n.jsxs)(a.i,{layout:"fixed",children:[(0,n.jsx)(a.i.Thead,{children:(0,n.jsxs)(a.i.Tr,{children:[(0,n.jsx)(a.i.Th,{w:210,children:"Name"}),(0,n.jsx)(a.i.Th,{w:310,children:"Type"}),(0,n.jsx)(a.i.Th,{children:"Description"})]})}),(0,n.jsx)(a.i.Tbody,{children:r})]})})})}var f=o(27854),h=o(57847),y=o(7033);function b(e){let{component:t,componentPrefix:o}=e;return o?o===t?t:"".concat(o,".").concat(t.replace(o,"")):t}var v=o(91333),g=o.n(v);function w(e){let{components:t,componentPrefix:o}=e,[a,i]=(0,r.useState)(""),d=t.map(e=>(0,n.jsxs)("div",{className:g().section,children:[(0,n.jsxs)(h.D,{order:2,className:g().title,children:[b({component:e,componentPrefix:o})," component props"]}),(0,n.jsx)(m,{component:e,query:a})]},e));return(0,n.jsxs)("div",{children:[(0,n.jsx)(y.o,{className:g().search,value:a,onChange:e=>i(e.currentTarget.value),leftSection:(0,n.jsx)(f.Z,{className:g().searchIcon}),placeholder:"Search props",radius:"md",size:"lg",autoFocus:!0}),d]})}},1103:function(e,t,o){"use strict";o.d(t,{Hx:function(){return tu},VX:function(){return tm},D5:function(){return tw},$w:function(){return tf}});var n={};o.r(n),o.d(n,{AccordionStylesApi:function(){return i.x},ActionIconGroupStylesApi:function(){return s},ActionIconStylesApi:function(){return d},AffixStylesApi:function(){return l},AlertStylesApi:function(){return c.g},AnchorStylesApi:function(){return u},AppShellStylesApi:function(){return m},AreaChartStylesApi:function(){return f},AspectRatioStylesApi:function(){return h},AutocompleteStylesApi:function(){return y.I},AvatarGroupStylesApi:function(){return v},AvatarStylesApi:function(){return b},BackgroundImageStylesApi:function(){return g},BadgeStylesApi:function(){return w.o},BarChartStylesApi:function(){return q},BlockquoteStylesApi:function(){return C},BreadcrumbsStylesApi:function(){return S},BurgerStylesApi:function(){return P},ButtonGroupStylesApi:function(){return D.R},ButtonStylesApi:function(){return D.B},CalendarHeaderStylesApi:function(){return V},CalendarStylesApi:function(){return U},CardStylesApi:function(){return R},CarouselStylesApi:function(){return x.J},CenterStylesApi:function(){return k},CheckboxGroupStylesApi:function(){return I.I},CheckboxStylesApi:function(){return I.B},ChipStylesApi:function(){return z},CloseButtonStylesApi:function(){return M},CodeHighlightStylesApi:function(){return O},CodeHighlightTabsStylesApi:function(){return A},CodeStylesApi:function(){return L},ColorInputStylesApi:function(){return T.B},ColorPickerStylesApi:function(){return E.L},ColorSwatchStylesApi:function(){return F},ComboboxLikeSelectors:function(){return W.d},ComboboxStylesApi:function(){return W.$},ContainerStylesApi:function(){return j},DateInputStylesApi:function(){return et},DatePickerInputStylesApi:function(){return ee},DatePickerStylesApi:function(){return J},DateTimePickerStylesApi:function(){return eo},DecadeLevelGroupStylesApi:function(){return _},DialogStylesApi:function(){return er},DividerStylesApi:function(){return ea},DonutChartStylesApi:function(){return ei},DrawerStylesApi:function(){return ed},DropzoneFullScreenStylesApi:function(){return el},DropzoneStylesApi:function(){return es},FieldsetStylesApi:function(){return ec},FileInputStylesApi:function(){return ep.T},FlexStylesApi:function(){return eu},GridStylesApi:function(){return em},GroupStylesApi:function(){return ef},HighlightStylesApi:function(){return eh},HoverCardStylesApi:function(){return eb},ImageStylesApi:function(){return ev},IndicatorStylesApi:function(){return eg},InlineCodeHighlightStylesApi:function(){return N},InputBaseStylesApi:function(){return B},InputStylesApi:function(){return Y.a},InputWrapperStylesApi:function(){return Y.X},JsonInputStylesApi:function(){return ew.P},KbdStylesApi:function(){return eq},LineChartStylesApi:function(){return eC},ListStylesApi:function(){return eS},LoaderStylesApi:function(){return eP},LoadingOverlayStylesApi:function(){return eD},MarkStylesApi:function(){return eR},MenuStylesApi:function(){return ex.k},ModalStylesApi:function(){return ek},MonthLevelGroupStylesApi:function(){return G},MonthPickerInputStylesApi:function(){return $},MonthPickerStylesApi:function(){return Z},MonthStylesApi:function(){return K},MultiSelectStylesApi:function(){return eI.L},NativeSelectStylesApi:function(){return ez.c},NavLinkStylesApi:function(){return eM},NotificationStylesApi:function(){return eL.$},NotificationsStylesApi:function(){return eN},NumberInputStylesApi:function(){return eA.L},OverlayStylesApi:function(){return eO},PaginationStylesApi:function(){return eT.E},PaperStylesApi:function(){return eE},PasswordInputStylesApi:function(){return eF.m},PillGroupStylesApi:function(){return eW.h},PillStylesApi:function(){return eW.K},PillsInputFieldStylesApi:function(){return eY},PillsInputStylesApi:function(){return ej},PinInputStylesApi:function(){return eB.l},PopoverStylesApi:function(){return ey.T},ProgressStylesApi:function(){return eK.S},RadioGroupStylesApi:function(){return eV.T},RadioStylesApi:function(){return eV.P},RatingStylesApi:function(){return e_},RichTextEditorStylesApi:function(){return eH},RingProgressStylesApi:function(){return eG},ScrollAreaStylesApi:function(){return eU},SegmentedControlStylesApi:function(){return eX.o},SelectStylesApi:function(){return eZ.i},SimpleGridStylesApi:function(){return eJ},SkeletonStylesApi:function(){return eQ},SliderStylesApi:function(){return e$.a},SparklineStylesApi:function(){return e0},SpoilerStylesApi:function(){return e1},SpotlightStylesApi:function(){return e2},StackStylesApi:function(){return e5},StepperStylesApi:function(){return e6.U},SwitchGroupStylesApi:function(){return e4._},SwitchStylesApi:function(){return e4.T},TableStylesApi:function(){return e9},TabsStylesApi:function(){return e7.Y},TagsInputStylesApi:function(){return e3.h},TextInputStylesApi:function(){return te.G},TextStylesApi:function(){return p},TextareaStylesApi:function(){return e8.g},ThemeIconStylesApi:function(){return tt},TimeInputStylesApi:function(){return en},TimelineStylesApi:function(){return to},TitleStylesApi:function(){return tn},TooltipStylesApi:function(){return tr},TypographyStylesProviderStylesApi:function(){return ta},UnstyledButtonStylesApi:function(){return ti},YearLevelGroupStylesApi:function(){return H},YearPickerInputStylesApi:function(){return Q},YearPickerStylesApi:function(){return X}});var r=o(24246);o(27378);var a=o(57847),i=o(92442);let d={selectors:{root:"Root element",loader:"`Loader` component, rendered inside root element when `loading` prop is set",icon:"Inner icon wrapper"},vars:{root:{"--ai-bg":"Controls `background`","--ai-hover":"Controls `background` when hovered","--ai-bd":"Controls `border`","--ai-color":"Controls icon `color`","--ai-hover-color":"Controls icon `color` when hovered","--ai-radius":"Controls `border-radius`","--ai-size":"Controls `width`, `height`, `min-width` and `min-height` styles"}},modifiers:[{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"},{modifier:"data-loading",selector:["root","icon"],condition:"`loading` prop is set"}]},s={selectors:{group:"Root element"},vars:{group:{"--ai-border-width":"Controls `border-width` of child ActionIcon components that are placed beside one another"}},modifiers:[{modifier:"data-orientation",selector:"group",value:"Value of `orientation` prop"}]},l={selectors:{root:"Root element"},vars:{root:{"--affix-z-index":"Controls `z-index` property","--affix-top":"Controls `top` property","--affix-bottom":"Controls `bottom` property","--affix-left":"Controls `left` property","--affix-right":"Controls `right` property"}}};var c=o(30345);let p={selectors:{root:"Root element"},vars:{root:{"--text-fz":"Controls `font-size` property","--text-lh":"Controls `line-height` property","--text-gradient":"Text fill gradient","--text-line-clamp":"Number of lines that should be visible"}},modifiers:[{modifier:"data-truncate",selector:"root",value:"Value of `truncate` prop",condition:"`truncate` prop is set"},{modifier:"data-line-clamp",selector:"root",condition:"`lineClamp` prop is a number"},{modifier:"data-inline",selector:"root",condition:"`inline` prop is set"},{modifier:"data-inherit",selector:"root",condition:"`inherit` prop is set"}]},u={...p,modifiers:[...p.modifiers,{modifier:"data-underline",selector:"root",value:"Value of `underline` prop"}]},m={selectors:{root:"Root element (`AppShell` component)",navbar:"`AppShell.Navbar` root element",header:"`AppShell.Header` root element",main:"`AppShell.Main` root element",aside:"`AppShell.Aside` root element",footer:"`AppShell.Footer` root element",section:"`AppShell.Section` root element"},vars:{root:{"--app-shell-transition-duration":"Controls transition duration of all children","--app-shell-transition-timing-function":"Controls transition timing function of all children"}},modifiers:[{modifier:"data-resizing",selector:"root",condition:"User is resizing the window"},{modifier:"data-layout",selector:"root",value:"Value of the `layout` prop"},{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"},{modifier:"data-with-border",selector:["navbar","header","aside","footer"],condition:"`withBorder` prop is set either on the `AppShell` or on the associated component"},{modifier:"data-grow",selector:"section",condition:"`grow` prop is set on the `AppShell.Section`"}]},f={selectors:{root:"Root element",area:"Area of the chart",axis:"X and Y axis of the chart",container:"Recharts ResponsiveContainer component",grid:"Recharts CartesianGrid component",legend:"Legend root element",legendItem:"Legend item representing data series",legendItemColor:"Legend item color",legendItemName:"Legend item name",tooltip:"Tooltip root element",tooltipBody:"Tooltip wrapper around all items",tooltipItem:"Tooltip item representing data series",tooltipItemBody:"Tooltip item wrapper around item color and name",tooltipItemColor:"Tooltip item color",tooltipItemName:"Tooltip item name",tooltipItemData:"Tooltip item data",tooltipLabel:"Label of the tooltip",referenceLine:"Reference line"},vars:{root:{"--chart-grid-color":"Controls color of the grid and cursor lines","--chart-text-color":"Controls color of the axis labels"}},modifiers:[]},h={selectors:{root:"Root element"},vars:{root:{"--ar-ratio":"Aspect ratio"}}};var y=o(87961);let b={selectors:{root:"Root element",image:"`img` element",placeholder:"Avatar placeholder, displayed when the image cannot be loaded"},vars:{root:{"--avatar-bd":"Controls placeholder `border`","--avatar-bg":"Controls placeholder `background`","--avatar-color":"Controls placeholder text `color`","--avatar-size":"Controls `width`, `min-width` and `height`","--avatar-radius":"Controls `border-radius`"}}},v={selectors:{group:"Root element"},vars:{group:{"--ag-spacing":"Controls negative spacing between avatars"}}},g={selectors:{root:"Root element"},vars:{root:{"--bi-radius":"Controls `border-radius`"}}};var w=o(68738);let q={selectors:{root:"Root element",bar:"Bar of the chart",axis:"X and Y axis of the chart",container:"Recharts ResponsiveContainer component",grid:"Recharts CartesianGrid component",legend:"Legend root element",legendItem:"Legend item representing data series",legendItemColor:"Legend item color",legendItemName:"Legend item name",tooltip:"Tooltip root element",tooltipBody:"Tooltip wrapper around all items",tooltipItem:"Tooltip item representing data series",tooltipItemBody:"Tooltip item wrapper around item color and name",tooltipItemColor:"Tooltip item color",tooltipItemName:"Tooltip item name",tooltipItemData:"Tooltip item data",tooltipLabel:"Label of the tooltip",referenceLine:"Reference line"},vars:{root:{"--chart-grid-color":"Controls color of the grid and cursor lines","--chart-text-color":"Controls color of the axis labels","--chart-cursor-fill":"Controls fill color of the cursor line"}},modifiers:[]},C={selectors:{root:"Root element",icon:"Icon element",cite:"Cite element"},vars:{root:{"--bq-bd":"Controls `border`","--bq-bg-dark":"Controls `background-color` in dark color scheme","--bq-bg-light":"Controls `background-color` in light color scheme","--bq-icon-size":"Controls `width` and `height` of the icon","--bq-radius":"Controls `border-radius`"}}},S={selectors:{root:"Root element",separator:"Separator between children",breadcrumb:"Breadcrumb item"},vars:{root:{"--bc-separator-margin":"Control left and right `margin` of separator"}}},P={selectors:{root:"Root element (button)",burger:"Inner element that contains burger lines"},vars:{root:{"--burger-color":"Controls background-color of lines","--burger-size":"Controls width and height of the button","--burger-transition-duration":"Controls transition-duration of lines","--burger-transition-timing-function":"Controls transition-timing-function of lines"}},modifiers:[{modifier:"data-opened",selector:"burger",condition:"opened prop is set"}]};var D=o(86140);let R={selectors:{root:"Root element",section:"`Card.Section` root element"},vars:{root:{"--card-padding":"Controls `padding` of the card, also used to control `Card.Section` spacing"}},modifiers:[{modifier:"data-first-section",selector:"section",condition:"`Card.Section` is the child of the `Card`"},{modifier:"data-last-section",selector:"section",condition:"`Card.Section` is the last child of the `Card`"},{modifier:"data-with-border",selector:"root",condition:"`withBorder` prop is set on `Card` component"},{modifier:"data-with-border",selector:"section",condition:"`withBorder` prop is set on `Card.Section` component"},{modifier:"data-inherit-padding",selector:"section",condition:"`inheritPadding` prop is set on `Card.Section` component"}]};var x=o(23570);let k={selectors:{root:"Root element"},vars:{}};var I=o(86423);let z={selectors:{root:"Root element",checkIcon:"Check icon, visible when checked prop is true",iconWrapper:"Wraps `checkIcon` for alignment",input:"Input element, hidden by default",label:"Input label, used as a chip body"},vars:{root:{"--chip-fz":"Controls `font-size`","--chip-size":"Controls `height`","--chip-icon-size":"Controls width and height of the icon","--chip-padding":"Controls horizontal padding when chip is not checked","--chip-checked-padding":"Controls horizontal padding when chip is checked","--chip-radius":"Controls `border-radius`","--chip-bg":"Controls `background-color` when chip is checked","--chip-hover":"Controls `background-color` when chip is checked and hovered","--chip-color":"Controls `color` when chip is checked","--chip-bd":"Controls border when chip is checked","--chip-spacing":"Controls spacing between check icon and label"}},modifiers:[{modifier:"data-checked",selector:"label",condition:"Chip is checked"},{modifier:"data-disabled",selector:"label",condition:"`disabled` prop is set"}]},M={selectors:{root:"Root element"},vars:{root:{"--cb-icon-size":"Controls `width` of the `X` icon","--cb-radius":"Controls `border-radius` of the button","--cb-size":"Controls `width` and `height` of the button"}}},L={selectors:{root:"Root element"},vars:{root:{"--code-bg":"Controls `background-color`"}},modifiers:[{modifier:"data-block",selector:"root",condition:"`block` prop is set"}]},A={selectors:{root:"Root element",pre:"Pre element, contains code element",codeWrapper:"Wrapper around code element, used for expand/collapse logic",code:"Code element, contains highlighted code",header:"Header element, contains copy button and files names",controls:"Controls container, contains control buttons (copy/collapse, etc.)",control:"Control button, copy/collapse, etc.",files:"Files names list",file:"File name",fileIcon:"File icon",showCodeButton:"Button that reveals full code when it is collapsed"},vars:{}},N={selectors:{code:"Root element"},vars:{}},O={selectors:{root:"Root element",pre:"Pre element, contains code element",code:"Code element",copy:"Copy button"},vars:{}};var T=o(27882),E=o(64954);let F={selectors:{root:"Root element",alphaOverlay:"Overlay with checkerboard pattern",shadowOverlay:"Overlay with inner box-shadow",colorOverlay:"Overlay with given color background",childrenOverlay:"Overlay with `children` inside"},vars:{root:{"--cs-radius":"Controls `border-radius` of all overlays and `root` element","--cs-size":"Controls `width`, `height`, `min-width` and `min-height` of the `root` element"}}};var W=o(92511);let j={selectors:{root:"Root element"},vars:{root:{"--container-size":"Controls container `max-width`"}}};var Y=o(50352);let B={selectors:{...Y.a.selectors,...Y.X.selectors},vars:{}},K={selectors:{monthThead:"thead element of month table",monthRow:"tr element of month table",monthTbody:"tbody element of month table",monthCell:"td element of month table",month:"Month table element",weekdaysRow:"Weekdays tr element",weekday:"Weekday th element",day:"Month day control"},vars:{},modifiers:[{modifier:"data-with-spacing",selector:"monthCell",condition:"`withCellSpacing` prop is set"},{modifier:"data-today",selector:"day",condition:"Date is the same as new Date()"},{modifier:"data-hidden",selector:"day",condition:"Day is outside of current month and `hideOutsideDates` is set"},{modifier:"data-disabled",selector:"day",condition:"Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.)"},{modifier:"data-weekend",selector:"day",condition:"Day is weekend"},{modifier:"data-outside",selector:"day",condition:"Day is outside of the current month"},{modifier:"data-selected",selector:"day",condition:"Day is selected"},{modifier:"data-in-range",selector:"day",condition:"Day is in range selection"},{modifier:"data-first-in-range",selector:"day",condition:"Day is first in range selection"},{modifier:"data-last-in-range",selector:"day",condition:"Day is last in range selection"}]},V={selectors:{calendarHeader:"Calendar header root element",calendarHeaderControl:"Previous/next calendar header controls",calendarHeaderControlIcon:"Icon of previous/next calendar header controls",calendarHeaderLevel:"Level control (changes levels when clicked, month -> year -> decade)"},vars:{calendarHeader:{"--dch-control-size":"Controls size of the previous/next and level controls","--dch-fz":"Controls font-size of the previous/next and level controls"}},modifiers:[{modifier:"data-direction",selector:"calendarHeaderControl",value:'`"previous"` or `"next"` depending on the control type'},{modifier:"data-disabled",selector:"calendarHeaderControl",condition:"Control is disabled for any reason"}]},_={selectors:{...V.selectors,levelsGroup:"Group of decades levels",yearsList:"Years list table element",yearsListRow:"Years list row element",yearsListCell:"Years list cell element",yearsListControl:"Button used to pick months and years"},vars:{}},H={selectors:{...V.selectors,levelsGroup:"Group of decades levels",monthsList:"Years list table element",monthsListRow:"Years list row element",monthsListCell:"Years list cell element",monthsListControl:"Button used to pick months and years"},vars:{}},G={selectors:{...V.selectors,levelsGroup:"Group of decades levels",...K.selectors},vars:{}},U={selectors:{...V.selectors,..._.selectors,...H.selectors,...G.selectors},vars:{},modifiers:[...V.modifiers,...K.modifiers]},X={selectors:{...V.selectors,..._.selectors},vars:{},modifiers:V.modifiers},Z={selectors:{...V.selectors,..._.selectors,...H.selectors},vars:{},modifiers:V.modifiers},J={selectors:{...V.selectors,..._.selectors,...H.selectors,...G.selectors},vars:{},modifiers:[...V.modifiers,...K.modifiers]},Q={selectors:{...B.selectors,...X.selectors,placeholder:"Placeholder element"},vars:{},modifiers:X.modifiers},$={selectors:{...B.selectors,...Z.selectors,placeholder:"Placeholder element"},vars:{},modifiers:Z.modifiers},ee={selectors:{...B.selectors,...J.selectors,placeholder:"Placeholder element"},vars:{},modifiers:J.modifiers},et={selectors:{...B.selectors,...J.selectors},vars:{},modifiers:J.modifiers},eo={selectors:{...B.selectors,...J.selectors,timeWrapper:"Wrapper around time input and submit button",timeInput:"TimeInput",submitButton:"Submit button"},vars:{},modifiers:J.modifiers},en=B,er={selectors:{root:"Root element",closeButton:"Close button"},vars:{root:{"--dialog-size":"Controls `width` of the dialog"}}},ea={selectors:{root:"Root element",label:"Label element"},vars:{root:{"--divider-border-style":"Controls `border-style`","--divider-color":"Controls `border-color`","--divider-size":"Controls `border-width`"}},modifiers:[{modifier:"data-with-label",selector:"root",condition:"`label` prop is truthy"},{modifier:"data-orientation",selector:"root",value:"Value of `orientation` prop"},{modifier:"data-position",selector:"label",value:"Value of `labelPosition` prop"}]},ei={selectors:{root:"Root element",label:"Chart label, controlled by `chartLabel` prop"},vars:{root:{"--chart-labels-color":"Controls color of the chart labels","--chart-size":"Controls size of the chart","--chart-stroke-color":"Controls color of the chart stroke"}},modifiers:[]},ed={selectors:{root:"Root element",inner:"Element used to center modal, has fixed position, takes entire screen",content:"`Drawer.Content` root element",header:"Contains title and close button",overlay:"Overlay displayed under the `Drawer.Content`",title:"Drawer title (h2 tag), displayed in the header",body:"Drawer body, displayed after header",close:"Close button"},vars:{root:{"--drawer-offset":"Controls `margin` of `Drawer.Content`","--drawer-size":"Controls `width` of `Drawer.Content`","--drawer-flex":"Controls `flex` property of `Drawer.Content`","--drawer-align":"Controls `align-items` property of `Drawer.Content`","--drawer-justify":"Controls `justify-content` property of `Drawer.Content`","--drawer-height":"Controls `height` property of `Drawer.Content`"}}},es={selectors:{root:"Dropzone root element",inner:"Dropzone inner element (wraps children)"},vars:{root:{"--dropzone-accept-bg":"Controls `background-color` when file is accepted","--dropzone-reject-bg":"Controls `background-color` when file is rejected","--dropzone-accept-color":"Controls `color` when file is accepted","--dropzone-reject-color":"Controls `color` when file is rejected","--dropzone-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-accept",selector:"root",condition:"Files that are dragged over the dropzone are accepted"},{modifier:"data-reject",selector:"root",condition:"Files that are dragged over the dropzone are rejected"},{modifier:"data-idle",selector:"root",condition:"Dropzone is idle"},{modifier:"data-loading",selector:"root",condition:"`loading` prop is set"},{modifier:"data-activate-on-click",selector:"root",condition:"`activateOnClick` prop is `true`"}]},el={selectors:{fullScreen:"Dropzone.Fullscreen root element",...es.selectors},vars:{}},ec={selectors:{root:"Root element",legend:"Legend element"},vars:{root:{"--fieldset-radius":"Controls `border-radius`"}}};var ep=o(29237);let eu={selectors:{root:"Root element"},vars:{}},em={selectors:{root:"Root element",inner:"Columns wrapper",col:"`Grid.Col` root element"},vars:{root:{"--grid-overflow":"Controls `overflow` property","--grid-align":"Controls `align-items` property","--grid-justify":"Controls `justify-content` property"}}},ef={selectors:{root:"Root element"},vars:{root:{"--group-align":"Controls `align-items` property","--group-justify":"Controls `justify-content` property","--group-gap":"Controls `gap` property","--group-wrap":"Controls `flex-wrap` property","--group-child-width":"Controls `max-width` of child elements, applied when grow prop is set and `preventGrowOverflow` is `true`"}},modifiers:[{modifier:"data-grow",selector:"root",condition:"`grow` prop is set"}]},eh={selectors:{root:"Root element"},vars:{}};var ey=o(62623);let eb=ey.T,ev={selectors:{root:"Root element"},vars:{root:{"--image-object-fit":"Controls `object-fit` property","--image-radius":"Controls `border-radius` property"}},modifiers:[{modifier:"data-fallback",selector:"root",condition:"Image failed to load"}]},eg={selectors:{root:"Root element",indicator:"Indicator element"},vars:{root:{"--indicator-bottom":"Controls `bottom` style","--indicator-left":"Controls `left` style","--indicator-right":"Controls `right` style","--indicator-top":"Controls `top` style","--indicator-radius":"Controls `border-radius`","--indicator-size":"Controls `min-width` and `height`","--indicator-translate-x":"Controls `translateX` style, used for positioning","--indicator-translate-y":"Controls `translateY` style, used for positioning","--indicator-z-index":"Controls `z-index` style","--indicator-color":"Controls `background-color`","--indicator-text-color":"Controls `color`"}},modifiers:[{modifier:"data-inline",selector:"root",condition:"`inline` prop is set"},{modifier:"data-with-label",selector:"indicator",condition:"`label` prop is set"},{modifier:"data-with-border",selector:"indicator",condition:"`withBorder` prop is set"},{modifier:"data-processing",selector:"indicator",condition:"`processing` prop is set"}]};var ew=o(55838);let eq={selectors:{root:"Root element"},vars:{root:{"--kbd-fz":"Controls `font-size`","--kbd-padding":"Controls `padding`"}}},eC={selectors:{root:"Root element",line:"Line of the chart",axis:"X and Y axis of the chart",container:"Recharts ResponsiveContainer component",grid:"Recharts CartesianGrid component",legend:"Legend root element",legendItem:"Legend item representing data series",legendItemColor:"Legend item color",legendItemName:"Legend item name",tooltip:"Tooltip root element",tooltipBody:"Tooltip wrapper around all items",tooltipItem:"Tooltip item representing data series",tooltipItemBody:"Tooltip item wrapper around item color and name",tooltipItemColor:"Tooltip item color",tooltipItemName:"Tooltip item name",tooltipItemData:"Tooltip item data",tooltipLabel:"Label of the tooltip",referenceLine:"Reference line"},vars:{root:{"--chart-grid-color":"Controls color of the grid and cursor lines","--chart-text-color":"Controls color of the axis labels"}},modifiers:[]},eS={selectors:{root:"Root element",item:"ListItem root element",itemIcon:"ListItem icon",itemLabel:"ListItem content",itemWrapper:"ListItem wrapper element, container, icon and content"},vars:{root:{"--list-fz":"Controls `font-size`","--list-lh":"Controls `line-height`","--list-spacing":"Controls spacing between items"}},modifiers:[{modifier:"data-with-padding",selector:"root",condition:"`withPadding` prop is set"},{modifier:"data-centered",selector:"item",condition:"`center` prop is set on List component"},{modifier:"data-with-icon",selector:"item",condition:"`icon` prop is set on ListItem component"}]},eP={selectors:{root:"Root element"},vars:{root:{"--loader-size":"Controls loader size (usually `width` and `height`, in some cases only `width`)","--loader-color":"Control loader color"}}},eD={selectors:{root:"Root element",overlay:"`Overlay` component",loader:"`Loader` component"},vars:{root:{"--lo-z-index":"Controls `z-index` of the overlay and loader"}}},eR={selectors:{root:"Root element"},vars:{root:{"--mark-bg-dark":"Controls `background-color` in dark color scheme","--mark-bg-light":"Controls `background-color` for light color scheme"}}};var ex=o(91516);let ek={selectors:{root:"Root element",inner:"Element used to center modal, has fixed position, takes entire screen",content:"`Modal.Content` root element",header:"Contains title and close button",overlay:"Overlay displayed under the `Modal.Content`",title:"Modal title (h2 tag), displayed in the header",body:"Modal body, displayed after header",close:"Close button"},vars:{root:{"--modal-radius":"Controls `border-radius` of `Modal.Content`","--modal-size":"Controls `width` of `Modal.Content`","--modal-x-offset":"Controls left and right `padding` of the inner element used to position `Modal.Content`","--modal-y-offset":"Controls top and bottom `padding` of the inner element used to position `Modal.Content`"}},modifiers:[{modifier:"data-full-screen",selector:"root",condition:"`fullScreen` prop is set"},{modifier:"data-centered",selector:"root",condition:"`centered` prop is set"}]};var eI=o(7634),ez=o(59325);let eM={selectors:{root:"Root element",body:"Contains label and description",section:"Left and right sections",label:"NavLink label",description:"Dimmed description displayed below the label",children:"Wrapper around nested links",chevron:"Default chevron icon"},vars:{root:{"--nl-bg":"Controls link `background-color`","--nl-color":"Controls link `color`","--nl-hover":"Controls link `background-color` when hovered"},children:{"--nl-offset":"Controls nested links offset"}},modifiers:[{modifier:"data-active",selector:"root",condition:"`active` prop is set"}]};var eL=o(37951),eA=o(68170);let eN={selectors:{root:"Notifications container, contains all notifications",notification:"Single notification"},vars:{root:{"--notifications-container-width":"Controls notifications container `max-width`","--notifications-left":"Controls notifications container `left`","--notifications-right":"Controls notifications container `right`","--notifications-top":"Controls notifications container `top`","--notifications-transform":"Controls notifications container `transform`","--notifications-z-index":"Controls notifications container `z-index`"}}},eO={selectors:{root:"Root element"},vars:{root:{"--overlay-bg":"Controls `background-color`","--overlay-filter":"Controls `backdrop-filter`","--overlay-radius":"Controls `border-radius`","--overlay-z-index":"Controls `z-index`"}},modifiers:[{modifier:"data-center",selector:"root",condition:"`center` prop is set"},{modifier:"data-fixed",selector:"root",condition:"`fixed` prop is set"}]};var eT=o(37731);let eE={selectors:{root:"Root element"},vars:{root:{"--paper-radius":"Controls `border-radius`","--paper-shadow":"Controls `box-shadow`"}},modifiers:[{modifier:"data-with-border",selector:"root",condition:"`withBorderProp` is set"}]};var eF=o(20827),eW=o(81581);let ej={selectors:{...Y.a.selectors,...Y.X.selectors},vars:{}},eY={selectors:{field:"Root element"},vars:{},modifiers:[{modifier:"data-type",selector:"field",value:"Value of `type` prop"},{modifier:"data-disabled",selector:"field",condition:"`disabled` prop is set"}]};var eB=o(34722),eK=o(35150),eV=o(97811);let e_={selectors:{root:"Root element",starSymbol:"Default star icon",input:"Item input, hidden by default",label:"Item label, used to display star icon",symbolBody:"Wrapper around star icon for centering",symbolGroup:"Group of symbols, used to display fractions"},vars:{root:{"--rating-color":"Controls filled star icon color","--rating-size":"Controls star icon width and height"}},modifiers:[{modifier:"data-read-only",selector:"label",condition:"`readOnly` prop is set"},{modifier:"data-active",selector:"input",condition:"Input value is the same as component value"},{modifier:"data-filled",selector:"starSymbol",condition:"Associated input value is less or equal to the component value"}]},eH={selectors:{root:"Root element",toolbar:"Toolbar element",content:"Content area",typographyStylesProvider:"TypographyStylesProvider component, wraps content",control:"RichTextEditor.Control root element, used as a base for all controls",controlsGroup:"RichTextEditor.ControlsGroup component root",linkEditor:"Link editor root element",linkEditorSave:"Link editor save button",linkEditorInput:"Link editor url input",linkEditorExternalControl:"Link editor external button",linkEditorDropdown:"Link editor popover dropdown element"},vars:{},modifiers:[{modifier:"data-active",selector:"control",condition:"Control is active"}]},eG={selectors:{root:"Root element",svg:"svg element",curve:"circle element",label:"Label element"},vars:{root:{"--rp-label-offset":"Label offset on the left and right sides of the ring","--rp-size":"Controls `height` and `width` of svg and root elements"}}},eU={selectors:{root:"Root element",viewport:"",scrollbar:"",thumb:"",corner:""},vars:{root:{"--scrollarea-scrollbar-size":"Scrollbar size"}},modifiers:[{modifier:"data-hidden",selector:["scrollbar","corner"],condition:'type="never"'},{modifier:"data-hovered",selector:"corner",condition:"One of the scrollbars is hovered"},{modifier:"data-orientation",selector:"scrollbar",value:'"horizontal" or "vertical" depending on scrollbar position'}]};var eX=o(67355),eZ=o(61309);let eJ={selectors:{root:"Root element"},vars:{}},eQ={selectors:{root:"Root element"},vars:{root:{"--skeleton-height":"Controls skeleton `height`","--skeleton-width":"Controls skeleton `width`","--skeleton-radius":"Controls skeleton `border-radius`"}},modifiers:[{modifier:"data-visible",selector:"root",condition:"`visible` prop is set"},{modifier:"data-animate",selector:"root",condition:"`animate` prop is set"}]};var e$=o(66763);let e0={selectors:{root:"Root element"},vars:{root:{"--chart-color":"Controls stroke and fill color"}},modifiers:[]},e1={selectors:{root:"Root element",content:"Wraps content to set max-height and transition",control:"Show/hide content control"},vars:{root:{"--spoiler-transition-duration":"Controls transition duration"}},modifiers:[{modifier:"data-has-spoiler",selector:"root",condition:"Whether the control button is shown or not"}]},e2={selectors:{...ek.selectors,search:"Search input (`Spotlight.Search`)",actionsList:"Actions list (`Spotlight.ActionsList`)",empty:"Empty state (`Spotlight.Empty`)",footer:"Footer (`Spotlight.Footer`)",action:"Action (`Spotlight.Action`)",actionBody:"Body of the action, contains label and description",actionLabel:"`Spotlight.Action` label",actionDescription:"`Spotlight.Action` description",actionSection:"`Spotlight.Action` left and right sections",actionsGroup:"`Spotlight.ActionsGroup` root element"},vars:{},modifiers:[{modifier:"data-selected",selector:"action",condition:"Action is selected with up/down keys"},{modifier:"data-position",selector:"actionSection",value:"Section position: left or right"},{modifier:"data-dimmed",selector:"actionSection",condition:"`dimmedSections` prop is set on `Spotlight.Action` component"}]},e5={selectors:{root:"Root element"},vars:{root:{"--stack-align":"Controls `align-items` property","--stack-justify":"Controls `justify-content` property","--stack-gap":"Controls `gap` property"}}};var e6=o(49717),e4=o(12379),e7=o(49235),e3=o(73811);let e9={selectors:{table:"Root `table` element (`Table` component)",thead:"`thead` element (`Table.Thead` component)",tbody:"`tbody` element (`Table.Tbody` component)",tfoot:"`tfoot` element (`Table.Tfoot` component)",tr:"`tr` element (`Table.Tr` component)",th:"`th` element (`Table.Th` component)",td:"`td` element (`Table.Td` component)",caption:"`caption` element (`Table.Caption` component)"},vars:{table:{"--table-border-color":"Controls `border-color` of all elements inside table","--table-layout":"Controls `table-layout` of the table element, auto by default","--table-caption-side":"Controls caption-side of the table element, `bottom` by default","--table-horizontal-spacing":"Controls `padding-left` and `padding-right` of `Table.Th` and `Table.Td` elements","--table-vertical-spacing":"Controls `padding-top` and `padding-bottom` of `Table.Td` and `Table.Th` elements","--table-striped-color":"Controls `background-color` of even/odd `Table.Tr` elements","--table-highlight-on-hover-color":"Controls `background-color` of `Table.Tr` elements when hovered","--table-sticky-header-offset":"Controls `top` offset of sticky header"}},modifiers:[{modifier:"data-with-table-border",selector:"table",condition:"`withTableBorder` prop is set on `Table` component"},{modifier:"data-with-column-border",selector:["th","td"],condition:"`withColumnsBorder` prop is set on `Table` component"},{modifier:"data-with-row-border",selector:"tr",condition:"`withRowsBorder` prop is set on `Table` component"},{modifier:"data-striped",selector:"tr",value:"odd | even",condition:"`striped` prop is set on `Table` component"},{modifier:"data-hover",selector:"tr",condition:"`highlightOnHover` prop is set on `Table` component"},{modifier:"data-size",selector:"tr",value:"value of `captionSize` prop on `Table` component"}]};var e8=o(76475),te=o(52176);let tt={selectors:{root:"Root element"},vars:{root:{"--ti-bg":"Controls `background`","--ti-bd":"Controls `border`","--ti-color":"Controls icon `color`","--ti-radius":"Controls `border-radius`","--ti-size":"Controls `width`, `height`, `min-width` and `min-height` styles"}}},to={selectors:{root:"Root element",item:"Item root element",itemBody:"Item body, wraps title and content",itemTitle:"Item title, controlled by title prop",itemContent:"Item content, controlled by children prop",itemBullet:"Item bullet"},vars:{root:{"--tl-bullet-size":"Controls bullet `width` and `height`","--tl-color":"Controls active bullet and line colors","--tl-icon-color":"Controls icon color","--tl-line-width":"Controls width of the line between bullets","--tl-radius":"Controls bullet `border-radius`"}},modifiers:[{modifier:"data-active",selector:["item","itemBullet"],condition:"Item index is =< Timeline active prop"},{modifier:"data-line-active",selector:["item"],condition:"Item index is < Timeline active prop"}]},tn={selectors:{root:"Root element"},vars:{root:{"--title-fw":"Title `font-weight`, by default value from `theme.headings`","--title-fz":"Title `font-size`, by default value from `theme.headings`","--title-lh":"Title `line-heigh`t, by default value from `theme.headings`","--title-line-clamp":"Controls `-webkit-line-clamp` css property","--title-text-wrap":"Controls `text-wrap` css property"}},modifiers:[{modifier:"data-order",selector:"root",value:"Value of the `order` prop"},{modifier:"data-line-clamp",selector:"root",condition:"`lineClamp` prop is a number"}]},tr={selectors:{tooltip:"Root element",arrow:"Tooltip arrow, rendered inside tooltip"},vars:{tooltip:{"--tooltip-bg":"Tooltip `background-color`","--tooltip-radius":"Tooltip `border-radius`","--tooltip-color":"Controls tooltip text color"}},modifiers:[{modifier:"data-multiline",selector:"tooltip",condition:"`multiline` prop is set"}]},ta={selectors:{root:"Root element"},vars:{}},ti={selectors:{root:"Root element"},vars:{}};var td=o(40184),ts=o(60626),tl=o(28862),tc=o(89114),tp=o(61461);function tu(e){var t,o,n;let{data:a,fixedLayout:i=!0,...d}=e,s=null===(t=a.modifiers)||void 0===t?void 0:t.some(e=>!!e.condition),l=null===(o=a.modifiers)||void 0===o?void 0:o.some(e=>!!e.value),c=(null===(n=a.modifiers)||void 0===n?void 0:n.map((e,t)=>(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Td,{children:Array.isArray(e.selector)?e.selector.join(", "):e.selector}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tp.e,{children:e.modifier})}),s&&(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:e.condition||"–"})}),l&&(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:e.value||"–"})})]},t)))||[];return(0,r.jsx)(tl.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tl.i,{layout:i?"fixed":void 0,...d,children:[(0,r.jsx)(tl.i.Thead,{children:(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Th,{w:i?210:void 0,children:"Selector"}),(0,r.jsx)(tl.i.Th,{w:i?310:void 0,children:"Attribute"}),s&&(0,r.jsx)(tl.i.Th,{children:"Condition"}),l&&(0,r.jsx)(tl.i.Th,{children:"Value"})]})}),(0,r.jsx)(tl.i.Tbody,{children:c})]})})}function tm(e){let{data:t,component:o,fixedLayout:n=!0,...a}=e,i=Object.keys(t.selectors).map(e=>(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Td,{children:e}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsxs)(tp.e,{children:[".mantine-",o,"-",e]})}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:t.selectors[e]})})]},e));return(0,r.jsx)(tl.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tl.i,{layout:n?"fixed":void 0,...a,children:[(0,r.jsx)(tl.i.Thead,{children:(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Th,{w:n?210:void 0,children:"Selector"}),(0,r.jsx)(tl.i.Th,{w:n?310:void 0,children:"Static selector"}),(0,r.jsx)(tl.i.Th,{children:"Description"})]})}),(0,r.jsx)(tl.i.Tbody,{children:i})]})})}function tf(e){let{data:t,fixedLayout:o=!0,...n}=e,a=Object.keys(t.vars).reduce((e,o)=>(Object.keys(t.vars[o]).forEach((n,a)=>{e.push((0,r.jsxs)(tl.i.Tr,{children:[0===a&&(0,r.jsx)(tl.i.Td,{rowSpan:Object.keys(t.vars[o]).length,children:o}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tp.e,{children:n})}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:t.vars[o][n]})})]},"".concat(o,"-").concat(n)))}),e),[]);return(0,r.jsx)(tl.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tl.i,{layout:o?"fixed":void 0,...n,children:[(0,r.jsx)(tl.i.Thead,{children:(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Th,{w:o?210:void 0,children:"Selector"}),(0,r.jsx)(tl.i.Th,{w:o?310:void 0,children:"Variable"}),(0,r.jsx)(tl.i.Th,{children:"Description"})]})}),(0,r.jsx)(tl.i.Tbody,{children:a})]})})}var th=o(1374),ty=o.n(th);function tb(e){let{component:t,componentPrefix:o}=e,i=n["".concat(t,"StylesApi")];if(!i)return(0,r.jsx)(ts.z,{errorOf:"Styles API"});let d=(0,td.iY)({component:t,componentPrefix:o});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:ty().section,children:[(0,r.jsxs)(a.D,{order:2,className:ty().title,children:[d," selectors"]}),(0,r.jsx)(tm,{component:t,data:i})]}),Object.keys(i.vars).length>0&&(0,r.jsxs)("div",{className:ty().section,children:[(0,r.jsxs)(a.D,{order:2,className:ty().title,children:[d," CSS variables"]}),(0,r.jsx)(tf,{data:i})]}),Array.isArray(i.modifiers)&&i.modifiers.length>0&&(0,r.jsxs)("div",{className:ty().section,children:[(0,r.jsxs)(a.D,{order:2,className:ty().title,children:[d," data attributes"]}),(0,r.jsx)(tu,{data:i})]})]})}var tv=o(94998),tg=o(79388);function tw(e){let{components:t,componentPrefix:o}=e,n=t.map(e=>(0,r.jsx)("div",{className:ty().group,children:(0,r.jsx)(tb,{component:e,componentPrefix:o})},e));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:ty().groupsHeader,children:[(0,r.jsx)(a.D,{order:2,className:ty().title,children:"Styles API"}),(0,r.jsxs)(tg.NV,{style:{marginTop:0},children:[(0,r.jsx)(tv.E,{children:t[0]})," component supports"," ",(0,r.jsx)(tg.Ec,{href:"/styles/styles-api",children:"Styles API"}),". With Styles API, you can customize styles of any inner element. Follow"," ",(0,r.jsx)(tg.Ec,{href:"/styles/styles-api",children:"the documentation"})," to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles."]})]}),n]})}},60626:function(e,t,o){"use strict";o.d(t,{z:function(){return a}});var n=o(24246);o(27378);var Text=o(26569),r=o(9136);function a(e){let{errorOf:t}=e;return(0,n.jsxs)(Text.x,{children:[(0,n.jsxs)(Text.x,{span:!0,c:"red",children:["Error loading component ",t," data."," "]}),"If you see this message please let us know by"," ",(0,n.jsx)(r.e,{href:"https://github.com/mantinedev/mantine/issues/new?assignees=&labels=&template=docs_report.yml",target:"_blank",children:"opening an issue on GitHub"}),"."]})}},61461:function(e,t,o){"use strict";o.d(t,{e:function(){return d}});var n=o(24246);o(27378);var r=o(40624),Text=o(26569),a=o(97977),i=o.n(a);function d(e){let{className:t,...o}=e;return(0,n.jsx)(Text.x,{component:"span",className:(0,r.Z)(i().code,t),...o})}},1535:function(e){e.exports={item:"HeaderItem_item__E_3UP",label:"HeaderItem_label__3TYI5"}},90576:function(e){e.exports={wrapper:"ImportStatement_wrapper__4lafM"}},85008:function(e){e.exports={wrapper:"LinkItem_wrapper__J_9Wi",link:"LinkItem_link__2mUFe",icon:"LinkItem_icon__gjSxi"}},11258:function(e){e.exports={wrapper:"MdxPageHeader_wrapper__vGpBZ",header:"MdxPageHeader_header__egn7g",title:"MdxPageHeader_title__bekaq",description:"MdxPageHeader_description__nEVpr"}},81026:function(e){e.exports={wrapper:"MdxRawContent_wrapper__8ZUWQ",container:"MdxRawContent_container__v_UMr",tableOfContents:"MdxRawContent_tableOfContents__voKU_"}},73279:function(e){e.exports={root:"MdxSiblings_root__aMIoJ",link:"MdxSiblings_link__6MlX4",body:"MdxSiblings_body___XWhI",title:"MdxSiblings_title__NDsNH",description:"MdxSiblings_description__V17yY",icon:"MdxSiblings_icon__VO6TY"}},69684:function(e){e.exports={tabsWrapper:"MdxTabs_tabsWrapper__14Znv",tabsList:"MdxTabs_tabsList__eXI1E",tab:"MdxTabs_tab__f36t5",tabContent:"MdxTabs_tabContent__h_eEw",main:"MdxTabs_main__qjckv",tableOfContents:"MdxTabs_tableOfContents__2RDWh"}},21400:function(e){e.exports={content:"PageBase_content__8Q6WJ"}},91333:function(e){e.exports={searchIcon:"PropsTablesList_searchIcon__qxntu",title:"PropsTablesList_title__T7Tjv",section:"PropsTablesList_section__ttBgr",search:"PropsTablesList_search__xAeEM"}},1374:function(e){e.exports={groupsHeader:"StylesApiTable_groupsHeader__GCT_t",group:"StylesApiTable_group__B6MgG",title:"StylesApiTable_title__G0_6E",section:"StylesApiTable_section__nd2cu"}},97977:function(e){e.exports={code:"TableInlineCode_code__0ptOS"}},19787:function(e){e.exports={wrapper:"TableOfContents_wrapper__jE57j",inner:"TableOfContents_inner__nZ9Yg",link:"TableOfContents_link__kwW92",header:"TableOfContents_header__4cbrI",title:"TableOfContents_title__sn9Ej",items:"TableOfContents_items__1KFWu"}},92442:function(e,t,o){"use strict";o.d(t,{x:function(){return n}});let n={selectors:{root:"Root element",item:"`Accordion.Item` root element",control:"`Accordion.Control` root element",chevron:"`Accordion.Control` chevron container element",label:"`Accordion.Control` label",icon:"`Accordion.Control` icon",itemTitle:"`Accordion.Control` title (h2-h6) tag",panel:"`Accordion.Panel` root element",content:"Wrapper element of `Accordion.Panel` `children`"},vars:{root:{"--accordion-chevron-size":"Controls chevron container element `width` and `min-width`","--accordion-radius":"Controls `border-radius` in various elements, depending on variant","--accordion-transition-duration":"Controls all animations `transition-duration`"}},modifiers:[{modifier:"data-active",selector:["item","control"],condition:"Item is active (opened)"},{modifier:"data-chevron-position",selector:"control",value:"Value of `chevronPosition` prop on `Accordion`"}]}},30345:function(e,t,o){"use strict";o.d(t,{g:function(){return n}});let n={selectors:{root:"Root element",wrapper:"Wrapper around `body` and `icon`",body:"Body element, contains `title` and `message`",title:"Title element, contains `label` and `icon`",label:"Title label",message:"Alert message",icon:"Icon element",closeButton:"Close button"},vars:{root:{"--alert-bd":"Controls `border`","--alert-bg":"Controls `background`","--alert-color":"Controls `color`","--alert-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-with-close-button",selector:"title",condition:"`withCloseButton` prop is set"}]}},87961:function(e,t,o){"use strict";o.d(t,{I:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d},vars:{}}},68738:function(e,t,o){"use strict";o.d(t,{o:function(){return n}});let n={selectors:{root:"Root element",section:"Left and right sections",label:"Badge children"},vars:{root:{"--badge-bd":"Controls `border`","--badge-bg":"Controls `background`","--badge-color":"Controls text `color`","--badge-dot-color":'Controls dot `color`, only applicable when `variant="dot"`',"--badge-fz":"Controls `font-size`","--badge-height":"Controls `height`","--badge-padding-x":"Controls horizontal `padding`","--badge-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-block",selector:"root",condition:"`fullWidth` prop is set"},{modifier:"data-position",selector:"section",value:"Section position: left or right"}]}},86140:function(e,t,o){"use strict";o.d(t,{B:function(){return n},R:function(){return r}});let n={selectors:{root:"Root element",loader:"Loader component, displayed only when `loading` prop is set",inner:"Contains all other elements, child of the `root` element",section:"Left and right sections of the button",label:"Button children"},vars:{root:{"--button-bg":"Controls `background`","--button-bd":"Control `border`","--button-hover":"Controls `background` when hovered","--button-color":"Control text `color`","--button-hover-color":"Control text `color` when hovered","--button-radius":"Controls `border-radius`","--button-height":"Controls `height` of the button","--button-padding-x":"Controls horizontal `padding` of the button","--button-fz":"Controls `font-size` of the button","--button-justify":"Controls `justify-content` of `inner` element"}},modifiers:[{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"},{modifier:"data-loading",selector:["root","label"],condition:"`loading` prop is set"},{modifier:"data-block",selector:"root",condition:"`fullWidth` prop is set"},{modifier:"data-with-left-section",selector:"root",condition:"`leftSection` is set"},{modifier:"data-with-right-section",selector:"root",condition:"`rightSection` is set"},{modifier:"data-position",selector:"section",value:"Section position: left or right"}]},r={selectors:{group:"Root element"},vars:{group:{"--button-border-width":"`border-width` of child `Button` components"}},modifiers:[{modifier:"data-orientation",selector:"group",value:"Value of `orientation` prop"}]}},23570:function(e,t,o){"use strict";o.d(t,{J:function(){return n}});let n={selectors:{root:"Root element",slide:"`Carousel.Slide` root element",container:"Slides container",viewport:"Main element, contains slides container and all controls",controls:"Next/previous controls container",control:"Next/previous control",indicators:"Indicators container",indicator:"Indicator button"},vars:{root:{"--carousel-control-size":"Controls `width` and `height` of the next/previous buttons","--carousel-controls-offset":"Controls offsets of the next/previous buttons","--carousel-height":"Controls height of the carousel"}},modifiers:[{modifier:"data-orientation",selector:"root",value:"Value of `orientation` prop"},{modifier:"data-include-gap-in-size",selector:"root",condition:"`includeGapInSize` prop is set"},{modifier:"data-inactive",selector:"control",condition:"No previous/next slides are available"},{modifier:"data-active",selector:"indicator",condition:"Associated slide is active"}]}},86423:function(e,t,o){"use strict";o.d(t,{B:function(){return r},I:function(){return a}});var n=o(50352);let r={selectors:{root:"Root element",input:'Input element (`input[type="checkbox"]`)',icon:"Checkbox icon, used to display checkmark and indeterminate state icon",inner:"Wrapper for `icon` and `input`",body:"Input body, contains all other elements",labelWrapper:"Contains `label`, `description` and `error`",label:"Label element",description:"Description displayed below the label",error:"Error message displayed below the label"},vars:{root:{"--checkbox-color":"Controls checked checkbox `background-color`","--checkbox-radius":"Controls checkbox `border-radius`","--checkbox-size":"Controls checkbox `width` and `height`","--checkbox-icon-color":"Controls checkbox icon `color`"}},modifiers:[{modifier:"data-checked",selector:"root",condition:"`checked` prop is set"},{modifier:"data-error",selector:"input",condition:"`error` prop is set"},{modifier:"data-indeterminate",selector:"input",condition:"`indeterminate` prop is set"},{modifier:"data-label-position",selector:"inner",value:"Value of `labelPosition` prop"}]},a={selectors:{...n.X.selectors},vars:{}}},27882:function(e,t,o){"use strict";o.d(t,{B:function(){return a}});var n=o(64954),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.L.selectors,dropdown:"Popover dropdown",colorPreview:"Color swatch preview in input left section",eyeDropperButton:"Eye dropper button",eyeDropperIcon:"Default eye dropper icon"},vars:{colorPreview:{"--ci-preview-size":"Controls `width` and `height` of color preview"},eyeDropperIcon:{"--ci-eye-dropper-icon-size":"Controls width and height of the eye dropper icon"}}}},64954:function(e,t,o){"use strict";o.d(t,{L:function(){return n}});let n={selectors:{wrapper:"Root element",preview:"Color preview, displayed only when `format` supports alpha channel",body:"Contains alpha/hue sliders and color preview",slider:"Alpha and hue sliders root",sliderOverlay:"Element used to display various overlays over hue and alpha sliders",saturation:"Saturation picker",saturationOverlay:"Element used to display various overlays over saturation picker",sliders:"Contains alpha and hue sliders",thumb:"Thumb of all sliders",swatch:"Color swatch",swatches:"Color swatches list"},vars:{wrapper:{"--cp-body-spacing":"Controls spacing between sliders and saturation","--cp-preview-size":"Controls size of the preview swatch","--cp-width":"Controls `width` of the root element","--cp-swatch-size":"Controls swatch `width` and `height`","--cp-thumb-size":"Controls thumb `width` and `height` in all sliders and saturation picker","--cp-saturation-height":"Controls `height` of the saturation picker"}}}},92511:function(e,t,o){"use strict";o.d(t,{$:function(){return n},d:function(){return r}});let n={selectors:{options:"`Combobox.Options` component",dropdown:"`Combobox.Dropdown` component",option:"`Combobox.Option` component",search:"`Combobox.Search` input",empty:"`Combobox.Empty` component",header:"`Combobox.Header` component",footer:"`Combobox.Footer` component",group:"`Combobox.Group` component",groupLabel:"Label of `Combobox.Group` component"},vars:{dropdown:{"--combobox-option-fz":"Controls option `font-size`","--combobox-option-padding":"Controls option `padding`","--combobox-padding":"Controls dropdown `padding`"},options:{"--combobox-option-fz":"Controls option `font-size`","--combobox-option-padding":"Controls option `padding`"}},modifiers:[{modifier:"data-combobox-selected",selector:"option",condition:"Option is selected"},{modifier:"data-combobox-active",selector:"option",condition:"`active` prop is set"},{modifier:"data-combobox-disabled",selector:"option",condition:"`disabled` prop is set"},{modifier:"data-hidden",selector:"dropdown",condition:"`hidden` prop is set"}]},r={dropdown:"Dropdown root element",options:"Options wrapper",option:"Option",empty:"Nothing found message",group:"Options group wrapper",groupLabel:"Options group label"}},29237:function(e,t,o){"use strict";o.d(t,{T:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},50352:function(e,t,o){"use strict";o.d(t,{X:function(){return r},a:function(){return n}});let n={selectors:{wrapper:"Root element of the Input",input:"Input element",section:"Left and right sections"},vars:{wrapper:{"--input-fz":"`font-size` of the input element","--input-height":"`height` or `min-height` of the input element (depends on `multiline` prop)","--input-left-section-width":"`width` of the left section","--input-right-section-width":"`width` of the right section","--input-margin-bottom":"`margin-bottom` of the input element, usually controlled by `Input.Wrapper`","--input-margin-top":"`margin-top` of the input element, usually controlled by `Input.Wrapper`","--input-padding-y":"`padding-top` and `padding-bottom` of the input element","--input-radius":"`border-radius` of the input element","--input-left-section-pointer-events":"Controls `pointer-events` of the left section","--input-right-section-pointer-events":"Controls `pointer-events` of the right section"}},modifiers:[{modifier:"data-error",selector:["wrapper","input"],condition:"`error` prop is set"},{modifier:"data-disabled",selector:"input",condition:"`disabled` prop is set"},{modifier:"data-with-right-section",selector:"wrapper",condition:"`rightSection` prop is set"},{modifier:"data-with-left-section",selector:"wrapper",condition:"`leftSection` prop is set"},{modifier:"data-multiline",selector:"wrapper",condition:"`multiline` prop is set"},{modifier:"data-pointer",selector:"wrapper",condition:"`pointer` prop is set"},{modifier:"data-position",selector:"section",value:"Section position: left or right"}]},r={selectors:{root:"Root element",label:"Label element",required:"Required asterisk element, rendered inside label",description:"Description element",error:"Error element"},vars:{label:{"--input-label-size":"Controls label `font-size`","--input-asterisk-color":"Controls label asterisk text `color`"},error:{"--input-error-size":"Controls error `font-size`"},description:{"--input-description-size":"Controls description `font-size`"}}}},55838:function(e,t,o){"use strict";o.d(t,{P:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},91516:function(e,t,o){"use strict";o.d(t,{k:function(){return r}});var n=o(62623);let r={selectors:{...n.T.selectors,divider:"`Menu.Divider` root element",label:"`Menu.Label` root element",item:"`Menu.Item` root element",itemLabel:"Label of `Menu.Item`",itemSection:"Left and right sections of `Menu.Item`"},vars:{},modifiers:[{modifier:"data-disabled",selector:"item",condition:"`disabled` prop is set on `Menu.Item`"},{modifier:"data-hovered",selector:"item",condition:"`Menu.Item` is hovered or selected with keyboard"}]}},7634:function(e,t,o){"use strict";o.d(t,{L:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d,pill:"Value pill",inputField:"Input field",pillsList:"List of pills, also contains input field"},vars:{}}},59325:function(e,t,o){"use strict";o.d(t,{c:function(){return r}});var n=o(50352);let r={selectors:{...n.X.selectors,...n.a.selectors},vars:{}}},37951:function(e,t,o){"use strict";o.d(t,{$:function(){return n}});let n={selectors:{root:"Root element",loader:"Loader component, displayed only when `loading` prop is set",icon:"Icon component, displayed only when `icon` prop is set",body:"Notification body, contains all other elements",title:"Title element, displayed only when `title` prop is set",description:"Description displayed below the title",closeButton:"Close button element"},vars:{root:{"--notification-radius":"Controls `border-radius`","--notification-color":"Controls icon color or notification line color"}},modifiers:[{modifier:"data-with-icon",selector:"root",condition:"`icon` prop is set"},{modifier:"data-with-border",selector:"root",condition:"`withBorder` prop is set"},{modifier:"data-with-title",selector:"description",condition:"`title` prop is set"}]}},68170:function(e,t,o){"use strict";o.d(t,{L:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors,controls:"Increment and decrement buttons wrapper",control:"Increment and decrement buttons"},vars:{controls:{"--ni-chevron-size":"Controls `width` and `height` of the default chevron icon"}},modifiers:[{modifier:"data-direction",selector:"control",value:"`up` or `down` depending on the control"}]}},37731:function(e,t,o){"use strict";o.d(t,{E:function(){return n}});let n={selectors:{root:"Root element",control:"Control element: items, next/previous, first/last buttons",dots:"Dots icon wrapper"},vars:{root:{"--pagination-active-bg":"Active control `background-color`","--pagination-active-color":"Active control `color`","--pagination-control-fz":"Controls control `font-size`","--pagination-control-radius":"Controls control `border-radius`","--pagination-control-size":"Controls control `min-width` and `height`"}},modifiers:[{modifier:"data-active",selector:"control",condition:"Control is active"},{modifier:"data-disabled",selector:"control",condition:"Control is disabled"}]}},20827:function(e,t,o){"use strict";o.d(t,{m:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors,innerInput:"Actual input element",visibilityToggle:"Visibility toggle button"},vars:{root:{"--psi-button-size":"Controls visibility toggle button `width` and `height`","--psi-icon-size":"Controls visibility toggle icon `width` and `height`"}}}},81581:function(e,t,o){"use strict";o.d(t,{K:function(){return n},h:function(){return r}});let n={selectors:{root:"Root element",label:"Pill label (children)",remove:"Remove button"},vars:{root:{"--pill-height":"Controls `height` of the pill","--pill-fz":"Controls `font-size`","--pill-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-with-remove",selector:"root",condition:"`withRemoveButton` prop is set"},{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"}]},r={selectors:{group:"Root element"},vars:{group:{"--pg-gap":"Controls `gap` between pills"}}}},34722:function(e,t,o){"use strict";o.d(t,{l:function(){return n}});let n={selectors:{root:"Root element",pinInput:"Input item wrapper",input:"Input element"},vars:{root:{"--pin-input-size":"Controls input `width` and `height`"}},modifiers:[]}},62623:function(e,t,o){"use strict";o.d(t,{T:function(){return n}});let n={selectors:{dropdown:"Dropdown element",arrow:"Dropdown arrow"},vars:{dropdown:{"--popover-radius":"Controls dropdown border-radius","--popover-shadow":"Controls dropdown box-shadow"}},modifiers:[{modifier:"data-position",selector:"dropdown",value:"Value of floating ui dropdown position"}]}},35150:function(e,t,o){"use strict";o.d(t,{S:function(){return n}});let n={selectors:{root:"Root element",section:"`Progress.Section` root element",label:"`Progress.Label` root element"},vars:{root:{"--progress-radius":"Controls `border-radius` of track and sections","--progress-size":"Controls height of progress bar","--progress-transition-duration":"Controls width `transition-duration` of progress bar"}},modifiers:[{modifier:"data-striped",selector:"section",condition:"`striped` or `animated` props are set"},{modifier:"data-animated",selector:"section",condition:"`animated` prop is set"}]}},97811:function(e,t,o){"use strict";o.d(t,{P:function(){return r},T:function(){return a}});var n=o(50352);let r={selectors:{root:"Root element",radio:'Input element (`input[type="radio"]`)',icon:"Radio icon, used to display checked icon",inner:"Wrapper for `icon` and `input`",body:"Input body, contains all other elements",labelWrapper:"Contains `label`, `description` and `error`",label:"Label element",description:"Description displayed below the label",error:"Error message displayed below the label"},vars:{root:{"--radio-color":"Controls checked radio `background-color`","--radio-radius":"Controls radio `border-radius`","--radio-size":"Controls radio `width` and `height`","--radio-icon-color":"Controls radio icon `color`","--radio-icon-size":"Controls radio icon `width` and `height`"}},modifiers:[{modifier:"data-error",selector:"radio",condition:"`error` prop is set"},{modifier:"data-label-position",selector:"inner",value:"Value of `labelPosition` prop"}]},a={selectors:{...n.X.selectors},vars:{}}},67355:function(e,t,o){"use strict";o.d(t,{o:function(){return n}});let n={selectors:{root:"Root element",control:"Wrapper element for input and label",input:'Input element (`input[type="radio"]`), hidden by default',label:"Label element associated with input",indicator:"Floating indicator that moves between items"},vars:{root:{"--sc-color":"Control `background-color` of `indicator`","--sc-font-size":"Controls `font-size` of labels","--sc-padding":"Controls `padding` of control","--sc-radius":"Controls `border-radius` of `indicator` and `root` elements","--sc-shadow":"Controls `box-shadow` of indicator","--sc-transition-duration":"Controls `transition-duration` of various elements that have animations","--sc-transition-timing-function":"Controls `transition-timing-function` of various elements that have animations"}},modifiers:[{modifier:"data-full-width",selector:"root",condition:"`fullWidth` prop is set"},{modifier:"data-with-items-border",selector:"root",condition:"`withItemsBorder` prop is not `false`"},{modifier:"data-orientation",selector:"control",value:"Value of `orientation` prop"},{modifier:"data-active",selector:["label","control"],condition:"Associated input is checked"},{modifier:"data-disabled",selector:"label",condition:"Associated input is disabled"},{modifier:"data-read-only",selector:"label",condition:"`readOnly` prop is set"}]}},61309:function(e,t,o){"use strict";o.d(t,{i:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d},vars:{}}},49717:function(e,t,o){"use strict";o.d(t,{U:function(){return n}});let n={selectors:{root:"Root element",steps:"Steps controls wrapper",separator:"Separator line between step controls",verticalSeparator:"Vertical separator line between step controls",content:"Current step content wrapper",stepWrapper:"Wrapper for the step icon and separator",step:"Step control button",stepIcon:"Step icon wrapper",stepCompletedIcon:"Completed step icon, rendered within stepIcon",stepBody:"Contains stepLabel and stepDescription",stepLabel:"Step label",stepDescription:"Step description",stepLoader:"Step loader"},vars:{root:{"--stepper-color":"Controls color of the active step and separator","--stepper-icon-color":"Controls `color` of the step icon","--stepper-icon-size":"Controls `width` and `height` of the icons","--stepper-content-padding":"Controls `padding-top` of the content","--stepper-radius":"Controls `border-radius` of the step icon","--stepper-fz":"Controls `font-size` of various elements","--stepper-spacing":"Controls various spacings"}},modifiers:[{modifier:"data-progress",selector:"stepIcon",condition:"Step is current"},{modifier:"data-completed",selector:"stepIcon",condition:"Step is completed"}]}},12379:function(e,t,o){"use strict";o.d(t,{T:function(){return r},_:function(){return a}});var n=o(50352);let r={selectors:{root:"Root element",track:"Switch track, contains `thumb` and `trackLabel`",trackLabel:"Label displayed inside `track`",thumb:"Thumb displayed inside `track`",input:'Input element (`input[type="checkbox"]`), hidden by default',body:"Input body, contains all other elements",labelWrapper:"Contains `label`, `description` and `error`",label:"Label element",description:"Description displayed below the label",error:"Error message displayed below the label"},vars:{root:{"--switch-radius":"Controls `border-radius` of `track` and `thumb`","--switch-height":"Controls height of `track`","--switch-width":"Controls min-width of `track`","--switch-thumb-size":"Controls width and height of `thumb`","--switch-label-font-size":"Controls `font-size` of `trackLabel`","--switch-track-label-padding":"Controls `trackLabel` offset","--switch-color":"Controls track `background-color` when input is checked"}},modifiers:[{modifier:"data-error",selector:"track",condition:"`error` prop is set"},{modifier:"data-label-position",selector:["track","root"],value:"value of `labelPosition` prop"},{modifier:"data-disabled",selector:"label",condition:"`disabled` prop is set"}]},a={selectors:{...n.X.selectors},vars:{}}},49235:function(e,t,o){"use strict";o.d(t,{Y:function(){return n}});let n={selectors:{root:"Root element (`Tabs` component)",list:"List of tabs (`Tabs.List` component)",panel:"Panel with tab content (`Tabs.Panel` component)",tab:"Tab button (`Tabs.Tab` component)",tabLabel:"Label of `Tabs.Tab`",tabSection:"Left and right sections of `Tabs.Tab`"},vars:{root:{"--tabs-color":"Controls colors of `Tabs.Tab`, only applicable when variant is `pills` or `default`","--tabs-radius":"Controls `Tabs.Tab` `border-radius`"}},modifiers:[{modifier:"data-orientation",selector:["root","tab","list","panel"],value:"Value of `orientation` prop"},{modifier:"data-placement",selector:["root","tab","list"],value:"Value of placement prop",condition:'Value of `orientation` prop is "vertical" on `Tabs` component'},{modifier:"data-inverted",selector:["tab","list"],condition:"`inverted` prop is set on `Tabs` component"},{modifier:"data-grow",selector:["list"],condition:"`grow` prop is set on `Tabs.List` component"},{modifier:"data-position",selector:["tabSection"],value:"Position of the section, left or right"}]}},73811:function(e,t,o){"use strict";o.d(t,{h:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d,pill:"Value pill",inputField:"Input field",pillsList:"List of pills, also contains input field"},vars:{}}},52176:function(e,t,o){"use strict";o.d(t,{G:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},76475:function(e,t,o){"use strict";o.d(t,{g:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},42595:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});var n={code:"m-5caae6d3",pre:"m-2c47c4fd",header:"m-e58679f3",controls:"m-be7e9c9c",copy:"m-5caae85b",control:"m-d498bab7",file:"m-5cac2e62",files:"m-38d99e51",codeWrapper:"m-9f507240",showCodeButton:"m-c9378bc2",root:"m-5cb1b9c8",fileIcon:"m-b46cddfb"}},17441:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});var n={theme:"m-1f5e827e"}},37127:function(e,t,o){"use strict";o.d(t,{_:function(){return f}});var n=o(27378),r=o(40624),a=o(2688),i=o(20410),d=o(96739),s=o(6231),l=o(56589),c=o(42595),p=o(17441);let u={...c.Z,code:(0,r.Z)(c.Z.code,p.Z.theme)},m={language:"tsx"},f=(0,i.d)((e,t)=>{let o=(0,d.w)("InlineCodeHighlight",m,e),{classNames:r,className:i,style:c,styles:p,unstyled:f,vars:h,code:y,language:b,...v}=o,g=(0,s.y)({name:"InlineCodeHighlight",props:o,classes:u,className:i,style:c,classNames:r,styles:p,unstyled:f,rootSelector:"code"}),w=a.Z.highlight(y.trim(),{language:b}).value;return n.createElement(l.x,{...g("code"),component:"code",ref:t,...v,dangerouslySetInnerHTML:{__html:w}})});f.displayName="@mantine/core/InlineCodeHighlight"}}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2775],{89114:function(e,t,o){"use strict";o.d(t,{O:function(){return r}});var n=o(24246);o(27378);var Text=o(26569);function r(e){let{children:t,...o}=e;return(0,n.jsx)(Text.x,{component:"span","data-docs-inline-code":!0,dangerouslySetInnerHTML:{__html:t.replace(/`([^`]+)`/g,"$1").replace(/!important!/g,"Important")},fz:"sm",...o})}},3916:function(e,t,o){"use strict";o.d(t,{A:function(){return ep}});var n=o(24246),r=o(27378),a=o(91699),i=o(942),d=o(90878),s=o(49258),l=o(56589),c=o(57847),Text=o(26569),p=o(71078),u=o(56695),m=o(53781),f=o(37127),h=o(99684),y=o(19397),b=o(1674),v=o(73133),g=o(40624),w=o(1535),q=o.n(w);function C(e){let{label:t,children:o,className:r}=e;return(0,n.jsxs)("div",{className:(0,g.Z)(q().item,r),children:[(0,n.jsx)(Text.x,{className:q().label,fz:"sm",children:t}),o]})}var S=o(90576),P=o.n(S);function D(e){let{code:t}=e,o=(0,b.V)(),r=(0,v.a)("(max-width: ".concat((0,p.em)(500),")"));return(0,n.jsx)(C,{label:"Import",className:P().wrapper,children:(0,n.jsx)(h.u,{label:o.copied?"Copied":"Copy code",position:"right",offset:10,disabled:r,children:(0,n.jsx)(y.k,{className:P().copy,type:"button",onClick:()=>o.copy(t),children:(0,n.jsx)(f._,{className:P().code,language:"tsx",styles:{code:{padding:0,margin:0}},code:t})})})})}var R=o(79894),x=o.n(R),k=o(9136),I=o(85008),z=o.n(I);function M(e){let{label:t,icon:o,children:r,link:a}=e;return(0,n.jsx)(C,{label:t,children:(0,n.jsx)("div",{className:z().wrapper,children:(0,n.jsxs)(k.e,{component:a.startsWith("/")?x():"a",className:z().link,href:a,fz:"sm",children:[(0,n.jsx)("div",{className:z().icon,children:o}),r]})})})}var L=o(11258),A=o.n(L);let N="https://github.com/mantinedev/mantine/blob/master",O="".concat(N,"/docs/src/pages"),T="".concat(N,"/packages");function E(e){let{meta:t}=e,o=Array.isArray(t.props),r=!!(t.import||t.source),f=!!t.title;return!t.hideHeader&&(r||o||t.release||f)?(0,n.jsx)("div",{className:A().wrapper,children:(0,n.jsxs)(l.x,{className:A().header,mod:{"with-tabs":o},children:[(0,n.jsx)(c.D,{className:A().title,children:t.title}),(0,n.jsx)(Text.x,{className:A().description,children:t.description}),t.import&&(0,n.jsx)(D,{code:t.import}),t.polymorphic&&(0,n.jsx)(M,{label:"Polymorphic",icon:(0,n.jsx)(a.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:"/guides/polymorphic",children:"Polymorphic component"}),t.source&&(0,n.jsx)(M,{label:"Source",icon:(0,n.jsx)(u.E,{size:14}),link:"".concat(T,"/").concat(t.source),children:"View source code"}),t.date&&t.release&&(0,n.jsx)(M,{label:"Release date",icon:(0,n.jsx)(i.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:t.release,children:t.date}),t.release&&(0,n.jsx)(M,{label:"Source code",icon:(0,n.jsx)(u.E,{size:14}),link:t.release,children:"Release on GitHub"}),t.docs&&(0,n.jsx)(M,{label:"Docs",icon:(0,n.jsx)(d.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:"".concat(O,"/").concat(t.docs),children:"Edit this page"}),t.package&&(0,n.jsx)(M,{label:"Package",icon:(0,n.jsx)(m._,{size:14}),link:"https://www.npmjs.com/package/".concat(t.package),children:t.package}),t.license&&(0,n.jsx)(M,{label:"License",icon:(0,n.jsx)(s.Z,{style:{width:(0,p.h)(14),height:(0,p.h)(14)},stroke:1.5}),link:"https://github.com/mantinedev/mantine/blob/master/LICENSE",children:"MIT"})]})}):null}var F=o(87393),W=o(4687),j=o(29995),Y=o(54568),B=o(73279),K=o.n(B);function V(e){let{meta:t}=e,{next:o,prev:r}=function(e){let t=Y.YU.findIndex(t=>t.slug===e),o=Y.YU[t-1],n=Y.YU[t+1];return{prev:o,next:n}}(t.slug);return t.hideSiblings?null:(0,n.jsxs)("div",{className:K().root,children:[r&&(0,n.jsxs)(x(),{href:r.slug,className:(0,g.Z)(K().link,j.C.auto),children:[(0,n.jsx)(F.Z,{stroke:1.5,className:K().icon}),(0,n.jsxs)(l.x,{mod:"prev",className:K().body,children:[(0,n.jsx)(Text.x,{className:K().title,children:"Previous"}),(0,n.jsx)(Text.x,{c:"dimmed",className:K().description,children:r.title})]})]}),o&&(0,n.jsxs)(x(),{href:o.slug,className:(0,g.Z)(K().link,j.C.auto),children:[(0,n.jsxs)(l.x,{mod:"next",className:K().body,children:[(0,n.jsx)(Text.x,{className:K().title,children:"Next"}),(0,n.jsx)(Text.x,{c:"dimmed",className:K().description,children:o.title})]}),(0,n.jsx)(W.Z,{stroke:1.5,className:K().icon})]})]})}var _=o(25179),H=o(86677),G=o(47261),U=o(49849),X=o(19787),Z=o.n(X);function J(e){if(0===e.length)return -1;let t=e.reduce((e,t,o)=>Math.abs(e.position)e.depth>1),m=()=>{a(J(s.current.map(e=>e.getNode().getBoundingClientRect())))};if((0,r.useEffect)(()=>{let e=function(){let e=document.getElementById("mdx");return e?function(e){let t=[];for(let o=0;odocument.getElementById(n.id)})}return t}(Array.from(e.querySelectorAll("[data-heading]"))):[]}();return s.current=e,d(e),a(J(e.map(e=>e.getNode().getBoundingClientRect()))),window.addEventListener("scroll",m),()=>window.removeEventListener("scroll",m)},[]),0===u.length)return null;let f=u.map((e,t)=>(0,n.jsx)(Text.x,{component:"a",fz:"sm",className:Z().link,mod:{active:o===t},href:"#".concat(e.id),__vars:{"--toc-link-offset":"".concat(e.depth-1)},onClick:t=>{t.preventDefault(),c.replace("".concat(c.pathname,"#").concat(e.id))},children:e.content},e.id));return(0,n.jsx)(l.x,{component:"nav",mod:{"with-tabs":t},className:Z().wrapper,children:(0,n.jsx)("div",{className:Z().inner,children:(0,n.jsxs)("div",{children:[(0,n.jsxs)("div",{className:Z().header,children:[(0,n.jsx)(G.Z,{style:{width:(0,p.h)(20),height:(0,p.h)(20)},stroke:1.5}),(0,n.jsx)(Text.x,{className:Z().title,children:"Table of contents"})]}),(0,n.jsx)(U.x.Autosize,{mah:"calc(100vh - ".concat((0,p.h)(140),")"),type:"never",offsetScrollbars:!0,children:(0,n.jsx)("div",{className:Z().items,children:f})})]})})})}var $=o(81026),ee=o.n($);function et(e){let{children:t,meta:o}=e;return(0,n.jsx)(_._,{children:(0,n.jsxs)("div",{className:ee().wrapper,children:[(0,n.jsxs)("div",{className:ee().container,children:[t,(0,n.jsx)(V,{meta:o})]}),(0,n.jsx)("div",{className:ee().tableOfContents,children:(0,n.jsx)(Q,{withTabs:!1})})]})})}var eo=o(83601),en=o(40184),er=o(1103),ea=o(69684),ei=o.n(ea);function ed(e){let{children:t,meta:o}=e,a=(0,H.useRouter)(),[i,d]=(0,r.useState)("docs"),s=Array.isArray(o.props),l=Array.isArray(o.styles);return((0,r.useEffect)(()=>{d(window.location.search.replace("?t=","")||"docs")},[]),s||l)?(0,n.jsx)(_._,{children:(0,n.jsxs)(eo.m,{variant:"outline",value:i,classNames:{list:ei().tabsList,tab:ei().tab},keepMounted:!1,radius:"md",onChange:e=>{a.replace("docs"===e?a.pathname:"".concat(a.pathname,"?t=").concat(e)),d(e)},children:[(0,n.jsx)("div",{className:ei().tabsWrapper,children:(0,n.jsxs)(eo.m.List,{children:[(0,n.jsx)(eo.m.Tab,{value:"docs",children:"Documentation"}),s&&(0,n.jsx)(eo.m.Tab,{value:"props",children:"Props"}),l&&(0,n.jsx)(eo.m.Tab,{value:"styles-api",children:"Styles API"})]})}),(0,n.jsx)(eo.m.Panel,{value:"docs",children:(0,n.jsxs)("div",{className:ei().tabContent,style:{display:"flex",position:"relative",justifyContent:"space-between"},children:[(0,n.jsxs)("div",{className:ei().main,children:[t,(0,n.jsx)(V,{meta:o})]}),(0,n.jsx)("div",{className:ei().tableOfContents,children:(0,n.jsx)(Q,{withTabs:!0})})]})}),(0,n.jsx)(eo.m.Panel,{value:"props",children:(0,n.jsx)("div",{style:{maxWidth:(0,p.h)(1178),marginLeft:"auto",marginRight:"auto",marginTop:(0,p.h)(24)},className:ei().tabContent,children:(0,n.jsx)(en.ek,{components:o.props,componentPrefix:o.componentPrefix})})}),(0,n.jsx)(eo.m.Panel,{value:"styles-api",children:(0,n.jsx)("div",{style:{maxWidth:(0,p.h)(1178),marginLeft:"auto",marginRight:"auto",marginTop:(0,p.h)(24)},className:ei().tabContent,children:(0,n.jsx)(er.D5,{components:o.styles,componentPrefix:o.componentPrefix})})})]})}):null}function es(e){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(E,{...e}),Array.isArray(e.meta.props)?(0,n.jsx)(ed,{...e}):(0,n.jsx)(et,{...e})]})}var el=o(93046);function ec(e){let{meta:t,children:o}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(el.y,{title:t.title,description:t.description}),(0,n.jsx)(es,{meta:t,children:o})]})}function ep(e){return t=>{let{children:o}=t;return(0,n.jsx)(ec,{meta:e,children:o})}}},25179:function(e,t,o){"use strict";o.d(t,{_:function(){return d}});var n=o(24246);o(27378);var r=o(71611),a=o(21400),i=o.n(a);function d(e){let{children:t}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("div",{className:i().content,children:t}),(0,n.jsx)(r.$,{withNavbar:!0})]})}},93046:function(e,t,o){"use strict";o.d(t,{y:function(){return i}});var n=o(24246);o(27378);var r=o(88038),a=o.n(r);function i(e){let{title:t,description:o}=e,r=t?"".concat(t," | Mantine"):"Mantine",i=o||"React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience";return(0,n.jsxs)(a(),{children:[(0,n.jsx)("title",{children:r}),(0,n.jsx)("meta",{name:"description",content:i}),(0,n.jsx)("meta",{name:"og:title",content:r}),(0,n.jsx)("meta",{name:"og:description",content:i}),(0,n.jsx)("meta",{name:"twitter:title",content:r}),(0,n.jsx)("meta",{name:"twitter:description",content:i})]})}},40184:function(e,t,o){"use strict";o.d(t,{ek:function(){return w},iY:function(){return b}});var n=o(24246),r=o(27378),a=o(28862),i=o(26853),Text=o(26569),d=JSON.parse('{"Accordion":{"props":{"chevron":{"description":"Custom chevron icon that will be used in all items","name":"chevron","required":false,"type":{"name":"React.ReactNode"}},"chevronPosition":{"description":"Position of the chevron relative to the item label, right by default","name":"chevronPosition","required":false,"type":{"name":"AccordionChevronPosition","raw":"AccordionChevronPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"chevronSize":{"description":"Size of the chevron icon container, 24 by default","name":"chevronSize","required":false,"type":{"name":"string | number"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string | string[] | null"}},"disableChevronRotation":{"description":"Determines whether chevron rotation should be disabled, false by default","name":"disableChevronRotation","required":false,"type":{"name":"boolean"}},"loop":{"description":"Determines whether arrow key presses should loop though items (first to last and last to first), true by default","name":"loop","required":false,"type":{"name":"boolean"}},"multiple":{"description":"Determines whether multiple items can be opened at a time, false by default","name":"multiple","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: AccordionValue) => void)"}},"order":{"description":"Heading order, has no effect on visuals","name":"order","required":false,"type":{"name":"AccordionHeadingOrder","raw":"AccordionHeadingOrder | undefined","value":[{"value":"undefined"},{"value":"2"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"transitionDuration":{"description":"Transition duration in ms, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"string | string[] | null"}}}},"Accordion.Item":{"props":{"value":{"description":"Value that is used to manage accordion state","name":"value","required":true,"type":{"name":"string"}}}},"Accordion.Panel":{"description":"","props":{}},"Accordion.Control":{"props":{"chevron":{"description":"Custom chevron icon","name":"chevron","required":false,"type":{"name":"React.ReactNode"}},"children":{"description":"Control label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Disables control button","name":"disabled","required":false,"type":{"name":"boolean"}},"icon":{"description":"Icon displayed next to the label","name":"icon","required":false,"type":{"name":"React.ReactNode"}}}},"Accordion.Chevron":{"props":{"size":{"description":"Controls width and height of the icon, 16 by default","name":"size","required":false,"type":{"name":"string | number"}}}},"ActionIcon":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Icon displayed inside the button","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color. Default value is theme.primaryColor.","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Sets disabled and data-disabled attributes on the button element","name":"disabled","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Gradient data used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"loaderProps":{"description":"Props added to the Loader component (only visible when loading prop is set)","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether Loader component should be displayed instead of the children, false by default","name":"loading","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the button. Numbers are converted to rem. \'md\' by default.","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Affix":{"props":{"portalProps":{"description":"Props to pass down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Affix position on screen, defaults value is { bottom: 0, right: 0 }","name":"position","required":false,"type":{"name":"{ top?: string | number; left?: string | number | undefined; bottom?: string | number | undefined; right?: string | number | undefined; } | undefined"}},"withinPortal":{"description":"Determines whether component should be rendered within portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Root element z-index property, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Alert":{"props":{"autoContrast":{"description":"Determines whether text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"closeButtonLabel":{"description":"Close button aria-label","name":"closeButtonLabel","required":false,"type":{"name":"string"}},"color":{"description":"Key of theme.colors or any valid CSS color, default value is theme.primaryColor","name":"color","required":false,"type":{"name":"MantineColor"}},"icon":{"description":"Icon displayed next to the title","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"onClose":{"description":"Called when the close button is clicked","name":"onClose","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"title":{"description":"Alert title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"withCloseButton":{"description":"Determines whether close button should be displayed, false by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}}}},"Anchor":{"props":{"color":{"description":"@deprecated Use c prop instead","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient configuration, ignored when variant is not gradient, theme.defaultGradient by default","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"inherit":{"description":"Determines whether font properties should be inherited from the parent, false by default","name":"inherit","required":false,"type":{"name":"boolean"}},"inline":{"description":"Sets line-height to 1 for centering, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"truncate":{"description":"Side on which Text must be truncated, if true, text is truncated from the start","name":"truncate","required":false,"type":{"name":"TextTruncate"}},"underline":{"description":"Determines in which cases link should have text-decoration: underline styles, hover by default","name":"underline","required":false,"type":{"name":"\\"always\\" | \\"hover\\" | \\"never\\"","raw":"\\"always\\" | \\"hover\\" | \\"never\\" | undefined","value":[{"value":"undefined"},{"value":"\\"always\\""},{"value":"\\"hover\\""},{"value":"\\"never\\""}]}}}},"AppShell":{"props":{"aside":{"description":"AppShell.Aside configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Aside component.","name":"aside","required":false,"type":{"name":"AppShellAsideConfiguration"}},"disabled":{"description":"If set, Navbar, Aside, Header and Footer components be hidden","name":"disabled","required":false,"type":{"name":"boolean"}},"footer":{"description":"AppShell.Footer configuration, controls height, offset and collapsed state. Required if you use AppShell.Footer component.","name":"footer","required":false,"type":{"name":"AppShellFooterConfiguration"}},"header":{"description":"AppShell.Header configuration, controls height, offset and collapsed state. Required if you use AppShell.Header component.","name":"header","required":false,"type":{"name":"AppShellHeaderConfiguration"}},"layout":{"description":"Determines how Navbar/Aside are arranged relative to Header/Footer, default by default","name":"layout","required":false,"type":{"name":"\\"default\\" | \\"alt\\"","raw":"\\"default\\" | \\"alt\\" | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"alt\\""}]}},"navbar":{"description":"AppShell.Navbar configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Navbar component.","name":"navbar","required":false,"type":{"name":"AppShellNavbarConfiguration"}},"offsetScrollbars":{"description":"Determines whether Header and Footer components should include styles to offset scrollbars. Based on react-remove-scroll. true by default","name":"offsetScrollbars","required":false,"type":{"name":"boolean"}},"padding":{"description":"Controls padding of the main section, 0 by default. !important!: use padding prop instead of p.","name":"padding","required":false,"type":{"name":"MantineSpacing | AppShellResponsiveSize"}},"transitionDuration":{"description":"Duration of all transitions in ms, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"Timing function of all transitions, ease by default","name":"transitionTimingFunction","required":false,"type":{"name":"TransitionTimingFunction"}},"withBorder":{"description":"Determines whether associated components should have a border, true by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index of all associated elements, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AspectRatio":{"props":{"ratio":{"description":"Aspect ratio, e.g. 16 / 9, 4 / 3, 1920 / 1080, 1 by default","name":"ratio","required":false,"type":{"name":"number"}}}},"Autocomplete":{"props":{"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data displayed in the dropdown","name":"data","required":false,"type":{"name":"ComboboxStringData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Avatar":{"props":{"alt":{"description":"Image alt attribute, also used as title attribute for placeholder","name":"alt","required":false,"type":{"name":"string"}},"autoContrast":{"description":"Determines whether text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Avatar placeholder, displayed when src={null} or when the image cannot be loaded","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, default value is theme.primaryColor","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient configuration used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"imageProps":{"description":"img tag attributes","name":"imageProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"img\\">"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \'100%\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Width and height of the avatar, numbers are converted to rem, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"src":{"description":"Image url, if the image cannot be loaded or src={null}, then placeholder is displayed instead","name":"src","required":false,"type":{"name":"string | null"}}}},"BackgroundImage":{"props":{"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"src":{"description":"Image url","name":"src","required":true,"type":{"name":"string"}}}},"Badge":{"props":{"autoContrast":{"description":"Determines whether text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Main badge content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"circle":{"description":"If set, badge min-width becomes equal to its height and horizontal padding is removed","name":"circle","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"fullWidth":{"description":"Determines whether Badge should take 100% of its parent width, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Gradient configuration used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"leftSection":{"description":"Content displayed on the left side of the badge label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rightSection":{"description":"Content displayed on the right side of the badge label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"Controls font-size, height and horizontal padding, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"Blockquote":{"props":{"cite":{"description":"Reference to a cited quote","name":"cite","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"icon":{"description":"Blockquote icon, displayed on the top left","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"iconSize":{"description":"Controls icon width and height, numbers are converted to rem, 40 by default","name":"iconSize","required":false,"type":{"name":"string | number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}}}},"Breadcrumbs":{"props":{"children":{"description":"React nodes that should be separated with separator","name":"children","required":true,"type":{"name":"React.ReactNode"}},"separator":{"description":"Separator between children, \'/\' by default","name":"separator","required":false,"type":{"name":"React.ReactNode"}},"separatorMargin":{"description":"Controls spacing between separator and breadcrumb, \'xs\' by default","name":"separatorMargin","required":false,"type":{"name":"MantineSpacing"}}}},"Burger":{"props":{"color":{"description":"Key of theme.colors of any valid CSS value, by default theme.white in dark color scheme and theme.black in light","name":"color","required":false,"type":{"name":"MantineColor"}},"opened":{"description":"State of the burger, when true burger is transformed into X, false by default","name":"opened","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls burger width and height, numbers are converted to rem, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionDuration":{"description":"transition-duration property value in ms, 300 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"transition-timing-function property value, \'ease\' by default","name":"transitionTimingFunction","required":false,"type":{"name":"string"}}}},"Button":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Button content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Indicates disabled state","name":"disabled","required":false,"type":{"name":"boolean"}},"fullWidth":{"description":"Determines whether button should take 100% width of its parent container, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Gradient configuration used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"justify":{"description":"Sets justify-content of inner element, can be used to change distribution of sections and label, \'center\' by default","name":"justify","required":false,"type":{"name":"JustifyContent"}},"leftSection":{"description":"Content displayed on the left side of the button label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"loaderProps":{"description":"Props added to the Loader component (only visible when loading prop is set)","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether the Loader component should be displayed over the button","name":"loading","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rightSection":{"description":"Content displayed on the right side of the button label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"Controls button height, font-size and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {}) | \\"compact-xs\\" | \\"compact-sm\\" | \\"compact-md\\" | \\"compact-lg\\" | \\"compact-xl\\""}}}},"Card":{"props":{"children":{"description":"Card content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"padding":{"description":"Controls padding, key of theme.spacing or any valid CSS value, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"shadow":{"description":"Key of theme.shadows or any valid CSS value to set box-shadow, none by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"withBorder":{"description":"Determines whether the card should have border, border color depends on color scheme, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}}}},"Center":{"props":{"children":{"description":"Content that should be centered vertically and horizontally","name":"children","required":false,"type":{"name":"React.ReactNode"}},"inline":{"description":"Determines whether inline-flex should be used instead of flex, false by default","name":"inline","required":false,"type":{"name":"boolean"}}}},"Checkbox":{"props":{"autoContrast":{"description":"Determines whether icon color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color to set input background color in checked state, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"description":{"description":"Description displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"error":{"description":"Error message displayed below the label","name":"error","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"Icon displayed when checkbox is in checked or indeterminate state","name":"icon","required":false,"type":{"name":"FC<{ indeterminate: boolean; className: string; }> | undefined"}},"iconColor":{"description":"Key of theme.colors or any valid CSS color to set icon color, by default value depends on theme.autoContrast","name":"iconColor","required":false,"type":{"name":"MantineColor"}},"id":{"description":"Id used to connect input with the label. If not set, unique id is generated instead.","name":"id","required":false,"type":{"name":"string"}},"indeterminate":{"description":"Indeterminate state of the checkbox. If set, checked prop is ignored.","name":"indeterminate","required":false,"type":{"name":"boolean"}},"label":{"description":"Content of the label associated with the checkbox","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Position of the label relative to the input, \'right\' by default","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls size of the component, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Chip":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"checked":{"description":"Checked state for controlled component","name":"checked","required":false,"type":{"name":"boolean"}},"children":{"description":"label element associated with the input","name":"children","required":true,"type":{"name":"React.ReactNode"}},"color":{"description":"Controls components colors based on variant prop. Key of theme.colors or any valid CSS color. theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultChecked":{"description":"Default checked state for uncontrolled component","name":"defaultChecked","required":false,"type":{"name":"boolean"}},"icon":{"description":"Any element or component to replace default icon","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Static id to connect input with the label, by default id is randomly generated","name":"id","required":false,"type":{"name":"string"}},"onChange":{"description":"Calls when checked state changes","name":"onChange","required":false,"type":{"name":"((checked: boolean) => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls various properties related to component size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Chip input type, \'checkbox\' by default","name":"type","required":false,"type":{"name":"\\"checkbox\\" | \\"radio\\"","raw":"\\"checkbox\\" | \\"radio\\" | undefined","value":[{"value":"undefined"},{"value":"\\"checkbox\\""},{"value":"\\"radio\\""}]}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"CloseButton":{"props":{"children":{"description":"Content rendered inside the button, for example VisuallyHidden with label for screen readers","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Sets disabled and data-disabled attributes on the button element","name":"disabled","required":false,"type":{"name":"boolean"}},"icon":{"description":"Replaces default close icon. If set, iconSize prop is ignored.","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"iconSize":{"description":"X icon width and height, 80% by default","name":"iconSize","required":false,"type":{"name":"string | number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the button. Numbers are converted to rem. \'md\' by default.","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Code":{"props":{"block":{"description":"If set code will be rendered inside pre, false by default","name":"block","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls background-color of the code, by default value is calculated based on color scheme","name":"color","required":false,"type":{"name":"MantineColor"}}}},"Collapse":{"props":{"animateOpacity":{"description":"Determines whether opacity should be animated, true by default","name":"animateOpacity","required":false,"type":{"name":"boolean"}},"in":{"description":"Opened state","name":"in","required":true,"type":{"name":"boolean"}},"onTransitionEnd":{"description":"Called each time transition ends","name":"onTransitionEnd","required":false,"type":{"name":"(() => void)"}},"transitionDuration":{"description":"Transition duration in ms, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"Transition timing function, default value is ease","name":"transitionTimingFunction","required":false,"type":{"name":"string"}}}},"ColorInput":{"props":{"closeOnColorSwatchClick":{"description":"Determines whether the dropdown should be closed when one of the color swatches is clicked, false by default","name":"closeOnColorSwatchClick","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"disallowInput":{"description":"If input is not allowed, the user can only pick value with color picker and swatches, false by default","name":"disallowInput","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"eyeDropperButtonProps":{"description":"Props passed down to the eye dropper button","name":"eyeDropperButtonProps","required":false,"type":{"name":"Record"}},"eyeDropperIcon":{"description":"An icon to replace the default eye dropper icon","name":"eyeDropperIcon","required":false,"type":{"name":"React.ReactNode"}},"fixOnBlur":{"description":"Determines whether the input value should be reset to the last known valid value when the input loses focus, true by default","name":"fixOnBlur","required":false,"type":{"name":"boolean"}},"format":{"description":"Color format, \'hex\' by default","name":"format","required":false,"type":{"name":"ColorFormat","raw":"ColorFormat | undefined","value":[{"value":"undefined"},{"value":"\\"hex\\""},{"value":"\\"hexa\\""},{"value":"\\"rgba\\""},{"value":"\\"rgb\\""},{"value":"\\"hsl\\""},{"value":"\\"hsla\\""}]}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onChangeEnd":{"description":"Called when the user stops dragging one of the sliders or changes the value with arrow keys","name":"onChangeEnd","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to the Popover component","name":"popoverProps","required":false,"type":{"name":"PopoverProps"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"swatches":{"description":"An array of colors in one of the supported formats. Used to render swatches list below the color picker.","name":"swatches","required":false,"type":{"name":"string[]"}},"swatchesPerRow":{"description":"Number of swatches per row, 7 by default","name":"swatchesPerRow","required":false,"type":{"name":"number"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withEyeDropper":{"description":"Determines whether eye dropper button should be displayed in the right section, true by default","name":"withEyeDropper","required":false,"type":{"name":"boolean"}},"withPicker":{"description":"Determines whether the color picker should be displayed, true by default","name":"withPicker","required":false,"type":{"name":"boolean"}},"withPreview":{"description":"Determines whether the preview color swatch should be displayed in the left section of the input, true by default","name":"withPreview","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"ColorPicker":{"props":{"alphaLabel":{"description":"Alpha slider aria-label prop","name":"alphaLabel","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"focusable":{"description":"Determines whether interactive elements (sliders thumbs and swatches) should be focusable, true by default","name":"focusable","required":false,"type":{"name":"boolean"}},"format":{"description":"Color format, \'hex\' by default","name":"format","required":false,"type":{"name":"ColorFormat","raw":"ColorFormat | undefined","value":[{"value":"undefined"},{"value":"\\"hex\\""},{"value":"\\"hexa\\""},{"value":"\\"rgba\\""},{"value":"\\"rgb\\""},{"value":"\\"hsl\\""},{"value":"\\"hsla\\""}]}},"fullWidth":{"description":"Determines whether the component should take 100% width of its container, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"hueLabel":{"description":"Hue slider aria-label prop","name":"hueLabel","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onChangeEnd":{"description":"Called when the user stops dragging one of the sliders or changes the value with arrow keys","name":"onChangeEnd","required":false,"type":{"name":"((value: string) => void)"}},"onColorSwatchClick":{"description":"Called when one of the color swatches is clicked","name":"onColorSwatchClick","required":false,"type":{"name":"((color: string) => void)"}},"saturationLabel":{"description":"Saturation slider aria-label prop","name":"saturationLabel","required":false,"type":{"name":"string"}},"size":{"description":"Controls size of hue, alpha and saturation sliders, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"swatches":{"description":"An array of colors in one of the supported formats. Used to render swatches list below the color picker.","name":"swatches","required":false,"type":{"name":"string[]"}},"swatchesPerRow":{"description":"Number of swatches per row, 7 by default","name":"swatchesPerRow","required":false,"type":{"name":"number"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withPicker":{"description":"Determines whether the color picker should be displayed, true by default","name":"withPicker","required":false,"type":{"name":"boolean"}}}},"ColorSwatch":{"props":{"children":{"description":"Content rendered inside the swatch","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Color to display, not related to theme.colors – supports only CSS color values","name":"color","required":true,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the swatch, any valid CSS value, numbers are converted to rem","name":"size","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"withShadow":{"description":"Determines whether the swatch should have inner box-shadow, true by default","name":"withShadow","required":false,"type":{"name":"boolean"}}}},"Combobox":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Combobox content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownPadding":{"description":"Controls padding of the dropdown, 4 by default","name":"dropdownPadding","required":false,"type":{"name":"Padding"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onClose":{"description":"Called when dropdown closes","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when dropdown opens","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when item is selected with Enter key or by clicking it","name":"onOptionSubmit","required":false,"type":{"name":"((value: string, optionProps: ComboboxOptionProps) => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether Combobox value can be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"resetSelectionOnOptionHover":{"description":"Determines whether selection should be reset when option is hovered, false by default","name":"resetSelectionOnOptionHover","required":false,"type":{"name":"boolean"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls items font-size and padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"store":{"description":"Combobox store, can be used to control combobox state","name":"store","required":false,"type":{"name":"ComboboxStore"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Combobox.Target":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"Combobox.Dropdown":{"props":{"hidden":{"description":"Determines whether the dropdown should be hidden, for example, when there are no options to display","name":"hidden","required":false,"type":{"name":"boolean"}}}},"Combobox.Options":{"props":{"labelledBy":{"description":"Id of the element that should label the options list","name":"labelledBy","required":false,"type":{"name":"string"}}}},"Combobox.Option":{"props":{"active":{"description":"Determines whether the option is selected","name":"active","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether the option can be selected","name":"disabled","required":false,"type":{"name":"boolean"}},"selected":{"description":"Determines whether item is selected, useful for virtualized comboboxes","name":"selected","required":false,"type":{"name":"boolean"}},"value":{"description":"Option value","name":"value","required":true,"type":{"name":"string"}}}},"Combobox.Search":{"props":{"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Determines whether the input should have error styles and aria-invalid attribute","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Input element id","name":"id","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Sets required attribute on the input element","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withAriaAttributes":{"description":"Determines whether the search input should have aria- attribute, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether the search input should handle keyboard navigation, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element of the Input component","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Combobox.Empty":{"description":"","props":{}},"Combobox.Chevron":{"props":{"error":{"description":"","name":"error","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"Combobox.Footer":{"description":"","props":{}},"Combobox.Header":{"description":"","props":{}},"Combobox.EventsTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"Combobox.DropdownTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"Combobox.Group":{"props":{"label":{"description":"Group label","name":"label","required":false,"type":{"name":"React.ReactNode"}}}},"Container":{"props":{"fluid":{"description":"Determines whether the container should take 100% of its parent width. If set, size prop is ignored. false by default.","name":"fluid","required":false,"type":{"name":"boolean"}},"size":{"description":"Sets max-width of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when fluid prop is set. \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"CopyButton":{"props":{"children":{"description":"Children callback, provides current status and copy function as an argument","name":"children","required":true,"type":{"name":"(payload: { copied: boolean; copy: () => void; }) => ReactNode"}},"timeout":{"description":"Copied status timeout in ms, 1000 by default","name":"timeout","required":false,"type":{"name":"number"}},"value":{"description":"Value that will be copied to the clipboard when the button is clicked","name":"value","required":true,"type":{"name":"string"}}}},"Dialog":{"props":{"children":{"description":"Dialog content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"keepMounted":{"description":"If set dialog will not be unmounted from the DOM when it is hidden, display: none styles will be added instead","name":"keepMounted","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when the close button is clicked","name":"onClose","required":false,"type":{"name":"(() => void)"}},"opened":{"description":"Opened state","name":"opened","required":true,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Affix position on screen, defaults value is { bottom: 0, right: 0 }","name":"position","required":false,"type":{"name":"{ top?: string | number; left?: string | number | undefined; bottom?: string | number | undefined; right?: string | number | undefined; } | undefined"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"shadow":{"description":"Key of theme.shadows or any valid CSS value to set box-shadow, none by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the dialog, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionProps":{"description":"Overrides default transition, { transition: \'pop-top-right\', duration: 200 } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"withBorder":{"description":"Determines whether the paper should have border, border color depends on color scheme, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether the close button should be displayed, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether component should be rendered within portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Root element z-index property, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Divider":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color value, by default value depends on color scheme","name":"color","required":false,"type":{"name":"MantineColor"}},"label":{"description":"Divider label, visible only when orientation is horizontal","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Controls label position, \'left\' by default","name":"labelPosition","required":false,"type":{"name":"\\"center\\" | \\"left\\" | \\"right\\"","raw":"\\"center\\" | \\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"orientation":{"description":"Controls orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"size":{"description":"Controls width/height (depends on orientation), \'xs\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Drawer":{"props":{"children":{"description":"Drawer content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeButtonProps":{"description":"Props passed down to the close button","name":"closeButtonProps","required":false,"type":{"name":"ModalBaseCloseButtonProps"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"offset":{"description":"Drawer container offset from the viewport end, 0 by default","name":"offset","required":false,"type":{"name":"string | number"}},"onClose":{"description":"Called when modal/drawer is closed","name":"onClose","required":true,"type":{"name":"() => void"}},"opened":{"description":"Determines whether modal/drawer is opened","name":"opened","required":true,"type":{"name":"boolean"}},"overlayProps":{"description":"Props passed down to the Overlay component, can be used to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Side of the screen on which drawer will be opened, \'left\' by default","name":"position","required":false,"type":{"name":"DrawerPosition","raw":"DrawerPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"title":{"description":"Drawer title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether the close button should be rendered, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Fieldset":{"props":{"legend":{"description":"Fieldset legend","name":"legend","required":false,"type":{"name":"React.ReactNode"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}}}},"FileButton":{"props":{"accept":{"description":"File input accept attribute, for example, \\"image/png,image/jpeg\\"","name":"accept","required":false,"type":{"name":"string"}},"capture":{"description":"Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.","name":"capture","required":false,"type":{"name":"boolean | \\"user\\" | \\"environment\\""}},"children":{"description":"Function that receives button props and returns react node that should be rendered","name":"children","required":true,"type":{"name":"(props: { onClick: () => void; }) => ReactNode"}},"disabled":{"description":"Disables file picker","name":"disabled","required":false,"type":{"name":"boolean"}},"form":{"description":"Input form attribute","name":"form","required":false,"type":{"name":"string"}},"inputProps":{"description":"Passes down props to the input element used to capture files","name":"inputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"multiple":{"description":"Determines whether user can pick more than one file","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Input name attribute","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when files are picked","name":"onChange","required":true,"type":{"name":"(payload: Multiple extends true ? File[] : File | null) => void"}},"resetRef":{"description":"Reference of the function that should be called when value changes to null or empty array","name":"resetRef","required":false,"type":{"name":"ForwardedRef<() => void>"}}}},"FileInput":{"props":{"accept":{"description":"File input accept attribute, for example, \\"image/png,image/jpeg\\"","name":"accept","required":false,"type":{"name":"string"}},"capture":{"description":"Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.","name":"capture","required":false,"type":{"name":"boolean | \\"user\\" | \\"environment\\""}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether clear button should be displayed in the right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"File | File[] | null"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"fileInputProps":{"description":"Props passed down to the hidden input element which is used to capture files","name":"fileInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"form":{"description":"Input form attribute","name":"form","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiple":{"description":"Determines whether user can pick more than one file, false by default","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Input name attribute","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((payload: Multiple extends true ? File[] : File | null) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"React.ReactNode"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"If set, the input value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"File | File[] | null"}},"valueComponent":{"description":"Value renderer. By default, file name is displayed.","name":"valueComponent","required":false,"type":{"name":"FC<{ value: File | File[] | null; }>"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Flex":{"props":{"align":{"description":"align-items CSS property","name":"align","required":false,"type":{"name":"StyleProp"}},"columnGap":{"description":"column-gap CSS property","name":"columnGap","required":false,"type":{"name":"StyleProp"}},"direction":{"description":"flex-direction CSS property","name":"direction","required":false,"type":{"name":"StyleProp"}},"gap":{"description":"gap CSS property","name":"gap","required":false,"type":{"name":"StyleProp"}},"justify":{"description":"justify-content CSS property","name":"justify","required":false,"type":{"name":"StyleProp"}},"rowGap":{"description":"row-gap CSS property","name":"rowGap","required":false,"type":{"name":"StyleProp"}},"wrap":{"description":"flex-wrap CSS property","name":"wrap","required":false,"type":{"name":"StyleProp"}}}},"FocusTrap":{"props":{"active":{"description":"Determines whether focus should be trapped within child element","name":"active","required":false,"type":{"name":"boolean"}},"children":{"description":"Element at which focus should be trapped, should support ref prop","name":"children","required":true,"type":{"name":"any"}},"refProp":{"description":"Prop that should be used to access component ref","name":"refProp","required":false,"type":{"name":"string"}}}},"Grid":{"props":{"align":{"description":"Sets align-items, stretch by default","name":"align","required":false,"type":{"name":"AlignItems"}},"columns":{"description":"Number of columns in each row, 12 by default","name":"columns","required":false,"type":{"name":"number"}},"grow":{"description":"Determines whether columns in the last row should expand to fill all available space, false by default","name":"grow","required":false,"type":{"name":"boolean"}},"gutter":{"description":"Gutter between columns, key of theme.spacing or any valid CSS value, \'md\' by default","name":"gutter","required":false,"type":{"name":"StyleProp"}},"justify":{"description":"Sets justify-content, flex-start by default","name":"justify","required":false,"type":{"name":"JustifyContent"}},"overflow":{"description":"Sets overflow CSS property on the root element, \'visible\' by default","name":"overflow","required":false,"type":{"name":"Overflow"}}}},"Group":{"props":{"align":{"description":"Controls align-items CSS property, \'center\' by default","name":"align","required":false,"type":{"name":"AlignItems"}},"gap":{"description":"Key of theme.spacing or any valid CSS value for gap, numbers are converted to rem, \'md\' by default","name":"gap","required":false,"type":{"name":"MantineSpacing"}},"grow":{"description":"Determines whether each child element should have flex-grow: 1 style, false by default","name":"grow","required":false,"type":{"name":"boolean"}},"justify":{"description":"Controls justify-content CSS property, \'flex-start\' by default","name":"justify","required":false,"type":{"name":"JustifyContent"}},"preventGrowOverflow":{"description":"Determines whether children should take only dedicated amount of space (max-width style is set based on the number of children), true by default","name":"preventGrowOverflow","required":false,"type":{"name":"boolean"}},"wrap":{"description":"Controls flex-wrap CSS property, \'wrap\' by default","name":"wrap","required":false,"type":{"name":"FlexWrap","raw":"FlexWrap | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"wrap\\""},{"value":"\\"nowrap\\""},{"value":"\\"wrap-reverse\\""}]}}}},"Highlight":{"props":{"children":{"description":"String parts of which must be highlighted","name":"children","required":true,"type":{"name":"string"}},"color":{"description":"Key of theme.colors or any valid CSS color, passed to Mark component color prop, yellow by default","name":"color","required":false,"type":{"name":"string | (string & {})"}},"gradient":{"description":"Gradient configuration, ignored when variant is not gradient, theme.defaultGradient by default","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"highlight":{"description":"Substring or an array of substrings to highlight in children","name":"highlight","required":true,"type":{"name":"string | string[]"}},"highlightStyles":{"description":"Styles applied to mark elements","name":"highlightStyles","required":false,"type":{"name":"CSSProperties | ((theme: MantineTheme) => CSSProperties)"}},"inherit":{"description":"Determines whether font properties should be inherited from the parent, false by default","name":"inherit","required":false,"type":{"name":"boolean"}},"inline":{"description":"Sets line-height to 1 for centering, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"span":{"description":"Shorthand for component=\\"span\\", false by default, default root element is p","name":"span","required":false,"type":{"name":"boolean"}},"truncate":{"description":"Side on which Text must be truncated, if true, text is truncated from the start","name":"truncate","required":false,"type":{"name":"TextTruncate"}}}},"HoverCard":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Popover.Target and Popover.Dropdown components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clickOutsideEvents":{"description":"Events that trigger outside clicks","name":"clickOutsideEvents","required":false,"type":{"name":"string[]"}},"closeDelay":{"description":"Close delay in ms","name":"closeDelay","required":false,"type":{"name":"number"}},"closeOnClickOutside":{"description":"Determines whether dropdown should be closed on outside clicks, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether dropdown should be closed when Escape key is pressed, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"defaultOpened":{"description":"Initial opened state for uncontrolled component","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"id":{"description":"id base to create accessibility connections","name":"id","required":false,"type":{"name":"string"}},"initiallyOpened":{"description":"Initial opened state","name":"initiallyOpened","required":false,"type":{"name":"boolean"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onClose":{"description":"Called when dropdown is closed","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when dropdown is opened","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"openDelay":{"description":"Open delay in ms","name":"openDelay","required":false,"type":{"name":"number"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped within dropdown, false by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withRoles":{"description":"Determines whether dropdown and target elements should have accessible roles, true by default","name":"withRoles","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"HoverCard.Dropdown":{"props":{"children":{"description":"Dropdown content","name":"children","required":false,"type":{"name":"React.ReactNode"}}}},"Image":{"props":{"fallbackSrc":{"description":"Image url that will be used as a fallback in case src prop is not set or image cannot be loaded","name":"fallbackSrc","required":false,"type":{"name":"string"}},"fit":{"description":"Controls object-fit style, \'cover\' by default","name":"fit","required":false,"type":{"name":"ObjectFit","raw":"ObjectFit | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"contain\\""},{"value":"\\"cover\\""},{"value":"\\"fill\\""},{"value":"\\"scale-down\\""}]}},"onError":{"description":"Called when image fails to load","name":"onError","required":false,"type":{"name":"((event: SyntheticEvent) => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"src":{"description":"Image url","name":"src","required":false,"type":{"name":"any"}}}},"Indicator":{"props":{"autoContrast":{"description":"Determines whether text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color value, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"When Indicator is disabled it renders children only","name":"disabled","required":false,"type":{"name":"boolean"}},"inline":{"description":"Determines whether the indicator container should be an inline element, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"label":{"description":"Label rendered inside the indicator, for example, notification count","name":"label","required":false,"type":{"name":"React.ReactNode"}},"offset":{"description":"Indicator offset relative to the target element, usually used for elements with border-radius, equals to size by default","name":"offset","required":false,"type":{"name":"number"}},"position":{"description":"Indicator position relative to the target element, \'top-end\' by default","name":"position","required":false,"type":{"name":"\\"bottom-end\\" | \\"bottom-start\\" | \\"top-end\\" | \\"top-start\\" | \\"bottom-center\\" | \\"top-center\\" | \\"middle-center\\" | \\"middle-end\\" | \\"middle-start\\"","raw":"\\"bottom-end\\" | \\"bottom-start\\" | \\"top-end\\" | \\"top-start\\" | \\"bottom-center\\" | \\"top-center\\" | \\"middle-center\\" | \\"middle-end\\" | \\"middle-start\\" | undefined","value":[{"value":"undefined"},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""},{"value":"\\"bottom-center\\""},{"value":"\\"top-center\\""},{"value":"\\"middle-center\\""},{"value":"\\"middle-end\\""},{"value":"\\"middle-start\\""}]}},"processing":{"description":"Determines whether the indicator should have processing animation, false by default","name":"processing","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, 100 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Indicator width and height, 10 by default","name":"size","required":false,"type":{"name":"string | number"}},"withBorder":{"description":"Determines whether the indicator should have a border (color of the border is the same as the body element), false by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Indicator z-index, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"InlineInput":{"props":{"description":{"description":"","name":"description","required":true,"type":{"name":"React.ReactNode"}},"disabled":{"description":"","name":"disabled","required":true,"type":{"name":"boolean"}},"error":{"description":"","name":"error","required":true,"type":{"name":"React.ReactNode"}},"id":{"description":"","name":"id","required":true,"type":{"name":"string"}},"label":{"description":"","name":"label","required":true,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"size":{"description":"","name":"size","required":true,"type":{"name":"MantineSize | (string & {})"}}}},"Input":{"props":{"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Determines whether the input should have error styles and aria-invalid attribute","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Input element id","name":"id","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Sets required attribute on the input element","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element of the Input component","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"InputBase":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element (Input.Wrapper component)","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"InputsGroupFieldset":{"props":{"role":{"description":"","name":"role","required":true,"type":{"name":"\\"group\\" | \\"radiogroup\\"","raw":"\\"group\\" | \\"radiogroup\\"","value":[{"value":"\\"group\\""},{"value":"\\"radiogroup\\""}]}}}},"JsonInput":{"props":{"autosize":{"description":"Determines whether the textarea height should grow with its content, false by default","name":"autosize","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"deserialize":{"description":"Function to deserialize string value, used for value formatting and input JSON validation, must throw error if string cannot be processed, JSON.parse by default","name":"deserialize","required":false,"type":{"name":"((text: string, reviver?: ((this: any, key: string, value: any) => any)) => any) | undefined"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"formatOnBlur":{"description":"Determines whether the value should be formatted on blur, false by default","name":"formatOnBlur","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"maxRows":{"description":"Maximum rows for autosize textarea to grow, ignored if autosize prop is not set","name":"maxRows","required":false,"type":{"name":"number"}},"minRows":{"description":"Minimum rows of autosize textarea, ignored if autosize prop is not set","name":"minRows","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"resize":{"description":"Controls resize CSS property, \'none\' by default","name":"resize","required":false,"type":{"name":"Resize","raw":"Resize | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"block\\""},{"value":"\\"inline\\""},{"value":"\\"both\\""},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"serialize":{"description":"Function to serialize value into a string, used for value formatting, JSON.stringify by default","name":"serialize","required":false,"type":{"name":"{ (value: any, replacer?: ((this: any, key: string, value: any) => any), space?: string | number | undefined): string; (value: any, replacer?: (string | number)[] | null | undefined, space?: string | ... 1 more ... | undefined): string; } | undefined"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"validationError":{"description":"Error message displayed when value is not valid JSON","name":"validationError","required":false,"type":{"name":"React.ReactNode"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Kbd":{"props":{"size":{"description":"Controls font-size and padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"List":{"props":{"center":{"description":"Determines whether items must be centered with their icon, false by default","name":"center","required":false,"type":{"name":"boolean"}},"children":{"description":"List.Item components only","name":"children","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"Icon that replaces list item dot","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"listStyleType":{"description":"Controls list-style-type, by default inferred from type","name":"listStyleType","required":false,"type":{"name":"ListStyleType"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"spacing":{"description":"Key of theme.spacing or any valid CSS value to set spacing between items, 0 by default","name":"spacing","required":false,"type":{"name":"MantineSpacing"}},"type":{"description":"List type: ol or ul, \'unordered\' by default","name":"type","required":false,"type":{"name":"\\"ordered\\" | \\"unordered\\"","raw":"\\"ordered\\" | \\"unordered\\" | undefined","value":[{"value":"undefined"},{"value":"\\"ordered\\""},{"value":"\\"unordered\\""}]}},"withPadding":{"description":"Determines whether list items should be offset with padding, false by default","name":"withPadding","required":false,"type":{"name":"boolean"}}}},"Loader":{"props":{"children":{"description":"Overrides default loader with given content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, default value is theme.primaryColor","name":"color","required":false,"type":{"name":"MantineColor"}},"loaders":{"description":"Object of loaders components, can be customized via default props or inline. Default value contains bars, oval and dots","name":"loaders","required":false,"type":{"name":"Partial>"}},"size":{"description":"Controls width and height of the loader. Loader has predefined xs-xl values. Numbers are converted to rem. Default value is \'md\'","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"type":{"description":"Loader type, key of loaders prop, default value is \'oval\'","name":"type","required":false,"type":{"name":"(string & {}) | \\"bars\\" | \\"dots\\" | \\"oval\\""}}}},"LoadingOverlay":{"props":{"loaderProps":{"description":"Props passed down to Loader component","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"overlayProps":{"description":"Props passed down to Overlay component","name":"overlayProps","required":false,"type":{"name":"OverlayProps"}},"transitionProps":{"description":"Props passed down to Transition component, { transition: \'fade\', duration: 0 } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"visible":{"description":"Determines whether the overlay should be visible, false by default","name":"visible","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Controls overlay z-index, 400 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Mark":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, yellow by default","name":"color","required":false,"type":{"name":"MantineColor"}}}},"Menu":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Menu content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clickOutsideEvents":{"description":"Events that trigger outside clicks","name":"clickOutsideEvents","required":false,"type":{"name":"string[]"}},"closeDelay":{"description":"Close delay in ms, applicable only to trigger=\\"hover\\" variant","name":"closeDelay","required":false,"type":{"name":"number"}},"closeOnClickOutside":{"description":"Determines whether dropdown should be closed on outside clicks","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether dropdown should be closed when Escape key is pressed","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"closeOnItemClick":{"description":"Determines whether Menu should be closed when item is clicked","name":"closeOnItemClick","required":false,"type":{"name":"boolean"}},"defaultOpened":{"description":"Uncontrolled menu initial opened state","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"id":{"description":"id base to create accessibility connections","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"loop":{"description":"Determines whether arrow key presses should loop though items (first to last and last to first)","name":"loop","required":false,"type":{"name":"boolean"}},"menuItemTabIndex":{"description":"Set the tabindex on all menu items. Defaults to -1","name":"menuItemTabIndex","required":false,"type":{"name":"0 | -1","raw":"0 | -1 | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"-1"}]}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onChange":{"description":"Called when menu opened state changes","name":"onChange","required":false,"type":{"name":"((opened: boolean) => void)"}},"onClose":{"description":"Called when Menu is closed","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when Menu is opened","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"openDelay":{"description":"Open delay in ms, applicable only to trigger=\\"hover\\" variant","name":"openDelay","required":false,"type":{"name":"number"}},"opened":{"description":"Controlled menu opened state","name":"opened","required":false,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether dropdown should trap focus of keyboard events","name":"trapFocus","required":false,"type":{"name":"boolean"}},"trigger":{"description":"Event which should open menu","name":"trigger","required":false,"type":{"name":"\\"hover\\" | \\"click\\" | \\"click-hover\\"","raw":"\\"hover\\" | \\"click\\" | \\"click-hover\\" | undefined","value":[{"value":"undefined"},{"value":"\\"hover\\""},{"value":"\\"click\\""},{"value":"\\"click-hover\\""}]}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Menu.Item":{"props":{"children":{"description":"Item label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeMenuOnClick":{"description":"Determines whether the menu should be closed when the item is clicked, overrides closeOnItemClick prop on the Menu component","name":"closeMenuOnClick","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Disables item","name":"disabled","required":false,"type":{"name":"boolean"}},"leftSection":{"description":"Section displayed on the left side of the label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Section displayed on the right side of the label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"Menu.Label":{"description":"","props":{}},"Menu.Dropdown":{"description":"","props":{}},"Menu.Divider":{"description":"","props":{}},"Modal":{"props":{"centered":{"description":"Determines whether the modal should be centered vertically, false by default","name":"centered","required":false,"type":{"name":"boolean"}},"children":{"description":"Modal content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeButtonProps":{"description":"Props passed down to the close button","name":"closeButtonProps","required":false,"type":{"name":"ModalBaseCloseButtonProps"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"fullScreen":{"description":"Determines whether the modal should take the entire screen, false by default","name":"fullScreen","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when modal/drawer is closed","name":"onClose","required":true,"type":{"name":"() => void"}},"opened":{"description":"Determines whether modal/drawer is opened","name":"opened","required":true,"type":{"name":"boolean"}},"overlayProps":{"description":"Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"title":{"description":"Modal title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether the close button should be rendered, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"xOffset":{"description":"Left/right modal offset, 5vw by default","name":"xOffset","required":false,"type":{"name":"MarginLeft"}},"yOffset":{"description":"Top/bottom modal offset, 5dvh by default","name":"yOffset","required":false,"type":{"name":"MarginTop"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"ModalBase":{"props":{"children":{"description":"Modal/drawer content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when modal/drawer is closed","name":"onClose","required":true,"type":{"name":"() => void"}},"opened":{"description":"Determines whether modal/drawer is opened","name":"opened","required":true,"type":{"name":"boolean"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"MultiSelect":{"props":{"checkIconPosition":{"description":"Position of the check icon relative to the option label, \'left\' by default","name":"checkIconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"(__CloseButtonProps & ElementProps<\\"button\\">)"}},"clearable":{"description":"Determines whether the clear button should be displayed in the right section when the component has value, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data used to generate options","name":"data","required":false,"type":{"name":"ComboboxData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultSearchValue":{"description":"Default search value","name":"defaultSearchValue","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"hiddenInputValuesDivider":{"description":"Divider used to separate values in the hidden input value attribute, \',\' by default","name":"hiddenInputValuesDivider","required":false,"type":{"name":"string"}},"hidePickedOptions":{"description":"Determines whether picked options should be removed from the options list, false by default","name":"hidePickedOptions","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"maxValues":{"description":"Maximum number of values, Infinity by default","name":"maxValues","required":false,"type":{"name":"number"}},"nothingFoundMessage":{"description":"Message displayed when no option matched current search query, only applicable when searchable prop is set","name":"nothingFoundMessage","required":false,"type":{"name":"React.ReactNode"}},"onChange":{"description":"Called whe value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"onSearchChange":{"description":"Called when search changes","name":"onSearchChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"searchValue":{"description":"Controlled search value","name":"searchValue","required":false,"type":{"name":"string"}},"searchable":{"description":"Determines whether the select should be searchable, false by default","name":"searchable","required":false,"type":{"name":"boolean"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCheckIcon":{"description":"Determines whether check icon should be displayed near the selected option label, true by default","name":"withCheckIcon","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"NativeSelect":{"props":{"data":{"description":"Data used to render options, can be replaced with children","name":"data","required":false,"type":{"name":"ComboboxData"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"NavLink":{"props":{"active":{"description":"Determines whether the link should have active styles, false by default","name":"active","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Child NavLink components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"childrenOffset":{"description":"Key of theme.spacing or any valid CSS value to set collapsed links padding-left, \'lg\' by default","name":"childrenOffset","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"color":{"description":"Key of theme.colors of any valid CSS color to control active styles, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultOpened":{"description":"Uncontrolled nested items collapse initial state","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"description":{"description":"Link description, displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"disableRightSectionRotation":{"description":"If set, right section will not be rotated when collapse is opened, false by default","name":"disableRightSectionRotation","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, disabled styles will be added to the root element, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"label":{"description":"Main link label","name":"label","required":false,"type":{"name":"React.ReactNode"}},"leftSection":{"description":"Section displayed on the left side of the label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"noWrap":{"description":"If set, label and description will not wrap to the next line, false by default","name":"noWrap","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when open state changes","name":"onChange","required":false,"type":{"name":"((opened: boolean) => void)"}},"onClick":{"description":"Called when the link is clicked","name":"onClick","required":false,"type":{"name":"((event: MouseEvent) => void)"}},"onKeyDown":{"description":"Link onkeydown event","name":"onKeyDown","required":false,"type":{"name":"((event: KeyboardEvent) => void)"}},"opened":{"description":"Controlled nested items collapse state","name":"opened","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Section displayed on the right side of the label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"Notification":{"props":{"children":{"description":"Notification body, place main text here","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeButtonProps":{"description":"Props passed down to the close button","name":"closeButtonProps","required":false,"type":{"name":"Record"}},"color":{"description":"Controls notification line or icon color, key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"icon":{"description":"Notification icon, replaces color line","name":"icon","required":false,"type":{"name":"React.ReactNode"}},"loading":{"description":"Replaces colored line or icon with Loader component","name":"loading","required":false,"type":{"name":"boolean"}},"onClose":{"description":"Called when close button is clicked","name":"onClose","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"title":{"description":"Notification title, displayed before body","name":"title","required":false,"type":{"name":"React.ReactNode"}},"withBorder":{"description":"Determines whether notification should have a border, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}},"withCloseButton":{"description":"Determines whether close button should be visible, true by default","name":"withCloseButton","required":false,"type":{"name":"boolean"}}}},"NumberFormatter":{"props":{"allowNegative":{"description":"Determines whether negative values are allowed, true by default","name":"allowNegative","required":false,"type":{"name":"boolean"}},"decimalScale":{"description":"Limits the number of digits that are displayed after the decimal point, by default there is no limit","name":"decimalScale","required":false,"type":{"name":"number"}},"decimalSeparator":{"description":"Character used as a decimal separator, \'.\' by default","name":"decimalSeparator","required":false,"type":{"name":"string"}},"fixedDecimalScale":{"description":"If set, 0s are added after decimalSeparator to match given decimalScale. false by default","name":"fixedDecimalScale","required":false,"type":{"name":"boolean"}},"prefix":{"description":"Prefix added before the value","name":"prefix","required":false,"type":{"name":"string"}},"suffix":{"description":"Suffix added after the value","name":"suffix","required":false,"type":{"name":"string"}},"thousandSeparator":{"description":"A character used to separate thousands, \',\' by default","name":"thousandSeparator","required":false,"type":{"name":"string | boolean"}},"thousandsGroupStyle":{"description":"Defines the thousand grouping style","name":"thousandsGroupStyle","required":false,"type":{"name":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\"","raw":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"thousand\\""},{"value":"\\"lakh\\""},{"value":"\\"wan\\""}]}},"value":{"description":"Value to format","name":"value","required":false,"type":{"name":"string | number"}}}},"NumberInput":{"props":{"allowDecimal":{"description":"Determines whether decimal values are allowed, true by default","name":"allowDecimal","required":false,"type":{"name":"boolean"}},"allowLeadingZeros":{"description":"Determines whether leading zeros are allowed. If not set, leading zeros are removed when the input is blurred. false by default","name":"allowLeadingZeros","required":false,"type":{"name":"boolean"}},"allowNegative":{"description":"Determines whether negative values are allowed, true by default","name":"allowNegative","required":false,"type":{"name":"boolean"}},"allowedDecimalSeparators":{"description":"Characters which when pressed result in a decimal separator, [\'.\'] by default","name":"allowedDecimalSeparators","required":false,"type":{"name":"string[]"}},"clampBehavior":{"description":"Controls how value is clamped, strict – user is not allowed to enter values that are not in [min, max] range, blur – user is allowed to enter any values, but the value is clamped when the input loses focus (default behavior), none – lifts all restrictions, [min, max] range is applied only for controls and up/down keys","name":"clampBehavior","required":false,"type":{"name":"\\"none\\" | \\"blur\\" | \\"strict\\"","raw":"\\"none\\" | \\"blur\\" | \\"strict\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"blur\\""},{"value":"\\"strict\\""}]}},"decimalScale":{"description":"Limits the number of digits that can be entered after the decimal point","name":"decimalScale","required":false,"type":{"name":"number"}},"decimalSeparator":{"description":"Character used as a decimal separator, \'.\' by default","name":"decimalSeparator","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string | number"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"fixedDecimalScale":{"description":"If set, 0s are added after decimalSeparator to match given decimalScale. false by default","name":"fixedDecimalScale","required":false,"type":{"name":"boolean"}},"handlersRef":{"description":"Increment/decrement handlers","name":"handlersRef","required":false,"type":{"name":"ForwardedRef | undefined"}},"hideControls":{"description":"Determines whether the up/down controls should be hidden, false by default","name":"hideControls","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"isAllowed":{"description":"A function to validate the input value. If this function returns false, the onChange will not be called and the input value will not change.","name":"isAllowed","required":false,"type":{"name":"((values: NumberFormatValues) => boolean)"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"max":{"description":"Maximum possible value","name":"max","required":false,"type":{"name":"number"}},"min":{"description":"Minimum possible value","name":"min","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string | number) => void)"}},"onValueChange":{"description":"Called when value changes with react-number-format payload","name":"onValueChange","required":false,"type":{"name":"OnValueChange"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"prefix":{"description":"Prefix added before the input value","name":"prefix","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"startValue":{"description":"Value set to the input when increment/decrement buttons are clicked or up/down arrows pressed if the input is empty, 0 by default","name":"startValue","required":false,"type":{"name":"number"}},"step":{"description":"Number by which value will be incremented/decremented with up/down controls and keyboard arrows, 1 by default","name":"step","required":false,"type":{"name":"number"}},"stepHoldDelay":{"description":"Initial delay in milliseconds before stepping the value.","name":"stepHoldDelay","required":false,"type":{"name":"number"}},"stepHoldInterval":{"description":"Delay before stepping the value. Can be a number of milliseconds or a function that receives the current step count and returns the delay in milliseconds.","name":"stepHoldInterval","required":false,"type":{"name":"number | ((stepCount: number) => number)"}},"suffix":{"description":"Suffix added after the input value","name":"suffix","required":false,"type":{"name":"string"}},"thousandSeparator":{"description":"A character used to separate thousands","name":"thousandSeparator","required":false,"type":{"name":"string | boolean"}},"thousandsGroupStyle":{"description":"Defines the thousand grouping style.","name":"thousandsGroupStyle","required":false,"type":{"name":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\"","raw":"\\"none\\" | \\"thousand\\" | \\"lakh\\" | \\"wan\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"thousand\\""},{"value":"\\"lakh\\""},{"value":"\\"wan\\""}]}},"type":{"description":"Controls input type attribute, \'text\' by default","name":"type","required":false,"type":{"name":"\\"text\\" | \\"tel\\" | \\"password\\"","raw":"\\"text\\" | \\"tel\\" | \\"password\\" | undefined","value":[{"value":"undefined"},{"value":"\\"text\\""},{"value":"\\"tel\\""},{"value":"\\"password\\""}]}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string | number"}},"valueIsNumericString":{"description":"If value is passed as string representation of numbers (unformatted) and number is used in any format props like in prefix or suffix in numeric format and format prop in pattern format then this should be passed as true. false by default.","name":"valueIsNumericString","required":false,"type":{"name":"boolean"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Overlay":{"props":{"backgroundOpacity":{"description":"Controls overlay background-color opacity 0–1, disregarded when gradient prop is set, 0.6 by default","name":"backgroundOpacity","required":false,"type":{"name":"number"}},"blur":{"description":"Overlay background blur, 0 by default","name":"blur","required":false,"type":{"name":"string | number"}},"center":{"description":"Determines whether content inside overlay should be vertically and horizontally centered, false by default","name":"center","required":false,"type":{"name":"boolean"}},"children":{"description":"Content inside overlay","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Overlay background-color, #000 by default","name":"color","required":false,"type":{"name":"BackgroundColor"}},"fixed":{"description":"Determines whether overlay should have fixed position instead of absolute, false by default","name":"fixed","required":false,"type":{"name":"boolean"}},"gradient":{"description":"Changes overlay to gradient. If set, color prop is ignored","name":"gradient","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, 0 by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"zIndex":{"description":"Overlay z-index, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Pagination":{"props":{"autoContrast":{"description":"Determines whether active item text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"boundaries":{"description":"Number of elements visible on the left/right edges, 1 by default","name":"boundaries","required":false,"type":{"name":"number"}},"color":{"description":"Key of theme.colors, active item color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Active page for uncontrolled component, must be an integer in [0, total] interval","name":"defaultValue","required":false,"type":{"name":"number"}},"disabled":{"description":"Determines whether all controls should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"dotsIcon":{"description":"Dots icon component","name":"dotsIcon","required":false,"type":{"name":"PaginationIcon"}},"firstIcon":{"description":"First control icon component","name":"firstIcon","required":false,"type":{"name":"PaginationIcon"}},"gap":{"description":"Key of theme.spacing, gap between controls, 8 by default","name":"gap","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"getControlProps":{"description":"Adds props to next/previous/first/last controls","name":"getControlProps","required":false,"type":{"name":"((control: \\"next\\" | \\"previous\\" | \\"first\\" | \\"last\\") => Record)"}},"getItemProps":{"description":"Additional props passed down to controls","name":"getItemProps","required":false,"type":{"name":"((page: number) => Record)"}},"lastIcon":{"description":"Last control icon component","name":"lastIcon","required":false,"type":{"name":"PaginationIcon"}},"nextIcon":{"description":"Next control icon component","name":"nextIcon","required":false,"type":{"name":"PaginationIcon"}},"onChange":{"description":"Called when page changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onFirstPage":{"description":"Called when first page control is clicked","name":"onFirstPage","required":false,"type":{"name":"(() => void)"}},"onLastPage":{"description":"Called when last page control is clicked","name":"onLastPage","required":false,"type":{"name":"(() => void)"}},"onNextPage":{"description":"Called when next page control is clicked","name":"onNextPage","required":false,"type":{"name":"(() => void)"}},"onPreviousPage":{"description":"Called when previous page control is clicked","name":"onPreviousPage","required":false,"type":{"name":"(() => void)"}},"previousIcon":{"description":"Previous control icon component","name":"previousIcon","required":false,"type":{"name":"PaginationIcon"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"siblings":{"description":"Number of siblings displayed on the left/right side of the selected page, 1 by default","name":"siblings","required":false,"type":{"name":"number"}},"size":{"description":"height and min-width of controls, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"total":{"description":"Total number of pages, must be an integer","name":"total","required":true,"type":{"name":"number"}},"value":{"description":"Active page for controlled component, must be an integer in [0, total] interval","name":"value","required":false,"type":{"name":"number"}},"withControls":{"description":"Determines whether next/previous controls should be rendered, true by default","name":"withControls","required":false,"type":{"name":"boolean"}},"withEdges":{"description":"Determines whether first/last controls should be rendered, false by default","name":"withEdges","required":false,"type":{"name":"boolean"}}}},"Paper":{"props":{"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"shadow":{"description":"Key of theme.shadows or any valid CSS value to set box-shadow, none by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"withBorder":{"description":"Determines whether the paper should have border, border color depends on color scheme, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}}}},"PasswordInput":{"props":{"defaultVisible":{"description":"Determines whether input content should be visible by default","name":"defaultVisible","required":false,"type":{"name":"boolean"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"onVisibilityChange":{"description":"Called when visibility changes","name":"onVisibilityChange","required":false,"type":{"name":"((visible: boolean) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"visibilityToggleButtonProps":{"description":"Props passed down to the visibility toggle button","name":"visibilityToggleButtonProps","required":false,"type":{"name":"Record"}},"visibilityToggleIcon":{"description":"A component to replace visibility toggle icon","name":"visibilityToggleIcon","required":false,"type":{"name":"FC<{ reveal: boolean; }>"}},"visible":{"description":"Determines whether input content should be visible","name":"visible","required":false,"type":{"name":"boolean"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Pill":{"props":{"disabled":{"description":"If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden","name":"disabled","required":false,"type":{"name":"boolean"}},"onRemove":{"description":"Called when the remove button is clicked","name":"onRemove","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. \'xl\' by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeButtonProps":{"description":"Props passed down to the remove button","name":"removeButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"size":{"description":"Controls pill font-size and padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withRemoveButton":{"description":"Determines whether the remove button should be displayed, false by default","name":"withRemoveButton","required":false,"type":{"name":"boolean"}}}},"PillsInput":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"PinInput":{"props":{"ariaLabel":{"description":"aria-label for the inputs","name":"ariaLabel","required":false,"type":{"name":"string"}},"autoFocus":{"description":"If set, the first input is focused when component is mounted, false by default","name":"autoFocus","required":false,"type":{"name":"boolean"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"disabled":{"description":"If set, disabled attribute is added to all inputs","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"If set, adds error styles and aria-invalid attribute to all inputs","name":"error","required":false,"type":{"name":"boolean"}},"form":{"description":"Hidden input form attribute","name":"form","required":false,"type":{"name":"string"}},"gap":{"description":"Key of theme.spacing or any valid CSS value to set gap between inputs, numbers are converted to rem, \'md\' by default","name":"gap","required":false,"type":{"name":"MantineSpacing"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"id":{"description":"Base id used for all inputs. By default, inputs\' ids are generated randomly.","name":"id","required":false,"type":{"name":"string"}},"inputMode":{"description":"inputmode attribute, inferred from the type prop if not specified","name":"inputMode","required":false,"type":{"name":"\\"search\\" | \\"text\\" | \\"none\\" | \\"tel\\" | \\"url\\" | \\"email\\" | \\"numeric\\" | \\"decimal\\"","raw":"\\"search\\" | \\"text\\" | \\"none\\" | \\"tel\\" | \\"url\\" | \\"email\\" | \\"numeric\\" | \\"decimal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"search\\""},{"value":"\\"text\\""},{"value":"\\"none\\""},{"value":"\\"tel\\""},{"value":"\\"url\\""},{"value":"\\"email\\""},{"value":"\\"numeric\\""},{"value":"\\"decimal\\""}]}},"inputType":{"description":"Inputs type attribute, inferred from the type prop if not specified","name":"inputType","required":false,"type":{"name":"HTMLInputTypeAttribute"}},"length":{"description":"Number of inputs, 4 by default","name":"length","required":false,"type":{"name":"number"}},"manageFocus":{"description":"Determines whether focus should be moved automatically to the next input once filled, true by default","name":"manageFocus","required":false,"type":{"name":"boolean"}},"mask":{"description":"Changes input type to \\"password\\", false by default","name":"mask","required":false,"type":{"name":"boolean"}},"name":{"description":"Hidden input name attribute","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"onComplete":{"description":"Called when all inputs have value","name":"onComplete","required":false,"type":{"name":"((value: string) => void)"}},"oneTimeCode":{"description":"Determines whether autocomplete=\\"one-time-code\\" attribute should be set on all inputs, true by default","name":"oneTimeCode","required":false,"type":{"name":"boolean"}},"placeholder":{"description":"Inputs placeholder, \'○\' by default","name":"placeholder","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"If set, the user cannot edit the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls inputs width and height, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Determines which values can be entered, \'alphanumeric\' by default","name":"type","required":false,"type":{"name":"\\"number\\" | RegExp | \\"alphanumeric\\""}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}}}},"Popover":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 7 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Popover.Target and Popover.Dropdown components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clickOutsideEvents":{"description":"Events that trigger outside clicks","name":"clickOutsideEvents","required":false,"type":{"name":"string[]"}},"closeOnClickOutside":{"description":"Determines whether dropdown should be closed on outside clicks, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether dropdown should be closed when Escape key is pressed, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"defaultOpened":{"description":"Initial opened state for uncontrolled component","name":"defaultOpened","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, popover dropdown will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"id":{"description":"id base to create accessibility connections","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set dropdown will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"middlewares":{"description":"Floating ui middlewares to configure position handling, { flip: true, shift: true, inline: false } by default","name":"middlewares","required":false,"type":{"name":"PopoverMiddlewares"}},"offset":{"description":"Offset of the dropdown element, 8 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onChange":{"description":"Called with current state when dropdown opens or closes","name":"onChange","required":false,"type":{"name":"((opened: boolean) => void)"}},"onClose":{"description":"Called when dropdown closes","name":"onClose","required":false,"type":{"name":"(() => void)"}},"onOpen":{"description":"Called when dropdown opens","name":"onOpen","required":false,"type":{"name":"(() => void)"}},"onPositionChange":{"description":"Called when dropdown position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"opened":{"description":"Controlled dropdown opened state","name":"opened","required":false,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Dropdown position relative to the target element, \'bottom\' by default","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update dropdown position, [] by default","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"returnFocus":{"description":"Determines whether focus should be automatically returned to control when dropdown closes, false by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any other valid CSS box-shadow value","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate dropdown presence, use to configure duration and animation type, { duration: 150, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped within dropdown, false by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"width":{"description":"Dropdown width, or \'target\' to make dropdown width the same as target element, \'max-content\' by default","name":"width","required":false,"type":{"name":"PopoverWidth"}},"withArrow":{"description":"Determines whether component should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withRoles":{"description":"Determines whether dropdown and target elements should have accessible roles, true by default","name":"withRoles","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether dropdown should be rendered within the Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Dropdown z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Popover.Target":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"popupType":{"description":"Popup accessible type, \'dialog\' by default","name":"popupType","required":false,"type":{"name":"string"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"Popover.Dropdown":{"description":"","props":{}},"Portal":{"props":{"children":{"description":"Portal children, for example, custom modal or popover","name":"children","required":true,"type":{"name":"React.ReactNode"}},"target":{"description":"Element inside which portal should be created, by default a new div element is created and appended to the document.body","name":"target","required":false,"type":{"name":"string | HTMLElement"}}}},"Progress":{"props":{"animated":{"description":"Determines whether the sections stripes should be animated, if set, striped prop is ignored, false by default","name":"animated","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether label text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS value, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls track height, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"striped":{"description":"Determines whether the section should have stipes, false by default","name":"striped","required":false,"type":{"name":"boolean"}},"transitionDuration":{"description":"Controls sections width transition duration, value is specified in ms, 100 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"value":{"description":"Value of the progress","name":"value","required":true,"type":{"name":"number"}}}},"Radio":{"props":{"autoContrast":{"description":"Determines whether icon color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color to set input color in checked state, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"description":{"description":"Description displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"error":{"description":"Error displayed below the label","name":"error","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"A component that replaces default check icon","name":"icon","required":false,"type":{"name":"FC"}},"iconColor":{"description":"Key of theme.colors or any valid CSS color to set icon color, by default value depends on theme.autoContrast","name":"iconColor","required":false,"type":{"name":"MantineColor"}},"label":{"description":"Content of the label associated with the radio","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Position of the label relative to the input, \'right\' by default","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \\"xl\\" by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls size of the component, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Rating":{"props":{"color":{"description":"Key of theme.colors or any CSS color value, \'yellow\' by default","name":"color","required":false,"type":{"name":"MantineColor"}},"count":{"description":"Number of controls, 5 by default","name":"count","required":false,"type":{"name":"number"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"number"}},"emptySymbol":{"description":"Icon displayed when the symbol is empty","name":"emptySymbol","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"fractions":{"description":"Number of fractions each item can be divided into, 1 by default","name":"fractions","required":false,"type":{"name":"number"}},"fullSymbol":{"description":"Icon displayed when the symbol is full","name":"fullSymbol","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"getSymbolLabel":{"description":"A function to assign aria-label of the the control at index given in the argument. If not specified, control index is used as aria-label.","name":"getSymbolLabel","required":false,"type":{"name":"((index: number) => string)"}},"highlightSelectedOnly":{"description":"If set, only the selected symbol changes to full symbol when selected, false by default","name":"highlightSelectedOnly","required":false,"type":{"name":"boolean"}},"name":{"description":"name attribute passed down to all inputs. By default, name is generated randomly.","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onHover":{"description":"Called when one of the controls is hovered","name":"onHover","required":false,"type":{"name":"((value: number) => void)"}},"readOnly":{"description":"If set, the user cannot interact with the component, false by default","name":"readOnly","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls component size, \'sm\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"number"}}}},"RingProgress":{"props":{"label":{"description":"Label displayed in the center of the ring","name":"label","required":false,"type":{"name":"React.ReactNode"}},"rootColor":{"description":"Color of the root section, key of theme.colors or CSS color value","name":"rootColor","required":false,"type":{"name":"MantineColor"}},"roundCaps":{"description":"Sets whether the edges of the progress circle are rounded","name":"roundCaps","required":false,"type":{"name":"boolean"}},"sections":{"description":"Ring sections","name":"sections","required":true,"type":{"name":"RingProgressSection[]"}},"size":{"description":"Width and height of the progress ring","name":"size","required":false,"type":{"name":"number"}},"thickness":{"description":"Ring thickness","name":"thickness","required":false,"type":{"name":"number"}}}},"ScrollArea":{"props":{"offsetScrollbars":{"description":"Determines whether scrollbars should be offset with padding on given axis, false by default","name":"offsetScrollbars","required":false,"type":{"name":"boolean | \\"x\\" | \\"y\\""}},"onScrollPositionChange":{"description":"Called with current position (x and y coordinates) when viewport is scrolled","name":"onScrollPositionChange","required":false,"type":{"name":"((position: { x: number; y: number; }) => void)"}},"scrollHideDelay":{"description":"Scroll hide delay in ms, applicable only when type is set to hover or scroll, 1000 by default","name":"scrollHideDelay","required":false,"type":{"name":"number"}},"scrollbarSize":{"description":"Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem","name":"scrollbarSize","required":false,"type":{"name":"string | number"}},"scrollbars":{"description":"Axis at which scrollbars must be rendered, \'xy\' by default","name":"scrollbars","required":false,"type":{"name":"false | \\"x\\" | \\"y\\" | \\"xy\\""}},"type":{"description":"Defines scrollbars behavior, hover by default\\n- hover – scrollbars are visible when mouse is over the scroll area\\n- scroll – scrollbars are visible when the scroll area is scrolled\\n- always – scrollbars are always visible\\n- never – scrollbars are always hidden\\n- auto – similar to overflow: auto – scrollbars are always visible when the content is overflowing","name":"type","required":false,"type":{"name":"\\"auto\\" | \\"scroll\\" | \\"always\\" | \\"hover\\" | \\"never\\"","raw":"\\"auto\\" | \\"scroll\\" | \\"always\\" | \\"hover\\" | \\"never\\" | undefined","value":[{"value":"undefined"},{"value":"\\"auto\\""},{"value":"\\"scroll\\""},{"value":"\\"always\\""},{"value":"\\"hover\\""},{"value":"\\"never\\""}]}},"viewportProps":{"description":"Props passed down to the viewport element","name":"viewportProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"viewportRef":{"description":"Assigns viewport element (scrollable container) ref","name":"viewportRef","required":false,"type":{"name":"ForwardedRef"}}}},"SegmentedControl":{"props":{"autoContrast":{"description":"Determines whether text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color, changes color of indicator, by default color is based on current color scheme","name":"color","required":false,"type":{"name":"MantineColor"}},"data":{"description":"Data based on which controls are rendered","name":"data","required":true,"type":{"name":"(string | SegmentedControlItem)[]"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string"}},"disabled":{"description":"Determines whether the component is disabled","name":"disabled","required":false,"type":{"name":"boolean"}},"fullWidth":{"description":"Determines whether the component should take 100% width of its parent, false by default","name":"fullWidth","required":false,"type":{"name":"boolean"}},"name":{"description":"Name of the radio group, by default random name is generated","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"orientation":{"description":"Determines in which orientation component id displayed, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the value can be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls font-size, padding and height properties, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"transitionDuration":{"description":"Indicator transition-duration in ms, set 0 to turn off transitions, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"transitionTimingFunction":{"description":"Indicator transition-timing-function property, ease by default","name":"transitionTimingFunction","required":false,"type":{"name":"string"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withItemsBorders":{"description":"Determines whether there should be borders between items, true by default","name":"withItemsBorders","required":false,"type":{"name":"boolean"}}}},"Select":{"props":{"allowDeselect":{"description":"Determines whether it should be possible to deselect value by clicking on the selected option, true by default","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"checkIconPosition":{"description":"Position of the check icon relative to the option label, \'left\' by default","name":"checkIconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"(__CloseButtonProps & ElementProps<\\"button\\">)"}},"clearable":{"description":"Determines whether the clear button should be displayed in the right section when the component has value, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data used to generate options","name":"data","required":false,"type":{"name":"ComboboxData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultSearchValue":{"description":"Default search value","name":"defaultSearchValue","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"string | null"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"nothingFoundMessage":{"description":"Message displayed when no option matched current search query, only applicable when searchable prop is set","name":"nothingFoundMessage","required":false,"type":{"name":"React.ReactNode"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string | null, option: ComboboxItem) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"onSearchChange":{"description":"Called when search changes","name":"onSearchChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"searchValue":{"description":"Controlled search value","name":"searchValue","required":false,"type":{"name":"string"}},"searchable":{"description":"Determines whether the select should be searchable, false by default","name":"searchable","required":false,"type":{"name":"boolean"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string | null"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCheckIcon":{"description":"Determines whether check icon should be displayed near the selected option label, true by default","name":"withCheckIcon","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"SimpleGrid":{"props":{"cols":{"description":"Number of columns, 1 by default","name":"cols","required":false,"type":{"name":"StyleProp"}},"spacing":{"description":"Spacing between columns, \'md\' by default","name":"spacing","required":false,"type":{"name":"StyleProp"}},"verticalSpacing":{"description":"Spacing between rows, \'md\' by default","name":"verticalSpacing","required":false,"type":{"name":"StyleProp"}}}},"Skeleton":{"props":{"animate":{"description":"Determines whether Skeleton should be animated, true by default","name":"animate","required":false,"type":{"name":"boolean"}},"circle":{"description":"If set, Skeleton width and border-radius are equal to its height, false by default","name":"circle","required":false,"type":{"name":"boolean"}},"height":{"description":"Skeleton height, numbers are converted to rem, auto by default","name":"height","required":false,"type":{"name":"Height"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"visible":{"description":"Determines whether Skeleton overlay should be displayed, true by default","name":"visible","required":false,"type":{"name":"boolean"}},"width":{"description":"Skeleton width, numbers are converted to rem, 100% by default, ignored when circle prop is set","name":"width","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}}}},"Space":{"description":"","props":{}},"Spoiler":{"props":{"controlRef":{"description":"Get ref of spoiler toggle button","name":"controlRef","required":false,"type":{"name":"ForwardedRef"}},"hideLabel":{"description":"Label for close spoiler action","name":"hideLabel","required":true,"type":{"name":"React.ReactNode"}},"initialState":{"description":"Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state is updated on mount","name":"initialState","required":false,"type":{"name":"boolean"}},"maxHeight":{"description":"Maximum height of the visible content, when this point is reached spoiler appears, 100 by default","name":"maxHeight","required":false,"type":{"name":"number"}},"showLabel":{"description":"Label for open spoiler action","name":"showLabel","required":true,"type":{"name":"React.ReactNode"}},"transitionDuration":{"description":"Spoiler reveal transition duration in ms, set 0 or null to turn off animation, 200 by default","name":"transitionDuration","required":false,"type":{"name":"number"}}}},"Stack":{"props":{"align":{"description":"Controls align-items CSS property, \'stretch\' by default","name":"align","required":false,"type":{"name":"AlignItems"}},"gap":{"description":"Key of theme.spacing or any valid CSS value to set gap property, numbers are converted to rem, \'md\' by default","name":"gap","required":false,"type":{"name":"MantineSpacing"}},"justify":{"description":"Controls justify-content CSS property, \'flex-start\' by default","name":"justify","required":false,"type":{"name":"JustifyContent"}}}},"Stepper":{"props":{"active":{"description":"Index of the active step","name":"active","required":true,"type":{"name":"number"}},"allowNextStepsSelect":{"description":"Determines whether next steps can be selected, true by default *","name":"allowNextStepsSelect","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether icon color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":" components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls colors of active and progress steps, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"completedIcon":{"description":"Step icon displayed when step is completed, check icon by default","name":"completedIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"contentPadding":{"description":"Key of theme.spacing or any valid CSS value to set padding-top of the content","name":"contentPadding","required":false,"type":{"name":"MantineSpacing"}},"icon":{"description":"Step icon, default value is step index + 1","name":"icon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"iconPosition":{"description":"Icon position relative to the step body, \'left\' by default","name":"iconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"iconSize":{"description":"Controls size of the step icon, by default icon size is inferred from size prop","name":"iconSize","required":false,"type":{"name":"string | number"}},"onStepClick":{"description":"Called when step is clicked","name":"onStepClick","required":false,"type":{"name":"((stepIndex: number) => void)"}},"orientation":{"description":"Stepper orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"progressIcon":{"description":"Step icon displayed when step is in progress, default value is step index + 1","name":"progressIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set steps border-radius, \\"xl\\" by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls size of various Stepper elements","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"wrap":{"description":"Determines whether steps should wrap to the next line if no space is available, true by default","name":"wrap","required":false,"type":{"name":"boolean"}}}},"Switch":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color to set input color in checked state, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"description":{"description":"Description displayed below the label","name":"description","required":false,"type":{"name":"React.ReactNode"}},"error":{"description":"Error displayed below the label","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Id used to bind input and label, if not passed, unique id will be generated instead","name":"id","required":false,"type":{"name":"string"}},"label":{"description":"Content of the label associated with the radio","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelPosition":{"description":"Position of the label relative to the input, \'right\' by default","name":"labelPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"offLabel":{"description":"Inner label when the Switch is in unchecked state","name":"offLabel","required":false,"type":{"name":"React.ReactNode"}},"onLabel":{"description":"Inner label when the Switch is in checked state","name":"onLabel","required":false,"type":{"name":"React.ReactNode"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, \\"xl\\" by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rootRef":{"description":"Assigns ref of the root element","name":"rootRef","required":false,"type":{"name":"ForwardedRef"}},"size":{"description":"Controls size of all elements","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"thumbIcon":{"description":"Icon inside the thumb of the switch","name":"thumbIcon","required":false,"type":{"name":"React.ReactNode"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Table":{"props":{"borderColor":{"description":"Color of table borders, key of theme.colors or any valid CSS color","name":"borderColor","required":false,"type":{"name":"MantineColor"}},"captionSide":{"description":"Determines on which side Table.Caption is displayed, bottom by default","name":"captionSide","required":false,"type":{"name":"\\"bottom\\" | \\"top\\"","raw":"\\"bottom\\" | \\"top\\" | undefined","value":[{"value":"undefined"},{"value":"\\"bottom\\""},{"value":"\\"top\\""}]}},"data":{"description":"Data that should be used to generate table, ignored if children prop is set","name":"data","required":false,"type":{"name":"TableData"}},"highlightOnHover":{"description":"Determines whether table rows background should change to highlightOnHoverColor when hovered, false by default","name":"highlightOnHover","required":false,"type":{"name":"boolean"}},"highlightOnHoverColor":{"description":"Background color of table rows when hovered, key of theme.colors or any valid CSS color","name":"highlightOnHoverColor","required":false,"type":{"name":"MantineColor"}},"horizontalSpacing":{"description":"Horizontal cells spacing, key of theme.spacing or any valid CSS value for padding, numbers are converted to rem, default value is xs","name":"horizontalSpacing","required":false,"type":{"name":"MantineSpacing"}},"layout":{"description":"Value of table-layout style, auto by default","name":"layout","required":false,"type":{"name":"TableLayout","raw":"TableLayout | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"auto\\""},{"value":"\\"fixed\\""}]}},"stickyHeader":{"description":"Determines whether Table.Thead should be sticky, false by default","name":"stickyHeader","required":false,"type":{"name":"boolean"}},"stickyHeaderOffset":{"description":"Offset from top at which Table.Thead should become sticky, 0 by default","name":"stickyHeaderOffset","required":false,"type":{"name":"string | number"}},"striped":{"description":"Determines whether every odd/even row background should be changed to strippedColor, if set to true, then odd value will be used, false by default","name":"striped","required":false,"type":{"name":"boolean | \\"odd\\" | \\"even\\""}},"stripedColor":{"description":"Background color of striped rows, key of theme.colors or any valid CSS color","name":"stripedColor","required":false,"type":{"name":"MantineColor"}},"verticalSpacing":{"description":"Vertical cells spacing, key of theme.spacing or any valid CSS value for padding, numbers are converted to rem, default value is xs","name":"verticalSpacing","required":false,"type":{"name":"MantineSpacing"}},"withColumnBorders":{"description":"Determines whether the table should have borders between columns, false by default","name":"withColumnBorders","required":false,"type":{"name":"boolean"}},"withRowBorders":{"description":"Determines whether the table should have borders between rows, true by default","name":"withRowBorders","required":false,"type":{"name":"boolean"}},"withTableBorder":{"description":"Determines whether the table should have outer border, false by default","name":"withTableBorder","required":false,"type":{"name":"boolean"}}}},"Tabs":{"props":{"activateTabWithKeyboard":{"description":"Determines whether tab should be activated with arrow key press, true by default","name":"activateTabWithKeyboard","required":false,"type":{"name":"boolean"}},"allowTabDeactivation":{"description":"Determines whether tab can be deactivated, false by default","name":"allowTabDeactivation","required":false,"type":{"name":"boolean"}},"autoContrast":{"description":"Determines whether active item text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast. Only applicable when variant=\\"pills\\"","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Tabs content","name":"children","required":true,"type":{"name":"React.ReactNode"}},"color":{"description":"Changes colors of Tabs.Tab components when variant is pills or default, does nothing for other variants","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string | null"}},"id":{"description":"Base id, used to generate ids to connect labels with controls, generated randomly by default","name":"id","required":false,"type":{"name":"string"}},"inverted":{"description":"Determines whether tabs should have inverted styles, false by default","name":"inverted","required":false,"type":{"name":"boolean"}},"keepMounted":{"description":"If set to false, Tabs.Panel content will be unmounted when the associated tab is not active, true by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"loop":{"description":"Determines whether arrow key presses should loop though items (first to last and last to first), true by default","name":"loop","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string | null) => void)"}},"orientation":{"description":"Tabs orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"placement":{"description":"Tabs.List placement relative to Tabs.Panel, applicable only when orientation=\\"vertical\\", \'left\' by default","name":"placement","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"string | null"}}}},"TagsInput":{"props":{"allowDuplicates":{"description":"Determines whether duplicate tags are allowed, false by default","name":"allowDuplicates","required":false,"type":{"name":"boolean"}},"clearButtonProps":{"description":"Props passed down to the clear button","name":"clearButtonProps","required":false,"type":{"name":"(__CloseButtonProps & ElementProps<\\"button\\">)"}},"clearable":{"description":"Determines whether the clear button should be displayed in the right section when the component has value, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"comboboxProps":{"description":"Props passed down to Combobox component","name":"comboboxProps","required":false,"type":{"name":"ComboboxProps"}},"data":{"description":"Data displayed in the dropdown","name":"data","required":false,"type":{"name":"ComboboxStringData"}},"defaultDropdownOpened":{"description":"Uncontrolled dropdown initial opened state","name":"defaultDropdownOpened","required":false,"type":{"name":"boolean"}},"defaultSearchValue":{"description":"Default search value","name":"defaultSearchValue","required":false,"type":{"name":"string"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownOpened":{"description":"Controlled dropdown opened state","name":"dropdownOpened","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"filter":{"description":"Function based on which items are filtered and sorted","name":"filter","required":false,"type":{"name":"OptionsFilter"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"hiddenInputValuesDivider":{"description":"Divider used to separate values in the hidden input value attribute, \',\' by default","name":"hiddenInputValuesDivider","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"limit":{"description":"Maximum number of options displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"maxDropdownHeight":{"description":"max-height of the dropdown, only applicable when withScrollArea prop is true, 250 by default","name":"maxDropdownHeight","required":false,"type":{"name":"string | number"}},"maxTags":{"description":"Maximum number of tags, Infinity by default","name":"maxTags","required":false,"type":{"name":"number"}},"onChange":{"description":"Called whe value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"onDropdownClose":{"description":"Called when dropdown closes","name":"onDropdownClose","required":false,"type":{"name":"(() => void)"}},"onDropdownOpen":{"description":"Called when dropdown opens","name":"onDropdownOpen","required":false,"type":{"name":"(() => void)"}},"onDuplicate":{"description":"Called when user tries to submit a duplicated tag","name":"onDuplicate","required":false,"type":{"name":"((value: string) => void)"}},"onOptionSubmit":{"description":"Called when option is submitted from dropdown with mouse click or Enter key","name":"onOptionSubmit","required":false,"type":{"name":"((value: string) => void)"}},"onSearchChange":{"description":"Called when search changes","name":"onSearchChange","required":false,"type":{"name":"((value: string) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"searchValue":{"description":"Controlled search value","name":"searchValue","required":false,"type":{"name":"string"}},"selectFirstOptionOnChange":{"description":"Determines whether the first option should be selected when value changes, false by default","name":"selectFirstOptionOnChange","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"splitChars":{"description":"Characters that should trigger tags split, [\',\'] by default","name":"splitChars","required":false,"type":{"name":"string[]"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withScrollArea":{"description":"Determines whether the options should be wrapped with ScrollArea.AutoSize, true by default","name":"withScrollArea","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Text":{"props":{"color":{"description":"@deprecated Use c prop instead","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient configuration, ignored when variant is not gradient, theme.defaultGradient by default","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"inherit":{"description":"Determines whether font properties should be inherited from the parent, false by default","name":"inherit","required":false,"type":{"name":"boolean"}},"inline":{"description":"Sets line-height to 1 for centering, false by default","name":"inline","required":false,"type":{"name":"boolean"}},"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"size":{"description":"Controls font-size and line-height, \'md\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"span":{"description":"Shorthand for component=\\"span\\", false by default, default root element is p","name":"span","required":false,"type":{"name":"boolean"}},"truncate":{"description":"Side on which Text must be truncated, if true, text is truncated from the start","name":"truncate","required":false,"type":{"name":"TextTruncate"}}}},"TextInput":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Textarea":{"props":{"autosize":{"description":"Determines whether the textarea height should grow with its content, false by default","name":"autosize","required":false,"type":{"name":"boolean"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"maxRows":{"description":"Maximum rows for autosize textarea to grow, ignored if autosize prop is not set","name":"maxRows","required":false,"type":{"name":"number"}},"minRows":{"description":"Minimum rows of autosize textarea, ignored if autosize prop is not set","name":"minRows","required":false,"type":{"name":"number"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"resize":{"description":"Controls resize CSS property, \'none\' by default","name":"resize","required":false,"type":{"name":"Resize","raw":"Resize | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"block\\""},{"value":"\\"inline\\""},{"value":"\\"both\\""},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"ThemeIcon":{"props":{"autoContrast":{"description":"Determines whether button text color with filled variant should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"children":{"description":"Icon displayed inside the component","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color. Default value is theme.primaryColor.","name":"color","required":false,"type":{"name":"MantineColor"}},"gradient":{"description":"Gradient data used when variant=\\"gradient\\", default value is theme.defaultGradient","name":"gradient","required":false,"type":{"name":"MantineGradient"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius. Numbers are converted to rem. theme.defaultRadius by default.","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls width and height of the button. Numbers are converted to rem. \'md\' by default.","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}}}},"Timeline":{"props":{"active":{"description":"Index of active element","name":"active","required":false,"type":{"name":"number"}},"align":{"description":"Controls how the content is positioned relative to the bullet, \'left\' by default","name":"align","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"autoContrast":{"description":"Determines whether icon color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"bulletSize":{"description":"Controls size of the bullet, 20 by default","name":"bulletSize","required":false,"type":{"name":"string | number"}},"children":{"description":"Timeline.Item components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color to control active item colors, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"lineWidth":{"description":"Control width of the line","name":"lineWidth","required":false,"type":{"name":"string | number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"reverseActive":{"description":"Determines whether the active items direction should be reversed without reversing items order, false by default","name":"reverseActive","required":false,"type":{"name":"boolean"}}}},"Title":{"props":{"lineClamp":{"description":"Number of lines after which Text will be truncated","name":"lineClamp","required":false,"type":{"name":"number"}},"order":{"description":"Determines which tag will be used (h1-h6), controls font-size style if size prop is not set, 1 by default","name":"order","required":false,"type":{"name":"TitleOrder","raw":"TitleOrder | undefined","value":[{"value":"undefined"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"size":{"description":"Changes title size, if not set, then size is controlled by order prop","name":"size","required":false,"type":{"name":"TitleSize"}},"textWrap":{"description":"Controls text-wrap property, \'wrap\' by default","name":"textWrap","required":false,"type":{"name":"\\"wrap\\" | \\"nowrap\\" | \\"balance\\" | \\"pretty\\" | \\"stable\\"","raw":"\\"wrap\\" | \\"nowrap\\" | \\"balance\\" | \\"pretty\\" | \\"stable\\" | undefined","value":[{"value":"undefined"},{"value":"\\"wrap\\""},{"value":"\\"nowrap\\""},{"value":"\\"balance\\""},{"value":"\\"pretty\\""},{"value":"\\"stable\\""}]}}}},"Tooltip":{"props":{"arrowOffset":{"description":"Arrow offset in px, 5 by default","name":"arrowOffset","required":false,"type":{"name":"number"}},"arrowPosition":{"description":"Arrow position relative to the tooltip, side by default","name":"arrowPosition","required":false,"type":{"name":"ArrowPosition","raw":"ArrowPosition | undefined","value":[{"value":"undefined"},{"value":"\\"center\\""},{"value":"\\"side\\""}]}},"arrowRadius":{"description":"Arrow border-radius in px, 0 by default","name":"arrowRadius","required":false,"type":{"name":"number"}},"arrowSize":{"description":"Arrow size in px, 4 by default","name":"arrowSize","required":false,"type":{"name":"number"}},"children":{"description":"Target element, must support ref prop and ...others","name":"children","required":true,"type":{"name":"React.ReactNode"}},"closeDelay":{"description":"Close delay in ms, 0 by default","name":"closeDelay","required":false,"type":{"name":"number"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls tooltip background, by default set based on current color scheme","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"If set, tooltip element will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"events":{"description":"Determines which events will be used to show tooltip, { hover: true, focus: false, touch: false } by default","name":"events","required":false,"type":{"name":"{ hover: boolean; focus: boolean; touch: boolean; }"}},"inline":{"description":"Must be set if the tooltip target is an inline element","name":"inline","required":false,"type":{"name":"boolean"}},"keepMounted":{"description":"If set, the tooltip will not be unmounted from the DOM when it is hidden, display: none styles will be applied instead","name":"keepMounted","required":false,"type":{"name":"boolean"}},"label":{"description":"Tooltip content","name":"label","required":true,"type":{"name":"React.ReactNode"}},"multiline":{"description":"Determines whether content should be wrapped on to the next line, false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"offset":{"description":"Space between target element and tooltip in px, 5 by default","name":"offset","required":false,"type":{"name":"number | FloatingAxesOffsets"}},"onPositionChange":{"description":"Called when tooltip position changes","name":"onPositionChange","required":false,"type":{"name":"((position: FloatingPosition) => void)"}},"openDelay":{"description":"Open delay in ms","name":"openDelay","required":false,"type":{"name":"number"}},"opened":{"description":"Controlled opened state","name":"opened","required":false,"type":{"name":"boolean"}},"portalProps":{"description":"Props to pass down to the portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Tooltip position relative to target element (Tooltip component) or mouse (Tooltip.Floating component)","name":"position","required":false,"type":{"name":"FloatingPosition","raw":"FloatingPosition | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""},{"value":"\\"bottom\\""},{"value":"\\"top\\""},{"value":"\\"left-end\\""},{"value":"\\"left-start\\""},{"value":"\\"right-end\\""},{"value":"\\"right-start\\""},{"value":"\\"bottom-end\\""},{"value":"\\"bottom-start\\""},{"value":"\\"top-end\\""},{"value":"\\"top-start\\""}]}},"positionDependencies":{"description":"useEffect dependencies to force update tooltip position","name":"positionDependencies","required":false,"type":{"name":"any[]"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"refProp":{"description":"Key of the prop that can be used to access element ref, ref by default","name":"refProp","required":false,"type":{"name":"string"}},"transitionProps":{"description":"Props passed down to the Transition component that used to animate tooltip presence, use to configure duration and animation type, { duration: 100, transition: \'fade\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"withArrow":{"description":"Determines whether the tooltip should have an arrow, false by default","name":"withArrow","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether tooltip should be rendered within Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Tooltip z-index, 300 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"Transition":{"props":{"children":{"description":"Render function with transition styles argument","name":"children","required":true,"type":{"name":"(styles: CSSProperties) => Element"}},"duration":{"description":"Transition duration in ms, 250 by default","name":"duration","required":false,"type":{"name":"number"}},"exitDuration":{"description":"Exit transition duration in ms, 250 by default","name":"exitDuration","required":false,"type":{"name":"number"}},"keepMounted":{"description":"If set element will not be unmounted from the DOM when it is hidden, display: none styles will be applied instead","name":"keepMounted","required":false,"type":{"name":"boolean"}},"mounted":{"description":"Determines whether component should be mounted to the DOM","name":"mounted","required":true,"type":{"name":"boolean"}},"onEnter":{"description":"Called when enter transition starts","name":"onEnter","required":false,"type":{"name":"(() => void)"}},"onEntered":{"description":"Called when enter transition ends","name":"onEntered","required":false,"type":{"name":"(() => void)"}},"onExit":{"description":"Called when exit transition starts","name":"onExit","required":false,"type":{"name":"(() => void)"}},"onExited":{"description":"Called when exit transition ends","name":"onExited","required":false,"type":{"name":"(() => void)"}},"timingFunction":{"description":"Transition timing function, theme.transitionTimingFunction by default","name":"timingFunction","required":false,"type":{"name":"string"}},"transition":{"description":"Transition name or object","name":"transition","required":false,"type":{"name":"MantineTransition"}}}},"TypographyStylesProvider":{"description":"","props":{}},"UnstyledButton":{"props":{"size":{"description":"Size passed from parent component, sets data-size if value is not number like","name":"size","required":false,"type":{"name":"string | number"}}}},"VisuallyHidden":{"description":"","props":{}},"Calendar":{"props":{"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"minLevel":{"description":"Min level that user can go down to (decade, year, month), defaults to month","name":"minLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthMouseEnter":{"description":"Called when mouse enters month control","name":"onMonthMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearMouseEnter":{"description":"Called when mouse enters year control","name":"onYearMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"CalendarHeader":{"props":{"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"label":{"description":"Label displayed between next and previous buttons","name":"label","required":true,"type":{"name":"React.ReactNode"}},"levelControlAriaLabel":{"description":"aria-label for level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}}}},"DateInput":{"props":{"allowDeselect":{"description":"Determines whether value can be deselected when the user clicks on the selected date in the calendar (only when clearable prop is set), defaults to true if clearable prop is set, false otherwise","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props added to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"dateParser":{"description":"Parses user input to convert it to Date object","name":"dateParser","required":false,"type":{"name":"((value: string) => Date | null)"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"fixOnBlur":{"description":"Determines whether input value should be reverted to last known valid value on blur, true by default","name":"fixOnBlur","required":false,"type":{"name":"boolean"}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DateValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props added to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"preserveTime":{"description":"Determines whether time (hours, minutes, seconds and milliseconds) should be preserved when new date is picked, true by default","name":"preserveTime","required":false,"type":{"name":"boolean"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue"}},"valueFormat":{"description":"Dayjs format to display input value, \\"MMMM D, YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DatePicker":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthMouseEnter":{"description":"Called when mouse enters month control","name":"onMonthMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearMouseEnter":{"description":"Called when mouse enters year control","name":"onYearMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DatePickerInput":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year, month), defaults to decade","name":"maxLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthMouseEnter":{"description":"Called when mouse enters month control","name":"onMonthMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearMouseEnter":{"description":"Called when mouse enters year control","name":"onYearMouseEnter","required":false,"type":{"name":"((event: MouseEvent, date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"valueFormat":{"description":"Dayjs format to display input value, \\"MMMM D, YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DateTimePicker":{"props":{"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"CalendarLevel","raw":"CalendarLevel | undefined","value":[{"value":"undefined"},{"value":"\\"month\\""},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DateValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: CalendarLevel) => void)"}},"onMonthSelect":{"description":"Called when user clicks month on year level","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextMonth":{"description":"Called when next month button is clicked","name":"onNextMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousMonth":{"description":"Called when previous month button is clicked","name":"onPreviousMonth","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"onYearSelect":{"description":"Called when user clicks year on decade level","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"submitButtonProps":{"description":"Props passed down to the submit button","name":"submitButtonProps","required":false,"type":{"name":"(ActionIconProps & Omit, HTMLButtonElement>, \\"ref\\">)"}},"timeInputProps":{"description":"TimeInput component props","name":"timeInputProps","required":false,"type":{"name":"(TimeInputProps & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject | null; }) | undefined"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"DateValue"}},"valueFormat":{"description":"Dayjs format to display input value, \\"DD/MM/YYYY HH:mm\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withSeconds":{"description":"Determines whether seconds input should be rendered","name":"withSeconds","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DatesProvider":{"props":{"settings":{"description":"","name":"settings","required":true,"type":{"name":"Partial"}}}},"Day":{"props":{"date":{"description":"Date that should be displayed","name":"date","required":true,"type":{"name":"Date"}},"firstInRange":{"description":"Determines whether the day is first in range selection, false by default","name":"firstInRange","required":false,"type":{"name":"boolean"}},"hidden":{"description":"Determines whether the day should not de displayed, false by default","name":"hidden","required":false,"type":{"name":"boolean"}},"inRange":{"description":"Determines whether the day is selected in range, false by default","name":"inRange","required":false,"type":{"name":"boolean"}},"lastInRange":{"description":"Determines whether the day is last in range selection, false by default","name":"lastInRange","required":false,"type":{"name":"boolean"}},"outside":{"description":"Determines whether the day is outside of the current month, false by default","name":"outside","required":false,"type":{"name":"boolean"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"selected":{"description":"Determines whether the day is selected, false by default","name":"selected","required":false,"type":{"name":"boolean"}},"size":{"description":"Control width and height of the day, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines which element should be used as root, \'button\' by default, \'div\' if static prop is set","name":"static","required":false,"type":{"name":"boolean"}},"weekend":{"description":"Determines whether the day should be considered to be a weekend, false by default","name":"weekend","required":false,"type":{"name":"boolean"}}}},"DecadeLevel":{"props":{"decade":{"description":"Decade that is currently displayed","name":"decade","required":true,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"levelControlAriaLabel":{"description":"aria-label for change level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"DecadeLevelGroup":{"props":{"decade":{"description":"Decade that is currently displayed","name":"decade","required":true,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"levelControlAriaLabel":{"description":"Function that returns level control aria-label based on year date","name":"levelControlAriaLabel","required":false,"type":{"name":"string | ((decade: Date) => string)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"HiddenDatesInput":{"props":{"form":{"description":"","name":"form","required":true,"type":{"name":"string"}},"name":{"description":"","name":"name","required":true,"type":{"name":"string"}},"type":{"description":"","name":"type","required":true,"type":{"name":"DatePickerType","raw":"DatePickerType","value":[{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"","name":"value","required":true,"type":{"name":"HiddenDatesInputValue"}}}},"LevelsGroup":{"props":{"size":{"description":"","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}}}},"Month":{"props":{"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"month":{"description":"Month to display","name":"month","required":true,"type":{"name":"Date"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}}}},"MonthLevel":{"props":{"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"aria-label for change level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"month":{"description":"Month that is currently displayed","name":"month","required":true,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}}}},"MonthLevelGroup":{"props":{"excludeDate":{"description":"Callback function to determine whether the day should be disabled","name":"excludeDate","required":false,"type":{"name":"((date: Date) => boolean)"}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"getDayAriaLabel":{"description":"Assigns aria-label to days based on date","name":"getDayAriaLabel","required":false,"type":{"name":"((date: Date) => string)"}},"getDayProps":{"description":"Adds props to Day component based on date","name":"getDayProps","required":false,"type":{"name":"((date: Date) => Omit, \\"classNames\\" | \\"styles\\" | \\"vars\\">)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"hideOutsideDates":{"description":"Determines whether outside dates should be hidden, defaults to false","name":"hideOutsideDates","required":false,"type":{"name":"boolean"}},"hideWeekdays":{"description":"Determines whether weekdays row should be hidden, defaults to false","name":"hideWeekdays","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"Function that returns level control aria-label based on month date","name":"levelControlAriaLabel","required":false,"type":{"name":"string | ((month: Date) => string)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"month":{"description":"Month that is currently displayed","name":"month","required":true,"type":{"name":"Date"}},"monthLabelFormat":{"description":"dayjs label format to display month label or a function that returns month label based on month value, defaults to \\"MMMM YYYY\\"","name":"monthLabelFormat","required":false,"type":{"name":"string | ((month: Date) => ReactNode)"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"renderDay":{"description":"Controls day value rendering","name":"renderDay","required":false,"type":{"name":"((date: Date) => ReactNode)"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"static":{"description":"Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way","name":"static","required":false,"type":{"name":"boolean"}},"weekdayFormat":{"description":"dayjs format for weekdays names, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}},"weekendDays":{"description":"Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider","name":"weekendDays","required":false,"type":{"name":"DayOfWeek[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}}}},"MonthPicker":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year), defaults to decade","name":"maxLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: MonthPickerLevel) => void)"}},"onMonthSelect":{"description":"Called when month is selected","name":"onMonthSelect","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"MonthPickerInput":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultLevel":{"description":"Initial level displayed to the user (decade, year, month), used for uncontrolled component","name":"defaultLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"level":{"description":"Current level displayed to the user (decade, year, month), used for controlled component","name":"level","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"maxLevel":{"description":"Max level that user can go up to (decade, year), defaults to decade","name":"maxLevel","required":false,"type":{"name":"MonthPickerLevel","raw":"MonthPickerLevel | undefined","value":[{"value":"undefined"},{"value":"\\"year\\""},{"value":"\\"decade\\""}]}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onLevelChange":{"description":"Called when level changes","name":"onLevelChange","required":false,"type":{"name":"((level: MonthPickerLevel) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onNextYear":{"description":"Called when next year button is clicked","name":"onNextYear","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousYear":{"description":"Called when previous year button is clicked","name":"onPreviousYear","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"valueFormat":{"description":"Dayjs format to display input value, \\"MMMM YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"MonthsList":{"props":{"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"year":{"description":"Year for which months list should be displayed","name":"year","required":true,"type":{"name":"Date"}}}},"PickerControl":{"props":{"children":{"description":"Control children","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Determines whether control should be disabled","name":"disabled","required":false,"type":{"name":"boolean"}},"firstInRange":{"description":"Determines whether control is first in range selection","name":"firstInRange","required":false,"type":{"name":"boolean"}},"inRange":{"description":"Determines whether control is selected in range","name":"inRange","required":false,"type":{"name":"boolean"}},"lastInRange":{"description":"Determines whether control is last in range selection","name":"lastInRange","required":false,"type":{"name":"boolean"}},"selected":{"description":"Determines whether control should have selected styles","name":"selected","required":false,"type":{"name":"boolean"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}}}},"PickerInputBase":{"props":{"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownHandlers":{"description":"","name":"dropdownHandlers","required":true,"type":{"name":"{ readonly open: () => void; readonly close: () => void; readonly toggle: () => void; }"}},"dropdownOpened":{"description":"","name":"dropdownOpened","required":true,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"formattedValue":{"description":"","name":"formattedValue","required":true,"type":{"name":"string | null"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"onClear":{"description":"","name":"onClear","required":true,"type":{"name":"() => void"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"shouldClear":{"description":"","name":"shouldClear","required":true,"type":{"name":"boolean"}},"size":{"description":"","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"","name":"type","required":true,"type":{"name":"DatePickerType","raw":"DatePickerType","value":[{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"","name":"value","required":true,"type":{"name":"HiddenDatesInputValue"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"TimeInput":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"withSeconds":{"description":"Determines whether seconds input should be rendered","name":"withSeconds","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"WeekdaysRow":{"props":{"cellComponent":{"description":"Choose cell type that will be used to render weekdays, defaults to th","name":"cellComponent","required":false,"type":{"name":"\\"td\\" | \\"th\\"","raw":"\\"td\\" | \\"th\\" | undefined","value":[{"value":"undefined"},{"value":"\\"td\\""},{"value":"\\"th\\""}]}},"firstDayOfWeek":{"description":"number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday","name":"firstDayOfWeek","required":false,"type":{"name":"DayOfWeek","raw":"DayOfWeek | undefined","value":[{"value":"undefined"},{"value":"0"},{"value":"2"},{"value":"1"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"}]}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"size":{"description":"Controls size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"weekdayFormat":{"description":"dayjs format to get weekday name, defaults to \\"dd\\"","name":"weekdayFormat","required":false,"type":{"name":"string | ((date: Date) => ReactNode)"}}}},"YearLevel":{"props":{"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"aria-label for change level control","name":"levelControlAriaLabel","required":false,"type":{"name":"string"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withNext":{"description":"Determines whether next control should be rendered, defaults to true","name":"withNext","required":false,"type":{"name":"boolean"}},"withPrevious":{"description":"Determines whether previous control should be rendered, defaults to true","name":"withPrevious","required":false,"type":{"name":"boolean"}},"year":{"description":"Year that is currently displayed","name":"year","required":true,"type":{"name":"Date"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}}}},"YearLevelGroup":{"props":{"getMonthControlProps":{"description":"Adds props to month picker control based on date","name":"getMonthControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"hasNextLevel":{"description":"Determines whether next level button should be enabled, defaults to true","name":"hasNextLevel","required":false,"type":{"name":"boolean"}},"levelControlAriaLabel":{"description":"Function that returns level control aria-label based on year date","name":"levelControlAriaLabel","required":false,"type":{"name":"string | ((year: Date) => string)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"monthsListFormat":{"description":"dayjs format for months list","name":"monthsListFormat","required":false,"type":{"name":"string"}},"nextDisabled":{"description":"Determines whether next control should be disabled, defaults to true","name":"nextDisabled","required":false,"type":{"name":"boolean"}},"nextIcon":{"description":"Change next icon","name":"nextIcon","required":false,"type":{"name":"React.ReactNode"}},"nextLabel":{"description":"aria-label for next button","name":"nextLabel","required":false,"type":{"name":"string"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onLevelClick":{"description":"Called when level button is clicked","name":"onLevelClick","required":false,"type":{"name":"(() => void)"}},"onNext":{"description":"Called when next button is clicked","name":"onNext","required":false,"type":{"name":"(() => void)"}},"onPrevious":{"description":"Called when previous button is clicked","name":"onPrevious","required":false,"type":{"name":"(() => void)"}},"previousDisabled":{"description":"Determines whether previous control should be disabled, defaults to true","name":"previousDisabled","required":false,"type":{"name":"boolean"}},"previousIcon":{"description":"Change previous icon","name":"previousIcon","required":false,"type":{"name":"React.ReactNode"}},"previousLabel":{"description":"aria-label for previous button","name":"previousLabel","required":false,"type":{"name":"string"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"year":{"description":"Year that is currently displayed","name":"year","required":true,"type":{"name":"Date"}},"yearLabelFormat":{"description":"dayjs label format to display year label or a function that returns year label based on year value, defaults to \\"YYYY\\"","name":"yearLabelFormat","required":false,"type":{"name":"string | ((year: Date) => ReactNode)"}}}},"YearPicker":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onYearSelect":{"description":"Called when year is selected","name":"onYearSelect","required":false,"type":{"name":"((date: Date) => void)"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"YearPickerInput":{"props":{"allowDeselect":{"description":"Determines whether user can deselect the date by clicking on selected item, applicable only when type=\\"default\\"","name":"allowDeselect","required":false,"type":{"name":"boolean"}},"allowSingleDateInRange":{"description":"Determines whether single year can be selected as range, applicable only when type=\\"range\\"","name":"allowSingleDateInRange","required":false,"type":{"name":"boolean"}},"ariaLabels":{"description":"aria-label attributes for controls on different levels","name":"ariaLabels","required":false,"type":{"name":"CalendarAriaLabels"}},"clearButtonProps":{"description":"Props passed down to clear button","name":"clearButtonProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"clearable":{"description":"Determines whether input value can be cleared, adds clear button to right section, false by default","name":"clearable","required":false,"type":{"name":"boolean"}},"closeOnChange":{"description":"Determines whether dropdown should be closed when date is selected, not applicable when type=\\"multiple\\", true by default","name":"closeOnChange","required":false,"type":{"name":"boolean"}},"columnsToScroll":{"description":"Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns","name":"columnsToScroll","required":false,"type":{"name":"number"}},"date":{"description":"Date that is displayed, used for controlled component","name":"date","required":false,"type":{"name":"Date"}},"decadeLabelFormat":{"description":"dayjs label format to display decade label or a function that returns decade label based on date value, defaults to \\"YYYY\\"","name":"decadeLabelFormat","required":false,"type":{"name":"string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)"}},"defaultDate":{"description":"Initial date that is displayed, used for uncontrolled component","name":"defaultDate","required":false,"type":{"name":"Date"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"dropdownType":{"description":"Type of dropdown, defaults to popover","name":"dropdownType","required":false,"type":{"name":"\\"popover\\" | \\"modal\\"","raw":"\\"popover\\" | \\"modal\\" | undefined","value":[{"value":"undefined"},{"value":"\\"popover\\""},{"value":"\\"modal\\""}]}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"labelSeparator":{"description":"Separator between range value","name":"labelSeparator","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"modalProps":{"description":"Props passed down to Modal component","name":"modalProps","required":false,"type":{"name":"Partial>"}},"numberOfColumns":{"description":"Number of columns to render next to each other","name":"numberOfColumns","required":false,"type":{"name":"number"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: DatePickerValue) => void)"}},"onDateChange":{"description":"Called when date changes","name":"onDateChange","required":false,"type":{"name":"((date: Date) => void)"}},"onNextDecade":{"description":"Called when next decade button is clicked","name":"onNextDecade","required":false,"type":{"name":"((date: Date) => void)"}},"onPreviousDecade":{"description":"Called when previous decade button is clicked","name":"onPreviousDecade","required":false,"type":{"name":"((date: Date) => void)"}},"placeholder":{"description":"Input placeholder","name":"placeholder","required":false,"type":{"name":"string"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"popoverProps":{"description":"Props passed down to Popover component","name":"popoverProps","required":false,"type":{"name":"Partial>"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"readOnly":{"description":"Determines whether the user can modify the value","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"sortDates":{"description":"Determines whether dates value should be sorted before onChange call, only applicable when type=\\"multiple\\", true by default","name":"sortDates","required":false,"type":{"name":"boolean"}},"type":{"description":"Picker type: range, multiple or default","name":"type","required":false,"type":{"name":"DatePickerType","raw":"DatePickerType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"multiple\\""},{"value":"\\"range\\""}]}},"value":{"description":"Value for controlled component","name":"value","required":false,"type":{"name":"DateValue | DatesRangeValue | Date[]"}},"valueFormat":{"description":"Dayjs format to display input value, \\"YYYY\\" by default","name":"valueFormat","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format selected dates values into a string. By default, date is formatted based on the input type.","name":"valueFormatter","required":false,"type":{"name":"DateFormatter"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element","name":"wrapperProps","required":false,"type":{"name":"Record"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"YearsList":{"props":{"decade":{"description":"Decade for which years list should be displayed","name":"decade","required":true,"type":{"name":"Date"}},"getYearControlProps":{"description":"Adds props to year picker control based on date","name":"getYearControlProps","required":false,"type":{"name":"((date: Date) => Partial)"}},"locale":{"description":"dayjs locale, defaults to value defined in DatesProvider","name":"locale","required":false,"type":{"name":"string"}},"maxDate":{"description":"Maximum possible date","name":"maxDate","required":false,"type":{"name":"Date"}},"minDate":{"description":"Minimum possible date","name":"minDate","required":false,"type":{"name":"Date"}},"size":{"description":"Component size","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"withCellSpacing":{"description":"Determines whether controls should be separated by spacing, true by default","name":"withCellSpacing","required":false,"type":{"name":"boolean"}},"yearsListFormat":{"description":"dayjs format for years list, \'YYYY\' by default","name":"yearsListFormat","required":false,"type":{"name":"string"}}}},"AreaChart":{"props":{"activeDotProps":{"description":"Props passed down to all active dots. Ignored if withDots={false} is set.","name":"activeDotProps","required":false,"type":{"name":"RechartsProps"}},"areaChartProps":{"description":"Props passed down to recharts AreaChart component","name":"areaChartProps","required":false,"type":{"name":"RechartsProps"}},"connectNulls":{"description":"Determines whether points with null values should be connected, true by default","name":"connectNulls","required":false,"type":{"name":"boolean"}},"curveType":{"description":"Type of the curve, \'monotone\' by default","name":"curveType","required":false,"type":{"name":"AreaChartCurveType","raw":"AreaChartCurveType | undefined","value":[{"value":"undefined"},{"value":"\\"step\\""},{"value":"\\"linear\\""},{"value":"\\"bump\\""},{"value":"\\"natural\\""},{"value":"\\"monotone\\""},{"value":"\\"stepBefore\\""},{"value":"\\"stepAfter\\""}]}},"data":{"description":"Data used to display chart","name":"data","required":true,"type":{"name":"ChartData"}},"dataKey":{"description":"Key of the data object for x-axis values","name":"dataKey","required":true,"type":{"name":"string"}},"dotProps":{"description":"Props passed down to all dots. Ignored if withDots={false} is set.","name":"dotProps","required":false,"type":{"name":"RechartsProps"}},"fillOpacity":{"description":"Controls fill opacity of all areas, 0.2 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"gridAxis":{"description":"Specifies which lines should be displayed in the grid, \'x\' by default","name":"gridAxis","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"gridColor":{"description":"Color of the grid and cursor lines, by default depends on color scheme","name":"gridColor","required":false,"type":{"name":"MantineColor"}},"gridProps":{"description":"Props passed down to the CartesianGrid component","name":"gridProps","required":false,"type":{"name":"RechartsProps"}},"legendProps":{"description":"Props passed down to the Legend component","name":"legendProps","required":false,"type":{"name":"RechartsProps"}},"orientation":{"description":"Chart orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"referenceLines":{"description":"Reference lines that should be displayed on the chart","name":"referenceLines","required":false,"type":{"name":"ChartReferenceLineProps[]"}},"series":{"description":"An array of objects with name and color keys. Determines which data should be consumed from the data array.","name":"series","required":true,"type":{"name":"AreaChartSeries[]"}},"splitColors":{"description":"A tuple of colors used when type=\\"split\\" is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors [\'green.7\', \'red.7\'] by default.","name":"splitColors","required":false,"type":{"name":"[MantineColor, MantineColor]"}},"splitOffset":{"description":"Offset for the split gradient. By default, value is inferred from data and series if possible. Must be generated from the data array with getSplitOffset function.","name":"splitOffset","required":false,"type":{"name":"number"}},"strokeDasharray":{"description":"Dash array for the grid lines and cursor, \'5 5\' by default","name":"strokeDasharray","required":false,"type":{"name":"string | number"}},"strokeWidth":{"description":"Stroke width for the chart areas, 2 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"textColor":{"description":"Color of the text displayed inside the chart, \'dimmed\' by default","name":"textColor","required":false,"type":{"name":"MantineColor"}},"tickLine":{"description":"Specifies which axis should have tick line, \'y\' by default","name":"tickLine","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"tooltipAnimationDuration":{"description":"Tooltip position animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipProps":{"description":"Props passed down to the Tooltip component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"type":{"description":"Controls how chart areas are positioned relative to each other, \'default\' by default","name":"type","required":false,"type":{"name":"AreaChartType","raw":"AreaChartType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"stacked\\""},{"value":"\\"percent\\""},{"value":"\\"split\\""}]}},"unit":{"description":"Unit displayed next to each tick in y-axis","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values on Y axis and inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withDots":{"description":"Determines whether dots should be displayed, true by default","name":"withDots","required":false,"type":{"name":"boolean"}},"withGradient":{"description":"Determines whether the chart area should be represented with a gradient instead of the solid color, false by default","name":"withGradient","required":false,"type":{"name":"boolean"}},"withLegend":{"description":"Determines whether chart legend should be displayed, false by default","name":"withLegend","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether chart tooltip should be displayed, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}},"withXAxis":{"description":"Determines whether x-axis should be hidden, true by default","name":"withXAxis","required":false,"type":{"name":"boolean"}},"withYAxis":{"description":"Determines whether y-axis should be hidden, true by default","name":"withYAxis","required":false,"type":{"name":"boolean"}},"xAxisProps":{"description":"Props passed down to the XAxis recharts component","name":"xAxisProps","required":false,"type":{"name":"RechartsProps"}},"yAxisProps":{"description":"Props passed down to the YAxis recharts component","name":"yAxisProps","required":false,"type":{"name":"RechartsProps"}}}},"BarChart":{"props":{"barChartProps":{"description":"Props passed down to recharts BarChart component","name":"barChartProps","required":false,"type":{"name":"RechartsProps"}},"cursorFill":{"description":"Fill of hovered bar section, by default value is based on color scheme","name":"cursorFill","required":false,"type":{"name":"MantineColor"}},"data":{"description":"Data used to display chart","name":"data","required":true,"type":{"name":"Record[]"}},"dataKey":{"description":"Key of the data object for x-axis values","name":"dataKey","required":true,"type":{"name":"string"}},"fillOpacity":{"description":"Controls fill opacity of all bars, 1 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"gridAxis":{"description":"Specifies which lines should be displayed in the grid, \'x\' by default","name":"gridAxis","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"gridColor":{"description":"Color of the grid and cursor lines, by default depends on color scheme","name":"gridColor","required":false,"type":{"name":"MantineColor"}},"gridProps":{"description":"Props passed down to the CartesianGrid component","name":"gridProps","required":false,"type":{"name":"RechartsProps"}},"legendProps":{"description":"Props passed down to the Legend component","name":"legendProps","required":false,"type":{"name":"RechartsProps"}},"orientation":{"description":"Chart orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"referenceLines":{"description":"Reference lines that should be displayed on the chart","name":"referenceLines","required":false,"type":{"name":"ChartReferenceLineProps[]"}},"series":{"description":"An array of objects with name and color keys. Determines which data should be consumed from the data array.","name":"series","required":true,"type":{"name":"BarChartSeries[]"}},"strokeDasharray":{"description":"Dash array for the grid lines and cursor, \'5 5\' by default","name":"strokeDasharray","required":false,"type":{"name":"string | number"}},"textColor":{"description":"Color of the text displayed inside the chart, \'dimmed\' by default","name":"textColor","required":false,"type":{"name":"MantineColor"}},"tickLine":{"description":"Specifies which axis should have tick line, \'y\' by default","name":"tickLine","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"tooltipAnimationDuration":{"description":"Tooltip position animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipProps":{"description":"Props passed down to the Tooltip component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"type":{"description":"Controls how bars are positioned relative to each other, \'default\' by default","name":"type","required":false,"type":{"name":"BarChartType","raw":"BarChartType | undefined","value":[{"value":"undefined"},{"value":"\\"default\\""},{"value":"\\"stacked\\""},{"value":"\\"percent\\""}]}},"unit":{"description":"Unit displayed next to each tick in y-axis","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values on Y axis and inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withLegend":{"description":"Determines whether chart legend should be displayed, false by default","name":"withLegend","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether chart tooltip should be displayed, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}},"withXAxis":{"description":"Determines whether x-axis should be hidden, true by default","name":"withXAxis","required":false,"type":{"name":"boolean"}},"withYAxis":{"description":"Determines whether y-axis should be hidden, true by default","name":"withYAxis","required":false,"type":{"name":"boolean"}},"xAxisProps":{"description":"Props passed down to the XAxis recharts component","name":"xAxisProps","required":false,"type":{"name":"RechartsProps"}},"yAxisProps":{"description":"Props passed down to the YAxis recharts component","name":"yAxisProps","required":false,"type":{"name":"RechartsProps"}}}},"ChartLegend":{"description":"","props":{}},"ChartTooltip":{"props":{"label":{"description":"Main tooltip label","name":"label","required":false,"type":{"name":"React.ReactNode"}},"payload":{"description":"Chart data provided by recharts","name":"payload","required":true,"type":{"name":"Record[]"}},"segmentId":{"description":"Id of the segment to display data for. Only applicable when type=\\"radial\\". If not set, all data is rendered.","name":"segmentId","required":false,"type":{"name":"string"}},"series":{"description":"Chart series data, applicable only for area type","name":"series","required":false,"type":{"name":"ChartSeries[]"}},"type":{"description":"Tooltip type that determines the content and styles, area for LineChart, AreaChart and BarChart, radial for DonutChart and PieChart, \'area\' by default","name":"type","required":false,"type":{"name":"\\"area\\" | \\"radial\\"","raw":"\\"area\\" | \\"radial\\" | undefined","value":[{"value":"undefined"},{"value":"\\"area\\""},{"value":"\\"radial\\""}]}},"unit":{"description":"Data units, provided by parent component","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}}}},"DonutChart":{"props":{"chartLabel":{"description":"Chart label, displayed in the center of the chart","name":"chartLabel","required":false,"type":{"name":"string | number"}},"children":{"description":"Additional elements rendered inside PieChart component","name":"children","required":false,"type":{"name":"React.ReactNode"}},"data":{"description":"Data used to render chart","name":"data","required":true,"type":{"name":"DonutChartCell[]"}},"endAngle":{"description":"Controls angle at which charts ends, 360 by default. Set to 0 to render the chart as semicircle.","name":"endAngle","required":false,"type":{"name":"number"}},"labelColor":{"description":"Controls text color of all labels, by default depends on color scheme","name":"labelColor","required":false,"type":{"name":"MantineColor"}},"paddingAngle":{"description":"Controls padding between segments, 0 by default","name":"paddingAngle","required":false,"type":{"name":"number"}},"pieChartProps":{"description":"Props passed down to recharts PieChart component","name":"pieChartProps","required":false,"type":{"name":"RechartsProps"}},"pieProps":{"description":"Props passed down to recharts Pie component","name":"pieProps","required":false,"type":{"name":"RechartsProps"}},"size":{"description":"Controls chart width and height, height is increased by 40 if withLabels prop is set. Cannot be less than thickness. 80 by default","name":"size","required":false,"type":{"name":"number"}},"startAngle":{"description":"Controls angle at which chart starts, 0 by default. Set to 180 to render the chart as semicircle.","name":"startAngle","required":false,"type":{"name":"number"}},"strokeColor":{"description":"Controls color of the segments stroke, by default depends on color scheme","name":"strokeColor","required":false,"type":{"name":"MantineColor"}},"strokeWidth":{"description":"Controls width of segments stroke, 1 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"thickness":{"description":"Controls thickness of the chart segments, 20 by default","name":"thickness","required":false,"type":{"name":"number"}},"tooltipAnimationDuration":{"description":"Tooltip animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipDataSource":{"description":"Determines which data is displayed in the tooltip. \'all\' – display all values, \'segment\' – display only hovered segment. \'all\' by default.","name":"tooltipDataSource","required":false,"type":{"name":"\\"all\\" | \\"segment\\"","raw":"\\"all\\" | \\"segment\\" | undefined","value":[{"value":"undefined"},{"value":"\\"all\\""},{"value":"\\"segment\\""}]}},"tooltipProps":{"description":"Props passed down to Tooltip recharts component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"valueFormatter":{"description":"A function to format values inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withLabels":{"description":"Determines whether each segment should have associated label, false by default","name":"withLabels","required":false,"type":{"name":"boolean"}},"withLabelsLine":{"description":"Determines whether segments labels should have lines that connect the segment with the label, true by default","name":"withLabelsLine","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether the tooltip should be displayed when one of the section is hovered, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}}}},"LineChart":{"props":{"activeDotProps":{"description":"Props passed down to all active dots. Ignored if withDots={false} is set.","name":"activeDotProps","required":false,"type":{"name":"RechartsProps"}},"connectNulls":{"description":"Determines whether points with null values should be connected, true by default","name":"connectNulls","required":false,"type":{"name":"boolean"}},"curveType":{"description":"Type of the curve, \'monotone\' by default","name":"curveType","required":false,"type":{"name":"LineChartCurveType","raw":"LineChartCurveType | undefined","value":[{"value":"undefined"},{"value":"\\"step\\""},{"value":"\\"linear\\""},{"value":"\\"bump\\""},{"value":"\\"natural\\""},{"value":"\\"monotone\\""},{"value":"\\"stepBefore\\""},{"value":"\\"stepAfter\\""}]}},"data":{"description":"Data used to display chart","name":"data","required":true,"type":{"name":"Record[]"}},"dataKey":{"description":"Key of the data object for x-axis values","name":"dataKey","required":true,"type":{"name":"string"}},"dotProps":{"description":"Props passed down to all dots. Ignored if withDots={false} is set.","name":"dotProps","required":false,"type":{"name":"RechartsProps"}},"fillOpacity":{"description":"Controls fill opacity of all lines, 1 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"gridAxis":{"description":"Specifies which lines should be displayed in the grid, \'x\' by default","name":"gridAxis","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"gridColor":{"description":"Color of the grid and cursor lines, by default depends on color scheme","name":"gridColor","required":false,"type":{"name":"MantineColor"}},"gridProps":{"description":"Props passed down to the CartesianGrid component","name":"gridProps","required":false,"type":{"name":"RechartsProps"}},"legendProps":{"description":"Props passed down to the Legend component","name":"legendProps","required":false,"type":{"name":"RechartsProps"}},"lineChartProps":{"description":"Props passed down to recharts LineChart component","name":"lineChartProps","required":false,"type":{"name":"RechartsProps"}},"orientation":{"description":"Chart orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"referenceLines":{"description":"Reference lines that should be displayed on the chart","name":"referenceLines","required":false,"type":{"name":"ChartReferenceLineProps[]"}},"series":{"description":"An array of objects with name and color keys. Determines which data should be consumed from the data array.","name":"series","required":true,"type":{"name":"LineChartSeries[]"}},"strokeDasharray":{"description":"Dash array for the grid lines and cursor, \'5 5\' by default","name":"strokeDasharray","required":false,"type":{"name":"string | number"}},"strokeWidth":{"description":"Stroke width for the chart lines, 2 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"textColor":{"description":"Color of the text displayed inside the chart, \'dimmed\' by default","name":"textColor","required":false,"type":{"name":"MantineColor"}},"tickLine":{"description":"Specifies which axis should have tick line, \'y\' by default","name":"tickLine","required":false,"type":{"name":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\"","raw":"\\"none\\" | \\"x\\" | \\"y\\" | \\"xy\\" | undefined","value":[{"value":"undefined"},{"value":"\\"none\\""},{"value":"\\"x\\""},{"value":"\\"y\\""},{"value":"\\"xy\\""}]}},"tooltipAnimationDuration":{"description":"Tooltip position animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipProps":{"description":"Props passed down to the Tooltip component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"unit":{"description":"Unit displayed next to each tick in y-axis","name":"unit","required":false,"type":{"name":"string"}},"valueFormatter":{"description":"A function to format values on Y axis and inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withDots":{"description":"Determines whether dots should be displayed, true by default","name":"withDots","required":false,"type":{"name":"boolean"}},"withLegend":{"description":"Determines whether chart legend should be displayed, false by default","name":"withLegend","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether chart tooltip should be displayed, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}},"withXAxis":{"description":"Determines whether x-axis should be hidden, true by default","name":"withXAxis","required":false,"type":{"name":"boolean"}},"withYAxis":{"description":"Determines whether y-axis should be hidden, true by default","name":"withYAxis","required":false,"type":{"name":"boolean"}},"xAxisProps":{"description":"Props passed down to the XAxis recharts component","name":"xAxisProps","required":false,"type":{"name":"RechartsProps"}},"yAxisProps":{"description":"Props passed down to the YAxis recharts component","name":"yAxisProps","required":false,"type":{"name":"RechartsProps"}}}},"PieChart":{"props":{"children":{"description":"Additional elements rendered inside PieChart component","name":"children","required":false,"type":{"name":"React.ReactNode"}},"data":{"description":"Data used to render chart","name":"data","required":true,"type":{"name":"PieChartCell[]"}},"endAngle":{"description":"Controls angle at which charts ends, 360 by default. Set to 0 to render the chart as semicircle.","name":"endAngle","required":false,"type":{"name":"number"}},"labelColor":{"description":"Controls text color of all labels, white by default","name":"labelColor","required":false,"type":{"name":"MantineColor"}},"labelsPosition":{"description":"Controls labels position relative to the segment, \'outside\' by default","name":"labelsPosition","required":false,"type":{"name":"\\"outside\\" | \\"inside\\"","raw":"\\"outside\\" | \\"inside\\" | undefined","value":[{"value":"undefined"},{"value":"\\"outside\\""},{"value":"\\"inside\\""}]}},"paddingAngle":{"description":"Controls padding between segments, 0 by default","name":"paddingAngle","required":false,"type":{"name":"number"}},"pieChartProps":{"description":"Props passed down to recharts PieChart component","name":"pieChartProps","required":false,"type":{"name":"RechartsProps"}},"pieProps":{"description":"Props passed down to recharts Pie component","name":"pieProps","required":false,"type":{"name":"RechartsProps"}},"size":{"description":"Controls chart width and height, height is increased by 40 if withLabels prop is set. Cannot be less than thickness. 80 by default","name":"size","required":false,"type":{"name":"number"}},"startAngle":{"description":"Controls angle at which chart starts, 0 by default. Set to 180 to render the chart as semicircle.","name":"startAngle","required":false,"type":{"name":"number"}},"strokeColor":{"description":"Controls color of the segments stroke, by default depends on color scheme","name":"strokeColor","required":false,"type":{"name":"MantineColor"}},"strokeWidth":{"description":"Controls width of segments stroke, 1 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"tooltipAnimationDuration":{"description":"Tooltip animation duration in ms, 0 by default","name":"tooltipAnimationDuration","required":false,"type":{"name":"number"}},"tooltipDataSource":{"description":"Determines which data is displayed in the tooltip. \'all\' – display all values, \'segment\' – display only hovered segment. \'all\' by default.","name":"tooltipDataSource","required":false,"type":{"name":"\\"all\\" | \\"segment\\"","raw":"\\"all\\" | \\"segment\\" | undefined","value":[{"value":"undefined"},{"value":"\\"all\\""},{"value":"\\"segment\\""}]}},"tooltipProps":{"description":"Props passed down to Tooltip recharts component","name":"tooltipProps","required":false,"type":{"name":"RechartsProps"}},"valueFormatter":{"description":"A function to format values inside the tooltip","name":"valueFormatter","required":false,"type":{"name":"((value: number) => string)"}},"withLabels":{"description":"Determines whether each segment should have associated label, false by default","name":"withLabels","required":false,"type":{"name":"boolean"}},"withLabelsLine":{"description":"Determines whether segments labels should have lines that connect the segment with the label, true by default","name":"withLabelsLine","required":false,"type":{"name":"boolean"}},"withTooltip":{"description":"Determines whether the tooltip should be displayed when one of the section is hovered, true by default","name":"withTooltip","required":false,"type":{"name":"boolean"}}}},"Sparkline":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"curveType":{"description":"Type of the curve, \'linear\' by default","name":"curveType","required":false,"type":{"name":"AreaChartCurveType","raw":"AreaChartCurveType | undefined","value":[{"value":"undefined"},{"value":"\\"step\\""},{"value":"\\"linear\\""},{"value":"\\"bump\\""},{"value":"\\"natural\\""},{"value":"\\"monotone\\""},{"value":"\\"stepBefore\\""},{"value":"\\"stepAfter\\""}]}},"data":{"description":"Data used to render the chart","name":"data","required":true,"type":{"name":"number[]"}},"fillOpacity":{"description":"Controls fill opacity of the area, 0.6 by default","name":"fillOpacity","required":false,"type":{"name":"number"}},"strokeWidth":{"description":"Area stroke width, 2 by default","name":"strokeWidth","required":false,"type":{"name":"number"}},"withGradient":{"description":"Determines whether the chart fill should be a gradient, true by default","name":"withGradient","required":false,"type":{"name":"boolean"}}}},"InputLabel":{"props":{"labelElement":{"description":"Root element of the label, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"required":{"description":"Determines whether the required asterisk should be displayed","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls label font-size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"InputWrapper":{"props":{"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of Input.Label, Input.Description and Input.Error components","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}}}},"InputDescription":{"props":{"size":{"description":"Controls description font-size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"InputError":{"props":{"size":{"description":"Controls error font-size, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"ButtonGroup":{"props":{"borderWidth":{"description":"border-width of the child Button components. Numbers are converted to rem. Default value in 1.","name":"borderWidth","required":false,"type":{"name":"string | number"}},"children":{"description":"Button components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"orientation":{"description":"Orientation of the group, horizontal by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}}}},"ActionIconGroup":{"props":{"borderWidth":{"description":"border-width of the child ActionIcon components. Default value in 1","name":"borderWidth","required":false,"type":{"name":"string | number"}},"children":{"description":"ActionIcon components only","name":"children","required":false,"type":{"name":"React.ReactNode"}},"orientation":{"description":"Controls group orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}}}},"PopoverTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"popupType":{"description":"Popup accessible type, \'dialog\' by default","name":"popupType","required":false,"type":{"name":"string"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"PopoverDropdown":{"description":"","props":{}},"Slider":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, controls color of track and thumb, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"number"}},"disabled":{"description":"Disables slider","name":"disabled","required":false,"type":{"name":"boolean"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"inverted":{"description":"Determines whether track value representation should be inverted, false by default","name":"inverted","required":false,"type":{"name":"boolean"}},"label":{"description":"Function to generate label or any react node to render instead, set to null to disable label","name":"label","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"labelAlwaysOn":{"description":"Determines whether the label should be visible when the slider is not being dragged or hovered, false by default","name":"labelAlwaysOn","required":false,"type":{"name":"boolean"}},"labelTransitionProps":{"description":"Props passed down to the Transition component, { transition: \'fade\', duration: 0 } by default","name":"labelTransitionProps","required":false,"type":{"name":"TransitionProps"}},"marks":{"description":"Marks displayed on the track","name":"marks","required":false,"type":{"name":"{ value: number; label?: ReactNode; }[]"}},"max":{"description":"Maximum possible value, 100 by default","name":"max","required":false,"type":{"name":"number"}},"min":{"description":"Minimal possible value, 0 by default","name":"min","required":false,"type":{"name":"number"}},"name":{"description":"Hidden input name, use with uncontrolled component","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onChangeEnd":{"description":"Called when user stops dragging slider or changes value with arrows","name":"onChangeEnd","required":false,"type":{"name":"((value: number) => void)"}},"precision":{"description":"Number of significant digits after the decimal point","name":"precision","required":false,"type":{"name":"number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"scale":{"description":"A transformation function to change the scale of the slider","name":"scale","required":false,"type":{"name":"((value: number) => number)"}},"showLabelOnHover":{"description":"Determines whether the label should be displayed when the slider is hovered, true by default","name":"showLabelOnHover","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the track, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"step":{"description":"Number by which value will be incremented/decremented with thumb drag and arrows, 1 by default","name":"step","required":false,"type":{"name":"number"}},"thumbChildren":{"description":"Content rendered inside thumb","name":"thumbChildren","required":false,"type":{"name":"React.ReactNode"}},"thumbLabel":{"description":"Thumb aria-label","name":"thumbLabel","required":false,"type":{"name":"string"}},"thumbSize":{"description":"Thumb width and height, by default value is computed based on size prop","name":"thumbSize","required":false,"type":{"name":"string | number"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"number"}}}},"RangeSlider":{"props":{"color":{"description":"Key of theme.colors or any valid CSS color, controls color of track and thumb, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Uncontrolled component default value","name":"defaultValue","required":false,"type":{"name":"RangeSliderValue"}},"disabled":{"description":"Disables slider","name":"disabled","required":false,"type":{"name":"boolean"}},"hiddenInputProps":{"description":"Props passed down to the hidden input","name":"hiddenInputProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"input\\">"}},"inverted":{"description":"Determines whether track values representation should be inverted, false by default","name":"inverted","required":false,"type":{"name":"boolean"}},"label":{"description":"Function to generate label or any react node to render instead, set to null to disable label","name":"label","required":false,"type":{"name":"ReactNode | ((value: number) => ReactNode)"}},"labelAlwaysOn":{"description":"Determines whether the label should be visible when the slider is not being dragged or hovered, false by default","name":"labelAlwaysOn","required":false,"type":{"name":"boolean"}},"labelTransitionProps":{"description":"Props passed down to the Transition component, { transition: \'fade\', duration: 0 } by default","name":"labelTransitionProps","required":false,"type":{"name":"TransitionProps"}},"marks":{"description":"Marks displayed on the track","name":"marks","required":false,"type":{"name":"{ value: number; label?: ReactNode; }[]"}},"max":{"description":"Maximum possible value, 100 by default","name":"max","required":false,"type":{"name":"number"}},"maxRange":{"description":"Maximum range interval, Infinity by default","name":"maxRange","required":false,"type":{"name":"number"}},"min":{"description":"Minimal possible value, 0 by default","name":"min","required":false,"type":{"name":"number"}},"minRange":{"description":"Minimal range interval, 10 by default","name":"minRange","required":false,"type":{"name":"number"}},"name":{"description":"Hidden input name, use with uncontrolled component","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: RangeSliderValue) => void)"}},"onChangeEnd":{"description":"Called when user stops dragging slider or changes value with arrows","name":"onChangeEnd","required":false,"type":{"name":"((value: RangeSliderValue) => void)"}},"precision":{"description":"Number of significant digits after the decimal point","name":"precision","required":false,"type":{"name":"number"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"scale":{"description":"A transformation function to change the scale of the slider","name":"scale","required":false,"type":{"name":"((value: number) => number)"}},"showLabelOnHover":{"description":"Determines whether the label should be displayed when the slider is hovered, true by default","name":"showLabelOnHover","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the track, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"step":{"description":"Number by which value will be incremented/decremented with thumb drag and arrows, 1 by default","name":"step","required":false,"type":{"name":"number"}},"thumbChildren":{"description":"Content rendered inside thumb","name":"thumbChildren","required":false,"type":{"name":"React.ReactNode"}},"thumbFromLabel":{"description":"First thumb aria-label","name":"thumbFromLabel","required":false,"type":{"name":"string"}},"thumbSize":{"description":"Thumb width and height, by default value is computed based on size prop","name":"thumbSize","required":false,"type":{"name":"string | number"}},"thumbToLabel":{"description":"Second thumb aria-label","name":"thumbToLabel","required":false,"type":{"name":"string"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"RangeSliderValue"}}}},"SwitchGroup":{"props":{"children":{"description":"Switch components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"readOnly":{"description":"If set, value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the Input.Wrapper, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the Input.Wrapper","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"CheckboxGroup":{"props":{"children":{"description":"Checkbox components and any other elements","name":"children","required":true,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string[]"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"onChange":{"description":"Called with an array of selected checkboxes values when value changes","name":"onChange","required":false,"type":{"name":"((value: string[]) => void)"}},"readOnly":{"description":"If set, value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the Input.Wrapper, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string[]"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element (Input.Wrapper component)","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"RadioGroup":{"props":{"children":{"description":"Radio components and any other elements","name":"children","required":true,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Default value for uncontrolled component","name":"defaultValue","required":false,"type":{"name":"string"}},"description":{"description":"Contents of Input.Description component. If not set, description is not rendered.","name":"description","required":false,"type":{"name":"React.ReactNode"}},"descriptionProps":{"description":"Props passed down to the Input.Description component","name":"descriptionProps","required":false,"type":{"name":"Record"}},"error":{"description":"Contents of Input.Error component. If not set, error is not rendered.","name":"error","required":false,"type":{"name":"React.ReactNode"}},"errorProps":{"description":"Props passed down to the Input.Error component","name":"errorProps","required":false,"type":{"name":"Record"}},"id":{"description":"Static id used as base to generate aria- attributes, by default generates random id","name":"id","required":false,"type":{"name":"string"}},"inputContainer":{"description":"Input container component, React.Fragment by default","name":"inputContainer","required":false,"type":{"name":"((children: ReactNode) => ReactNode)"}},"inputWrapperOrder":{"description":"Controls order of the elements, [\'label\', \'description\', \'input\', \'error\'] by default","name":"inputWrapperOrder","required":false,"type":{"name":"(\\"input\\" | \\"label\\" | \\"description\\" | \\"error\\")[]"}},"label":{"description":"Contents of Input.Label component. If not set, label is not rendered.","name":"label","required":false,"type":{"name":"React.ReactNode"}},"labelElement":{"description":"Input.Label root element, \'label\' by default","name":"labelElement","required":false,"type":{"name":"\\"div\\" | \\"label\\"","raw":"\\"div\\" | \\"label\\" | undefined","value":[{"value":"undefined"},{"value":"\\"div\\""},{"value":"\\"label\\""}]}},"labelProps":{"description":"Props passed down to the Input.Label component","name":"labelProps","required":false,"type":{"name":"Record"}},"name":{"description":"name attribute of child radio inputs. By default, name is generated randomly.","name":"name","required":false,"type":{"name":"string"}},"onChange":{"description":"Called when value changes","name":"onChange","required":false,"type":{"name":"((value: string) => void)"}},"readOnly":{"description":"If set, value cannot be changed","name":"readOnly","required":false,"type":{"name":"boolean"}},"required":{"description":"Adds required attribute to the input and a red asterisk on the right side of label, false by default","name":"required","required":false,"type":{"name":"boolean"}},"size":{"description":"Controls size of the Input.Wrapper, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize","raw":"MantineSize | undefined","value":[{"value":"undefined"},{"value":"\\"xs\\""},{"value":"\\"sm\\""},{"value":"\\"md\\""},{"value":"\\"lg\\""},{"value":"\\"xl\\""}]}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string"}},"withAsterisk":{"description":"Determines whether the required asterisk should be displayed. Overrides required prop. Does not add required attribute to the input. false by default","name":"withAsterisk","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the Input.Wrapper","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"TabsTab":{"props":{"children":{"description":"Tab label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color, controls control color based on variant","name":"color","required":false,"type":{"name":"MantineColor"}},"leftSection":{"description":"Content displayed on the left side of the label, for example, icon","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Content displayed on the right side of the label, for example, icon","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"size":{"description":"Size passed from parent component, sets data-size if value is not number like","name":"size","required":false,"type":{"name":"string | number"}},"value":{"description":"Value of associated panel","name":"value","required":true,"type":{"name":"string"}}}},"TabsList":{"props":{"children":{"description":"Tabs.Tab components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"grow":{"description":"Determines whether tabs should take all available space, false by default","name":"grow","required":false,"type":{"name":"boolean"}},"justify":{"description":"Tabs alignment, flex-start by default","name":"justify","required":false,"type":{"name":"JustifyContent"}}}},"TabsPanel":{"props":{"children":{"description":"Panel content","name":"children","required":true,"type":{"name":"React.ReactNode"}},"keepMounted":{"description":"If set to true, the content will be kept mounted, even if keepMounted is set false in the parent Tabs component","name":"keepMounted","required":false,"type":{"name":"boolean"}},"value":{"description":"Value of associated control","name":"value","required":true,"type":{"name":"string"}}}},"AccordionItem":{"props":{"value":{"description":"Value that is used to manage accordion state","name":"value","required":true,"type":{"name":"string"}}}},"AccordionControl":{"props":{"chevron":{"description":"Custom chevron icon","name":"chevron","required":false,"type":{"name":"React.ReactNode"}},"children":{"description":"Control label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"disabled":{"description":"Disables control button","name":"disabled","required":false,"type":{"name":"boolean"}},"icon":{"description":"Icon displayed next to the label","name":"icon","required":false,"type":{"name":"React.ReactNode"}}}},"PillGroup":{"props":{"disabled":{"description":"Determines whether child Pill components should be disabled","name":"disabled","required":false,"type":{"name":"boolean"}},"gap":{"description":"Controls spacing between pills, by default controlled by size","name":"gap","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"size":{"description":"Controls size of the child Pill components and gap between them, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}}}},"PillsInputField":{"props":{"pointer":{"description":"If set, cursor is changed to pointer","name":"pointer","required":false,"type":{"name":"boolean"}},"type":{"description":"Controls input styles when focused. If auto the input is hidden when not focused. If visible the input will always remain visible. \'visible\' by default","name":"type","required":false,"type":{"name":"\\"hidden\\" | \\"auto\\" | \\"visible\\"","raw":"\\"hidden\\" | \\"auto\\" | \\"visible\\" | undefined","value":[{"value":"undefined"},{"value":"\\"hidden\\""},{"value":"\\"auto\\""},{"value":"\\"visible\\""}]}}}},"PaginationRoot":{"props":{"autoContrast":{"description":"Determines whether active item text color should depend on background-color of the indicator. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"boundaries":{"description":"Number of elements visible on the left/right edges, 1 by default","name":"boundaries","required":false,"type":{"name":"number"}},"color":{"description":"Key of theme.colors, active item color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"defaultValue":{"description":"Active page for uncontrolled component, must be an integer in [0, total] interval","name":"defaultValue","required":false,"type":{"name":"number"}},"disabled":{"description":"Determines whether all controls should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"getItemProps":{"description":"Additional props passed down to controls","name":"getItemProps","required":false,"type":{"name":"((page: number) => Record)"}},"onChange":{"description":"Called when page changes","name":"onChange","required":false,"type":{"name":"((value: number) => void)"}},"onFirstPage":{"description":"Called when first page control is clicked","name":"onFirstPage","required":false,"type":{"name":"(() => void)"}},"onLastPage":{"description":"Called when last page control is clicked","name":"onLastPage","required":false,"type":{"name":"(() => void)"}},"onNextPage":{"description":"Called when next page control is clicked","name":"onNextPage","required":false,"type":{"name":"(() => void)"}},"onPreviousPage":{"description":"Called when previous page control is clicked","name":"onPreviousPage","required":false,"type":{"name":"(() => void)"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"siblings":{"description":"Number of siblings displayed on the left/right side of the selected page, 1 by default","name":"siblings","required":false,"type":{"name":"number"}},"size":{"description":"height and min-width of controls, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"total":{"description":"Total number of pages, must be an integer","name":"total","required":true,"type":{"name":"number"}},"value":{"description":"Active page for controlled component, must be an integer in [0, total] interval","name":"value","required":false,"type":{"name":"number"}}}},"PaginationItems":{"props":{"dotsIcon":{"description":"Dots icon component","name":"dotsIcon","required":false,"type":{"name":"PaginationIcon"}}}},"PaginationDots":{"props":{"icon":{"description":"Custom dots icon component, must accept svg element props and size prop","name":"icon","required":false,"type":{"name":"FC"}}}},"createEdgeComponent":{"props":{"action":{"description":"","name":"action","required":true,"type":{"name":"\\"onNext\\" | \\"onPrevious\\" | \\"onFirst\\" | \\"onLast\\"","raw":"\\"onNext\\" | \\"onPrevious\\" | \\"onFirst\\" | \\"onLast\\"","value":[{"value":"\\"onNext\\""},{"value":"\\"onPrevious\\""},{"value":"\\"onFirst\\""},{"value":"\\"onLast\\""}]}},"icon":{"description":"","name":"icon","required":true,"type":{"name":"FC"}},"name":{"description":"","name":"name","required":true,"type":{"name":"string"}},"type":{"description":"","name":"type","required":true,"type":{"name":"\\"next\\" | \\"previous\\"","raw":"\\"next\\" | \\"previous\\"","value":[{"value":"\\"next\\""},{"value":"\\"previous\\""}]}}}},"PaginationNext":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationPrevious":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationFirst":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationLast":{"props":{"icon":{"description":"An icon component to replace the default icon","name":"icon","required":false,"type":{"name":"FC"}}}},"PaginationControl":{"props":{"active":{"description":"Determines whether control should have active styles","name":"active","required":false,"type":{"name":"boolean"}},"withPadding":{"description":"Determines whether control should have padding, true by default","name":"withPadding","required":false,"type":{"name":"boolean"}}}},"ComboboxOption":{"props":{"active":{"description":"Determines whether the option is selected","name":"active","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether the option can be selected","name":"disabled","required":false,"type":{"name":"boolean"}},"selected":{"description":"Determines whether item is selected, useful for virtualized comboboxes","name":"selected","required":false,"type":{"name":"boolean"}},"value":{"description":"Option value","name":"value","required":true,"type":{"name":"string"}}}},"ComboboxDropdown":{"props":{"hidden":{"description":"Determines whether the dropdown should be hidden, for example, when there are no options to display","name":"hidden","required":false,"type":{"name":"boolean"}}}},"ComboboxTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"ComboboxDropdownTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"ComboboxEventsTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}},"targetType":{"description":"Determines which events should be handled by the target element.\\nbutton target type handles Space and Enter keys to toggle dropdown opened state.\\ninput by default.","name":"targetType","required":false,"type":{"name":"\\"button\\" | \\"input\\"","raw":"\\"button\\" | \\"input\\" | undefined","value":[{"value":"undefined"},{"value":"\\"button\\""},{"value":"\\"input\\""}]}},"withAriaAttributes":{"description":"Determines whether the target should have aria- attributes, true by default","name":"withAriaAttributes","required":false,"type":{"name":"boolean"}},"withExpandedAttribute":{"description":"Determines whether the target should have aria-expanded attribute, false by default","name":"withExpandedAttribute","required":false,"type":{"name":"boolean"}},"withKeyboardNavigation":{"description":"Determines whether component should respond to keyboard events, true by default","name":"withKeyboardNavigation","required":false,"type":{"name":"boolean"}}}},"ComboboxGroup":{"props":{"label":{"description":"Group label","name":"label","required":false,"type":{"name":"React.ReactNode"}}}},"AppShellAside":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellNavbar":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellHeader":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellFooter":{"props":{"withBorder":{"description":"Determines whether component should have a border, overrides withBorder prop on AppShell component","name":"withBorder","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Component z-index, by default inherited from the AppShell","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"AppShellSection":{"props":{"grow":{"description":"Determines whether the section should take all available space, false by default","name":"grow","required":false,"type":{"name":"boolean"}}}},"GridCol":{"props":{"offset":{"description":"Column offset on the left side – number of columns that should be left empty before this column","name":"offset","required":false,"type":{"name":"StyleProp"}},"order":{"description":"Column order, can be used to reorder columns at different viewport sizes","name":"order","required":false,"type":{"name":"StyleProp"}},"span":{"description":"Column span, 12 by default","name":"span","required":false,"type":{"name":"StyleProp"}}}},"HoverCardTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"eventPropsWrapperName":{"description":"Key of the prop that is used to pass event listeners, by default event listeners are passed directly to component","name":"eventPropsWrapperName","required":false,"type":{"name":"string"}},"popupType":{"description":"Popup accessible type, \'dialog\' by default","name":"popupType","required":false,"type":{"name":"string"}},"refProp":{"description":"Key of the prop that should be used to access element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"MenuItem":{"props":{"children":{"description":"Item label","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeMenuOnClick":{"description":"Determines whether the menu should be closed when the item is clicked, overrides closeOnItemClick prop on the Menu component","name":"closeMenuOnClick","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS color","name":"color","required":false,"type":{"name":"MantineColor"}},"disabled":{"description":"Disables item","name":"disabled","required":false,"type":{"name":"boolean"}},"leftSection":{"description":"Section displayed on the left side of the label","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Section displayed on the right side of the label","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"MenuTarget":{"props":{"children":{"description":"Target element","name":"children","required":true,"type":{"name":"React.ReactNode"}},"refProp":{"description":"Key of the prop that should be used to get element ref","name":"refProp","required":false,"type":{"name":"string"}}}},"ProgressSection":{"props":{"animated":{"description":"Determines whether the sections stripes should be animated, if set, striped prop is ignored, false by default","name":"animated","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors or any valid CSS value, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"striped":{"description":"Determines whether the section should have stipes, false by default","name":"striped","required":false,"type":{"name":"boolean"}},"value":{"description":"Value of the section in 0–100 range","name":"value","required":true,"type":{"name":"number"}},"withAria":{"description":"Determines whether aria-* props should be added to the root element, true by default","name":"withAria","required":false,"type":{"name":"boolean"}}}},"ProgressRoot":{"props":{"autoContrast":{"description":"Determines whether label text color should depend on background-color. If luminosity of the color prop is less than theme.luminosityThreshold, then theme.white will be used for text color, otherwise theme.black. Overrides theme.autoContrast.","name":"autoContrast","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"size":{"description":"Controls track height, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"transitionDuration":{"description":"Controls sections width transition duration, value is specified in ms, 100 by default","name":"transitionDuration","required":false,"type":{"name":"number"}}}},"ChipGroup":{"props":{"children":{"description":"Chip components and any other elements","name":"children","required":false,"type":{"name":"React.ReactNode"}},"defaultValue":{"description":"Uncontrolled component initial value","name":"defaultValue","required":false,"type":{"name":"string | string[] | null"}},"multiple":{"description":"Determines whether it is allowed to select multiple values, false by default","name":"multiple","required":false,"type":{"name":"boolean"}},"onChange":{"description":"Called when value changes. If multiple prop is set, called with an array of selected values. If not, called with a string value of selected chip.","name":"onChange","required":false,"type":{"name":"((value: T extends true ? string[] : string) => void)"}},"value":{"description":"Controlled component value","name":"value","required":false,"type":{"name":"string | string[] | null"}}}},"CardSection":{"props":{"inheritPadding":{"description":"Determines whether the section should inherit padding from the parent Card, false by default","name":"inheritPadding","required":false,"type":{"name":"boolean"}},"withBorder":{"description":"Determines whether the section should have a border, false by default","name":"withBorder","required":false,"type":{"name":"boolean"}}}},"StepperStep":{"props":{"allowStepClick":{"description":"Set to false to disable clicks on step","name":"allowStepClick","required":false,"type":{"name":"boolean"}},"allowStepSelect":{"description":"Should step selection be allowed","name":"allowStepSelect","required":false,"type":{"name":"boolean"}},"color":{"description":"Key of theme.colors, by default controlled by Stepper component","name":"color","required":false,"type":{"name":"MantineColor"}},"completedIcon":{"description":"Step icon displayed when step is completed","name":"completedIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"description":{"description":"Step description","name":"description","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"icon":{"description":"Step icon, defaults to step index + 1 when rendered within Stepper","name":"icon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"iconPosition":{"description":"Icon position relative to step body, controlled by Stepper component","name":"iconPosition","required":false,"type":{"name":"\\"left\\" | \\"right\\"","raw":"\\"left\\" | \\"right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"left\\""},{"value":"\\"right\\""}]}},"iconSize":{"description":"Icon wrapper size","name":"iconSize","required":false,"type":{"name":"number"}},"label":{"description":"Step label, render after icon","name":"label","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"loading":{"description":"Indicates loading state of the step","name":"loading","required":false,"type":{"name":"boolean"}},"orientation":{"description":"Component orientation","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"progressIcon":{"description":"Step icon displayed when step is in progress","name":"progressIcon","required":false,"type":{"name":"ReactNode | StepFragmentComponent"}},"state":{"description":"Step state, controlled by Stepper component","name":"state","required":false,"type":{"name":"\\"stepInactive\\" | \\"stepProgress\\" | \\"stepCompleted\\"","raw":"\\"stepInactive\\" | \\"stepProgress\\" | \\"stepCompleted\\" | undefined","value":[{"value":"undefined"},{"value":"\\"stepInactive\\""},{"value":"\\"stepProgress\\""},{"value":"\\"stepCompleted\\""}]}},"step":{"description":"Step index, controlled by Stepper component *","name":"step","required":false,"type":{"name":"number"}},"withIcon":{"description":"Determines whether the icon should be displayed","name":"withIcon","required":false,"type":{"name":"boolean"}}}},"TimelineItem":{"props":{"bullet":{"description":"React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed.","name":"bullet","required":false,"type":{"name":"React.ReactNode"}},"children":{"description":"Content displayed below the title","name":"children","required":false,"type":{"name":"React.ReactNode"}},"color":{"description":"Key of theme.colors or any valid CSS color to control active item colors, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"lineVariant":{"description":"Controls line border style, \'solid\' by default","name":"lineVariant","required":false,"type":{"name":"\\"dashed\\" | \\"dotted\\" | \\"solid\\"","raw":"\\"dashed\\" | \\"dotted\\" | \\"solid\\" | undefined","value":[{"value":"undefined"},{"value":"\\"dashed\\""},{"value":"\\"dotted\\""},{"value":"\\"solid\\""}]}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, \'xl\' by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"title":{"description":"Item title, displayed next to the bullet","name":"title","required":false,"type":{"name":"React.ReactNode"}}}},"ListItem":{"props":{"children":{"description":"Item content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"icon":{"description":"Icon to replace item bullet","name":"icon","required":false,"type":{"name":"React.ReactNode"}}}},"Spotlight":{"props":{"actions":{"description":"Actions data, passed down to Spotlight.Action component","name":"actions","required":true,"type":{"name":"SpotlightActions[]"}},"centered":{"description":"Determines whether the modal should be centered vertically, false by default","name":"centered","required":false,"type":{"name":"boolean"}},"children":{"description":"Modal content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clearQueryOnClose":{"description":"Determines whether the search query should be cleared when the spotlight is closed, true by default","name":"clearQueryOnClose","required":false,"type":{"name":"boolean"}},"closeOnActionTrigger":{"description":"Determines whether spotlight should be closed when one of the actions is triggered, true by default","name":"closeOnActionTrigger","required":false,"type":{"name":"boolean"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, spotlight will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"filter":{"description":"Function to filter actions data based on search query, by default actions are filtered by title, description and keywords","name":"filter","required":false,"type":{"name":"SpotlightFilterFunction"}},"forceOpened":{"description":"Forces opened state, useful for tests","name":"forceOpened","required":false,"type":{"name":"boolean"}},"fullScreen":{"description":"Determines whether the modal should take the entire screen, false by default","name":"fullScreen","required":false,"type":{"name":"boolean"}},"highlightQuery":{"description":"Determines whether search query should be highlighted in action label, false by default","name":"highlightQuery","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"limit":{"description":"Maximum number of actions displayed at a time, Infinity by default","name":"limit","required":false,"type":{"name":"number"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"maxHeight":{"description":"Spotlight content max-height. Ignored unless scrollable prop is set. 400 by default","name":"maxHeight","required":false,"type":{"name":"MaxHeight"}},"nothingFound":{"description":"Message displayed when none of the actions match given filter","name":"nothingFound","required":false,"type":{"name":"React.ReactNode"}},"onQueryChange":{"description":"Called when query changes","name":"onQueryChange","required":false,"type":{"name":"((query: string) => void)"}},"onSpotlightClose":{"description":"Called when spotlight closes","name":"onSpotlightClose","required":false,"type":{"name":"(() => void)"}},"onSpotlightOpen":{"description":"Called when spotlight opens","name":"onSpotlightOpen","required":false,"type":{"name":"(() => void)"}},"overlayProps":{"description":"Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"query":{"description":"Controlled Spotlight search query","name":"query","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"scrollable":{"description":"Determines whether the actions list should be scrollable. If not set, maxHeight is ignored, false by default","name":"scrollable","required":false,"type":{"name":"boolean"}},"searchProps":{"description":"Props passed down to the Spotlight.Search","name":"searchProps","required":false,"type":{"name":"SpotlightSearchProps"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"shortcut":{"description":"Keyboard shortcut or a list of shortcuts to trigger spotlight, \'mod + K\' by default","name":"shortcut","required":false,"type":{"name":"string | string[] | null"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"store":{"description":"Spotlight store, can be used to create multiple instances of spotlight","name":"store","required":false,"type":{"name":"SpotlightStore"}},"tagsToIgnore":{"description":"A list of tags which when focused will be ignored by shortcut, [\'input\', \'textarea\', \'select\'] by default","name":"tagsToIgnore","required":false,"type":{"name":"string[]"}},"title":{"description":"Modal title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"triggerOnContentEditable":{"description":"Determines whether shortcut should trigger based in contentEditable, false by default","name":"triggerOnContentEditable","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"xOffset":{"description":"Left/right modal offset, 5vw by default","name":"xOffset","required":false,"type":{"name":"MarginLeft"}},"yOffset":{"description":"Top/bottom modal offset, 5dvh by default","name":"yOffset","required":false,"type":{"name":"MarginTop"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"SpotlightAction":{"props":{"children":{"description":"Children override default action elements, if passed, label, description and sections are hidden","name":"children","required":false,"type":{"name":"React.ReactNode"}},"closeSpotlightOnTrigger":{"description":"Determines whether the spotlight should be closed when action is triggered, overrides closeOnActionTrigger prop set on Spotlight","name":"closeSpotlightOnTrigger","required":false,"type":{"name":"boolean"}},"description":{"description":"Action description, pass string to use in default filter","name":"description","required":false,"type":{"name":"string"}},"dimmedSections":{"description":"Determines whether left and right sections should have dimmed styles, true by default","name":"dimmedSections","required":false,"type":{"name":"boolean"}},"highlightColor":{"description":"Key of theme.colors of any valid CSS color that will be used to highlight search query, \'yellow\' by default","name":"highlightColor","required":false,"type":{"name":"MantineColor"}},"highlightQuery":{"description":"Determines whether search query should be highlighted in action label, false by default","name":"highlightQuery","required":false,"type":{"name":"boolean"}},"keywords":{"description":"Keywords that are used for default filtering, not displayed anywhere, can be a string: \\"react,router,javascript\\" or an array: [\'react\', \'router\', \'javascript\']","name":"keywords","required":false,"type":{"name":"string | string[]"}},"label":{"description":"Action label, pass string to use in default filter","name":"label","required":false,"type":{"name":"string"}},"leftSection":{"description":"Section displayed on the left side of the label, for example, icon","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"rightSection":{"description":"Section displayed on the right side of the label, for example, hotkey","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}}}},"SpotlightActionsGroup":{"props":{"children":{"description":"Spotlight.Action components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"label":{"description":"Group label","name":"label","required":false,"type":{"name":"React.ReactNode"}}}},"SpotlightRoot":{"props":{"centered":{"description":"Determines whether the modal should be centered vertically, false by default","name":"centered","required":false,"type":{"name":"boolean"}},"children":{"description":"Modal content","name":"children","required":false,"type":{"name":"React.ReactNode"}},"clearQueryOnClose":{"description":"Determines whether the search query should be cleared when the spotlight is closed, true by default","name":"clearQueryOnClose","required":false,"type":{"name":"boolean"}},"closeOnActionTrigger":{"description":"Determines whether spotlight should be closed when one of the actions is triggered, true by default","name":"closeOnActionTrigger","required":false,"type":{"name":"boolean"}},"closeOnClickOutside":{"description":"Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default","name":"closeOnClickOutside","required":false,"type":{"name":"boolean"}},"closeOnEscape":{"description":"Determines whether onClose should be called when user presses the escape key, true by default","name":"closeOnEscape","required":false,"type":{"name":"boolean"}},"disabled":{"description":"If set, spotlight will not be rendered","name":"disabled","required":false,"type":{"name":"boolean"}},"forceOpened":{"description":"Forces opened state, useful for tests","name":"forceOpened","required":false,"type":{"name":"boolean"}},"fullScreen":{"description":"Determines whether the modal should take the entire screen, false by default","name":"fullScreen","required":false,"type":{"name":"boolean"}},"id":{"description":"Id used to connect modal/drawer with body and title","name":"id","required":false,"type":{"name":"string"}},"keepMounted":{"description":"If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead, false by default","name":"keepMounted","required":false,"type":{"name":"boolean"}},"lockScroll":{"description":"Determines whether scroll should be locked when opened={true}, true by default","name":"lockScroll","required":false,"type":{"name":"boolean"}},"maxHeight":{"description":"Spotlight content max-height. Ignored unless scrollable prop is set. 400 by default","name":"maxHeight","required":false,"type":{"name":"MaxHeight"}},"onQueryChange":{"description":"Called when query changes","name":"onQueryChange","required":false,"type":{"name":"((query: string) => void)"}},"onSpotlightClose":{"description":"Called when spotlight closes","name":"onSpotlightClose","required":false,"type":{"name":"(() => void)"}},"onSpotlightOpen":{"description":"Called when spotlight opens","name":"onSpotlightOpen","required":false,"type":{"name":"(() => void)"}},"overlayProps":{"description":"Props passed down to the Overlay component, use to configure opacity, background-color, styles and other properties","name":"overlayProps","required":false,"type":{"name":"ModalBaseOverlayProps"}},"padding":{"description":"Key of theme.spacing or any valid CSS value to set content, header and footer padding, \'md\' by default","name":"padding","required":false,"type":{"name":"MantineSpacing"}},"portalProps":{"description":"Props passed down to the Portal component when withinPortal is set","name":"portalProps","required":false,"type":{"name":"Omit"}},"query":{"description":"Controlled Spotlight search query","name":"query","required":false,"type":{"name":"string"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"removeScrollProps":{"description":"Props passed down to react-remove-scroll, can be used to customize scroll lock behavior","name":"removeScrollProps","required":false,"type":{"name":"RemoveScrollProps"}},"returnFocus":{"description":"Determines whether focus should be returned to the last active element when onClose is called, true by default","name":"returnFocus","required":false,"type":{"name":"boolean"}},"scrollAreaComponent":{"description":"Scroll area component, native div element by default","name":"scrollAreaComponent","required":false,"type":{"name":"ScrollAreaComponent"}},"scrollable":{"description":"Determines whether the actions list should be scrollable. If not set, maxHeight is ignored, false by default","name":"scrollable","required":false,"type":{"name":"boolean"}},"shadow":{"description":"Key of theme.shadows or any valid CSS box-shadow value, \'xl\' by default","name":"shadow","required":false,"type":{"name":"MantineShadow"}},"shortcut":{"description":"Keyboard shortcut or a list of shortcuts to trigger spotlight, \'mod + K\' by default","name":"shortcut","required":false,"type":{"name":"string | string[] | null"}},"size":{"description":"Controls width of the content area, \'md\' by default","name":"size","required":false,"type":{"name":"number | MantineSize | (string & {})"}},"store":{"description":"Spotlight store, can be used to create multiple instances of spotlight","name":"store","required":false,"type":{"name":"SpotlightStore"}},"tagsToIgnore":{"description":"A list of tags which when focused will be ignored by shortcut, [\'input\', \'textarea\', \'select\'] by default","name":"tagsToIgnore","required":false,"type":{"name":"string[]"}},"title":{"description":"Modal title","name":"title","required":false,"type":{"name":"React.ReactNode"}},"transitionProps":{"description":"Props added to the Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: \'pop\' } by default","name":"transitionProps","required":false,"type":{"name":"TransitionProps"}},"trapFocus":{"description":"Determines whether focus should be trapped, true by default","name":"trapFocus","required":false,"type":{"name":"boolean"}},"triggerOnContentEditable":{"description":"Determines whether shortcut should trigger based in contentEditable, false by default","name":"triggerOnContentEditable","required":false,"type":{"name":"boolean"}},"withOverlay":{"description":"Determines whether the overlay should be rendered, true by default","name":"withOverlay","required":false,"type":{"name":"boolean"}},"withinPortal":{"description":"Determines whether the component should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"xOffset":{"description":"Left/right modal offset, 5vw by default","name":"xOffset","required":false,"type":{"name":"MarginLeft"}},"yOffset":{"description":"Top/bottom modal offset, 5dvh by default","name":"yOffset","required":false,"type":{"name":"MarginTop"}},"zIndex":{"description":"z-index CSS property of the root element, 200 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}},"SpotlightSearch":{"props":{"disabled":{"description":"Sets disabled attribute on the input element","name":"disabled","required":false,"type":{"name":"boolean"}},"error":{"description":"Determines whether the input should have error styles and aria-invalid attribute","name":"error","required":false,"type":{"name":"React.ReactNode"}},"id":{"description":"Input element id","name":"id","required":false,"type":{"name":"string"}},"leftSection":{"description":"Content section rendered on the left side of the input","name":"leftSection","required":false,"type":{"name":"React.ReactNode"}},"leftSectionPointerEvents":{"description":"Sets pointer-events styles on the leftSection element, \'none\' by default","name":"leftSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"leftSectionProps":{"description":"Props passed down to the leftSection element","name":"leftSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"leftSectionWidth":{"description":"Left section width, used to set width of the section and input padding-left, by default equals to the input height","name":"leftSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"multiline":{"description":"Determines whether the input can have multiple lines, for example when component=\\"textarea\\", false by default","name":"multiline","required":false,"type":{"name":"boolean"}},"pointer":{"description":"Determines whether the input should have cursor: pointer style, false by default","name":"pointer","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"required":{"description":"Sets required attribute on the input element","name":"required","required":false,"type":{"name":"boolean"}},"rightSection":{"description":"Content section rendered on the right side of the input","name":"rightSection","required":false,"type":{"name":"React.ReactNode"}},"rightSectionPointerEvents":{"description":"Sets pointer-events styles on the rightSection element, \'none\' by default","name":"rightSectionPointerEvents","required":false,"type":{"name":"React.CSSProperties[\\"pointerEvents\\"]","raw":"PointerEvents | undefined","value":[{"value":"undefined"},{"value":"\\"-moz-initial\\""},{"value":"\\"inherit\\""},{"value":"\\"initial\\""},{"value":"\\"revert\\""},{"value":"\\"unset\\""},{"value":"\\"none\\""},{"value":"\\"auto\\""},{"value":"\\"all\\""},{"value":"\\"fill\\""},{"value":"\\"stroke\\""},{"value":"\\"painted\\""},{"value":"\\"visible\\""},{"value":"\\"visibleFill\\""},{"value":"\\"visiblePainted\\""},{"value":"\\"visibleStroke\\""}]}},"rightSectionProps":{"description":"Props passed down to the rightSection element","name":"rightSectionProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"div\\">"}},"rightSectionWidth":{"description":"Right section width, used to set width of the section and input padding-right, by default equals to the input height","name":"rightSectionWidth","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"size":{"description":"Controls input height and horizontal padding, \'sm\' by default","name":"size","required":false,"type":{"name":"MantineSize | (string & {})"}},"withAria":{"description":"Determines whether aria- and other accessibility attributes should be added to the input, true by default","name":"withAria","required":false,"type":{"name":"boolean"}},"withErrorStyles":{"description":"Determines whether the input should have red border and red text color when the error prop is set, true by default","name":"withErrorStyles","required":false,"type":{"name":"boolean"}},"wrapperProps":{"description":"Props passed down to the root element of the Input component","name":"wrapperProps","required":false,"type":{"name":"Record"}}}},"Carousel":{"props":{"align":{"description":"Determines how slides will be aligned relative to the container. Use number between 0-1 to align slides based on percentage, where 0.5 is 50%, \'center\' by default","name":"align","required":false,"type":{"name":"number | \\"center\\" | \\"end\\" | \\"start\\""}},"children":{"description":" components","name":"children","required":false,"type":{"name":"React.ReactNode"}},"containScroll":{"description":"Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.","name":"containScroll","required":false,"type":{"name":"\\"\\" | \\"trimSnaps\\" | \\"keepSnaps\\"","raw":"\\"\\" | \\"trimSnaps\\" | \\"keepSnaps\\" | undefined","value":[{"value":"undefined"},{"value":"\\"\\""},{"value":"\\"trimSnaps\\""},{"value":"\\"keepSnaps\\""}]}},"controlSize":{"description":"Controls size of the next and previous controls, 26 by default","name":"controlSize","required":false,"type":{"name":"React.CSSProperties[\\"width\\"]"}},"controlsOffset":{"description":"Controls position of the next and previous controls, key of theme.spacing or any valid CSS value, \'sm\' by default","name":"controlsOffset","required":false,"type":{"name":"MantineSpacing"}},"dragFree":{"description":"Determines whether momentum scrolling should be enabled, false by default","name":"dragFree","required":false,"type":{"name":"boolean"}},"draggable":{"description":"Determines whether the carousel can be scrolled with mouse and touch interactions, true by default","name":"draggable","required":false,"type":{"name":"boolean"}},"getEmblaApi":{"description":"Get embla API as ref","name":"getEmblaApi","required":false,"type":{"name":"((embla: EmblaCarouselType) => void)"}},"height":{"description":"Slides container height, required for vertical orientation","name":"height","required":false,"type":{"name":"Height"}},"inViewThreshold":{"description":"Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%.","name":"inViewThreshold","required":false,"type":{"name":"number"}},"includeGapInSize":{"description":"Determines whether gap between slides should be treated as part of the slide size, true by default","name":"includeGapInSize","required":false,"type":{"name":"boolean"}},"initialSlide":{"description":"Index of initial slide","name":"initialSlide","required":false,"type":{"name":"number"}},"loop":{"description":"Enables infinite looping. true by default, automatically falls back to false if slide content isn\'t enough to loop.","name":"loop","required":false,"type":{"name":"boolean"}},"nextControlIcon":{"description":"Icon of the next control","name":"nextControlIcon","required":false,"type":{"name":"React.ReactNode"}},"nextControlProps":{"description":"Props passed down to next control","name":"nextControlProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"onNextSlide":{"description":"Called when next slide is shown","name":"onNextSlide","required":false,"type":{"name":"(() => void)"}},"onPreviousSlide":{"description":"Called when previous slider is shown","name":"onPreviousSlide","required":false,"type":{"name":"(() => void)"}},"onSlideChange":{"description":"Called with slide index when slide changes","name":"onSlideChange","required":false,"type":{"name":"((index: number) => void)"}},"orientation":{"description":"Carousel orientation, \'horizontal\' by default","name":"orientation","required":false,"type":{"name":"\\"horizontal\\" | \\"vertical\\"","raw":"\\"horizontal\\" | \\"vertical\\" | undefined","value":[{"value":"undefined"},{"value":"\\"horizontal\\""},{"value":"\\"vertical\\""}]}},"plugins":{"description":"An array of embla plugins","name":"plugins","required":false,"type":{"name":"CreatePluginType[]"}},"previousControlIcon":{"description":"Icon of the previous control","name":"previousControlIcon","required":false,"type":{"name":"React.ReactNode"}},"previousControlProps":{"description":"Props passed down to previous control","name":"previousControlProps","required":false,"type":{"name":"React.ComponentPropsWithoutRef<\\"button\\">"}},"skipSnaps":{"description":"Allow the carousel to skip scroll snaps if it is dragged vigorously. Note that this option will be ignored if the dragFree option is set to true, false by default","name":"skipSnaps","required":false,"type":{"name":"boolean"}},"slideGap":{"description":"Key of theme.spacing or number to set gap between slides","name":"slideGap","required":false,"type":{"name":"StyleProp"}},"slideSize":{"description":"Controls slide width based on viewport width, \'100%\' by default","name":"slideSize","required":false,"type":{"name":"StyleProp"}},"slidesToScroll":{"description":"Number of slides that will be scrolled with next/previous buttons, 1 by default","name":"slidesToScroll","required":false,"type":{"name":"number | \\"auto\\""}},"speed":{"description":"Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling.","name":"speed","required":false,"type":{"name":"number"}},"withControls":{"description":"Determines whether next/previous controls should be displayed, true by default","name":"withControls","required":false,"type":{"name":"boolean"}},"withIndicators":{"description":"Determines whether indicators should be displayed, false by default","name":"withIndicators","required":false,"type":{"name":"boolean"}},"withKeyboardEvents":{"description":"Determines whether arrow key should switch slides, true by default","name":"withKeyboardEvents","required":false,"type":{"name":"boolean"}}}},"Dropzone":{"props":{"accept":{"description":"Mime types of the files that dropzone can accepts. By default, dropzone accepts all file types.","name":"accept","required":false,"type":{"name":"string[] | Accept"}},"acceptColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Accept, theme.primaryColor by default","name":"acceptColor","required":false,"type":{"name":"MantineColor"}},"activateOnClick":{"description":"If false, disables click to open the native file selection dialog","name":"activateOnClick","required":false,"type":{"name":"boolean"}},"activateOnDrag":{"description":"If false, disables drag \'n\' drop","name":"activateOnDrag","required":false,"type":{"name":"boolean"}},"activateOnKeyboard":{"description":"If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state.","name":"activateOnKeyboard","required":false,"type":{"name":"boolean"}},"autoFocus":{"description":"Set to autofocus the root element","name":"autoFocus","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether files capturing should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"dragEventsBubbling":{"description":"If false, stops drag event propagation to parents","name":"dragEventsBubbling","required":false,"type":{"name":"boolean"}},"enablePointerEvents":{"description":"Determines whether pointer events should be enabled on the inner element, false by default","name":"enablePointerEvents","required":false,"type":{"name":"boolean"}},"getFilesFromEvent":{"description":"Use this to provide a custom file aggregator","name":"getFilesFromEvent","required":false,"type":{"name":"((event: DropEvent) => Promise<(File | DataTransferItem)[]>)"}},"loaderProps":{"description":"Props passed down to the Loader component","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether a loading overlay should be displayed over the dropzone, false by default","name":"loading","required":false,"type":{"name":"boolean"}},"maxFiles":{"description":"Maximum number of files that can be picked at once","name":"maxFiles","required":false,"type":{"name":"number"}},"maxSize":{"description":"Maximum file size in bytes","name":"maxSize","required":false,"type":{"name":"number"}},"multiple":{"description":"Determines whether multiple files can be dropped to the dropzone or selected from file system picker, true by default","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Name of the form control. Submitted with the form as part of a name/value pair.","name":"name","required":false,"type":{"name":"string"}},"onDragEnter":{"description":"Called when the dragenter event occurs","name":"onDragEnter","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragLeave":{"description":"Called when the dragleave event occurs","name":"onDragLeave","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragOver":{"description":"Called when the dragover event occurs","name":"onDragOver","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDrop":{"description":"Called when valid files are dropped to the dropzone","name":"onDrop","required":true,"type":{"name":"(files: FileWithPath[]) => void"}},"onDropAny":{"description":"Called when any files are dropped to the dropzone","name":"onDropAny","required":false,"type":{"name":"((files: FileWithPath[], fileRejections: FileRejection[]) => void)"}},"onFileDialogCancel":{"description":"Called when user closes the file selection dialog with no selection","name":"onFileDialogCancel","required":false,"type":{"name":"(() => void)"}},"onFileDialogOpen":{"description":"Called when user opens the file selection dialog","name":"onFileDialogOpen","required":false,"type":{"name":"(() => void)"}},"onReject":{"description":"Called when dropped files do not meet file restrictions","name":"onReject","required":false,"type":{"name":"((fileRejections: FileRejection[]) => void)"}},"openRef":{"description":"A ref function which when called opens the file system file picker","name":"openRef","required":false,"type":{"name":"ForwardedRef<() => void> | undefined"}},"preventDropOnDocument":{"description":"If false, allow dropped items to take over the current browser window","name":"preventDropOnDocument","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rejectColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Reject, \'red\' by default","name":"rejectColor","required":false,"type":{"name":"MantineColor"}},"useFsAccessApi":{"description":"Set to true to use the File System Access API to open the file picker instead of using an click event, defaults to true","name":"useFsAccessApi","required":false,"type":{"name":"boolean"}},"validator":{"description":"Custom validation function. It must return null if there\'s no errors.","name":"validator","required":false,"type":{"name":"((file: T) => FileError | FileError[] | null)"}}}},"DropzoneFullScreen":{"props":{"accept":{"description":"Mime types of the files that dropzone can accepts. By default, dropzone accepts all file types.","name":"accept","required":false,"type":{"name":"string[] | Accept"}},"acceptColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Accept, theme.primaryColor by default","name":"acceptColor","required":false,"type":{"name":"MantineColor"}},"activateOnClick":{"description":"If false, disables click to open the native file selection dialog","name":"activateOnClick","required":false,"type":{"name":"boolean"}},"activateOnDrag":{"description":"If false, disables drag \'n\' drop","name":"activateOnDrag","required":false,"type":{"name":"boolean"}},"activateOnKeyboard":{"description":"If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state.","name":"activateOnKeyboard","required":false,"type":{"name":"boolean"}},"active":{"description":"Determines whether user can drop files to browser window, true by default","name":"active","required":false,"type":{"name":"boolean"}},"autoFocus":{"description":"Set to autofocus the root element","name":"autoFocus","required":false,"type":{"name":"boolean"}},"disabled":{"description":"Determines whether files capturing should be disabled, false by default","name":"disabled","required":false,"type":{"name":"boolean"}},"dragEventsBubbling":{"description":"If false, stops drag event propagation to parents","name":"dragEventsBubbling","required":false,"type":{"name":"boolean"}},"enablePointerEvents":{"description":"Determines whether pointer events should be enabled on the inner element, false by default","name":"enablePointerEvents","required":false,"type":{"name":"boolean"}},"getFilesFromEvent":{"description":"Use this to provide a custom file aggregator","name":"getFilesFromEvent","required":false,"type":{"name":"((event: DropEvent) => Promise<(File | DataTransferItem)[]>)"}},"loaderProps":{"description":"Props passed down to the Loader component","name":"loaderProps","required":false,"type":{"name":"LoaderProps"}},"loading":{"description":"Determines whether a loading overlay should be displayed over the dropzone, false by default","name":"loading","required":false,"type":{"name":"boolean"}},"maxFiles":{"description":"Maximum number of files that can be picked at once","name":"maxFiles","required":false,"type":{"name":"number"}},"maxSize":{"description":"Maximum file size in bytes","name":"maxSize","required":false,"type":{"name":"number"}},"multiple":{"description":"Determines whether multiple files can be dropped to the dropzone or selected from file system picker, true by default","name":"multiple","required":false,"type":{"name":"boolean"}},"name":{"description":"Name of the form control. Submitted with the form as part of a name/value pair.","name":"name","required":false,"type":{"name":"string"}},"onDragEnter":{"description":"Called when the dragenter event occurs","name":"onDragEnter","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragLeave":{"description":"Called when the dragleave event occurs","name":"onDragLeave","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDragOver":{"description":"Called when the dragover event occurs","name":"onDragOver","required":false,"type":{"name":"((event: DragEvent) => void)"}},"onDrop":{"description":"Called when valid files are dropped to the dropzone","name":"onDrop","required":true,"type":{"name":"(files: FileWithPath[]) => void"}},"onDropAny":{"description":"Called when any files are dropped to the dropzone","name":"onDropAny","required":false,"type":{"name":"((files: FileWithPath[], fileRejections: FileRejection[]) => void)"}},"onFileDialogCancel":{"description":"Called when user closes the file selection dialog with no selection","name":"onFileDialogCancel","required":false,"type":{"name":"(() => void)"}},"onFileDialogOpen":{"description":"Called when user opens the file selection dialog","name":"onFileDialogOpen","required":false,"type":{"name":"(() => void)"}},"onReject":{"description":"Called when dropped files do not meet file restrictions","name":"onReject","required":false,"type":{"name":"((fileRejections: FileRejection[]) => void)"}},"openRef":{"description":"A ref function which when called opens the file system file picker","name":"openRef","required":false,"type":{"name":"ForwardedRef<() => void> | undefined"}},"portalProps":{"description":"Props to pass down to the portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"preventDropOnDocument":{"description":"If false, allow dropped items to take over the current browser window","name":"preventDropOnDocument","required":false,"type":{"name":"boolean"}},"radius":{"description":"Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem, theme.defaultRadius by default","name":"radius","required":false,"type":{"name":"MantineRadius | number"}},"rejectColor":{"description":"Key of theme.colors or any valid CSS color to set colors of Dropzone.Reject, \'red\' by default","name":"rejectColor","required":false,"type":{"name":"MantineColor"}},"useFsAccessApi":{"description":"Set to true to use the File System Access API to open the file picker instead of using an click event, defaults to true","name":"useFsAccessApi","required":false,"type":{"name":"boolean"}},"validator":{"description":"Custom validation function. It must return null if there\'s no errors.","name":"validator","required":false,"type":{"name":"((file: T) => FileError | FileError[] | null)"}},"withinPortal":{"description":"Determines whether component should be rendered within Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"z-index value, 9999 by default","name":"zIndex","required":false,"type":{"name":"ZIndex"}}}},"CodeHighlight":{"props":{"code":{"description":"Code to highlight","name":"code","required":true,"type":{"name":"string"}},"copiedLabel":{"description":"Copied tooltip label, \'Copied\' by default","name":"copiedLabel","required":false,"type":{"name":"string"}},"copyLabel":{"description":"Copy tooltip label, \'Copy code\' by default","name":"copyLabel","required":false,"type":{"name":"string"}},"highlightOnClient":{"description":"Determines whether code should be highlighted only after component is mounted to the dom (disables code highlight on server), false by default","name":"highlightOnClient","required":false,"type":{"name":"boolean"}},"language":{"description":"Code language, \'tsx\' by default","name":"language","required":false,"type":{"name":"string"}},"withCopyButton":{"description":"Determines whether copy button should be displayed, true by default","name":"withCopyButton","required":false,"type":{"name":"boolean"}}}},"CodeHighlightTabs":{"props":{"activeTab":{"description":"Index of controlled active tab state","name":"activeTab","required":false,"type":{"name":"number"}},"code":{"description":"Code to highlight with meta data (file name and icon)","name":"code","required":true,"type":{"name":"CodeHighlightTabsCode | CodeHighlightTabsCode[]"}},"collapseCodeLabel":{"description":"Collapse button label and tooltip, \'Collapse code\' by default","name":"collapseCodeLabel","required":false,"type":{"name":"string"}},"copiedLabel":{"description":"Copied tooltip label, \'Copied\' by default","name":"copiedLabel","required":false,"type":{"name":"string"}},"copyLabel":{"description":"Copy tooltip label, \'Copy code\' by default","name":"copyLabel","required":false,"type":{"name":"string"}},"defaultActiveTab":{"description":"Default active tab index","name":"defaultActiveTab","required":false,"type":{"name":"number"}},"defaultExpanded":{"description":"Uncontrolled expanded state initial value","name":"defaultExpanded","required":false,"type":{"name":"boolean"}},"expandCodeLabel":{"description":"Expand button label and tooltip, \'Expand code\' by default","name":"expandCodeLabel","required":false,"type":{"name":"string"}},"expanded":{"description":"Controlled expanded state","name":"expanded","required":false,"type":{"name":"boolean"}},"getFileIcon":{"description":"Function that returns icon based on file name","name":"getFileIcon","required":false,"type":{"name":"((fileName: string) => ReactNode)"}},"maxCollapsedHeight":{"description":"max-height of code in collapsed state","name":"maxCollapsedHeight","required":false,"type":{"name":"MaxHeight"}},"onExpandedChange":{"description":"Called when expanded state changes","name":"onExpandedChange","required":false,"type":{"name":"((expanded: boolean) => void)"}},"onTabChange":{"description":"Called when tab changes","name":"onTabChange","required":false,"type":{"name":"((tab: number) => void)"}},"withCopyButton":{"description":"Determines whether copy button should be displayed, true by default","name":"withCopyButton","required":false,"type":{"name":"boolean"}},"withExpandButton":{"description":"Determines whether to show the expand button, false by default","name":"withExpandButton","required":false,"type":{"name":"boolean"}},"withHeader":{"description":"Determines whether header with file names and copy button should be rendered, true by default","name":"withHeader","required":false,"type":{"name":"boolean"}}}},"InlineCodeHighlight":{"props":{"code":{"description":"Code to highlight","name":"code","required":true,"type":{"name":"string"}},"language":{"description":"Code language, \'tsx\' by default","name":"language","required":false,"type":{"name":"string"}}}},"NavigationProgress":{"props":{"color":{"description":"Key of theme.colors of any other valid CSS color, theme.primaryColor by default","name":"color","required":false,"type":{"name":"MantineColor"}},"initialProgress":{"description":"Initial progress value, 0 by default","name":"initialProgress","required":false,"type":{"name":"number"}},"portalProps":{"description":"Props to pass down to the Portal when withinPortal is true","name":"portalProps","required":false,"type":{"name":"Omit"}},"size":{"description":"Controls height of the progress bar","name":"size","required":false,"type":{"name":"number"}},"stepInterval":{"description":"Step interval in ms, 500 by default","name":"stepInterval","required":false,"type":{"name":"number"}},"store":{"description":"Component store, controls state","name":"store","required":false,"type":{"name":"NprogressStore"}},"withinPortal":{"description":"Determines whether the progress bar should be rendered within Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Progressbar z-index, 9999 by default","name":"zIndex","required":false,"type":{"name":"ZIndex"}}}},"ModalsProvider":{"props":{"children":{"description":"Your app","name":"children","required":true,"type":{"name":"React.ReactNode"}},"labels":{"description":"Confirm modal labels","name":"labels","required":false,"type":{"name":"ConfirmLabels"}},"modalProps":{"description":"Shared Modal component props, applied for every modal","name":"modalProps","required":false,"type":{"name":"ModalSettings"}},"modals":{"description":"Predefined modals","name":"modals","required":false,"type":{"name":"Record>>"}}}},"RichTextEditor":{"props":{"children":{"description":"Child editor components","name":"children","required":true,"type":{"name":"React.ReactNode"}},"editor":{"description":"Tiptap editor instance","name":"editor","required":true,"type":{"name":"Editor | null"}},"labels":{"description":"Labels that are used in controls","name":"labels","required":false,"type":{"name":"Partial"}},"withCodeHighlightStyles":{"description":"Determines whether code highlight styles should be added, true by default","name":"withCodeHighlightStyles","required":false,"type":{"name":"boolean"}},"withTypographyStyles":{"description":"Determines whether typography styles should be added, true by default","name":"withTypographyStyles","required":false,"type":{"name":"boolean"}}}},"Notifications":{"props":{"autoClose":{"description":"Auto close timeout for all notifications in ms, false to disable auto close, can be overwritten for individual notifications in notifications.show function, 4000 by defualt","name":"autoClose","required":false,"type":{"name":"number | false"}},"containerWidth":{"description":"Notification width, cannot exceed 100%, 440 by default","name":"containerWidth","required":false,"type":{"name":"string | number"}},"limit":{"description":"Maximum number of notifications displayed at a time, other new notifications will be added to queue, 5 by default","name":"limit","required":false,"type":{"name":"number"}},"notificationMaxHeight":{"description":"Notification max-height, used for transitions, 200 by default","name":"notificationMaxHeight","required":false,"type":{"name":"string | number"}},"portalProps":{"description":"Props passed down to the Portal component","name":"portalProps","required":false,"type":{"name":"Omit"}},"position":{"description":"Notifications position, \'bottom-right\' by default","name":"position","required":false,"type":{"name":"\\"bottom-center\\" | \\"top-center\\" | \\"top-left\\" | \\"top-right\\" | \\"bottom-left\\" | \\"bottom-right\\"","raw":"\\"bottom-center\\" | \\"top-center\\" | \\"top-left\\" | \\"top-right\\" | \\"bottom-left\\" | \\"bottom-right\\" | undefined","value":[{"value":"undefined"},{"value":"\\"bottom-center\\""},{"value":"\\"top-center\\""},{"value":"\\"top-left\\""},{"value":"\\"top-right\\""},{"value":"\\"bottom-left\\""},{"value":"\\"bottom-right\\""}]}},"store":{"description":"Store for notifications state, can be used to create multiple instances of notifications system in your application","name":"store","required":false,"type":{"name":"NotificationsStore"}},"transitionDuration":{"description":"Notification transition duration in ms, 250 by default","name":"transitionDuration","required":false,"type":{"name":"number"}},"withinPortal":{"description":"Determines whether notifications container should be rendered inside Portal, true by default","name":"withinPortal","required":false,"type":{"name":"boolean"}},"zIndex":{"description":"Notifications container z-index, 400 by default","name":"zIndex","required":false,"type":{"name":"string | number"}}}}}'),s=o(74490),l=o(89114),c=o(60626),p=o(61461);let u={"{ (value: any, replacer?: ((this: any, key: string, value: any) => any), space?: string | number | undefined): string; (value: any, replacer?: (string | number)[] | null | undefined, space?: string | ... 1 more ... | undefined): string; } | undefined":"typeof JSON.stringify","((text: string, reviver?: ((this: any, key: string, value: any) => any)) => any) | undefined":"typeof JSON.parse"};function m(e){let{component:t,query:o}=e;if(!d[t])return(0,n.jsx)(c.z,{errorOf:"props"});let r=Object.keys(d[t].props).filter(e=>d[t].props[e].name.toLowerCase().includes(o.toLowerCase().trim())).map(e=>{let r=d[t].props[e];return(0,n.jsxs)(a.i.Tr,{children:[(0,n.jsxs)(a.i.Td,{style:{whiteSpace:"nowrap"},children:[(0,n.jsx)(i.y,{highlight:o,component:"span",fz:"sm",children:r.name}),r.required&&(0,n.jsxs)(Text.x,{component:"sup",c:"red",fz:"xs",children:[" ","*"]})]}),(0,n.jsx)(a.i.Td,{children:(0,n.jsx)(p.e,{children:r.type.name in u?u[r.type.name]:r.type.name})}),(0,n.jsx)(a.i.Td,{children:(0,n.jsx)(l.O,{fz:"sm",children:r.description})})]},e)});return 0===r.length?(0,n.jsx)(Text.x,{c:"dimmed",mb:"xl",fz:"sm",children:"Nothing found"}):(0,n.jsx)(s.U,{children:(0,n.jsx)(a.i.ScrollContainer,{minWidth:800,children:(0,n.jsxs)(a.i,{layout:"fixed",children:[(0,n.jsx)(a.i.Thead,{children:(0,n.jsxs)(a.i.Tr,{children:[(0,n.jsx)(a.i.Th,{w:210,children:"Name"}),(0,n.jsx)(a.i.Th,{w:310,children:"Type"}),(0,n.jsx)(a.i.Th,{children:"Description"})]})}),(0,n.jsx)(a.i.Tbody,{children:r})]})})})}var f=o(27854),h=o(57847),y=o(7033);function b(e){let{component:t,componentPrefix:o}=e;return o?o===t?t:"".concat(o,".").concat(t.replace(o,"")):t}var v=o(91333),g=o.n(v);function w(e){let{components:t,componentPrefix:o}=e,[a,i]=(0,r.useState)(""),d=t.map(e=>(0,n.jsxs)("div",{className:g().section,children:[(0,n.jsxs)(h.D,{order:2,className:g().title,children:[b({component:e,componentPrefix:o})," component props"]}),(0,n.jsx)(m,{component:e,query:a})]},e));return(0,n.jsxs)("div",{children:[(0,n.jsx)(y.o,{className:g().search,value:a,onChange:e=>i(e.currentTarget.value),leftSection:(0,n.jsx)(f.Z,{className:g().searchIcon}),placeholder:"Search props",radius:"md",size:"lg",autoFocus:!0}),d]})}},1103:function(e,t,o){"use strict";o.d(t,{Hx:function(){return tu},VX:function(){return tm},D5:function(){return tw},$w:function(){return tf}});var n={};o.r(n),o.d(n,{AccordionStylesApi:function(){return i.x},ActionIconGroupStylesApi:function(){return s},ActionIconStylesApi:function(){return d},AffixStylesApi:function(){return l},AlertStylesApi:function(){return c.g},AnchorStylesApi:function(){return u},AppShellStylesApi:function(){return m},AreaChartStylesApi:function(){return f},AspectRatioStylesApi:function(){return h},AutocompleteStylesApi:function(){return y.I},AvatarGroupStylesApi:function(){return v},AvatarStylesApi:function(){return b},BackgroundImageStylesApi:function(){return g},BadgeStylesApi:function(){return w.o},BarChartStylesApi:function(){return q},BlockquoteStylesApi:function(){return C},BreadcrumbsStylesApi:function(){return S},BurgerStylesApi:function(){return P},ButtonGroupStylesApi:function(){return D.R},ButtonStylesApi:function(){return D.B},CalendarHeaderStylesApi:function(){return V},CalendarStylesApi:function(){return U},CardStylesApi:function(){return R},CarouselStylesApi:function(){return x.J},CenterStylesApi:function(){return k},CheckboxGroupStylesApi:function(){return I.I},CheckboxStylesApi:function(){return I.B},ChipStylesApi:function(){return z},CloseButtonStylesApi:function(){return M},CodeHighlightStylesApi:function(){return O},CodeHighlightTabsStylesApi:function(){return A},CodeStylesApi:function(){return L},ColorInputStylesApi:function(){return T.B},ColorPickerStylesApi:function(){return E.L},ColorSwatchStylesApi:function(){return F},ComboboxLikeSelectors:function(){return W.d},ComboboxStylesApi:function(){return W.$},ContainerStylesApi:function(){return j},DateInputStylesApi:function(){return et},DatePickerInputStylesApi:function(){return ee},DatePickerStylesApi:function(){return J},DateTimePickerStylesApi:function(){return eo},DecadeLevelGroupStylesApi:function(){return _},DialogStylesApi:function(){return er},DividerStylesApi:function(){return ea},DonutChartStylesApi:function(){return ei},DrawerStylesApi:function(){return ed},DropzoneFullScreenStylesApi:function(){return el},DropzoneStylesApi:function(){return es},FieldsetStylesApi:function(){return ec},FileInputStylesApi:function(){return ep.T},FlexStylesApi:function(){return eu},GridStylesApi:function(){return em},GroupStylesApi:function(){return ef},HighlightStylesApi:function(){return eh},HoverCardStylesApi:function(){return eb},ImageStylesApi:function(){return ev},IndicatorStylesApi:function(){return eg},InlineCodeHighlightStylesApi:function(){return N},InputBaseStylesApi:function(){return B},InputStylesApi:function(){return Y.a},InputWrapperStylesApi:function(){return Y.X},JsonInputStylesApi:function(){return ew.P},KbdStylesApi:function(){return eq},LineChartStylesApi:function(){return eC},ListStylesApi:function(){return eS},LoaderStylesApi:function(){return eP},LoadingOverlayStylesApi:function(){return eD},MarkStylesApi:function(){return eR},MenuStylesApi:function(){return ex.k},ModalStylesApi:function(){return ek},MonthLevelGroupStylesApi:function(){return G},MonthPickerInputStylesApi:function(){return $},MonthPickerStylesApi:function(){return Z},MonthStylesApi:function(){return K},MultiSelectStylesApi:function(){return eI.L},NativeSelectStylesApi:function(){return ez.c},NavLinkStylesApi:function(){return eM},NotificationStylesApi:function(){return eL.$},NotificationsStylesApi:function(){return eN},NumberInputStylesApi:function(){return eA.L},OverlayStylesApi:function(){return eO},PaginationStylesApi:function(){return eT.E},PaperStylesApi:function(){return eE},PasswordInputStylesApi:function(){return eF.m},PillGroupStylesApi:function(){return eW.h},PillStylesApi:function(){return eW.K},PillsInputFieldStylesApi:function(){return eY},PillsInputStylesApi:function(){return ej},PinInputStylesApi:function(){return eB.l},PopoverStylesApi:function(){return ey.T},ProgressStylesApi:function(){return eK.S},RadioGroupStylesApi:function(){return eV.T},RadioStylesApi:function(){return eV.P},RatingStylesApi:function(){return e_},RichTextEditorStylesApi:function(){return eH},RingProgressStylesApi:function(){return eG},ScrollAreaStylesApi:function(){return eU},SegmentedControlStylesApi:function(){return eX.o},SelectStylesApi:function(){return eZ.i},SimpleGridStylesApi:function(){return eJ},SkeletonStylesApi:function(){return eQ},SliderStylesApi:function(){return e$.a},SparklineStylesApi:function(){return e0},SpoilerStylesApi:function(){return e1},SpotlightStylesApi:function(){return e2},StackStylesApi:function(){return e5},StepperStylesApi:function(){return e6.U},SwitchGroupStylesApi:function(){return e4._},SwitchStylesApi:function(){return e4.T},TableStylesApi:function(){return e9},TabsStylesApi:function(){return e7.Y},TagsInputStylesApi:function(){return e3.h},TextInputStylesApi:function(){return te.G},TextStylesApi:function(){return p},TextareaStylesApi:function(){return e8.g},ThemeIconStylesApi:function(){return tt},TimeInputStylesApi:function(){return en},TimelineStylesApi:function(){return to},TitleStylesApi:function(){return tn},TooltipStylesApi:function(){return tr},TypographyStylesProviderStylesApi:function(){return ta},UnstyledButtonStylesApi:function(){return ti},YearLevelGroupStylesApi:function(){return H},YearPickerInputStylesApi:function(){return Q},YearPickerStylesApi:function(){return X}});var r=o(24246);o(27378);var a=o(57847),i=o(92442);let d={selectors:{root:"Root element",loader:"`Loader` component, rendered inside root element when `loading` prop is set",icon:"Inner icon wrapper"},vars:{root:{"--ai-bg":"Controls `background`","--ai-hover":"Controls `background` when hovered","--ai-bd":"Controls `border`","--ai-color":"Controls icon `color`","--ai-hover-color":"Controls icon `color` when hovered","--ai-radius":"Controls `border-radius`","--ai-size":"Controls `width`, `height`, `min-width` and `min-height` styles"}},modifiers:[{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"},{modifier:"data-loading",selector:["root","icon"],condition:"`loading` prop is set"}]},s={selectors:{group:"Root element"},vars:{group:{"--ai-border-width":"Controls `border-width` of child ActionIcon components that are placed beside one another"}},modifiers:[{modifier:"data-orientation",selector:"group",value:"Value of `orientation` prop"}]},l={selectors:{root:"Root element"},vars:{root:{"--affix-z-index":"Controls `z-index` property","--affix-top":"Controls `top` property","--affix-bottom":"Controls `bottom` property","--affix-left":"Controls `left` property","--affix-right":"Controls `right` property"}}};var c=o(30345);let p={selectors:{root:"Root element"},vars:{root:{"--text-fz":"Controls `font-size` property","--text-lh":"Controls `line-height` property","--text-gradient":"Text fill gradient","--text-line-clamp":"Number of lines that should be visible"}},modifiers:[{modifier:"data-truncate",selector:"root",value:"Value of `truncate` prop",condition:"`truncate` prop is set"},{modifier:"data-line-clamp",selector:"root",condition:"`lineClamp` prop is a number"},{modifier:"data-inline",selector:"root",condition:"`inline` prop is set"},{modifier:"data-inherit",selector:"root",condition:"`inherit` prop is set"}]},u={...p,modifiers:[...p.modifiers,{modifier:"data-underline",selector:"root",value:"Value of `underline` prop"}]},m={selectors:{root:"Root element (`AppShell` component)",navbar:"`AppShell.Navbar` root element",header:"`AppShell.Header` root element",main:"`AppShell.Main` root element",aside:"`AppShell.Aside` root element",footer:"`AppShell.Footer` root element",section:"`AppShell.Section` root element"},vars:{root:{"--app-shell-transition-duration":"Controls transition duration of all children","--app-shell-transition-timing-function":"Controls transition timing function of all children"}},modifiers:[{modifier:"data-resizing",selector:"root",condition:"User is resizing the window"},{modifier:"data-layout",selector:"root",value:"Value of the `layout` prop"},{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"},{modifier:"data-with-border",selector:["navbar","header","aside","footer"],condition:"`withBorder` prop is set either on the `AppShell` or on the associated component"},{modifier:"data-grow",selector:"section",condition:"`grow` prop is set on the `AppShell.Section`"}]},f={selectors:{root:"Root element",area:"Area of the chart",axis:"X and Y axis of the chart",container:"Recharts ResponsiveContainer component",grid:"Recharts CartesianGrid component",legend:"Legend root element",legendItem:"Legend item representing data series",legendItemColor:"Legend item color",legendItemName:"Legend item name",tooltip:"Tooltip root element",tooltipBody:"Tooltip wrapper around all items",tooltipItem:"Tooltip item representing data series",tooltipItemBody:"Tooltip item wrapper around item color and name",tooltipItemColor:"Tooltip item color",tooltipItemName:"Tooltip item name",tooltipItemData:"Tooltip item data",tooltipLabel:"Label of the tooltip",referenceLine:"Reference line"},vars:{root:{"--chart-grid-color":"Controls color of the grid and cursor lines","--chart-text-color":"Controls color of the axis labels"}},modifiers:[]},h={selectors:{root:"Root element"},vars:{root:{"--ar-ratio":"Aspect ratio"}}};var y=o(87961);let b={selectors:{root:"Root element",image:"`img` element",placeholder:"Avatar placeholder, displayed when the image cannot be loaded"},vars:{root:{"--avatar-bd":"Controls placeholder `border`","--avatar-bg":"Controls placeholder `background`","--avatar-color":"Controls placeholder text `color`","--avatar-size":"Controls `width`, `min-width` and `height`","--avatar-radius":"Controls `border-radius`"}}},v={selectors:{group:"Root element"},vars:{group:{"--ag-spacing":"Controls negative spacing between avatars"}}},g={selectors:{root:"Root element"},vars:{root:{"--bi-radius":"Controls `border-radius`"}}};var w=o(68738);let q={selectors:{root:"Root element",bar:"Bar of the chart",axis:"X and Y axis of the chart",container:"Recharts ResponsiveContainer component",grid:"Recharts CartesianGrid component",legend:"Legend root element",legendItem:"Legend item representing data series",legendItemColor:"Legend item color",legendItemName:"Legend item name",tooltip:"Tooltip root element",tooltipBody:"Tooltip wrapper around all items",tooltipItem:"Tooltip item representing data series",tooltipItemBody:"Tooltip item wrapper around item color and name",tooltipItemColor:"Tooltip item color",tooltipItemName:"Tooltip item name",tooltipItemData:"Tooltip item data",tooltipLabel:"Label of the tooltip",referenceLine:"Reference line"},vars:{root:{"--chart-grid-color":"Controls color of the grid and cursor lines","--chart-text-color":"Controls color of the axis labels","--chart-cursor-fill":"Controls fill color of the cursor line"}},modifiers:[]},C={selectors:{root:"Root element",icon:"Icon element",cite:"Cite element"},vars:{root:{"--bq-bd":"Controls `border`","--bq-bg-dark":"Controls `background-color` in dark color scheme","--bq-bg-light":"Controls `background-color` in light color scheme","--bq-icon-size":"Controls `width` and `height` of the icon","--bq-radius":"Controls `border-radius`"}}},S={selectors:{root:"Root element",separator:"Separator between children",breadcrumb:"Breadcrumb item"},vars:{root:{"--bc-separator-margin":"Control left and right `margin` of separator"}}},P={selectors:{root:"Root element (button)",burger:"Inner element that contains burger lines"},vars:{root:{"--burger-color":"Controls background-color of lines","--burger-size":"Controls width and height of the button","--burger-transition-duration":"Controls transition-duration of lines","--burger-transition-timing-function":"Controls transition-timing-function of lines"}},modifiers:[{modifier:"data-opened",selector:"burger",condition:"opened prop is set"}]};var D=o(86140);let R={selectors:{root:"Root element",section:"`Card.Section` root element"},vars:{root:{"--card-padding":"Controls `padding` of the card, also used to control `Card.Section` spacing"}},modifiers:[{modifier:"data-first-section",selector:"section",condition:"`Card.Section` is the child of the `Card`"},{modifier:"data-last-section",selector:"section",condition:"`Card.Section` is the last child of the `Card`"},{modifier:"data-with-border",selector:"root",condition:"`withBorder` prop is set on `Card` component"},{modifier:"data-with-border",selector:"section",condition:"`withBorder` prop is set on `Card.Section` component"},{modifier:"data-inherit-padding",selector:"section",condition:"`inheritPadding` prop is set on `Card.Section` component"}]};var x=o(23570);let k={selectors:{root:"Root element"},vars:{}};var I=o(86423);let z={selectors:{root:"Root element",checkIcon:"Check icon, visible when checked prop is true",iconWrapper:"Wraps `checkIcon` for alignment",input:"Input element, hidden by default",label:"Input label, used as a chip body"},vars:{root:{"--chip-fz":"Controls `font-size`","--chip-size":"Controls `height`","--chip-icon-size":"Controls width and height of the icon","--chip-padding":"Controls horizontal padding when chip is not checked","--chip-checked-padding":"Controls horizontal padding when chip is checked","--chip-radius":"Controls `border-radius`","--chip-bg":"Controls `background-color` when chip is checked","--chip-hover":"Controls `background-color` when chip is checked and hovered","--chip-color":"Controls `color` when chip is checked","--chip-bd":"Controls border when chip is checked","--chip-spacing":"Controls spacing between check icon and label"}},modifiers:[{modifier:"data-checked",selector:"label",condition:"Chip is checked"},{modifier:"data-disabled",selector:"label",condition:"`disabled` prop is set"}]},M={selectors:{root:"Root element"},vars:{root:{"--cb-icon-size":"Controls `width` of the `X` icon","--cb-radius":"Controls `border-radius` of the button","--cb-size":"Controls `width` and `height` of the button"}}},L={selectors:{root:"Root element"},vars:{root:{"--code-bg":"Controls `background-color`"}},modifiers:[{modifier:"data-block",selector:"root",condition:"`block` prop is set"}]},A={selectors:{root:"Root element",pre:"Pre element, contains code element",codeWrapper:"Wrapper around code element, used for expand/collapse logic",code:"Code element, contains highlighted code",header:"Header element, contains copy button and files names",controls:"Controls container, contains control buttons (copy/collapse, etc.)",control:"Control button, copy/collapse, etc.",files:"Files names list",file:"File name",fileIcon:"File icon",showCodeButton:"Button that reveals full code when it is collapsed"},vars:{}},N={selectors:{code:"Root element"},vars:{}},O={selectors:{root:"Root element",pre:"Pre element, contains code element",code:"Code element",copy:"Copy button"},vars:{}};var T=o(27882),E=o(64954);let F={selectors:{root:"Root element",alphaOverlay:"Overlay with checkerboard pattern",shadowOverlay:"Overlay with inner box-shadow",colorOverlay:"Overlay with given color background",childrenOverlay:"Overlay with `children` inside"},vars:{root:{"--cs-radius":"Controls `border-radius` of all overlays and `root` element","--cs-size":"Controls `width`, `height`, `min-width` and `min-height` of the `root` element"}}};var W=o(92511);let j={selectors:{root:"Root element"},vars:{root:{"--container-size":"Controls container `max-width`"}}};var Y=o(50352);let B={selectors:{...Y.a.selectors,...Y.X.selectors},vars:{}},K={selectors:{monthThead:"thead element of month table",monthRow:"tr element of month table",monthTbody:"tbody element of month table",monthCell:"td element of month table",month:"Month table element",weekdaysRow:"Weekdays tr element",weekday:"Weekday th element",day:"Month day control"},vars:{},modifiers:[{modifier:"data-with-spacing",selector:"monthCell",condition:"`withCellSpacing` prop is set"},{modifier:"data-today",selector:"day",condition:"Date is the same as new Date()"},{modifier:"data-hidden",selector:"day",condition:"Day is outside of current month and `hideOutsideDates` is set"},{modifier:"data-disabled",selector:"day",condition:"Day disabled by one of the props (`excludeDate`, `getDayProps`, etc.)"},{modifier:"data-weekend",selector:"day",condition:"Day is weekend"},{modifier:"data-outside",selector:"day",condition:"Day is outside of the current month"},{modifier:"data-selected",selector:"day",condition:"Day is selected"},{modifier:"data-in-range",selector:"day",condition:"Day is in range selection"},{modifier:"data-first-in-range",selector:"day",condition:"Day is first in range selection"},{modifier:"data-last-in-range",selector:"day",condition:"Day is last in range selection"}]},V={selectors:{calendarHeader:"Calendar header root element",calendarHeaderControl:"Previous/next calendar header controls",calendarHeaderControlIcon:"Icon of previous/next calendar header controls",calendarHeaderLevel:"Level control (changes levels when clicked, month -> year -> decade)"},vars:{calendarHeader:{"--dch-control-size":"Controls size of the previous/next and level controls","--dch-fz":"Controls font-size of the previous/next and level controls"}},modifiers:[{modifier:"data-direction",selector:"calendarHeaderControl",value:'`"previous"` or `"next"` depending on the control type'},{modifier:"data-disabled",selector:"calendarHeaderControl",condition:"Control is disabled for any reason"}]},_={selectors:{...V.selectors,levelsGroup:"Group of decades levels",yearsList:"Years list table element",yearsListRow:"Years list row element",yearsListCell:"Years list cell element",yearsListControl:"Button used to pick months and years"},vars:{}},H={selectors:{...V.selectors,levelsGroup:"Group of decades levels",monthsList:"Years list table element",monthsListRow:"Years list row element",monthsListCell:"Years list cell element",monthsListControl:"Button used to pick months and years"},vars:{}},G={selectors:{...V.selectors,levelsGroup:"Group of decades levels",...K.selectors},vars:{}},U={selectors:{...V.selectors,..._.selectors,...H.selectors,...G.selectors},vars:{},modifiers:[...V.modifiers,...K.modifiers]},X={selectors:{...V.selectors,..._.selectors},vars:{},modifiers:V.modifiers},Z={selectors:{...V.selectors,..._.selectors,...H.selectors},vars:{},modifiers:V.modifiers},J={selectors:{...V.selectors,..._.selectors,...H.selectors,...G.selectors},vars:{},modifiers:[...V.modifiers,...K.modifiers]},Q={selectors:{...B.selectors,...X.selectors,placeholder:"Placeholder element"},vars:{},modifiers:X.modifiers},$={selectors:{...B.selectors,...Z.selectors,placeholder:"Placeholder element"},vars:{},modifiers:Z.modifiers},ee={selectors:{...B.selectors,...J.selectors,placeholder:"Placeholder element"},vars:{},modifiers:J.modifiers},et={selectors:{...B.selectors,...J.selectors},vars:{},modifiers:J.modifiers},eo={selectors:{...B.selectors,...J.selectors,timeWrapper:"Wrapper around time input and submit button",timeInput:"TimeInput",submitButton:"Submit button"},vars:{},modifiers:J.modifiers},en=B,er={selectors:{root:"Root element",closeButton:"Close button"},vars:{root:{"--dialog-size":"Controls `width` of the dialog"}}},ea={selectors:{root:"Root element",label:"Label element"},vars:{root:{"--divider-border-style":"Controls `border-style`","--divider-color":"Controls `border-color`","--divider-size":"Controls `border-width`"}},modifiers:[{modifier:"data-with-label",selector:"root",condition:"`label` prop is truthy"},{modifier:"data-orientation",selector:"root",value:"Value of `orientation` prop"},{modifier:"data-position",selector:"label",value:"Value of `labelPosition` prop"}]},ei={selectors:{root:"Root element",label:"Chart label, controlled by `chartLabel` prop"},vars:{root:{"--chart-labels-color":"Controls color of the chart labels","--chart-size":"Controls size of the chart","--chart-stroke-color":"Controls color of the chart stroke"}},modifiers:[]},ed={selectors:{root:"Root element",inner:"Element used to center modal, has fixed position, takes entire screen",content:"`Drawer.Content` root element",header:"Contains title and close button",overlay:"Overlay displayed under the `Drawer.Content`",title:"Drawer title (h2 tag), displayed in the header",body:"Drawer body, displayed after header",close:"Close button"},vars:{root:{"--drawer-offset":"Controls `margin` of `Drawer.Content`","--drawer-size":"Controls `width` of `Drawer.Content`","--drawer-flex":"Controls `flex` property of `Drawer.Content`","--drawer-align":"Controls `align-items` property of `Drawer.Content`","--drawer-justify":"Controls `justify-content` property of `Drawer.Content`","--drawer-height":"Controls `height` property of `Drawer.Content`"}}},es={selectors:{root:"Dropzone root element",inner:"Dropzone inner element (wraps children)"},vars:{root:{"--dropzone-accept-bg":"Controls `background-color` when file is accepted","--dropzone-reject-bg":"Controls `background-color` when file is rejected","--dropzone-accept-color":"Controls `color` when file is accepted","--dropzone-reject-color":"Controls `color` when file is rejected","--dropzone-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-accept",selector:"root",condition:"Files that are dragged over the dropzone are accepted"},{modifier:"data-reject",selector:"root",condition:"Files that are dragged over the dropzone are rejected"},{modifier:"data-idle",selector:"root",condition:"Dropzone is idle"},{modifier:"data-loading",selector:"root",condition:"`loading` prop is set"},{modifier:"data-activate-on-click",selector:"root",condition:"`activateOnClick` prop is `true`"}]},el={selectors:{fullScreen:"Dropzone.Fullscreen root element",...es.selectors},vars:{}},ec={selectors:{root:"Root element",legend:"Legend element"},vars:{root:{"--fieldset-radius":"Controls `border-radius`"}}};var ep=o(29237);let eu={selectors:{root:"Root element"},vars:{}},em={selectors:{root:"Root element",inner:"Columns wrapper",col:"`Grid.Col` root element"},vars:{root:{"--grid-overflow":"Controls `overflow` property","--grid-align":"Controls `align-items` property","--grid-justify":"Controls `justify-content` property"}}},ef={selectors:{root:"Root element"},vars:{root:{"--group-align":"Controls `align-items` property","--group-justify":"Controls `justify-content` property","--group-gap":"Controls `gap` property","--group-wrap":"Controls `flex-wrap` property","--group-child-width":"Controls `max-width` of child elements, applied when grow prop is set and `preventGrowOverflow` is `true`"}},modifiers:[{modifier:"data-grow",selector:"root",condition:"`grow` prop is set"}]},eh={selectors:{root:"Root element"},vars:{}};var ey=o(62623);let eb=ey.T,ev={selectors:{root:"Root element"},vars:{root:{"--image-object-fit":"Controls `object-fit` property","--image-radius":"Controls `border-radius` property"}},modifiers:[{modifier:"data-fallback",selector:"root",condition:"Image failed to load"}]},eg={selectors:{root:"Root element",indicator:"Indicator element"},vars:{root:{"--indicator-bottom":"Controls `bottom` style","--indicator-left":"Controls `left` style","--indicator-right":"Controls `right` style","--indicator-top":"Controls `top` style","--indicator-radius":"Controls `border-radius`","--indicator-size":"Controls `min-width` and `height`","--indicator-translate-x":"Controls `translateX` style, used for positioning","--indicator-translate-y":"Controls `translateY` style, used for positioning","--indicator-z-index":"Controls `z-index` style","--indicator-color":"Controls `background-color`","--indicator-text-color":"Controls `color`"}},modifiers:[{modifier:"data-inline",selector:"root",condition:"`inline` prop is set"},{modifier:"data-with-label",selector:"indicator",condition:"`label` prop is set"},{modifier:"data-with-border",selector:"indicator",condition:"`withBorder` prop is set"},{modifier:"data-processing",selector:"indicator",condition:"`processing` prop is set"}]};var ew=o(55838);let eq={selectors:{root:"Root element"},vars:{root:{"--kbd-fz":"Controls `font-size`","--kbd-padding":"Controls `padding`"}}},eC={selectors:{root:"Root element",line:"Line of the chart",axis:"X and Y axis of the chart",container:"Recharts ResponsiveContainer component",grid:"Recharts CartesianGrid component",legend:"Legend root element",legendItem:"Legend item representing data series",legendItemColor:"Legend item color",legendItemName:"Legend item name",tooltip:"Tooltip root element",tooltipBody:"Tooltip wrapper around all items",tooltipItem:"Tooltip item representing data series",tooltipItemBody:"Tooltip item wrapper around item color and name",tooltipItemColor:"Tooltip item color",tooltipItemName:"Tooltip item name",tooltipItemData:"Tooltip item data",tooltipLabel:"Label of the tooltip",referenceLine:"Reference line"},vars:{root:{"--chart-grid-color":"Controls color of the grid and cursor lines","--chart-text-color":"Controls color of the axis labels"}},modifiers:[]},eS={selectors:{root:"Root element",item:"ListItem root element",itemIcon:"ListItem icon",itemLabel:"ListItem content",itemWrapper:"ListItem wrapper element, container, icon and content"},vars:{root:{"--list-fz":"Controls `font-size`","--list-lh":"Controls `line-height`","--list-spacing":"Controls spacing between items"}},modifiers:[{modifier:"data-with-padding",selector:"root",condition:"`withPadding` prop is set"},{modifier:"data-centered",selector:"item",condition:"`center` prop is set on List component"},{modifier:"data-with-icon",selector:"item",condition:"`icon` prop is set on ListItem component"}]},eP={selectors:{root:"Root element"},vars:{root:{"--loader-size":"Controls loader size (usually `width` and `height`, in some cases only `width`)","--loader-color":"Control loader color"}}},eD={selectors:{root:"Root element",overlay:"`Overlay` component",loader:"`Loader` component"},vars:{root:{"--lo-z-index":"Controls `z-index` of the overlay and loader"}}},eR={selectors:{root:"Root element"},vars:{root:{"--mark-bg-dark":"Controls `background-color` in dark color scheme","--mark-bg-light":"Controls `background-color` for light color scheme"}}};var ex=o(91516);let ek={selectors:{root:"Root element",inner:"Element used to center modal, has fixed position, takes entire screen",content:"`Modal.Content` root element",header:"Contains title and close button",overlay:"Overlay displayed under the `Modal.Content`",title:"Modal title (h2 tag), displayed in the header",body:"Modal body, displayed after header",close:"Close button"},vars:{root:{"--modal-radius":"Controls `border-radius` of `Modal.Content`","--modal-size":"Controls `width` of `Modal.Content`","--modal-x-offset":"Controls left and right `padding` of the inner element used to position `Modal.Content`","--modal-y-offset":"Controls top and bottom `padding` of the inner element used to position `Modal.Content`"}},modifiers:[{modifier:"data-full-screen",selector:"root",condition:"`fullScreen` prop is set"},{modifier:"data-centered",selector:"root",condition:"`centered` prop is set"}]};var eI=o(7634),ez=o(59325);let eM={selectors:{root:"Root element",body:"Contains label and description",section:"Left and right sections",label:"NavLink label",description:"Dimmed description displayed below the label",children:"Wrapper around nested links",chevron:"Default chevron icon"},vars:{root:{"--nl-bg":"Controls link `background-color`","--nl-color":"Controls link `color`","--nl-hover":"Controls link `background-color` when hovered"},children:{"--nl-offset":"Controls nested links offset"}},modifiers:[{modifier:"data-active",selector:"root",condition:"`active` prop is set"}]};var eL=o(37951),eA=o(68170);let eN={selectors:{root:"Notifications container, contains all notifications",notification:"Single notification"},vars:{root:{"--notifications-container-width":"Controls notifications container `max-width`","--notifications-left":"Controls notifications container `left`","--notifications-right":"Controls notifications container `right`","--notifications-top":"Controls notifications container `top`","--notifications-transform":"Controls notifications container `transform`","--notifications-z-index":"Controls notifications container `z-index`"}}},eO={selectors:{root:"Root element"},vars:{root:{"--overlay-bg":"Controls `background-color`","--overlay-filter":"Controls `backdrop-filter`","--overlay-radius":"Controls `border-radius`","--overlay-z-index":"Controls `z-index`"}},modifiers:[{modifier:"data-center",selector:"root",condition:"`center` prop is set"},{modifier:"data-fixed",selector:"root",condition:"`fixed` prop is set"}]};var eT=o(37731);let eE={selectors:{root:"Root element"},vars:{root:{"--paper-radius":"Controls `border-radius`","--paper-shadow":"Controls `box-shadow`"}},modifiers:[{modifier:"data-with-border",selector:"root",condition:"`withBorderProp` is set"}]};var eF=o(20827),eW=o(81581);let ej={selectors:{...Y.a.selectors,...Y.X.selectors},vars:{}},eY={selectors:{field:"Root element"},vars:{},modifiers:[{modifier:"data-type",selector:"field",value:"Value of `type` prop"},{modifier:"data-disabled",selector:"field",condition:"`disabled` prop is set"}]};var eB=o(34722),eK=o(35150),eV=o(97811);let e_={selectors:{root:"Root element",starSymbol:"Default star icon",input:"Item input, hidden by default",label:"Item label, used to display star icon",symbolBody:"Wrapper around star icon for centering",symbolGroup:"Group of symbols, used to display fractions"},vars:{root:{"--rating-color":"Controls filled star icon color","--rating-size":"Controls star icon width and height"}},modifiers:[{modifier:"data-read-only",selector:"label",condition:"`readOnly` prop is set"},{modifier:"data-active",selector:"input",condition:"Input value is the same as component value"},{modifier:"data-filled",selector:"starSymbol",condition:"Associated input value is less or equal to the component value"}]},eH={selectors:{root:"Root element",toolbar:"Toolbar element",content:"Content area",typographyStylesProvider:"TypographyStylesProvider component, wraps content",control:"RichTextEditor.Control root element, used as a base for all controls",controlsGroup:"RichTextEditor.ControlsGroup component root",linkEditor:"Link editor root element",linkEditorSave:"Link editor save button",linkEditorInput:"Link editor url input",linkEditorExternalControl:"Link editor external button",linkEditorDropdown:"Link editor popover dropdown element"},vars:{},modifiers:[{modifier:"data-active",selector:"control",condition:"Control is active"}]},eG={selectors:{root:"Root element",svg:"svg element",curve:"circle element",label:"Label element"},vars:{root:{"--rp-label-offset":"Label offset on the left and right sides of the ring","--rp-size":"Controls `height` and `width` of svg and root elements"}}},eU={selectors:{root:"Root element",viewport:"",scrollbar:"",thumb:"",corner:""},vars:{root:{"--scrollarea-scrollbar-size":"Scrollbar size"}},modifiers:[{modifier:"data-hidden",selector:["scrollbar","corner"],condition:'type="never"'},{modifier:"data-hovered",selector:"corner",condition:"One of the scrollbars is hovered"},{modifier:"data-orientation",selector:"scrollbar",value:'"horizontal" or "vertical" depending on scrollbar position'}]};var eX=o(67355),eZ=o(61309);let eJ={selectors:{root:"Root element"},vars:{}},eQ={selectors:{root:"Root element"},vars:{root:{"--skeleton-height":"Controls skeleton `height`","--skeleton-width":"Controls skeleton `width`","--skeleton-radius":"Controls skeleton `border-radius`"}},modifiers:[{modifier:"data-visible",selector:"root",condition:"`visible` prop is set"},{modifier:"data-animate",selector:"root",condition:"`animate` prop is set"}]};var e$=o(66763);let e0={selectors:{root:"Root element"},vars:{root:{"--chart-color":"Controls stroke and fill color"}},modifiers:[]},e1={selectors:{root:"Root element",content:"Wraps content to set max-height and transition",control:"Show/hide content control"},vars:{root:{"--spoiler-transition-duration":"Controls transition duration"}},modifiers:[{modifier:"data-has-spoiler",selector:"root",condition:"Whether the control button is shown or not"}]},e2={selectors:{...ek.selectors,search:"Search input (`Spotlight.Search`)",actionsList:"Actions list (`Spotlight.ActionsList`)",empty:"Empty state (`Spotlight.Empty`)",footer:"Footer (`Spotlight.Footer`)",action:"Action (`Spotlight.Action`)",actionBody:"Body of the action, contains label and description",actionLabel:"`Spotlight.Action` label",actionDescription:"`Spotlight.Action` description",actionSection:"`Spotlight.Action` left and right sections",actionsGroup:"`Spotlight.ActionsGroup` root element"},vars:{},modifiers:[{modifier:"data-selected",selector:"action",condition:"Action is selected with up/down keys"},{modifier:"data-position",selector:"actionSection",value:"Section position: left or right"},{modifier:"data-dimmed",selector:"actionSection",condition:"`dimmedSections` prop is set on `Spotlight.Action` component"}]},e5={selectors:{root:"Root element"},vars:{root:{"--stack-align":"Controls `align-items` property","--stack-justify":"Controls `justify-content` property","--stack-gap":"Controls `gap` property"}}};var e6=o(49717),e4=o(12379),e7=o(49235),e3=o(73811);let e9={selectors:{table:"Root `table` element (`Table` component)",thead:"`thead` element (`Table.Thead` component)",tbody:"`tbody` element (`Table.Tbody` component)",tfoot:"`tfoot` element (`Table.Tfoot` component)",tr:"`tr` element (`Table.Tr` component)",th:"`th` element (`Table.Th` component)",td:"`td` element (`Table.Td` component)",caption:"`caption` element (`Table.Caption` component)"},vars:{table:{"--table-border-color":"Controls `border-color` of all elements inside table","--table-layout":"Controls `table-layout` of the table element, auto by default","--table-caption-side":"Controls caption-side of the table element, `bottom` by default","--table-horizontal-spacing":"Controls `padding-left` and `padding-right` of `Table.Th` and `Table.Td` elements","--table-vertical-spacing":"Controls `padding-top` and `padding-bottom` of `Table.Td` and `Table.Th` elements","--table-striped-color":"Controls `background-color` of even/odd `Table.Tr` elements","--table-highlight-on-hover-color":"Controls `background-color` of `Table.Tr` elements when hovered","--table-sticky-header-offset":"Controls `top` offset of sticky header"}},modifiers:[{modifier:"data-with-table-border",selector:"table",condition:"`withTableBorder` prop is set on `Table` component"},{modifier:"data-with-column-border",selector:["th","td"],condition:"`withColumnsBorder` prop is set on `Table` component"},{modifier:"data-with-row-border",selector:"tr",condition:"`withRowsBorder` prop is set on `Table` component"},{modifier:"data-striped",selector:"tr",value:"odd | even",condition:"`striped` prop is set on `Table` component"},{modifier:"data-hover",selector:"tr",condition:"`highlightOnHover` prop is set on `Table` component"},{modifier:"data-size",selector:"tr",value:"value of `captionSize` prop on `Table` component"}]};var e8=o(76475),te=o(52176);let tt={selectors:{root:"Root element"},vars:{root:{"--ti-bg":"Controls `background`","--ti-bd":"Controls `border`","--ti-color":"Controls icon `color`","--ti-radius":"Controls `border-radius`","--ti-size":"Controls `width`, `height`, `min-width` and `min-height` styles"}}},to={selectors:{root:"Root element",item:"Item root element",itemBody:"Item body, wraps title and content",itemTitle:"Item title, controlled by title prop",itemContent:"Item content, controlled by children prop",itemBullet:"Item bullet"},vars:{root:{"--tl-bullet-size":"Controls bullet `width` and `height`","--tl-color":"Controls active bullet and line colors","--tl-icon-color":"Controls icon color","--tl-line-width":"Controls width of the line between bullets","--tl-radius":"Controls bullet `border-radius`"}},modifiers:[{modifier:"data-active",selector:["item","itemBullet"],condition:"Item index is =< Timeline active prop"},{modifier:"data-line-active",selector:["item"],condition:"Item index is < Timeline active prop"}]},tn={selectors:{root:"Root element"},vars:{root:{"--title-fw":"Title `font-weight`, by default value from `theme.headings`","--title-fz":"Title `font-size`, by default value from `theme.headings`","--title-lh":"Title `line-heigh`t, by default value from `theme.headings`","--title-line-clamp":"Controls `-webkit-line-clamp` css property","--title-text-wrap":"Controls `text-wrap` css property"}},modifiers:[{modifier:"data-order",selector:"root",value:"Value of the `order` prop"},{modifier:"data-line-clamp",selector:"root",condition:"`lineClamp` prop is a number"}]},tr={selectors:{tooltip:"Root element",arrow:"Tooltip arrow, rendered inside tooltip"},vars:{tooltip:{"--tooltip-bg":"Tooltip `background-color`","--tooltip-radius":"Tooltip `border-radius`","--tooltip-color":"Controls tooltip text color"}},modifiers:[{modifier:"data-multiline",selector:"tooltip",condition:"`multiline` prop is set"}]},ta={selectors:{root:"Root element"},vars:{}},ti={selectors:{root:"Root element"},vars:{}};var td=o(40184),ts=o(60626),tl=o(28862),tc=o(89114),tp=o(61461);function tu(e){var t,o,n;let{data:a,fixedLayout:i=!0,...d}=e,s=null===(t=a.modifiers)||void 0===t?void 0:t.some(e=>!!e.condition),l=null===(o=a.modifiers)||void 0===o?void 0:o.some(e=>!!e.value),c=(null===(n=a.modifiers)||void 0===n?void 0:n.map((e,t)=>(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Td,{children:Array.isArray(e.selector)?e.selector.join(", "):e.selector}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tp.e,{children:e.modifier})}),s&&(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:e.condition||"–"})}),l&&(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:e.value||"–"})})]},t)))||[];return(0,r.jsx)(tl.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tl.i,{layout:i?"fixed":void 0,...d,children:[(0,r.jsx)(tl.i.Thead,{children:(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Th,{w:i?210:void 0,children:"Selector"}),(0,r.jsx)(tl.i.Th,{w:i?310:void 0,children:"Attribute"}),s&&(0,r.jsx)(tl.i.Th,{children:"Condition"}),l&&(0,r.jsx)(tl.i.Th,{children:"Value"})]})}),(0,r.jsx)(tl.i.Tbody,{children:c})]})})}function tm(e){let{data:t,component:o,fixedLayout:n=!0,...a}=e,i=Object.keys(t.selectors).map(e=>(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Td,{children:e}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsxs)(tp.e,{children:[".mantine-",o,"-",e]})}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:t.selectors[e]})})]},e));return(0,r.jsx)(tl.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tl.i,{layout:n?"fixed":void 0,...a,children:[(0,r.jsx)(tl.i.Thead,{children:(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Th,{w:n?210:void 0,children:"Selector"}),(0,r.jsx)(tl.i.Th,{w:n?310:void 0,children:"Static selector"}),(0,r.jsx)(tl.i.Th,{children:"Description"})]})}),(0,r.jsx)(tl.i.Tbody,{children:i})]})})}function tf(e){let{data:t,fixedLayout:o=!0,...n}=e,a=Object.keys(t.vars).reduce((e,o)=>(Object.keys(t.vars[o]).forEach((n,a)=>{e.push((0,r.jsxs)(tl.i.Tr,{children:[0===a&&(0,r.jsx)(tl.i.Td,{rowSpan:Object.keys(t.vars[o]).length,children:o}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tp.e,{children:n})}),(0,r.jsx)(tl.i.Td,{children:(0,r.jsx)(tc.O,{children:t.vars[o][n]})})]},"".concat(o,"-").concat(n)))}),e),[]);return(0,r.jsx)(tl.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tl.i,{layout:o?"fixed":void 0,...n,children:[(0,r.jsx)(tl.i.Thead,{children:(0,r.jsxs)(tl.i.Tr,{children:[(0,r.jsx)(tl.i.Th,{w:o?210:void 0,children:"Selector"}),(0,r.jsx)(tl.i.Th,{w:o?310:void 0,children:"Variable"}),(0,r.jsx)(tl.i.Th,{children:"Description"})]})}),(0,r.jsx)(tl.i.Tbody,{children:a})]})})}var th=o(1374),ty=o.n(th);function tb(e){let{component:t,componentPrefix:o}=e,i=n["".concat(t,"StylesApi")];if(!i)return(0,r.jsx)(ts.z,{errorOf:"Styles API"});let d=(0,td.iY)({component:t,componentPrefix:o});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:ty().section,children:[(0,r.jsxs)(a.D,{order:2,className:ty().title,children:[d," selectors"]}),(0,r.jsx)(tm,{component:t,data:i})]}),Object.keys(i.vars).length>0&&(0,r.jsxs)("div",{className:ty().section,children:[(0,r.jsxs)(a.D,{order:2,className:ty().title,children:[d," CSS variables"]}),(0,r.jsx)(tf,{data:i})]}),Array.isArray(i.modifiers)&&i.modifiers.length>0&&(0,r.jsxs)("div",{className:ty().section,children:[(0,r.jsxs)(a.D,{order:2,className:ty().title,children:[d," data attributes"]}),(0,r.jsx)(tu,{data:i})]})]})}var tv=o(94998),tg=o(79388);function tw(e){let{components:t,componentPrefix:o}=e,n=t.map(e=>(0,r.jsx)("div",{className:ty().group,children:(0,r.jsx)(tb,{component:e,componentPrefix:o})},e));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:ty().groupsHeader,children:[(0,r.jsx)(a.D,{order:2,className:ty().title,children:"Styles API"}),(0,r.jsxs)(tg.NV,{style:{marginTop:0},children:[(0,r.jsx)(tv.E,{children:t[0]})," component supports"," ",(0,r.jsx)(tg.Ec,{href:"/styles/styles-api",children:"Styles API"}),". With Styles API, you can customize styles of any inner element. Follow"," ",(0,r.jsx)(tg.Ec,{href:"/styles/styles-api",children:"the documentation"})," to learn how to use CSS modules, CSS variables and inline styles to get full control over component styles."]})]}),n]})}},60626:function(e,t,o){"use strict";o.d(t,{z:function(){return a}});var n=o(24246);o(27378);var Text=o(26569),r=o(9136);function a(e){let{errorOf:t}=e;return(0,n.jsxs)(Text.x,{children:[(0,n.jsxs)(Text.x,{span:!0,c:"red",children:["Error loading component ",t," data."," "]}),"If you see this message please let us know by"," ",(0,n.jsx)(r.e,{href:"https://github.com/mantinedev/mantine/issues/new?assignees=&labels=&template=docs_report.yml",target:"_blank",children:"opening an issue on GitHub"}),"."]})}},61461:function(e,t,o){"use strict";o.d(t,{e:function(){return d}});var n=o(24246);o(27378);var r=o(40624),Text=o(26569),a=o(97977),i=o.n(a);function d(e){let{className:t,...o}=e;return(0,n.jsx)(Text.x,{component:"span",className:(0,r.Z)(i().code,t),...o})}},1535:function(e){e.exports={item:"HeaderItem_item__E_3UP",label:"HeaderItem_label__3TYI5"}},90576:function(e){e.exports={wrapper:"ImportStatement_wrapper__4lafM"}},85008:function(e){e.exports={wrapper:"LinkItem_wrapper__J_9Wi",link:"LinkItem_link__2mUFe",icon:"LinkItem_icon__gjSxi"}},11258:function(e){e.exports={wrapper:"MdxPageHeader_wrapper__vGpBZ",header:"MdxPageHeader_header__egn7g",title:"MdxPageHeader_title__bekaq",description:"MdxPageHeader_description__nEVpr"}},81026:function(e){e.exports={wrapper:"MdxRawContent_wrapper__8ZUWQ",container:"MdxRawContent_container__v_UMr",tableOfContents:"MdxRawContent_tableOfContents__voKU_"}},73279:function(e){e.exports={root:"MdxSiblings_root__aMIoJ",link:"MdxSiblings_link__6MlX4",body:"MdxSiblings_body___XWhI",title:"MdxSiblings_title__NDsNH",description:"MdxSiblings_description__V17yY",icon:"MdxSiblings_icon__VO6TY"}},69684:function(e){e.exports={tabsWrapper:"MdxTabs_tabsWrapper__14Znv",tabsList:"MdxTabs_tabsList__eXI1E",tab:"MdxTabs_tab__f36t5",tabContent:"MdxTabs_tabContent__h_eEw",main:"MdxTabs_main__qjckv",tableOfContents:"MdxTabs_tableOfContents__2RDWh"}},21400:function(e){e.exports={content:"PageBase_content__8Q6WJ"}},91333:function(e){e.exports={searchIcon:"PropsTablesList_searchIcon__qxntu",title:"PropsTablesList_title__T7Tjv",section:"PropsTablesList_section__ttBgr",search:"PropsTablesList_search__xAeEM"}},1374:function(e){e.exports={groupsHeader:"StylesApiTable_groupsHeader__GCT_t",group:"StylesApiTable_group__B6MgG",title:"StylesApiTable_title__G0_6E",section:"StylesApiTable_section__nd2cu"}},97977:function(e){e.exports={code:"TableInlineCode_code__0ptOS"}},19787:function(e){e.exports={wrapper:"TableOfContents_wrapper__jE57j",inner:"TableOfContents_inner__nZ9Yg",link:"TableOfContents_link__kwW92",header:"TableOfContents_header__4cbrI",title:"TableOfContents_title__sn9Ej",items:"TableOfContents_items__1KFWu"}},92442:function(e,t,o){"use strict";o.d(t,{x:function(){return n}});let n={selectors:{root:"Root element",item:"`Accordion.Item` root element",control:"`Accordion.Control` root element",chevron:"`Accordion.Control` chevron container element",label:"`Accordion.Control` label",icon:"`Accordion.Control` icon",itemTitle:"`Accordion.Control` title (h2-h6) tag",panel:"`Accordion.Panel` root element",content:"Wrapper element of `Accordion.Panel` `children`"},vars:{root:{"--accordion-chevron-size":"Controls chevron container element `width` and `min-width`","--accordion-radius":"Controls `border-radius` in various elements, depending on variant","--accordion-transition-duration":"Controls all animations `transition-duration`"}},modifiers:[{modifier:"data-active",selector:["item","control"],condition:"Item is active (opened)"},{modifier:"data-chevron-position",selector:"control",value:"Value of `chevronPosition` prop on `Accordion`"}]}},30345:function(e,t,o){"use strict";o.d(t,{g:function(){return n}});let n={selectors:{root:"Root element",wrapper:"Wrapper around `body` and `icon`",body:"Body element, contains `title` and `message`",title:"Title element, contains `label` and `icon`",label:"Title label",message:"Alert message",icon:"Icon element",closeButton:"Close button"},vars:{root:{"--alert-bd":"Controls `border`","--alert-bg":"Controls `background`","--alert-color":"Controls `color`","--alert-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-with-close-button",selector:"title",condition:"`withCloseButton` prop is set"}]}},87961:function(e,t,o){"use strict";o.d(t,{I:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d},vars:{}}},68738:function(e,t,o){"use strict";o.d(t,{o:function(){return n}});let n={selectors:{root:"Root element",section:"Left and right sections",label:"Badge children"},vars:{root:{"--badge-bd":"Controls `border`","--badge-bg":"Controls `background`","--badge-color":"Controls text `color`","--badge-dot-color":'Controls dot `color`, only applicable when `variant="dot"`',"--badge-fz":"Controls `font-size`","--badge-height":"Controls `height`","--badge-padding-x":"Controls horizontal `padding`","--badge-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-block",selector:"root",condition:"`fullWidth` prop is set"},{modifier:"data-position",selector:"section",value:"Section position: left or right"}]}},86140:function(e,t,o){"use strict";o.d(t,{B:function(){return n},R:function(){return r}});let n={selectors:{root:"Root element",loader:"Loader component, displayed only when `loading` prop is set",inner:"Contains all other elements, child of the `root` element",section:"Left and right sections of the button",label:"Button children"},vars:{root:{"--button-bg":"Controls `background`","--button-bd":"Control `border`","--button-hover":"Controls `background` when hovered","--button-color":"Control text `color`","--button-hover-color":"Control text `color` when hovered","--button-radius":"Controls `border-radius`","--button-height":"Controls `height` of the button","--button-padding-x":"Controls horizontal `padding` of the button","--button-fz":"Controls `font-size` of the button","--button-justify":"Controls `justify-content` of `inner` element"}},modifiers:[{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"},{modifier:"data-loading",selector:["root","label"],condition:"`loading` prop is set"},{modifier:"data-block",selector:"root",condition:"`fullWidth` prop is set"},{modifier:"data-with-left-section",selector:"root",condition:"`leftSection` is set"},{modifier:"data-with-right-section",selector:"root",condition:"`rightSection` is set"},{modifier:"data-position",selector:"section",value:"Section position: left or right"}]},r={selectors:{group:"Root element"},vars:{group:{"--button-border-width":"`border-width` of child `Button` components"}},modifiers:[{modifier:"data-orientation",selector:"group",value:"Value of `orientation` prop"}]}},23570:function(e,t,o){"use strict";o.d(t,{J:function(){return n}});let n={selectors:{root:"Root element",slide:"`Carousel.Slide` root element",container:"Slides container",viewport:"Main element, contains slides container and all controls",controls:"Next/previous controls container",control:"Next/previous control",indicators:"Indicators container",indicator:"Indicator button"},vars:{root:{"--carousel-control-size":"Controls `width` and `height` of the next/previous buttons","--carousel-controls-offset":"Controls offsets of the next/previous buttons","--carousel-height":"Controls height of the carousel"}},modifiers:[{modifier:"data-orientation",selector:"root",value:"Value of `orientation` prop"},{modifier:"data-include-gap-in-size",selector:"root",condition:"`includeGapInSize` prop is set"},{modifier:"data-inactive",selector:"control",condition:"No previous/next slides are available"},{modifier:"data-active",selector:"indicator",condition:"Associated slide is active"}]}},86423:function(e,t,o){"use strict";o.d(t,{B:function(){return r},I:function(){return a}});var n=o(50352);let r={selectors:{root:"Root element",input:'Input element (`input[type="checkbox"]`)',icon:"Checkbox icon, used to display checkmark and indeterminate state icon",inner:"Wrapper for `icon` and `input`",body:"Input body, contains all other elements",labelWrapper:"Contains `label`, `description` and `error`",label:"Label element",description:"Description displayed below the label",error:"Error message displayed below the label"},vars:{root:{"--checkbox-color":"Controls checked checkbox `background-color`","--checkbox-radius":"Controls checkbox `border-radius`","--checkbox-size":"Controls checkbox `width` and `height`","--checkbox-icon-color":"Controls checkbox icon `color`"}},modifiers:[{modifier:"data-checked",selector:"root",condition:"`checked` prop is set"},{modifier:"data-error",selector:"input",condition:"`error` prop is set"},{modifier:"data-indeterminate",selector:"input",condition:"`indeterminate` prop is set"},{modifier:"data-label-position",selector:"inner",value:"Value of `labelPosition` prop"}]},a={selectors:{...n.X.selectors},vars:{}}},27882:function(e,t,o){"use strict";o.d(t,{B:function(){return a}});var n=o(64954),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.L.selectors,dropdown:"Popover dropdown",colorPreview:"Color swatch preview in input left section",eyeDropperButton:"Eye dropper button",eyeDropperIcon:"Default eye dropper icon"},vars:{colorPreview:{"--ci-preview-size":"Controls `width` and `height` of color preview"},eyeDropperIcon:{"--ci-eye-dropper-icon-size":"Controls width and height of the eye dropper icon"}}}},64954:function(e,t,o){"use strict";o.d(t,{L:function(){return n}});let n={selectors:{wrapper:"Root element",preview:"Color preview, displayed only when `format` supports alpha channel",body:"Contains alpha/hue sliders and color preview",slider:"Alpha and hue sliders root",sliderOverlay:"Element used to display various overlays over hue and alpha sliders",saturation:"Saturation picker",saturationOverlay:"Element used to display various overlays over saturation picker",sliders:"Contains alpha and hue sliders",thumb:"Thumb of all sliders",swatch:"Color swatch",swatches:"Color swatches list"},vars:{wrapper:{"--cp-body-spacing":"Controls spacing between sliders and saturation","--cp-preview-size":"Controls size of the preview swatch","--cp-width":"Controls `width` of the root element","--cp-swatch-size":"Controls swatch `width` and `height`","--cp-thumb-size":"Controls thumb `width` and `height` in all sliders and saturation picker","--cp-saturation-height":"Controls `height` of the saturation picker"}}}},92511:function(e,t,o){"use strict";o.d(t,{$:function(){return n},d:function(){return r}});let n={selectors:{options:"`Combobox.Options` component",dropdown:"`Combobox.Dropdown` component",option:"`Combobox.Option` component",search:"`Combobox.Search` input",empty:"`Combobox.Empty` component",header:"`Combobox.Header` component",footer:"`Combobox.Footer` component",group:"`Combobox.Group` component",groupLabel:"Label of `Combobox.Group` component"},vars:{dropdown:{"--combobox-option-fz":"Controls option `font-size`","--combobox-option-padding":"Controls option `padding`","--combobox-padding":"Controls dropdown `padding`"},options:{"--combobox-option-fz":"Controls option `font-size`","--combobox-option-padding":"Controls option `padding`"}},modifiers:[{modifier:"data-combobox-selected",selector:"option",condition:"Option is selected"},{modifier:"data-combobox-active",selector:"option",condition:"`active` prop is set"},{modifier:"data-combobox-disabled",selector:"option",condition:"`disabled` prop is set"},{modifier:"data-hidden",selector:"dropdown",condition:"`hidden` prop is set"}]},r={dropdown:"Dropdown root element",options:"Options wrapper",option:"Option",empty:"Nothing found message",group:"Options group wrapper",groupLabel:"Options group label"}},29237:function(e,t,o){"use strict";o.d(t,{T:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},50352:function(e,t,o){"use strict";o.d(t,{X:function(){return r},a:function(){return n}});let n={selectors:{wrapper:"Root element of the Input",input:"Input element",section:"Left and right sections"},vars:{wrapper:{"--input-fz":"`font-size` of the input element","--input-height":"`height` or `min-height` of the input element (depends on `multiline` prop)","--input-left-section-width":"`width` of the left section","--input-right-section-width":"`width` of the right section","--input-margin-bottom":"`margin-bottom` of the input element, usually controlled by `Input.Wrapper`","--input-margin-top":"`margin-top` of the input element, usually controlled by `Input.Wrapper`","--input-padding-y":"`padding-top` and `padding-bottom` of the input element","--input-radius":"`border-radius` of the input element","--input-left-section-pointer-events":"Controls `pointer-events` of the left section","--input-right-section-pointer-events":"Controls `pointer-events` of the right section"}},modifiers:[{modifier:"data-error",selector:["wrapper","input"],condition:"`error` prop is set"},{modifier:"data-disabled",selector:"input",condition:"`disabled` prop is set"},{modifier:"data-with-right-section",selector:"wrapper",condition:"`rightSection` prop is set"},{modifier:"data-with-left-section",selector:"wrapper",condition:"`leftSection` prop is set"},{modifier:"data-multiline",selector:"wrapper",condition:"`multiline` prop is set"},{modifier:"data-pointer",selector:"wrapper",condition:"`pointer` prop is set"},{modifier:"data-position",selector:"section",value:"Section position: left or right"}]},r={selectors:{root:"Root element",label:"Label element",required:"Required asterisk element, rendered inside label",description:"Description element",error:"Error element"},vars:{label:{"--input-label-size":"Controls label `font-size`","--input-asterisk-color":"Controls label asterisk text `color`"},error:{"--input-error-size":"Controls error `font-size`"},description:{"--input-description-size":"Controls description `font-size`"}}}},55838:function(e,t,o){"use strict";o.d(t,{P:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},91516:function(e,t,o){"use strict";o.d(t,{k:function(){return r}});var n=o(62623);let r={selectors:{...n.T.selectors,divider:"`Menu.Divider` root element",label:"`Menu.Label` root element",item:"`Menu.Item` root element",itemLabel:"Label of `Menu.Item`",itemSection:"Left and right sections of `Menu.Item`"},vars:{},modifiers:[{modifier:"data-disabled",selector:"item",condition:"`disabled` prop is set on `Menu.Item`"},{modifier:"data-hovered",selector:"item",condition:"`Menu.Item` is hovered or selected with keyboard"}]}},7634:function(e,t,o){"use strict";o.d(t,{L:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d,pill:"Value pill",inputField:"Input field",pillsList:"List of pills, also contains input field"},vars:{}}},59325:function(e,t,o){"use strict";o.d(t,{c:function(){return r}});var n=o(50352);let r={selectors:{...n.X.selectors,...n.a.selectors},vars:{}}},37951:function(e,t,o){"use strict";o.d(t,{$:function(){return n}});let n={selectors:{root:"Root element",loader:"Loader component, displayed only when `loading` prop is set",icon:"Icon component, displayed only when `icon` prop is set",body:"Notification body, contains all other elements",title:"Title element, displayed only when `title` prop is set",description:"Description displayed below the title",closeButton:"Close button element"},vars:{root:{"--notification-radius":"Controls `border-radius`","--notification-color":"Controls icon color or notification line color"}},modifiers:[{modifier:"data-with-icon",selector:"root",condition:"`icon` prop is set"},{modifier:"data-with-border",selector:"root",condition:"`withBorder` prop is set"},{modifier:"data-with-title",selector:"description",condition:"`title` prop is set"}]}},68170:function(e,t,o){"use strict";o.d(t,{L:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors,controls:"Increment and decrement buttons wrapper",control:"Increment and decrement buttons"},vars:{controls:{"--ni-chevron-size":"Controls `width` and `height` of the default chevron icon"}},modifiers:[{modifier:"data-direction",selector:"control",value:"`up` or `down` depending on the control"}]}},37731:function(e,t,o){"use strict";o.d(t,{E:function(){return n}});let n={selectors:{root:"Root element",control:"Control element: items, next/previous, first/last buttons",dots:"Dots icon wrapper"},vars:{root:{"--pagination-active-bg":"Active control `background-color`","--pagination-active-color":"Active control `color`","--pagination-control-fz":"Controls control `font-size`","--pagination-control-radius":"Controls control `border-radius`","--pagination-control-size":"Controls control `min-width` and `height`"}},modifiers:[{modifier:"data-active",selector:"control",condition:"Control is active"},{modifier:"data-disabled",selector:"control",condition:"Control is disabled"}]}},20827:function(e,t,o){"use strict";o.d(t,{m:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors,innerInput:"Actual input element",visibilityToggle:"Visibility toggle button"},vars:{root:{"--psi-button-size":"Controls visibility toggle button `width` and `height`","--psi-icon-size":"Controls visibility toggle icon `width` and `height`"}}}},81581:function(e,t,o){"use strict";o.d(t,{K:function(){return n},h:function(){return r}});let n={selectors:{root:"Root element",label:"Pill label (children)",remove:"Remove button"},vars:{root:{"--pill-height":"Controls `height` of the pill","--pill-fz":"Controls `font-size`","--pill-radius":"Controls `border-radius`"}},modifiers:[{modifier:"data-with-remove",selector:"root",condition:"`withRemoveButton` prop is set"},{modifier:"data-disabled",selector:"root",condition:"`disabled` prop is set"}]},r={selectors:{group:"Root element"},vars:{group:{"--pg-gap":"Controls `gap` between pills"}}}},34722:function(e,t,o){"use strict";o.d(t,{l:function(){return n}});let n={selectors:{root:"Root element",pinInput:"Input item wrapper",input:"Input element"},vars:{root:{"--pin-input-size":"Controls input `width` and `height`"}},modifiers:[]}},62623:function(e,t,o){"use strict";o.d(t,{T:function(){return n}});let n={selectors:{dropdown:"Dropdown element",arrow:"Dropdown arrow"},vars:{dropdown:{"--popover-radius":"Controls dropdown border-radius","--popover-shadow":"Controls dropdown box-shadow"}},modifiers:[{modifier:"data-position",selector:"dropdown",value:"Value of floating ui dropdown position"}]}},35150:function(e,t,o){"use strict";o.d(t,{S:function(){return n}});let n={selectors:{root:"Root element",section:"`Progress.Section` root element",label:"`Progress.Label` root element"},vars:{root:{"--progress-radius":"Controls `border-radius` of track and sections","--progress-size":"Controls height of progress bar","--progress-transition-duration":"Controls width `transition-duration` of progress bar"}},modifiers:[{modifier:"data-striped",selector:"section",condition:"`striped` or `animated` props are set"},{modifier:"data-animated",selector:"section",condition:"`animated` prop is set"}]}},97811:function(e,t,o){"use strict";o.d(t,{P:function(){return r},T:function(){return a}});var n=o(50352);let r={selectors:{root:"Root element",radio:'Input element (`input[type="radio"]`)',icon:"Radio icon, used to display checked icon",inner:"Wrapper for `icon` and `input`",body:"Input body, contains all other elements",labelWrapper:"Contains `label`, `description` and `error`",label:"Label element",description:"Description displayed below the label",error:"Error message displayed below the label"},vars:{root:{"--radio-color":"Controls checked radio `background-color`","--radio-radius":"Controls radio `border-radius`","--radio-size":"Controls radio `width` and `height`","--radio-icon-color":"Controls radio icon `color`","--radio-icon-size":"Controls radio icon `width` and `height`"}},modifiers:[{modifier:"data-error",selector:"radio",condition:"`error` prop is set"},{modifier:"data-label-position",selector:"inner",value:"Value of `labelPosition` prop"}]},a={selectors:{...n.X.selectors},vars:{}}},67355:function(e,t,o){"use strict";o.d(t,{o:function(){return n}});let n={selectors:{root:"Root element",control:"Wrapper element for input and label",input:'Input element (`input[type="radio"]`), hidden by default',label:"Label element associated with input",indicator:"Floating indicator that moves between items"},vars:{root:{"--sc-color":"Control `background-color` of `indicator`","--sc-font-size":"Controls `font-size` of labels","--sc-padding":"Controls `padding` of control","--sc-radius":"Controls `border-radius` of `indicator` and `root` elements","--sc-shadow":"Controls `box-shadow` of indicator","--sc-transition-duration":"Controls `transition-duration` of various elements that have animations","--sc-transition-timing-function":"Controls `transition-timing-function` of various elements that have animations"}},modifiers:[{modifier:"data-full-width",selector:"root",condition:"`fullWidth` prop is set"},{modifier:"data-with-items-border",selector:"root",condition:"`withItemsBorder` prop is not `false`"},{modifier:"data-orientation",selector:"control",value:"Value of `orientation` prop"},{modifier:"data-active",selector:["label","control"],condition:"Associated input is checked"},{modifier:"data-disabled",selector:"label",condition:"Associated input is disabled"},{modifier:"data-read-only",selector:"label",condition:"`readOnly` prop is set"}]}},61309:function(e,t,o){"use strict";o.d(t,{i:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d},vars:{}}},49717:function(e,t,o){"use strict";o.d(t,{U:function(){return n}});let n={selectors:{root:"Root element",steps:"Steps controls wrapper",separator:"Separator line between step controls",verticalSeparator:"Vertical separator line between step controls",content:"Current step content wrapper",stepWrapper:"Wrapper for the step icon and separator",step:"Step control button",stepIcon:"Step icon wrapper",stepCompletedIcon:"Completed step icon, rendered within stepIcon",stepBody:"Contains stepLabel and stepDescription",stepLabel:"Step label",stepDescription:"Step description",stepLoader:"Step loader"},vars:{root:{"--stepper-color":"Controls color of the active step and separator","--stepper-icon-color":"Controls `color` of the step icon","--stepper-icon-size":"Controls `width` and `height` of the icons","--stepper-content-padding":"Controls `padding-top` of the content","--stepper-radius":"Controls `border-radius` of the step icon","--stepper-fz":"Controls `font-size` of various elements","--stepper-spacing":"Controls various spacings"}},modifiers:[{modifier:"data-progress",selector:"stepIcon",condition:"Step is current"},{modifier:"data-completed",selector:"stepIcon",condition:"Step is completed"}]}},12379:function(e,t,o){"use strict";o.d(t,{T:function(){return r},_:function(){return a}});var n=o(50352);let r={selectors:{root:"Root element",track:"Switch track, contains `thumb` and `trackLabel`",trackLabel:"Label displayed inside `track`",thumb:"Thumb displayed inside `track`",input:'Input element (`input[type="checkbox"]`), hidden by default',body:"Input body, contains all other elements",labelWrapper:"Contains `label`, `description` and `error`",label:"Label element",description:"Description displayed below the label",error:"Error message displayed below the label"},vars:{root:{"--switch-radius":"Controls `border-radius` of `track` and `thumb`","--switch-height":"Controls height of `track`","--switch-width":"Controls min-width of `track`","--switch-thumb-size":"Controls width and height of `thumb`","--switch-label-font-size":"Controls `font-size` of `trackLabel`","--switch-track-label-padding":"Controls `trackLabel` offset","--switch-color":"Controls track `background-color` when input is checked"}},modifiers:[{modifier:"data-error",selector:"track",condition:"`error` prop is set"},{modifier:"data-label-position",selector:["track","root"],value:"value of `labelPosition` prop"},{modifier:"data-disabled",selector:"label",condition:"`disabled` prop is set"}]},a={selectors:{...n.X.selectors},vars:{}}},49235:function(e,t,o){"use strict";o.d(t,{Y:function(){return n}});let n={selectors:{root:"Root element (`Tabs` component)",list:"List of tabs (`Tabs.List` component)",panel:"Panel with tab content (`Tabs.Panel` component)",tab:"Tab button (`Tabs.Tab` component)",tabLabel:"Label of `Tabs.Tab`",tabSection:"Left and right sections of `Tabs.Tab`"},vars:{root:{"--tabs-color":"Controls colors of `Tabs.Tab`, only applicable when variant is `pills` or `default`","--tabs-radius":"Controls `Tabs.Tab` `border-radius`"}},modifiers:[{modifier:"data-orientation",selector:["root","tab","list","panel"],value:"Value of `orientation` prop"},{modifier:"data-placement",selector:["root","tab","list"],value:"Value of placement prop",condition:'Value of `orientation` prop is "vertical" on `Tabs` component'},{modifier:"data-inverted",selector:["tab","list"],condition:"`inverted` prop is set on `Tabs` component"},{modifier:"data-grow",selector:["list"],condition:"`grow` prop is set on `Tabs.List` component"},{modifier:"data-position",selector:["tabSection"],value:"Position of the section, left or right"}]}},73811:function(e,t,o){"use strict";o.d(t,{h:function(){return a}});var n=o(92511),r=o(50352);let a={selectors:{...r.a.selectors,...r.X.selectors,...n.d,pill:"Value pill",inputField:"Input field",pillsList:"List of pills, also contains input field"},vars:{}}},52176:function(e,t,o){"use strict";o.d(t,{G:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},76475:function(e,t,o){"use strict";o.d(t,{g:function(){return r}});var n=o(50352);let r={selectors:{...n.a.selectors,...n.X.selectors},vars:{}}},42595:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});var n={code:"m-5caae6d3",pre:"m-2c47c4fd",header:"m-e58679f3",controls:"m-be7e9c9c",copy:"m-5caae85b",control:"m-d498bab7",file:"m-5cac2e62",files:"m-38d99e51",codeWrapper:"m-9f507240",showCodeButton:"m-c9378bc2",root:"m-5cb1b9c8",fileIcon:"m-b46cddfb"}},17441:function(e,t,o){"use strict";o.d(t,{Z:function(){return n}});var n={theme:"m-1f5e827e"}},37127:function(e,t,o){"use strict";o.d(t,{_:function(){return f}});var n=o(27378),r=o(40624),a=o(2688),i=o(20410),d=o(96739),s=o(6231),l=o(56589),c=o(42595),p=o(17441);let u={...c.Z,code:(0,r.Z)(c.Z.code,p.Z.theme)},m={language:"tsx"},f=(0,i.d)((e,t)=>{let o=(0,d.w)("InlineCodeHighlight",m,e),{classNames:r,className:i,style:c,styles:p,unstyled:f,vars:h,code:y,language:b,...v}=o,g=(0,s.y)({name:"InlineCodeHighlight",props:o,classes:u,className:i,style:c,classNames:r,styles:p,unstyled:f,rootSelector:"code"}),w=a.Z.highlight(y.trim(),{language:b}).value;return n.createElement(l.x,{...g("code"),component:"code",ref:t,...v,dangerouslySetInnerHTML:{__html:w}})});f.displayName="@mantine/core/InlineCodeHighlight"}}]); \ No newline at end of file diff --git a/_next/static/chunks/56926-e7ca5b6c5e406f6d.js b/_next/static/chunks/56926-e7ca5b6c5e406f6d.js new file mode 100644 index 00000000000..d8aa2b9d6cc --- /dev/null +++ b/_next/static/chunks/56926-e7ca5b6c5e406f6d.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[56926],{50776:function(e,t,r){r.d(t,{n:function(){return n}});let n="__MANTINE_FORM_INDEX__"},56926:function(e,t,r){r.d(t,{c:function(){return E}});var n=r(27378),l=r(66471);let i="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function a(e,t){i(()=>{if(e)return window.addEventListener(e,t),()=>window.removeEventListener(e,t)},[e])}function u(e){return null===e||"object"!=typeof e?{}:Object.keys(e).reduce((t,r)=>{let n=e[r];return null!=n&&!1!==n&&(t[r]=n),t},{})}function o(e,t){let r=Object.keys(e);if("string"==typeof t){let n=r.filter(e=>e.startsWith(`${t}.`));return e[t]||n.some(t=>e[t])||!1}return r.some(t=>e[t])}function s(e,t){if(null===t||"object"!=typeof t)return{};let r={...t};return Object.keys(t).forEach(t=>{t.includes(`${String(e)}.`)&&delete r[t]}),r}function f(e,t){let r=e.substring(t.length+1).split(".")[0];return parseInt(r,10)}function c(e,t,r,n){if(void 0===t)return r;let l=`${String(e)}`,i=r;-1===n&&(i=s(`${l}.${t}`,i));let a={...i},u=new Set;return Object.entries(i).filter(([e])=>{if(!e.startsWith(`${l}.`))return!1;let r=f(e,l);return!Number.isNaN(r)&&r>=t}).forEach(([e,t])=>{let r=f(e,l),i=e.replace(`${l}.${r}`,`${l}.${r+n}`);a[i]=t,u.add(i),u.has(e)||delete a[e]}),a}function d(e){return"string"!=typeof e?[]:e.split(".")}function m(e,t){let r=d(e);if(0===r.length||"object"!=typeof t||null===t)return;let n=t[r[0]];for(let e=1;e0,errors:t}}function h(e,t){return"function"==typeof e?b(e(t)):b(function e(t,r,n="",l={}){return"object"!=typeof t||null===t?l:Object.keys(t).reduce((l,i)=>{let a=t[i],u=`${""===n?"":`${n}.`}${i}`,o=m(u,r),s=!1;return"function"==typeof a&&(l[u]=a(o,r,u)),"object"==typeof a&&Array.isArray(o)&&(s=!0,o.forEach((t,n)=>e(a,r,`${u}.${n}`,l))),"object"!=typeof a||"object"!=typeof o||null===o||s||e(a,r,u,l),l},l)}(e,t))}function $(e,t,r){if("string"!=typeof e)return{hasError:!1,error:null};let n=h(t,r),l=Object.keys(n.errors).find(t=>e.split(".").every((e,r)=>e===t.split(".")[r]));return{hasError:!!l,error:l?n.errors[l]:null}}var k=r(50776);function v(e,t){return!!t&&("boolean"==typeof t?t:!!Array.isArray(t)&&t.includes(e.replace(/[.][0-9]/g,`.${k.n}`)))}function E({name:e,initialValues:t,initialErrors:r={},initialDirty:i={},initialTouched:f={},clearInputErrorOnChange:d=!0,validateInputOnChange:p=!1,validateInputOnBlur:b=!1,onValuesChange:k,transformValues:E=e=>e,enhanceGetInputProps:g,validate:C}={}){let[j,A]=(0,n.useState)(f),[O,w]=(0,n.useState)(i),[I,S]=(0,n.useState)(t||{}),[_,L]=(0,n.useState)(u(r)),[N,T]=(0,n.useState)(!1),D=(0,n.useRef)(t||{}),F=e=>{D.current=e},x=(0,n.useCallback)(e=>{N||(T(!0),S(e),F(e))},[N]),M=(0,n.useCallback)(()=>A({}),[]),V=(0,n.useCallback)(e=>L(t=>u("function"==typeof e?e(t):e)),[]),W=(0,n.useCallback)(()=>L({}),[]),H=(0,n.useCallback)(()=>{S(D.current),W(),w({}),M()},[]),P=(0,n.useCallback)((e,t)=>V(r=>({...r,[e]:t})),[]),R=(0,n.useCallback)(e=>V(t=>{if("string"!=typeof e)return t;let r={...t};return delete r[e],r}),[]),z=(0,n.useCallback)(e=>w(t=>{if("string"!=typeof e)return t;let r=s(e,t);return delete r[e],r}),[]),B=(0,n.useCallback)((e,t)=>{let r=v(e,p);z(e),A(t=>({...t,[e]:!0})),S(n=>{let l=y(e,t,n);if(r){let t=$(e,C,l);t.hasError?P(e,t.error):R(e)}return k?.(l,n),l}),!r&&d&&P(e,null)},[]),X=(0,n.useCallback)(e=>{S(t=>{let r="function"==typeof e?e(t):e,n={...t,...r};return k?.(n,t),n}),d&&W()},[]),Y=(0,n.useCallback)((e,t)=>{z(e),S(r=>{let n=function(e,{from:t,to:r},n){let l=m(e,n);if(!Array.isArray(l))return n;let i=[...l],a=l[t];return i.splice(t,1),i.splice(r,0,a),y(e,i,n)}(e,t,r);return k?.(n,r),n}),L(r=>(function(e,{from:t,to:r},n){let l=`${e}.${t}`,i=`${e}.${r}`,a={...n};return Object.keys(n).every(e=>{let t,r;if(e.startsWith(l)&&(t=e,r=e.replace(l,i)),e.startsWith(i)&&(t=e.replace(i,l),r=e),t&&r){let e=a[t],n=a[r];return void 0===n?delete a[t]:a[t]=n,void 0===e?delete a[r]:a[r]=e,!1}return!0}),a})(e,t,r))},[]),Z=(0,n.useCallback)((e,t)=>{z(e),S(r=>{let n=function(e,t,r){let n=m(e,r);return Array.isArray(n)?y(e,n.filter((e,r)=>r!==t),r):r}(e,t,r);return k?.(n,r),n}),L(r=>c(e,t,r,-1))},[]),q=(0,n.useCallback)((e,t,r)=>{z(e),S(n=>{let l=function(e,t,r,n){let l=m(e,n);if(!Array.isArray(l))return n;let i=[...l];return i.splice("number"==typeof r?r:i.length,0,t),y(e,i,n)}(e,t,r,n);return k?.(l,n),l}),L(t=>c(e,r,t,1))},[]),G=(0,n.useCallback)(()=>{let e=h(C,I);return L(e.errors),e},[I,C]),J=(0,n.useCallback)(e=>{let t=$(e,C,I);return t.hasError?P(e,t.error):R(e),t},[I,C]),K=(0,n.useCallback)(e=>{e.preventDefault(),H()},[]),Q=(0,n.useCallback)(e=>o(j,e),[j]),U=(0,n.useCallback)(e=>e?!$(e,C,I).hasError:!h(C,I).hasErrors,[I,C]),ee={initialized:N,values:I,errors:_,initialize:x,setValues:X,setInitialValues:F,setErrors:V,setFieldValue:B,setFieldError:P,clearFieldError:R,clearErrors:W,reset:H,validate:G,validateField:J,reorderListItem:Y,removeListItem:Z,insertListItem:q,getInputProps:(e,{type:t="input",withError:r=!0,withFocus:n=!0,...l}={})=>{var i;let a=(i=t=>B(e,t),e=>{if(e){if("function"==typeof e)i(e);else if("object"==typeof e&&"nativeEvent"in e){let{currentTarget:t}=e;t instanceof HTMLInputElement?"checkbox"===t.type?i(t.checked):i(t.value):(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)&&i(t.value)}else i(e)}else i(e)}),u={onChange:a};return r&&(u.error=_[e]),"checkbox"===t?u.checked=m(e,I):u.value=m(e,I),n&&(u.onFocus=()=>A(t=>({...t,[e]:!0})),u.onBlur=()=>{if(v(e,b)){let t=$(e,C,I);t.hasError?P(e,t.error):R(e)}}),Object.assign(u,g?.({inputProps:u,field:e,options:{type:t,withError:r,withFocus:n,...l},form:ee}))},onSubmit:(e,t)=>r=>{r?.preventDefault();let n=G();n.hasErrors?t?.(n.errors,I,r):e?.(E(I),r)},onReset:K,isDirty:e=>{if(e){let t=m(e,O);if("boolean"==typeof t)return t;let r=m(e,I),n=m(e,D.current);return!l(r,n)}let t=Object.keys(O).length>0;return t?o(O):!l(I,D.current)},isTouched:Q,setTouched:A,setDirty:w,resetTouched:M,resetDirty:e=>{let t=e?{...I,...e}:I;F(t),w({})},isValid:U,getTransformedValues:e=>E(e||I)};return e&&function(e){if(!/^[0-9a-zA-Z-]+$/.test(e))throw Error(`[@mantine/use-form] Form name "${e}" is invalid, it should contain only letters, numbers and dashes`)}(e),a(`mantine-form:${e}:set-field-value`,e=>ee.setFieldValue(e.detail.path,e.detail.value)),a(`mantine-form:${e}:set-values`,e=>ee.setValues(e.detail)),a(`mantine-form:${e}:set-initial-values`,e=>ee.setInitialValues(e.detail)),a(`mantine-form:${e}:set-errors`,e=>ee.setErrors(e.detail)),a(`mantine-form:${e}:set-field-error`,e=>ee.setFieldError(e.detail.path,e.detail.error)),a(`mantine-form:${e}:clear-field-error`,e=>ee.clearFieldError(e.detail)),a(`mantine-form:${e}:clear-errors`,ee.clearErrors),a(`mantine-form:${e}:reset`,ee.reset),a(`mantine-form:${e}:validate`,ee.validate),a(`mantine-form:${e}:validate-field`,e=>ee.validateField(e.detail)),a(`mantine-form:${e}:reorder-list-item`,e=>ee.reorderListItem(e.detail.path,e.detail.payload)),a(`mantine-form:${e}:remove-list-item`,e=>ee.removeListItem(e.detail.path,e.detail.index)),a(`mantine-form:${e}:insert-list-item`,e=>ee.insertListItem(e.detail.path,e.detail.item,e.detail.index)),a(`mantine-form:${e}:set-dirty`,e=>ee.setDirty(e.detail)),a(`mantine-form:${e}:set-touched`,e=>ee.setTouched(e.detail)),a(`mantine-form:${e}:reset-dirty`,e=>ee.resetDirty(e.detail)),a(`mantine-form:${e}:reset-touched`,ee.resetTouched),ee}}}]); \ No newline at end of file diff --git a/_next/static/chunks/56926-ec6442835c7b45a3.js b/_next/static/chunks/56926-ec6442835c7b45a3.js deleted file mode 100644 index b76959abf61..00000000000 --- a/_next/static/chunks/56926-ec6442835c7b45a3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[56926],{50776:function(e,t,r){r.d(t,{n:function(){return n}});let n="__MANTINE_FORM_INDEX__"},56926:function(e,t,r){r.d(t,{c:function(){return E}});var n=r(27378),l=r(66471);let i="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function a(e,t){i(()=>{if(e)return window.addEventListener(e,t),()=>window.removeEventListener(e,t)},[e])}function u(e){return null===e||"object"!=typeof e?{}:Object.keys(e).reduce((t,r)=>{let n=e[r];return null!=n&&!1!==n&&(t[r]=n),t},{})}function o(e,t){let r=Object.keys(e);if("string"==typeof t){let n=r.filter(e=>e.startsWith(`${t}.`));return e[t]||n.some(t=>e[t])||!1}return r.some(t=>e[t])}function s(e,t){if(null===t||"object"!=typeof t)return{};let r={...t};return Object.keys(t).forEach(t=>{t.includes(`${String(e)}.`)&&delete r[t]}),r}function f(e,t){let r=e.substring(t.length+1).split(".")[0];return parseInt(r,10)}function c(e,t,r,n){if(void 0===t)return r;let l=`${String(e)}`,i=r;-1===n&&(i=s(`${l}.${t}`,i));let a={...i},u=new Set;return Object.entries(i).filter(([e])=>{if(!e.startsWith(`${l}.`))return!1;let r=f(e,l);return!Number.isNaN(r)&&r>=t}).forEach(([e,t])=>{let r=f(e,l),i=e.replace(`${l}.${r}`,`${l}.${r+n}`);a[i]=t,u.add(i),u.has(e)||delete a[e]}),a}function d(e){return"string"!=typeof e?[]:e.split(".")}function m(e,t){let r=d(e);if(0===r.length||"object"!=typeof t||null===t)return;let n=t[r[0]];for(let e=1;e0,errors:t}}function h(e,t){return"function"==typeof e?b(e(t)):b(function e(t,r,n="",l={}){return"object"!=typeof t||null===t?l:Object.keys(t).reduce((l,i)=>{let a=t[i],u=`${""===n?"":`${n}.`}${i}`,o=m(u,r),s=!1;return"function"==typeof a&&(l[u]=a(o,r,u)),"object"==typeof a&&Array.isArray(o)&&(s=!0,o.forEach((t,n)=>e(a,r,`${u}.${n}`,l))),"object"!=typeof a||"object"!=typeof o||null===o||s||e(a,r,u,l),l},l)}(e,t))}function $(e,t,r){if("string"!=typeof e)return{hasError:!1,error:null};let n=h(t,r),l=Object.keys(n.errors).find(t=>e.split(".").every((e,r)=>e===t.split(".")[r]));return{hasError:!!l,error:l?n.errors[l]:null}}var k=r(50776);function v(e,t){return!!t&&("boolean"==typeof t?t:!!Array.isArray(t)&&t.includes(e.replace(/[.][0-9]/g,`.${k.n}`)))}function E({name:e,initialValues:t,initialErrors:r={},initialDirty:i={},initialTouched:f={},clearInputErrorOnChange:d=!0,validateInputOnChange:p=!1,validateInputOnBlur:b=!1,onValuesChange:k,transformValues:E=e=>e,enhanceGetInputProps:g,validate:C}={}){let[j,A]=(0,n.useState)(f),[O,w]=(0,n.useState)(i),[I,S]=(0,n.useState)(t||{}),[_,L]=(0,n.useState)(u(r)),[N,T]=(0,n.useState)(!1),D=(0,n.useRef)(t||{}),F=e=>{D.current=e},x=(0,n.useCallback)(e=>{N||(T(!0),S(e))},[N]),M=(0,n.useCallback)(()=>A({}),[]),V=(0,n.useCallback)(e=>L(t=>u("function"==typeof e?e(t):e)),[]),W=(0,n.useCallback)(()=>L({}),[]),H=(0,n.useCallback)(()=>{S(D.current),W(),w({}),M()},[]),P=(0,n.useCallback)((e,t)=>V(r=>({...r,[e]:t})),[]),R=(0,n.useCallback)(e=>V(t=>{if("string"!=typeof e)return t;let r={...t};return delete r[e],r}),[]),z=(0,n.useCallback)(e=>w(t=>{if("string"!=typeof e)return t;let r=s(e,t);return delete r[e],r}),[]),B=(0,n.useCallback)((e,t)=>{let r=v(e,p);z(e),A(t=>({...t,[e]:!0})),S(n=>{let l=y(e,t,n);if(r){let t=$(e,C,l);t.hasError?P(e,t.error):R(e)}return k?.(l),l}),!r&&d&&P(e,null)},[]),X=(0,n.useCallback)(e=>{S(t=>{let r="function"==typeof e?e(t):e,n={...t,...r};return k?.(n),n}),d&&W()},[]),Y=(0,n.useCallback)((e,t)=>{z(e),S(r=>{let n=function(e,{from:t,to:r},n){let l=m(e,n);if(!Array.isArray(l))return n;let i=[...l],a=l[t];return i.splice(t,1),i.splice(r,0,a),y(e,i,n)}(e,t,r);return k?.(n),n}),L(r=>(function(e,{from:t,to:r},n){let l=`${e}.${t}`,i=`${e}.${r}`,a={...n};return Object.keys(n).every(e=>{let t,r;if(e.startsWith(l)&&(t=e,r=e.replace(l,i)),e.startsWith(i)&&(t=e.replace(i,l),r=e),t&&r){let e=a[t],n=a[r];return void 0===n?delete a[t]:a[t]=n,void 0===e?delete a[r]:a[r]=e,!1}return!0}),a})(e,t,r))},[]),Z=(0,n.useCallback)((e,t)=>{z(e),S(r=>{let n=function(e,t,r){let n=m(e,r);return Array.isArray(n)?y(e,n.filter((e,r)=>r!==t),r):r}(e,t,r);return k?.(n),n}),L(r=>c(e,t,r,-1))},[]),q=(0,n.useCallback)((e,t,r)=>{z(e),S(n=>{let l=function(e,t,r,n){let l=m(e,n);if(!Array.isArray(l))return n;let i=[...l];return i.splice("number"==typeof r?r:i.length,0,t),y(e,i,n)}(e,t,r,n);return k?.(l),l}),L(t=>c(e,r,t,1))},[]),G=(0,n.useCallback)(()=>{let e=h(C,I);return L(e.errors),e},[I,C]),J=(0,n.useCallback)(e=>{let t=$(e,C,I);return t.hasError?P(e,t.error):R(e),t},[I,C]),K=(0,n.useCallback)(e=>{e.preventDefault(),H()},[]),Q=(0,n.useCallback)(e=>o(j,e),[j]),U=(0,n.useCallback)(e=>e?!$(e,C,I).hasError:!h(C,I).hasErrors,[I,C]),ee={initialized:N,values:I,errors:_,initialize:x,setValues:X,setInitialValues:F,setErrors:V,setFieldValue:B,setFieldError:P,clearFieldError:R,clearErrors:W,reset:H,validate:G,validateField:J,reorderListItem:Y,removeListItem:Z,insertListItem:q,getInputProps:(e,{type:t="input",withError:r=!0,withFocus:n=!0,...l}={})=>{var i;let a=(i=t=>B(e,t),e=>{if(e){if("function"==typeof e)i(e);else if("object"==typeof e&&"nativeEvent"in e){let{currentTarget:t}=e;t instanceof HTMLInputElement?"checkbox"===t.type?i(t.checked):i(t.value):(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)&&i(t.value)}else i(e)}else i(e)}),u={onChange:a};return r&&(u.error=_[e]),"checkbox"===t?u.checked=m(e,I):u.value=m(e,I),n&&(u.onFocus=()=>A(t=>({...t,[e]:!0})),u.onBlur=()=>{if(v(e,b)){let t=$(e,C,I);t.hasError?P(e,t.error):R(e)}}),Object.assign(u,g?.({inputProps:u,field:e,options:{type:t,withError:r,withFocus:n,...l},form:ee}))},onSubmit:(e,t)=>r=>{r?.preventDefault();let n=G();n.hasErrors?t?.(n.errors,I,r):e?.(E(I),r)},onReset:K,isDirty:e=>{if(e){let t=m(e,O);if("boolean"==typeof t)return t;let r=m(e,I),n=m(e,D.current);return!l(r,n)}let t=Object.keys(O).length>0;return t?o(O):!l(I,D.current)},isTouched:Q,setTouched:A,setDirty:w,resetTouched:M,resetDirty:e=>{let t=e?{...I,...e}:I;F(t),w({})},isValid:U,getTransformedValues:e=>E(e||I)};return e&&function(e){if(!/^[0-9a-zA-Z-]+$/.test(e))throw Error(`[@mantine/use-form] Form name "${e}" is invalid, it should contain only letters, numbers and dashes`)}(e),a(`mantine-form:${e}:set-field-value`,e=>ee.setFieldValue(e.detail.path,e.detail.value)),a(`mantine-form:${e}:set-values`,e=>ee.setValues(e.detail)),a(`mantine-form:${e}:set-initial-values`,e=>ee.setInitialValues(e.detail)),a(`mantine-form:${e}:set-errors`,e=>ee.setErrors(e.detail)),a(`mantine-form:${e}:set-field-error`,e=>ee.setFieldError(e.detail.path,e.detail.error)),a(`mantine-form:${e}:clear-field-error`,e=>ee.clearFieldError(e.detail)),a(`mantine-form:${e}:clear-errors`,ee.clearErrors),a(`mantine-form:${e}:reset`,ee.reset),a(`mantine-form:${e}:validate`,ee.validate),a(`mantine-form:${e}:validate-field`,e=>ee.validateField(e.detail)),a(`mantine-form:${e}:reorder-list-item`,e=>ee.reorderListItem(e.detail.path,e.detail.payload)),a(`mantine-form:${e}:remove-list-item`,e=>ee.removeListItem(e.detail.path,e.detail.index)),a(`mantine-form:${e}:insert-list-item`,e=>ee.insertListItem(e.detail.path,e.detail.item,e.detail.index)),a(`mantine-form:${e}:set-dirty`,e=>ee.setDirty(e.detail)),a(`mantine-form:${e}:set-touched`,e=>ee.setTouched(e.detail)),a(`mantine-form:${e}:reset-dirty`,e=>ee.resetDirty(e.detail)),a(`mantine-form:${e}:reset-touched`,ee.resetTouched),ee}}}]); \ No newline at end of file diff --git a/_next/static/chunks/67415-0d5f8623d44fd2ba.js b/_next/static/chunks/67415-0d5f8623d44fd2ba.js new file mode 100644 index 00000000000..7535eb8d6a5 --- /dev/null +++ b/_next/static/chunks/67415-0d5f8623d44fd2ba.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[67415],{81097:function(e,t,n){n.d(t,{r:function(){return d}});var l=n(27378),r=n(40624),a=n(38765),o=n(49849),i=n(45608),s=n(61777),u=n(62443);function c(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:n,checkIconPosition:o,unstyled:d}){if(!(0,s.f)(e)){let s=t&&c(n,e.value)&&l.createElement(a.n,{className:u.Z.optionsDropdownCheckIcon});return l.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[u.Z.optionsDropdownOption]:!d}),"data-reverse":"right"===o||void 0,"data-checked":c(n,e.value)||void 0,"aria-selected":c(n,e.value)},"left"===o&&s,l.createElement("span",null,e.label),"right"===o&&s)}let p=e.items.map(e=>l.createElement(Option,{data:e,value:n,key:e.value,unstyled:d,withCheckIcon:t,checkIconPosition:o}));return l.createElement(i.h.Group,{label:e.group},p)}function d({data:e,hidden:t,hiddenWhenEmpty:n,filter:r,search:a,limit:u,maxDropdownHeight:c,withScrollArea:d=!0,filterOptions:p=!0,withCheckIcon:m=!1,value:f,checkIconPosition:v,nothingFoundMessage:h,unstyled:g,labelId:E}){!function e(t,n=new Set){if(Array.isArray(t))for(let l of t)if((0,s.f)(l))e(l.items,n);else{if(void 0===l.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof l.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof l.value}`);if(n.has(l.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${l.value}" was provided more than once`);n.add(l.value)}}(e);let y="string"==typeof a,w=y?(r||function e({options:t,search:n,limit:l}){let r=n.trim().toLowerCase(),a=[];for(let o=0;o0)return!1;return!0}(w),D=w.map(e=>l.createElement(Option,{data:e,key:(0,s.f)(e)?e.group:e.value,withCheckIcon:m,value:f,checkIconPosition:v,unstyled:g}));return l.createElement(i.h.Dropdown,{hidden:t||n&&b},l.createElement(i.h.Options,{labelledBy:E},d?l.createElement(o.x.Autosize,{mah:c??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y"},D):D,b&&h&&l.createElement(i.h.Empty,null,h)))}},61777:function(e,t,n){n.d(t,{f:function(){return l}});function l(e){return"group"in e}},38099:function(e,t,n){n.d(t,{g:function(){return function e(t){return t.reduce((t,n)=>"group"in n?{...t,...e(n.items)}:(t[n.value]=n,t),{})}}})},67415:function(e,t,n){n.d(t,{N:function(){return b}});var l=n(27378),r=n(31002),a=n(58675),o=n(5564),i=n(6231),s=n(96739),u=n(55934),c=n(20410),d=n(2161),p=n(38099),m=n(45608),f=n(81097),v=n(54526),h=n(23163),g=n(39394),E=n(28639),y=n(61777);let w={maxValues:1/0,withCheckIcon:!0,checkIconPosition:"left",hiddenInputValuesDivider:","},b=(0,c.d)((e,t)=>{let n=(0,s.w)("MultiSelect",w,e),{classNames:c,className:h,style:b,styles:D,unstyled:C,vars:P,size:k,value:S,defaultValue:O,onChange:x,onKeyDown:I,variant:N,data:_,dropdownOpened:M,defaultDropdownOpened:z,onDropdownOpen:F,onDropdownClose:A,selectFirstOptionOnChange:V,onOptionSubmit:B,comboboxProps:G,filter:L,limit:R,withScrollArea:Z,maxDropdownHeight:$,searchValue:H,defaultSearchValue:T,onSearchChange:K,readOnly:j,disabled:W,onFocus:Y,onBlur:q,onPaste:J,radius:Q,rightSection:U,rightSectionWidth:X,rightSectionPointerEvents:ee,rightSectionProps:et,leftSection:en,leftSectionWidth:el,leftSectionPointerEvents:er,leftSectionProps:ea,inputContainer:eo,inputWrapperOrder:ei,withAsterisk:es,labelProps:eu,descriptionProps:ec,errorProps:ed,wrapperProps:ep,description:em,label:ef,error:ev,maxValues:eh,searchable:eg,nothingFoundMessage:eE,withCheckIcon:ey,checkIconPosition:ew,hidePickedOptions:eb,withErrorStyles:eD,name:eC,form:eP,id:ek,clearable:eS,clearButtonProps:eO,hiddenInputProps:ex,placeholder:eI,hiddenInputValuesDivider:eN,required:e_,mod:eM,...ez}=n,eF=(0,r.M)(ek),eA=(0,d.R)(_),eV=(0,p.g)(eA),eB=(0,v.K)({opened:M,defaultOpened:z,onDropdownOpen:F,onDropdownClose:()=>{A?.(),eB.resetSelectedOption()}}),{styleProps:eG,rest:{type:eL,...eR}}=(0,u.c)(ez),[eZ,e$]=(0,a.C)({value:S,defaultValue:O,finalValue:[],onChange:x}),[eH,eT]=(0,a.C)({value:H,defaultValue:T,finalValue:"",onChange:K}),eK=(0,i.y)({name:"MultiSelect",classes:{},props:n,classNames:c,styles:D,unstyled:C}),{resolvedClassNames:ej,resolvedStyles:eW}=(0,o.h)({props:n,styles:D,classNames:c}),eY=eZ.map((e,t)=>l.createElement(g.D,{key:`${e}-${t}`,withRemoveButton:!j&&!eV[e]?.disabled,onRemove:()=>e$(eZ.filter(t=>e!==t)),unstyled:C,...eK("pill")},eV[e]?.label||e));(0,l.useEffect)(()=>{V&&eB.selectFirstOption()},[V,eZ]);let eq=eS&&eZ.length>0&&!W&&!j&&l.createElement(m.h.ClearButton,{size:k,...eO,onClear:()=>{e$([]),eT("")}}),eJ=function({data:e,value:t}){let n=t.map(e=>e.trim().toLowerCase()),l=e.reduce((e,t)=>((0,y.f)(t)?e.push({group:t.group,items:t.items.filter(e=>-1===n.indexOf(e.value.toLowerCase().trim()))}):-1===n.indexOf(t.value.toLowerCase().trim())&&e.push(t),e),[]);return l}({data:eA,value:eZ});return l.createElement(l.Fragment,null,l.createElement(m.h,{store:eB,classNames:ej,styles:eW,unstyled:C,size:k,readOnly:j,__staticSelector:"MultiSelect",onOptionSubmit:e=>{B?.(e),eT(""),eB.updateSelectedOptionIndex("selected"),eZ.includes(eV[e].value)?e$(eZ.filter(t=>t!==eV[e].value)):eZ.lengtheg?eB.openDropdown():eB.toggleDropdown(),"data-expanded":eB.dropdownOpened||void 0,id:eF,required:e_,mod:eM},l.createElement(g.D.Group,{disabled:W,unstyled:C,...eK("pillsList")},eY,l.createElement(m.h.EventsTarget,null,l.createElement(E.d.Field,{...eR,ref:t,id:eF,placeholder:eI,type:eg||eI?"visible":"hidden",...eK("inputField"),unstyled:C,onFocus:e=>{Y?.(e),eg&&eB.openDropdown()},onBlur:e=>{q?.(e),eB.closeDropdown(),eT("")},onKeyDown:e=>{I?.(e)," "!==e.key||eg||(e.preventDefault(),eB.toggleDropdown()),"Backspace"===e.key&&0===eH.length&&eZ.length>0&&e$(eZ.slice(0,eZ.length-1))},value:eH,onChange:e=>{eT(e.currentTarget.value),eg&&eB.openDropdown(),V&&eB.selectFirstOption()},disabled:W,readOnly:j||!eg,pointer:!eg}))))),l.createElement(f.r,{data:eb?eJ:eA,hidden:j||W,filter:L,search:eH,limit:R,hiddenWhenEmpty:!eg||!eE||eb&&0===eJ.length&&0===eH.trim().length,withScrollArea:Z,maxDropdownHeight:$,filterOptions:eg,value:eZ,checkIconPosition:ew,withCheckIcon:ey,nothingFoundMessage:eE,unstyled:C,labelId:`${eF}-label`})),l.createElement("input",{type:"hidden",name:eC,value:eZ.join(eN),form:eP,disabled:W,...ex}))});b.classes={...h.M.classes,...m.h.classes},b.displayName="@mantine/core/MultiSelect"},39394:function(e,t,n){n.d(t,{D:function(){return b}});var l=n(27378),r=n(92082),a=n(83453),o=n(96739),i=n(6231),s=n(56589),u=n(20410),c=n(96217),d=n(33),p=n(89871);let[m,f]=(0,p.V)();var v={root:"m-7cda1cd6","root--default":"m-44da308b","root--contrast":"m-e3a01f8",label:"m-1e0e6180",remove:"m-ae386778",group:"m-1dcfd90b"};let h={},g=(0,a.Z)((e,{gap:t},{size:n})=>({group:{"--pg-gap":void 0!==t?(0,r.ap)(t):(0,r.ap)(n,"pg-gap")}})),E=(0,u.d)((e,t)=>{let n=(0,o.w)("PillGroup",h,e),{classNames:r,className:a,style:u,styles:c,unstyled:p,vars:f,size:E,disabled:y,...w}=n,b=(0,d.D)(),D=b?.size||E||void 0,C=(0,i.y)({name:"PillGroup",classes:v,props:n,className:a,style:u,classNames:r,styles:c,unstyled:p,vars:f,varsResolver:g,stylesCtx:{size:D},rootSelector:"group"});return l.createElement(m,{value:{size:D,disabled:y}},l.createElement(s.x,{ref:t,size:D,...C("group"),...w}))});E.classes=v,E.displayName="@mantine/core/PillGroup";let y={variant:"default"},w=(0,a.Z)((e,{radius:t},{size:n})=>({root:{"--pill-fz":(0,r.ap)(n,"pill-fz"),"--pill-height":(0,r.ap)(n,"pill-height"),"--pill-radius":void 0===t?void 0:(0,r.H5)(t)}})),b=(0,u.d)((e,t)=>{let n=(0,o.w)("Pill",y,e),{classNames:r,className:a,style:u,styles:p,unstyled:m,vars:h,variant:g,children:E,withRemoveButton:b,onRemove:D,removeButtonProps:C,radius:P,size:k,disabled:S,mod:O,...x}=n,I=f(),N=(0,d.D)(),_=k||I?.size||void 0,M=N?.variant==="filled"?"contrast":g||"default",z=(0,i.y)({name:"Pill",classes:v,props:n,className:a,style:u,classNames:r,styles:p,unstyled:m,vars:h,varsResolver:w,stylesCtx:{size:_}});return l.createElement(s.x,{component:"span",ref:t,variant:M,size:_,...z("root",{variant:M}),mod:[{"with-remove":b,disabled:S||I?.disabled},O],...x},l.createElement("span",{...z("label")},E),b&&l.createElement(c.P,{variant:"transparent",radius:P,tabIndex:-1,"aria-hidden":!0,unstyled:m,...C,...z("remove",{className:C?.className,style:C?.style}),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),C?.onMouseDown?.(e)},onClick:e=>{e.stopPropagation(),D?.(),C?.onClick?.(e)}}))});b.classes=v,b.displayName="@mantine/core/Pill",b.Group=E},33:function(e,t,n){n.d(t,{D:function(){return a},H:function(){return r}}),n(27378);var l=n(89871);let[r,a]=(0,l.V)()},28639:function(e,t,n){n.d(t,{d:function(){return h}});var l=n(27378),r=n(96739),a=n(20410),o=n(23163),i=n(33),s=n(72840),u=n(6231),c=n(56589),d=n(5739),p={field:"m-45c4369d"};let m={type:"visible"},f=(0,a.d)((e,t)=>{let n=(0,r.w)("PillsInputField",m,e),{classNames:a,className:o,style:f,styles:v,unstyled:h,vars:g,type:E,disabled:y,id:w,pointer:b,mod:D,...C}=n,P=(0,i.D)(),k=(0,d.D)(),S=(0,u.y)({name:"PillsInputField",classes:p,props:n,className:o,style:f,classNames:a,styles:v,unstyled:h,rootSelector:"field"}),O=y||P?.disabled;return l.createElement(c.x,{component:"input",ref:(0,s.Yx)(t,P?.fieldRef),"data-type":E,disabled:O,mod:[{disabled:O,pointer:b},D],...S("field"),...C,id:k?.inputId||w,"aria-invalid":P?.hasError,"aria-describedby":k?.describedBy,type:"text",onMouseDown:e=>!b&&e.stopPropagation()})});f.classes=p,f.displayName="@mantine/core/PillsInputField";let v={},h=(0,a.d)((e,t)=>{let n=(0,r.w)("PillsInput",v,e),{children:a,onMouseDown:s,onClick:u,size:c,disabled:d,__staticSelector:p,error:m,variant:f,...h}=n,g=(0,l.useRef)();return l.createElement(i.H,{value:{fieldRef:g,size:c,disabled:d,hasError:!!m,variant:f}},l.createElement(o.M,{size:c,error:m,variant:f,component:"div",ref:t,onMouseDown:e=>{e.preventDefault(),s?.(e),g.current?.focus()},onClick:e=>{e.preventDefault(),u?.(e),g.current?.focus()},...h,multiline:!0,disabled:d,__staticSelector:p||"PillsInput",withAria:!1},a))});h.displayName="@mantine/core/PillsInput",h.Field=f}}]); \ No newline at end of file diff --git a/_next/static/chunks/67415-9b578bfba9363405.js b/_next/static/chunks/67415-9b578bfba9363405.js deleted file mode 100644 index 3dce137aa7c..00000000000 --- a/_next/static/chunks/67415-9b578bfba9363405.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[67415],{81097:function(e,t,n){n.d(t,{r:function(){return d}});var l=n(27378),r=n(40624),a=n(38765),o=n(49849),i=n(45608),s=n(61777),u=n(62443);function c(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:n,checkIconPosition:o,unstyled:d}){if(!(0,s.f)(e)){let s=t&&c(n,e.value)&&l.createElement(a.n,{className:u.Z.optionsDropdownCheckIcon});return l.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[u.Z.optionsDropdownOption]:!d}),"data-reverse":"right"===o||void 0,"data-checked":c(n,e.value)||void 0,"aria-selected":c(n,e.value)},"left"===o&&s,l.createElement("span",null,e.label),"right"===o&&s)}let p=e.items.map(e=>l.createElement(Option,{data:e,value:n,key:e.value,unstyled:d,withCheckIcon:t,checkIconPosition:o}));return l.createElement(i.h.Group,{label:e.group},p)}function d({data:e,hidden:t,hiddenWhenEmpty:n,filter:r,search:a,limit:c,maxDropdownHeight:d,withScrollArea:p=!0,filterOptions:m=!0,withCheckIcon:f=!1,value:v,checkIconPosition:h,nothingFoundMessage:g,unstyled:E,labelId:y}){!function e(t,n=new Set){if(Array.isArray(t))for(let l of t)if((0,s.f)(l))e(l.items,n);else{if(void 0===l.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof l.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof l.value}`);if(n.has(l.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${l.value}" was provided more than once`);n.add(l.value)}}(e);let w="string"==typeof a,b=w?(r||function e({options:t,search:n,limit:l}){let r=n.trim().toLowerCase(),a=[];for(let o=0;o0)return!1;return!0}(b),C=b.map(e=>l.createElement(Option,{data:e,key:(0,s.f)(e)?e.group:e.value,withCheckIcon:f,value:v,checkIconPosition:h,unstyled:E}));return l.createElement(i.h.Dropdown,{hidden:t||n&&D},l.createElement(i.h.Options,{labelledBy:y},p?l.createElement(o.x.Autosize,{mah:d??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y",className:u.Z.optionsDropdownScrollArea},C):C,D&&g&&l.createElement(i.h.Empty,null,g)))}},61777:function(e,t,n){n.d(t,{f:function(){return l}});function l(e){return"group"in e}},38099:function(e,t,n){n.d(t,{g:function(){return function e(t){return t.reduce((t,n)=>"group"in n?{...t,...e(n.items)}:(t[n.value]=n,t),{})}}})},67415:function(e,t,n){n.d(t,{N:function(){return b}});var l=n(27378),r=n(31002),a=n(58675),o=n(5564),i=n(6231),s=n(96739),u=n(55934),c=n(20410),d=n(2161),p=n(38099),m=n(45608),f=n(81097),v=n(54526),h=n(23163),g=n(39394),E=n(28639),y=n(61777);let w={maxValues:1/0,withCheckIcon:!0,checkIconPosition:"left",hiddenInputValuesDivider:","},b=(0,c.d)((e,t)=>{let n=(0,s.w)("MultiSelect",w,e),{classNames:c,className:h,style:b,styles:D,unstyled:C,vars:P,size:S,value:k,defaultValue:O,onChange:x,onKeyDown:N,variant:I,data:_,dropdownOpened:M,defaultDropdownOpened:z,onDropdownOpen:F,onDropdownClose:A,selectFirstOptionOnChange:V,onOptionSubmit:B,comboboxProps:G,filter:L,limit:R,withScrollArea:Z,maxDropdownHeight:$,searchValue:H,defaultSearchValue:T,onSearchChange:K,readOnly:j,disabled:W,onFocus:Y,onBlur:q,onPaste:J,radius:Q,rightSection:U,rightSectionWidth:X,rightSectionPointerEvents:ee,rightSectionProps:et,leftSection:en,leftSectionWidth:el,leftSectionPointerEvents:er,leftSectionProps:ea,inputContainer:eo,inputWrapperOrder:ei,withAsterisk:es,labelProps:eu,descriptionProps:ec,errorProps:ed,wrapperProps:ep,description:em,label:ef,error:ev,maxValues:eh,searchable:eg,nothingFoundMessage:eE,withCheckIcon:ey,checkIconPosition:ew,hidePickedOptions:eb,withErrorStyles:eD,name:eC,form:eP,id:eS,clearable:ek,clearButtonProps:eO,hiddenInputProps:ex,placeholder:eN,hiddenInputValuesDivider:eI,required:e_,mod:eM,...ez}=n,eF=(0,r.M)(eS),eA=(0,d.R)(_),eV=(0,p.g)(eA),eB=(0,v.K)({opened:M,defaultOpened:z,onDropdownOpen:F,onDropdownClose:()=>{A?.(),eB.resetSelectedOption()}}),{styleProps:eG,rest:{type:eL,...eR}}=(0,u.c)(ez),[eZ,e$]=(0,a.C)({value:k,defaultValue:O,finalValue:[],onChange:x}),[eH,eT]=(0,a.C)({value:H,defaultValue:T,finalValue:"",onChange:K}),eK=(0,i.y)({name:"MultiSelect",classes:{},props:n,classNames:c,styles:D,unstyled:C}),{resolvedClassNames:ej,resolvedStyles:eW}=(0,o.h)({props:n,styles:D,classNames:c}),eY=eZ.map((e,t)=>l.createElement(g.D,{key:`${e}-${t}`,withRemoveButton:!j,onRemove:()=>e$(eZ.filter(t=>e!==t)),unstyled:C,...eK("pill")},eV[e]?.label||e));(0,l.useEffect)(()=>{V&&eB.selectFirstOption()},[V,eZ]);let eq=ek&&eZ.length>0&&!W&&!j&&l.createElement(m.h.ClearButton,{size:S,...eO,onClear:()=>{e$([]),eT("")}}),eJ=function({data:e,value:t}){let n=t.map(e=>e.trim().toLowerCase()),l=e.reduce((e,t)=>((0,y.f)(t)?e.push({group:t.group,items:t.items.filter(e=>-1===n.indexOf(e.value.toLowerCase().trim()))}):-1===n.indexOf(t.value.toLowerCase().trim())&&e.push(t),e),[]);return l}({data:eA,value:eZ});return l.createElement(l.Fragment,null,l.createElement(m.h,{store:eB,classNames:ej,styles:eW,unstyled:C,size:S,readOnly:j,__staticSelector:"MultiSelect",onOptionSubmit:e=>{B?.(e),eT(""),eB.updateSelectedOptionIndex("selected"),eZ.includes(eV[e].value)?e$(eZ.filter(t=>t!==eV[e].value)):eZ.lengtheg?eB.openDropdown():eB.toggleDropdown(),"data-expanded":eB.dropdownOpened||void 0,id:eF,required:e_,mod:eM},l.createElement(g.D.Group,{disabled:W,unstyled:C,...eK("pillsList")},eY,l.createElement(m.h.EventsTarget,null,l.createElement(E.d.Field,{...eR,ref:t,id:eF,placeholder:eN,type:eg||eN?"visible":"hidden",...eK("inputField"),unstyled:C,onFocus:e=>{Y?.(e),eg&&eB.openDropdown()},onBlur:e=>{q?.(e),eB.closeDropdown(),eT("")},onKeyDown:e=>{N?.(e)," "!==e.key||eg||(e.preventDefault(),eB.toggleDropdown()),"Backspace"===e.key&&0===eH.length&&eZ.length>0&&e$(eZ.slice(0,eZ.length-1))},value:eH,onChange:e=>{eT(e.currentTarget.value),eg&&eB.openDropdown(),V&&eB.selectFirstOption()},disabled:W,readOnly:j||!eg,pointer:!eg}))))),l.createElement(f.r,{data:eb?eJ:eA,hidden:j||W,filter:L,search:eH,limit:R,hiddenWhenEmpty:!eg||!eE||eb&&0===eJ.length&&0===eH.trim().length,withScrollArea:Z,maxDropdownHeight:$,filterOptions:eg,value:eZ,checkIconPosition:ew,withCheckIcon:ey,nothingFoundMessage:eE,unstyled:C,labelId:`${eF}-label`})),l.createElement("input",{type:"hidden",name:eC,value:eZ.join(eI),form:eP,disabled:W,...ex}))});b.classes={...h.M.classes,...m.h.classes},b.displayName="@mantine/core/MultiSelect"},39394:function(e,t,n){n.d(t,{D:function(){return b}});var l=n(27378),r=n(92082),a=n(83453),o=n(96739),i=n(6231),s=n(56589),u=n(20410),c=n(96217),d=n(33),p=n(89871);let[m,f]=(0,p.V)();var v={root:"m-7cda1cd6","root--default":"m-44da308b","root--contrast":"m-e3a01f8",label:"m-1e0e6180",remove:"m-ae386778",group:"m-1dcfd90b"};let h={},g=(0,a.Z)((e,{gap:t},{size:n})=>({group:{"--pg-gap":void 0!==t?(0,r.ap)(t):(0,r.ap)(n,"pg-gap")}})),E=(0,u.d)((e,t)=>{let n=(0,o.w)("PillGroup",h,e),{classNames:r,className:a,style:u,styles:c,unstyled:p,vars:f,size:E,disabled:y,...w}=n,b=(0,d.D)(),D=b?.size||E||void 0,C=(0,i.y)({name:"PillGroup",classes:v,props:n,className:a,style:u,classNames:r,styles:c,unstyled:p,vars:f,varsResolver:g,stylesCtx:{size:D},rootSelector:"group"});return l.createElement(m,{value:{size:D,disabled:y}},l.createElement(s.x,{ref:t,size:D,...C("group"),...w}))});E.classes=v,E.displayName="@mantine/core/PillGroup";let y={variant:"default"},w=(0,a.Z)((e,{radius:t},{size:n})=>({root:{"--pill-fz":(0,r.ap)(n,"pill-fz"),"--pill-height":(0,r.ap)(n,"pill-height"),"--pill-radius":void 0===t?void 0:(0,r.H5)(t)}})),b=(0,u.d)((e,t)=>{let n=(0,o.w)("Pill",y,e),{classNames:r,className:a,style:u,styles:p,unstyled:m,vars:h,variant:g,children:E,withRemoveButton:b,onRemove:D,removeButtonProps:C,radius:P,size:S,disabled:k,mod:O,...x}=n,N=f(),I=(0,d.D)(),_=S||N?.size||void 0,M=I?.variant==="filled"?"contrast":g||"default",z=(0,i.y)({name:"Pill",classes:v,props:n,className:a,style:u,classNames:r,styles:p,unstyled:m,vars:h,varsResolver:w,stylesCtx:{size:_}});return l.createElement(s.x,{component:"span",ref:t,variant:M,size:_,...z("root",{variant:M}),mod:[{"with-remove":b,disabled:k||N?.disabled},O],...x},l.createElement("span",{...z("label")},E),b&&l.createElement(c.P,{variant:"transparent",radius:P,tabIndex:-1,"aria-hidden":!0,unstyled:m,...C,...z("remove",{className:C?.className,style:C?.style}),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),C?.onMouseDown?.(e)},onClick:e=>{e.stopPropagation(),D?.(),C?.onClick?.(e)}}))});b.classes=v,b.displayName="@mantine/core/Pill",b.Group=E},33:function(e,t,n){n.d(t,{D:function(){return a},H:function(){return r}}),n(27378);var l=n(89871);let[r,a]=(0,l.V)()},28639:function(e,t,n){n.d(t,{d:function(){return h}});var l=n(27378),r=n(96739),a=n(20410),o=n(23163),i=n(33),s=n(72840),u=n(6231),c=n(56589),d=n(5739),p={field:"m-45c4369d"};let m={type:"visible"},f=(0,a.d)((e,t)=>{let n=(0,r.w)("PillsInputField",m,e),{classNames:a,className:o,style:f,styles:v,unstyled:h,vars:g,type:E,disabled:y,id:w,pointer:b,mod:D,...C}=n,P=(0,i.D)(),S=(0,d.D)(),k=(0,u.y)({name:"PillsInputField",classes:p,props:n,className:o,style:f,classNames:a,styles:v,unstyled:h,rootSelector:"field"}),O=y||P?.disabled;return l.createElement(c.x,{component:"input",ref:(0,s.Yx)(t,P?.fieldRef),"data-type":E,disabled:O,mod:[{disabled:O,pointer:b},D],...k("field"),...C,id:S?.inputId||w,"aria-invalid":P?.hasError,"aria-describedby":S?.describedBy,type:"text",onMouseDown:e=>!b&&e.stopPropagation()})});f.classes=p,f.displayName="@mantine/core/PillsInputField";let v={},h=(0,a.d)((e,t)=>{let n=(0,r.w)("PillsInput",v,e),{children:a,onMouseDown:s,onClick:u,size:c,disabled:d,__staticSelector:p,error:m,variant:f,...h}=n,g=(0,l.useRef)();return l.createElement(i.H,{value:{fieldRef:g,size:c,disabled:d,hasError:!!m,variant:f}},l.createElement(o.M,{size:c,error:m,variant:f,component:"div",ref:t,onMouseDown:e=>{e.preventDefault(),s?.(e),g.current?.focus()},onClick:e=>{e.preventDefault(),u?.(e),g.current?.focus()},...h,multiline:!0,disabled:d,__staticSelector:p||"PillsInput",withAria:!1},a))});h.displayName="@mantine/core/PillsInput",h.Field=f}}]); \ No newline at end of file diff --git a/_next/static/chunks/91457-112c89f0927bd248.js b/_next/static/chunks/91457-215dacfcdbcff791.js similarity index 71% rename from _next/static/chunks/91457-112c89f0927bd248.js rename to _next/static/chunks/91457-215dacfcdbcff791.js index c0256bf9df2..0adab5626a9 100644 --- a/_next/static/chunks/91457-112c89f0927bd248.js +++ b/_next/static/chunks/91457-215dacfcdbcff791.js @@ -32,4 +32,4 @@ function Demo() { ); } -`,r={type:"code",code:l,component:function(){return a.createElement(a.Fragment,null,a.createElement(i.x,{mb:"xs"},"1 sibling (default)"),a.createElement(o.t,{total:20,siblings:1,defaultValue:10}),a.createElement(i.x,{mb:"xs",mt:"xl"},"2 siblings"),a.createElement(o.t,{total:20,siblings:2,defaultValue:10}),a.createElement(i.x,{mb:"xs",mt:"xl"},"3 siblings"),a.createElement(o.t,{total:20,siblings:3,defaultValue:10}))}}},41307:function(e,t,n){n.d(t,{t:function(){return S}});var a=n(27378),i=n(96739),o=n(20410),l=n(22971),r=n(19397),s=n(71656);let[c,u]=(0,s.R)("Pagination.Root component was not found in tree");var m={root:"m-4addd315",control:"m-326d024a",dots:"m-4ad7767d"};let d={withPadding:!0},g=(0,o.d)((e,t)=>{let n=(0,i.w)("PaginationControl",d,e),{classNames:o,className:l,style:s,styles:c,vars:m,active:g,disabled:x,withPadding:p,mod:b,...f}=n,v=u(),E=x||v.disabled;return a.createElement(r.k,{ref:t,disabled:E,mod:[{active:g,disabled:E,"with-padding":p},b],...v.getStyles("control",{className:l,style:s,classNames:o,styles:c,active:!E}),...f})});g.classes=m,g.displayName="@mantine/core/PaginationControl";var x=n(56589);function p({style:e,children:t,path:n,...i}){return a.createElement("svg",{viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)",...e},...i},a.createElement("path",{d:n,fill:"currentColor"}))}let b={icon:e=>a.createElement(p,{...e,path:"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"})},f=(0,o.d)((e,t)=>{let n=(0,i.w)("PaginationDots",b,e),{classNames:o,className:l,style:r,styles:s,vars:c,icon:m,...d}=n,g=u();return a.createElement(x.x,{ref:t,...g.getStyles("dots",{className:l,style:r,styles:s,classNames:o}),...d},a.createElement(m,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});f.classes=m,f.displayName="@mantine/core/PaginationDots";var v=n(31788);function E({icon:e,name:t,action:n,type:o}){let l={icon:e},r=(0,a.forwardRef)((e,r)=>{let{icon:s,...c}=(0,i.w)(t,l,e),m=u(),d="next"===o?m.active===m.total:1===m.active;return a.createElement(g,{disabled:m.disabled||d,ref:r,onClick:m[n],withPadding:!1,...c},a.createElement(s,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});return r.displayName=`@mantine/core/${t}`,(0,v.F)(r)}let C=E({icon:e=>a.createElement(p,{...e,path:"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"}),name:"PaginationNext",action:"onNext",type:"next"}),P=E({icon:e=>a.createElement(p,{...e,path:"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"}),name:"PaginationPrevious",action:"onPrevious",type:"previous"}),h=E({icon:e=>a.createElement(p,{...e,path:"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"}),name:"PaginationFirst",action:"onFirst",type:"previous"}),y=E({icon:e=>a.createElement(p,{...e,path:"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"}),name:"PaginationLast",action:"onLast",type:"next"});function L({dotsIcon:e}){let t=u(),n=t.range.map((n,i)=>"dots"===n?a.createElement(f,{icon:e,key:i}):a.createElement(g,{key:i,active:n===t.active,"aria-current":n===t.active?"page":void 0,onClick:()=>t.onChange(n),disabled:t.disabled,...t.getItemProps?.(n)},n));return a.createElement(a.Fragment,null,n)}L.displayName="@mantine/core/PaginationItems";var w=n(58675);function z(e,t){return Array.from({length:t-e+1},(t,n)=>n+e)}let T="dots";var V=n(92082),M=n(41664),N=n(83453),k=n(89738),F=n(34121),R=n(6231);let Z={siblings:1,boundaries:1},D=(0,N.Z)((e,{size:t,radius:n,color:a,autoContrast:i})=>({root:{"--pagination-control-radius":void 0===n?void 0:(0,V.H5)(n),"--pagination-control-size":(0,V.ap)(t,"pagination-control-size"),"--pagination-control-fz":(0,V.yv)(t),"--pagination-active-bg":a?(0,k.p)(a,e):void 0,"--pagination-active-color":i?(0,F.R)({color:a,theme:e}):void 0}})),_=(0,o.d)((e,t)=>{let n=(0,i.w)("PaginationRoot",Z,e),{classNames:o,className:l,style:r,styles:s,unstyled:u,vars:d,total:g,value:p,defaultValue:b,onChange:f,disabled:v,siblings:E,boundaries:C,color:P,radius:h,onNextPage:y,onPreviousPage:L,onFirstPage:V,onLastPage:N,getItemProps:k,autoContrast:F,..._}=n,I=(0,R.y)({name:"Pagination",classes:m,props:n,className:l,style:r,classNames:o,styles:s,unstyled:u,vars:d,varsResolver:D}),{range:S,setPage:A,next:B,previous:H,active:$,first:j,last:q}=function({total:e,siblings:t=1,boundaries:n=1,page:i,initialPage:o=1,onChange:l}){let r=Math.max(Math.trunc(e),0),[s,c]=(0,w.C)({value:i,onChange:l,defaultValue:o,finalValue:o}),u=e=>{e<=0?c(1):e>r?c(r):c(e)},m=(0,a.useMemo)(()=>{let e=2*t+3+2*n;if(e>=r)return z(1,r);let a=Math.max(s-t,n),i=Math.min(s+t,r-n),o=a>n+2,l=iu(s+1),previous:()=>u(s-1),first:()=>u(1),last:()=>u(r)}}({page:p,initialPage:b,onChange:f,total:g,siblings:E,boundaries:C}),G=(0,M.x)(y,B),J=(0,M.x)(L,H),K=(0,M.x)(V,j),O=(0,M.x)(N,q);return a.createElement(c,{value:{total:g,range:S,active:$,disabled:v,getItemProps:k,onChange:A,onNext:G,onPrevious:J,onFirst:K,onLast:O,getStyles:I}},a.createElement(x.x,{ref:t,...I("root"),..._}))});_.classes=m,_.displayName="@mantine/core/PaginationRoot";let I={withControls:!0,siblings:1,boundaries:1,gap:8},S=(0,o.d)((e,t)=>{let n=(0,i.w)("Pagination",I,e),{withEdges:o,withControls:r,getControlProps:s,nextIcon:c,previousIcon:u,lastIcon:m,firstIcon:d,dotsIcon:g,total:x,gap:p,...b}=n;return x<=0?null:a.createElement(_,{ref:t,total:x,...b},a.createElement(l.Z,{gap:p},o&&a.createElement(h,{icon:d,...s?.("first")}),r&&a.createElement(P,{icon:u,...s?.("previous")}),a.createElement(L,{dotsIcon:g}),r&&a.createElement(C,{icon:c,...s?.("next")}),o&&a.createElement(y,{icon:m,...s?.("last")})))});S.classes=m,S.displayName="@mantine/core/Pagination",S.Root=_,S.Control=g,S.Dots=f,S.First=h,S.Last=y,S.Next=C,S.Previous=P,S.Items=L}}]); \ No newline at end of file +`,r={type:"code",code:l,component:function(){return a.createElement(a.Fragment,null,a.createElement(i.x,{mb:"xs"},"1 sibling (default)"),a.createElement(o.t,{total:20,siblings:1,defaultValue:10}),a.createElement(i.x,{mb:"xs",mt:"xl"},"2 siblings"),a.createElement(o.t,{total:20,siblings:2,defaultValue:10}),a.createElement(i.x,{mb:"xs",mt:"xl"},"3 siblings"),a.createElement(o.t,{total:20,siblings:3,defaultValue:10}))}}},41307:function(e,t,n){n.d(t,{t:function(){return A}});var a=n(27378),i=n(96739),o=n(20410),l=n(22971),r=n(19397),s=n(71656);let[c,u]=(0,s.R)("Pagination.Root component was not found in tree");var m={root:"m-4addd315",control:"m-326d024a",dots:"m-4ad7767d"};let d={withPadding:!0},g=(0,o.d)((e,t)=>{let n=(0,i.w)("PaginationControl",d,e),{classNames:o,className:l,style:s,styles:c,vars:m,active:g,disabled:x,withPadding:p,mod:b,...f}=n,v=u(),E=x||v.disabled;return a.createElement(r.k,{ref:t,disabled:E,mod:[{active:g,disabled:E,"with-padding":p},b],...v.getStyles("control",{className:l,style:s,classNames:o,styles:c,active:!E}),...f})});g.classes=m,g.displayName="@mantine/core/PaginationControl";var x=n(56589);function p({style:e,children:t,path:n,...i}){return a.createElement("svg",{viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)",...e},...i},a.createElement("path",{d:n,fill:"currentColor"}))}let b={icon:e=>a.createElement(p,{...e,path:"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"})},f=(0,o.d)((e,t)=>{let n=(0,i.w)("PaginationDots",b,e),{classNames:o,className:l,style:r,styles:s,vars:c,icon:m,...d}=n,g=u();return a.createElement(x.x,{ref:t,...g.getStyles("dots",{className:l,style:r,styles:s,classNames:o}),...d},a.createElement(m,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});f.classes=m,f.displayName="@mantine/core/PaginationDots";var v=n(31788);function E({icon:e,name:t,action:n,type:o}){let l={icon:e},r=(0,a.forwardRef)((e,r)=>{let{icon:s,...c}=(0,i.w)(t,l,e),m=u(),d="next"===o?m.active===m.total:1===m.active;return a.createElement(g,{disabled:m.disabled||d,ref:r,onClick:m[n],withPadding:!1,...c},a.createElement(s,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});return r.displayName=`@mantine/core/${t}`,(0,v.F)(r)}let C=E({icon:e=>a.createElement(p,{...e,path:"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"}),name:"PaginationNext",action:"onNext",type:"next"}),P=E({icon:e=>a.createElement(p,{...e,path:"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"}),name:"PaginationPrevious",action:"onPrevious",type:"previous"}),h=E({icon:e=>a.createElement(p,{...e,path:"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"}),name:"PaginationFirst",action:"onFirst",type:"previous"}),y=E({icon:e=>a.createElement(p,{...e,path:"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"}),name:"PaginationLast",action:"onLast",type:"next"});function L({dotsIcon:e}){let t=u(),n=t.range.map((n,i)=>"dots"===n?a.createElement(f,{icon:e,key:i}):a.createElement(g,{key:i,active:n===t.active,"aria-current":n===t.active?"page":void 0,onClick:()=>t.onChange(n),disabled:t.disabled,...t.getItemProps?.(n)},n));return a.createElement(a.Fragment,null,n)}L.displayName="@mantine/core/PaginationItems";var w=n(58675);function z(e,t){return Array.from({length:t-e+1},(t,n)=>n+e)}let T="dots";var V=n(92082),M=n(41664),N=n(83453),k=n(89738),F=n(34121),R=n(55357),Z=n(6231);let D={siblings:1,boundaries:1},_=(0,N.Z)((e,{size:t,radius:n,color:a,autoContrast:i})=>({root:{"--pagination-control-radius":void 0===n?void 0:(0,V.H5)(n),"--pagination-control-size":(0,V.ap)(t,"pagination-control-size"),"--pagination-control-fz":(0,V.yv)(t),"--pagination-active-bg":a?(0,k.p)(a,e):void 0,"--pagination-active-color":(0,R.o)(i,e)?(0,F.R)({color:a,theme:e}):void 0}})),I=(0,o.d)((e,t)=>{let n=(0,i.w)("PaginationRoot",D,e),{classNames:o,className:l,style:r,styles:s,unstyled:u,vars:d,total:g,value:p,defaultValue:b,onChange:f,disabled:v,siblings:E,boundaries:C,color:P,radius:h,onNextPage:y,onPreviousPage:L,onFirstPage:V,onLastPage:N,getItemProps:k,autoContrast:F,...R}=n,I=(0,Z.y)({name:"Pagination",classes:m,props:n,className:l,style:r,classNames:o,styles:s,unstyled:u,vars:d,varsResolver:_}),{range:S,setPage:A,next:B,previous:H,active:$,first:j,last:q}=function({total:e,siblings:t=1,boundaries:n=1,page:i,initialPage:o=1,onChange:l}){let r=Math.max(Math.trunc(e),0),[s,c]=(0,w.C)({value:i,onChange:l,defaultValue:o,finalValue:o}),u=e=>{e<=0?c(1):e>r?c(r):c(e)},m=(0,a.useMemo)(()=>{let e=2*t+3+2*n;if(e>=r)return z(1,r);let a=Math.max(s-t,n),i=Math.min(s+t,r-n),o=a>n+2,l=iu(s+1),previous:()=>u(s-1),first:()=>u(1),last:()=>u(r)}}({page:p,initialPage:b,onChange:f,total:g,siblings:E,boundaries:C}),G=(0,M.x)(y,B),J=(0,M.x)(L,H),K=(0,M.x)(V,j),O=(0,M.x)(N,q);return a.createElement(c,{value:{total:g,range:S,active:$,disabled:v,getItemProps:k,onChange:A,onNext:G,onPrevious:J,onFirst:K,onLast:O,getStyles:I}},a.createElement(x.x,{ref:t,...I("root"),...R}))});I.classes=m,I.displayName="@mantine/core/PaginationRoot";let S={withControls:!0,siblings:1,boundaries:1,gap:8},A=(0,o.d)((e,t)=>{let n=(0,i.w)("Pagination",S,e),{withEdges:o,withControls:r,getControlProps:s,nextIcon:c,previousIcon:u,lastIcon:m,firstIcon:d,dotsIcon:g,total:x,gap:p,...b}=n;return x<=0?null:a.createElement(I,{ref:t,total:x,...b},a.createElement(l.Z,{gap:p},o&&a.createElement(h,{icon:d,...s?.("first")}),r&&a.createElement(P,{icon:u,...s?.("previous")}),a.createElement(L,{dotsIcon:g}),r&&a.createElement(C,{icon:c,...s?.("next")}),o&&a.createElement(y,{icon:m,...s?.("last")})))});A.classes=m,A.displayName="@mantine/core/Pagination",A.Root=I,A.Control=g,A.Dots=f,A.First=h,A.Last=y,A.Next=C,A.Previous=P,A.Items=L}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-f646e3d320ee154a.js b/_next/static/chunks/pages/_app-e29089b14640de25.js similarity index 65% rename from _next/static/chunks/pages/_app-f646e3d320ee154a.js rename to _next/static/chunks/pages/_app-e29089b14640de25.js index 16ef24e9ddb..e7856d9f599 100644 --- a/_next/static/chunks/pages/_app-f646e3d320ee154a.js +++ b/_next/static/chunks/pages/_app-e29089b14640de25.js @@ -1,7 +1,7 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92888],{95954:function(e,t,n){"use strict";n.d(t,{YF:function(){return m},x7:function(){return c}});var r=n(63349),o=n(25772),i=n(27378),a=n(31542);let c=e=>({name:"arrow",options:e,fn(t){let{element:n,padding:o}="function"==typeof e?e(t):e;if(n&&({}).hasOwnProperty.call(n,"current")){if(null!=n.current)return(0,r.x7)({element:n.current,padding:o}).fn(t)}else if(n)return(0,r.x7)({element:n,padding:o}).fn(t);return{}}});var s="undefined"!=typeof document?i.useLayoutEffect:i.useEffect;function l(e,t){let n,r,o;if(e===t)return!0;if(typeof e!=typeof t)return!1;if("function"==typeof e&&e.toString()===t.toString())return!0;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if((n=e.length)!=t.length)return!1;for(r=n;0!=r--;)if(!l(e[r],t[r]))return!1;return!0}if((n=(o=Object.keys(e)).length)!==Object.keys(t).length)return!1;for(r=n;0!=r--;)if(!({}).hasOwnProperty.call(t,o[r]))return!1;for(r=n;0!=r--;){let n=o[r];if(("_owner"!==n||!e.$$typeof)&&!l(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function u(e){if("undefined"==typeof window)return 1;let t=e.ownerDocument.defaultView||window;return t.devicePixelRatio||1}function d(e,t){let n=u(e);return Math.round(t*n)/n}function p(e){let t=i.useRef(e);return s(()=>{t.current=e}),t}function m(e){void 0===e&&(e={});let{placement:t="bottom",strategy:n="absolute",middleware:r=[],platform:c,elements:{reference:m,floating:f}={},transform:g=!0,whileElementsMounted:h,open:y}=e,[v,b]=i.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[k,x]=i.useState(r);l(k,r)||x(r);let[w,E]=i.useState(null),[C,F]=i.useState(null),S=i.useCallback(e=>{e!=M.current&&(M.current=e,E(e))},[E]),B=i.useCallback(e=>{e!==D.current&&(D.current=e,F(e))},[F]),j=m||w,I=f||C,M=i.useRef(null),D=i.useRef(null),T=i.useRef(v),A=p(h),P=p(c),R=i.useCallback(()=>{if(!M.current||!D.current)return;let e={placement:t,strategy:n,middleware:k};P.current&&(e.platform=P.current),(0,o.oo)(M.current,D.current,e).then(e=>{let t={...e,isPositioned:!0};N.current&&!l(T.current,t)&&(T.current=t,a.flushSync(()=>{b(t)}))})},[k,t,n,P]);s(()=>{!1===y&&T.current.isPositioned&&(T.current.isPositioned=!1,b(e=>({...e,isPositioned:!1})))},[y]);let N=i.useRef(!1);s(()=>(N.current=!0,()=>{N.current=!1}),[]),s(()=>{if(j&&(M.current=j),I&&(D.current=I),j&&I){if(A.current)return A.current(j,I,R);R()}},[j,I,R,A]);let L=i.useMemo(()=>({reference:M,floating:D,setReference:S,setFloating:B}),[S,B]),H=i.useMemo(()=>({reference:j,floating:I}),[j,I]),$=i.useMemo(()=>{let e={position:n,left:0,top:0};if(!H.floating)return e;let t=d(H.floating,v.x),r=d(H.floating,v.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...u(H.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}},[n,g,H.floating,v.x,v.y]);return i.useMemo(()=>({...v,update:R,refs:L,elements:H,floatingStyles:$}),[v,R,L,H,$])}},2216:function(e,t,n){"use strict";n.d(t,{KK:function(){return _},NI:function(){return Z},Qu:function(){return D},XI:function(){return B},YF:function(){return z},bQ:function(){return O},e0:function(){return M},qs:function(){return G},tj:function(){return I}});var r,o=n(25772),i=n(95954),a=n(27378);n(31542);var c="undefined"!=typeof document?a.useLayoutEffect:a.useEffect;let s=!1,l=0,u=()=>"floating-ui-"+l++,d=(r||(r=n.t(a,2)))["useId".toString()],p=d||function(){let[e,t]=a.useState(()=>s?u():void 0);return c(()=>{null==e&&t(u())},[]),a.useEffect(()=>{s||(s=!0)},[]),e},m=a.createContext(null),f=a.createContext(null),g=()=>{var e;return(null==(e=a.useContext(m))?void 0:e.id)||null},h=()=>a.useContext(f);function y(e){return(null==e?void 0:e.ownerDocument)||document}function v(e){return y(e).defaultView||window}function b(e){return!!e&&(e instanceof Element||e instanceof v(e).Element)}function k(e){return!!e&&(e instanceof HTMLElement||e instanceof v(e).HTMLElement)}function x(e,t){let n=["mouse","pen"];return t||n.push("",void 0),n.includes(e)}function w(e,t){if(!e||!t)return!1;let n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&function(e){if("undefined"==typeof ShadowRoot)return!1;let t=v(e).ShadowRoot;return e instanceof t||e instanceof ShadowRoot}(n)){let n=t;for(;n;){if(e===n)return!0;n=n.parentNode||n.host}}return!1}function E(e){return"data-floating-ui-"+e}function C(e){let t=(0,a.useRef)(e);return c(()=>{t.current=e}),t}let F=E("safe-polygon");function S(e,t,n){return n&&!x(n)?0:"number"==typeof e?e:null==e?void 0:e[t]}function B(e,t){void 0===t&&(t={});let{open:n,onOpenChange:r,dataRef:o,events:i,elements:{domReference:s,floating:l},refs:u}=e,{enabled:d=!0,delay:p=0,handleClose:m=null,mouseOnly:f=!1,restMs:v=0,move:k=!0}=t,E=h(),B=g(),j=C(m),I=C(p),M=a.useRef(),D=a.useRef(),T=a.useRef(),A=a.useRef(),P=a.useRef(!0),R=a.useRef(!1),N=a.useRef(()=>{}),L=a.useCallback(()=>{var e;let t=null==(e=o.current.openEvent)?void 0:e.type;return(null==t?void 0:t.includes("mouse"))&&"mousedown"!==t},[o]);a.useEffect(()=>{if(d)return i.on("dismiss",e),()=>{i.off("dismiss",e)};function e(){clearTimeout(D.current),clearTimeout(A.current),P.current=!0}},[d,i]),a.useEffect(()=>{if(!d||!j.current||!n)return;function e(e){L()&&r(!1,e)}let t=y(l).documentElement;return t.addEventListener("mouseleave",e),()=>{t.removeEventListener("mouseleave",e)}},[l,n,r,d,j,o,L]);let H=a.useCallback(function(e,t){void 0===t&&(t=!0);let n=S(I.current,"close",M.current);n&&!T.current?(clearTimeout(D.current),D.current=setTimeout(()=>r(!1,e),n)):t&&(clearTimeout(D.current),r(!1,e))},[I,r]),$=a.useCallback(()=>{N.current(),T.current=void 0},[]),O=a.useCallback(()=>{if(R.current){let e=y(u.floating.current).body;e.style.pointerEvents="",e.removeAttribute(F),R.current=!1}},[u]);return a.useEffect(()=>{if(d&&b(s))return n&&s.addEventListener("mouseleave",c),null==l||l.addEventListener("mouseleave",c),k&&s.addEventListener("mousemove",i,{once:!0}),s.addEventListener("mouseenter",i),s.addEventListener("mouseleave",a),()=>{n&&s.removeEventListener("mouseleave",c),null==l||l.removeEventListener("mouseleave",c),k&&s.removeEventListener("mousemove",i),s.removeEventListener("mouseenter",i),s.removeEventListener("mouseleave",a)};function t(){return!!o.current.openEvent&&["click","mousedown"].includes(o.current.openEvent.type)}function i(e){if(clearTimeout(D.current),P.current=!1,f&&!x(M.current)||v>0&&0===S(I.current,"open"))return;let t=S(I.current,"open",M.current);t?D.current=setTimeout(()=>{r(!0,e)},t):r(!0,e)}function a(r){if(t())return;N.current();let o=y(l);if(clearTimeout(A.current),j.current){n||clearTimeout(D.current),T.current=j.current({...e,tree:E,x:r.clientX,y:r.clientY,onClose(){O(),$(),H(r)}});let t=T.current;o.addEventListener("mousemove",t),N.current=()=>{o.removeEventListener("mousemove",t)};return}let i="touch"!==M.current||!w(l,r.relatedTarget);i&&H(r)}function c(n){t()||null==j.current||j.current({...e,tree:E,x:n.clientX,y:n.clientY,onClose(){O(),$(),H(n)}})(n)}},[s,l,d,e,f,v,k,H,$,O,r,n,E,I,j,o]),c(()=>{var e,t,r;if(d&&n&&null!=(e=j.current)&&e.__options.blockPointerEvents&&L()){let e=y(l).body;if(e.setAttribute(F,""),e.style.pointerEvents="none",R.current=!0,b(s)&&l){let e=null==E?void 0:null==(t=E.nodesRef.current.find(e=>e.id===B))?void 0:null==(r=t.context)?void 0:r.elements.floating;return e&&(e.style.pointerEvents=""),s.style.pointerEvents="auto",l.style.pointerEvents="auto",()=>{s.style.pointerEvents="",l.style.pointerEvents=""}}}},[d,n,B,l,s,E,j,o,L]),c(()=>{n||(M.current=void 0,$(),O())},[n,$,O]),a.useEffect(()=>()=>{$(),clearTimeout(D.current),clearTimeout(A.current),O()},[d,$,O]),a.useMemo(()=>{if(!d)return{};function e(e){M.current=e.pointerType}return{reference:{onPointerDown:e,onPointerEnter:e,onMouseMove(e){n||0===v||(clearTimeout(A.current),A.current=setTimeout(()=>{P.current||r(!0,e.nativeEvent)},v))}},floating:{onMouseEnter(){clearTimeout(D.current)},onMouseLeave(e){i.emit("dismiss",{type:"mouseLeave",data:{returnFocus:!1}}),H(e.nativeEvent,!1)}}}},[i,d,v,n,r,H])}let j=a.createContext({delay:0,initialDelay:0,timeoutMs:0,currentId:null,setCurrentId:()=>{},setState:()=>{},isInstantPhase:!1}),I=()=>a.useContext(j),M=e=>{let{children:t,delay:n,timeoutMs:r=0}=e,[o,i]=a.useReducer((e,t)=>({...e,...t}),{delay:n,timeoutMs:r,initialDelay:n,currentId:null,isInstantPhase:!1}),s=a.useRef(null),l=a.useCallback(e=>{i({currentId:e})},[]);return c(()=>{o.currentId?null===s.current?s.current=o.currentId:i({isInstantPhase:!0}):(i({isInstantPhase:!1}),s.current=null)},[o.currentId]),a.createElement(j.Provider,{value:a.useMemo(()=>({...o,setState:i,setCurrentId:l}),[o,i,l])},t)},D=(e,t)=>{let{open:n,onOpenChange:r}=e,{id:o}=t,{currentId:i,setCurrentId:a,initialDelay:s,setState:l,timeoutMs:u}=I();c(()=>{i&&(l({delay:{open:1,close:S(s,"close")}}),i!==o&&r(!1))},[o,r,l,i,s]),c(()=>{function e(){r(!1),l({delay:s,currentId:null})}if(!n&&i===o){if(u){let t=window.setTimeout(e,u);return()=>{clearTimeout(t)}}e()}},[n,l,i,o,r,s,u]),c(()=>{n&&a(o)},[n,a,o])};function T(e,t){let n=e.filter(e=>{var n;return e.parentId===t&&(null==(n=e.context)?void 0:n.open)}),r=n;for(;r.length;)r=e.filter(e=>{var t;return null==(t=r)?void 0:t.some(t=>{var n;return e.parentId===t.id&&(null==(n=e.context)?void 0:n.open)})}),n=n.concat(r);return n}let A=(r||(r=n.t(a,2)))["useInsertionEffect".toString()],P=A||(e=>e());function R(e){let t=a.useRef(()=>{});return P(()=>{t.current=e}),a.useCallback(function(){for(var e=arguments.length,n=Array(e),r=0;r{var t,n;return{escapeKeyBubbles:"boolean"==typeof e?e:null!=(t=null==e?void 0:e.escapeKey)&&t,outsidePressBubbles:"boolean"==typeof e?e:null==(n=null==e?void 0:e.outsidePress)||n}};function O(e,t){void 0===t&&(t={});let{open:n,onOpenChange:r,events:i,nodeId:c,elements:{reference:s,domReference:l,floating:u},dataRef:d}=e,{enabled:p=!0,escapeKey:m=!0,outsidePress:f=!0,outsidePressEvent:x="pointerdown",referencePress:w=!1,referencePressEvent:E="pointerdown",ancestorScroll:C=!1,bubbles:F}=t,S=h(),B=null!=g(),j=R("function"==typeof f?f:()=>!1),I="function"==typeof f?j:f,M=a.useRef(!1),{escapeKeyBubbles:D,outsidePressBubbles:A}=$(F),P=R(e=>{if(!n||!p||!m||"Escape"!==e.key)return;let t=S?T(S.nodesRef.current,c):[];if(!D&&(e.stopPropagation(),t.length>0)){let e=!0;if(t.forEach(t=>{var n;if(null!=(n=t.context)&&n.open&&!t.context.dataRef.current.__escapeKeyBubbles){e=!1;return}}),!e)return}i.emit("dismiss",{type:"escapeKey",data:{returnFocus:{preventScroll:!1}}}),r(!1,"nativeEvent"in e?e.nativeEvent:e)}),O=R(e=>{var t;let n=M.current;if(M.current=!1,n||"function"==typeof I&&!I(e))return;let o="composedPath"in e?e.composedPath()[0]:e.target;if(k(o)&&u){let t=o.clientWidth>0&&o.scrollWidth>o.clientWidth,n=o.clientHeight>0&&o.scrollHeight>o.clientHeight,r=n&&e.offsetX>o.clientWidth;if(n){let t="rtl"===v(u).getComputedStyle(o).direction;t&&(r=e.offsetX<=o.offsetWidth-o.clientWidth)}if(r||t&&e.offsetY>o.clientHeight)return}let a=S&&T(S.nodesRef.current,c).some(t=>{var n;return N(e,null==(n=t.context)?void 0:n.elements.floating)});if(N(e,u)||N(e,l)||a)return;let s=S?T(S.nodesRef.current,c):[];if(s.length>0){let e=!0;if(s.forEach(t=>{var n;if(null!=(n=t.context)&&n.open&&!t.context.dataRef.current.__outsidePressBubbles){e=!1;return}}),!e)return}i.emit("dismiss",{type:"outsidePress",data:{returnFocus:B?{preventScroll:!0}:function(e){if(0===e.mozInputSource&&e.isTrusted)return!0;let t=/Android/i;return(t.test(function(){let e=navigator.userAgentData;return null!=e&&e.platform?e.platform:navigator.platform}())||t.test(function(){let e=navigator.userAgentData;return e&&Array.isArray(e.brands)?e.brands.map(e=>{let{brand:t,version:n}=e;return t+"/"+n}).join(" "):navigator.userAgent}()))&&e.pointerType?"click"===e.type&&1===e.buttons:0===e.detail&&!e.pointerType}(e)||0===(t=e).width&&0===t.height||1===t.width&&1===t.height&&0===t.pressure&&0===t.detail&&"mouse"!==t.pointerType||t.width<1&&t.height<1&&0===t.pressure&&0===t.detail}}),r(!1,e)});return a.useEffect(()=>{if(!n||!p)return;function e(e){r(!1,e)}d.current.__escapeKeyBubbles=D,d.current.__outsidePressBubbles=A;let t=y(u);m&&t.addEventListener("keydown",P),I&&t.addEventListener(x,O);let i=[];return C&&(b(l)&&(i=(0,o.Kx)(l)),b(u)&&(i=i.concat((0,o.Kx)(u))),!b(s)&&s&&s.contextElement&&(i=i.concat((0,o.Kx)(s.contextElement)))),(i=i.filter(e=>{var n;return e!==(null==(n=t.defaultView)?void 0:n.visualViewport)})).forEach(t=>{t.addEventListener("scroll",e,{passive:!0})}),()=>{m&&t.removeEventListener("keydown",P),I&&t.removeEventListener(x,O),i.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,s,m,I,x,n,r,C,p,D,A,P,O]),a.useEffect(()=>{M.current=!1},[I,x]),a.useMemo(()=>p?{reference:{onKeyDown:P,[L[E]]:e=>{w&&(i.emit("dismiss",{type:"referencePress",data:{returnFocus:!1}}),r(!1,e.nativeEvent))}},floating:{onKeyDown:P,[H[x]]:()=>{M.current=!0}}}:{},[p,i,w,x,E,r,P])}function z(e){var t;void 0===e&&(e={});let{open:n=!1,onOpenChange:r,nodeId:o}=e,[s,l]=a.useState(null),u=(null==(t=e.elements)?void 0:t.reference)||s,d=(0,i.YF)(e),m=h(),f=R((e,t)=>{e&&(y.current.openEvent=t),null==r||r(e,t)}),g=a.useRef(null),y=a.useRef({}),v=a.useState(()=>(function(){let e=new Map;return{emit(t,n){var r;null==(r=e.get(t))||r.forEach(e=>e(n))},on(t,n){e.set(t,[...e.get(t)||[],n])},off(t,n){var r;e.set(t,(null==(r=e.get(t))?void 0:r.filter(e=>e!==n))||[])}}})())[0],k=p(),x=a.useCallback(e=>{let t=b(e)?{getBoundingClientRect:()=>e.getBoundingClientRect(),contextElement:e}:e;d.refs.setReference(t)},[d.refs]),w=a.useCallback(e=>{(b(e)||null===e)&&(g.current=e,l(e)),(b(d.refs.reference.current)||null===d.refs.reference.current||null!==e&&!b(e))&&d.refs.setReference(e)},[d.refs]),E=a.useMemo(()=>({...d.refs,setReference:w,setPositionReference:x,domReference:g}),[d.refs,w,x]),C=a.useMemo(()=>({...d.elements,domReference:u}),[d.elements,u]),F=a.useMemo(()=>({...d,refs:E,elements:C,dataRef:y,nodeId:o,floatingId:k,events:v,open:n,onOpenChange:f}),[d,o,k,v,n,f,E,C]);return c(()=>{let e=null==m?void 0:m.nodesRef.current.find(e=>e.id===o);e&&(e.context=F)}),a.useMemo(()=>({...d,context:F,refs:E,elements:C}),[d,E,C,F])}function _(e,t){void 0===t&&(t={});let{open:n,onOpenChange:r,dataRef:o,events:i,refs:c,elements:{floating:s,domReference:l}}=e,{enabled:u=!0,keyboardOnly:d=!0}=t,p=a.useRef(""),m=a.useRef(!1),f=a.useRef();return a.useEffect(()=>{if(!u)return;let e=y(s),t=e.defaultView||window;function r(){!n&&k(l)&&l===function(e){let t=e.activeElement;for(;(null==(n=t)?void 0:null==(r=n.shadowRoot)?void 0:r.activeElement)!=null;){var n,r;t=t.shadowRoot.activeElement}return t}(y(l))&&(m.current=!0)}return t.addEventListener("blur",r),()=>{t.removeEventListener("blur",r)}},[s,l,n,u]),a.useEffect(()=>{if(u)return i.on("dismiss",e),()=>{i.off("dismiss",e)};function e(e){("referencePress"===e.type||"escapeKey"===e.type)&&(m.current=!0)}},[i,u]),a.useEffect(()=>()=>{clearTimeout(f.current)},[]),a.useMemo(()=>u?{reference:{onPointerDown(e){let{pointerType:t}=e;p.current=t,m.current=!!(t&&d)},onMouseLeave(){m.current=!1},onFocus(e){var t;m.current||"focus"===e.type&&(null==(t=o.current.openEvent)?void 0:t.type)==="mousedown"&&N(o.current.openEvent,l)||r(!0,e.nativeEvent)},onBlur(e){m.current=!1;let t=e.relatedTarget,n=b(t)&&t.hasAttribute(E("focus-guard"))&&"outside"===t.getAttribute("data-type");f.current=setTimeout(()=>{w(c.floating.current,t)||w(l,t)||n||r(!1,e.nativeEvent)})}}}:{},[u,d,l,c,o,r])}function V(e,t,n){let r=new Map;return{..."floating"===n&&{tabIndex:-1},...e,...t.map(e=>e?e[n]:null).concat(e).reduce((e,t)=>(t&&Object.entries(t).forEach(t=>{let[n,o]=t;if(0===n.indexOf("on")){if(r.has(n)||r.set(n,[]),"function"==typeof o){var i;null==(i=r.get(n))||i.push(o),e[n]=function(){for(var e,t=arguments.length,o=Array(t),i=0;ie(...o)).find(e=>void 0!==e)}}}else e[n]=o}),e),{})}}function Z(e){void 0===e&&(e=[]);let t=e,n=a.useCallback(t=>V(t,e,"reference"),t),r=a.useCallback(t=>V(t,e,"floating"),t),o=a.useCallback(t=>V(t,e,"item"),e.map(e=>null==e?void 0:e.item));return a.useMemo(()=>({getReferenceProps:n,getFloatingProps:r,getItemProps:o}),[n,r,o])}function G(e,t){void 0===t&&(t={});let{open:n,floatingId:r}=e,{enabled:o=!0,role:i="dialog"}=t,c=p();return a.useMemo(()=>{let e={id:r,role:i};return o?"tooltip"===i?{reference:{"aria-describedby":n?r:void 0},floating:e}:{reference:{"aria-expanded":n?"true":"false","aria-haspopup":"alertdialog"===i?"dialog":i,"aria-controls":n?r:void 0,..."listbox"===i&&{role:"combobox"},..."menu"===i&&{id:c}},floating:{...e,..."menu"===i&&{"aria-labelledby":c}}}:{}},[o,i,n,r,c])}},54764:function(e,t,n){"use strict";n.d(t,{Z:function(){return y}});var r=n(27378),o=n(23615),i=n.n(o),a={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"},c=Object.defineProperty,s=Object.defineProperties,l=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,m=(e,t,n)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))d.call(t,n)&&m(e,n,t[n]);if(u)for(var n of u(t))p.call(t,n)&&m(e,n,t[n]);return e},g=(e,t)=>s(e,l(t)),h=(e,t)=>{var n={};for(var r in e)d.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&u)for(var r of u(e))0>t.indexOf(r)&&p.call(e,r)&&(n[r]=e[r]);return n},y=(e,t,n)=>{let o=(0,r.forwardRef)((t,o)=>{var{color:i="currentColor",size:c=24,stroke:s=2,children:l}=t,u=h(t,["color","size","stroke","children"]);return(0,r.createElement)("svg",f(g(f({ref:o},a),{width:c,height:c,stroke:i,strokeWidth:s,className:`tabler-icon tabler-icon-${e}`}),u),[...n.map(([e,t])=>(0,r.createElement)(e,t)),...l||[]])});return o.propTypes={color:i().string,size:i().oneOfType([i().string,i().number]),stroke:i().oneOfType([i().string,i().number])},o.displayName=`${t}`,o}},13070:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("brand-mantine","IconBrandMantine",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4",key:"svg-1"}],["path",{d:"M14 9h-2",key:"svg-2"}],["path",{d:"M14 15h-2",key:"svg-3"}],["path",{d:"M10 12h.01",key:"svg-4"}]])},16659:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("check","IconCheck",[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]])},62283:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("chevron-down","IconChevronDown",[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]])},24948:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("circle-dashed","IconCircleDashed",[["path",{d:"M8.56 3.69a9 9 0 0 0 -2.92 1.95",key:"svg-0"}],["path",{d:"M3.69 8.56a9 9 0 0 0 -.69 3.44",key:"svg-1"}],["path",{d:"M3.69 15.44a9 9 0 0 0 1.95 2.92",key:"svg-2"}],["path",{d:"M8.56 20.31a9 9 0 0 0 3.44 .69",key:"svg-3"}],["path",{d:"M15.44 20.31a9 9 0 0 0 2.92 -1.95",key:"svg-4"}],["path",{d:"M20.31 15.44a9 9 0 0 0 .69 -3.44",key:"svg-5"}],["path",{d:"M20.31 8.56a9 9 0 0 0 -1.95 -2.92",key:"svg-6"}],["path",{d:"M15.44 3.69a9 9 0 0 0 -3.44 -.69",key:"svg-7"}]])},94503:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("components","IconComponents",[["path",{d:"M3 12l3 3l3 -3l-3 -3z",key:"svg-0"}],["path",{d:"M15 12l3 3l3 -3l-3 -3z",key:"svg-1"}],["path",{d:"M9 6l3 3l3 -3l-3 -3z",key:"svg-2"}],["path",{d:"M9 18l3 3l3 -3l-3 -3z",key:"svg-3"}]])},31550:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("external-link","IconExternalLink",[["path",{d:"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6",key:"svg-0"}],["path",{d:"M11 13l9 -9",key:"svg-1"}],["path",{d:"M15 4h5v5",key:"svg-2"}]])},61433:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("forms","IconForms",[["path",{d:"M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3",key:"svg-0"}],["path",{d:"M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3",key:"svg-1"}],["path",{d:"M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7",key:"svg-2"}],["path",{d:"M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1",key:"svg-3"}],["path",{d:"M17 12h.01",key:"svg-4"}],["path",{d:"M13 12h.01",key:"svg-5"}]])},4675:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("info-circle","IconInfoCircle",[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 9h.01",key:"svg-1"}],["path",{d:"M11 12h1v4h1",key:"svg-2"}]])},66684:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("menu-2","IconMenu2",[["path",{d:"M4 6l16 0",key:"svg-0"}],["path",{d:"M4 12l16 0",key:"svg-1"}],["path",{d:"M4 18l16 0",key:"svg-2"}]])},11541:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("moon","IconMoon",[["path",{d:"M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z",key:"svg-0"}]])},20243:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("notebook","IconNotebook",[["path",{d:"M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18",key:"svg-0"}],["path",{d:"M13 8l2 0",key:"svg-1"}],["path",{d:"M13 12l2 0",key:"svg-2"}]])},27854:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("search","IconSearch",[["path",{d:"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0",key:"svg-0"}],["path",{d:"M21 21l-6 -6",key:"svg-1"}]])},61736:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("sun","IconSun",[["path",{d:"M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",key:"svg-0"}],["path",{d:"M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7",key:"svg-1"}]])},63166:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("text-direction-ltr","IconTextDirectionLtr",[["path",{d:"M5 19h14",key:"svg-0"}],["path",{d:"M17 21l2 -2l-2 -2",key:"svg-1"}],["path",{d:"M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5",key:"svg-2"}],["path",{d:"M14 15v-11",key:"svg-3"}],["path",{d:"M10 15v-11",key:"svg-4"}]])},91964:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("text-direction-rtl","IconTextDirectionRtl",[["path",{d:"M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5",key:"svg-0"}],["path",{d:"M14 15v-11",key:"svg-1"}],["path",{d:"M10 15v-11",key:"svg-2"}],["path",{d:"M5 19h14",key:"svg-3"}],["path",{d:"M7 21l-2 -2l2 -2",key:"svg-4"}]])},36321:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n(1347)}])},74490:function(e,t,n){"use strict";n.d(t,{U:function(){return c}});var r=n(24246);n(27378);var o=n(40624),i=n(43134),a=n.n(i);function c(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,o.Z)(a().section,t),...n})}},17992:function(e,t,n){"use strict";n.d(t,{T:function(){return p}});var r=n(24246);n(27378);var o=n(79894),i=n.n(o),a=n(40624),c=n(29995),s=n(30020),l=n(27080),u=n(91487),d=n.n(u);function p(e){return(0,r.jsxs)(i(),{href:"/",className:(0,a.Z)(d().logo,c.C.auto),"aria-label":"Mantine",children:[(0,r.jsx)(s.T,{children:"Welcome to Mantine, React components library that you always wished for"}),(0,r.jsx)(l.D,{size:30,...e})]})}},16809:function(e,t,n){"use strict";n.d(t,{g:function(){return c}});var r=n(24246);n(27378);var o=n(28862),i=n(71078),a=n(74490);function c(e){let{data:t,head:n}=e,c=t.map((e,t)=>{let n=e.map((e,t)=>(0,r.jsx)(o.i.Td,{children:"string"==typeof e&&e.includes("var(--mantine-scale)")?function(e){let t=e.match(/calc\((.*?)\)/g);if(!t)return e;let n=e;return t.forEach(e=>{let t=e.replace("calc(","").replace(")","").split("*")[0].trim();n=n.replace(e,t)}),n.replaceAll("rem)","rem")}(e):e},t));return(0,r.jsx)(o.i.Tr,{children:n},t)}),s=Array.isArray(n)?n.map((e,t)=>(0,r.jsx)(o.i.Th,{children:e},t)):null;return(0,r.jsx)(a.U,{children:(0,r.jsx)("div",{style:{overflowX:"auto"},children:(0,r.jsx)("div",{style:{minWidth:(0,i.h)(400)},children:(0,r.jsxs)(o.i,{children:[s&&(0,r.jsx)(o.i.Thead,{children:(0,r.jsx)(o.i.Tr,{children:s})}),(0,r.jsx)(o.i.Tbody,{children:c})]})})})})}},79388:function(e,t,n){"use strict";n.d(t,{yp:function(){return l},gw:function(){return eP.g},Ec:function(){return H},NV:function(){return _},Cu:function(){return eX},an:function(){return b}});var r=n(24246),o=n(27378),i=n(40624),a=n(27154),c=n(87066),s=n.n(c);function l(e){let{className:t,...n}=e;return(0,r.jsx)(a.P,{className:(0,i.Z)(s().code,t),...n})}function u(e){let{children:t}=e;return(0,r.jsx)(l,{code:t.props.children,language:function(e){let t=(e.props.className||"").match(RegExp("language-(?.*)")),n=t&&t.groups&&t.groups.lang?t.groups.lang:"tsx";if(["js","jsx","ts","tsx"].includes(n))return"tsx";if(["css","scss"].includes(n))return"scss";if(["html","bash","json"].includes(n))return n;throw Error("Unknown language: ".concat(n))}(t)})}var d=n(16659),p=n(57847),m=n(29995),f=n(19397),g=n(1674);function h(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,children:[(0,r.jsx)("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),(0,r.jsx)("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})}var y=n(92911),v=n.n(y);function b(e){let{id:t,children:n,order:o=2,...a}=e,{copied:c,copy:s,reset:l}=(0,g.V)();return 1===o?(0,r.jsx)(p.D,{className:v().title,"data-h1":!0,children:n}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{id:t,"data-heading":n,"data-order":o,className:v().offset}),(0,r.jsxs)(p.D,{order:o,className:v().title,...a,children:[(0,r.jsx)("a",{className:(0,i.Z)(v().link,m.C.auto),href:"#".concat(t),children:n}),(0,r.jsx)(f.k,{className:v().copyButton,tabIndex:-1,"aria-label":"Copy link to the section",onClick:()=>s("".concat(window.location.origin).concat(window.location.pathname,"#").concat(t)),onMouseLeave:l,title:c?"✓ Copied to clipboard":"Copy link",children:c?(0,r.jsx)(d.Z,{className:v().copyIcon}):(0,r.jsx)(h,{className:v().copyIcon})})]})]})}let k=e=>t=>(0,r.jsx)(b,{order:e,...t}),x={div:"HTMLDivElement",button:"HTMLButtonElement",input:"HTMLInputElement",textarea:"HTMLTextAreaElement",select:"HTMLSelectElement",a:"HTMLAnchorElement"};function w(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"get-element-ref",children:"Get element ref"}),(0,r.jsx)(l,{code:function(e){let t=e.refType in x?x[e.refType]:e.refType;return"import { useRef } from 'react';\nimport { ".concat(e.component," } from '").concat(e.package||"@mantine/core","';\n\nfunction Demo() {\n const ref = useRef<").concat(t,">(null);\n return <").concat(e.component," ref={ref} />;\n}\n ")}(e)})]})}var E=n(56589),C=n(71078);function F({size:e,style:t,...n}){return o.createElement(E.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",preserveAspectRatio:"xMidYMid",style:[{width:(0,C.h)(e),height:(0,C.h)(e)},t],...n},o.createElement("path",{fill:"#3178C6",d:"M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"}),o.createElement("path",{fill:"#FFF",d:"M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"}))}var S=n(4675),B=n(2256),j=n(46374),I=n(91948),M=n(61628),D=n.n(M);function T(e){let{className:t,...n}=e,o=(0,B.rZ)();return(0,r.jsx)(j.V,{className:(0,i.Z)(D().root,t),icon:(0,r.jsx)(S.Z,{className:D().icon}),radius:"md",__vars:{"--docs-bq-code-bg-light":(0,I.m)(o.colors.blue[6],.2),"--docs-bq-code-bg-dark":(0,I.m)(o.colors.blue[4],.2)},...n})}var A=n(79894),P=n.n(A),R=n(9136),N=n(75356),L=n.n(N);function H(e){let{href:t,...n}=e,o=null==t?void 0:t.replace("https://mantine.dev","");return(null==o?void 0:o.startsWith("http"))||!(o.trim().length>0)?(0,r.jsx)(R.e,{className:L().link,href:t,...n}):(0,r.jsx)(R.e,{className:L().link,component:P(),href:o,...n})}var $=n(94998),O=n(75522),z=n.n(O);function _(e){let{className:t,...n}=e;return(0,r.jsx)("p",{className:(0,i.Z)(z().paragraph,t),...n})}function V(e){let{className:t,...n}=e;return(0,r.jsx)("ul",{className:(0,i.Z)(z().ul,t),...n})}function Z(e){let{className:t,...n}=e;return(0,r.jsx)("li",{className:(0,i.Z)(z().li,t),...n})}function G(e){return(0,r.jsx)($.E,{...e})}function W(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"polymorphic-component",children:"Polymorphic component"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:e.component})," is a"," ",(0,r.jsx)(H,{href:"/guides/polymorphic/",children:"polymorphic component"})," – its default root element is ",(0,r.jsx)(G,{children:e.defaultElement}),", but it can be changed to any other element or component with ",(0,r.jsx)(G,{children:"component"})," prop:"]}),(0,r.jsx)(l,{code:"import { ".concat(e.component," } from '").concat(e.package||"@mantine/core","';\n\nfunction Demo() {\n return <").concat(e.component,' component="').concat(e.changeToElement,'" />;\n}\n ')}),e.withNext&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(_,{children:["You can also use components in ",(0,r.jsx)(G,{children:"component"})," prop, for example, Next.js"," ",(0,r.jsx)(G,{children:"Link"}),":"]}),(0,r.jsx)(l,{code:"import Link from 'next/link';\nimport { ".concat(e.component," } from '").concat(e.package||"@mantine/core","';\n\nfunction Demo() {\n return <").concat(e.component,' component={Link} href="/" />;\n}')})]}),(0,r.jsxs)(T,{icon:(0,r.jsx)(F,{size:32}),color:"#3178C6",children:[(0,r.jsx)(_,{children:(0,r.jsx)("strong",{children:"Polymorphic components with TypeScript"})}),(0,r.jsxs)(_,{children:["Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,"," ",(0,r.jsxs)(G,{children:[e.component,"Props"]})," does not extend"," ",(0,r.jsxs)(G,{children:["React.ComponentPropsWithoutRef","'<'","div","'>'"]})," ","although ",(0,r.jsx)(G,{children:e.defaultElement})," is the default element."]}),(0,r.jsxs)(_,{children:["If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support ",(0,r.jsx)(G,{children:"component"})," prop), then your component props interface should extend HTML element props, for example:"," "]}),(0,r.jsx)(l,{code:"import type { ".concat(e.component,"Props, ElementProps } from '").concat(e.package||"@mantine/core","';\n\ninterface My").concat(e.component,"Props extends ").concat(e.component,"Props,\n ElementProps<'").concat(e.changeToElement,"', keyof ").concat(e.component,"Props> {}")}),(0,r.jsxs)(_,{children:["If you want your component to remain polymorphic after wrapping, use"," ",(0,r.jsx)(G,{children:"createPolymorphicComponent"})," function described in"," ",(0,r.jsx)(H,{href:"/guides/polymorphic/",children:"this guide"}),"."]})]})]})}let q=e=>"import { ".concat(e,", Button } from '@mantine/core';\n\nfunction Demo() {\n return (\n <>\n <").concat(e,".Target>\n \n \n\n {/* OK */}\n <").concat(e,".Target>\n \n \n\n {/* String, NOT OK – will throw error */}\n <").concat(e,".Target>Raw string\n\n {/* Number, NOT OK – will throw error */}\n <").concat(e,".Target>{2}\n\n {/* Fragment, NOT OK – will throw error */}\n <").concat(e,".Target>\n <>Fragment, NOT OK, will throw error\n \n\n {/* Multiple nodes, NOT OK – will throw error */}\n <").concat(e,".Target>\n
More that one node
\n
NOT OK, will throw error
\n \n \n );\n}"),Y=e=>"\n// Example of code that WILL NOT WORK\nimport { ".concat(e," } from '@mantine/core';\n\nfunction MyComponent() {\n return
My component
;\n}\n\n// This will not work – MyComponent does not support ref\nfunction Demo() {\n return (\n <").concat(e,">\n <").concat(e,".Target>\n \n \n \n );\n}"),U=e=>"\n// Example of code that will work\nimport { forwardRef } from 'react';\nimport { ".concat(e," } from '@mantine/core';\n\nconst MyComponent = forwardRef>((props, ref) => (\n
\n My component\n
\n));\n\n// Works correctly – ref is forwarded\nfunction Demo() {\n return (\n <").concat(e,">\n <").concat(e,".Target>\n \n \n \n );\n}\n");function K(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"target-children",children:"".concat(t,".Target children")}),(0,r.jsxs)(_,{children:[(0,r.jsxs)(G,{children:[t,".Target"]})," requires an element or a component as a single child – strings, fragments, numbers and multiple elements/components are not supported and"," ",(0,r.jsx)("b",{children:"will throw error"}),". Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box."]}),(0,r.jsx)(l,{code:q(t),language:"tsx"}),(0,r.jsx)(b,{id:"required-ref-prop",children:"Required ref prop"}),(0,r.jsxs)(_,{children:["Custom components that are rendered inside ",t,".Target are required to support"," ",(0,r.jsx)(G,{children:"ref"})," prop:"]}),(0,r.jsx)(l,{code:Y(t),language:"tsx"}),(0,r.jsxs)(_,{children:["Use ",(0,r.jsx)(G,{children:"forwardRef"})," function to forward ref to root element:"]}),(0,r.jsx)(l,{code:U(t),language:"tsx"})]})}function X(e){let{component:t,element:n}=e;return(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," component supports ",(0,r.jsx)(H,{href:"/core/input",children:"Input"})," ","and ",(0,r.jsx)(H,{href:"/core/input",children:"Input.Wrapper"})," components features and all"," ",(0,r.jsx)(G,{children:n})," element props. ",(0,r.jsx)(G,{children:t})," documentation does not include all features supported by the component – see"," ",(0,r.jsx)(H,{href:"/core/input",children:"Input"})," documentation to learn about all available features."]})}let J=(e,t)=>"\nimport { ".concat(e," } from '").concat(t,"';\n\n// Inaccessible input – screen reader will not announce it properly\nfunction Demo() {\n return <").concat(e," />;\n}\n"),Q=(e,t)=>"\nimport { ".concat(e," } from '").concat(t,"';\n\n// Accessible input – it has aria-label\nfunction Demo() {\n return <").concat(e,' aria-label="My input" />;\n}\n'),ee=(e,t)=>"\nimport { ".concat(e," } from '").concat(t,"';\n\n// Accessible input – it has associated label element\nfunction Demo() {\n return <").concat(e,' label="My input" />;\n}\n');function et(e){let t=e.package||"@mantine/core";return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"accessibility",children:"Accessibility"}),(0,r.jsxs)(_,{children:["If ",(0,r.jsx)(G,{children:e.component})," is used without ",(0,r.jsx)(G,{children:"label"})," prop, it will not be announced properly by screen reader:"]}),(0,r.jsx)(l,{code:J(e.component,t),language:"tsx"}),(0,r.jsxs)(_,{children:["Set ",(0,r.jsx)(G,{children:"aria-label"})," to make the input accessible. In this case label will not be visible, but screen reader will announce it:"]}),(0,r.jsx)(l,{code:Q(e.component,t),language:"tsx"}),(0,r.jsxs)(_,{children:["If ",(0,r.jsx)(G,{children:"label"})," prop is set, input will be accessible it is not required to set"," ",(0,r.jsx)(G,{children:"aria-label"}),":"]}),(0,r.jsx)(l,{code:ee(e.component,t),language:"tsx"})]})}function en(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"browser-support",children:"Browser support"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," uses"," ",(0,r.jsx)(H,{href:"https://caniuse.com/flexbox-gap",children:"flexbox gap"})," to add spacing between children. In older browsers, ",(0,r.jsx)(G,{children:t})," children may not have spacing. You can install PostCSS"," ",(0,r.jsx)(H,{href:"https://github.com/gavinmcfarland/flex-gap-polyfill",children:"flex-gap-polyfill"})," ","to add support for older browsers."]})]})}function er(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"gradient-variant",children:"Gradient variant"}),(0,r.jsxs)(_,{children:["When ",(0,r.jsx)(G,{children:"variant"})," prop is set to ",(0,r.jsx)(G,{children:"gradient"}),", you can control gradient with ",(0,r.jsx)(G,{children:"gradient"})," prop, it accepts an object with"," ",(0,r.jsx)(G,{children:"from"}),", ",(0,r.jsx)(G,{children:"to"})," and ",(0,r.jsx)(G,{children:"deg"})," properties. If the",(0,r.jsx)(G,{children:"gradient"})," prop is not set, ",(0,r.jsx)(G,{children:t})," will use"," ",(0,r.jsx)(G,{children:"theme.defaultGradient"})," which can be configured on the"," ",(0,r.jsx)(H,{href:"/theming/theme-object",children:"theme object"}),". ",(0,r.jsx)(G,{children:"gradient"})," ","prop is ignored when ",(0,r.jsx)(G,{children:"variant"})," is not ",(0,r.jsx)(G,{children:"gradient"}),"."]}),(0,r.jsxs)(_,{children:["Note that ",(0,r.jsx)(G,{children:'variant="gradient"'})," supports only linear gradients with two colors. If you need a more complex gradient, then use"," ",(0,r.jsx)(H,{href:"/styles/styles-api",children:"Styles API"})," to modify"," ",(0,r.jsx)(G,{children:t})," styles."]})]})}function eo(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"styles-api",children:"Styles API"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," supports"," ",(0,r.jsx)(H,{href:"/styles/styles-api/",children:"Styles API"}),", you can add styles to any inner element of the component with",(0,r.jsx)(G,{children:"classNames"})," prop. Follow"," ",(0,r.jsx)(H,{href:"/styles/styles-api/",children:"Styles API"})," documentation to learn more."]})]})}var ei=n(31550),ea=n(24948),ec=n(28862),Text=n(26569),es=n(8671),el=n(46624);let eu=[{type:"next",name:"next-app-tss-template",link:"https://github.com/jason-dark/next-app-mantine-v7-tss-template",description:"Next.js template with app router and tss (emotion based) setup"},{type:"next",name:"next-pages-tss-template",link:"https://github.com/enyelsequeira/tss-with-pages-dir",description:"Next.js template with pages router and tss (emotion based) setup"},{type:"next",name:"t3-template",link:"https://github.com/WillKirkmanM/mantine-t3-template",description:"Next.js app router T3 stack template"},{type:"vite",name:"nx-vite-monorepo-template",link:"https://github.com/dipiash/nx-vite-react-ts-mantine-boilerplate",description:"NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules"},{type:"vite",name:"vike-mantine-template",link:"https://github.com/Kenzo-Wada/vike-mantine-template",description:"Vite ssr template with Vike"}],ed=[{type:"next",name:"next-app-template",link:"https://github.com/mantinedev/next-app-template",description:"Next.js template with app router and full setup: Jest, Storybook, ESLint"},{type:"next",name:"next-pages-template",link:"https://github.com/mantinedev/next-pages-template",description:"Next.js template with pages router and full setup: Jest, Storybook, ESLint"},{type:"next",name:"next-app-min-template",link:"https://github.com/mantinedev/next-app-min-template",description:"Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration"},{type:"next",name:"next-pages-min-template",link:"https://github.com/mantinedev/next-pages-min-template",description:"Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration"},{type:"next",name:"next-vanilla-extract-template",link:"https://github.com/mantinedev/next-vanilla-extract-template",description:"Next.js template with Vanilla extract example"},{type:"vite",name:"vite-template",link:"https://github.com/mantinedev/vite-template",description:"Vite template with full setup: Vitest, Prettier, Storybook, ESLint"},{type:"vite",name:"vite-min-template",link:"https://github.com/mantinedev/vite-min-template",description:"Vite template with minimal setup – no additional tools included, only default Vite configuration"},{type:"vite",name:"vite-vanilla-extract-template",link:"https://github.com/mantinedev/vite-vanilla-extract-template",description:"Vite template with Vanilla extract example"},{type:"remix",name:"remix-template",link:"https://github.com/mantinedev/remix-template",description:"Remix template with basic setup"},{type:"gatsby",name:"gatsby-template",link:"https://github.com/mantinedev/gatsby-template",description:"Gatsby template with basic setup"},{type:"redwood",name:"redwood-template",link:"https://github.com/mantinedev/redwood-template",description:"RedwoodJS template with basic setup"}];var ep=n(25416),em=n.n(ep);function ef(e){let{type:t,name:n,community:o=!1}=e,i=o?eu:ed,a=n?i.filter(e=>n.includes(e.name)):t?i.filter(e=>e.type===t):i,c=a.map(e=>{let t=el.mZ[e.type];return(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{className:em().iconCell,w:70,children:(0,r.jsx)("div",{className:em().icon,"data-type":e.type,children:(0,r.jsx)(t,{})})}),(0,r.jsxs)(ec.i.Td,{children:[(0,r.jsx)(Text.x,{fz:"sm",fw:500,children:e.name}),(0,r.jsx)(Text.x,{fz:"xs",children:e.description})]}),(0,r.jsx)(ec.i.Td,{w:146,children:(0,r.jsx)(es.z,{component:"a",href:e.link,target:"_blank",size:"xs",variant:"default",rightSection:(0,r.jsx)(ei.Z,{stroke:1.5,className:em().externalLinkIcon}),children:"Use template"})})]},e.name)});return(0,r.jsx)(ec.i,{highlightOnHover:!0,verticalSpacing:"sm",layout:"fixed",children:(0,r.jsxs)(ec.i.Tbody,{children:[o&&(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{className:em().iconCell,w:70,children:(0,r.jsx)("div",{className:em().icon,"data-type":"empty",children:(0,r.jsx)(ea.Z,{stroke:1.5,size:40})})}),(0,r.jsxs)(ec.i.Td,{children:[(0,r.jsx)(Text.x,{fz:"sm",fw:500,children:"Your template here"}),(0,r.jsx)(Text.x,{fz:"xs",children:"Create a template with your stack and share it with the community"})]}),(0,r.jsx)(ec.i.Td,{w:146,children:(0,r.jsx)(es.z,{component:P(),href:"/submit-template/",size:"xs",children:"Submit template"})})]}),c]})})}function eg(e){let{type:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"templates",children:"Get started with a template"}),(0,r.jsxs)(_,{children:["The easiest way to get started is to use one of the templates. All templates are configured correctly: they include ",(0,r.jsx)(H,{href:"/styles/postcss-preset",children:"PostCSS setup"}),","," ",(0,r.jsx)(H,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," and other essential features. Some templates also include additional features like"," ",(0,r.jsx)(H,{href:"/guides/jest",children:"Jest"}),","," ",(0,r.jsx)(H,{href:"/guides/storybook",children:"Storybook"})," and ESLint."]}),(0,r.jsxs)(_,{children:["If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on ",(0,r.jsx)(H,{href:"/templates-usage",children:"this page"}),"."]}),(0,r.jsx)(ef,{type:t})]})}function eh(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"combobox",children:"Made with Combobox"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," is an ",(0,r.jsx)("b",{children:"opinionated"})," component built on top of"," ",(0,r.jsx)(H,{href:"/core/combobox",children:"Combobox"})," component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with ",(0,r.jsx)(H,{href:"/core/combobox",children:"Combobox"}),". You can find examples of custom ",t.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase()," ","components on ",(0,r.jsx)(H,{href:"/combobox/?e=BasicSelect",children:"the examples page"}),"."]})]})}let ey=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," data={['React', 'Angular']} />;\n}\n"),ev=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return (\n <").concat(e,"\n data={[\n { value: 'react', label: 'React' },\n { value: 'ng', label: 'Angular' },\n ]}\n />\n );\n}\n"),eb=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return (\n <").concat(e,"\n data={[\n { group: 'Frontend', items: ['React', 'Angular'] },\n { group: 'Backend', items: ['Express', 'Django'] },\n ]}\n />\n );\n}\n"),ek=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return (\n <").concat(e,"\n data={[\n { group: 'Frontend', items: [{ value: 'react', label: 'React' }, { value: 'ng', label: 'Angular' }] },\n { group: 'Backend', items: [{ value: 'express', label: 'Express' }, { value: 'django', label: 'Django' }] },\n ]}\n />\n );\n}\n");function ex(e){let{component:t}=e,n="Autocomplete"!==t&&"TagsInput"!==t;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"data-formats",children:"Data formats"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," ",(0,r.jsx)(G,{children:"data"})," prop accepts data in one of the following formats:"]}),(0,r.jsx)(_,{children:"Array of strings:"}),(0,r.jsx)(l,{language:"tsx",code:ey(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(_,{children:["Array of object with ",(0,r.jsx)(G,{children:"value"}),", ",(0,r.jsx)(G,{children:"label"})," and optional"," ",(0,r.jsx)(G,{children:"disabled"})," keys:"]}),(0,r.jsx)(l,{language:"tsx",code:ev(t)})]}),(0,r.jsx)(_,{children:"Array of groups with string options:"}),(0,r.jsx)(l,{language:"tsx",code:eb(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(_,{children:"Array of groups with object options:"}),(0,r.jsx)(l,{language:"tsx",code:ek(t)})]})]})}function ew(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"large-data-sets",children:"Large data sets"}),(0,r.jsxs)(_,{children:["The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can do it with ",(0,r.jsx)(G,{children:"limit"})," prop. Note that if you use a custom ",(0,r.jsx)(G,{children:"filter"})," function, you need to implement your own logic to limit the number of options in ",(0,r.jsx)(G,{children:"filter"})]}),(0,r.jsxs)(_,{children:["Example of ",(0,r.jsx)(G,{children:t})," with 100 000 options, 5 options are rendered at the same time:"]})]})}function eE(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"options-filtering",children:"Options filtering"}),"By default, ",(0,r.jsx)(G,{children:t})," filters options by checking if the option label contains input value. You can change this behavior with ",(0,r.jsx)(G,{children:"filter"})," prop.",(0,r.jsx)(G,{children:"filter"})," function receives an object with the following properties as a single argument:",(0,r.jsxs)(V,{children:[(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"options"})," – array of options or options groups, all options are in"," ",(0,r.jsx)(G,{children:"{ value: string; label: string; disabled?: boolean }"})," format"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"search"})," – current search query"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"limit"})," – value of ",(0,r.jsx)(G,{children:"limit"})," prop passed to"," ",(0,r.jsx)(G,{children:t})]})]}),(0,r.jsx)(_,{children:"Example of a custom filter function that matches options by words instead of letters sequence:"})]})}let eC=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ withinPortal: false }} data={[]} />;\n}\n"),eF=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ zIndex: 1000 }} data={[]} />;\n}\n");function eS(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"combobox-props",children:"Combobox props"}),(0,r.jsxs)(_,{children:["You can override ",(0,r.jsx)(H,{href:"/core/combobox",children:"Combobox"})," props with"," ",(0,r.jsx)(G,{children:"comboboxProps"}),". It is useful when you need to change some of the props that are not exposed by ",(0,r.jsx)(G,{children:t}),", for example"," ",(0,r.jsx)(G,{children:"withinPortal"}),":"]}),(0,r.jsx)(l,{language:"tsx",code:eC(t)}),(0,r.jsx)(b,{id:"change-z-index",children:"Change dropdown z-index"}),(0,r.jsx)(l,{language:"tsx",code:eF(t)})]})}function eB(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"server-components-incompatible",children:"Incompatible with server components"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," is not compatible with React server components as it requires function as children. To use ",(0,r.jsx)(G,{children:t})," add"," ",(0,r.jsx)(G,{children:'"use client;"'})," at the top of the file."]})]})}let ej=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," wrapperProps={{ 'data-testid': 'wrapper' }} data-testid=\"input\" />;\n}\n");function eI(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"browser-support",children:"Add props to the root element"}),(0,r.jsxs)(_,{children:["All props passed to the component are forwarded to the input element. If you need to add props to the root element, use ",(0,r.jsx)(G,{children:"wrapperProps"}),". In the following example:"]}),(0,r.jsxs)(V,{children:[(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:'data-testid="wrapper"'})," is added to the root element"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:'data-testid="input"'})," is added to the input element"]})]}),(0,r.jsx)(l,{code:ej(t),language:"tsx"})]})}function eM(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"left-and-right-sections",children:"Left and right sections"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," supports ",(0,r.jsx)(G,{children:"leftSection"})," and"," ",(0,r.jsx)(G,{children:"rightSection"})," props. These sections are rendered with absolute position inside the input wrapper. You can use them to display icons, input controls or any other elements."]}),(0,r.jsx)(_,{children:"You can use the following props to control sections styles and content:"}),(0,r.jsxs)(V,{children:[(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"rightSection"}),"/",(0,r.jsx)(G,{children:"leftSection"})," – React node to render on the corresponding side of input"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"rightSectionWidth"}),"/",(0,r.jsx)(G,{children:"leftSectionWidth"})," – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component ",(0,r.jsx)(G,{children:"size"})," prop."]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"rightSectionPointerEvents"}),"/",(0,r.jsx)(G,{children:"leftSectionPointerEvents"})," – controls ",(0,r.jsx)(G,{children:"pointer-events"})," property of the section. If you want to render a non-interactive element, set it to ",(0,r.jsx)(G,{children:"none"})," to pass clicks through to the input."]})]})]})}function eD(e){let{component:t,withVariant:n=!0}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"auto-contrast",children:"autoContrast"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," supports ",(0,r.jsx)(G,{children:"autoContrast"})," prop and"," ",(0,r.jsx)(H,{href:"/theming/theme-object/#autocontrast",children:"theme.autoContrast"}),". If"," ",(0,r.jsx)(G,{children:"autoContrast"})," is set either on ",(0,r.jsx)(G,{children:t})," or on theme, content color will be adjusted to have sufficient contrast with the value specified in"," ",(0,r.jsx)(G,{children:"color"})," prop."]}),(0,r.jsxs)(_,{children:["Note that ",(0,r.jsx)(G,{children:"autoContrast"})," feature works only if you use"," ",(0,r.jsx)(G,{children:"color"})," prop to change background color.",n&&(0,r.jsxs)(r.Fragment,{children:[" ",(0,r.jsx)(G,{children:"autoContrast"})," works only with ",(0,r.jsx)(G,{children:"filled"})," variant."]})]})]})}var eT=n(71670),eA=n(97700),eP=n(16809);function eR(e){let{label:t,link:n}=e;return(0,r.jsx)(es.z,{component:"a",href:n,target:"_blank",rightSection:(0,r.jsx)(ei.Z,{style:{width:(0,C.h)(18),height:(0,C.h)(18)},stroke:1.5}),fullWidth:!0,justify:"space-between",h:50,px:20,radius:"md",children:t})}var eN=n(2488);function eL({size:e,style:t,...n}){return o.createElement(E.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",style:[{width:(0,C.h)(e),height:(0,C.h)(e)},t],...n},o.createElement("path",{fill:"#368FB9",d:"M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128 128-57.328 128-128S198.672 0 128 0"}),o.createElement("path",{fill:"#FFF",d:"M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163-6.376.05-10.28-1.63-11.367-4.25-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125-1.235 3.015-1.878 10.379-5.189 13.69-4.547 4.596-13.146 3.064-18.236.395-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166 2.965-1.137 5.831-2.373 7.957-4.695 10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607-3.163 15.814-11.07 24.315-14.233 29.652-.741 1.236 8.5 5.14 14.332 21.3 5.387 14.777.593 27.182 1.433 28.566.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797 8.65-.149 9.094 9.983 2.57 11.564zm11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762-11.367.148-20.905 6.03-27.231 9.934-2.471 1.532-4.596 2.669-6.425 3.509.395-5.733.05-13.245-2.916-21.498-3.608-9.885-8.45-15.963-11.91-19.472 4.003-5.832 9.489-14.332 12.058-27.478 2.224-11.219 1.533-28.664-3.558-38.45-1.038-1.976-2.767-3.41-4.942-4.003-.89-.247-2.57-.741-5.881.198-4.991-10.329-6.721-11.416-8.056-12.306-2.767-1.779-6.029-2.174-9.093-1.038-4.102 1.483-7.61 5.437-10.922 12.454a51.47 51.47 0 00-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762-1.038 1.137-3.064 1.977-5.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515-3.361 8.994.098 17.84 3.508 23.574-4.645 4.151-10.823 10.773-14.084 18.532-4.053 9.588-4.498 18.978-4.35 24.068-3.459 3.658-8.796 10.527-9.39 18.237-.79 10.773 3.114 18.088 4.844 20.756.494.791 1.038 1.434 1.63 2.076-.197 1.334-.246 2.768.05 4.25.643 3.46 2.817 6.277 6.128 8.056 6.524 3.46 15.617 4.942 22.635 1.433 2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36 3.509-.841 5.93-2.324 7.512-3.658 5.04-1.582 18.977-6.326 32.123-14.826 9.291-6.03 12.504-7.315 19.423-8.995 6.72-1.63 10.922-7.759 10.082-14.53z"}))}var eH=n(53781),e$=n(87329),eO=n(17404),ez=n.n(eO);function e_(e){let{yarnScript:t,npmScript:n}=e,[o,i]=(0,eN.I)({key:"script-tab",defaultValue:0});return(0,r.jsx)(e$.Q,{classNames:{root:ez().root},activeTab:o,onTabChange:i,code:[{fileName:"yarn",code:t,language:"bash",icon:(0,r.jsx)(eL,{className:ez().icon,size:16})},{fileName:"npm",code:n,language:"bash",icon:(0,r.jsx)(eH._,{className:ez().icon,size:16})}]})}function eV(e){let{packages:t,dev:n}=e;return(0,r.jsx)(e_,{yarnScript:"yarn add ".concat(n?"--dev ":"").concat(t),npmScript:"npm install ".concat(n?"--save-dev ":"").concat(t)})}var eZ=n(1358);function eG(e){let{data:t}=e,n=t.some(e=>e.condition),o=t.map((e,t)=>(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{children:(0,r.jsx)(eZ.T,{children:e.key})}),(0,r.jsx)(ec.i.Td,{children:e.description}),n&&(0,r.jsx)(ec.i.Td,{children:e.condition?(0,r.jsx)($.E,{children:e.condition}):"–"})]},t));return(0,r.jsx)("div",{style:{overflowX:"auto"},children:(0,r.jsx)("div",{style:{minWidth:(0,C.h)(500)},children:(0,r.jsxs)(ec.i,{verticalSpacing:"md",children:[(0,r.jsx)(ec.i.Thead,{children:(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{children:"Key"}),(0,r.jsx)(ec.i.Td,{children:"Description"}),n&&(0,r.jsx)(ec.i.Td,{children:"Condition"})]})}),(0,r.jsx)("tbody",{children:o})]})})})}var eW=n(94193);let eq=[{package:"@mantine/hooks",description:"Hooks for state and UI management",dependencies:["@mantine/hooks"]},{package:"@mantine/core",description:"Core components library: inputs, buttons, overlays, etc.",dependencies:["@mantine/hooks","@mantine/core"]},{package:"@mantine/form",description:"Form management library",dependencies:["@mantine/form"]},{package:"@mantine/dates",description:"Date inputs, calendars",dependencies:["@mantine/hooks","@mantine/core","@mantine/dates","dayjs"]},{package:"@mantine/charts",description:"Recharts based charts library",dependencies:["@mantine/hooks","@mantine/core","@mantine/charts","recharts@2"]},{package:"@mantine/notifications",description:"Notifications system",dependencies:["@mantine/hooks","@mantine/core","@mantine/notifications"]},{package:"@mantine/code-highlight",description:"Code highlight with your theme colors and styles",dependencies:["@mantine/hooks","@mantine/core","@mantine/code-highlight"]},{package:"@mantine/tiptap",description:"Rich text editor based on Tiptap",dependencies:["@mantine/hooks","@mantine/core","@mantine/tiptap","@tabler/icons-react","@tiptap/react","@tiptap/extension-link","@tiptap/starter-kit"]},{package:"@mantine/dropzone",description:"Capture files with drag and drop",dependencies:["@mantine/hooks","@mantine/core","@mantine/dropzone"]},{package:"@mantine/carousel",description:"Embla based carousel component",dependencies:["@mantine/hooks","@mantine/core","@mantine/carousel","embla-carousel-react"]},{package:"@mantine/spotlight",description:"Overlay command center",dependencies:["@mantine/hooks","@mantine/core","@mantine/spotlight"]},{package:"@mantine/modals",description:"Centralized modals manager",dependencies:["@mantine/hooks","@mantine/core","@mantine/modals"]},{package:"@mantine/nprogress",description:"Navigation progress",dependencies:["@mantine/hooks","@mantine/core","@mantine/nprogress"]}];var eY=n(10568),eU=n.n(eY);function eK(e){let{extraPackages:t=[]}=e,[n,i]=(0,o.useState)(["@mantine/core","@mantine/hooks"]),a=e=>i(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e]),c=eq.map(e=>(0,r.jsxs)(ec.i.Tr,{className:eU().row,onClick:()=>a(e.package),children:[(0,r.jsx)(ec.i.Td,{children:(0,r.jsx)(eW.X,{checked:n.includes(e.package),onChange:()=>{},className:eU().checkbox})}),(0,r.jsx)(ec.i.Td,{children:(0,r.jsx)($.E,{children:e.package})}),(0,r.jsx)(ec.i.Td,{className:eU().hiddenMobile,children:(0,r.jsx)(Text.x,{fz:"sm",children:e.description})})]},e.package));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(_,{children:"Choose packages that you will use in your application:"}),(0,r.jsxs)(ec.i,{mb:"xl",children:[(0,r.jsx)(ec.i.Thead,{children:(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Th,{children:(0,r.jsx)(eW.X,{onChange:()=>i(e=>e.length===eq.length?[]:eq.map(e=>e.package)),checked:n.length>0,indeterminate:n.length0})}),(0,r.jsx)(ec.i.Th,{children:"Package"}),(0,r.jsx)(ec.i.Th,{className:eU().hiddenMobile,children:"Description"})]})}),(0,r.jsx)("tbody",{children:c})]}),(0,r.jsx)(_,{children:"Install dependencies:"}),(0,r.jsx)(eV,{packages:function(e,t){let n=e.reduce((e,t)=>(e.push(...eq.find(e=>e.package===t).dependencies),e),[]),r=Array.from(new Set(["@mantine/core","@mantine/hooks",...n,...t]));return r.join(" ")}(n,t)})]})}function eX(e){let{children:t}=e;return(0,r.jsx)(eT.Z,{components:{Demo:eA.B,GetElementRef:w,Polymorphic:W,InputFeatures:X,InputAccessibility:et,FlexboxGapSupport:en,Gradient:er,StylesApiSelectors:eo,DataTable:eP.g,TargetComponent:K,KeyboardEventsTable:eG,InstallScript:eV,PackagesInstallation:eK,NpmScript:e_,TemplatesList:ef,GetTemplates:eg,ComboboxDisclaimer:eh,ComboboxData:ex,ComboboxLargeData:ew,ComboboxFiltering:eE,ComboboxProps:eS,ServerComponentsIncompatible:eB,ExamplesButton:eR,WrapperProps:eI,InputSections:eM,AutoContrast:eD,pre:u,h1:k(1),h2:k(2),h3:k(3),h4:k(4),h5:k(5),h6:k(6),a:H,p:_,li:Z,ul:V,blockquote:T,code:G},children:t})}},79203:function(e,t,n){"use strict";n.d(t,{o:function(){return p},m:function(){return d}});var r=n(24246);n(27378);var o=n(86677),i=n(27854),a=n(71078),c=n(95299),s=n(39700),l=n(54568);let[u,d]=(0,c.Gv)();function p(){let e=(0,o.useRouter)(),t=l.Se.filter(e=>!e.hideInSearch).map(t=>({id:t.slug,label:t.title,description:t.search||t.description||(t.date?"Released ".concat(t.date):void 0),onClick:()=>e.push(t.slug)}));return(0,r.jsx)(s.$,{store:u,shortcut:["mod + K","mod + P","/"],actions:t,tagsToIgnore:[],highlightQuery:!0,clearQueryOnClose:!0,radius:"md",limit:7,nothingFound:"Nothing found...",searchProps:{leftSection:(0,r.jsx)(i.Z,{style:{width:(0,a.h)(20),height:(0,a.h)(20)}}),placeholder:"Search documentation..."}})}},5415:function(e,t,n){"use strict";n.d(t,{N:function(){return eD}});var r=n(24246),o=n(27378),i=n(58675),a=n(31550),c=n(62283),s=n(40624),l=n(82409),Text=n(26569),u=n(82827),d=n(19397),p=n(94998),m=n(22971),f=n(56589),g=n(70098),h=n(99684),y=n(61736),v=n(11541),b=n(27650),k=n(35499),x=n(31788);let w=(0,x.F)(function({tooltip:e,className:t,"aria-label":n,...r}){return o.createElement(h.u,{label:e},o.createElement(d.k,{className:(0,s.Z)("m-18a11a80",t),"aria-label":n||e,...r}))});var E={icon:"m-83c3d5d1",dark:"m-83c188ce",light:"m-f4e3c6be"};function C(){let{setColorScheme:e}=(0,b.X)(),t=(0,k.l)("light",{getInitialValueInEffect:!0});return o.createElement(w,{onClick:()=>e("light"===t?"dark":"light"),tooltip:`${"dark"===t?"Light":"Dark"} mode`,"aria-label":"Toggle color scheme"},o.createElement(y.Z,{className:(0,s.Z)(E.icon,E.light),stroke:1.5}),o.createElement(v.Z,{className:(0,s.Z)(E.icon,E.dark),stroke:1.5}))}var F=n(63166),S=n(91964),B=n(49134),j=n(71078);function I(){let{toggleDirection:e,dir:t}=(0,B.gm)();return o.createElement(w,{onClick:()=>e(),tooltip:`${"ltr"===t?"RTL":"LTR"} direction`},"rtl"===t?o.createElement(F.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22),pointerEvents:"none"},stroke:1.5}):o.createElement(S.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22),pointerEvents:"none"},stroke:1.5}))}var M=n(86010);function D({link:e}){return o.createElement(w,{tooltip:"Discord",component:"a",href:e,className:"m-19df8210"},o.createElement(M.D,{size:20}))}var T=n(56695);function A({link:e}){return o.createElement(w,{tooltip:"Source code",component:"a",href:e},o.createElement(T.E,{size:22}))}var P=n(27854);function R({className:e,...t}){return o.createElement(d.k,{...t,className:(0,s.Z)("m-6e98493a",e)},o.createElement(m.Z,{gap:"xs"},o.createElement(P.Z,{style:{width:(0,j.h)(15),height:(0,j.h)(15)},stroke:1.5}),o.createElement(Text.x,{fz:"sm",c:"dimmed",pr:80},"Search"),o.createElement(Text.x,{fw:700,className:"m-602cb89e"},"Ctrl + K")))}function N({onSearch:e,githubLink:t,withDirectionToggle:n=!0,withSearch:r=!0,withGithub:i=!0,withDiscord:a=!0,withColorScheme:c=!0,discordLink:s,...l}){return o.createElement(h.u.Group,{openDelay:600,closeDelay:100},o.createElement(m.Z,{gap:"xs",...l},r&&o.createElement(R,{onClick:e}),a&&o.createElement(D,{link:s}),i&&o.createElement(A,{link:t}),n&&o.createElement(I,null),c&&o.createElement(C,null)))}function L({onSearch:e}){return o.createElement(w,{onClick:()=>e(),tooltip:"Search"},o.createElement(P.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}))}let H=[{v:"v6",name:"6.0.21",link:"https://v6.mantine.dev/"},{v:"v5",name:"5.10.5",link:"https://v5.mantine.dev/"},{v:"v4",name:"4.2.12",link:"https://v4.mantine.dev/"},{v:"v3",name:"3.6.14",link:"https://v3.mantine.dev/"},{v:"v2",name:"2.5.1",link:"https://v2.mantine.dev/"},{v:"v1",name:"1.3.1",link:"https://v1.mantine.dev/"}];var $=n(86175),O=n(17992),z=n(79203),_=n(60837),V=n.n(_);function Z(e){let{navbarOpened:t,onNavbarToggle:n,headerControlsProps:o}=e,i=H.map(e=>(0,r.jsxs)(l.v.Item,{component:"a",href:e.link,target:"_blank",rightSection:(0,r.jsx)(a.Z,{className:V().versionExternalIcon,stroke:1.5}),children:[(0,r.jsx)("b",{children:e.v})," ",(0,r.jsxs)(Text.x,{span:!0,c:"dimmed",fz:"xs",children:["(",e.name,")"]})]},e.name));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("header",{className:(0,s.Z)(V().header,u.Z.classNames.fullWidth),"data-desktop":!0,children:[(0,r.jsxs)("div",{className:V().logo,children:[(0,r.jsx)(O.T,{}),(0,r.jsxs)(l.v,{width:180,withinPortal:!1,children:[(0,r.jsx)(l.v.Target,{children:(0,r.jsx)(d.k,{children:(0,r.jsxs)(p.E,{fw:"bold",className:V().version,children:[(0,r.jsx)("span",{children:"7.5.0"}),(0,r.jsx)(c.Z,{className:V().versionChevron,stroke:1.5})]})})}),(0,r.jsx)(l.v.Dropdown,{children:i})]})]}),(0,r.jsx)(N,{className:V().controls,onSearch:z.m.open,githubLink:"https://github.com/mantinedev/mantine",discordLink:$.$.discordLink,...o})]}),(0,r.jsx)("header",{className:(0,s.Z)(V().header,u.Z.classNames.fullWidth),"data-mobile":!0,children:(0,r.jsxs)(m.Z,{justify:"space-between",w:"100%",wrap:"nowrap",children:[(0,r.jsx)(f.x,{miw:80,children:(0,r.jsx)(g.O,{opened:t,onClick:n,size:"sm","aria-label":"Toggle navbar"})}),(0,r.jsx)(O.T,{}),(0,r.jsxs)(m.Z,{gap:"sm",children:[(0,r.jsx)(L,{onSearch:z.m.open}),(0,r.jsx)(C,{})]})]})})]})}var G=n(54764),W=(0,G.Z)("compass","IconCompass",[["path",{d:"M8 16l2 -6l6 -2l-2 6l-6 2",key:"svg-0"}],["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-1"}],["path",{d:"M12 3l0 2",key:"svg-2"}],["path",{d:"M12 19l0 2",key:"svg-3"}],["path",{d:"M3 12l2 0",key:"svg-4"}],["path",{d:"M19 12l2 0",key:"svg-5"}]]),q=n(13070),Y=(0,G.Z)("api","IconApi",[["path",{d:"M4 13h5",key:"svg-0"}],["path",{d:"M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3",key:"svg-1"}],["path",{d:"M20 8v8",key:"svg-2"}],["path",{d:"M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5",key:"svg-3"}]]),U=(0,G.Z)("heart-handshake","IconHeartHandshake",[["path",{d:"M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572",key:"svg-0"}],["path",{d:"M12 6l-3.293 3.293a1 1 0 0 0 0 1.414l.543 .543c.69 .69 1.81 .69 2.5 0l1 -1a3.182 3.182 0 0 1 4.5 0l2.25 2.25",key:"svg-1"}],["path",{d:"M12.5 15.5l2 2",key:"svg-2"}],["path",{d:"M15 13l2 2",key:"svg-3"}]]),K=(0,G.Z)("palette","IconPalette",[["path",{d:"M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25",key:"svg-0"}],["path",{d:"M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-1"}],["path",{d:"M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-2"}],["path",{d:"M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-3"}]]),X=(0,G.Z)("help","IconHelp",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M12 17l0 .01",key:"svg-1"}],["path",{d:"M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4",key:"svg-2"}]]),J=n(49849),Q=n(54568),ee=n(79894),et=n.n(ee),en=n(86677),er=(0,G.Z)("box","IconBox",[["path",{d:"M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5",key:"svg-0"}],["path",{d:"M12 12l8 -4.5",key:"svg-1"}],["path",{d:"M12 12l0 9",key:"svg-2"}],["path",{d:"M12 12l-8 -4.5",key:"svg-3"}]]),eo=n(61433),ei=(0,G.Z)("bulb","IconBulb",[["path",{d:"M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7",key:"svg-0"}],["path",{d:"M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3",key:"svg-1"}],["path",{d:"M9.7 17l4.6 0",key:"svg-2"}]]),ea=(0,G.Z)("refresh","IconRefresh",[["path",{d:"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4",key:"svg-0"}],["path",{d:"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4",key:"svg-1"}]]),ec=n(20243),es=(0,G.Z)("box-multiple","IconBoxMultiple",[["path",{d:"M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2",key:"svg-1"}]]),el=n(66684),eu=n(94503),ed=(0,G.Z)("speakerphone","IconSpeakerphone",[["path",{d:"M18 8a3 3 0 0 1 0 6",key:"svg-0"}],["path",{d:"M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5",key:"svg-1"}],["path",{d:"M12 8h0l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8",key:"svg-2"}]]),ep=(0,G.Z)("letter-case","IconLetterCase",[["path",{d:"M17.5 15.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0",key:"svg-0"}],["path",{d:"M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5",key:"svg-1"}],["path",{d:"M3 13h7",key:"svg-2"}],["path",{d:"M21 12v7",key:"svg-3"}]]),em=(0,G.Z)("layout-2","IconLayout2",[["path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-1"}],["path",{d:"M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-2"}],["path",{d:"M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-3"}]]),ef=(0,G.Z)("click","IconClick",[["path",{d:"M3 12l3 0",key:"svg-0"}],["path",{d:"M12 3l0 3",key:"svg-1"}],["path",{d:"M7.8 7.8l-2.2 -2.2",key:"svg-2"}],["path",{d:"M16.2 7.8l2.2 -2.2",key:"svg-3"}],["path",{d:"M7.8 16.2l-2.2 2.2",key:"svg-4"}],["path",{d:"M12 12l9 3l-4 2l-2 4l-3 -9",key:"svg-5"}]]),eg=(0,G.Z)("selector","IconSelector",[["path",{d:"M8 9l4 -4l4 4",key:"svg-0"}],["path",{d:"M16 15l-4 4l-4 -4",key:"svg-1"}]]);let eh={"State management":er,"UI and Dom":eo.Z,Utilities:ei,Lifecycle:ea,"Data display":ec.Z,overlays:es,navigation:el.Z,inputs:eo.Z,misc:eu.Z,feedback:ed,typography:ep,layout:em,buttons:ef,combobox:eg};var ey=n(42205),ev=n.n(ey);function eb(e){return"category"in e}function ek(e,t){return e.pages.some(e=>eb(e)?e.pages.some(e=>e.slug===t):e.slug===t)}function ex(e){let{data:t,onNavbarClose:n,linkRef:o}=e,i=(0,en.useRouter)();return(0,r.jsx)(d.k,{component:et(),href:t.slug,mod:{active:t.slug===i.pathname},className:ev().link,onClick:n,ref:o,children:t.title})}function ew(e){let{data:t,onNavbarClose:n}=e,i=(0,en.useRouter)(),[a,s]=(0,o.useState)(ek(t,i.pathname)),l=(0,o.useRef)({}),u=e=>{let t=l.current[e];if(!t)return;let n=window.innerHeight,{top:r,bottom:o}=t.getBoundingClientRect();(r<60||o>n)&&t.scrollIntoView({block:"center"})};(0,o.useEffect)(()=>{ek(t,i.pathname)&&(s(!0),setTimeout(()=>u(i.pathname),10))},[i.pathname]);let p=t.pages.map(e=>{if(eb(e)){let t=e.pages.sort((e,t)=>e.title.localeCompare(t.title)),o=t.map(e=>(0,r.jsx)(ex,{data:e,onNavbarClose:n,linkRef:t=>{l.current[e.slug]=t}},e.slug)),i=eh[e.category];return(0,r.jsxs)("div",{className:ev().category,children:[(0,r.jsxs)(Text.x,{className:ev().categoryTitle,children:[(0,r.jsx)(i,{className:ev().categoryIcon}),e.category]}),o]},e.category)}return(0,r.jsx)(ex,{data:e,onNavbarClose:n,linkRef:t=>{l.current[e.slug]=t}},e.slug)});return(0,r.jsxs)(f.x,{className:ev().group,mod:{opened:a},children:[(0,r.jsxs)(d.k,{className:ev().header,onClick:()=>s(e=>!e),children:[(0,r.jsx)(c.Z,{className:ev().chevron,"data-collapsed":!a||void 0}),(0,r.jsx)(Text.x,{className:ev().title,children:t.group.replace("-"," ")})]}),a&&p]})}var eE=n(30092),eC=n.n(eE);function eF(e){let{href:t,external:n,children:o,icon:i,onNavbarClose:c}=e,s=(0,en.useRouter)();return(0,r.jsxs)(d.k,{component:n?"a":et(),href:t,target:n?"_blank":void 0,className:eC().link,mod:{active:s.pathname===t},onClick:c,children:[(0,r.jsx)("span",{className:eC().icon,children:i}),(0,r.jsx)("span",{className:eC().label,children:o}),n&&(0,r.jsx)("span",{className:eC().external,children:(0,r.jsx)(a.Z,{size:14})})]})}var eS=n(84020),eB=n.n(eS);function ej(e){let{navbarOpened:t,onNavbarClose:n,mobileNavbarOnly:o}=e,{dir:i}=(0,B.gm)(),a=Q.kl.map(e=>(0,r.jsx)(ew,{data:e,onNavbarClose:n},e.group));return(0,r.jsx)(f.x,{component:"nav",className:(0,s.Z)(eB().navbar,{[u.Z.classNames.zeroRight]:"rtl"===i}),mod:{hidden:!t,"mobile-only":o},children:(0,r.jsx)(J.x,{className:eB().scrollarea,type:"never",offsetScrollbars:!1,children:(0,r.jsxs)("div",{className:eB().body,children:[(0,r.jsx)(eF,{icon:(0,r.jsx)(W,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/getting-started",onNavbarClose:n,children:"Getting started"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(q.Z,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/about",onNavbarClose:n,children:"About Mantine"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(Y,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/overview",onNavbarClose:n,children:"API Overview"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(U,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/contribute",onNavbarClose:n,children:"Contribute"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(K,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}),href:"/colors-generator",onNavbarClose:n,children:"Colors generator"}),(0,r.jsx)(eF,{external:!0,icon:(0,r.jsx)(X,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}),href:"https://help.mantine.dev",onNavbarClose:n,children:"Help center"}),(0,r.jsx)(eF,{external:!0,icon:(0,r.jsx)(q.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}),href:"https://ui.mantine.dev",onNavbarClose:n,children:"Mantine UI"}),(0,r.jsx)("div",{className:eB().groups,children:a})]})})})}var eI=n(29888),eM=n.n(eI);function eD(e){let{children:t,withNavbar:n=!0,mobileNavbarOnly:o=!1,navbarOpened:a,onNavbarOpenedChange:c,headerControlsProps:s}=e,[l,u]=(0,i.C)({value:a,defaultValue:!1,finalValue:!1,onChange:c});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Z,{navbarOpened:l,onNavbarToggle:()=>u(!l),headerControlsProps:s}),n&&(0,r.jsx)(ej,{navbarOpened:l,onNavbarClose:()=>u(!1),mobileNavbarOnly:o}),(0,r.jsx)("main",{className:eM().main,id:"mdx",style:{paddingLeft:n&&!o?void 0:0,paddingRight:n&&!o?void 0:0},children:t})]})}},46624:function(e,t,n){"use strict";n.d(t,{mZ:function(){return l}});var r=n(24246),o=n(27378),i=n(56589),a=n(71078),c=n(85128),s=n.n(c);let l={next:function(e){let{size:t=40,...n}=e;return(0,r.jsx)(i.x,{component:"svg",__vars:{"--icon-size":(0,a.h)(t)},xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 309",className:s().nextIcon,"data-large":!0,...n,children:(0,r.jsx)("path",{fill:"currentColor",d:"M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"})})},vite:function(e){let{size:t=28,...n}=e,c=(0,o.useId)(),l="vite-a-".concat(c),u="vite-b-".concat(c);return(0,r.jsxs)(i.x,{__vars:{"--icon-size":(0,a.h)(t)},component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 257",className:s().icon,...n,children:[(0,r.jsxs)("defs",{children:[(0,r.jsxs)("linearGradient",{id:l,x1:"-.828%",x2:"57.636%",y1:"7.652%",y2:"78.411%",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#41D1FF"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#BD34FE"})]}),(0,r.jsxs)("linearGradient",{id:u,x1:"43.376%",x2:"50.316%",y1:"2.242%",y2:"89.03%",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#FFEA83"}),(0,r.jsx)("stop",{offset:"8.333%",stopColor:"#FFDD35"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#FFA800"})]})]}),(0,r.jsx)("path",{fill:"url(#".concat(l,")"),d:"M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 002.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62z"}),(0,r.jsx)("path",{fill:"url(#".concat(u,")"),d:"M185.432.063L96.44 17.501a3.268 3.268 0 00-2.634 3.014l-5.474 92.456a3.268 3.268 0 003.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113z"})]})},gatsby:function(e){let{size:t=28,...n}=e;return(0,r.jsxs)(i.x,{__vars:{"--icon-size":(0,a.h)(t)},component:"svg",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 256 256",className:s().icon,...n,children:[(0,r.jsx)("rect",{width:"250",height:"250",x:"3",y:"3",fill:"#fff",rx:"125"}),(0,r.jsx)("path",{fill:"#744C9E",d:"M128 0C57.308 0 0 57.307 0 128s57.308 128 128 128c70.693 0 128-57.307 128-128S198.693 0 128 0zM27.504 129.334l99.161 99.162c-54.45-.71-98.452-44.711-99.161-99.162zm122.992 96.649L30.016 105.504C40.234 60.824 80.223 27.487 128 27.487c33.397 0 62.985 16.293 81.263 41.36l-13.917 12.279C180.52 59.864 155.887 45.949 128 45.949c-35.505 0-65.74 22.552-77.169 54.113L155.94 205.169c25.525-9.243 45.156-30.79 51.731-57.477h-43.567V128h64.41c0 47.778-33.336 87.767-78.017 97.983z"})]})},redwood:function(e){let{size:t=28,...n}=e;return(0,r.jsxs)(i.x,{__vars:{"--icon-size":(0,a.h)(t)},component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 277",className:s().icon,...n,children:[(0,r.jsx)("path",{fill:"#FFF",d:"M112.39 3.928C101.983 9.164 80.046 19.36 68.16 27.493c-11.885 8.134-10.407 15.711-15.61 20.948-5.203 5.237-20.814 18.329-31.22 26.184-10.407 7.855-7.806 28.803-10.407 36.658-2.602 7.855-7.806 26.184-10.407 34.04-2.602 7.855 5.203 18.329 10.407 28.802 5.203 10.474 18.211 39.277 23.415 49.75 5.203 10.474 20.813 5.237 33.822 15.71 13.009 10.475 31.22 23.568 44.229 31.423 13.008 7.855 18.212 7.855 31.22 0 13.009-7.855 31.22-20.948 44.23-31.422 13.008-10.474 28.618-5.237 33.822-15.71 5.203-10.474 18.211-39.277 23.415-49.75 5.203-10.474 13.008-20.948 10.406-28.803-2.602-7.856-7.804-26.185-10.406-34.04-2.602-7.855 0-28.803-10.407-36.658s-22.487-17.857-31.22-26.184c-8.734-8.327-5.204-13.092-15.61-20.948-10.407-7.855-33.823-18.329-44.23-23.565-10.406-5.237-20.813-5.237-31.22 0z"}),(0,r.jsx)("path",{fill:"#BF4722",d:"M75.644 49.319l48.694 33.238a6.886 6.886 0 003.7 1.155 6.665 6.665 0 003.7-1.155l48.73-33.35a6.65 6.65 0 002.748-5.947 6.633 6.633 0 00-3.672-5.418L130.85 13.733a6.692 6.692 0 00-5.846 0l-48.546 24.11a6.633 6.633 0 00-3.707 5.5 6.649 6.649 0 002.893 5.976zm68.933 43.671a6.721 6.721 0 002.886 5.515l39.037 26.68a6.55 6.55 0 008.103-.522l32.746-29.288a6.654 6.654 0 002.213-5.156 6.648 6.648 0 00-2.509-5.017L195.787 60.2a6.623 6.623 0 00-7.844-.298l-40.48 27.686a6.72 6.72 0 00-2.886 5.403zm-97.09 36.293a6.696 6.696 0 012.182 5.627 6.524 6.524 0 01-3.293 5.068l-23.31 13.973a6.586 6.586 0 01-7.5-.512 6.698 6.698 0 01-2.195-7.238l8.621-27.127a6.607 6.607 0 014.551-4.397 6.406 6.406 0 016.143 1.453l14.8 13.153zm126.432 2.832l-42.144-28.84a6.622 6.622 0 00-7.4 0l-42.145 28.84a6.754 6.754 0 00-2.886 5.068 6.88 6.88 0 002.22 5.44l42.108 37.672a6.597 6.597 0 004.403 1.677 6.63 6.63 0 004.403-1.677l42.107-37.672a6.73 6.73 0 002.183-5.44 6.606 6.606 0 00-2.849-5.068zm-112.41-7.452L28.802 95.375a6.804 6.804 0 01-2.22-5.254 6.574 6.574 0 012.478-5.03l31.266-25.152a6.696 6.696 0 017.882-.298l40.442 27.685a6.682 6.682 0 013.01 5.59 6.682 6.682 0 01-3.01 5.589l-39 26.68a6.624 6.624 0 01-8.14-.522zm167.95 42.069l-33.302-19.935a6.55 6.55 0 00-7.77.745l-40.702 36.33a6.696 6.696 0 00-2.13 6.13 6.66 6.66 0 004.055 5.05l56.463 22.878a6.333 6.333 0 002.442.485c2.621.008 5-1.54 6.069-3.95l17.501-39.2c1.425-3.102.29-6.787-2.627-8.533zm4.624-47.658l8.622 27.127h-.074a6.71 6.71 0 01-.975 5.958 6.61 6.61 0 01-5.353 2.724 6.478 6.478 0 01-3.367-.932l-23.348-13.973a6.489 6.489 0 01-3.182-5.068 6.62 6.62 0 012.183-5.627l14.8-13.19a6.59 6.59 0 016.143-1.454 6.72 6.72 0 014.551 4.435zm-123.51 70.91a6.66 6.66 0 00-2.109-6.111l-40.701-36.331a6.55 6.55 0 00-7.77-.745L26.69 166.732c-2.883 1.754-4.024 5.392-2.664 8.496l17.539 39.2c1.453 3.268 5.21 4.798 8.51 3.465l56.427-22.88a6.659 6.659 0 004.07-5.03zm19.98 11.178l45.29 18.333a6.665 6.665 0 013.997 5.44 6.614 6.614 0 01-2.813 6.223l-45.326 31.488a6.551 6.551 0 01-3.7 1.191 6.682 6.682 0 01-3.7-1.191l-45.29-31.488a6.651 6.651 0 01-2.849-6.222 6.775 6.775 0 014.144-5.44l45.29-18.334a6.69 6.69 0 014.958 0z"})]})},remix:function(e){let{size:t=40,...n}=e;return(0,r.jsx)(i.x,{component:"svg",__vars:{"--icon-size":(0,a.h)(t)},xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 128",className:s().nextIcon,"data-large":!0,...n,children:(0,r.jsx)("path",{fill:"currentColor",d:"M404.472 38.335v89.493h-32.264V38.335h32.264zm41.606-.176l14.738 21.27 15.136-21.27h33.26l-32.264 42.54L512 127.653h-35.65l-17.724-24.28-17.726 24.28h-33.26l34.853-45.55L410.43 38.16h35.65zm-116.09-2.827c24.252 0 31.522 16.717 31.665 35.158l.002.56v56.184H329.39V79.313l-.006-.72-.01-.707-.018-.693-.023-.678a63.244 63.244 0 00-.014-.334l-.033-.657a53.255 53.255 0 00-.04-.643l-.046-.629a44.966 44.966 0 00-.026-.309l-.058-.608-.065-.593c-.915-7.718-3.901-11.725-11.61-11.725-9.142 0-13.103 6.379-14.086 16.549l-.064.724c-.12 1.46-.18 2.996-.189 4.598l-.001 44.346h-32.264V79.678l-.003-.727c0-.12-.002-.24-.003-.359l-.012-.706-.018-.693-.025-.678-.032-.664a54.24 54.24 0 00-.018-.327l-.043-.643-.05-.629-.057-.615c-.838-8.303-3.885-12.62-11.888-12.62-10.45 0-14.263 8.653-14.338 21.87l-.001 44.347h-32.264V37.74h32.264v13.444c4.78-9.832 14.34-15.852 27.683-15.852 15.734 0 23.899 7.224 27.684 17.658 4.78-10.033 15.335-17.658 30.271-17.658zm-170.42-2.827c29.38 0 45.093 20.06 45.405 44.02l.004.728v9.029H142.64c.797 11.036 8.764 16.253 18.522 16.253 8.65 0 14.195-2.931 17.21-9.76l.117-.272 25.891 2.407c-4.58 20.468-20.912 31.905-44.413 31.905-28.48 0-48.794-17.257-48.794-45.75 0-28.293 20.713-48.56 48.396-48.56zM60.366 0c32.541 0 48.712 15.488 48.712 40.228 0 18.505-11.38 30.573-26.752 32.585 12.977 2.615 20.563 10.057 21.96 24.74l.203 2.7.177 2.524.152 2.362.106 1.78.114 2.1.06 1.2.083 1.904.068 1.8.034 1.033.045 1.657.04 1.894.014.916.025 2.652.008 2.768.001 1.655H71.857c0-.698.006-1.37.014-2.03l.02-1.306.058-3.164.015-1.06.01-1.097.001-.566-.001-1.063-.01-1.115-.014-.876-.027-1.225-.04-1.3-.054-1.381-.068-1.472-.04-.772-.069-1.207-.079-1.268-.122-1.792-.106-1.424C70.417 88.912 65 85.186 55.093 84.73l-.646-.025-.658-.016a54.423 54.423 0 00-.67-.008L0 84.68V58.33h54.376c14.374 0 21.56-4.406 21.56-16.072 0-10.258-7.186-16.475-21.56-16.475H0V0h60.365zM35.483 106.855c4.402 0 6.245 2.445 6.9 4.785l.071.27.032.133.055.267.047.263.02.13.033.257.025.252.01.123.013.243.004.118.003.23v12.572H0v-19.643h35.483zM159.17 55.782c-8.078 0-12.642 3.906-14.826 9.625l-.164.443-.154.45c-.15.454-.285.918-.408 1.39l-.118.477c-.075.32-.145.642-.21.97l-.092.492c-.015.083-.03.166-.043.249l-.08.5-.037.253h31.268c-.399-8.027-5.577-14.85-15.136-14.85zm245.5-54.369v28.494H372.01V1.413h32.662z"})})}}},54568:function(e,t,n){"use strict";n.d(t,{us:function(){return a},kl:function(){return c},YU:function(){return s},Se:function(){return l}});let r={NotFound:{title:"404",slug:"/404",hideHeader:!0,hideInSearch:!0,hideSiblings:!0},About:{title:"About Mantine",slug:"/about",search:"Browser support, releases cycle, previous versions documentation",hideSiblings:!0,hideHeader:!0},GettingStarted:{title:"Getting started",search:"Getting started with Mantine",slug:"/getting-started",hideSiblings:!0,hideHeader:!0},TemplatesUsage:{title:"Getting started with a template",slug:"/templates-usage",hideInSearch:!0,hideSiblings:!0,hideHeader:!0},Overview:{title:"Mantine API overview",slug:"/overview",search:"Overview of Mantine components API",hideSiblings:!0,hideHeader:!0},Contribute:{title:"Contributing to Mantine",slug:"/contribute",search:"Learn how to contribute to Mantine",hideSiblings:!0,hideHeader:!0},SubmitTemplate:{title:"Submit a template",slug:"/submit-template",search:"Learn how to submit a template",hideSiblings:!0,hideHeader:!0},Changelog700:{title:"Version v7.0.0",slug:"/changelog/7-0-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.0.0",date:"September 18th, 2023"},Changelog710:{title:"Version v7.1.0",slug:"/changelog/7-1-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.1.0",date:"September 28th, 2023"},Changelog720:{title:"Version v7.2.0",slug:"/changelog/7-2-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.2.0",date:"November 7th, 2023"},Changelog730:{title:"Version v7.3.0",slug:"/changelog/7-3-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.3.0",date:"December 5th, 2023"},Changelog740:{title:"Version v7.4.0",slug:"/changelog/7-4-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.4.0",date:"January 3rd, 2024"},Changelog750:{title:"Version v7.5.0",slug:"/changelog/7-5-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.5.0",date:"January 26th, 2024"},PreviousChangelogs:{title:"All releases",slug:"/changelog/previous-versions",hideHeader:!0},AllReleases:{title:"All releases",slug:"/changelog/all-releases",hideHeader:!0}};function o(e,t){let n=e.replace(/[A-Z]/g,e=>"-".concat(e.toLowerCase()));return{title:n,package:"@mantine/hooks",slug:"/hooks/".concat(n),description:t,import:"import { ".concat(e," } from '@mantine/hooks';"),source:"@mantine/hooks/src/".concat(n,"/").concat(n,".ts"),docs:"hooks/".concat(n,".mdx")}}let i={useClickOutside:o("useClickOutside","Detects click and touch events outside of given element or elements group"),useClipboard:o("useClipboard","Wrapper around navigator.clipboard with feedback timeout"),useColorScheme:o("useColorScheme","Detects user system color scheme with window.matchMedia API"),useCounter:o("useCounter","Increments/decrements state within given boundaries"),useDebouncedState:o("useDebouncedState","Debounces value changes"),useDebouncedValue:o("useDebouncedValue","Debounces value changes"),useDidUpdate:o("useDidUpdate","Calls given function in useEffect when value changes, but not when the component mounts"),useDisclosure:o("useDisclosure","Manages boolean state, provides open, close and toggle handlers, usually used with modals, drawers and popovers"),useDocumentTitle:o("useDocumentTitle","Sets document.title to given string"),useDocumentVisibility:o("useDocumentVisibility","Detects if the current tab is active"),useElementSize:o("useElementSize","Returns element width and height and observes changes with ResizeObserver"),useEventListener:o("useEventListener","Subscribes to events of a given element with a ref"),useEyeDropper:o("useEyeDropper","Pick color from any pixel on the screen"),useFavicon:o("useFavicon","Changes favicon"),useFocusReturn:o("useFocusReturn","Captures last focused element on the page and returns focus to it once given condition is met"),useFocusTrap:o("useFocusTrap","Traps focus inside given element"),useFocusWithin:o("useFocusWithin","Detects if any element within the given element has focus"),useForceUpdate:o("useForceUpdate","Forces the component to rerender without state change"),useFullscreen:o("useFullscreen","Enter/exit fullscreen mode with given element or entire page"),useHash:o("useHash","Get and set hash value in the URL"),useHeadroom:o("useHeadroom","Create headers that are hidden after user scrolls past given distance"),useHotkeys:o("useHotkeys","Listen for keys combinations on document element"),useHover:o("useHover","Detects if given element is hovered"),useId:o("useId","Generates memoized random id"),useIdle:o("useIdle","Detects if the user does nothing on the page"),useInputState:o("useInputState","Manages input state"),useIntersection:o("useIntersection","Detects if given element is visible in the viewport or other element with IntersectionObserver"),useInterval:o("useInterval","Calls function with a given interval"),useIsomorphicEffect:o("useIsomorphicEffect","useLayoutEffect replacement"),useListState:o("useListState","Manages array state"),useLocalStorage:o("useLocalStorage","Exposes localStorage value as react state, syncs state across opened tabs"),useLogger:o("useLogger","Logs given values to console when component renders"),useMediaQuery:o("useMediaQuery","Subscribes to media queries with window.matchMedia"),useMergedRef:o("useMergedRef","Merges multiple refs objects or functions into one ref callback"),useMouse:o("useMouse","Tracks mouse position over the viewport or given element"),useMove:o("useMove","Handles move behavior over given element, can be used to build custom sliders"),useNetwork:o("useNetwork","Returns current connection status"),useOs:o("useOs","Detects user operating system"),usePageLeave:o("usePageLeave","Calls given function when the mouse leaves the page"),usePrevious:o("usePrevious","Returns previous value of given state"),useQueue:o("useQueue","Manages queue of values"),useReducedMotion:o("useReducedMotion","Detects if user prefers to reduce motion"),useResizeObserver:o("useResizeObserver","Tracks element size and position changes with ResizeObserver"),useScrollIntoView:o("useScrollIntoView","Scrolls given element into view"),useSetState:o("useSetState","Manages state with setState-like API"),useShallowEffect:o("useShallowEffect","useEffect drop in replacement with dependencies shallow comparison"),useTextSelection:o("useTextSelection","Returns current selected text on the page"),useTimeout:o("useTimeout","Calls function in given timeout"),useToggle:o("useToggle","Switches between given values"),useUncontrolled:o("useUncontrolled","Manage state of both controlled and uncontrolled components"),useValidatedState:o("useValidatedState","Manages state with validation"),useViewportSize:o("useViewportSize","Returns viewport width and height and subscribes to changes"),useWindowEvent:o("useWindowEvent","Adds event listener to the window object on component mount and removes the event when the component unmounts"),useWindowScroll:o("useWindowScroll","Tracks window scroll position"),usePagination:o("usePagination","Manages pagination state"),useInViewport:o("useInViewport","Detects if element is visible in the viewport")},a={...r,MantineProvider:{title:"MantineProvider",slug:"/theming/mantine-provider",search:"Theme context, CSS reset, CSS variables, context classes and styles",hideHeader:!0},ThemeObject:{title:"Theme object",slug:"/theming/theme-object",search:"use-mantine-theme, theme override, MantineTheme",hideHeader:!0},ColorSchemes:{title:"Color schemes",slug:"/theming/color-schemes",search:"use-mantine-color-scheme, color schemes management, data-mantine-color-scheme",hideHeader:!0},Colors:{title:"Colors",slug:"/theming/colors",search:"Default colors, primaryColor, primaryShade",hideHeader:!0},ColorFunctions:{title:"Color functions",slug:"/styles/color-functions",search:"Functions to manipulate colors, darken, lighten, parse",hideHeader:!0},Typography:{title:"Typography",slug:"/theming/typography",search:"Change fonts, @font-face",hideHeader:!0},DefaultProps:{title:"Default props",slug:"/theming/default-props",search:"Default props for components",hideHeader:!0},DefaultTheme:{title:"Default theme",slug:"/theming/default-theme",hideHeader:!0},StylesOverview:{title:"Styles overview",slug:"/styles/styles-overview",search:"Overview of the ways to apply styles",hideHeader:!0},MantineStyles:{title:"Mantine styles",slug:"/styles/mantine-styles",search:"Mantine .css files",hideHeader:!0},CSSModules:{title:"CSS modules",slug:"/styles/css-modules",search:"Get started with CSS modules",hideHeader:!0},VanillaExtract:{title:"Vanilla extract",slug:"/styles/vanilla-extract",search:"Mantine + Vanilla extract integration",hideHeader:!0},UsageWithSass:{title:"Usage with Sass",slug:"/styles/sass",search:"Mantine Sass mixins, functions and variables",hideHeader:!0},PostCSSPreset:{title:"PostCSS preset",slug:"/styles/postcss-preset",search:"postcss-preset-mantine, mixins, CSS functions",hideHeader:!0},GlobalStyles:{title:"Global styles",slug:"/styles/global-styles",search:"Global styles that are required for Mantine components to work properly",hideHeader:!0},CssVariables:{title:"CSS variables",slug:"/styles/css-variables",search:"Mantine CSS variables and resolvers",hideHeader:!0},CSSVariablesList:{title:"CSS variables list",slug:"/styles/css-variables-list",hideSiblings:!0,hideHeader:!0},CSSFilesList:{title:"CSS files list",slug:"/styles/css-files-list",search:"List of all Mantine .css files",hideHeader:!0},Rem:{title:"rem, em and px units",slug:"/styles/rem",search:"rem and em units with Mantine components, units conversion",hideHeader:!0},StyleProp:{title:"style prop",slug:"/styles/style",search:"style prop usage",hideHeader:!0},ResponsiveStyles:{title:"Responsive styles",slug:"/styles/responsive",search:"Media queries, breakpoints, inline responsive styles",hideHeader:!0},StylesApi:{title:"Styles API",slug:"/styles/styles-api",search:"classNames, styles and unstyled props",hideHeader:!0},DataAttributes:{title:"data-* attributes",slug:"/styles/data-attributes",search:"Usage of data-* attributes to apply styles",hideHeader:!0},VariantsAndSizes:{title:"Variants and sizes",slug:"/styles/variants-sizes",search:"Customize components sizes and variants",hideHeader:!0},StyleProps:{title:"Style props",slug:"/styles/style-props",search:"Props to add inline styles",hideHeader:!0},Rtl:{title:"RTL (right-to-left)",slug:"/styles/rtl",search:"Change text direction to right-to-left",hideHeader:!0},StylesPerformance:{title:"Styles performance",slug:"/styles/styles-performance",search:"Learn how to improve your styles performance",hideHeader:!0},UnstyledComponents:{title:"Unstyled / headless",slug:"/styles/unstyled",search:"Headless/unstyled components",hideHeader:!0},Polymorphic:{title:"Polymorphic components",slug:"/guides/polymorphic",search:"createPolymorphicComponent, change root element, component prop",hideHeader:!0},NextJs:{title:"Usage with Next.js",slug:"/guides/next",search:"Get started with Next.js",hideHeader:!0},Vite:{title:"Usage with Vite",slug:"/guides/vite",search:"Get started with Vite",hideHeader:!0},Remix:{title:"Usage with Remix",slug:"/guides/remix",search:"Get started with Remix",hideHeader:!0},Gatsby:{title:"Usage with Gatsby",slug:"/guides/gatsby",search:"Get started with Gatsby",hideHeader:!0},Redwood:{title:"Usage with Redwood",slug:"/guides/redwood",search:"Get started with Redwood",hideHeader:!0},Storybook:{title:"Usage with Storybook",slug:"/guides/storybook",search:"Setup Mantine with Storybook",hideHeader:!0},TypeScript:{title:"Usage with TypeScript",slug:"/guides/typescript",search:"Usage with TypeScript",hideHeader:!0},JavaScript:{title:"Usage with JavaScript",slug:"/guides/javascript",search:"Usage with JavaScript",hideHeader:!0},Icons:{title:"Icons libraries",slug:"/guides/icons",search:"Usage of icons libraries with Mantine",hideHeader:!0},Jest:{title:"Testing with Jest",slug:"/guides/jest",search:"Testing with Jest and React Testing Library",hideHeader:!0},Vitest:{title:"Testing with Vitest",slug:"/guides/vitest",search:"Testing with Vitest and React Testing Library",hideHeader:!0},SixToSeven:{title:"6.x to 7.x migration",slug:"/guides/6x-to-7x",search:"Styles migration guide from 6.x to 7.x",hideHeader:!0},FunctionsReference:{title:"Functions reference",slug:"/guides/functions-reference",search:"A list of functions exported from Mantine packages that are not documented anywhere else",hideHeader:!0},Box:{title:"Box",package:"@mantine/core",slug:"/core/box",description:"Base component for all Mantine components",import:"import { Box } from '@mantine/core';",source:"@mantine/core/src/components/Box/Box.tsx",docs:"core/box.mdx"},Button:{title:"Button",package:"@mantine/core",slug:"/core/button",description:"Button component to render button or link",componentPrefix:"Button",props:["Button","ButtonGroup"],styles:["Button","ButtonGroup"],import:"import { Button } from '@mantine/core';",source:"@mantine/core/src/components/Button/Button.tsx",docs:"core/button.mdx"},Loader:{title:"Loader",package:"@mantine/core",slug:"/core/loader",description:"Indicate loading state",props:["Loader"],styles:["Loader"],import:"import { Loader } from '@mantine/core';",source:"@mantine/core/src/components/Loader/Loader.tsx",docs:"core/loader.mdx"},Container:{title:"Container",package:"@mantine/core",slug:"/core/container",description:"Center content with padding and max-width",props:["Container"],styles:["Container"],import:"import { Container } from '@mantine/core';",source:"@mantine/core/src/components/Container/Container.tsx",docs:"core/container.mdx"},Anchor:{title:"Anchor",package:"@mantine/core",slug:"/core/anchor",description:"Display link with theme styles",props:["Anchor"],styles:["Anchor"],import:"import { Anchor } from '@mantine/core';",source:"@mantine/core/src/components/Anchor/Anchor.tsx",docs:"core/anchor.mdx"},Input:{title:"Input",package:"@mantine/core",slug:"/core/input",description:"Base component to create custom inputs",componentPrefix:"Input",props:["Input","InputWrapper","InputLabel","InputDescription","InputError"],styles:["Input","InputWrapper"],polymorphic:!0,import:"import { Input } from '@mantine/core';",source:"@mantine/core/src/components/Input/Input.tsx",docs:"core/input.mdx"},ActionIcon:{title:"ActionIcon",package:"@mantine/core",slug:"/core/action-icon",description:"Icon button",componentPrefix:"ActionIcon",props:["ActionIcon","ActionIconGroup"],styles:["ActionIcon","ActionIconGroup"],polymorphic:!0,import:"import { ActionIcon } from '@mantine/core';",source:"@mantine/core/src/components/ActionIcon/ActionIcon.tsx",docs:"core/action-icon.mdx"},CloseButton:{title:"CloseButton",package:"@mantine/core",slug:"/core/close-button",description:"Button with close icon",props:["CloseButton"],styles:["CloseButton"],polymorphic:!0,import:"import { CloseButton } from '@mantine/core';",source:"@mantine/core/src/components/CloseButton/CloseButton.tsx",docs:"core/close-button.mdx"},CopyButton:{title:"CopyButton",package:"@mantine/core",slug:"/core/copy-button",description:"Copies given text to clipboard",props:["CopyButton"],import:"import { CopyButton } from '@mantine/core';",source:"@mantine/core/src/components/CopyButton/CopyButton.tsx",docs:"core/copy-button.mdx"},FileButton:{title:"FileButton",package:"@mantine/core",slug:"/core/file-button",description:"Open file picker with a button click",props:["FileButton"],import:"import { FileButton } from '@mantine/core';",source:"@mantine/core/src/components/FileButton/FileButton.tsx",docs:"core/file-button.mdx"},UnstyledButton:{title:"UnstyledButton",package:"@mantine/core",slug:"/core/unstyled-button",description:"Unstyled polymorphic button",polymorphic:!0,import:"import { UnstyledButton } from '@mantine/core';",source:"@mantine/core/src/components/UnstyledButton/UnstyledButton.tsx",docs:"core/unstyled-button.mdx"},Tabs:{title:"Tabs",package:"@mantine/core",slug:"/core/tabs",props:["Tabs","TabsList","TabsTab","TabsPanel"],styles:["Tabs"],description:"Switch between different views",import:"import { Tabs } from '@mantine/core';",source:"@mantine/core/src/components/Tabs/Tabs.tsx",docs:"core/tabs.mdx"},BackgroundImage:{title:"BackgroundImage",package:"@mantine/core",slug:"/core/background-image",description:"Displays image as background",polymorphic:!0,props:["BackgroundImage"],styles:["BackgroundImage"],import:"import { BackgroundImage } from '@mantine/core';",source:"@mantine/core/src/components/BackgroundImage/BackgroundImage.tsx",docs:"core/background-image.mdx"},Blockquote:{title:"Blockquote",package:"@mantine/core",slug:"/core/blockquote",props:["Blockquote"],styles:["Blockquote"],description:"Blockquote with optional cite",import:"import { Blockquote } from '@mantine/core';",source:"@mantine/core/src/components/Blockquote/Blockquote.tsx",docs:"core/blockquote.mdx"},Breadcrumbs:{title:"Breadcrumbs",package:"@mantine/core",slug:"/core/breadcrumbs",props:["Breadcrumbs"],styles:["Breadcrumbs"],description:"Separates list of react nodes with given separator",import:"import { Breadcrumbs } from '@mantine/core';",source:"@mantine/core/src/components/Breadcrumbs/Breadcrumbs.tsx",docs:"core/breadcrumbs.mdx"},Burger:{title:"Burger",package:"@mantine/core",slug:"/core/burger",props:["Burger"],styles:["Burger"],description:"Open/close navigation button",import:"import { Burger } from '@mantine/core';",source:"@mantine/core/src/components/Burger/Burger.tsx",docs:"core/burger.mdx"},Center:{title:"Center",package:"@mantine/core",slug:"/core/center",props:["Center"],styles:["Center"],polymorphic:!0,description:"Centers content vertically and horizontally",import:"import { Center } from '@mantine/core';",source:"@mantine/core/src/components/Center/Center.tsx",docs:"core/center.mdx"},Code:{title:"Code",package:"@mantine/core",slug:"/core/code",props:["Code"],styles:["Code"],description:"Inline and block code",import:"import { Code } from '@mantine/core';",source:"@mantine/core/src/components/Code/Code.tsx",docs:"core/code.mdx"},Collapse:{title:"Collapse",package:"@mantine/core",slug:"/core/collapse",props:["Collapse"],description:"Animate presence with slide down/up transition",import:"import { Collapse } from '@mantine/core';",source:"@mantine/core/src/components/Collapse/Collapse.tsx",docs:"core/collapse.mdx"},ColorPicker:{title:"ColorPicker",package:"@mantine/core",slug:"/core/color-picker",props:["ColorPicker"],styles:["ColorPicker"],description:"Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats",import:"import { ColorPicker } from '@mantine/core';",source:"@mantine/core/src/components/ColorPicker/ColorPicker.tsx",docs:"core/color-picker.mdx"},ColorSwatch:{title:"ColorSwatch",package:"@mantine/core",slug:"/core/color-swatch",props:["ColorSwatch"],styles:["ColorSwatch"],polymorphic:!0,description:"Displays color",import:"import { ColorSwatch } from '@mantine/core';",source:"@mantine/core/src/components/ColorSwatch/ColorSwatch.tsx",docs:"core/color-swatch.mdx"},FocusTrap:{title:"FocusTrap",package:"@mantine/core",slug:"/core/focus-trap",props:["FocusTrap"],description:"Trap focus at child node",import:"import { FocusTrap } from '@mantine/core';",source:"@mantine/core/src/components/FocusTrap/FocusTrap.tsx",docs:"core/focus-trap.mdx"},Group:{title:"Group",package:"@mantine/core",slug:"/core/group",props:["Group"],styles:["Group"],description:"Compose elements and components in a horizontal flex container",import:"import { Group } from '@mantine/core';",source:"@mantine/core/src/components/Group/Group.tsx",docs:"core/group.mdx"},Highlight:{title:"Highlight",package:"@mantine/core",slug:"/core/highlight",props:["Highlight"],styles:["Highlight"],polymorphic:!0,description:"Highlight given part of a string with mark",import:"import { Highlight } from '@mantine/core';",source:"@mantine/core/src/components/Highlight/Highlight.tsx",docs:"core/highlight.mdx"},Kbd:{title:"Kbd",package:"@mantine/core",slug:"/core/kbd",props:["Kbd"],styles:["Kbd"],description:"Display keyboard key",import:"import { Kbd } from '@mantine/core';",source:"@mantine/core/src/components/Kbd/Kbd.tsx",docs:"core/kbd.mdx"},Mark:{title:"Mark",package:"@mantine/core",slug:"/core/mark",props:["Mark"],styles:["Mark"],description:"Highlight part of the text",import:"import { Mark } from '@mantine/core';",source:"@mantine/core/src/components/Mark/Mark.tsx",docs:"core/mark.mdx"},NativeSelect:{title:"NativeSelect",package:"@mantine/core",slug:"/core/native-select",props:["NativeSelect"],styles:["NativeSelect"],description:"Native select element based on Input",import:"import { NativeSelect } from '@mantine/core';",source:"@mantine/core/src/components/NativeSelect/NativeSelect.tsx",docs:"core/native-select.mdx"},Notification:{title:"Notification",package:"@mantine/core",slug:"/core/notification",props:["Notification"],styles:["Notification"],description:"Show dynamic notifications and alerts to user, part of notifications system",import:"import { Notification } from '@mantine/core';",source:"@mantine/core/src/components/Notification/Notification.tsx",docs:"core/notification.mdx"},Paper:{title:"Paper",package:"@mantine/core",slug:"/core/paper",props:["Paper"],styles:["Paper"],description:"Renders white or dark background depending on color scheme",polymorphic:!0,import:"import { Paper } from '@mantine/core';",source:"@mantine/core/src/components/Paper/Paper.tsx",docs:"core/paper.mdx"},Popover:{title:"Popover",package:"@mantine/core",slug:"/core/popover",componentPrefix:"Popover",props:["Popover","PopoverTarget"],styles:["Popover"],description:"Display popover section relative to given target element",import:"import { Popover } from '@mantine/core';",source:"@mantine/core/src/components/Popover/Popover.tsx",docs:"core/popover.mdx"},Portal:{title:"Portal",package:"@mantine/core",slug:"/core/portal",props:["Portal"],description:"Renders component outside of parent element tree",import:"import { Portal } from '@mantine/core';",source:"@mantine/core/src/components/Portal/Portal.tsx",docs:"core/portal.mdx"},ScrollArea:{title:"ScrollArea",package:"@mantine/core",slug:"/core/scroll-area",props:["ScrollArea"],styles:["ScrollArea"],description:"Area with custom scrollbars",import:"import { ScrollArea } from '@mantine/core';",source:"@mantine/core/src/components/ScrollArea/ScrollArea.tsx",docs:"core/scroll-area.mdx"},SegmentedControl:{title:"SegmentedControl",package:"@mantine/core",slug:"/core/segmented-control",props:["SegmentedControl"],styles:["SegmentedControl"],description:"A linear set of two or more segments",import:"import { SegmentedControl } from '@mantine/core';",source:"@mantine/core/src/components/SegmentedControl/SegmentedControl.tsx",docs:"core/segmented-control.mdx"},Slider:{title:"Slider",package:"@mantine/core",slug:"/core/slider",props:["Slider","RangeSlider"],styles:["Slider"],description:"Slider and RangeSlider components",import:"import { Slider } from '@mantine/core';",source:"@mantine/core/src/components/Slider/Slider/Slider.tsx",docs:"core/slider.mdx"},Stack:{title:"Stack",package:"@mantine/core",slug:"/core/stack",props:["Stack"],styles:["Stack"],description:"Compose elements and components in a vertical flex container",import:"import { Stack } from '@mantine/core';",source:"@mantine/core/src/components/Stack/Stack.tsx",docs:"core/stack.mdx"},Switch:{title:"Switch",package:"@mantine/core",slug:"/core/switch",props:["Switch","SwitchGroup"],styles:["Switch"],description:"Capture boolean input from user",import:"import { Switch } from '@mantine/core';",source:"@mantine/core/src/components/Switch/Switch.tsx",docs:"core/switch.mdx"},Table:{title:"Table",package:"@mantine/core",slug:"/core/table",props:["Table"],styles:["Table"],description:"Render table with theme styles",import:"import { Table } from '@mantine/core';",source:"@mantine/core/src/components/Table/Table.tsx",docs:"core/table.mdx"},Text:{title:"Text",package:"@mantine/core",slug:"/core/text",props:["Text"],styles:["Text"],description:"Display text",import:"import { Text } from '@mantine/core';",source:"@mantine/core/src/components/Text/Text.tsx",docs:"core/text.mdx"},TextInput:{title:"TextInput",package:"@mantine/core",slug:"/core/text-input",props:["TextInput"],styles:["TextInput"],description:"Capture string input from user",import:"import { TextInput } from '@mantine/core';",source:"@mantine/core/src/components/TextInput/TextInput.tsx",docs:"core/text-input.mdx"},Title:{title:"Title",package:"@mantine/core",slug:"/core/title",props:["Title"],styles:["Title"],description:"h1-h6 heading",import:"import { Title } from '@mantine/core';",source:"@mantine/core/src/components/Title/Title.tsx",docs:"core/title.mdx"},Badge:{title:"Badge",package:"@mantine/core",slug:"/core/badge",props:["Badge"],styles:["Badge"],polymorphic:!0,description:"Display badge, pill or tag",import:"import { Badge } from '@mantine/core';",source:"@mantine/core/src/components/Badge/Badge.tsx",docs:"core/badge.mdx"},Tooltip:{title:"Tooltip",package:"@mantine/core",slug:"/core/tooltip",props:["Tooltip"],styles:["Tooltip"],description:"Renders tooltip at given element on mouse over or other event",import:"import { Tooltip } from '@mantine/core';",source:"@mantine/core/src/components/Tooltip/Tooltip.tsx",docs:"core/tooltip.mdx"},Transition:{title:"Transition",package:"@mantine/core",slug:"/core/transition",props:["Transition"],description:"Animate presence of component with pre-made animations",import:"import { Transition } from '@mantine/core';",source:"@mantine/core/src/components/Transition/Transition.tsx",docs:"core/transition.mdx"},TypographyStylesProvider:{title:"TypographyStylesProvider",package:"@mantine/core",slug:"/core/typography-styles-provider",description:"Styles provider for html content",import:"import { TypographyStylesProvider } from '@mantine/core';",source:"@mantine/core/src/components/TypographyStylesProvider/TypographyStylesProvider.tsx",docs:"core/typography-styles-provider.mdx"},VisuallyHidden:{title:"VisuallyHidden",package:"@mantine/core",slug:"/core/visually-hidden",description:"Hide element visually but keep it accessible for screen readers",import:"import { VisuallyHidden } from '@mantine/core';",source:"@mantine/core/src/components/VisuallyHidden/VisuallyHidden.tsx",docs:"core/visually-hidden.mdx"},Divider:{title:"Divider",package:"@mantine/core",slug:"/core/divider",props:["Divider"],styles:["Divider"],description:"Horizontal line with optional label or vertical divider",import:"import { Divider } from '@mantine/core';",source:"@mantine/core/src/components/Divider/Divider.tsx",docs:"core/divider.mdx"},AspectRatio:{title:"AspectRatio",package:"@mantine/core",slug:"/core/aspect-ratio",props:["AspectRatio"],styles:["AspectRatio"],description:"Maintain responsive consistent width/height ratio",import:"import { AspectRatio } from '@mantine/core';",source:"@mantine/core/src/components/AspectRatio/AspectRatio.tsx",docs:"core/aspect-ratio.mdx"},Overlay:{title:"Overlay",package:"@mantine/core",slug:"/core/overlay",props:["Overlay"],styles:["Overlay"],polymorphic:!0,description:"Overlays parent element with div element with any color and opacity",import:"import { Overlay } from '@mantine/core';",source:"@mantine/core/src/components/Overlay/Overlay.tsx",docs:"core/overlay.mdx"},Avatar:{title:"Avatar",package:"@mantine/core",slug:"/core/avatar",props:["Avatar"],styles:["Avatar"],polymorphic:!0,description:"Display user profile image, initials or fallback icon",import:"import { Avatar } from '@mantine/core';",source:"@mantine/core/src/components/Avatar/Avatar.tsx",docs:"core/avatar.mdx"},Alert:{title:"Alert",package:"@mantine/core",slug:"/core/alert",props:["Alert"],styles:["Alert"],description:"Attract user attention with important static message",import:"import { Alert } from '@mantine/core';",source:"@mantine/core/src/components/Alert/Alert.tsx",docs:"core/alert.mdx"},Affix:{title:"Affix",package:"@mantine/core",slug:"/core/affix",props:["Affix"],styles:["Affix"],description:"Renders children inside portal at fixed position",import:"import { Affix } from '@mantine/core';",source:"@mantine/core/src/components/Affix/Affix.tsx",docs:"core/affix.mdx"},Fieldset:{title:"Fieldset",package:"@mantine/core",slug:"/core/fieldset",props:["Fieldset"],styles:["Fieldset"],description:"Group related elements in a form",import:"import { Fieldset } from '@mantine/core';",source:"@mantine/core/src/components/Fieldset/Fieldset.tsx",docs:"core/fieldset.mdx"},Checkbox:{title:"Checkbox",package:"@mantine/core",slug:"/core/checkbox",componentPrefix:"Checkbox",props:["Checkbox","CheckboxGroup"],styles:["Checkbox","CheckboxGroup"],description:"Capture boolean input from user",import:"import { Checkbox } from '@mantine/core';",source:"@mantine/core/src/components/Checkbox/Checkbox.tsx",docs:"core/checkbox.mdx"},Combobox:{title:"Combobox",package:"@mantine/core",slug:"/core/combobox",componentPrefix:"Combobox",props:["Combobox","ComboboxOption","ComboboxTarget","ComboboxDropdownTarget","ComboboxEventsTarget","ComboboxDropdown","ComboboxGroup"],styles:["Combobox"],description:"Create custom select, autocomplete or multiselect inputs",import:"import { Combobox } from '@mantine/core';",source:"@mantine/core/src/components/Combobox/Combobox.tsx",docs:"core/combobox.mdx"},Modal:{title:"Modal",package:"@mantine/core",slug:"/core/modal",props:["Modal"],styles:["Modal"],description:"An accessible overlay dialog",import:"import { Modal } from '@mantine/core';",source:"@mantine/core/src/components/Modal/Modal.tsx",docs:"core/modal.mdx"},Drawer:{title:"Drawer",package:"@mantine/core",slug:"/core/drawer",props:["Drawer"],styles:["Drawer"],description:"Display overlay area at any side of the screen",import:"import { Drawer } from '@mantine/core';",source:"@mantine/core/src/components/Drawer/Drawer.tsx",docs:"core/drawer.mdx"},Accordion:{title:"Accordion",package:"@mantine/core",slug:"/core/accordion",props:["Accordion","AccordionItem","AccordionControl"],styles:["Accordion"],componentPrefix:"Accordion",description:"Divide content into collapsible sections",import:"import { Accordion } from '@mantine/core';",source:"@mantine/core/src/components/Accordion/Accordion.tsx",docs:"core/accordion.mdx"},Pill:{title:"Pill",package:"@mantine/core",slug:"/core/pill",props:["Pill","PillGroup"],styles:["Pill","PillGroup"],description:"Removable and non-removable tags",import:"import { Pill } from '@mantine/core';",source:"@mantine/core/src/components/Pill/Pill.tsx",docs:"core/pill.mdx"},PillsInput:{title:"PillsInput",package:"@mantine/core",slug:"/core/pills-input",props:["PillsInput","PillsInputField"],styles:["PillsInput","PillsInputField"],description:"Base component for custom tags inputs and multi selects",import:"import { PillsInput } from '@mantine/core';",source:"@mantine/core/src/components/PillsInput/PillsInput.tsx",docs:"core/pills-input.mdx"},Autocomplete:{title:"Autocomplete",package:"@mantine/core",slug:"/core/autocomplete",props:["Autocomplete"],styles:["Autocomplete"],description:"Autocomplete user input with any list of options",import:"import { Autocomplete } from '@mantine/core';",source:"@mantine/core/src/components/Autocomplete/Autocomplete.tsx",docs:"core/autocomplete.mdx"},TagsInput:{title:"TagsInput",package:"@mantine/core",slug:"/core/tags-input",props:["TagsInput"],styles:["TagsInput"],description:"Capture a list of values from user with free input and suggestions",import:"import { TagsInput } from '@mantine/core';",source:"@mantine/core/src/components/TagsInput/TagsInput.tsx",docs:"core/tags-input.mdx"},Select:{title:"Select",package:"@mantine/core",slug:"/core/select",props:["Select"],styles:["Select"],description:"Custom searchable select",import:"import { Select } from '@mantine/core';",source:"@mantine/core/src/components/Select/Select.tsx",docs:"core/select.mdx"},MultiSelect:{title:"MultiSelect",package:"@mantine/core",slug:"/core/multi-select",props:["MultiSelect"],styles:["MultiSelect"],description:"Custom searchable multi select",import:"import { MultiSelect } from '@mantine/core';",source:"@mantine/core/src/components/MultiSelect/MultiSelect.tsx",docs:"core/multi-select.mdx"},Pagination:{title:"Pagination",package:"@mantine/core",slug:"/core/pagination",componentPrefix:"Pagination",props:["Pagination","PaginationRoot","PaginationFirst","PaginationLast","PaginationNext","PaginationPrevious","PaginationItems","PaginationDots","PaginationControl"],styles:["Pagination"],description:"Display active page and navigate between multiple pages",import:"import { Pagination } from '@mantine/core';",source:"@mantine/core/src/components/Pagination/Pagination.tsx",docs:"core/pagination.mdx"},AppShell:{title:"AppShell",package:"@mantine/core",slug:"/core/app-shell",props:["AppShell","AppShellNavbar","AppShellHeader","AppShellAside","AppShellFooter"],styles:["AppShell"],componentPrefix:"AppShell",description:"Responsive shell for your application with header, navbar, aside and footer",import:"import { AppShell } from '@mantine/core';",source:"@mantine/core/src/components/AppShell/AppShell.tsx",docs:"core/app-shell.mdx"},Skeleton:{title:"Skeleton",package:"@mantine/core",slug:"/core/skeleton",props:["Skeleton"],styles:["Skeleton"],description:"Indicate content loading state",import:"import { Skeleton } from '@mantine/core';",source:"@mantine/core/src/components/Skeleton/Skeleton.tsx",docs:"core/skeleton.mdx"},SimpleGrid:{title:"SimpleGrid",package:"@mantine/core",slug:"/core/simple-grid",props:["SimpleGrid"],styles:["SimpleGrid"],description:"Responsive grid in which each item takes equal amount of space",import:"import { SimpleGrid } from '@mantine/core';",source:"@mantine/core/src/components/SimpleGrid/SimpleGrid.tsx",docs:"core/simple-grid.mdx"},Grid:{title:"Grid",package:"@mantine/core",slug:"/core/grid",props:["Grid","GridCol"],styles:["Grid"],componentPrefix:"Grid",description:"Responsive 12 columns grid system",import:"import { Grid } from '@mantine/core';",source:"@mantine/core/src/components/Grid/Grid.tsx",docs:"core/grid.mdx"},HoverCard:{title:"HoverCard",package:"@mantine/core",slug:"/core/hover-card",props:["HoverCard","HoverCardTarget"],styles:["HoverCard"],componentPrefix:"HoverCard",description:"Display popover section when target element is hovered",import:"import { HoverCard } from '@mantine/core';",source:"@mantine/core/src/components/HoverCard/HoverCard.tsx",docs:"core/hover-card.mdx"},Menu:{title:"Menu",package:"@mantine/core",slug:"/core/menu",props:["Menu","MenuTarget","MenuItem"],styles:["Menu"],componentPrefix:"Menu",description:"Combine a list of secondary actions into single interactive area",import:"import { Menu } from '@mantine/core';",source:"@mantine/core/src/components/Menu/Menu.tsx",docs:"core/menu.mdx"},Progress:{title:"Progress",package:"@mantine/core",slug:"/core/progress",props:["Progress","ProgressRoot","ProgressSection"],styles:["Progress"],componentPrefix:"Progress",description:"Give user feedback for status of the task",import:"import { Progress } from '@mantine/core';",source:"@mantine/core/src/components/Progress/Progress.tsx",docs:"core/progress.mdx"},RingProgress:{title:"RingProgress",package:"@mantine/core",slug:"/core/ring-progress",props:["RingProgress"],styles:["RingProgress"],description:"Give user feedback for status of the task with circle diagram",import:"import { RingProgress } from '@mantine/core';",source:"@mantine/core/src/components/RingProgress/RingProgress.tsx",docs:"core/ring-progress.mdx"},Chip:{title:"Chip",package:"@mantine/core",slug:"/core/chip",props:["Chip","ChipGroup"],styles:["Chip"],componentPrefix:"Chip",description:"Pick one or multiple values with inline controls",import:"import { Chip } from '@mantine/core';",source:"@mantine/core/src/components/Chip/Chip.tsx",docs:"core/chip.mdx"},PinInput:{title:"PinInput",package:"@mantine/core",slug:"/core/pin-input",props:["PinInput"],styles:["PinInput"],description:"Capture pin code or one time password from the user",import:"import { PinInput } from '@mantine/core';",source:"@mantine/core/src/components/PinInput/PinInput.tsx",docs:"core/pin-input.mdx"},Rating:{title:"Rating",package:"@mantine/core",slug:"/core/rating",props:["Rating"],styles:["Rating"],description:"Pick and display rating",import:"import { Rating } from '@mantine/core';",source:"@mantine/core/src/components/Rating/Rating.tsx",docs:"core/rating.mdx"},Space:{title:"Space",package:"@mantine/core",slug:"/core/space",description:"Add horizontal or vertical spacing from theme",import:"import { Space } from '@mantine/core';",source:"@mantine/core/src/components/Space/Space.tsx",docs:"core/space.mdx"},Indicator:{title:"Indicator",package:"@mantine/core",slug:"/core/indicator",props:["Indicator"],styles:["Indicator"],description:"Display element at the corner of another element",import:"import { Indicator } from '@mantine/core';",source:"@mantine/core/src/components/Indicator/Indicator.tsx",docs:"core/indicator.mdx"},Textarea:{title:"Textarea",package:"@mantine/core",slug:"/core/textarea",props:["Textarea"],styles:["Textarea"],description:"Autosize or regular textarea",import:"import { Textarea } from '@mantine/core';",source:"@mantine/core/src/components/Textarea/Textarea.tsx",docs:"core/textarea.mdx"},JsonInput:{title:"JsonInput",package:"@mantine/core",slug:"/core/json-input",props:["JsonInput"],styles:["JsonInput"],description:"Capture json data from user",import:"import { JsonInput } from '@mantine/core';",source:"@mantine/core/src/components/JsonInput/JsonInput.tsx",docs:"core/json-input.mdx"},Image:{title:"Image",package:"@mantine/core",slug:"/core/image",props:["Image"],styles:["Image"],polymorphic:!0,description:"Image with optional fallback",import:"import { Image } from '@mantine/core';",source:"@mantine/core/src/components/Image/Image.tsx",docs:"core/image.mdx"},Card:{title:"Card",package:"@mantine/core",slug:"/core/card",props:["Card","CardSection"],styles:["Card"],componentPrefix:"Card",description:"Card with sections",import:"import { Card } from '@mantine/core';",source:"@mantine/core/src/components/Card/Card.tsx",docs:"core/card.mdx"},PasswordInput:{title:"PasswordInput",package:"@mantine/core",slug:"/core/password-input",props:["PasswordInput"],styles:["PasswordInput"],description:"Capture password data from user",import:"import { PasswordInput } from '@mantine/core';",source:"@mantine/core/src/components/PasswordInput/PasswordInput.tsx",docs:"core/password-input.mdx"},FileInput:{title:"FileInput",package:"@mantine/core",slug:"/core/file-input",props:["FileInput"],styles:["FileInput"],description:"Capture files from user",import:"import { FileInput } from '@mantine/core';",source:"@mantine/core/src/components/FileInput/FileInput.tsx",docs:"core/file-input.mdx"},Stepper:{title:"Stepper",package:"@mantine/core",slug:"/core/stepper",props:["Stepper","StepperStep"],styles:["Stepper"],componentPrefix:"Stepper",description:"Display content divided into a steps sequence",import:"import { Stepper } from '@mantine/core';",source:"@mantine/core/src/components/Stepper/Stepper.tsx",docs:"core/stepper.mdx"},ColorInput:{title:"ColorInput",package:"@mantine/core",slug:"/core/color-input",props:["ColorInput"],styles:["ColorInput"],description:"Capture color from user",import:"import { ColorInput } from '@mantine/core';",source:"@mantine/core/src/components/ColorInput/ColorInput.tsx",docs:"core/color-input.mdx"},ThemeIcon:{title:"ThemeIcon",package:"@mantine/core",slug:"/core/theme-icon",props:["ThemeIcon"],styles:["ThemeIcon"],description:"Render icon inside element with theme colors",import:"import { ThemeIcon } from '@mantine/core';",source:"@mantine/core/src/components/ThemeIcon/ThemeIcon.tsx",docs:"core/theme-icon.mdx"},NumberInput:{title:"NumberInput",package:"@mantine/core",slug:"/core/number-input",props:["NumberInput"],styles:["NumberInput"],description:"Capture number from user",import:"import { NumberInput } from '@mantine/core';",source:"@mantine/core/src/components/NumberInput/NumberInput.tsx",docs:"core/number-input.mdx"},LoadingOverlay:{title:"LoadingOverlay",package:"@mantine/core",slug:"/core/loading-overlay",props:["LoadingOverlay"],styles:["LoadingOverlay"],description:"An overlay with centered loader",import:"import { LoadingOverlay } from '@mantine/core';",source:"@mantine/core/src/components/LoadingOverlay/LoadingOverlay.tsx",docs:"core/loading-overlay.mdx"},Radio:{title:"Radio",package:"@mantine/core",slug:"/core/radio",componentPrefix:"Radio",props:["Radio","RadioGroup"],styles:["Radio","RadioGroup"],description:"Wrapper for input type radio",import:"import { Radio } from '@mantine/core';",source:"@mantine/core/src/components/Radio/Radio.tsx",docs:"core/radio.mdx"},Timeline:{title:"Timeline",package:"@mantine/core",slug:"/core/timeline",componentPrefix:"Timeline",props:["Timeline","TimelineItem"],styles:["Timeline"],description:"Display list of events in chronological order",import:"import { Timeline } from '@mantine/core';",source:"@mantine/core/src/components/Timeline/Timeline.tsx",docs:"core/timeline.mdx"},Dialog:{title:"Dialog",package:"@mantine/core",slug:"/core/dialog",props:["Dialog"],styles:["Dialog"],description:"Display a fixed overlay dialog at any side of the screen",import:"import { Dialog } from '@mantine/core';",source:"@mantine/core/src/components/Dialog/Dialog.tsx",docs:"core/dialog.mdx"},Flex:{title:"Flex",package:"@mantine/core",slug:"/core/flex",props:["Flex"],styles:["Flex"],polymorphic:!0,description:"Compose elements in a flex container",import:"import { Flex } from '@mantine/core';",source:"@mantine/core/src/components/Flex/Flex.tsx",docs:"core/flex.mdx"},List:{title:"List",package:"@mantine/core",slug:"/core/list",componentPrefix:"List",props:["List","ListItem"],styles:["List"],description:"Display ordered or unordered list",import:"import { List } from '@mantine/core';",source:"@mantine/core/src/components/List/List.tsx",docs:"core/list.mdx"},Spoiler:{title:"Spoiler",package:"@mantine/core",slug:"/core/spoiler",props:["Spoiler"],styles:["Spoiler"],description:"Hide long sections of content under a spoiler",import:"import { Spoiler } from '@mantine/core';",source:"@mantine/core/src/components/Spoiler/Spoiler.tsx",docs:"core/spoiler.mdx"},NavLink:{title:"NavLink",package:"@mantine/core",slug:"/core/nav-link",props:["NavLink"],styles:["NavLink"],description:"Navigation link",polymorphic:!0,import:"import { NavLink } from '@mantine/core';",source:"@mantine/core/src/components/NavLink/NavLink.tsx",docs:"core/nav-link.mdx"},NumberFormatter:{title:"NumberFormatter",package:"@mantine/core",slug:"/core/number-formatter",props:["NumberFormatter"],description:"Format number with thousands/decimal separators and suffix/prefix",import:"import { NumberFormatter } from '@mantine/core';",source:"@mantine/core/src/components/NumberFormatter/NumberFormatter.tsx",docs:"core/number-formatter.mdx"},...i,Notifications:{title:"Notifications system",package:"@mantine/notifications",slug:"/x/notifications",props:["Notifications"],styles:["Notifications"],description:"Mantine notifications system",source:"@mantine/notifications/src",license:"MIT",docs:"x/notifications.mdx"},Spotlight:{title:"Spotlight",package:"@mantine/spotlight",slug:"/x/spotlight",props:["Spotlight","SpotlightRoot","SpotlightAction","SpotlightActionsGroup","SpotlightSearch"],styles:["Spotlight"],description:"Command center for your application",source:"@mantine/spotlight/src",license:"MIT",docs:"x/spotlight.mdx"},Carousel:{title:"Carousel",package:"@mantine/carousel",slug:"/x/carousel",props:["Carousel"],styles:["Carousel"],description:"Embla based carousel component",source:"@mantine/carousel/src",license:"MIT",docs:"x/carousel.mdx"},Dropzone:{title:"Dropzone",package:"@mantine/dropzone",slug:"/x/dropzone",props:["Dropzone"],styles:["Dropzone"],description:"Capture files from user with drag and drop",source:"@mantine/dropzone/src",license:"MIT",docs:"x/dropzone.mdx"},Nprogress:{title:"NavigationProgress",package:"@mantine/nprogress",slug:"/x/nprogress",props:["NavigationProgress"],description:"Navigation progress bar",source:"@mantine/nprogress/src",license:"MIT",docs:"x/nprogress.mdx"},CodeHighlight:{title:"CodeHighlight",package:"@mantine/code-highlight",slug:"/x/code-highlight",props:["CodeHighlight","CodeHighlightTabs","InlineCodeHighlight"],styles:["CodeHighlight","CodeHighlightTabs","InlineCodeHighlight"],description:"Highlight code with highlight.js",source:"@mantine/code-highlight/src",license:"MIT",docs:"x/code-highlight.mdx"},Modals:{title:"Modals manager",package:"@mantine/modals",slug:"/x/modals",props:["ModalsProvider"],description:"Centralized modals manager with option to handle state of multi-step modals",source:"@mantine/modals/src",license:"MIT",docs:"x/modals.mdx"},TipTap:{title:"Rich text editor",package:"@mantine/tiptap",slug:"/x/tiptap",props:["RichTextEditor"],styles:["RichTextEditor"],description:"Tiptap based rich text editor",source:"@mantine/tiptap/src",license:"MIT",docs:"x/tiptap.mdx"},useForm:{title:"use-form",package:"@mantine/form",slug:"/form/use-form",description:"Manage form state",source:"@mantine/form/src",license:"MIT",docs:"form/use-form.mdx"},createFormContext:{title:"Form context",package:"@mantine/form",slug:"/form/create-form-context",description:"Add context support to use-form with createFormContext",docs:"form/use-form.mdx"},formErrors:{title:"Form errors",package:"@mantine/form",slug:"/form/errors",description:"Manipulate form errors with use-form hook",docs:"form/errors.mdx"},formNested:{title:"Nested fields",package:"@mantine/form",slug:"/form/nested",description:"Manage nested arrays and object state with use-form hook",docs:"form/nested.mdx"},formRecipes:{title:"Recipes",package:"@mantine/form",slug:"/form/recipes",description:"use-form examples",docs:"form/recipes.mdx"},formStatus:{title:"Touched & dirty",package:"@mantine/form",slug:"/form/status",description:"Get fields and form touched and dirty status",docs:"form/status.mdx"},formValidation:{title:"Form validation",package:"@mantine/form",slug:"/form/validation",description:"Validate fields with use-form hook",docs:"form/validation.mdx"},formSchemaValidation:{title:"Form schema validation",package:"@mantine/form",slug:"/form/schema-validation",description:"use-form schema based validation with zod, yup, joi and superstruct",docs:"form/schema-validation.mdx"},formValidators:{title:"Form validators",package:"@mantine/form",slug:"/form/validators",description:"Premade validation functions",docs:"form/validators.mdx"},formValues:{title:"Form values",package:"@mantine/form",slug:"/form/values",description:"Manipulate form values with use-form",docs:"form/values.mdx"},formActions:{title:"Form actions",package:"@mantine/form",slug:"/form/actions",description:"Change form state from anywhere in the application",docs:"form/actions.mdx"},formGetInputProps:{title:"getInputProps",package:"@mantine/form",slug:"/form/get-input-props",description:"A handler to get input props for any field in the form",docs:"form/get-input-props.mdx"},GettingStartedDates:{title:"Getting started",description:"Get started with @mantine/dates package",package:"@mantine/dates",license:"MIT",slug:"/dates/getting-started",docs:"dates/getting-started.mdx",hideInSearch:!0},Calendar:{title:"Calendar",package:"@mantine/dates",slug:"/dates/calendar",description:"Base component for custom date pickers",props:["Calendar"],styles:["Calendar"],import:"import { Calendar } from '@mantine/dates';",source:"@mantine/dates/src/components/Calendar/Calendar.tsx",docs:"dates/calendar.mdx"},DateInput:{title:"DateInput",package:"@mantine/dates",slug:"/dates/date-input",description:"Free form date input",props:["DateInput"],styles:["DateInput"],import:"import { DateInput } from '@mantine/dates';",source:"@mantine/dates/src/components/DateInput/DateInput.tsx",docs:"dates/date-input.mdx"},DatePicker:{title:"DatePicker",package:"@mantine/dates",slug:"/dates/date-picker",description:"Inline date, multiple dates and dates range picker",props:["DatePicker"],styles:["DatePicker"],import:"import { DatePicker } from '@mantine/dates';",source:"@mantine/dates/src/components/DatePicker/DatePicker.tsx",docs:"dates/date-picker.mdx"},DatePickerInput:{title:"DatePickerInput",package:"@mantine/dates",slug:"/dates/date-picker-input",description:"Date, multiple dates and dates range picker input",props:["DatePickerInput"],styles:["DatePickerInput"],import:"import { DatePickerInput } from '@mantine/dates';",source:"@mantine/dates/src/components/DatePickerInput/DatePickerInput.tsx",docs:"dates/date-picker-input.mdx"},DatesProvider:{title:"DatesProvider",package:"@mantine/dates",slug:"/dates/dates-provider",description:"Settings provider for @mantine/dates components",import:"import { DatesProvider } from '@mantine/dates';",source:"@mantine/dates/src/components/DatesProvider/DatesProvider.tsx",docs:"dates/dates-provider.mdx"},DateTimePicker:{title:"DateTimePicker",package:"@mantine/dates",slug:"/dates/date-time-picker",props:["DateTimePicker"],styles:["DateTimePicker"],description:"Capture datetime from the user",import:"import { DateTimePicker } from '@mantine/dates';",source:"@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx",docs:"dates/date-time-picker.mdx"},MonthPicker:{title:"MonthPicker",package:"@mantine/dates",slug:"/dates/month-picker",props:["MonthPicker"],styles:["MonthPicker"],description:"Inline month, multiple months and months range picker",import:"import { MonthPicker } from '@mantine/dates';",source:"@mantine/dates/src/components/MonthPicker/MonthPicker.tsx",docs:"dates/month-picker.mdx"},MonthPickerInput:{title:"MonthPickerInput",package:"@mantine/dates",slug:"/dates/month-picker-input",props:["MonthPickerInput"],styles:["MonthPickerInput"],description:"Month, multiple months and months range picker input",import:"import { MonthPickerInput } from '@mantine/dates';",source:"@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.tsx",docs:"dates/month-picker-input.mdx"},TimeInput:{title:"TimeInput",package:"@mantine/dates",slug:"/dates/time-input",props:["TimeInput"],styles:["TimeInput"],description:"Capture time from the user",import:"import { TimeInput } from '@mantine/dates';",source:"@mantine/dates/src/components/TimeInput/TimeInput.tsx",docs:"dates/time-input.mdx"},YearPicker:{title:"YearPicker",package:"@mantine/dates",slug:"/dates/year-picker",props:["YearPicker"],styles:["YearPicker"],description:"Inline year, multiple years and years range picker",import:"import { YearPicker } from '@mantine/dates';",source:"@mantine/dates/src/components/YearPicker/YearPicker.tsx",docs:"dates/year-picker.mdx"},YearPickerInput:{title:"YearPickerInput",package:"@mantine/dates",slug:"/dates/year-picker-input",props:["YearPickerInput"],styles:["YearPickerInput"],description:"Inline year, multiple years and years range picker",import:"import { YearPickerInput } from '@mantine/dates';",source:"@mantine/dates/src/components/YearPickerInput/YearPickerInput.tsx",docs:"dates/year-picker-input.mdx"},GettingStartedCharts:{title:"Getting started",description:"Get started with @mantine/charts package",package:"@mantine/charts",license:"MIT",slug:"/charts/getting-started",docs:"charts/getting-started.mdx",hideInSearch:!0},AreaChart:{title:"AreaChart",props:["AreaChart"],styles:["AreaChart"],package:"@mantine/charts",slug:"/charts/area-chart",description:"Area chart component with stacked, percent and split variants",import:"import { AreaChart } from '@mantine/charts';",source:"@mantine/charts/src/AreaChart/AreaChart.tsx",docs:"charts/area-chart.mdx"},BarChart:{title:"BarChart",props:["BarChart"],styles:["BarChart"],package:"@mantine/charts",slug:"/charts/bar-chart",description:"Bar chart component with stacked and percent variants",import:"import { BarChart } from '@mantine/charts';",source:"@mantine/charts/src/BarChart/BarChart.tsx",docs:"charts/bar-chart.mdx"},LineChart:{title:"LineChart",props:["LineChart"],styles:["LineChart"],package:"@mantine/charts",slug:"/charts/line-chart",description:"Line chart component",import:"import { LineChart } from '@mantine/charts';",source:"@mantine/charts/src/LineChart/LineChart.tsx",docs:"charts/line-chart.mdx"},Sparkline:{title:"Sparkline",props:["Sparkline"],styles:["Sparkline"],package:"@mantine/charts",slug:"/charts/sparkline",description:"Simplified area chart to show trends",import:"import { Sparkline } from '@mantine/charts';",source:"@mantine/charts/src/Sparkline/Sparkline.tsx",docs:"charts/sparkline.mdx"},DonutChart:{title:"DonutChart",props:["DonutChart"],styles:["DonutChart"],package:"@mantine/charts",slug:"/charts/donut-chart",description:"Donut chart component",import:"import { DonutChart } from '@mantine/charts';",source:"@mantine/charts/src/DonutChart/DonutChart.tsx",docs:"charts/donut-chart.mdx"},PieChart:{title:"PieChart",props:["PieChart"],styles:["PieChart"],package:"@mantine/charts",slug:"/charts/pie-chart",description:"Pie chart component",import:"import { PieChart } from '@mantine/charts';",source:"@mantine/charts/src/PieChart/PieChart.tsx",docs:"charts/pie-chart.mdx"}},c=[{group:"theming",pages:[a.MantineProvider,a.ThemeObject,a.Colors,a.ColorSchemes,a.Typography,a.DefaultProps]},{group:"styles",pages:[a.StylesOverview,a.MantineStyles,a.CSSFilesList,a.CSSModules,a.PostCSSPreset,a.UsageWithSass,a.VanillaExtract,a.GlobalStyles,a.CssVariables,a.CSSVariablesList,a.Rem,a.StyleProp,a.ResponsiveStyles,a.StylesApi,a.DataAttributes,a.VariantsAndSizes,a.UnstyledComponents,a.StyleProps,a.ColorFunctions,a.Rtl,a.StylesPerformance]},{group:"guides",pages:[a.Polymorphic,a.Icons,a.NextJs,a.Vite,a.Remix,a.Gatsby,a.Redwood,a.Storybook,a.TypeScript,a.JavaScript,a.Jest,a.Vitest,a.FunctionsReference,a.SixToSeven]},{group:"mantine-hooks",pages:[{category:"UI and Dom",pages:[a.useClickOutside,a.useColorScheme,a.useElementSize,a.useEventListener,a.useFocusReturn,a.useFocusTrap,a.useFocusWithin,a.useFullscreen,a.useHotkeys,a.useHover,a.useIntersection,a.useMediaQuery,a.useMouse,a.useMove,a.useReducedMotion,a.useResizeObserver,a.useScrollIntoView,a.useViewportSize,a.useWindowEvent,a.useWindowScroll,a.useInViewport]},{category:"State management",pages:[a.useCounter,a.useDebouncedState,a.useDebouncedValue,a.useDisclosure,a.useId,a.useInputState,a.useListState,a.useLocalStorage,a.usePrevious,a.useQueue,a.useSetState,a.useToggle,a.useUncontrolled,a.useValidatedState,a.usePagination]},{category:"Utilities",pages:[a.useClipboard,a.useDocumentTitle,a.useDocumentVisibility,a.useEyeDropper,a.useFavicon,a.useHash,a.useHeadroom,a.useIdle,a.useInterval,a.useMergedRef,a.useNetwork,a.useOs,a.usePageLeave,a.useTextSelection,a.useTimeout]},{category:"Lifecycle",pages:[a.useDidUpdate,a.useForceUpdate,a.useIsomorphicEffect,a.useLogger,a.useShallowEffect]}]},{group:"mantine-form",pages:[a.useForm,a.formValues,a.formGetInputProps,a.formErrors,a.formValidation,a.formSchemaValidation,a.formValidators,a.formNested,a.formStatus,a.createFormContext,a.formActions,a.formRecipes]},{group:"mantine-core",pages:[{category:"layout",pages:[a.Container,a.Center,a.Group,a.Stack,a.AspectRatio,a.AppShell,a.SimpleGrid,a.Grid,a.Space,a.Flex]},{category:"inputs",pages:[a.Input,a.ColorPicker,a.NativeSelect,a.SegmentedControl,a.Slider,a.Switch,a.TextInput,a.Checkbox,a.Radio,a.Fieldset,a.PinInput,a.Chip,a.Rating,a.Textarea,a.JsonInput,a.PasswordInput,a.FileInput,a.ColorInput,a.NumberInput]},{category:"combobox",pages:[a.Combobox,a.Pill,a.PillsInput,a.Autocomplete,a.TagsInput,a.Select,a.MultiSelect]},{category:"buttons",pages:[a.ActionIcon,a.Button,a.CloseButton,a.CopyButton,a.FileButton,a.UnstyledButton]},{category:"navigation",pages:[a.Anchor,a.Tabs,a.Breadcrumbs,a.Burger,a.Pagination,a.Stepper,a.NavLink]},{category:"feedback",pages:[a.Loader,a.Alert,a.Notification,a.Skeleton,a.Progress,a.RingProgress]},{category:"overlays",pages:[a.Popover,a.Tooltip,a.Overlay,a.Affix,a.Modal,a.Drawer,a.HoverCard,a.Menu,a.LoadingOverlay,a.Dialog]},{category:"Data display",pages:[a.BackgroundImage,a.ColorSwatch,a.Kbd,a.Badge,a.Avatar,a.Accordion,a.Indicator,a.Card,a.Image,a.ThemeIcon,a.Timeline,a.Spoiler,a.NumberFormatter]},{category:"typography",pages:[a.Blockquote,a.Code,a.Highlight,a.Mark,a.Table,a.Text,a.Title,a.TypographyStylesProvider,a.List]},{category:"misc",pages:[a.Collapse,a.FocusTrap,a.Paper,a.Portal,a.ScrollArea,a.Transition,a.VisuallyHidden,a.Divider,a.Box]}]},{group:"mantine-dates",pages:[a.GettingStartedDates,a.DatesProvider,a.Calendar,a.DateInput,a.DateTimePicker,a.DatePicker,a.DatePickerInput,a.MonthPicker,a.MonthPickerInput,a.YearPicker,a.YearPickerInput,a.TimeInput]},{group:"mantine-charts",pages:[a.GettingStartedCharts,a.AreaChart,a.BarChart,a.LineChart,a.DonutChart,a.PieChart,a.Sparkline]},{group:"extensions",pages:[a.CodeHighlight,a.Notifications,a.Spotlight,a.Carousel,a.Dropzone,a.Nprogress,a.Modals,a.TipTap]},{group:"changelog",pages:[a.Changelog750,a.Changelog740,a.Changelog730,a.Changelog720,a.Changelog710,a.Changelog700,a.AllReleases]}],s=c.reduce((e,t)=>(t.pages.forEach(t=>{if(t.category){let n=[...t.pages];n.sort((e,t)=>e.title.localeCompare(t.title)),e.push(...n)}else e.push(t)}),e),[]),l=[...s,...Object.keys(r).map(e=>r[e]),{title:"Combobox examples",slug:"/combobox/?e=BasicSelect",search:"50+ examples of Combobox usage"},{title:"AppShell examples",slug:"/app-shell/?e=BasicAppShell",search:"10+ examples of AppShell usage"}].reduce((e,t)=>(e.some(e=>e.slug===t.slug)||e.push(t),e),[])},1347:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return eB}});var r=n(24246);n(30781),n(72129),n(80684),n(61140),n(6051),n(22719),n(26324),n(21574),n(54457),n(57346),n(28631),n(7391),n(61671),n(29975),n(40750);var o=n(27378),i=n(88038),a=n.n(i),c=n(49134),s=n(50221),l=n(2488),u=n(69142);function d(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,p(e,t)}n(23615);var f=n(31542),g={disabled:!1},h=o.createContext(null),y="unmounted",v="exited",b="entering",k="entered",x="exiting",w=function(e){function t(t,n){r=e.call(this,t,n)||this;var r,o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o=v,r.appearStatus=b):o=k:o=t.unmountOnExit||t.mountOnEnter?y:v,r.state={status:o},r.nextCallback=null,r}m(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&t.status===y?{status:v}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==b&&n!==k&&(t=b):(n===b||n===k)&&(t=x)}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){if(this.cancelNextCallback(),t===b){if(this.props.unmountOnExit||this.props.mountOnEnter){var n=this.props.nodeRef?this.props.nodeRef.current:f.findDOMNode(this);n&&n.scrollTop}this.performEnter(e)}else this.performExit()}else this.props.unmountOnExit&&this.state.status===v&&this.setState({status:y})},n.performEnter=function(e){var t=this,n=this.props.enter,r=this.context?this.context.isMounting:e,o=this.props.nodeRef?[r]:[f.findDOMNode(this),r],i=o[0],a=o[1],c=this.getTimeouts(),s=r?c.appear:c.enter;if(!e&&!n||g.disabled){this.safeSetState({status:k},function(){t.props.onEntered(i)});return}this.props.onEnter(i,a),this.safeSetState({status:b},function(){t.props.onEntering(i,a),t.onTransitionEnd(s,function(){t.safeSetState({status:k},function(){t.props.onEntered(i,a)})})})},n.performExit=function(){var e=this,t=this.props.exit,n=this.getTimeouts(),r=this.props.nodeRef?void 0:f.findDOMNode(this);if(!t||g.disabled){this.safeSetState({status:v},function(){e.props.onExited(r)});return}this.props.onExit(r),this.safeSetState({status:x},function(){e.props.onExiting(r),e.onTransitionEnd(n.exit,function(){e.safeSetState({status:v},function(){e.props.onExited(r)})})})},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t){this.setNextCallback(t);var n=this.props.nodeRef?this.props.nodeRef.current:f.findDOMNode(this),r=null==e&&!this.props.addEndListener;if(!n||r){setTimeout(this.nextCallback,0);return}if(this.props.addEndListener){var o=this.props.nodeRef?[this.nextCallback]:[n,this.nextCallback],i=o[0],a=o[1];this.props.addEndListener(i,a)}null!=e&&setTimeout(this.nextCallback,e)},n.render=function(){var e=this.state.status;if(e===y)return null;var t=this.props,n=t.children,r=(t.in,t.mountOnEnter,t.unmountOnExit,t.appear,t.enter,t.exit,t.timeout,t.addEndListener,t.onEnter,t.onEntering,t.onEntered,t.onExit,t.onExiting,t.onExited,t.nodeRef,d(t,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]));return o.createElement(h.Provider,{value:null},"function"==typeof n?n(e,r):o.cloneElement(o.Children.only(n),r))},t}(o.Component);function E(){}function C(){return(C=Object.assign||function(e){for(var t=1;t{var a;let{autoClose:c,message:s,...l}=e,u="number"==typeof(a=e.autoClose)?a:!1!==a&&!1!==n&&n,d=(0,o.useRef)(),p=()=>window.clearTimeout(d.current),m=()=>{t(e.id),p()},f=()=>{"number"==typeof u&&(d.current=window.setTimeout(m,u))};return(0,o.useEffect)(()=>{e.onOpen?.(e)},[]),(0,o.useEffect)(()=>(f(),p),[u]),o.createElement(Notification.P,{...r,...l,onClose:m,ref:i,onMouseEnter:p,onMouseLeave:f},s)});V.displayName="@mantine/notifications/NotificationContainer";var Z=n(59269),G={root:"m-b37d9ac7",notification:"m-5ed0edd0"};let W={position:"bottom-right",autoClose:4e3,transitionDuration:250,containerWidth:440,notificationMaxHeight:200,limit:5,zIndex:(0,I.w)("overlay"),store:Z.Ps,withinPortal:!0},q=(0,M.Z)((e,{zIndex:t,position:n,containerWidth:r})=>{let[o,i]=n.split("-");return{root:{"--notifications-z-index":t?.toString(),"--notifications-top":"top"===o?"var(--mantine-spacing-md)":void 0,"--notifications-bottom":"bottom"===o?"var(--mantine-spacing-md)":void 0,"--notifications-left":"left"===i?"var(--mantine-spacing-md)":"center"===i?"50%":void 0,"--notifications-right":"right"===i?"var(--mantine-spacing-md)":void 0,"--notifications-transform":"center"===i?"translateX(-50%)":void 0,"--notifications-container-width":(0,D.h)(r)}}}),Y=(0,T.d)((e,t)=>{let n=(0,A.w)("Notifications",W,e),{classNames:r,className:i,style:a,styles:c,unstyled:s,vars:l,position:u,autoClose:d,transitionDuration:p,containerWidth:m,notificationMaxHeight:f,limit:g,zIndex:h,store:y,portalProps:v,withinPortal:b,...k}=n,x=(0,P.rZ)(),E=(0,Z.zn)(y),C=(0,H.N)(),F=(0,$.J)(),S=(0,o.useRef)({}),B=(0,o.useRef)(0),I=!!x.respectReducedMotion&&F,M=I?1:p,D=(0,R.y)({name:"Notifications",classes:G,props:n,className:i,style:a,classNames:r,styles:c,unstyled:s,vars:l,varsResolver:q});(0,o.useEffect)(()=>{y?.updateState(e=>({...e,limit:g||5}))},[g]),(0,O.l)(()=>{E.notifications.length>B.current&&setTimeout(()=>C(),0),B.current=E.notifications.length},[E.notifications]);let T=E.notifications.map(({style:e,...t})=>o.createElement(w,{key:t.id,timeout:M,onEnter:()=>S.current[t.id].offsetHeight,nodeRef:{current:S.current[t.id]}},n=>o.createElement(V,{ref:e=>{S.current[t.id]=e},data:t,onHide:e=>(0,Z.yK)(e,y),autoClose:d,...D("notification",{style:{...function({state:e,maxHeight:t,position:n,transitionDuration:r}){let[o,i]=n.split("-"),a="center"===i?`${o}-center`:i,c={opacity:0,maxHeight:t,transform:z[a],transitionDuration:`${r}ms, ${r}ms, ${r}ms`,transitionTimingFunction:"cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",transitionProperty:"opacity, transform, max-height"},s={opacity:1,transform:_[a]},l={opacity:0,maxHeight:0,transform:z[a]};return{...c,...{entering:s,entered:s,exiting:l,exited:l}[e]}}({state:n,position:u,transitionDuration:M,maxHeight:f}),...e}})})));return o.createElement(N.q,{withinPortal:b,...v},o.createElement(L.x,{...D("root"),ref:t,...k},o.createElement(j,null,T)))});Y.classes=G,Y.displayName="@mantine/notifications/Notifications",Y.show=Z.N9.show,Y.hide=Z.N9.hide,Y.update=Z.N9.update,Y.clean=Z.N9.clean,Y.cleanQueue=Z.N9.cleanQueue,Y.updateState=Z.N9.updateState;var U=n(36572),K=n(43218),X=n.n(K);function J(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(X(),{strategy:"afterInteractive",src:"https://www.googletagmanager.com/gtag/js?id=G-4Z4NNVLRH5"}),(0,r.jsx)(X(),{id:"ga",strategy:"afterInteractive",children:"\nwindow.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\n\ngtag('config', 'G-4Z4NNVLRH5');\n"})]})}var Q=n(86677),ee=n(27650),et=n(35499);let en=["/combobox"];function er(){let e=(0,Q.useRouter)(),{setColorScheme:t}=(0,ee.X)(),{toggleDirection:n}=(0,c.gm)(),o=(0,et.l)("light");return(0,u.A)([["mod + J",()=>t("light"===o?"dark":"light")],["mod + shift + L",()=>!en.includes(e.pathname)&&n()]],[]),(0,r.jsx)(r.Fragment,{children:null})}var eo=n(79388),Text=n(26569),ei=n(8671),ea=n(72120),ec=n(55574),es=n(22971);let el=(0,o.createContext)(null);function eu({id:e,cancelProps:t,confirmProps:n,labels:r={cancel:"",confirm:""},closeOnConfirm:i=!0,closeOnCancel:a=!0,groupProps:c,onCancel:s,onConfirm:l,children:u}){let{cancel:d,confirm:p}=r,m=function(){let e=(0,o.useContext)(el);if(!e)throw Error("[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component");return e}();return o.createElement(o.Fragment,null,u&&o.createElement(L.x,{mb:"md"},u),o.createElement(es.Z,{justify:"flex-end",...c},o.createElement(ei.z,{variant:"default",...t,onClick:n=>{"function"==typeof t?.onClick&&t?.onClick(n),"function"==typeof s&&s(),a&&m.closeModal(e)}},t?.children||d),o.createElement(ei.z,{...n,onClick:t=>{"function"==typeof n?.onClick&&n?.onClick(t),"function"==typeof l&&l(),i&&m.closeModal(e)}},n?.children||p)))}el.displayName="@mantine/modals/ModalsContext";var ed=n(41788);function ep(e,t){t&&"confirm"===e.type&&e.props.onCancel?.(),e.props.onClose?.()}function em(e,t){switch(t.type){case"OPEN":return{current:t.modal,modals:[...e.modals,t.modal]};case"CLOSE":{let n=e.modals.find(e=>e.id===t.modalId);if(!n)return e;ep(n,t.canceled);let r=e.modals.filter(e=>e.id!==t.modalId);return{current:r[r.length-1]||e.current,modals:r}}case"CLOSE_ALL":if(!e.modals.length)return e;return e.modals.concat().reverse().forEach(e=>{ep(e,t.canceled)}),{current:e.current,modals:[]};default:return e}}function ef({children:e,modalProps:t,labels:n,modals:r}){let[i,a]=(0,o.useReducer)(em,{modals:[],current:null}),c=(0,o.useRef)(i);c.current=i;let s=(0,o.useCallback)(e=>{a({type:"CLOSE_ALL",canceled:e})},[c,a]),l=(0,o.useCallback)(({modalId:e,...t})=>{let n=e||(0,ec.k)();return a({type:"OPEN",modal:{id:n,type:"content",props:t}}),n},[a]),u=(0,o.useCallback)(({modalId:e,...t})=>{let n=e||(0,ec.k)();return a({type:"OPEN",modal:{id:n,type:"confirm",props:t}}),n},[a]),d=(0,o.useCallback)((e,{modalId:t,...n})=>{let r=t||(0,ec.k)();return a({type:"OPEN",modal:{id:r,type:"context",props:n,ctx:e}}),r},[a]),p=(0,o.useCallback)((e,t)=>{a({type:"CLOSE",modalId:e,canceled:t})},[c,a]);(0,ed.Ro)({openModal:l,openConfirmModal:u,openContextModal:({modal:e,...t})=>d(e,t),closeModal:p,closeContextModal:p,closeAllModals:s});let m={modals:i.modals,openModal:l,openConfirmModal:u,openContextModal:d,closeModal:p,closeContextModal:p,closeAll:s},{modalProps:f,content:g}=(()=>{let e=c.current.current;switch(e?.type){case"context":{let{innerProps:t,...n}=e.props,i=r[e.ctx];return{modalProps:n,content:o.createElement(i,{innerProps:t,context:m,id:e.id})}}case"confirm":{let{modalProps:t,confirmProps:r}=function(e){if(!e)return{confirmProps:{},modalProps:{}};let{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:c,confirmProps:s,groupProps:l,labels:u,...d}=e;return{confirmProps:{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:c,confirmProps:s,groupProps:l,labels:u},modalProps:{id:t,...d}}}(e.props);return{modalProps:t,content:o.createElement(eu,{...r,id:e.id,labels:e.props.labels||n})}}case"content":{let{children:t,...n}=e.props;return{modalProps:n,content:o.createElement(o.Fragment,null,t)}}default:return{modalProps:{},content:null}}})();return o.createElement(el.Provider,{value:m},o.createElement(ea.u,{zIndex:(0,I.w)("modal")+1,...t,...f,opened:i.modals.length>0,onClose:()=>p(i.current?.id)},g),e)}let eg=e=>{let{context:t,id:n,innerProps:o}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Text.x,{size:"sm",children:o.modalBody}),(0,r.jsx)(ei.z,{fullWidth:!0,mt:"md",onClick:()=>t.closeModal(n),children:"Close modal"})]})};function eh(e){let{children:t}=e;return(0,r.jsx)(ef,{labels:{confirm:"Confirm",cancel:"Cancel"},modals:{demonstration:eg},children:t})}var ey=n(79203),ev=n(5415),eb=n(10248),ek=n(7402),ex=n.n(ek);function ew(){return(0,r.jsx)(a(),{children:(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:":root{ --docs-font-primary: ".concat(ex().style.fontFamily,", ").concat(eb.t.fontFamily,"; }")}})})}var eE=n(74369);let eC=(0,eE.j)({fontFamilyMonospace:"Menlo, Monaco, ".concat(eb.t.fontFamilyMonospace),colors:{"ocean-blue":["#7AD1DD","#5FCCDB","#44CADC","#2AC9DE","#1AC2D9","#11B7CD","#09ADC3","#0E99AC","#128797","#147885"],"oklch-blue":["oklch(96.27% 0.0217 238.66)","oklch(92.66% 0.0429 240.01)","oklch(86.02% 0.0827 241.66)","oklch(78.2% 0.13 243.83)","oklch(71.8% 0.1686 246.06)","oklch(66.89% 0.1986 248.32)","oklch(62.59% 0.2247 250.29)","oklch(58.56% 0.2209 251.26)","oklch(54.26% 0.2067 251.67)","oklch(49.72% 0.1888 251.59)"],"bright-pink":["#F0BBDD","#ED9BCF","#EC7CC3","#ED5DB8","#F13EAF","#F71FA7","#FF00A1","#E00890","#C50E82","#AD1374"]}});n(59863),n(45061);let eF=["/","/combobox","/app-shell"];async function eS(){let{getHighlighter:e}=await Promise.all([n.e(39962),n.e(8506)]).then(n.bind(n,87342)),t=await e({langs:["tsx","scss","html","bash","json"]});return t}function eB(e){let{Component:t,pageProps:n,router:o}=e,i=!eF.includes(o.pathname),[d,p]=(0,l.I)({key:"mantine-navbar-opened",defaultValue:!0});return(0,u.A)([["mod + alt + N",()=>p(!d)]]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(a(),{children:[(0,r.jsx)("title",{children:"Mantine"}),(0,r.jsx)("link",{rel:"shortcut icon",href:"/favicon.svg"}),(0,r.jsx)("meta",{name:"viewport",content:"minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"}),(0,r.jsx)("meta",{name:"og:image:width",content:"1280"}),(0,r.jsx)("meta",{name:"og:image:height",content:"640"}),(0,r.jsx)("meta",{name:"og:type",content:"website"}),(0,r.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,r.jsx)("meta",{name:"twitter:creator",content:"@mantinedev"}),(0,r.jsx)("meta",{name:"og:image",content:"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"})]}),(0,r.jsx)(J,{}),(0,r.jsx)(ew,{}),(0,r.jsx)(c._9,{initialDirection:"ltr",detectDirection:!1,children:(0,r.jsx)(s.M,{theme:eC,defaultColorScheme:"light",children:(0,r.jsxs)(U.U,{loadShiki:eS,children:[(0,r.jsx)(ey.o,{}),(0,r.jsx)(Y,{}),(0,r.jsx)(eh,{children:(0,r.jsxs)(eo.Cu,{children:[(0,r.jsx)(er,{}),i?(0,r.jsx)(ev.N,{withNavbar:d,children:(0,r.jsx)(t,{...n})}):(0,r.jsx)(t,{...n})]})})]})})})]})}},20459:function(e,t){"use strict";var n,r;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{PrefetchKind:function(){return n},ACTION_REFRESH:function(){return o},ACTION_NAVIGATE:function(){return i},ACTION_RESTORE:function(){return a},ACTION_SERVER_PATCH:function(){return c},ACTION_PREFETCH:function(){return s},ACTION_FAST_REFRESH:function(){return l},ACTION_SERVER_ACTION:function(){return u},isThenable:function(){return d}});let o="refresh",i="navigate",a="restore",c="server-patch",s="prefetch",l="fast-refresh",u="server-action";function d(e){return e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then}(r=n||(n={})).AUTO="auto",r.FULL="full",r.TEMPORARY="temporary",("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},41982:function(e,t,n){"use strict";function r(e,t,n,r){return!1}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getDomainLocale",{enumerable:!0,get:function(){return r}}),n(54293),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},28368:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return k}});let r=n(51538),o=r._(n(27378)),i=n(32250),a=n(95877),c=n(64151),s=n(74453),l=n(79213),u=n(48461),d=n(55348),p=n(13662),m=n(41982),f=n(46598),g=n(20459),h=new Set;function y(e,t,n,r,o,i){if(!i&&!(0,a.isLocalURL)(t))return;if(!r.bypassPrefetchedCheck){let o=void 0!==r.locale?r.locale:"locale"in e?e.locale:void 0,i=t+"%"+n+"%"+o;if(h.has(i))return;h.add(i)}let c=i?e.prefetch(t,o):e.prefetch(t,n,r);Promise.resolve(c).catch(e=>{})}function v(e){return"string"==typeof e?e:(0,c.formatUrl)(e)}let b=o.default.forwardRef(function(e,t){let n,r;let{href:c,as:h,children:b,prefetch:k=null,passHref:x,replace:w,shallow:E,scroll:C,locale:F,onClick:S,onMouseEnter:B,onTouchStart:j,legacyBehavior:I=!1,...M}=e;n=b,I&&("string"==typeof n||"number"==typeof n)&&(n=o.default.createElement("a",null,n));let D=o.default.useContext(u.RouterContext),T=o.default.useContext(d.AppRouterContext),A=null!=D?D:T,P=!D,R=!1!==k,N=null===k?g.PrefetchKind.AUTO:g.PrefetchKind.FULL,{href:L,as:H}=o.default.useMemo(()=>{if(!D){let e=v(c);return{href:e,as:h?v(h):e}}let[e,t]=(0,i.resolveHref)(D,c,!0);return{href:e,as:h?(0,i.resolveHref)(D,h):t||e}},[D,c,h]),$=o.default.useRef(L),O=o.default.useRef(H);I&&(r=o.default.Children.only(n));let z=I?r&&"object"==typeof r&&r.ref:t,[_,V,Z]=(0,p.useIntersection)({rootMargin:"200px"}),G=o.default.useCallback(e=>{(O.current!==H||$.current!==L)&&(Z(),O.current=H,$.current=L),_(e),z&&("function"==typeof z?z(e):"object"==typeof z&&(z.current=e))},[H,z,L,Z,_]);o.default.useEffect(()=>{A&&V&&R&&y(A,L,H,{locale:F},{kind:N},P)},[H,L,V,F,R,null==D?void 0:D.locale,A,P,N]);let W={ref:G,onClick(e){I||"function"!=typeof S||S(e),I&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),A&&!e.defaultPrevented&&function(e,t,n,r,i,c,s,l,u,d){let{nodeName:p}=e.currentTarget,m="A"===p.toUpperCase();if(m&&(function(e){let t=e.currentTarget,n=t.getAttribute("target");return n&&"_self"!==n||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!u&&!(0,a.isLocalURL)(n)))return;e.preventDefault();let f=()=>{let e=null==s||s;"beforePopState"in t?t[i?"replace":"push"](n,r,{shallow:c,locale:l,scroll:e}):t[i?"replace":"push"](r||n,{forceOptimisticNavigation:!d,scroll:e})};u?o.default.startTransition(f):f()}(e,A,L,H,w,E,C,F,P,R)},onMouseEnter(e){I||"function"!=typeof B||B(e),I&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),A&&(R||!P)&&y(A,L,H,{locale:F,priority:!0,bypassPrefetchedCheck:!0},{kind:N},P)},onTouchStart(e){I||"function"!=typeof j||j(e),I&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),A&&(R||!P)&&y(A,L,H,{locale:F,priority:!0,bypassPrefetchedCheck:!0},{kind:N},P)}};if((0,s.isAbsoluteUrl)(H))W.href=H;else if(!I||x||"a"===r.type&&!("href"in r.props)){let e=void 0!==F?F:null==D?void 0:D.locale,t=(null==D?void 0:D.isLocaleDomain)&&(0,m.getDomainLocale)(H,e,null==D?void 0:D.locales,null==D?void 0:D.domainLocales);W.href=t||(0,f.addBasePath)((0,l.addLocale)(H,e,null==D?void 0:D.defaultLocale))}return I?o.default.cloneElement(r,W):o.default.createElement("a",{...M,...W},n)}),k=b;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},13662:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return s}});let r=n(27378),o=n(75152),i="function"==typeof IntersectionObserver,a=new Map,c=[];function s(e){let{rootRef:t,rootMargin:n,disabled:s}=e,l=s||!i,[u,d]=(0,r.useState)(!1),p=(0,r.useRef)(null),m=(0,r.useCallback)(e=>{p.current=e},[]);(0,r.useEffect)(()=>{if(i){if(l||u)return;let e=p.current;if(e&&e.tagName){let r=function(e,t,n){let{id:r,observer:o,elements:i}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},r=c.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=a.get(r)))return t;let o=new Map,i=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e);return t={id:n,observer:i,elements:o},c.push(n),a.set(n,t),t}(n);return i.set(e,t),o.observe(e),function(){if(i.delete(e),o.unobserve(e),0===i.size){o.disconnect(),a.delete(r);let e=c.findIndex(e=>e.root===r.root&&e.margin===r.margin);e>-1&&c.splice(e,1)}}}(e,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:n});return r}}else if(!u){let e=(0,o.requestIdleCallback)(()=>d(!0));return()=>(0,o.cancelIdleCallback)(e)}},[l,n,t,u,p.current]);let f=(0,r.useCallback)(()=>{d(!1)},[]);return[m,u,f]}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},40750:function(){},21574:function(){},57346:function(){},61140:function(){},30781:function(){},72129:function(){},6051:function(){},80684:function(){},22719:function(){},26324:function(){},54457:function(){},28631:function(){},61671:function(){},7391:function(){},29975:function(){},45061:function(){},59863:function(){},7402:function(e){e.exports={style:{fontFamily:"'__greycliffCF_0e41f6', '__greycliffCF_Fallback_0e41f6'"},className:"__className_0e41f6"}},43134:function(e){e.exports={section:"DocsSection_section__o2plc"}},91487:function(e){e.exports={logo:"Logo_logo__c5nVK"}},61628:function(e){e.exports={root:"MdxInfo_root__KVEKQ",icon:"MdxInfo_icon__cOv9p"}},75356:function(e){e.exports={link:"MdxLink_link__DWoQo"}},17404:function(e){e.exports={root:"MdxNpmScript_root__wk_w9",icon:"MdxNpmScript_icon___9BYF"}},10568:function(e){e.exports={row:"MdxPackagesInstallation_row__4jECZ",checkbox:"MdxPackagesInstallation_checkbox__jBi9e",hiddenMobile:"MdxPackagesInstallation_hiddenMobile__VJhVH"}},87066:function(e){e.exports={code:"MdxPre_code__tSup0"}},25416:function(e){e.exports={externalLinkIcon:"MdxTemplatesList_externalLinkIcon___In9x",icon:"MdxTemplatesList_icon__759wE",iconCell:"MdxTemplatesList_iconCell__t22nh"}},92911:function(e){e.exports={title:"MdxTitle_title__lm_03",copyButton:"MdxTitle_copyButton__Rk3tQ",link:"MdxTitle_link__O_5hL",offset:"MdxTitle_offset__NkEGi",copyIcon:"MdxTitle_copyIcon__LScnY"}},75522:function(e){e.exports={paragraph:"MdxTypography_paragraph__XriB5",ul:"MdxTypography_ul__gGDJt",li:"MdxTypography_li__gO4GM"}},60837:function(e){e.exports={header:"Header_header__KDGDv",logo:"Header_logo__DqpNC",version:"Header_version__jVWmz",versionChevron:"Header_versionChevron__t4WMy",versionExternalIcon:"Header_versionExternalIcon___plOU"}},84020:function(e){e.exports={navbar:"Navbar_navbar__LAEds",scrollarea:"Navbar_scrollarea__sbhtk",body:"Navbar_body__8M1M_",groups:"Navbar_groups__4j6NE"}},42205:function(e){e.exports={group:"NavbarLinksGroup_group__Xgv_M",header:"NavbarLinksGroup_header__yNIL7",chevron:"NavbarLinksGroup_chevron__x5W5G",title:"NavbarLinksGroup_title__sFCQR",category:"NavbarLinksGroup_category__nrDId",categoryTitle:"NavbarLinksGroup_categoryTitle__GUTGd",categoryIcon:"NavbarLinksGroup_categoryIcon__qE5p8",link:"NavbarLinksGroup_link__jLgZu"}},30092:function(e){e.exports={link:"NavbarMainLink_link__eG_24",icon:"NavbarMainLink_icon__ePqig",external:"NavbarMainLink_external__Ko9pq",label:"NavbarMainLink_label__gBi5w"}},29888:function(e){e.exports={main:"Shell_main__o5vhe"}},85128:function(e){e.exports={nextIcon:"icons_nextIcon__ZCrZ1",icon:"icons_icon__yq4dY"}},88038:function(e,t,n){e.exports=n(24069)},79894:function(e,t,n){e.exports=n(28368)},86677:function(e,t,n){e.exports=n(16250)},43218:function(e,t,n){e.exports=n(62388)},27061:function(e){var t,n,r,o=e.exports={};function i(){throw Error("setTimeout has not been defined")}function a(){throw Error("clearTimeout has not been defined")}function c(e){if(t===setTimeout)return setTimeout(e,0);if((t===i||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:i}catch(e){t=i}try{n="function"==typeof clearTimeout?clearTimeout:a}catch(e){n=a}}();var s=[],l=!1,u=-1;function d(){l&&r&&(l=!1,r.length?s=r.concat(s):u=-1,s.length&&p())}function p(){if(!l){var e=c(d);l=!0;for(var t=s.length;t;){for(r=s,s=[];++u1)for(var n=1;nt.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);ot.indexOf(r[o])&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n}(e,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom","as","gapMode"]),S=(n=[i,t],r=function(e){return n.forEach(function(t){return"function"==typeof t?t(e):t&&(t.current=e),t})},(o=(0,u.useState)(function(){return{value:null,callback:r,facade:{get current(){return o.value},set current(value){var e=o.value;e!==value&&(o.value=value,o.callback(value,e))}}}})[0]).callback=r,o.facade),B=l(l({},F),c);return u.createElement(u.Fragment,null,y&&u.createElement(b,{sideCar:f,removeScrollBar:h,shards:v,noIsolation:k,inert:x,setCallbacks:s,allowPinchZoom:!!w,lockRef:i,gapMode:C}),d?u.cloneElement(u.Children.only(p),l(l({},B),{ref:S})):u.createElement(void 0===E?"div":E,l({},B,{className:m,ref:S}),p))});h.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},h.classNames={fullWidth:p,zeroRight:d};var y=function(e){var t=e.sideCar,n=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);ot.indexOf(r[o])&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n}(e,["sideCar"]);if(!t)throw Error("Sidecar: please provide `sideCar` property to import the right car");var r=t.read();if(!r)throw Error("Sidecar medium not found");return u.createElement(r,m({},n))};y.isSideCarExport=!0;var v=function(){var e=0,t=null;return{add:function(o){if(0==e&&(t=function(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var t=r||n.nc;return t&&e.setAttribute("nonce",t),e}())){var i,a;(i=t).styleSheet?i.styleSheet.cssText=o:i.appendChild(document.createTextNode(o)),a=t,(document.head||document.getElementsByTagName("head")[0]).appendChild(a)}e++},remove:function(){--e||!t||(t.parentNode&&t.parentNode.removeChild(t),t=null)}}},b=function(){var e=v();return function(t,n){u.useEffect(function(){return e.add(t),function(){e.remove()}},[t&&n])}},k=function(){var e=b();return function(t){return e(t.styles,t.dynamic),null}},x={left:0,top:0,right:0,gap:0},w=function(e){return parseInt(e||"",10)||0},E=function(e){var t=window.getComputedStyle(document.body),n=t["padding"===e?"paddingLeft":"marginLeft"],r=t["padding"===e?"paddingTop":"marginTop"],o=t["padding"===e?"paddingRight":"marginRight"];return[w(n),w(r),w(o)]},C=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return x;var t=E(e),n=document.documentElement.clientWidth,r=window.innerWidth;return{left:t[0],top:t[1],right:t[2],gap:Math.max(0,r-n+t[2]-t[0])}},F=k(),S=function(e,t,n,r){var o=e.left,i=e.top,a=e.right,c=e.gap;return void 0===n&&(n="margin"),"\n .".concat("with-scroll-bars-hidden"," {\n overflow: hidden ").concat(r,";\n padding-right: ").concat(c,"px ").concat(r,";\n }\n body {\n overflow: hidden ").concat(r,";\n overscroll-behavior: contain;\n ").concat([t&&"position: relative ".concat(r,";"),"margin"===n&&"\n padding-left: ".concat(o,"px;\n padding-top: ").concat(i,"px;\n padding-right: ").concat(a,"px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(c,"px ").concat(r,";\n "),"padding"===n&&"padding-right: ".concat(c,"px ").concat(r,";")].filter(Boolean).join(""),"\n }\n \n .").concat(d," {\n right: ").concat(c,"px ").concat(r,";\n }\n \n .").concat(p," {\n margin-right: ").concat(c,"px ").concat(r,";\n }\n \n .").concat(d," .").concat(d," {\n right: 0 ").concat(r,";\n }\n \n .").concat(p," .").concat(p," {\n margin-right: 0 ").concat(r,";\n }\n \n body {\n ").concat("--removed-body-scroll-bar-size",": ").concat(c,"px;\n }\n")},B=function(e){var t=e.noRelative,n=e.noImportant,r=e.gapMode,o=void 0===r?"margin":r,i=u.useMemo(function(){return C(o)},[o]);return u.createElement(F,{styles:S(i,!t,o,n?"":"!important")})},j=!1;if("undefined"!=typeof window)try{var I=Object.defineProperty({},"passive",{get:function(){return j=!0,!0}});window.addEventListener("test",I,I),window.removeEventListener("test",I,I)}catch(e){j=!1}var M=!!j&&{passive:!1},D=function(e,t){var n=window.getComputedStyle(e);return"hidden"!==n[t]&&!(n.overflowY===n.overflowX&&"TEXTAREA"!==e.tagName&&"visible"===n[t])},T=function(e,t){var n=t.ownerDocument,r=t;do{if("undefined"!=typeof ShadowRoot&&r instanceof ShadowRoot&&(r=r.host),A(e,r)){var o=P(e,r);if(o[1]>o[2])return!0}r=r.parentNode}while(r&&r!==n.body);return!1},A=function(e,t){return"v"===e?D(t,"overflowY"):D(t,"overflowX")},P=function(e,t){return"v"===e?[t.scrollTop,t.scrollHeight,t.clientHeight]:[t.scrollLeft,t.scrollWidth,t.clientWidth]},R=function(e,t,n,r,o){var i,a=(i=window.getComputedStyle(t).direction,"h"===e&&"rtl"===i?-1:1),c=a*r,s=n.target,l=t.contains(s),u=!1,d=c>0,p=0,m=0;do{var f=P(e,s),g=f[0],h=f[1]-f[2]-a*g;(g||h)&&A(e,s)&&(p+=h,m+=g),s=s instanceof ShadowRoot?s.host:s.parentNode}while(!l&&s!==document.body||l&&(t.contains(s)||t===s));return d&&(o&&1>Math.abs(p)||!o&&c>p)?u=!0:!d&&(o&&1>Math.abs(m)||!o&&-c>m)&&(u=!0),u},N=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},L=function(e){return[e.deltaX,e.deltaY]},H=function(e){return e&&"current"in e?e.current:e},$=0,O=[],z=(f.useMedium(function(e){var t=u.useRef([]),n=u.useRef([0,0]),r=u.useRef(),o=u.useState($++)[0],i=u.useState(k)[0],a=u.useRef(e);u.useEffect(function(){a.current=e},[e]),u.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(o));var t=(function(e,t,n){if(n||2==arguments.length)for(var r,o=0,i=t.length;oMath.abs(l)?"h":"v";if("touches"in e&&"h"===d&&"range"===u.type)return!1;var p=T(d,u);if(!p)return!0;if(p?o=d:(o="v"===d?"h":"v",p=T(d,u)),!p)return!1;if(!r.current&&"changedTouches"in e&&(s||l)&&(r.current=o),!o)return!0;var m=r.current||o;return R(m,t,e,"h"===m?s:l,!0)},[]),s=u.useCallback(function(e){if(O.length&&O[O.length-1]===i){var n="deltaY"in e?L(e):N(e),r=t.current.filter(function(t){var r;return t.name===e.type&&(t.target===e.target||e.target===t.shadowParent)&&(r=t.delta)[0]===n[0]&&r[1]===n[1]})[0];if(r&&r.should){e.cancelable&&e.preventDefault();return}if(!r){var o=(a.current.shards||[]).map(H).filter(Boolean).filter(function(t){return t.contains(e.target)});(o.length>0?c(e,o[0]):!a.current.noIsolation)&&e.cancelable&&e.preventDefault()}}},[]),l=u.useCallback(function(e,n,r,o){var i={name:e,delta:n,target:r,should:o,shadowParent:function(e){for(var t=null;null!==e;)e instanceof ShadowRoot&&(t=e.host,e=e.host),e=e.parentNode;return t}(r)};t.current.push(i),setTimeout(function(){t.current=t.current.filter(function(e){return e!==i})},1)},[]),d=u.useCallback(function(e){n.current=N(e),r.current=void 0},[]),p=u.useCallback(function(t){l(t.type,L(t),t.target,c(t,e.lockRef.current))},[]),m=u.useCallback(function(t){l(t.type,N(t),t.target,c(t,e.lockRef.current))},[]);u.useEffect(function(){return O.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:m}),document.addEventListener("wheel",s,M),document.addEventListener("touchmove",s,M),document.addEventListener("touchstart",d,M),function(){O=O.filter(function(e){return e!==i}),document.removeEventListener("wheel",s,M),document.removeEventListener("touchmove",s,M),document.removeEventListener("touchstart",d,M)}},[]);var f=e.removeScrollBar,g=e.inert;return u.createElement(u.Fragment,null,g?u.createElement(i,{styles:"\n .block-interactivity-".concat(o," {pointer-events: none;}\n .allow-interactivity-").concat(o," {pointer-events: all;}\n")}):null,f?u.createElement(B,{gapMode:e.gapMode}):null)}),y),_=u.forwardRef(function(e,t){return u.createElement(h,l({},e,{ref:t,sideCar:z}))});_.classNames=h.classNames;var V=_},63349:function(e,t,n){"use strict";function r(e){return e.split("-")[1]}function o(e){return"y"===e?"height":"width"}function i(e){return e.split("-")[0]}function a(e){return["top","bottom"].includes(i(e))?"x":"y"}function c(e,t,n){let c,{reference:s,floating:l}=e,u=s.x+s.width/2-l.width/2,d=s.y+s.height/2-l.height/2,p=a(t),m=o(p),f=s[m]/2-l[m]/2,g="x"===p;switch(i(t)){case"top":c={x:u,y:s.y-l.height};break;case"bottom":c={x:u,y:s.y+s.height};break;case"right":c={x:s.x+s.width,y:d};break;case"left":c={x:s.x-l.width,y:d};break;default:c={x:s.x,y:s.y}}switch(r(t)){case"start":c[p]-=f*(n&&g?-1:1);break;case"end":c[p]+=f*(n&&g?-1:1)}return c}n.d(t,{JB:function(){return d},Qo:function(){return w},RR:function(){return k},cv:function(){return E},dp:function(){return B},dr:function(){return S},oo:function(){return s},uY:function(){return F},x7:function(){return g}});let s=async(e,t,n)=>{let{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:a}=n,s=i.filter(Boolean),l=await (null==a.isRTL?void 0:a.isRTL(t)),u=await a.getElementRects({reference:e,floating:t,strategy:o}),{x:d,y:p}=c(u,r,l),m=r,f={},g=0;for(let n=0;n({name:"arrow",options:e,async fn(t){let{x:n,y:i,placement:c,rects:s,platform:d,elements:p}=t,{element:g,padding:h=0}=l(e,t)||{};if(null==g)return{};let y=u(h),v={x:n,y:i},b=a(c),k=o(b),x=await d.getDimensions(g),w="y"===b,E=w?"clientHeight":"clientWidth",C=s.reference[k]+s.reference[b]-v[b]-s.floating[k],F=v[b]-s.reference[b],S=await (null==d.getOffsetParent?void 0:d.getOffsetParent(g)),B=S?S[E]:0;B&&await (null==d.isElement?void 0:d.isElement(S))||(B=p.floating[E]||s.floating[k]);let j=B/2-x[k]/2-1,I=m(y[w?"top":"left"],j),M=m(y[w?"bottom":"right"],j),D=B-x[k]-M,T=B/2-x[k]/2+(C/2-F/2),A=f(I,m(T,D)),P=null!=r(c)&&T!=A&&s.reference[k]/2-(Te.concat(t,t+"-start",t+"-end"),[]),{left:"right",right:"left",bottom:"top",top:"bottom"});function y(e){return e.replace(/left|right|bottom|top/g,e=>h[e])}let v={start:"end",end:"start"};function b(e){return e.replace(/start|end/g,e=>v[e])}let k=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,c,s,u;let{placement:d,middlewareData:m,rects:f,initialPlacement:g,platform:h,elements:v}=t,{mainAxis:k=!0,crossAxis:x=!0,fallbackPlacements:w,fallbackStrategy:E="bestFit",fallbackAxisSideDirection:C="none",flipAlignment:F=!0,...S}=l(e,t),B=i(d),j=i(g)===g,I=await (null==h.isRTL?void 0:h.isRTL(v.floating)),M=w||(j||!F?[y(g)]:function(e){let t=y(e);return[b(e),t,b(t)]}(g));w||"none"===C||M.push(...function(e,t,n,o){let a=r(e),c=function(e,t,n){let r=["left","right"],o=["right","left"];switch(e){case"top":case"bottom":return n?t?o:r:t?r:o;case"left":case"right":return t?["top","bottom"]:["bottom","top"];default:return[]}}(i(e),"start"===n,o);return a&&(c=c.map(e=>e+"-"+a),t&&(c=c.concat(c.map(b)))),c}(g,F,C,I));let D=[g,...M],T=await p(t,S),A=[],P=(null==(n=m.flip)?void 0:n.overflows)||[];if(k&&A.push(T[B]),x){let{main:e,cross:t}=function(e,t,n){void 0===n&&(n=!1);let i=r(e),c=a(e),s=o(c),l="x"===c?i===(n?"end":"start")?"right":"left":"start"===i?"bottom":"top";return t.reference[s]>t.floating[s]&&(l=y(l)),{main:l,cross:y(l)}}(d,f,I);A.push(T[e],T[t])}if(P=[...P,{placement:d,overflows:A}],!A.every(e=>e<=0)){let e=((null==(c=m.flip)?void 0:c.index)||0)+1,t=D[e];if(t)return{data:{index:e,overflows:P},reset:{placement:t}};let n=null==(s=P.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:s.placement;if(!n)switch(E){case"bestFit":{let e=null==(u=P.map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0])?void 0:u[0];e&&(n=e);break}case"initialPlacement":n=g}if(d!==n)return{reset:{placement:n}}}return{}}}};function x(e){let t=m(...e.map(e=>e.left)),n=m(...e.map(e=>e.top));return{x:t,y:n,width:f(...e.map(e=>e.right))-t,height:f(...e.map(e=>e.bottom))-n}}let w=function(e){return void 0===e&&(e={}),{name:"inline",options:e,async fn(t){let{placement:n,elements:r,rects:o,platform:c,strategy:s}=t,{padding:p=2,x:g,y:h}=l(e,t),y=Array.from(await (null==c.getClientRects?void 0:c.getClientRects(r.reference))||[]),v=function(e){let t=e.slice().sort((e,t)=>e.y-t.y),n=[],r=null;for(let e=0;er.height/2?n.push([o]):n[n.length-1].push(o),r=o}return n.map(e=>d(x(e)))}(y),b=d(x(y)),k=u(p),w=await c.getElementRects({reference:{getBoundingClientRect:function(){if(2===v.length&&v[0].left>v[1].right&&null!=g&&null!=h)return v.find(e=>g>e.left-k.left&&ge.top-k.top&&h=2){if("x"===a(n)){let e=v[0],t=v[v.length-1],r="top"===i(n),o=e.top,a=t.bottom,c=r?e.left:t.left,s=r?e.right:t.right;return{top:o,bottom:a,left:c,right:s,width:s-c,height:a-o,x:c,y:o}}let e="left"===i(n),t=f(...v.map(e=>e.right)),r=m(...v.map(e=>e.left)),o=v.filter(n=>e?n.left===r:n.right===t),c=o[0].top,s=o[o.length-1].bottom;return{top:c,bottom:s,left:r,right:t,width:t-r,height:s-c,x:r,y:c}}return b}},floating:r.floating,strategy:s});return o.reference.x!==w.reference.x||o.reference.y!==w.reference.y||o.reference.width!==w.reference.width||o.reference.height!==w.reference.height?{reset:{rects:w}}:{}}}},E=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){let{x:n,y:o}=t,c=await async function(e,t){let{placement:n,platform:o,elements:c}=e,s=await (null==o.isRTL?void 0:o.isRTL(c.floating)),u=i(n),d=r(n),p="x"===a(n),m=["left","top"].includes(u)?-1:1,f=s&&p?-1:1,g=l(t,e),{mainAxis:h,crossAxis:y,alignmentAxis:v}="number"==typeof g?{mainAxis:g,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...g};return d&&"number"==typeof v&&(y="end"===d?-1*v:v),p?{x:y*f,y:h*m}:{x:h*m,y:y*f}}(t,e);return{x:n+c.x,y:o+c.y,data:c}}}};function C(e){return"x"===e?"y":"x"}let F=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){let{x:n,y:r,placement:o}=t,{mainAxis:c=!0,crossAxis:s=!1,limiter:u={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...d}=l(e,t),g={x:n,y:r},h=await p(t,d),y=a(i(o)),v=C(y),b=g[y],k=g[v];if(c){let e="y"===y?"bottom":"right";b=f(b+h["y"===y?"top":"left"],m(b,b-h[e]))}if(s){let e="y"===v?"bottom":"right";k=f(k+h["y"===v?"top":"left"],m(k,k-h[e]))}let x=u.fn({...t,[y]:b,[v]:k});return{...x,data:{x:x.x-n,y:x.y-r}}}}},S=function(e){return void 0===e&&(e={}),{options:e,fn(t){let{x:n,y:r,placement:o,rects:c,middlewareData:s}=t,{offset:u=0,mainAxis:d=!0,crossAxis:p=!0}=l(e,t),m={x:n,y:r},f=a(o),g=C(f),h=m[f],y=m[g],v=l(u,t),b="number"==typeof v?{mainAxis:v,crossAxis:0}:{mainAxis:0,crossAxis:0,...v};if(d){let e="y"===f?"height":"width",t=c.reference[f]-c.floating[e]+b.mainAxis,n=c.reference[f]+c.reference[e]-b.mainAxis;hn&&(h=n)}if(p){var k,x;let e="y"===f?"width":"height",t=["top","left"].includes(i(o)),n=c.reference[g]-c.floating[e]+(t&&(null==(k=s.offset)?void 0:k[g])||0)+(t?0:b.crossAxis),r=c.reference[g]+c.reference[e]+(t?0:(null==(x=s.offset)?void 0:x[g])||0)-(t?b.crossAxis:0);yr&&(y=r)}return{[f]:h,[g]:y}}}},B=function(e){return void 0===e&&(e={}),{name:"size",options:e,async fn(t){let n,o;let{placement:c,rects:s,platform:u,elements:d}=t,{apply:g=()=>{},...h}=l(e,t),y=await p(t,h),v=i(c),b=r(c),k="x"===a(c),{width:x,height:w}=s.floating;"top"===v||"bottom"===v?(n=v,o=b===(await (null==u.isRTL?void 0:u.isRTL(d.floating))?"start":"end")?"left":"right"):(o=v,n="end"===b?"top":"bottom");let E=w-y[n],C=x-y[o],F=!t.middlewareData.shift,S=E,B=C;if(k){let e=x-y.left-y.right;B=b||F?m(C,e):e}else{let e=w-y.top-y.bottom;S=b||F?m(E,e):e}if(F&&!b){let e=f(y.left,0),t=f(y.right,0),n=f(y.top,0),r=f(y.bottom,0);k?B=x-2*(0!==e||0!==t?e+t:f(y.left,y.right)):S=w-2*(0!==n||0!==r?n+r:f(y.top,y.bottom))}await g({...t,availableWidth:B,availableHeight:S});let j=await u.getDimensions(d.floating);return x!==j.width||w!==j.height?{reset:{rects:!0}}:{}}}}},25772:function(e,t,n){"use strict";n.d(t,{Kx:function(){return M},Me:function(){return R},oo:function(){return N}});var r=n(63349);function o(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function i(e){return o(e).getComputedStyle(e)}function a(e){return e instanceof o(e).Node}function c(e){return a(e)?(e.nodeName||"").toLowerCase():"#document"}function s(e){return e instanceof HTMLElement||e instanceof o(e).HTMLElement}function l(e){return"undefined"!=typeof ShadowRoot&&(e instanceof o(e).ShadowRoot||e instanceof ShadowRoot)}function u(e){let{overflow:t,overflowX:n,overflowY:r,display:o}=i(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!["inline","contents"].includes(o)}function d(e){let t=p(),n=i(e);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!t&&!!n.backdropFilter&&"none"!==n.backdropFilter||!t&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some(e=>(n.willChange||"").includes(e))||["paint","layout","strict","content"].some(e=>(n.contain||"").includes(e))}function p(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function m(e){return["html","body","#document"].includes(c(e))}let f=Math.min,g=Math.max,h=Math.round,y=Math.floor,v=e=>({x:e,y:e});function b(e){let t=i(e),n=parseFloat(t.width)||0,r=parseFloat(t.height)||0,o=s(e),a=o?e.offsetWidth:n,c=o?e.offsetHeight:r,l=h(n)!==a||h(r)!==c;return l&&(n=a,r=c),{width:n,height:r,$:l}}function k(e){return e instanceof Element||e instanceof o(e).Element}function x(e){return k(e)?e:e.contextElement}function w(e){let t=x(e);if(!s(t))return v(1);let n=t.getBoundingClientRect(),{width:r,height:o,$:i}=b(t),a=(i?h(n.width):n.width)/r,c=(i?h(n.height):n.height)/o;return a&&Number.isFinite(a)||(a=1),c&&Number.isFinite(c)||(c=1),{x:a,y:c}}let E=v(0);function C(e){let t=o(e);return p()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:E}function F(e,t,n,i){var a;void 0===t&&(t=!1),void 0===n&&(n=!1);let c=e.getBoundingClientRect(),s=x(e),l=v(1);t&&(i?k(i)&&(l=w(i)):l=w(e));let u=(void 0===(a=n)&&(a=!1),!(!i||a&&i!==o(s))&&a)?C(s):v(0),d=(c.left+u.x)/l.x,p=(c.top+u.y)/l.y,m=c.width/l.x,f=c.height/l.y;if(s){let e=o(s),t=i&&k(i)?o(i):i,n=e.frameElement;for(;n&&i&&t!==e;){let e=w(n),t=n.getBoundingClientRect(),r=getComputedStyle(n),i=t.left+(n.clientLeft+parseFloat(r.paddingLeft))*e.x,a=t.top+(n.clientTop+parseFloat(r.paddingTop))*e.y;d*=e.x,p*=e.y,m*=e.x,f*=e.y,d+=i,p+=a,n=o(n).frameElement}}return(0,r.JB)({width:m,height:f,x:d,y:p})}function S(e){return k(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function B(e){var t;return null==(t=(a(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function j(e){return F(B(e)).left+S(e).scrollLeft}function I(e){if("html"===c(e))return e;let t=e.assignedSlot||e.parentNode||l(e)&&e.host||B(e);return l(t)?t.host:t}function M(e,t){var n;void 0===t&&(t=[]);let r=function e(t){let n=I(t);return m(n)?t.ownerDocument?t.ownerDocument.body:t.body:s(n)&&u(n)?n:e(n)}(e),i=r===(null==(n=e.ownerDocument)?void 0:n.body),a=o(r);return i?t.concat(a,a.visualViewport||[],u(r)?r:[]):t.concat(r,M(r))}function D(e,t,n){let a;if("viewport"===t)a=function(e,t){let n=o(e),r=B(e),i=n.visualViewport,a=r.clientWidth,c=r.clientHeight,s=0,l=0;if(i){a=i.width,c=i.height;let e=p();(!e||e&&"fixed"===t)&&(s=i.offsetLeft,l=i.offsetTop)}return{width:a,height:c,x:s,y:l}}(e,n);else if("document"===t)a=function(e){let t=B(e),n=S(e),r=e.ownerDocument.body,o=g(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),a=g(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight),c=-n.scrollLeft+j(e),s=-n.scrollTop;return"rtl"===i(r).direction&&(c+=g(t.clientWidth,r.clientWidth)-o),{width:o,height:a,x:c,y:s}}(B(e));else if(k(t))a=function(e,t){let n=F(e,!0,"fixed"===t),r=n.top+e.clientTop,o=n.left+e.clientLeft,i=s(e)?w(e):v(1);return{width:e.clientWidth*i.x,height:e.clientHeight*i.y,x:o*i.x,y:r*i.y}}(t,n);else{let n=C(e);a={...t,x:t.x-n.x,y:t.y-n.y}}return(0,r.JB)(a)}function T(e,t){return s(e)&&"fixed"!==i(e).position?t?t(e):e.offsetParent:null}function A(e,t){let n=o(e);if(!s(e))return n;let r=T(e,t);for(;r&&["table","td","th"].includes(c(r))&&"static"===i(r).position;)r=T(r,t);return r&&("html"===c(r)||"body"===c(r)&&"static"===i(r).position&&!d(r))?n:r||function(e){let t=I(e);for(;s(t)&&!m(t);){if(d(t))return t;t=I(t)}return null}(e)||n}let P={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:n,strategy:r}=e,o=s(n),i=B(n);if(n===i)return t;let a={scrollLeft:0,scrollTop:0},l=v(1),d=v(0);if((o||!o&&"fixed"!==r)&&(("body"!==c(n)||u(i))&&(a=S(n)),s(n))){let e=F(n);l=w(n),d.x=e.x+n.clientLeft,d.y=e.y+n.clientTop}return{width:t.width*l.x,height:t.height*l.y,x:t.x*l.x-a.scrollLeft*l.x+d.x,y:t.y*l.y-a.scrollTop*l.y+d.y}},getDocumentElement:B,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:o}=e,a=[..."clippingAncestors"===n?function(e,t){let n=t.get(e);if(n)return n;let r=M(e).filter(e=>k(e)&&"body"!==c(e)),o=null,a="fixed"===i(e).position,s=a?I(e):e;for(;k(s)&&!m(s);){let t=i(s),n=d(s);n||"fixed"!==t.position||(o=null),(a?!n&&!o:!n&&"static"===t.position&&o&&["absolute","fixed"].includes(o.position)||u(s)&&!n&&function e(t,n){let r=I(t);return!(r===n||!k(r)||m(r))&&("fixed"===i(r).position||e(r,n))}(e,s))?r=r.filter(e=>e!==s):o=t,s=I(s)}return t.set(e,r),r}(t,this._c):[].concat(n),r],s=a[0],l=a.reduce((e,n)=>{let r=D(t,n,o);return e.top=g(r.top,e.top),e.right=f(r.right,e.right),e.bottom=f(r.bottom,e.bottom),e.left=g(r.left,e.left),e},D(t,s,o));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},getOffsetParent:A,getElementRects:async function(e){let{reference:t,floating:n,strategy:r}=e,o=this.getOffsetParent||A,i=this.getDimensions;return{reference:function(e,t,n){let r=s(t),o=B(t),i="fixed"===n,a=F(e,!0,i,t),l={scrollLeft:0,scrollTop:0},d=v(0);if(r||!r&&!i){if(("body"!==c(t)||u(o))&&(l=S(t)),s(t)){let e=F(t,!0,i,t);d.x=e.x+t.clientLeft,d.y=e.y+t.clientTop}else o&&(d.x=j(o))}return{x:a.left+l.scrollLeft-d.x,y:a.top+l.scrollTop-d.y,width:a.width,height:a.height}}(t,await o(n),r),floating:{x:0,y:0,...await i(n)}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){return b(e)},getScale:w,isElement:k,isRTL:function(e){return"rtl"===getComputedStyle(e).direction}};function R(e,t,n,r){void 0===r&&(r={});let{ancestorScroll:o=!0,ancestorResize:i=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=r,l=x(e),u=o||i?[...l?M(l):[],...M(t)]:[];u.forEach(e=>{o&&e.addEventListener("scroll",n,{passive:!0}),i&&e.addEventListener("resize",n)});let d=l&&c?function(e,t){let n,r=null,o=B(e);function i(){clearTimeout(n),r&&r.disconnect(),r=null}return function a(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),i();let{left:l,top:u,width:d,height:p}=e.getBoundingClientRect();if(c||t(),!d||!p)return;let m={rootMargin:-y(u)+"px "+-y(o.clientWidth-(l+d))+"px "+-y(o.clientHeight-(u+p))+"px "+-y(l)+"px",threshold:g(0,f(1,s))||1},h=!0;function v(e){let t=e[0].intersectionRatio;if(t!==s){if(!h)return a();t?a(!1,t):n=setTimeout(()=>{a(!1,1e-7)},100)}h=!1}try{r=new IntersectionObserver(v,{...m,root:o.ownerDocument})}catch(e){r=new IntersectionObserver(v,m)}r.observe(e)}(!0),i}(l,n):null,p,m=-1,h=null;a&&(h=new ResizeObserver(e=>{let[r]=e;r&&r.target===l&&h&&(h.unobserve(t),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{h&&h.observe(t)})),n()}),l&&!s&&h.observe(l),h.observe(t));let v=s?F(e):null;return s&&function t(){let r=F(e);v&&(r.x!==v.x||r.y!==v.y||r.width!==v.width||r.height!==v.height)&&n(),v=r,p=requestAnimationFrame(t)}(),n(),()=>{u.forEach(e=>{o&&e.removeEventListener("scroll",n),i&&e.removeEventListener("resize",n)}),d&&d(),h&&h.disconnect(),h=null,s&&cancelAnimationFrame(p)}}let N=(e,t,n)=>{let o=new Map,i={platform:P,...n},a={...i.platform,_c:o};return(0,r.oo)(e,t,{...i,platform:a})}},71670:function(e,t,n){"use strict";n.d(t,{Z:function(){return c},a:function(){return a}});var r=n(27378);let o={},i=r.createContext(o);function a(e){let t=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(i.Provider,{value:t},e.children)}},40624:function(e,t,n){"use strict";t.Z=function(){for(var e,t,n=0,r="";n({group:{"--ai-border-width":(0,p.h)(t)}})),y=(0,m.d)((e,t)=>{let n=(0,a.w)("ActionIconGroup",g,e),{className:o,style:i,classNames:l,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:y,variant:v,mod:b,...k}=(0,a.w)("ActionIconGroup",g,e),x=(0,c.y)({name:"ActionIconGroup",props:n,classes:f,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:m,varsResolver:h,rootSelector:"group"});return r.createElement(s.x,{...x("group"),ref:t,variant:v,mod:[{"data-orientation":p},b],role:"group",...k})});y.classes=f,y.displayName="@mantine/core/ActionIconGroup";let v={},b=(0,i.Z)((e,{size:t,radius:n,variant:r,gradient:i,color:a,autoContrast:c})=>{let s=e.variantColorResolver({color:a||e.primaryColor,theme:e,gradient:i,variant:r||"filled",autoContrast:c});return{root:{"--ai-size":(0,o.ap)(t,"ai-size"),"--ai-radius":void 0===n?void 0:(0,o.H5)(n),"--ai-bg":a||r?s.background:void 0,"--ai-hover":a||r?s.hover:void 0,"--ai-hover-color":a||r?s.hoverColor:void 0,"--ai-color":s.color,"--ai-bd":a||r?s.border:void 0}}}),k=(0,l.b)((e,t)=>{let n=(0,a.w)("ActionIcon",v,e),{className:o,unstyled:i,variant:l,classNames:p,styles:m,style:g,loading:h,loaderProps:y,size:k,color:x,radius:w,__staticSelector:E,gradient:C,vars:F,children:S,disabled:B,"data-disabled":j,autoContrast:I,mod:M,...D}=n,T=(0,c.y)({name:["ActionIcon",E],props:n,className:o,style:g,classes:f,classNames:p,styles:m,unstyled:i,vars:F,varsResolver:b});return r.createElement(d.k,{...T("root",{active:!B&&!h&&!j}),...D,unstyled:i,variant:l,size:k,disabled:B||h,ref:t,mod:[{loading:h,disabled:B||j},M]},r.createElement(s.x,{component:"span",...T("loader"),"aria-hidden":!0},r.createElement(u.a,{color:"var(--ai-color)",size:"calc(var(--ai-size) * 0.55)",...y})),r.createElement(s.x,{component:"span",mod:{loading:h},...T("icon")},S))});k.classes=f,k.displayName="@mantine/core/ActionIcon",k.Group=y},9136:function(e,t,n){"use strict";n.d(t,{e:function(){return l}});var r=n(27378),o=n(40624),i=n(96739),a=n(50332),Text=n(26569),c={root:"m-849cf0da"};let s={underline:"hover"},l=(0,a.b)((e,t)=>{let{underline:n,className:a,unstyled:l,mod:u,...d}=(0,i.w)("Anchor",s,e);return r.createElement(Text.x,{component:"a",ref:t,className:(0,o.Z)({[c.root]:!l},a),...d,mod:[{underline:n},u],__staticSelector:"Anchor",unstyled:l})});l.classes=c,l.displayName="@mantine/core/Anchor"},46374:function(e,t,n){"use strict";n.d(t,{V:function(){return y}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(88193),s=n(89738),l=n(91948),u=n(96739),d=n(6231),p=n(56589),m=n(20410),f={root:"m-ddec01c0",icon:"m-dde7bd57",cite:"m-dde51a35"};let g={iconSize:48},h=(0,a.Z)((e,{color:t,iconSize:n,radius:r})=>{let a=(0,c.E)({color:t||e.primaryColor,theme:e,colorScheme:"dark"}),u=(0,c.E)({color:t||e.primaryColor,theme:e,colorScheme:"light"});return{root:{"--bq-bg-light":(0,l.m)(u.value,.07),"--bq-bg-dark":(0,l.m)(a.value,.06),"--bq-bd":(0,s.p)(t,e),"--bq-icon-size":(0,o.h)(n),"--bq-radius":(0,i.H5)(r)}}}),y=(0,m.d)((e,t)=>{let n=(0,u.w)("Blockquote",g,e),{classNames:o,className:i,style:a,styles:c,unstyled:s,vars:l,children:m,icon:y,iconSize:v,cite:b,...k}=n,x=(0,d.y)({name:"Blockquote",classes:f,props:n,className:i,style:a,classNames:o,styles:c,unstyled:s,vars:l,varsResolver:h});return r.createElement(p.x,{component:"blockquote",ref:t,...x("root"),...k},y&&r.createElement("span",{...x("icon")},y),m,b&&r.createElement("cite",{...x("cite")},b))});y.classes=f,y.displayName="@mantine/core/Blockquote"},70098:function(e,t,n){"use strict";n.d(t,{O:function(){return g}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(96739),s=n(6231),l=n(56589),u=n(20410),d=n(19397),p={root:"m-fea6bf1a",burger:"m-d4fb9cad"};let m={},f=(0,i.Z)((e,{color:t,size:n,transitionDuration:r,transitionTimingFunction:i})=>({root:{"--burger-color":t?(0,a.p)(t,e):void 0,"--burger-size":(0,o.ap)(n,"burger-size"),"--burger-transition-duration":void 0===r?void 0:`${r}ms`,"--burger-transition-timing-function":i}})),g=(0,u.d)((e,t)=>{let n=(0,c.w)("Burger",m,e),{classNames:o,className:i,style:a,styles:u,unstyled:g,vars:h,opened:y,children:v,transitionDuration:b,transitionTimingFunction:k,...x}=n,w=(0,s.y)({name:"Burger",classes:p,props:n,className:i,style:a,classNames:o,styles:u,unstyled:g,vars:h,varsResolver:f});return r.createElement(d.k,{...w("root"),ref:t,...x},r.createElement(l.x,{mod:["reduce-motion",{opened:y}],...w("burger")}),v)});g.classes=p,g.displayName="@mantine/core/Burger"},8671:function(e,t,n){"use strict";n.d(t,{z:function(){return k}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(50332),u=n(42029),d=n(19397),p=n(71078),m=n(20410),f={root:"m-77c9d27d",inner:"m-80f1301b",loader:"m-a25b86ee",label:"m-811560b9",section:"m-a74036a",group:"m-80d6d844"};let g={orientation:"horizontal"},h=(0,i.Z)((e,{borderWidth:t})=>({group:{"--button-border-width":(0,p.h)(t)}})),y=(0,m.d)((e,t)=>{let n=(0,a.w)("ButtonGroup",g,e),{className:o,style:i,classNames:l,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:y,variant:v,mod:b,...k}=(0,a.w)("ButtonGroup",g,e),x=(0,c.y)({name:"ButtonGroup",props:n,classes:f,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:m,varsResolver:h,rootSelector:"group"});return r.createElement(s.x,{...x("group"),ref:t,variant:v,mod:[{"data-orientation":p},b],role:"group",...k})});y.classes=f,y.displayName="@mantine/core/ButtonGroup";let v={},b=(0,i.Z)((e,{radius:t,color:n,gradient:r,variant:i,size:a,justify:c,autoContrast:s})=>{let l=e.variantColorResolver({color:n||e.primaryColor,theme:e,gradient:r,variant:i||"filled",autoContrast:s});return{root:{"--button-justify":c,"--button-height":(0,o.ap)(a,"button-height"),"--button-padding-x":(0,o.ap)(a,"button-padding-x"),"--button-fz":a?.includes("compact")?(0,o.yv)(a.replace("compact-","")):(0,o.yv)(a),"--button-radius":void 0===t?void 0:(0,o.H5)(t),"--button-bg":n||i?l.background:void 0,"--button-hover":n||i?l.hover:void 0,"--button-color":l.color,"--button-bd":n||i?l.border:void 0,"--button-hover-color":n||i?l.hoverColor:void 0}}}),k=(0,l.b)((e,t)=>{let n=(0,a.w)("Button",v,e),{style:o,vars:i,className:l,color:p,disabled:m,children:g,leftSection:h,rightSection:y,fullWidth:k,variant:x,radius:w,loading:E,loaderProps:C,gradient:F,classNames:S,styles:B,unstyled:j,"data-disabled":I,autoContrast:M,mod:D,...T}=n,A=(0,c.y)({name:"Button",props:n,classes:f,className:l,style:o,classNames:S,styles:B,unstyled:j,vars:i,varsResolver:b}),P=!!h,R=!!y;return r.createElement(d.k,{ref:t,...A("root",{active:!m&&!E&&!I}),unstyled:j,variant:x,disabled:m||E,mod:[{disabled:m||I,loading:E,block:k,"with-left-section":P,"with-right-section":R},D],...T},r.createElement(s.x,{component:"span",...A("loader"),"aria-hidden":!0},r.createElement(u.a,{color:"var(--button-color)",size:"calc(var(--button-height) / 1.8)",...C})),r.createElement("span",{...A("inner")},h&&r.createElement(s.x,{component:"span",...A("section"),mod:{position:"left"}},h),r.createElement(s.x,{component:"span",mod:{loading:E},...A("label")},g),y&&r.createElement(s.x,{component:"span",...A("section"),mod:{position:"right"}},y)))});k.classes=f,k.displayName="@mantine/core/Button",k.Group=y},38765:function(e,t,n){"use strict";n.d(t,{P:function(){return a},n:function(){return i}});var r=n(27378),o=n(71078);function i({size:e,style:t,...n}){let i=void 0!==e?{width:(0,o.h)(e),height:(0,o.h)(e),...t}:t;return r.createElement("svg",{viewBox:"0 0 10 7",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:i,"aria-hidden":!0,...n},r.createElement("path",{d:"M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}function a({indeterminate:e,...t}){return e?r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 32 6","aria-hidden":!0,...t},r.createElement("rect",{width:"32",height:"6",fill:"currentColor",rx:"3"})):r.createElement(i,{...t})}},94193:function(e,t,n){"use strict";n.d(t,{X:function(){return j}});var r=n(27378),o=n(31002),i=n(92082),a=n(83453),c=n(88193),s=n(89738),l=n(34121),u=n(96739),d=n(6231),p=n(55934),m=n(56589),f=n(20410),g=n(91549);let h=(0,r.createContext)(null),y=h.Provider,v=()=>(0,r.useContext)(h);var b=n(58675),k=n(42487),x=n(96606);let w={},E=(0,f.d)((e,t)=>{let{value:n,defaultValue:o,onChange:i,size:a,wrapperProps:c,children:s,readOnly:l,...d}=(0,u.w)("CheckboxGroup",w,e),[p,m]=(0,b.C)({value:n,defaultValue:o,finalValue:[],onChange:i});return r.createElement(y,{value:{value:p,onChange:e=>{let t=e.currentTarget.value;l||m(p.includes(t)?p.filter(e=>e!==t):[...p,t])},size:a}},r.createElement(k.I.Wrapper,{size:a,ref:t,...c,...d,labelElement:"div",__staticSelector:"CheckboxGroup"},r.createElement(x.m,{role:"group"},s)))});E.classes=k.I.Wrapper.classes,E.displayName="@mantine/core/CheckboxGroup";var C=n(38765),F={root:"m-bf2d988c",inner:"m-26062bec",input:"m-26063560",icon:"m-bf295423","input--outline":"m-215c4542"};let S={labelPosition:"right",icon:C.P},B=(0,a.Z)((e,{radius:t,color:n,size:r,iconColor:o,variant:a,autoContrast:u})=>{let d=(0,c.E)({color:n||e.primaryColor,theme:e}),p=d.isThemeColor&&void 0===d.shade?`var(--mantine-color-${d.color}-outline)`:d.color;return{root:{"--checkbox-size":(0,i.ap)(r,"checkbox-size"),"--checkbox-radius":void 0===t?void 0:(0,i.H5)(t),"--checkbox-color":"outline"===a?p:(0,s.p)(n,e),"--checkbox-icon-color":o?(0,s.p)(o,e):u?(0,l.R)({color:n,theme:e}):void 0}}}),j=(0,f.d)((e,t)=>{let n=(0,u.w)("Checkbox",S,e),{classNames:i,className:a,style:c,styles:s,unstyled:l,vars:f,color:h,label:y,id:b,size:k,radius:x,wrapperProps:w,children:E,checked:C,labelPosition:j,description:I,error:M,disabled:D,variant:T,indeterminate:A,icon:P,rootRef:R,iconColor:N,onChange:L,autoContrast:H,mod:$,...O}=n,z=v(),_=k||z?.size,V=(0,d.y)({name:"Checkbox",props:n,classes:F,className:a,style:c,classNames:i,styles:s,unstyled:l,vars:f,varsResolver:B}),{styleProps:Z,rest:G}=(0,p.c)(O),W=(0,o.M)(b),q=z?{checked:z.value.includes(G.value),onChange:e=>{z.onChange(e),L?.(e)}}:{};return r.createElement(g.Z,{...V("root"),__staticSelector:"Checkbox",__stylesApiProps:n,id:W,size:_,labelPosition:j,label:y,description:I,error:M,disabled:D,classNames:i,styles:s,unstyled:l,"data-checked":q.checked||C||void 0,variant:T,ref:R,mod:$,...Z,...w},r.createElement(m.x,{...V("inner"),mod:{"data-label-position":j}},r.createElement(m.x,{component:"input",id:W,ref:t,checked:C,disabled:D,mod:{error:!!M,indeterminate:A},...V("input",{focusable:!0,variant:T}),onChange:L,...G,...q,type:"checkbox"}),r.createElement(P,{indeterminate:A,...V("icon")})))});j.classes={...F,...g.J},j.displayName="@mantine/core/Checkbox",j.Group=E},96217:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(96739),s=n(6231),l=n(50332),u=n(19397);let d=(0,r.forwardRef)(({size:e="var(--cb-icon-size, 70%)",style:t,...n},o)=>r.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{...t,width:e,height:e},ref:o,...n},r.createElement("path",{d:"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})));d.displayName="@mantine/core/CloseIcon";var p={root:"m-86a44da5","root--subtle":"m-220c80f2"};let m={variant:"subtle"},f=(0,a.Z)((e,{size:t,radius:n,iconSize:r})=>({root:{"--cb-size":(0,i.ap)(t,"cb-size"),"--cb-radius":void 0===n?void 0:(0,i.H5)(n),"--cb-icon-size":(0,o.h)(r)}})),g=(0,l.b)((e,t)=>{let n=(0,c.w)("CloseButton",m,e),{iconSize:o,children:i,vars:a,radius:l,className:g,classNames:h,style:y,styles:v,unstyled:b,"data-disabled":k,disabled:x,variant:w,icon:E,mod:C,...F}=n,S=(0,s.y)({name:"CloseButton",props:n,className:g,style:y,classes:p,classNames:h,styles:v,unstyled:b,vars:a,varsResolver:f});return r.createElement(u.k,{ref:t,...F,unstyled:b,variant:w,disabled:x,mod:[{disabled:x||k},C],...S("root",{variant:w,active:!0})},E||r.createElement(d,null),i)});g.classes=p,g.displayName="@mantine/core/CloseButton"},94998:function(e,t,n){"use strict";n.d(t,{E:function(){return m}});var r=n(27378),o=n(83453),i=n(89738),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-b183c0a2"};let d={},p=(0,o.Z)((e,{color:t})=>({root:{"--code-bg":t?(0,i.p)(t,e):void 0}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Code",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:g,color:h,block:y,variant:v,mod:b,...k}=n,x=(0,c.y)({name:"Code",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return r.createElement(s.x,{component:y?"pre":"code",variant:v,ref:t,mod:[{block:y},b],...x("root"),...k,dir:"ltr"})});m.classes=u,m.displayName="@mantine/core/Code"},26596:function(e,t,n){"use strict";n.d(t,{k:function(){return l}});var r=n(27378),o=n(71078),i=n(96739),a=n(21551),c=n(84668);let s={},l=(0,r.forwardRef)((e,t)=>{let{value:n,onChange:l,onChangeEnd:u,color:d,...p}=(0,i.w)("AlphaSlider",s,e);return r.createElement(a._,{...p,ref:t,value:n,onChange:e=>l?.(c.NM(e,2)),onChangeEnd:e=>u?.(c.NM(e,2)),maxValue:1,round:!1,"data-alpha":!0,overlays:[{backgroundImage:"linear-gradient(45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--_slider-checkers) 75%)",backgroundSize:`${(0,o.h)(8)} ${(0,o.h)(8)}`,backgroundPosition:`0 0, 0 ${(0,o.h)(4)}, ${(0,o.h)(4)} ${(0,o.h)(-4)}, ${(0,o.h)(-4)} 0`},{backgroundImage:`linear-gradient(90deg, transparent, ${d})`},{boxShadow:`rgba(0, 0, 0, .1) 0 0 0 ${(0,o.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,o.h)(4)} inset`}]})});l.displayName="@mantine/core/AlphaSlider"},80567:function(e,t,n){"use strict";n.d(t,{K:function(){return o},j:function(){return i}}),n(27378);var r=n(89871);let[o,i]=(0,r.V)(null)},36227:function(e,t,n){"use strict";n.d(t,{z:function(){return F}});var r=n(27378),o=n(58675),i=n(82591),a=n(92082),c=n(83453),s=n(96739),l=n(6231),u=n(56589),d=n(20410),p=n(16202),m=n(26596),f=n(80567),g=n(45035),h=n(84668),y=n(12333),v=n(60790),b=n(58066);function k({className:e,onChange:t,onChangeEnd:n,value:o,saturationLabel:i,focusable:a=!0,size:c,color:s,onScrubStart:l,onScrubEnd:d,...p}){let{getStyles:m}=(0,f.j)(),[h,y]=(0,r.useState)({x:o.s/100,y:1-o.v/100}),k=(0,r.useRef)(h),{ref:x}=(0,v.r)(({x:e,y:n})=>{k.current={x:e,y:n},t({s:Math.round(100*e),v:Math.round((1-n)*100)})},{onScrubEnd:()=>{let{x:e,y:t}=k.current;n({s:Math.round(100*e),v:Math.round((1-t)*100)}),d?.()},onScrubStart:l});(0,r.useEffect)(()=>{y({x:o.s/100,y:1-o.v/100})},[o.s,o.v]);let w=(e,r)=>{e.preventDefault();let o=(0,v.E)(r);t({s:Math.round(100*o.x),v:Math.round((1-o.y)*100)}),n({s:Math.round(100*o.x),v:Math.round((1-o.y)*100)})};return r.createElement(u.x,{...m("saturation"),ref:x,...p,role:"slider","aria-label":i,"aria-valuenow":h.x,"aria-valuetext":(0,g.Rt)("rgba",o),tabIndex:a?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowUp":w(e,{y:h.y-.05,x:h.x});break;case"ArrowDown":w(e,{y:h.y+.05,x:h.x});break;case"ArrowRight":w(e,{x:h.x+.05,y:h.y});break;case"ArrowLeft":w(e,{x:h.x-.05,y:h.y})}}},r.createElement("div",{...m("saturationOverlay",{style:{backgroundColor:`hsl(${o.h}, 100%, 50%)`}})}),r.createElement("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(90deg, #fff, transparent)"}})}),r.createElement("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(0deg, #000, transparent)"}})}),r.createElement(b.b,{position:h,...m("thumb",{style:{backgroundColor:s}})}))}k.displayName="@mantine/core/Saturation";let x=(0,r.forwardRef)(({className:e,datatype:t,setValue:n,onChangeEnd:o,size:i,focusable:a,data:c,swatchesPerRow:s,...l},d)=>{let m=(0,f.j)(),g=c.map((e,t)=>r.createElement(p.b,{...m.getStyles("swatch"),unstyled:m.unstyled,component:"button",type:"button",color:e,key:t,radius:"sm",onClick:()=>{n(e),o?.(e)},"aria-label":e,tabIndex:a?0:-1,"data-swatch":!0}));return r.createElement(u.x,{...m.getStyles("swatches"),ref:d,...l},g)});x.displayName="@mantine/core/Swatches";var w=n(95324);let E={swatchesPerRow:7,withPicker:!0,focusable:!0,size:"md",__staticSelector:"ColorPicker"},C=(0,c.Z)((e,{size:t,swatchesPerRow:n})=>({wrapper:{"--cp-preview-size":(0,a.ap)(t,"cp-preview-size"),"--cp-width":(0,a.ap)(t,"cp-width"),"--cp-body-spacing":(0,a.bG)(t),"--cp-swatch-size":`${100/n}%`,"--cp-thumb-size":(0,a.ap)(t,"cp-thumb-size"),"--cp-saturation-height":(0,a.ap)(t,"cp-saturation-height")}})),F=(0,d.d)((e,t)=>{let n=(0,s.w)("ColorPicker",E,e),{classNames:a,className:c,style:d,styles:v,unstyled:b,vars:F,format:S,value:B,defaultValue:j,onChange:I,onChangeEnd:M,withPicker:D,size:T,saturationLabel:A,hueLabel:P,alphaLabel:R,focusable:N,swatches:L,swatchesPerRow:H,fullWidth:$,onColorSwatchClick:O,__staticSelector:z,mod:_,...V}=n,Z=(0,l.y)({name:z,props:n,classes:w.Z,className:c,style:d,classNames:a,styles:v,unstyled:b,rootSelector:"wrapper",vars:F,varsResolver:C}),G=(0,r.useRef)(S),W=(0,r.useRef)(),q=(0,r.useRef)(-1),Y=(0,r.useRef)(!1),U="hexa"===S||"rgba"===S||"hsla"===S,[K,X,J]=(0,o.C)({value:B,defaultValue:j,finalValue:"#FFFFFF",onChange:I}),[Q,ee]=(0,r.useState)((0,h.lu)(K)),et=()=>{window.clearTimeout(q.current),Y.current=!0},en=()=>{window.clearTimeout(q.current),q.current=window.setTimeout(()=>{Y.current=!1},200)},er=e=>{ee(t=>{let n={...t,...e};return W.current=(0,g.Rt)(G.current,n),n}),X(W.current)};return(0,i.l)(()=>{(0,h.fi)(B)&&!Y.current&&ee((0,h.lu)(B))},[B]),(0,i.l)(()=>{G.current=S,X((0,g.Rt)(S,Q))},[S]),r.createElement(f.K,{value:{getStyles:Z,unstyled:b}},r.createElement(u.x,{ref:t,...Z("wrapper"),size:T,mod:[{"full-width":$},_],...V},D&&r.createElement(r.Fragment,null,r.createElement(k,{value:Q,onChange:er,onChangeEnd:({s:e,v:t})=>M?.(g.Rt(G.current,{...Q,s:e,v:t})),color:K,size:T,focusable:N,saturationLabel:A,onScrubStart:et,onScrubEnd:en}),r.createElement("div",{...Z("body")},r.createElement("div",{...Z("sliders")},r.createElement(y.Q,{value:Q.h,onChange:e=>er({h:e}),onChangeEnd:e=>M?.(g.Rt(G.current,{...Q,h:e})),size:T,focusable:N,"aria-label":P,onScrubStart:et,onScrubEnd:en}),U&&r.createElement(m.k,{value:Q.a,onChange:e=>er({a:e}),onChangeEnd:e=>{M?.(g.Rt(G.current,{...Q,a:e}))},size:T,color:(0,g.Rt)("hex",Q),focusable:N,"aria-label":R,onScrubStart:et,onScrubEnd:en})),U&&r.createElement(p.b,{color:K,radius:"sm",size:"var(--cp-preview-size)",...Z("preview")}))),Array.isArray(L)&&r.createElement(x,{data:L,swatchesPerRow:H,focusable:N,setValue:X,onChangeEnd:e=>{let t=(0,g.Rt)(S,(0,h.lu)(e));O?.(t),M?.(t),J||ee((0,h.lu)(e))}})))});F.classes=w.Z,F.displayName="@mantine/core/ColorPicker"},95324:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={wrapper:"m-fee9c77",preview:"m-9dddfbac",body:"m-bffecc3e",sliders:"m-3283bb96",thumb:"m-40d572ba",swatch:"m-d8ee6fd8",swatches:"m-5711e686",saturation:"m-202a296e",saturationOverlay:"m-11b3db02",slider:"m-d856d47d",sliderOverlay:"m-8f327113"}},21551:function(e,t,n){"use strict";n.d(t,{_:function(){return y}});var r=n(27378),o=n(60790),i=n(82591),a=n(72840),c=n(71078),s=n(2256),l=n(96739),u=n(6231),d=n(56589),p=n(20410),m=n(80567),f=n(58066),g=n(95324);let h={},y=(0,p.d)((e,t)=>{let n=(0,l.w)("ColorSlider",h,e),{classNames:p,className:y,style:v,styles:b,unstyled:k,vars:x,onChange:w,onChangeEnd:E,maxValue:C,round:F,size:S="md",focusable:B=!0,value:j,overlays:I,thumbColor:M="transparent",onScrubStart:D,onScrubEnd:T,__staticSelector:A="ColorPicker",...P}=n,R=(0,u.y)({name:A,classes:g.Z,props:n,className:y,style:v,classNames:p,styles:b,unstyled:k}),N=m.j()?.getStyles,L=N||R,H=(0,s.rZ)(),[$,O]=(0,r.useState)({y:0,x:j/C}),z=(0,r.useRef)($),_=e=>F?Math.round(e*C):e*C,{ref:V}=(0,o.r)(({x:e,y:t})=>{z.current={x:e,y:t},w?.(_(e))},{onScrubEnd:()=>{let{x:e}=z.current;E?.(_(e)),T?.()},onScrubStart:D});(0,i.l)(()=>{O({y:0,x:j/C})},[j]);let Z=(e,t)=>{e.preventDefault();let n=(0,o.E)(t);w?.(_(n.x)),E?.(_(n.x))},G=I.map((e,t)=>r.createElement("div",{...L("sliderOverlay"),style:e,key:t}));return r.createElement(d.x,{...P,ref:(0,a.Yx)(V,t),...L("slider"),role:"slider","aria-valuenow":j,"aria-valuemax":C,"aria-valuemin":0,tabIndex:B?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowRight":Z(e,{x:$.x+.05,y:$.y});break;case"ArrowLeft":Z(e,{x:$.x-.05,y:$.y})}},"data-focus-ring":H.focusRing,__vars:{"--_cp-thumb-size":`var(--cp-thumb-size-${S})`}},G,r.createElement(f.b,{position:$,...L("thumb",{style:{top:(0,c.h)(1),background:M}})}))});y.displayName="@mantine/core/ColorSlider"},12333:function(e,t,n){"use strict";n.d(t,{Q:function(){return c}});var r=n(27378),o=n(71078),i=n(96739),a=n(21551);let c=(0,r.forwardRef)((e,t)=>{let{value:n,onChange:c,onChangeEnd:s,color:l,...u}=(0,i.w)("HueSlider",{},e);return r.createElement(a._,{...u,ref:t,value:n,onChange:c,onChangeEnd:s,maxValue:360,thumbColor:`hsl(${n}, 100%, 50%)`,round:!0,"data-hue":!0,overlays:[{backgroundImage:"linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))"},{boxShadow:`rgba(0, 0, 0, .1) 0 0 0 ${(0,o.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,o.h)(4)} inset`}]})});c.displayName="@mantine/core/HueSlider"},58066:function(e,t,n){"use strict";n.d(t,{b:function(){return i}});var r=n(27378),o=n(56589);let i=(0,r.forwardRef)(({position:e,...t},n)=>r.createElement(o.x,{ref:n,__vars:{"--_thumb-y-offset":`${100*e.y}%`,"--_thumb-x-offset":`${100*e.x}%`},...t}));i.displayName="@mantine/core/ColorPickerThumb"},45035:function(e,t,n){"use strict";n.d(t,{Rt:function(){return u}});var r=n(84668);function o({h:e,s:t,v:n,a:o}){let i=e/360*6,a=t/100,c=n/100,s=Math.floor(i),l=c*(1-a),u=c*(1-(i-s)*a),d=c*(1-(1-i+s)*a),p=s%6;return{r:(0,r.NM)(255*[c,u,l,l,d,c][p]),g:(0,r.NM)(255*[d,c,c,u,l,l][p]),b:(0,r.NM)(255*[l,l,d,c,c,u][p]),a:(0,r.NM)(o,2)}}function i(e,t){let{r:n,g:i,b:a,a:c}=o(e);return t?`rgba(${n}, ${i}, ${a}, ${(0,r.NM)(c,2)})`:`rgb(${n}, ${i}, ${a})`}function a({h:e,s:t,v:n,a:o},i){let a=(200-t)*n/100,c={h:Math.round(e),s:Math.round(a>0&&a<200?t*n/100/(a<=100?a:200-a)*100:0),l:Math.round(a/2)};return i?`hsla(${c.h}, ${c.s}%, ${c.l}%, ${(0,r.NM)(o,2)})`:`hsl(${c.h}, ${c.s}%, ${c.l}%)`}function c(e){let t=e.toString(16);return t.length<2?`0${t}`:t}function s(e){let{r:t,g:n,b:r}=o(e);return`#${c(t)}${c(n)}${c(r)}`}let l={hex:s,hexa:e=>(function(e){let t=Math.round(255*e.a);return`${s(e)}${c(t)}`})(e),rgb:e=>i(e,!1),rgba:e=>i(e,!0),hsl:e=>a(e,!1),hsla:e=>a(e,!0)};function u(e,t){return t?e in l?l[e](t):l.hex(t):"#000000"}},84668:function(e,t,n){"use strict";function r(e,t=0,n=10**t){return Math.round(n*e)/n}n.d(t,{NM:function(){return r},fi:function(){return m},lu:function(){return f}});let o={grad:.9,turn:360,rad:360/(2*Math.PI)},i=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;function a(e){let t=i.exec(e);return t?function({h:e,s:t,l:n,a:r}){let o=t*((n<50?n:100-n)/100);return{h:e,s:o>0?2*o/(n+o)*100:0,v:n+o,a:r}}({h:function(e,t="deg"){return Number(e)*(o[t]||1)}(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}}function c({r:e,g:t,b:n,a:o}){let i=Math.max(e,t,n),a=i-Math.min(e,t,n),c=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:r(60*(c<0?c+6:c),3),s:r(i?a/i*100:0,3),v:r(i/255*100,3),a:o}}function s(e){let t="#"===e[0]?e.slice(1):e;return 3===t.length?c({r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}):c({r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:1})}let l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;function u(e){let t=l.exec(e);return t?c({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}}let d={hex:/^#?([0-9A-F]{3}){1,2}$/i,hexa:/^#?([0-9A-F]{4}){1,2}$/i,rgb:/^rgb\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/i,rgba:/^rgba\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/i,hsl:/hsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\)/i,hsla:/^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/i},p={hex:s,hexa:function(e){let t="#"===e[0]?e.slice(1):e,n=e=>r(parseInt(e,16)/255,3);if(4===t.length){let e=t.slice(0,3),r=n(t[3]+t[3]),o={...s(e),a:r};return o}let o=t.slice(0,6),i=n(t.slice(6,8)),a={...s(o),a:i};return a},rgb:u,rgba:u,hsl:a,hsla:a};function m(e){for(let[,t]of Object.entries(d))if(t.test(e))return!0;return!1}function f(e){if("string"!=typeof e)return{h:0,s:0,v:0,a:1};if("transparent"===e)return{h:0,s:0,v:0,a:0};let t=e.trim();for(let[e,n]of Object.entries(d))if(n.test(t))return p[e](t);return{h:0,s:0,v:0,a:1}}},16202:function(e,t,n){"use strict";n.d(t,{b:function(){return f}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(96739),s=n(6231),l=n(56589),u=n(50332),d={root:"m-de3d2490",colorOverlay:"m-862f3d1b",shadowOverlay:"m-98ae7f22",alphaOverlay:"m-95709ac0",childrenOverlay:"m-93e74e3"};let p={withShadow:!0},m=(0,a.Z)((e,{radius:t,size:n})=>({root:{"--cs-radius":void 0===t?void 0:(0,i.H5)(t),"--cs-size":(0,o.h)(n)}})),f=(0,u.b)((e,t)=>{let n=(0,c.w)("ColorSwatch",p,e),{classNames:o,className:i,style:a,styles:u,unstyled:f,vars:g,color:h,size:y,radius:v,withShadow:b,children:k,variant:x,...w}=(0,c.w)("ColorSwatch",p,n),E=(0,s.y)({name:"ColorSwatch",props:n,classes:d,className:i,style:a,classNames:o,styles:u,unstyled:f,vars:g,varsResolver:m});return r.createElement(l.x,{ref:t,variant:x,size:y,...E("root",{focusable:!0}),...w},r.createElement("span",{...E("alphaOverlay")}),b&&r.createElement("span",{...E("shadowOverlay")}),r.createElement("span",{...E("colorOverlay",{style:{backgroundColor:h}})}),r.createElement("span",{...E("childrenOverlay")},k))});f.classes=d,f.displayName="@mantine/core/ColorSwatch"},62443:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={dropdown:"m-88b62a41",options:"m-b2821a6e",option:"m-92253aa5",search:"m-985517d8",empty:"m-2530cd1d",header:"m-858f94bd",footer:"m-82b967cb",group:"m-254f3e4f",groupLabel:"m-2bb2e9e5",chevron:"m-2943220b",optionsDropdownScrollArea:"m-71d052f9",optionsDropdownOption:"m-390b5f4",optionsDropdownCheckIcon:"m-8ee53fc2"}},13685:function(e,t,n){"use strict";n.d(t,{d:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u=n(62443);let d={error:null},p=(0,i.Z)((e,{size:t})=>({chevron:{"--combobox-chevron-size":(0,o.ap)(t,"combobox-chevron-size")}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("ComboboxChevron",d,e),{size:o,error:i,style:l,className:m,classNames:f,styles:g,unstyled:h,vars:y,mod:v,...b}=n,k=(0,c.y)({name:"ComboboxChevron",classes:u.Z,props:n,style:l,className:m,classNames:f,styles:g,unstyled:h,vars:y,varsResolver:p,rootSelector:"chevron"});return r.createElement(s.x,{component:"svg",...b,...k("chevron"),size:o,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",mod:["combobox-chevron",{error:i},v],ref:t},r.createElement("path",{d:"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))});m.classes=u.Z,m.displayName="@mantine/core/ComboboxChevron"},2161:function(e,t,n){"use strict";function r(e){return e?e.map(e=>(function e(t){return"string"==typeof t?{value:t,label:t}:"value"in t&&!("label"in t)?{value:t.value,label:t.value,disabled:t.disabled}:"number"==typeof t?{value:t.toString(),label:t.toString()}:"group"in t?{group:t.group,items:t.items.map(t=>e(t))}:t})(e)):[]}n.d(t,{R:function(){return r}})},78131:function(e,t,n){"use strict";n.d(t,{q:function(){return c}});var r=n(27378),o=n(1674),i=n(96739);let a={timeout:1e3};function c(e){let{children:t,timeout:n,value:c,...s}=(0,i.w)("CopyButton",a,e),l=(0,o.V)({timeout:n});return r.createElement(r.Fragment,null,t({copy:()=>l.copy(c),copied:l.copied,...s}))}c.displayName="@mantine/core/CopyButton"},22211:function(e,t,n){"use strict";n.d(t,{Y:function(){return l}});var r=n(27378),o=n(49134),i=n(71078);function a(e,t,n,r){return"center"===e||"center"===r?{top:t}:"end"===e?{bottom:n}:"start"===e?{top:n}:{}}function c(e,t,n,r,o){return"center"===e||"center"===r?{left:t}:"end"===e?{["ltr"===o?"right":"left"]:n}:"start"===e?{["ltr"===o?"left":"right"]:n}:{}}let s={bottom:"borderTopLeftRadius",left:"borderTopRightRadius",right:"borderBottomLeftRadius",top:"borderBottomRightRadius"},l=(0,r.forwardRef)(({position:e,arrowSize:t,arrowOffset:n,arrowRadius:l,arrowPosition:u,visible:d,arrowX:p,arrowY:m,style:f,...g},h)=>{let{dir:y}=(0,o.gm)();return d?r.createElement("div",{...g,ref:h,style:{...f,...function({position:e,arrowSize:t,arrowOffset:n,arrowRadius:r,arrowPosition:o,arrowX:l,arrowY:u,dir:d}){let[p,m="center"]=e.split("-"),f={width:(0,i.h)(t),height:(0,i.h)(t),transform:"rotate(45deg)",position:"absolute",[s[p]]:(0,i.h)(r)},g=(0,i.h)(-t/2);return"left"===p?{...f,...a(m,u,n,o),right:g,borderLeftColor:"transparent",borderBottomColor:"transparent"}:"right"===p?{...f,...a(m,u,n,o),left:g,borderRightColor:"transparent",borderTopColor:"transparent"}:"top"===p?{...f,...c(m,l,n,o,d),bottom:g,borderTopColor:"transparent",borderLeftColor:"transparent"}:"bottom"===p?{...f,...c(m,l,n,o,d),top:g,borderBottomColor:"transparent",borderRightColor:"transparent"}:{}}({position:e,arrowSize:t,arrowOffset:n,arrowRadius:l,arrowPosition:u,dir:y,arrowX:p,arrowY:m})}}):null});l.displayName="@mantine/core/FloatingArrow"},93177:function(e,t,n){"use strict";function r(e,t){if("rtl"===e&&(t.includes("right")||t.includes("left"))){let[e,n]=t.split("-"),r="right"===e?"left":"right";return void 0===n?r:`${r}-${n}`}return t}n.d(t,{_:function(){return r}})},91531:function(e,t,n){"use strict";n.d(t,{U:function(){return o}});var r=n(27378);function o({open:e,close:t,openDelay:n,closeDelay:o}){let i=(0,r.useRef)(-1),a=(0,r.useRef)(-1),c=()=>{window.clearTimeout(i.current),window.clearTimeout(a.current)};return(0,r.useEffect)(()=>c,[]),{openDropdown:()=>{c(),0===n||void 0===n?e():i.current=window.setTimeout(e,n)},closeDropdown:()=>{c(),0===o||void 0===o?t():a.current=window.setTimeout(t,o)}}}},5524:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(27378),o=n(25772),i=n(82591);function a({opened:e,floating:t,position:n,positionDependencies:a}){let[c,s]=(0,r.useState)(0);(0,r.useEffect)(()=>{if(t.refs.reference.current&&t.refs.floating.current)return(0,o.Me)(t.refs.reference.current,t.refs.floating.current,t.update)},[t.refs.reference.current,t.refs.floating.current,e,c,n]),(0,i.l)(()=>{t.update()},a),(0,i.l)(()=>{s(e=>e+1)},[e])}},47210:function(e,t,n){"use strict";n.d(t,{i:function(){return p}});var r=n(27378),o=n(55574);let i=/input|select|textarea|button|object/,a="a, input, select, textarea, button, object, [tabindex]";function c(e){let t=e.getAttribute("tabindex");return null===t&&(t=void 0),parseInt(t,10)}function s(e){let t=e.nodeName.toLowerCase(),n=!Number.isNaN(c(e)),r=i.test(t)&&!e.disabled||e instanceof HTMLAnchorElement&&e.href||n;return r&&function(e){let t=e.getAttribute("aria-hidden")||e.getAttribute("hidden")||"hidden"===e.getAttribute("type");if(t)return!1;let n=e;for(;n&&n!==document.body&&11!==n.nodeType;){if("none"===n.style.display)return!1;n=n.parentNode}return!0}(e)}function l(e){let t=c(e),n=Number.isNaN(t);return(n||t>=0)&&s(e)}var u=n(72840),d=n(513);function p({children:e,active:t=!0,refProp:n="ref"}){let i=function(e=!0){let t=(0,r.useRef)(),n=(0,r.useRef)(null),i=e=>{let t=e.querySelector("[data-autofocus]");if(!t){let n=Array.from(e.querySelectorAll(a));!(t=n.find(l)||n.find(s)||null)&&s(e)&&(t=e)}t&&t.focus({preventScroll:!0})},c=(0,r.useCallback)(r=>{if(e){if(null===r){n.current&&(n.current(),n.current=null);return}n.current=function(e,t="body > :not(script)"){let n=(0,o.k)(),r=Array.from(document.querySelectorAll(t)).map(t=>{if(t?.shadowRoot?.contains(e)||t.contains(e))return;let r=t.getAttribute("aria-hidden"),o=t.getAttribute("data-hidden"),i=t.getAttribute("data-focus-id");return t.setAttribute("data-focus-id",n),null===r||"false"===r?t.setAttribute("aria-hidden","true"):o||i||t.setAttribute("data-hidden",r),{node:t,ariaHidden:o||null}});return()=>{r.forEach(e=>{e&&n===e.node.getAttribute("data-focus-id")&&(null===e.ariaHidden?e.node.removeAttribute("aria-hidden"):e.node.setAttribute("aria-hidden",e.ariaHidden),e.node.removeAttribute("data-focus-id"),e.node.removeAttribute("data-hidden"))})}}(r),t.current!==r&&(r?(setTimeout(()=>{r.getRootNode()&&i(r)}),t.current=r):t.current=null)}},[e]);return(0,r.useEffect)(()=>{if(!e)return;t.current&&setTimeout(()=>i(t.current));let r=e=>{"Tab"===e.key&&t.current&&function(e,t){let n=Array.from(e.querySelectorAll(a)).filter(l);if(!n.length){t.preventDefault();return}let r=n[t.shiftKey?0:n.length-1],o=e.getRootNode(),i=r===o.activeElement||e===o.activeElement,c=o.activeElement,s="INPUT"===c.tagName&&"radio"===c.getAttribute("type");if(s){let e=n.filter(e=>"radio"===e.getAttribute("type")&&e.getAttribute("name")===c.getAttribute("name"));i=e.includes(r)}if(!i)return;t.preventDefault();let u=n[t.shiftKey?n.length-1:0];u&&u.focus()}(t.current,e)};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r),n.current&&n.current()}},[e]),c}(t),c=(0,u.Yx)(i,e?.ref);return(0,d.k)(e)?(0,r.cloneElement)(e,{[n]:c}):e}p.displayName="@mantine/core/FocusTrap"},22971:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-4081bf90"};let d={preventGrowOverflow:!0,gap:"md",align:"center",justify:"flex-start",wrap:"wrap"},p=(0,i.Z)((e,{grow:t,preventGrowOverflow:n,gap:r,align:i,justify:a,wrap:c},{childWidth:s})=>({root:{"--group-child-width":t&&n?s:void 0,"--group-gap":(0,o.bG)(r),"--group-align":i,"--group-justify":a,"--group-wrap":c}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Group",d,e),{classNames:i,className:l,style:m,styles:f,unstyled:g,children:h,gap:y,align:v,justify:b,wrap:k,grow:x,preventGrowOverflow:w,vars:E,variant:C,__size:F,mod:S,...B}=n,j=r.Children.toArray(h).filter(Boolean),I=j.length,M=(0,o.bG)(y??"md"),D=`calc(${100/I}% - (${M} - ${M} / ${I}))`,T=(0,c.y)({name:"Group",props:n,stylesCtx:{childWidth:D},className:l,style:m,classes:u,classNames:i,styles:f,unstyled:g,vars:E,varsResolver:p});return r.createElement(s.x,{...T("root"),ref:t,variant:C,mod:[{grow:x},S],size:F,...B},j)});m.classes=u,m.displayName="@mantine/core/Group"},26853:function(e,t,n){"use strict";n.d(t,{y:function(){return l}});var r=n(27378),o=n(96739),i=n(50332),a=n(20804),Text=n(26569);function c(e){return e.replace(/[-[\]{}()*+?.,\\^$|#]/g,"\\$&")}let s={},l=(0,i.b)((e,t)=>{let{unstyled:n,children:i,highlight:l,highlightStyles:u,color:d,...p}=(0,o.w)("Highlight",s,e),m=function(e,t){if(null==t)return[{chunk:e,highlighted:!1}];let n=Array.isArray(t)?t.map(c):c(t),r=Array.isArray(n)?n.filter(e=>e.trim().length>0).length>0:""!==n.trim();if(!r)return[{chunk:e,highlighted:!1}];let o="string"==typeof n?n.trim():n.filter(e=>0!==e.trim().length).map(e=>e.trim()).sort((e,t)=>t.length-e.length).join("|"),i=RegExp(`(${o})`,"gi"),a=e.split(i).map(e=>({chunk:e,highlighted:i.test(e)})).filter(({chunk:e})=>e);return a}(i,l);return r.createElement(Text.x,{unstyled:n,ref:t,...p,__staticSelector:"Highlight"},m.map(({chunk:e,highlighted:t},o)=>t?r.createElement(a.v,{unstyled:n,key:o,color:d,style:u,"data-highlight":e},e):r.createElement("span",{key:o},e)))});l.classes=Text.x.classes,l.displayName="@mantine/core/Highlight"},91549:function(e,t,n){"use strict";n.d(t,{Z:function(){return u},J:function(){return l}});var r=n(27378),o=n(92082),i=n(6231),a=n(56589),c=n(42487),s={root:"m-5f75b09e",body:"m-5f6e695e",labelWrapper:"m-d3ea56bb",label:"m-8ee546b8",description:"m-328f68c0",error:"m-8e8a99cc"};let l=s,u=(0,r.forwardRef)(({__staticSelector:e,__stylesApiProps:t,className:n,classNames:l,styles:u,unstyled:d,children:p,label:m,description:f,id:g,disabled:h,error:y,size:v,labelPosition:b="left",variant:k,style:x,vars:w,...E},C)=>{let F=(0,i.y)({name:e,props:t,className:n,style:x,classes:s,classNames:l,styles:u,unstyled:d});return r.createElement(a.x,{...F("root"),ref:C,__vars:{"--label-fz":(0,o.yv)(v),"--label-lh":(0,o.ap)(v,"label-lh")},mod:{"label-position":b},variant:k,size:v,...E},r.createElement("div",{...F("body")},p,r.createElement("div",{...F("labelWrapper"),"data-disabled":h||void 0},m&&r.createElement("label",{...F("label"),"data-disabled":h||void 0,htmlFor:g},m),f&&r.createElement(c.I.Description,{size:v,__inheritStyles:!1,...F("description")},f),y&&"boolean"!==y&&r.createElement(c.I.Error,{size:v,__inheritStyles:!1,...F("error")},y))))});u.displayName="@mantine/core/InlineInput"},42487:function(e,t,n){"use strict";n.d(t,{I:function(){return T}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(96739),s=n(6231),l=n(55934),u=n(56589),d=n(50332),p=n(20410),m=n(5739),f={wrapper:"m-6c018570",input:"m-8fb7ebe7",section:"m-82577fc2",placeholder:"m-88bacfd0",root:"m-46b77525",label:"m-8fdc1311",required:"m-78a94662",error:"m-8f816625",description:"m-fe47ce59"};let g={},h=(0,a.Z)((e,{size:t})=>({description:{"--input-description-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`}})),y=(0,p.d)((e,t)=>{let n=(0,c.w)("InputDescription",g,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,size:y,__staticSelector:v,__inheritStyles:b=!0,variant:k,...x}=(0,c.w)("InputDescription",g,n),w=(0,m.D)(),E=(0,s.y)({name:["InputWrapper",v],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"description",vars:p,varsResolver:h}),C=b&&w?.getStyles||E;return r.createElement(u.x,{component:"p",ref:t,variant:k,size:y,...C("description"),...x})});y.classes=f,y.displayName="@mantine/core/InputDescription";let v={},b=(0,a.Z)((e,{size:t})=>({error:{"--input-error-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`}})),k=(0,p.d)((e,t)=>{let n=(0,c.w)("InputError",v,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,size:g,__staticSelector:h,__inheritStyles:y=!0,variant:k,...x}=n,w=(0,s.y)({name:["InputWrapper",h],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"error",vars:p,varsResolver:b}),E=(0,m.D)(),C=y&&E?.getStyles||w;return r.createElement(u.x,{component:"p",ref:t,variant:k,size:g,...C("error"),...x})});k.classes=f,k.displayName="@mantine/core/InputError";let x={labelElement:"label"},w=(0,a.Z)((e,{size:t})=>({label:{"--input-label-size":(0,i.yv)(t),"--input-asterisk-color":void 0}})),E=(0,p.d)((e,t)=>{let n=(0,c.w)("InputLabel",x,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,labelElement:g,size:h,required:y,htmlFor:v,onMouseDown:b,children:k,__staticSelector:E,variant:C,mod:F,...S}=(0,c.w)("InputLabel",x,n),B=(0,s.y)({name:["InputWrapper",E],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"label",vars:p,varsResolver:w}),j=(0,m.D)(),I=j?.getStyles||B;return r.createElement(u.x,{...I("label"),component:g,variant:C,size:h,ref:t,htmlFor:"label"===g?v:void 0,mod:[{required:y},F],onMouseDown:e=>{b?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault()},...S},k,y&&r.createElement("span",{...I("required"),"aria-hidden":!0}," *"))});E.classes=f,E.displayName="@mantine/core/InputLabel";let C={},F=(0,p.d)((e,t)=>{let n=(0,c.w)("InputPlaceholder",C,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,__staticSelector:m,variant:g,error:h,mod:y,...v}=(0,c.w)("InputPlaceholder",C,n),b=(0,s.y)({name:["InputPlaceholder",m],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"placeholder"});return r.createElement(u.x,{...b("placeholder"),mod:[{error:!!h},y],component:"span",variant:g,ref:t,...v})});F.classes=f,F.displayName="@mantine/core/InputPlaceholder";var S=n(31002);let B={labelElement:"label",inputContainer:e=>e,inputWrapperOrder:["label","description","input","error"]},j=(0,a.Z)((e,{size:t})=>({label:{"--input-label-size":(0,i.yv)(t),"--input-asterisk-color":void 0},error:{"--input-error-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`},description:{"--input-description-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`}})),I=(0,p.d)((e,t)=>{let n=(0,c.w)("InputWrapper",B,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,size:g,variant:h,__staticSelector:v,inputContainer:b,inputWrapperOrder:x,label:w,error:C,description:F,labelProps:I,descriptionProps:M,errorProps:D,labelElement:T,children:A,withAsterisk:P,id:R,required:N,__stylesApiProps:L,mod:H,...$}=n,O=(0,s.y)({name:["InputWrapper",v],props:L||n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,vars:p,varsResolver:j}),z={size:g,variant:h,__staticSelector:v},_=(0,S.M)(R),V=D?.id||`${_}-error`,Z=M?.id||`${_}-description`,G=!!C&&"boolean"!=typeof C,W=!!F,q=`${G?V:""} ${W?Z:""}`,Y=q.trim().length>0?q.trim():void 0,U=I?.id||`${_}-label`,K=w&&r.createElement(E,{key:"label",labelElement:T,id:U,htmlFor:_,required:"boolean"==typeof P?P:N,...z,...I},w),X=W&&r.createElement(y,{key:"description",...M,...z,size:M?.size||z.size,id:M?.id||Z},F),J=r.createElement(r.Fragment,{key:"input"},b(A)),Q=G&&r.createElement(k,{...D,...z,size:D?.size||z.size,key:"error",id:D?.id||V},C),ee=x.map(e=>{switch(e){case"label":return K;case"input":return J;case"description":return X;case"error":return Q;default:return null}});return r.createElement(m.I,{value:{getStyles:O,describedBy:Y,inputId:_,labelId:U,...function(e,{hasDescription:t,hasError:n}){let r=e.findIndex(e=>"input"===e),o=e[r-1],i=e[r+1];return{offsetBottom:t&&"description"===i||n&&"error"===i,offsetTop:t&&"description"===o||n&&"error"===o}}(x,{hasDescription:W,hasError:G})}},r.createElement(u.x,{ref:t,variant:h,size:g,mod:[{error:!!C},H],...O("root"),...$},ee))});I.classes=f,I.displayName="@mantine/core/InputWrapper";let M={variant:"default",leftSectionPointerEvents:"none",rightSectionPointerEvents:"none",withAria:!0,withErrorStyles:!0},D=(0,a.Z)((e,t,n)=>({wrapper:{"--input-margin-top":n.offsetTop?"calc(var(--mantine-spacing-xs) / 2)":void 0,"--input-margin-bottom":n.offsetBottom?"calc(var(--mantine-spacing-xs) / 2)":void 0,"--input-height":(0,i.ap)(t.size,"input-height"),"--input-fz":(0,i.yv)(t.size),"--input-radius":void 0===t.radius?void 0:(0,i.H5)(t.radius),"--input-left-section-width":void 0!==t.leftSectionWidth?(0,o.h)(t.leftSectionWidth):void 0,"--input-right-section-width":void 0!==t.rightSectionWidth?(0,o.h)(t.rightSectionWidth):void 0,"--input-padding-y":t.multiline?(0,i.ap)(t.size,"input-padding-y"):void 0,"--input-left-section-pointer-events":t.leftSectionPointerEvents,"--input-right-section-pointer-events":t.rightSectionPointerEvents}})),T=(0,d.b)((e,t)=>{let n=(0,c.w)("Input",M,e),{classNames:o,className:i,style:a,styles:d,unstyled:p,required:g,__staticSelector:h,__stylesApiProps:y,size:v,wrapperProps:b,error:k,disabled:x,leftSection:w,leftSectionProps:E,leftSectionWidth:C,rightSection:F,rightSectionProps:S,rightSectionWidth:B,rightSectionPointerEvents:j,leftSectionPointerEvents:I,variant:T,vars:A,pointer:P,multiline:R,radius:N,id:L,withAria:H,withErrorStyles:$,mod:O,...z}=n,{styleProps:_,rest:V}=(0,l.c)(z),Z=(0,m.D)(),G={offsetBottom:Z?.offsetBottom,offsetTop:Z?.offsetTop},W=(0,s.y)({name:["Input",h],props:y||n,classes:f,className:i,style:a,classNames:o,styles:d,unstyled:p,stylesCtx:G,rootSelector:"wrapper",vars:A,varsResolver:D}),q=H?{required:g,disabled:x,"aria-invalid":!!k,"aria-describedby":Z?.describedBy,id:Z?.inputId||L}:{};return r.createElement(u.x,{...W("wrapper"),..._,...b,mod:[{error:!!k&&$,pointer:P,disabled:x,multiline:R,"data-with-right-section":!!F,"data-with-left-section":!!w},O],variant:T,size:v},w&&r.createElement("div",{...E,"data-position":"left",...W("section",{className:E?.className,style:E?.style})},w),r.createElement(u.x,{component:"input",...V,...q,ref:t,required:g,mod:{disabled:x,error:!!k&&$},variant:T,...W("input")}),F&&r.createElement("div",{...S,"data-position":"right",...W("section",{className:S?.className,style:S?.style})},F))});T.classes=f,T.Wrapper=I,T.Label=E,T.Error=k,T.Description=y,T.Placeholder=F,T.displayName="@mantine/core/Input"},5739:function(e,t,n){"use strict";n.d(t,{D:function(){return i},I:function(){return o}}),n(27378);var r=n(89871);let[o,i]=(0,r.V)({offsetBottom:!1,offsetTop:!1,describedBy:void 0,getStyles:null,inputId:void 0,labelId:void 0})},69859:function(e,t,n){"use strict";n.d(t,{k:function(){return i}}),n(27378);var r=n(96739),o=n(55934);function i(e,t,n){let i=(0,r.w)(e,t,n),{label:a,description:c,error:s,required:l,classNames:u,styles:d,className:p,unstyled:m,__staticSelector:f,__stylesApiProps:g,errorProps:h,labelProps:y,descriptionProps:v,wrapperProps:b,id:k,size:x,style:w,inputContainer:E,inputWrapperOrder:C,withAsterisk:F,variant:S,vars:B,mod:j,...I}=i,{styleProps:M,rest:D}=(0,o.c)(I),T={label:a,description:c,error:s,required:l,classNames:u,className:p,__staticSelector:f,__stylesApiProps:g||i,errorProps:h,labelProps:y,descriptionProps:v,unstyled:m,styles:d,size:x,style:w,inputContainer:E,inputWrapperOrder:C,withAsterisk:F,variant:S,id:k,mod:j,...b};return{...D,classNames:u,styles:d,unstyled:m,wrapperProps:{...T,...M},inputProps:{required:l,classNames:u,styles:d,unstyled:m,size:x,__staticSelector:f,__stylesApiProps:g||i,error:s,variant:S,id:k}}}},23163:function(e,t,n){"use strict";n.d(t,{M:function(){return s}});var r=n(27378),o=n(50332),i=n(42487),a=n(69859);let c={__staticSelector:"InputBase",withAria:!0},s=(0,o.b)((e,t)=>{let{inputProps:n,wrapperProps:o,...s}=(0,a.k)("InputBase",c,e);return r.createElement(i.I.Wrapper,{...o},r.createElement(i.I,{...n,...s,ref:t}))});s.classes={...i.I.classes,...i.I.Wrapper.classes},s.displayName="@mantine/core/InputBase"},96606:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(27378),o=n(5739);function i({children:e,role:t}){let n=(0,o.D)();return n?r.createElement("div",{role:t,"aria-labelledby":n.labelId,"aria-describedby":n.describedBy},e):r.createElement(r.Fragment,null,e)}},1358:function(e,t,n){"use strict";n.d(t,{T:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-dc6f14e2"};let d={},p=(0,i.Z)((e,{size:t})=>({root:{"--kbd-fz":(0,o.ap)(t,"kbd-fz"),"--kbd-padding":(0,o.ap)(t,"kbd-padding")}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Kbd",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:g,...h}=n,y=(0,c.y)({name:"Kbd",classes:u,props:n,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return r.createElement(s.x,{component:"kbd",ref:t,...y("root"),...h})});m.classes=u,m.displayName="@mantine/core/Kbd"},42029:function(e,t,n){"use strict";n.d(t,{a:function(){return b}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(96739),s=n(6231),l=n(56589),u=n(20410),d=n(40624),p={root:"m-5ae2e3c",barsLoader:"m-7a2bd4cd",bar:"m-870bb79","bars-loader-animation":"m-5d2b3b9d",dotsLoader:"m-4e3f22d7",dot:"m-870c4af","loader-dots-animation":"m-aac34a1",ovalLoader:"m-b34414df","oval-loader-animation":"m-f8e89c4b"};let m=(0,r.forwardRef)(({className:e,...t},n)=>r.createElement(l.x,{component:"span",className:(0,d.Z)(p.barsLoader,e),...t,ref:n},r.createElement("span",{className:p.bar}),r.createElement("span",{className:p.bar}),r.createElement("span",{className:p.bar}))),f=(0,r.forwardRef)(({className:e,...t},n)=>r.createElement(l.x,{component:"span",className:(0,d.Z)(p.dotsLoader,e),...t,ref:n},r.createElement("span",{className:p.dot}),r.createElement("span",{className:p.dot}),r.createElement("span",{className:p.dot}))),g=(0,r.forwardRef)(({className:e,...t},n)=>r.createElement(l.x,{component:"span",className:(0,d.Z)(p.ovalLoader,e),...t,ref:n})),h={bars:m,oval:g,dots:f},y={loaders:h,type:"oval"},v=(0,i.Z)((e,{size:t,color:n})=>({root:{"--loader-size":(0,o.ap)(t,"loader-size"),"--loader-color":n?(0,a.p)(n,e):void 0}})),b=(0,u.d)((e,t)=>{let n=(0,c.w)("Loader",y,e),{size:o,color:i,type:a,vars:u,className:d,style:m,classNames:f,styles:g,unstyled:h,loaders:b,variant:k,children:x,...w}=n,E=(0,s.y)({name:"Loader",props:n,classes:p,className:d,style:m,classNames:f,styles:g,unstyled:h,vars:u,varsResolver:v});return x?r.createElement(l.x,{...E("root"),ref:t,...w},x):r.createElement(l.x,{...E("root"),ref:t,component:b[a],variant:k,size:o,...w})});b.defaultLoaders=h,b.classes=p,b.displayName="@mantine/core/Loader"},20804:function(e,t,n){"use strict";n.d(t,{v:function(){return f}});var r=n(27378),o=n(83453),i=n(96739),a=n(6231),c=n(56589),s=n(20410),l=n(88193);function u({color:e,theme:t,defaultShade:n}){let r=(0,l.E)({color:e,theme:t});return r.isThemeColor?void 0===r.shade?`var(--mantine-color-${r.color}-${n})`:`var(${r.variable})`:e}var d={root:"m-bcb3f3c2"};let p={color:"yellow"},m=(0,o.Z)((e,{color:t})=>({root:{"--mark-bg-dark":u({color:t,theme:e,defaultShade:5}),"--mark-bg-light":u({color:t,theme:e,defaultShade:2})}})),f=(0,s.d)((e,t)=>{let n=(0,i.w)("Mark",p,e),{classNames:o,className:s,style:l,styles:u,unstyled:f,vars:g,color:h,variant:y,...v}=n,b=(0,a.y)({name:"Mark",props:n,className:s,style:l,classes:d,classNames:o,styles:u,unstyled:f,vars:g,varsResolver:m});return r.createElement(c.x,{component:"mark",ref:t,variant:y,...b("root"),...v})});f.classes=d,f.displayName="@mantine/core/Mark"},82409:function(e,t,n){"use strict";n.d(t,{v:function(){return H}});var r=n(27378),o=n(58675),i=n(82591),a=n(98783),c=n(5564),s=n(6231),l=n(96739),u=n(91531),d=n(63433),p=n(71656);let[m,f]=(0,p.R)("Menu component was not found in the tree");var g=n(56589),h=n(20410),y={dropdown:"m-dc9b7c9f",label:"m-9bfac126",divider:"m-efdf90cb",item:"m-99ac2aa1",itemLabel:"m-5476e0d3",itemSection:"m-8b75e504"};let v={},b=(0,h.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,...s}=(0,l.w)("MenuDivider",v,e),u=f();return r.createElement(g.x,{ref:t,...u.getStyles("divider",{className:o,style:i,styles:a,classNames:n}),...s})});b.classes=y,b.displayName="@mantine/core/MenuDivider";var k=n(72840),x=n(41664);let w={},E=(0,h.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,onMouseEnter:s,onMouseLeave:u,children:p,...m}=(0,l.w)("MenuDropdown",w,e),g=(0,r.useRef)(null),h=f(),y=(0,x.x)(s,()=>("hover"===h.trigger||"click-hover"===h.trigger)&&h.openDropdown()),v=(0,x.x)(u,()=>("hover"===h.trigger||"click-hover"===h.trigger)&&h.closeDropdown());return r.createElement(d.J.Dropdown,{...m,onMouseEnter:y,onMouseLeave:v,role:"menu","aria-orientation":"vertical",ref:(0,k.Yx)(t,g),...h.getStyles("dropdown",{className:o,style:i,styles:a,classNames:n,withStaticClass:!1}),tabIndex:-1,"data-menu-dropdown":!0,onKeyDown:e=>{("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.preventDefault(),g.current?.querySelectorAll("[data-menu-item]:not(:disabled)")[0]?.focus())}},r.createElement("div",{tabIndex:-1,"data-autofocus":!0}),p)});E.classes=y,E.displayName="@mantine/core/MenuDropdown";var C=n(61734),F=n(88193),S=n(2256),B=n(50332),j=n(49134),I=n(19397);let M={},D=(0,B.b)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,color:s,closeMenuOnClick:u,leftSection:d,rightSection:p,children:m,disabled:g,...h}=(0,l.w)("MenuItem",M,e),y=f(),v=(0,S.rZ)(),{dir:b}=(0,j.gm)(),w=(0,r.useRef)(),E=y.getItemIndex(w.current),B=(0,x.x)(h.onMouseLeave,()=>y.setHovered(-1)),D=(0,x.x)(h.onMouseEnter,()=>y.setHovered(y.getItemIndex(w.current))),T=(0,x.x)(h.onClick,()=>{"boolean"==typeof u?u&&y.closeDropdownImmediately():y.closeOnItemClick&&y.closeDropdownImmediately()}),A=(0,x.x)(h.onFocus,()=>y.setHovered(y.getItemIndex(w.current))),P=s?v.variantColorResolver({color:s,theme:v,variant:"light"}):void 0,R=s?(0,F.E)({color:s,theme:v}):null;return r.createElement(I.k,{...h,unstyled:y.unstyled,tabIndex:y.menuItemTabIndex,onFocus:A,...y.getStyles("item",{className:o,style:i,styles:a,classNames:n}),ref:(0,k.Yx)(w,t),role:"menuitem",disabled:g,"data-menu-item":!0,"data-disabled":g||void 0,"data-hovered":y.hovered===E||void 0,onMouseEnter:D,onMouseLeave:B,onClick:T,onKeyDown:(0,C.R)({siblingSelector:"[data-menu-item]",parentSelector:"[data-menu-dropdown]",activateOnFocus:!1,loop:y.loop,dir:b,orientation:"vertical",onKeyDown:h.onKeydown}),__vars:{"--menu-item-color":R?.isThemeColor&&R?.shade===void 0?`var(--mantine-color-${R.color}-6)`:P?.color,"--menu-item-hover":P?.hover}},d&&r.createElement("div",{...y.getStyles("itemSection",{styles:a,classNames:n}),"data-position":"left"},d),m&&r.createElement("div",{...y.getStyles("itemLabel",{styles:a,classNames:n})},m),p&&r.createElement("div",{...y.getStyles("itemSection",{styles:a,classNames:n}),"data-position":"right"},p))});D.classes=y,D.displayName="@mantine/core/MenuItem";let T={},A=(0,h.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,...s}=(0,l.w)("MenuLabel",T,e),u=f();return r.createElement(g.x,{ref:t,...u.getStyles("label",{className:o,style:i,styles:a,classNames:n}),...s})});A.classes=y,A.displayName="@mantine/core/MenuLabel";var P=n(513);let R={refProp:"ref"},N=(0,r.forwardRef)((e,t)=>{let{children:n,refProp:o,...i}=(0,l.w)("MenuTarget",R,e);if(!(0,P.k)(n))throw Error("Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let a=f(),c=(0,x.x)(n.props.onClick,()=>{"click"===a.trigger?a.toggleDropdown():"click-hover"!==a.trigger||(a.setOpenedViaClick(!0),a.opened||a.openDropdown())}),s=(0,x.x)(n.props.onMouseEnter,()=>("hover"===a.trigger||"click-hover"===a.trigger)&&a.openDropdown()),u=(0,x.x)(n.props.onMouseLeave,()=>{"hover"===a.trigger?a.closeDropdown():"click-hover"!==a.trigger||a.openedViaClick||a.closeDropdown()});return r.createElement(d.J.Target,{refProp:o,popupType:"menu",ref:t,...i},(0,r.cloneElement)(n,{onClick:c,onMouseEnter:s,onMouseLeave:u,"data-expanded":!!a.opened||void 0}))});N.displayName="@mantine/core/MenuTarget";let L={trapFocus:!0,closeOnItemClick:!0,clickOutsideEvents:["mousedown","touchstart","keydown"],loop:!0,trigger:"click",openDelay:0,closeDelay:100,menuItemTabIndex:-1};function H(e){let t=(0,l.w)("Menu",L,e),{children:n,onOpen:p,onClose:f,opened:g,defaultOpened:h,trapFocus:v,onChange:b,closeOnItemClick:k,loop:x,closeOnEscape:w,trigger:E,openDelay:C,closeDelay:F,classNames:S,styles:B,unstyled:j,variant:I,vars:M,menuItemTabIndex:D,...T}=t,A=(0,s.y)({name:"Menu",classes:y,props:t,classNames:S,styles:B,unstyled:j}),[P,{setHovered:R,resetHovered:N}]=function(){let[e,t]=(0,r.useState)(-1);return[e,{setHovered:t,resetHovered:()=>t(-1)}]}(),[H,$]=(0,o.C)({value:g,defaultValue:h,finalValue:!1,onChange:b}),[O,z]=(0,r.useState)(!1),_=()=>{$(!1),z(!1),H&&f?.()},V=()=>{$(!0),H||p?.()},Z=()=>{H?_():V()},{openDropdown:G,closeDropdown:W}=(0,u.U)({open:V,close:_,closeDelay:F,openDelay:C}),{resolvedClassNames:q,resolvedStyles:Y}=(0,c.h)({classNames:S,styles:B,props:t});return(0,i.l)(()=>{N()},[H]),r.createElement(m,{value:{getStyles:A,opened:H,toggleDropdown:Z,getItemIndex:e=>e?Array.from(a.p(e,"[data-menu-dropdown]")?.querySelectorAll("[data-menu-item]")||[]).findIndex(t=>t===e):null,hovered:P,setHovered:R,openedViaClick:O,setOpenedViaClick:z,closeOnItemClick:k,closeDropdown:"click"===E?_:W,openDropdown:"click"===E?V:G,closeDropdownImmediately:_,loop:x,trigger:E,unstyled:j,menuItemTabIndex:D}},r.createElement(d.J,{...T,opened:H,onChange:Z,defaultOpened:h,trapFocus:v,closeOnEscape:w,__staticSelector:"Menu",classNames:q,styles:Y,unstyled:j,variant:I},n))}H.extend=e=>e,H.classes=y,H.displayName="@mantine/core/Menu",H.Item=D,H.Label=A,H.Dropdown=E,H.Target=N,H.Divider=b},72120:function(e,t,n){"use strict";n.d(t,{u:function(){return $}});var r=n(27378),o=n(13041),i=n(96739),a=n(20410),c=n(65784),s=n(71656);let[l,u]=(0,s.R)("Modal component was not found in tree");var d={root:"m-9df02822",content:"m-54c44539",inner:"m-1f958f16",header:"m-d0e2b9cd"};let p={},m=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalBody",p,e),{classNames:o,className:a,style:s,styles:l,vars:d,...m}=n,f=u();return r.createElement(c.y,{ref:t,...f.getStyles("body",{classNames:o,style:s,styles:l,className:a}),...m})});m.classes=d,m.displayName="@mantine/core/ModalBody";var f=n(76643);let g={},h=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalCloseButton",g,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(f._,{ref:t,...p.getStyles("close",{classNames:o,style:c,styles:s,className:a}),...d})});h.classes=d,h.displayName="@mantine/core/ModalCloseButton";var y=n(71078),v=n(22344),b=n(4588);let k={},x=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalContent",k,e),{classNames:o,className:a,style:c,styles:s,vars:l,children:d,...p}=n,m=u(),f=m.scrollAreaComponent||b.Z;return r.createElement(v.G,{...m.getStyles("content",{className:a,style:c,styles:s,classNames:o}),innerProps:m.getStyles("inner",{className:a,style:c,styles:s,classNames:o}),ref:t,...p},r.createElement(f,{style:{maxHeight:`calc(100vh - (${(0,y.h)(m.yOffset)} * 2))`}},d))});x.classes=d,x.displayName="@mantine/core/ModalContent";var w=n(71281);let E={},C=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalHeader",E,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(w.o,{ref:t,...p.getStyles("header",{classNames:o,style:c,styles:s,className:a}),...d})});C.classes=d,C.displayName="@mantine/core/ModalHeader";var F=n(51382);let S={},B=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalOverlay",S,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(F.e,{ref:t,...p.getStyles("overlay",{classNames:o,style:c,styles:s,className:a}),...d})});B.classes=d,B.displayName="@mantine/core/ModalOverlay";var j=n(92082),I=n(83453),M=n(6231),D=n(45058);let T={__staticSelector:"Modal",closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),transitionProps:{duration:200,transition:"pop"},yOffset:"5dvh"},A=(0,I.Z)((e,{radius:t,size:n,yOffset:r,xOffset:o})=>({root:{"--modal-radius":void 0===t?void 0:(0,j.H5)(t),"--modal-size":(0,j.ap)(n,"modal-size"),"--modal-y-offset":(0,y.h)(r),"--modal-x-offset":(0,y.h)(o)}})),P=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalRoot",T,e),{classNames:o,className:a,style:c,styles:s,unstyled:u,vars:p,yOffset:m,scrollAreaComponent:f,radius:g,fullScreen:h,centered:y,xOffset:v,__staticSelector:b,...k}=n,x=(0,M.y)({name:b,classes:d,props:n,className:a,style:c,classNames:o,styles:s,unstyled:u,vars:p,varsResolver:A});return r.createElement(l,{value:{yOffset:m,scrollAreaComponent:f,getStyles:x}},r.createElement(D.e,{ref:t,...x("root"),"data-full-screen":h||void 0,"data-centered":y||void 0,unstyled:u,...k}))});P.classes=d,P.displayName="@mantine/core/ModalRoot";var R=n(86053);let N={},L=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalTitle",N,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(R.q,{ref:t,...p.getStyles("title",{classNames:o,style:c,styles:s,className:a}),...d})});L.classes=d,L.displayName="@mantine/core/ModalTitle";let H={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),transitionProps:{duration:200,transition:"pop"},withOverlay:!0,withCloseButton:!0},$=(0,a.d)((e,t)=>{let{title:n,withOverlay:o,overlayProps:a,withCloseButton:c,closeButtonProps:s,children:l,radius:u,...d}=(0,i.w)("Modal",H,e),p=!!n||c;return r.createElement(P,{ref:t,radius:u,...d},o&&r.createElement(B,{...a}),r.createElement(x,{radius:u},p&&r.createElement(C,null,n&&r.createElement(L,null,n),c&&r.createElement(h,{...s})),r.createElement(m,null,l)))});$.classes=d,$.displayName="@mantine/core/Modal",$.Root=P,$.Overlay=B,$.Content=x,$.Body=m,$.Header=C,$.Title=L,$.CloseButton=h},6959:function(e,t,n){"use strict";n.d(t,{i:function(){return o},q:function(){return i}}),n(27378);var r=n(71656);let[o,i]=(0,r.R)("ModalBase component was not found in tree")},45058:function(e,t,n){"use strict";n.d(t,{e:function(){return f}});var r=n(27378),o=n(82827),i=n(13041),a=n(92082),c=n(56589),s=n(15666),l=n(6959),u=n(31002),d=n(56617),p=n(13955),m=n(82269);let f=(0,r.forwardRef)(({keepMounted:e,opened:t,onClose:n,id:f,transitionProps:g,trapFocus:h,closeOnEscape:y,returnFocus:v,closeOnClickOutside:b,withinPortal:k,portalProps:x,lockScroll:w,children:E,zIndex:C,shadow:F,padding:S,__vars:B,unstyled:j,removeScrollProps:I,...M},D)=>{let{_id:T,titleMounted:A,bodyMounted:P,shouldLockScroll:R,setTitleMounted:N,setBodyMounted:L}=function({id:e,transitionProps:t,opened:n,trapFocus:o,closeOnEscape:i,onClose:a,returnFocus:c}){let s=(0,u.M)(e),[l,f]=(0,r.useState)(!1),[g,h]=(0,r.useState)(!1),y="number"==typeof t?.duration?t?.duration:200,v=function({opened:e,transitionDuration:t}){let[n,o]=(0,r.useState)(e),i=(0,r.useRef)(),a=(0,m.J)(),c=a?0:t;return(0,r.useEffect)(()=>(e?(o(!0),window.clearTimeout(i.current)):0===c?o(!1):i.current=window.setTimeout(()=>o(!1),c),()=>window.clearTimeout(i.current)),[e,c]),n}({opened:n,transitionDuration:y});return(0,d.s)("keydown",e=>{!o&&"Escape"===e.key&&i&&a()}),(0,p.u)({opened:n,shouldReturnFocus:o&&c}),{_id:s,titleMounted:l,bodyMounted:g,shouldLockScroll:v,setTitleMounted:f,setBodyMounted:h}}({id:f,transitionProps:g,opened:t,trapFocus:h,closeOnEscape:y,onClose:n,returnFocus:v});return r.createElement(s.q,{...x,withinPortal:k},r.createElement(l.i,{value:{opened:t,onClose:n,closeOnClickOutside:b,transitionProps:{...g,keepMounted:e},getTitleId:()=>`${T}-title`,getBodyId:()=>`${T}-body`,titleMounted:A,bodyMounted:P,setTitleMounted:N,setBodyMounted:L,trapFocus:h,closeOnEscape:y,zIndex:C,unstyled:j}},r.createElement(o.Z,{enabled:R&&w,...I},r.createElement(c.x,{ref:D,...M,__vars:{...B,"--mb-z-index":(C||(0,i.w)("modal")).toString(),"--mb-shadow":(0,a.Xj)(F),"--mb-padding":(0,a.bG)(S)}},E))))})},99643:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={title:"m-615af6c9",header:"m-b5489c3c",inner:"m-60c222c7",content:"m-fd1ab0aa",close:"m-606cb269",body:"m-5df29311"}},65784:function(e,t,n){"use strict";n.d(t,{y:function(){return s}});var r=n(27378),o=n(40624),i=n(56589),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,...t},n)=>{let s=function(){let e=(0,a.q)();return(0,r.useEffect)(()=>(e.setBodyMounted(!0),()=>e.setBodyMounted(!1)),[]),e.getBodyId()}(),l=(0,a.q)();return r.createElement(i.x,{ref:n,...t,id:s,className:(0,o.Z)({[c.Z.body]:!l.unstyled},e)})});s.displayName="@mantine/core/ModalBaseBody"},76643:function(e,t,n){"use strict";n.d(t,{_:function(){return s}});var r=n(27378),o=n(40624),i=n(96217),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,onClick:t,...n},s)=>{let l=(0,a.q)();return r.createElement(i.P,{ref:s,...n,onClick:e=>{l.onClose(),t?.(e)},className:(0,o.Z)({[c.Z.close]:!l.unstyled},e),unstyled:l.unstyled})});s.displayName="@mantine/core/ModalBaseCloseButton"},22344:function(e,t,n){"use strict";n.d(t,{G:function(){return u}});var r=n(27378),o=n(40624),i=n(47210),a=n(98477),c=n(88101),s=n(6959),l=n(99643);let u=(0,r.forwardRef)(({transitionProps:e,className:t,innerProps:n,onKeyDown:u,style:d,...p},m)=>{let f=(0,s.q)(),g=e=>{let t=e.target?.getAttribute("data-mantine-stop-propagation")!=="true";t&&"Escape"===e.key&&f.closeOnEscape&&f.onClose(),u?.(e)};return r.createElement(c.u,{mounted:f.opened,transition:"pop",...f.transitionProps,...e},e=>r.createElement("div",{...n,className:(0,o.Z)({[l.Z.inner]:!f.unstyled},n.className)},r.createElement(i.i,{active:f.opened&&f.trapFocus},r.createElement(a.X,{...p,component:"section",role:"dialog",tabIndex:-1,"aria-modal":!0,"aria-describedby":f.bodyMounted?f.getBodyId():void 0,"aria-labelledby":f.titleMounted?f.getTitleId():void 0,onKeyDown:g,ref:m,style:[d,e],className:(0,o.Z)({[l.Z.content]:!f.unstyled},t),unstyled:f.unstyled},p.children))))})},71281:function(e,t,n){"use strict";n.d(t,{o:function(){return s}});var r=n(27378),o=n(40624),i=n(56589),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,...t},n)=>{let s=(0,a.q)();return r.createElement(i.x,{component:"header",ref:n,className:(0,o.Z)({[c.Z.header]:!s.unstyled},e),...t})});s.displayName="@mantine/core/ModalBaseHeader"},51382:function(e,t,n){"use strict";n.d(t,{e:function(){return s}});var r=n(27378),o=n(7118),i=n(88101),a=n(6959);let c={duration:200,timingFunction:"ease",transition:"fade"},s=(0,r.forwardRef)(({onClick:e,transitionProps:t,style:n,...s},l)=>{let u=(0,a.q)(),d=function(e){let t=(0,a.q)();return{...c,...t.transitionProps,...e}}(t);return r.createElement(i.u,{mounted:u.opened,...d,transition:"fade"},t=>r.createElement(o.a,{ref:l,fixed:!0,style:[n,t],zIndex:u.zIndex,unstyled:u.unstyled,onClick:t=>{e?.(t),u.closeOnClickOutside&&u.onClose()},...s}))});s.displayName="@mantine/core/ModalBaseOverlay"},86053:function(e,t,n){"use strict";n.d(t,{q:function(){return s}});var r=n(27378),o=n(40624),i=n(56589),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,...t},n)=>{let s=function(){let e=(0,a.q)();return(0,r.useEffect)(()=>(e.setTitleMounted(!0),()=>e.setTitleMounted(!1)),[]),e.getTitleId()}(),l=(0,a.q)();return r.createElement(i.x,{component:"h2",ref:n,className:(0,o.Z)({[c.Z.title]:!l.unstyled},e),...t,id:s})});s.displayName="@mantine/core/ModalBaseTitle"},4588:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(27378);function o({children:e}){return r.createElement(r.Fragment,null,e)}},28764:function(e,t,n){"use strict";n.d(t,{p:function(){return d}});var r=n(27378),o=n(96739),i=n(20410),a=n(2161),c=n(13685),s=n(23163);function l({data:e}){if("group"in e){let t=e.items.map(e=>r.createElement(l,{key:e.value,data:e}));return r.createElement("optgroup",{label:e.group},t)}let{value:t,label:n,...o}=e;return r.createElement("option",{key:e.value,value:e.value,...o},e.label)}l.displayName="@mantine/core/NativeSelectOption";let u={rightSectionPointerEvents:"none"},d=(0,i.d)((e,t)=>{let{data:n,children:i,size:d,error:p,rightSection:m,unstyled:f,...g}=(0,o.w)("NativeSelect",u,e),h=(0,a.R)(n).map((e,t)=>r.createElement(l,{key:t,data:e}));return r.createElement(s.M,{component:"select",ref:t,...g,__staticSelector:"NativeSelect",size:d,pointer:!0,error:p,unstyled:f,rightSection:m||r.createElement(c.d,{size:d,error:p,unstyled:f})},i||h)});d.classes=s.M.classes,d.displayName="@mantine/core/NativeSelect"},2303:function(e,t,n){"use strict";n.d(t,{P:function(){return Notification}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(96739),s=n(6231),l=n(56589),u=n(20410),d=n(96217),p=n(42029),m={root:"m-a513464",icon:"m-a4ceffb",loader:"m-b0920b15",body:"m-a49ed24",title:"m-3feedf16",description:"m-3d733a3a",closeButton:"m-919a4d88"};let f={withCloseButton:!0},g=(0,i.Z)((e,{radius:t,color:n})=>({root:{"--notification-radius":void 0===t?void 0:(0,o.H5)(t),"--notification-color":n?(0,a.p)(n,e):void 0}})),Notification=(0,u.d)((e,t)=>{let n=(0,c.w)("Notification",f,e),{className:o,color:i,radius:a,loading:u,withCloseButton:h,withBorder:y,title:v,icon:b,children:k,onClose:x,closeButtonProps:w,classNames:E,style:C,styles:F,unstyled:S,variant:B,vars:j,mod:I,...M}=n,D=(0,s.y)({name:"Notification",classes:m,props:n,className:o,style:C,classNames:E,styles:F,unstyled:S,vars:j,varsResolver:g});return r.createElement(l.x,{...D("root"),mod:[{"data-with-icon":!!b||u,"data-with-border":y},I],ref:t,variant:B,...M,role:"alert"},b&&!u&&r.createElement("div",{...D("icon")},b),u&&r.createElement(p.a,{size:28,color:i,...D("loader")}),r.createElement("div",{...D("body")},v&&r.createElement("div",{...D("title")},v),r.createElement(l.x,{...D("description"),mod:{"data-with-title":!!v}},k)),h&&r.createElement(d.P,{iconSize:16,color:"gray",...w,unstyled:S,onClick:x,...D("closeButton")}))});Notification.classes=m,Notification.displayName="@mantine/core/Notification"},7118:function(e,t,n){"use strict";n.d(t,{a:function(){return h}});var r=n(27378),o=n(71078),i=n(13041),a=n(92082),c=n(83453),s=n(91948),l=n(96739),u=n(6231),d=n(56589),p=n(50332),m={root:"m-9814e45f"};let f={zIndex:(0,i.w)("modal")},g=(0,c.Z)((e,{gradient:t,color:n,backgroundOpacity:r,blur:i,radius:c,zIndex:l})=>({root:{"--overlay-bg":t||(void 0!==n||void 0!==r)&&(0,s.m)(n||"#000",r??.6)||void 0,"--overlay-filter":i?`blur(${(0,o.h)(i)})`:void 0,"--overlay-radius":void 0===c?void 0:(0,a.H5)(c),"--overlay-z-index":l?.toString()}})),h=(0,p.b)((e,t)=>{let n=(0,l.w)("Overlay",f,e),{classNames:o,className:i,style:a,styles:c,unstyled:s,vars:p,fixed:h,center:y,children:v,radius:b,zIndex:k,gradient:x,blur:w,color:E,backgroundOpacity:C,mod:F,...S}=n,B=(0,u.y)({name:"Overlay",props:n,classes:m,className:i,style:a,classNames:o,styles:c,unstyled:s,vars:p,varsResolver:g});return r.createElement(d.x,{ref:t,...B("root"),mod:[{center:y,fixed:h},F],...S},v)});h.classes=m,h.displayName="@mantine/core/Overlay"},98477:function(e,t,n){"use strict";n.d(t,{X:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(50332),u={root:"m-1b7284a3"};let d={},p=(0,i.Z)((e,{radius:t,shadow:n})=>({root:{"--paper-radius":void 0===t?void 0:(0,o.H5)(t),"--paper-shadow":(0,o.Xj)(n)}})),m=(0,l.b)((e,t)=>{let n=(0,a.w)("Paper",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,withBorder:g,vars:h,radius:y,shadow:v,variant:b,mod:k,...x}=n,w=(0,c.y)({name:"Paper",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return r.createElement(s.x,{ref:t,mod:[{"data-with-border":g},k],...w("root"),variant:b,...x})});m.classes=u,m.displayName="@mantine/core/Paper"},63433:function(e,t,n){"use strict";n.d(t,{J:function(){return z}});var r=n(27378),o=n(31002),i=n(93226),a=n(13041),c=n(92082),s=n(83453),l=n(96739),u=n(6231),d=n(49134),p=n(93177),m=n(71656);let[f,g]=(0,m.R)("Popover component was not found in the tree");var h=n(13955),y=n(72840),v=n(71078);let b=()=>{};var k=n(56589),x=n(20410),w=n(22211),E=n(47210),C=n(15666),F=n(88101),S={dropdown:"m-38a85659",arrow:"m-a31dc6c1"};let B={},j=(0,x.d)((e,t)=>{let n=(0,l.w)("PopoverDropdown",B,e),{className:o,style:i,vars:a,children:c,onKeyDownCapture:s,variant:u,classNames:d,styles:p,...m}=n,f=g(),x=(0,h.u)({opened:f.opened,shouldReturnFocus:f.returnFocus}),S=f.withRoles?{"aria-labelledby":f.getTargetId(),id:f.getDropdownId(),role:"dialog",tabIndex:-1}:{},j=(0,y.Yx)(t,f.floating);return f.disabled?null:r.createElement(C.q,{...f.portalProps,withinPortal:f.withinPortal},r.createElement(F.u,{mounted:f.opened,...f.transitionProps,transition:f.transitionProps?.transition||"fade",duration:f.transitionProps?.duration??150,keepMounted:f.keepMounted,exitDuration:"number"==typeof f.transitionProps?.exitDuration?f.transitionProps.exitDuration:f.transitionProps?.duration},e=>r.createElement(E.i,{active:f.trapFocus},r.createElement(k.x,{...S,...m,variant:u,ref:j,onKeyDownCapture:function(e,t={active:!0}){return"function"==typeof e&&t.active?n=>{"Escape"===n.key&&(e(n),t.onTrigger?.())}:t.onKeyDown||b}(f.onClose,{active:f.closeOnEscape,onTrigger:x,onKeyDown:s}),"data-position":f.placement,...f.getStyles("dropdown",{className:o,props:n,classNames:d,styles:p,style:[{...e,zIndex:f.zIndex,top:f.y??0,left:f.x??0,width:"target"===f.width?void 0:(0,v.h)(f.width)},i]})},c,r.createElement(w.Y,{ref:f.arrowRef,arrowX:f.arrowX,arrowY:f.arrowY,visible:f.withArrow,position:f.placement,arrowSize:f.arrowSize,arrowRadius:f.arrowRadius,arrowOffset:f.arrowOffset,arrowPosition:f.arrowPosition,...f.getStyles("arrow",{props:n,classNames:d,styles:p})})))))});j.classes=S,j.displayName="@mantine/core/PopoverDropdown";var I=n(40624),M=n(513);let D={refProp:"ref",popupType:"dialog"},T=(0,x.d)((e,t)=>{let{children:n,refProp:o,popupType:i,...a}=(0,l.w)("PopoverTarget",D,e);if(!(0,M.k)(n))throw Error("Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let c=g(),s=(0,y.Yx)(c.reference,n.ref,t),u=c.withRoles?{"aria-haspopup":i,"aria-expanded":c.opened,"aria-controls":c.getDropdownId(),id:c.getTargetId()}:{};return(0,r.cloneElement)(n,{...a,...u,...c.targetProps,className:(0,I.Z)(c.targetProps.className,a.className,n.props.className),[o]:s,...c.controlled?null:{onClick:c.onToggle}})});T.displayName="@mantine/core/PopoverTarget";var A=n(63349),P=n(95954),R=n(2216),N=n(58675),L=n(82591),H=n(5524);let $={position:"bottom",offset:8,positionDependencies:[],transitionProps:{transition:"fade",duration:150},middlewares:{flip:!0,shift:!0,inline:!1},arrowSize:7,arrowOffset:5,arrowRadius:0,arrowPosition:"side",closeOnClickOutside:!0,withinPortal:!0,closeOnEscape:!0,trapFocus:!1,withRoles:!0,returnFocus:!1,clickOutsideEvents:["mousedown","touchstart"],zIndex:(0,a.w)("popover"),__staticSelector:"Popover",width:"max-content"},O=(0,s.Z)((e,{radius:t,shadow:n})=>({dropdown:{"--popover-radius":void 0===t?void 0:(0,c.H5)(t),"--popover-shadow":(0,c.Xj)(n)}}));function z(e){let t=(0,l.w)("Popover",$,e),{children:n,position:a,offset:c,onPositionChange:s,positionDependencies:m,opened:g,transitionProps:h,width:y,middlewares:v,withArrow:b,arrowSize:k,arrowOffset:x,arrowRadius:w,arrowPosition:E,unstyled:C,classNames:F,styles:B,closeOnClickOutside:j,withinPortal:I,portalProps:M,closeOnEscape:D,clickOutsideEvents:T,trapFocus:z,onClose:_,onOpen:V,onChange:Z,zIndex:G,radius:W,shadow:q,id:Y,defaultOpened:U,__staticSelector:K,withRoles:X,disabled:J,returnFocus:Q,variant:ee,keepMounted:et,vars:en,...er}=t,eo=(0,u.y)({name:K,props:t,classes:S,classNames:F,styles:B,unstyled:C,rootSelector:"dropdown",vars:en,varsResolver:O}),ei=(0,r.useRef)(null),[ea,ec]=(0,r.useState)(null),[es,el]=(0,r.useState)(null),{dir:eu}=(0,d.gm)(),ed=(0,o.M)(Y),ep=function(e){let[t,n]=(0,N.C)({value:e.opened,defaultValue:e.defaultOpened,finalValue:!1,onChange:e.onChange}),r=(0,R.YF)({placement:e.position,middleware:function(e,t){let n=[(0,A.cv)(e.offset)];return e.middlewares?.shift&&n.push((0,A.uY)({limiter:(0,A.dr)()})),e.middlewares?.flip&&n.push((0,A.RR)()),e.middlewares?.inline&&n.push((0,A.Qo)()),n.push((0,P.x7)({element:e.arrowRef,padding:e.arrowOffset})),(e.middlewares?.size||"target"===e.width)&&n.push((0,A.dp)({apply({rects:n,availableWidth:r,availableHeight:o}){let i=t(),a=i.refs.floating.current?.style??{};e.middlewares?.size&&Object.assign(a,{maxWidth:`${r}px`,maxHeight:`${o}px`}),"target"===e.width&&Object.assign(a,{width:`${n.reference.width}px`})}})),n}(e,()=>r)});return(0,H.L)({opened:e.opened,position:e.position,positionDependencies:e.positionDependencies||[],floating:r}),(0,L.l)(()=>{e.onPositionChange?.(r.placement)},[r.placement]),(0,L.l)(()=>{e.opened?e.onOpen?.():e.onClose?.()},[e.opened]),{floating:r,controlled:"boolean"==typeof e.opened,opened:t,onClose:()=>{t&&(e.onClose?.(),n(!1))},onToggle:()=>{t?(e.onClose?.(),n(!1)):(e.onOpen?.(),n(!0))}}}({middlewares:v,width:y,position:(0,p._)(eu,a),offset:"number"==typeof c?c+(b?k/2:0):c,arrowRef:ei,arrowOffset:x,onPositionChange:s,positionDependencies:m,opened:g,defaultOpened:U,onChange:Z,onOpen:V,onClose:_});(0,i.O)(()=>j&&ep.onClose(),T,[ea,es]);let em=(0,r.useCallback)(e=>{ec(e),ep.floating.refs.setReference(e)},[ep.floating.refs.setReference]),ef=(0,r.useCallback)(e=>{el(e),ep.floating.refs.setFloating(e)},[ep.floating.refs.setFloating]);return r.createElement(f,{value:{returnFocus:Q,disabled:J,controlled:ep.controlled,reference:em,floating:ef,x:ep.floating.x,y:ep.floating.y,arrowX:ep.floating?.middlewareData?.arrow?.x,arrowY:ep.floating?.middlewareData?.arrow?.y,opened:ep.opened,arrowRef:ei,transitionProps:h,width:y,withArrow:b,arrowSize:k,arrowOffset:x,arrowRadius:w,arrowPosition:E,placement:ep.floating.placement,trapFocus:z,withinPortal:I,portalProps:M,zIndex:G,radius:W,shadow:q,closeOnEscape:D,onClose:ep.onClose,onToggle:ep.onToggle,getTargetId:()=>`${ed}-target`,getDropdownId:()=>`${ed}-dropdown`,withRoles:X,targetProps:er,__staticSelector:K,classNames:F,styles:B,unstyled:C,variant:ee,keepMounted:et,getStyles:eo}},n)}z.Target=T,z.Dropdown=j,z.displayName="@mantine/core/Popover",z.extend=e=>e},15666:function(e,t,n){"use strict";n.d(t,{q:function(){return i}});var r=n(27378),o=n(7727);function i({withinPortal:e=!0,children:t,...n}){return e?r.createElement(o.h,{...n},t):r.createElement(r.Fragment,null,t)}i.displayName="@mantine/core/OptionalPortal"},7727:function(e,t,n){"use strict";n.d(t,{h:function(){return l}});var r=n(27378),o=n(31542),i=n(62849),a=n(72840),c=n(96739);let s={},l=(0,r.forwardRef)((e,t)=>{let{children:n,target:l,...u}=(0,c.w)("Portal",s,e),[d,p]=(0,r.useState)(!1),m=(0,r.useRef)(null);return((0,i.Y)(()=>(p(!0),m.current=l?"string"==typeof l?document.querySelector(l):l:function(e){let t=document.createElement("div");return t.setAttribute("data-portal","true"),"string"==typeof e.className&&t.classList.add(...e.className.split(" ").filter(Boolean)),"object"==typeof e.style&&Object.assign(t.style,e.style),"string"==typeof e.id&&t.setAttribute("id",e.id),t}(u),(0,a.kR)(t,m.current),!l&&m.current&&document.body.appendChild(m.current),()=>{!l&&m.current&&document.body.removeChild(m.current)}),[l]),d&&m.current)?(0,o.createPortal)(r.createElement(r.Fragment,null,n),m.current):null});l.displayName="@mantine/core/Portal"},49849:function(e,t,n){"use strict";n.d(t,{x:function(){return G}});var r=n(27378),o=n(71078),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u=n(71656);let[d,p]=(0,u.R)("ScrollArea.Root component was not found in tree");function m(e){let t=(0,r.useRef)(e);return(0,r.useEffect)(()=>{t.current=e}),(0,r.useMemo)(()=>(...e)=>t.current?.(...e),[])}var f=n(62849);function g(e,t){let n=m(t);(0,f.Y)(()=>{let t=0;if(e){let r=new ResizeObserver(()=>{cancelAnimationFrame(t),t=window.requestAnimationFrame(n)});return r.observe(e),()=>{window.cancelAnimationFrame(t),r.unobserve(e)}}},[e,n])}let h=r.forwardRef((e,t)=>{let{style:n,...o}=e,i=p(),[a,c]=r.useState(0),[s,l]=r.useState(0),u=!!(a&&s);return g(i.scrollbarX,()=>{let e=i.scrollbarX?.offsetHeight||0;i.onCornerHeightChange(e),l(e)}),g(i.scrollbarY,()=>{let e=i.scrollbarY?.offsetWidth||0;i.onCornerWidthChange(e),c(e)}),u?r.createElement("div",{...o,ref:t,style:{...n,width:a,height:s}}):null}),y=r.forwardRef((e,t)=>{let n=p(),o=!!(n.scrollbarX&&n.scrollbarY),i="scroll"!==n.type&&o;return i?r.createElement(h,{...e,ref:t}):null});var v=n(72840);let b={scrollHideDelay:1e3,type:"hover"},k=(0,r.forwardRef)((e,t)=>{let n=(0,a.w)("ScrollAreaRoot",b,e),{type:o,scrollHideDelay:i,scrollbars:c,...l}=n,[u,p]=(0,r.useState)(null),[m,f]=(0,r.useState)(null),[g,h]=(0,r.useState)(null),[y,k]=(0,r.useState)(null),[x,w]=(0,r.useState)(null),[E,C]=(0,r.useState)(0),[F,S]=(0,r.useState)(0),[B,j]=(0,r.useState)(!1),[I,M]=(0,r.useState)(!1),D=(0,v.Yx)(t,e=>p(e));return r.createElement(d,{value:{type:o,scrollHideDelay:i,scrollArea:u,viewport:m,onViewportChange:f,content:g,onContentChange:h,scrollbarX:y,onScrollbarXChange:k,scrollbarXEnabled:B,onScrollbarXEnabledChange:j,scrollbarY:x,onScrollbarYChange:w,scrollbarYEnabled:I,onScrollbarYEnabledChange:M,onCornerWidthChange:C,onCornerHeightChange:S}},r.createElement(s.x,{...l,ref:D,__vars:{"--sa-corner-width":"xy"!==c?"0px":`${E}px`,"--sa-corner-height":"xy"!==c?"0px":`${F}px`}}))});function x(e,t){let n=m(e),o=(0,r.useRef)(0);return(0,r.useEffect)(()=>()=>window.clearTimeout(o.current),[]),(0,r.useCallback)(()=>{window.clearTimeout(o.current),o.current=window.setTimeout(n,t)},[n,t])}k.displayName="@mantine/core/ScrollAreaRoot";var w=n(49134);function E(e,t){let n=e/t;return Number.isNaN(n)?0:n}function C(e){let t=E(e.viewport,e.content),n=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,r=(e.scrollbar.size-n)*t;return Math.max(r,18)}function F(e,t){return n=>{if(e[0]===e[1]||t[0]===t[1])return t[0];let r=(t[1]-t[0])/(e[1]-e[0]);return t[0]+r*(n-e[0])}}function S(e,t,n="ltr"){let r=C(t),o=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,i=t.scrollbar.size-o,a=t.content-t.viewport,c=function(e,[t,n]){return Math.min(n,Math.max(t,e))}(e,"ltr"===n?[0,a]:[-1*a,0]),s=F([0,a],[0,i-r]);return s(c)}function B(e){return e?parseInt(e,10):0}function j(e,t,{checkForDefaultPrevented:n=!0}={}){return r=>{e?.(r),!1!==n&&r.defaultPrevented||t?.(r)}}let[I,M]=(0,u.R)("ScrollAreaScrollbar was not found in tree"),D=(0,r.forwardRef)((e,t)=>{let{sizes:n,hasThumb:o,onThumbChange:i,onThumbPointerUp:a,onThumbPointerDown:c,onThumbPositionChange:s,onDragScroll:l,onWheelScroll:u,onResize:d,...f}=e,h=p(),[y,b]=r.useState(null),k=(0,v.Yx)(t,e=>b(e)),w=r.useRef(null),E=r.useRef(""),{viewport:C}=h,F=n.content-n.viewport,S=m(u),B=m(s),M=x(d,10),D=e=>{if(w.current){let t=e.clientX-w.current.left,n=e.clientY-w.current.top;l({x:t,y:n})}};return(0,r.useEffect)(()=>{let e=e=>{let t=e.target,n=y?.contains(t);n&&S(e,F)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})},[C,y,F,S]),(0,r.useEffect)(B,[n,B]),g(y,M),g(h.content,M),r.createElement(I,{value:{scrollbar:y,hasThumb:o,onThumbChange:m(i),onThumbPointerUp:m(a),onThumbPositionChange:B,onThumbPointerDown:m(c)}},r.createElement("div",{...f,ref:k,style:{position:"absolute",...f.style},onPointerDown:j(e.onPointerDown,e=>{if(0===e.button){let t=e.target;t.setPointerCapture(e.pointerId),w.current=y.getBoundingClientRect(),E.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",D(e)}}),onPointerMove:j(e.onPointerMove,D),onPointerUp:j(e.onPointerUp,e=>{let t=e.target;t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=E.current,w.current=null})}))}),T=(0,r.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:o,style:i,...a}=e,c=p(),[s,l]=(0,r.useState)(),u=(0,r.useRef)(null),d=(0,v.Yx)(t,u,c.onScrollbarXChange);return(0,r.useEffect)(()=>{u.current&&l(getComputedStyle(u.current))},[u]),r.createElement(D,{"data-orientation":"horizontal",...a,ref:d,sizes:n,style:{...i,"--sa-thumb-width":`${C(n)}px`},onThumbPointerDown:t=>e.onThumbPointerDown(t.x),onDragScroll:t=>e.onDragScroll(t.x),onWheelScroll:(t,n)=>{if(c.viewport){let r=c.viewport.scrollLeft+t.deltaX;e.onWheelScroll(r),r>0&&r{u.current&&c.viewport&&s&&o({content:c.viewport.scrollWidth,viewport:c.viewport.offsetWidth,scrollbar:{size:u.current.clientWidth,paddingStart:B(s.paddingLeft),paddingEnd:B(s.paddingRight)}})}})}),A=(0,r.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:o,style:i,...a}=e,c=p(),[s,l]=r.useState(),u=(0,r.useRef)(null),d=(0,v.Yx)(t,u,c.onScrollbarYChange);return(0,r.useEffect)(()=>{u.current&&l(getComputedStyle(u.current))},[u]),r.createElement(D,{...a,"data-orientation":"vertical",ref:d,sizes:n,style:{"--sa-thumb-height":`${C(n)}px`,...i},onThumbPointerDown:t=>e.onThumbPointerDown(t.y),onDragScroll:t=>e.onDragScroll(t.y),onWheelScroll:(t,n)=>{if(c.viewport){let r=c.viewport.scrollTop+t.deltaY;e.onWheelScroll(r),r>0&&r{u.current&&c.viewport&&s&&o({content:c.viewport.scrollHeight,viewport:c.viewport.offsetHeight,scrollbar:{size:u.current.clientHeight,paddingStart:B(s.paddingTop),paddingEnd:B(s.paddingBottom)}})}})}),P=(0,r.forwardRef)((e,t)=>{let{orientation:n="vertical",...o}=e,{dir:i}=(0,w.gm)(),a=p(),c=(0,r.useRef)(null),s=(0,r.useRef)(0),[l,u]=(0,r.useState)({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),d=E(l.viewport,l.content),m={...o,sizes:l,onSizesChange:u,hasThumb:!!(d>0&&d<1),onThumbChange:e=>{c.current=e},onThumbPointerUp:()=>{s.current=0},onThumbPointerDown:e=>{s.current=e}},f=(e,t)=>(function(e,t,n,r="ltr"){let o=C(n),i=t||o/2,a=n.scrollbar.paddingStart+i,c=n.scrollbar.size-n.scrollbar.paddingEnd-(o-i),s=n.content-n.viewport,l=F([a,c],"ltr"===r?[0,s]:[-1*s,0]);return l(e)})(e,s.current,l,t);return"horizontal"===n?r.createElement(T,{...m,ref:t,onThumbPositionChange:()=>{if(a.viewport&&c.current){let e=a.viewport.scrollLeft,t=S(e,l,i);c.current.style.transform=`translate3d(${t}px, 0, 0)`}},onWheelScroll:e=>{a.viewport&&(a.viewport.scrollLeft=e)},onDragScroll:e=>{a.viewport&&(a.viewport.scrollLeft=f(e,i))}}):"vertical"===n?r.createElement(A,{...m,ref:t,onThumbPositionChange:()=>{if(a.viewport&&c.current){let e=a.viewport.scrollTop,t=S(e,l);c.current.style.transform=`translate3d(0, ${t}px, 0)`}},onWheelScroll:e=>{a.viewport&&(a.viewport.scrollTop=e)},onDragScroll:e=>{a.viewport&&(a.viewport.scrollTop=f(e))}}):null}),R=(0,r.forwardRef)((e,t)=>{let n=p(),{forceMount:o,...i}=e,[a,c]=(0,r.useState)(!1),s="horizontal"===e.orientation,l=x(()=>{if(n.viewport){let e=n.viewport.offsetWidth{let{forceMount:n,...o}=e,i=p(),[a,c]=(0,r.useState)(!1);return((0,r.useEffect)(()=>{let{scrollArea:e}=i,t=0;if(e){let n=()=>{window.clearTimeout(t),c(!0)},r=()=>{t=window.setTimeout(()=>c(!1),i.scrollHideDelay)};return e.addEventListener("pointerenter",n),e.addEventListener("pointerleave",r),()=>{window.clearTimeout(t),e.removeEventListener("pointerenter",n),e.removeEventListener("pointerleave",r)}}},[i.scrollArea,i.scrollHideDelay]),n||a)?r.createElement(R,{"data-state":a?"visible":"hidden",...o,ref:t}):null}),L=(0,r.forwardRef)((e,t)=>{let{forceMount:n,...o}=e,i=p(),a="horizontal"===e.orientation,[c,s]=(0,r.useState)("hidden"),l=x(()=>s("idle"),100);return((0,r.useEffect)(()=>{if("idle"===c){let e=window.setTimeout(()=>s("hidden"),i.scrollHideDelay);return()=>window.clearTimeout(e)}},[c,i.scrollHideDelay]),(0,r.useEffect)(()=>{let{viewport:e}=i,t=a?"scrollLeft":"scrollTop";if(e){let n=e[t],r=()=>{let r=e[t],o=n!==r;o&&(s("scrolling"),l()),n=r};return e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}},[i.viewport,a,l]),n||"hidden"!==c)?r.createElement(P,{"data-state":"hidden"===c?"hidden":"visible",...o,ref:t,onPointerEnter:j(e.onPointerEnter,()=>s("interacting")),onPointerLeave:j(e.onPointerLeave,()=>s("idle"))}):null}),H=r.forwardRef((e,t)=>{let{forceMount:n,...o}=e,i=p(),{onScrollbarXEnabledChange:a,onScrollbarYEnabledChange:c}=i,s="horizontal"===e.orientation;return r.useEffect(()=>(s?a(!0):c(!0),()=>{s?a(!1):c(!1)}),[s,a,c]),"hover"===i.type?r.createElement(N,{...o,ref:t,forceMount:n}):"scroll"===i.type?r.createElement(L,{...o,ref:t,forceMount:n}):"auto"===i.type?r.createElement(R,{...o,ref:t,forceMount:n}):"always"===i.type?r.createElement(P,{...o,ref:t}):null}),$=(0,r.forwardRef)((e,t)=>{let{style:n,...o}=e,i=p(),a=M(),{onThumbPositionChange:c}=a,s=(0,v.Yx)(t,e=>a.onThumbChange(e)),l=(0,r.useRef)(),u=x(()=>{l.current&&(l.current(),l.current=void 0)},100);return(0,r.useEffect)(()=>{let{viewport:e}=i;if(e){let t=()=>{if(u(),!l.current){let t=function(e,t=()=>{}){let n={left:e.scrollLeft,top:e.scrollTop},r=0;return function o(){let i={left:e.scrollLeft,top:e.scrollTop},a=n.left!==i.left,c=n.top!==i.top;(a||c)&&t(),n=i,r=window.requestAnimationFrame(o)}(),()=>window.cancelAnimationFrame(r)}(e,c);l.current=t,c()}};return c(),e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}},[i.viewport,u,c]),r.createElement("div",{"data-state":a.hasThumb?"visible":"hidden",...o,ref:s,style:{width:"var(--sa-thumb-width)",height:"var(--sa-thumb-height)",...n},onPointerDownCapture:j(e.onPointerDownCapture,e=>{let t=e.target,n=t.getBoundingClientRect(),r=e.clientX-n.left,o=e.clientY-n.top;a.onThumbPointerDown({x:r,y:o})}),onPointerUp:j(e.onPointerUp,a.onThumbPointerUp)})}),O=r.forwardRef((e,t)=>{let{forceMount:n,...o}=e,i=M();return n||i.hasThumb?r.createElement($,{ref:t,...o}):null}),z=(0,r.forwardRef)(({children:e,style:t,...n},o)=>{let i=p(),a=(0,v.Yx)(o,i.onViewportChange);return r.createElement(s.x,{...n,ref:a,style:{overflowX:i.scrollbarXEnabled?"scroll":"hidden",overflowY:i.scrollbarYEnabled?"scroll":"hidden",...t}},r.createElement("div",{style:{minWidth:"100%",display:"table"},ref:i.onContentChange},e))});z.displayName="@mantine/core/ScrollAreaViewport";var _={root:"m-d57069b5",viewport:"m-c0783ff9",viewportInner:"m-f8f631dd",scrollbar:"m-c44ba933",thumb:"m-d8b5e363",corner:"m-21657268"};let V={scrollHideDelay:1e3,type:"hover",scrollbars:"xy"},Z=(0,i.Z)((e,{scrollbarSize:t})=>({root:{"--scrollarea-scrollbar-size":(0,o.h)(t)}})),G=(0,l.d)((e,t)=>{let n=(0,a.w)("ScrollArea",V,e),{classNames:o,className:i,style:s,styles:l,unstyled:u,scrollbarSize:d,vars:p,type:m,scrollHideDelay:f,viewportProps:g,viewportRef:h,onScrollPositionChange:v,children:b,offsetScrollbars:x,scrollbars:w,...E}=n,[C,F]=(0,r.useState)(!1),S=(0,c.y)({name:"ScrollArea",props:n,classes:_,className:i,style:s,classNames:o,styles:l,unstyled:u,vars:p,varsResolver:Z});return r.createElement(k,{type:"never"===m?"always":m,scrollHideDelay:f,ref:t,scrollbars:w,...S("root"),...E},r.createElement(z,{...g,...S("viewport"),ref:h,"data-offset-scrollbars":!0===x?"xy":x||void 0,"data-scrollbars":w||void 0,onScroll:"function"==typeof v?({currentTarget:e})=>v({x:e.scrollLeft,y:e.scrollTop}):void 0},b),("xy"===w||"x"===w)&&r.createElement(H,{...S("scrollbar"),orientation:"horizontal","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},r.createElement(O,{...S("thumb")})),("xy"===w||"y"===w)&&r.createElement(H,{...S("scrollbar"),orientation:"vertical","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},r.createElement(O,{...S("thumb")})),r.createElement(y,{...S("corner"),"data-hovered":C||void 0,"data-hidden":"never"===m||void 0}))});G.displayName="@mantine/core/ScrollArea";let W=(0,l.d)((e,t)=>{let{children:n,classNames:o,styles:i,scrollbarSize:c,scrollHideDelay:l,type:u,dir:d,offsetScrollbars:p,viewportRef:m,onScrollPositionChange:f,unstyled:g,variant:h,viewportProps:y,scrollbars:v,style:b,vars:k,...x}=(0,a.w)("ScrollAreaAutosize",V,e);return r.createElement(s.x,{...x,ref:t,style:[{display:"flex",overflow:"auto"},b]},r.createElement(s.x,{style:{display:"flex",flexDirection:"column",flex:1}},r.createElement(G,{classNames:o,styles:i,scrollHideDelay:l,scrollbarSize:c,type:u,dir:d,offsetScrollbars:p,viewportRef:m,onScrollPositionChange:f,unstyled:g,variant:h,viewportProps:y,vars:k,scrollbars:v},n)))});G.classes=_,W.displayName="@mantine/core/ScrollAreaAutosize",W.classes=_,G.Autosize=W},46674:function(e,t,n){"use strict";n.d(t,{s:function(){return C}});var r=n(27378),o=n(58675),i=n(31002),a=n(88936),c=n(76318),s=n(72840),l=n(92082),u=n(96947),d=n(83453),p=n(89738),m=n(34121),f=n(2256),g=n(96739),h=n(6231),y=n(56589),v=n(20410),b=n(49134);function k(e,t){let n=parseFloat(e.replace("px",""));return Number.isNaN(n)?t:n}var x={root:"m-cf365364",indicator:"m-9e182ccd",label:"m-1738fcb2",input:"m-1714d588",control:"m-69686b9b"};let w={withItemsBorders:!0},E=(0,d.Z)((e,{radius:t,color:n,transitionDuration:r,size:o,transitionTimingFunction:i})=>({root:{"--sc-radius":void 0===t?void 0:(0,l.H5)(t),"--sc-color":n?(0,p.p)(n,e):void 0,"--sc-shadow":n?void 0:"var(--mantine-shadow-xs)","--sc-transition-duration":void 0===r?void 0:`${r}ms`,"--sc-transition-timing-function":i,"--sc-padding":(0,l.ap)(o,"sc-padding"),"--sc-font-size":(0,l.yv)(o)}})),C=(0,v.d)((e,t)=>{let n=(0,g.w)("SegmentedControl",w,e),{classNames:l,className:d,style:p,styles:v,unstyled:C,vars:F,data:S,value:B,defaultValue:j,onChange:I,size:M,name:D,disabled:T,readOnly:A,fullWidth:P,orientation:R,radius:N,color:L,transitionDuration:H,transitionTimingFunction:$,variant:O,autoContrast:z,withItemsBorders:_,mod:V,...Z}=n,G=(0,h.y)({name:"SegmentedControl",props:n,classes:x,className:d,style:p,classNames:l,styles:v,unstyled:C,vars:F,varsResolver:E}),{dir:W}=(0,b.gm)(),q=(0,f.rZ)(),Y=S.map(e=>"string"==typeof e?{label:e,value:e}:e),[U,K]=(0,o.C)({value:B,defaultValue:j,finalValue:Array.isArray(S)?Y.find(e=>!e.disabled)?.value??S[0]?.value??null:null,onChange:I}),[X,J]=(0,r.useState)({width:0,height:0,translate:[0,0]}),Q=(0,i.M)(D),ee=(0,r.useRef)({}),et=(0,r.useRef)(null),[en,er]=(0,r.useState)(!1),[eo,ei]=(0,a.y)();(0,r.useEffect)(()=>{if(U in ee.current&&eo.current){let e=ee.current[U];if(e){let t=function(e,t){let n=window.getComputedStyle(e);return{top:k(n.getPropertyValue("padding-top"),t),right:k(n.getPropertyValue("padding-right"),t),bottom:k(n.getPropertyValue("padding-bottom"),t),left:k(n.getPropertyValue("padding-left"),t)}}(et.current,4),n=e.getBoundingClientRect(),r=e.offsetWidth/n.width,o=e.clientWidth*r||0,i=e.clientHeight*r||0,a=ei.width-e.parentElement.offsetLeft+("rtl"===W?t.left:t.right)-o,c=e.parentElement.offsetLeft-("rtl"===W?t.right:t.left);J({width:o,height:i,translate:["rtl"===W?-1*a:c,e.parentElement.offsetTop-t.top]})}else J({width:0,height:0,translate:[0,0]})}},[U,ei,W]),(0,c.K)(()=>{"test"!==(0,u.d)()&&er(!0)},20,{autoInvoke:!0});let ea=Y.map(e=>r.createElement(y.x,{...G("control"),mod:{active:U===e.value,orientation:R},key:e.value},r.createElement("input",{...G("input"),disabled:T||e.disabled,type:"radio",name:Q,value:e.value,id:`${Q}-${e.value}`,checked:U===e.value,onChange:()=>!A&&K(e.value),"data-focus-ring":q.focusRing}),r.createElement(y.x,{component:"label",...G("label"),mod:{active:U===e.value&&!(T||e.disabled),disabled:T||e.disabled,"read-only":A},htmlFor:`${Q}-${e.value}`,ref:t=>{ee.current[e.value]=t},__vars:{"--sc-label-color":void 0!==L?(0,m.R)({color:L,theme:q}):void 0}},e.label))),ec=(0,s.Yx)(eo,et,t);return 0===S.length?null:r.createElement(y.x,{...G("root"),variant:O,size:M,ref:ec,mod:[{"full-width":P,orientation:R,initialization:!en,"with-items-borders":_},V],...Z,role:"radiogroup"},"string"==typeof U&&r.createElement(y.x,{component:"span",...G("indicator"),__vars:{"--sc-indicator-width":`${X.width}px`,"--sc-indicator-height":`${X.height}px`,"--sc-indicator-transform":`translate(${X.translate[0]}px, ${X.translate[1]}px)`}}),ea)});C.classes=x,C.displayName="@mantine/core/SegmentedControl"},28372:function(e,t,n){"use strict";n.d(t,{I:function(){return i},Y:function(){return o}}),n(27378);var r=n(71656);let[o,i]=(0,r.R)("SliderProvider was not found in tree")},45630:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={root:"m-dd36362e",label:"m-c9357328",thumb:"m-c9a9a60a",trackContainer:"m-a8645c2",track:"m-c9ade57f",bar:"m-38aeed47",markWrapper:"m-b7b0423a",mark:"m-dd33bc19",markLabel:"m-68c77a5b"}},16902:function(e,t,n){"use strict";n.d(t,{i:function(){return B}});var r=n(27378),o=n(58675),i=n(28086),a=n(60790),c=n(72840),s=n(71078),l=n(92082),u=n(83453),d=n(89738),p=n(96739),m=n(6231),f=n(20410),g=n(49134),h=n(28372),y=n(92918),v=n(18887),b=n(90796),k=n(77279),x=n(15390),w=n(39044),E=n(37744),C=n(45630);let F={radius:"xl",min:0,max:100,step:1,marks:[],label:e=>e,labelTransitionProps:{transition:"fade",duration:0},labelAlwaysOn:!1,thumbLabel:"",showLabelOnHover:!0,disabled:!1,scale:e=>e},S=(0,u.Z)((e,{size:t,color:n,thumbSize:r,radius:o})=>({root:{"--slider-size":(0,l.ap)(t,"slider-size"),"--slider-color":n?(0,d.p)(n,e):void 0,"--slider-radius":void 0===o?void 0:(0,l.H5)(o),"--slider-thumb-size":void 0!==r?(0,s.h)(r):"calc(var(--slider-size) * 2)"}})),B=(0,f.d)((e,t)=>{let n=(0,p.w)("Slider",F,e),{classNames:s,styles:l,value:u,onChange:d,onChangeEnd:f,size:B,min:j,max:I,step:M,precision:D,defaultValue:T,name:A,marks:P,label:R,labelTransitionProps:N,labelAlwaysOn:L,thumbLabel:H,showLabelOnHover:$,thumbChildren:O,disabled:z,unstyled:_,scale:V,inverted:Z,className:G,style:W,vars:q,hiddenInputProps:Y,...U}=n,K=(0,m.y)({name:"Slider",props:n,classes:C.Z,classNames:s,className:G,styles:l,style:W,vars:q,varsResolver:S,unstyled:_}),{dir:X}=(0,g.gm)(),[J,Q]=(0,r.useState)(!1),[ee,et]=(0,o.C)({value:"number"==typeof u?(0,i.u)(u,j,I):u,defaultValue:"number"==typeof T?(0,i.u)(T,j,I):T,finalValue:(0,i.u)(0,j,I),onChange:d}),en=(0,r.useRef)(ee),er=(0,r.useRef)(),eo=(0,r.useRef)(),ei=(0,w.b)({value:ee,min:j,max:I}),ea=V(ee),ec="function"==typeof R?R(ea):R,es=D??(0,E.p)(M),el=(0,r.useCallback)(({x:e})=>{if(!z){let t=(0,k.i)({value:e,min:j,max:I,step:M,precision:es});et(t),en.current=t}},[z,j,I,M,es,et]),{ref:eu,active:ed}=(0,a.r)(el,{onScrubEnd:()=>f?.(en.current)},X);return r.createElement(h.Y,{value:{getStyles:K}},r.createElement(y.l,{...U,ref:(0,c.Yx)(t,er),onKeyDownCapture:e=>{if(!z)switch(e.key){case"ArrowUp":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max(ee+M,j),I),es);f?.(t),et(t);break}case"ArrowRight":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max("rtl"===X?ee-M:ee+M,j),I),es);f?.(t),et(t);break}case"ArrowDown":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max(ee-M,j),I),es);f?.(t),et(t);break}case"ArrowLeft":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max("rtl"===X?ee+M:ee-M,j),I),es);f?.(t),et(t);break}case"Home":e.preventDefault(),eo.current?.focus(),f?.(j),et(j);break;case"End":e.preventDefault(),eo.current?.focus(),f?.(I),et(I)}},onMouseDownCapture:()=>er.current?.focus(),size:B,disabled:z},r.createElement(b.f,{inverted:Z,offset:0,filled:ei,marks:P,min:j,max:I,value:ea,disabled:z,containerProps:{ref:eu,onMouseEnter:$?()=>Q(!0):void 0,onMouseLeave:$?()=>Q(!1):void 0}},r.createElement(v.b,{max:I,min:j,value:ea,position:ei,dragging:ed,label:ec,ref:eo,labelTransitionProps:N,labelAlwaysOn:L,thumbLabel:H,showLabelOnHover:$,isHovered:J,disabled:z},O)),r.createElement("input",{type:"hidden",name:A,value:ea,...Y})))});B.classes=C.Z,B.displayName="@mantine/core/Slider"},92918:function(e,t,n){"use strict";n.d(t,{l:function(){return a}});var r=n(27378),o=n(56589),i=n(28372);let a=(0,r.forwardRef)(({size:e,disabled:t,variant:n,color:a,thumbSize:c,radius:s,...l},u)=>{let{getStyles:d}=(0,i.I)();return r.createElement(o.x,{tabIndex:-1,variant:n,size:e,ref:u,...d("root"),...l})});a.displayName="@mantine/core/SliderRoot"},18887:function(e,t,n){"use strict";n.d(t,{b:function(){return c}});var r=n(27378),o=n(56589),i=n(88101),a=n(28372);let c=(0,r.forwardRef)(({max:e,min:t,value:n,position:c,label:s,dragging:l,onMouseDown:u,onKeyDownCapture:d,labelTransitionProps:p,labelAlwaysOn:m,thumbLabel:f,onFocus:g,onBlur:h,showLabelOnHover:y,isHovered:v,children:b=null,disabled:k},x)=>{let{getStyles:w}=(0,a.I)(),[E,C]=(0,r.useState)(!1),F=m||l||E||y&&v;return r.createElement(o.x,{tabIndex:0,role:"slider","aria-label":f,"aria-valuemax":e,"aria-valuemin":t,"aria-valuenow":n,ref:x,__vars:{"--slider-thumb-offset":`${c}%`},...w("thumb",{focusable:!0}),mod:{dragging:l,disabled:k},onFocus:()=>{C(!0),"function"==typeof g&&g()},onBlur:()=>{C(!1),"function"==typeof h&&h()},onTouchStart:u,onMouseDown:u,onKeyDownCapture:d,onClick:e=>e.stopPropagation()},b,r.createElement(i.u,{mounted:null!=s&&!!F,transition:"fade",duration:0,...p},e=>r.createElement("div",{...w("label",{style:e})},s)))});c.displayName="@mantine/core/SliderThumb"},90796:function(e,t,n){"use strict";n.d(t,{f:function(){return s}});var r=n(27378),o=n(56589),i=n(28372),a=n(39044);function c({marks:e,min:t,max:n,disabled:c,value:s,offset:l,inverted:u}){let{getStyles:d}=(0,i.I)();if(!e)return null;let p=e.map((e,i)=>r.createElement(o.x,{...d("markWrapper"),__vars:{"--mark-offset":`${(0,a.b)({value:e.value,min:t,max:n})}%`},key:i},r.createElement(o.x,{...d("mark"),mod:{filled:function({mark:e,offset:t,value:n,inverted:r=!1}){return r?"number"==typeof t&&e.value<=t||e.value>=n:"number"==typeof t?e.value>=t&&e.value<=n:e.value<=n}({mark:e,value:s,offset:l,inverted:u}),disabled:c}}),e.label&&r.createElement("div",{...d("markLabel")},e.label)));return r.createElement("div",null,p)}function s({filled:e,children:t,offset:n,disabled:a,marksOffset:s,inverted:l,containerProps:u,...d}){let{getStyles:p}=(0,i.I)();return r.createElement(r.Fragment,null,r.createElement(o.x,{...p("trackContainer"),mod:{disabled:a},...u},r.createElement(o.x,{...p("track"),mod:{inverted:l,disabled:a}},r.createElement(o.x,{mod:{inverted:l,disabled:a},__vars:{"--slider-bar-width":`calc(${e}% + var(--slider-size))`,"--slider-bar-offset":`calc(${n}% - var(--slider-size))`},...p("bar")}),t,r.createElement(c,{...d,offset:s,disabled:a,inverted:l}))))}c.displayName="@mantine/core/SliderMarks",s.displayName="@mantine/core/SliderTrack"},77279:function(e,t,n){"use strict";function r({value:e,containerWidth:t,min:n,max:r,step:o,precision:i}){let a=(t?Math.min(Math.max(e,0),t)/t:e)*(r-n),c=Math.max((0!==a?Math.round(a/o)*o:0)+n,n);return void 0!==i?Number(c.toFixed(i)):c}n.d(t,{i:function(){return r}})},15390:function(e,t,n){"use strict";function r(e,t){return parseFloat(e.toFixed(t))}n.d(t,{J:function(){return r}})},39044:function(e,t,n){"use strict";function r({value:e,min:t,max:n}){return Math.min(Math.max((e-t)/(n-t)*100,0),100)}n.d(t,{b:function(){return r}})},37744:function(e,t,n){"use strict";function r(e){if(!e)return 0;let t=e.toString().split(".");return t.length>1?t[1].length:0}n.d(t,{p:function(){return r}})},27884:function(e,t,n){"use strict";n.d(t,{K:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-6d731127"};let d={gap:"md",align:"stretch",justify:"flex-start"},p=(0,i.Z)((e,{gap:t,align:n,justify:r})=>({root:{"--stack-gap":(0,o.bG)(t),"--stack-align":n,"--stack-justify":r}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Stack",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:g,align:h,justify:y,gap:v,variant:b,...k}=n,x=(0,c.y)({name:"Stack",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return r.createElement(s.x,{ref:t,...x("root"),variant:b,...k})});m.classes=u,m.displayName="@mantine/core/Stack"},17829:function(e,t,n){"use strict";n.d(t,{r:function(){return F}});var r=n(27378),o=n(31002),i=n(58675),a=n(92082),c=n(83453),s=n(89738),l=n(96739),u=n(6231),d=n(55934),p=n(56589),m=n(20410),f=n(91549);let g=(0,r.createContext)(null),h=g.Provider,y=()=>(0,r.useContext)(g);var v=n(42487),b=n(96606);let k={},x=(0,m.d)((e,t)=>{let{value:n,defaultValue:o,onChange:a,size:c,wrapperProps:s,children:u,readOnly:d,...p}=(0,l.w)("SwitchGroup",k,e),[m,f]=(0,i.C)({value:n,defaultValue:o,finalValue:[],onChange:a});return r.createElement(h,{value:{value:m,onChange:e=>{let t=e.currentTarget.value;d||f(m.includes(t)?m.filter(e=>e!==t):[...m,t])},size:c}},r.createElement(v.I.Wrapper,{size:c,ref:t,...s,...p,labelElement:"div",__staticSelector:"SwitchGroup"},r.createElement(b.m,{role:"group"},u)))});x.classes=v.I.Wrapper.classes,x.displayName="@mantine/core/SwitchGroup";var w={root:"m-5f93f3bb",input:"m-926b4011",track:"m-9307d992",thumb:"m-93039a1d",trackLabel:"m-8277e082"};let E={labelPosition:"right"},C=(0,c.Z)((e,{radius:t,color:n,size:r})=>({root:{"--switch-radius":void 0===t?void 0:(0,a.H5)(t),"--switch-height":(0,a.ap)(r,"switch-height"),"--switch-width":(0,a.ap)(r,"switch-width"),"--switch-thumb-size":(0,a.ap)(r,"switch-thumb-size"),"--switch-label-font-size":(0,a.ap)(r,"switch-label-font-size"),"--switch-track-label-padding":(0,a.ap)(r,"switch-track-label-padding"),"--switch-color":n?(0,s.p)(n,e):void 0}})),F=(0,m.d)((e,t)=>{let n=(0,l.w)("Switch",E,e),{classNames:a,className:c,style:s,styles:m,unstyled:g,vars:h,color:v,label:b,offLabel:k,onLabel:x,id:F,size:S,radius:B,wrapperProps:j,children:I,thumbIcon:M,checked:D,defaultChecked:T,onChange:A,labelPosition:P,description:R,error:N,disabled:L,variant:H,rootRef:$,mod:O,...z}=n,_=y(),V=S||_?.size,Z=(0,u.y)({name:"Switch",props:n,classes:w,className:c,style:s,classNames:a,styles:m,unstyled:g,vars:h,varsResolver:C}),{styleProps:G,rest:W}=(0,d.c)(z),q=(0,o.M)(F),Y=_?{checked:_.value.includes(W.value),onChange:_.onChange}:{},[U,K]=(0,i.C)({value:Y.checked??D,defaultValue:T,finalValue:!1});return r.createElement(f.Z,{...Z("root"),__staticSelector:"Switch",__stylesApiProps:n,id:q,size:V,labelPosition:P,label:b,description:R,error:N,disabled:L,classNames:a,styles:m,unstyled:g,"data-checked":Y.checked||void 0,variant:H,ref:$,mod:O,...G,...j},r.createElement("input",{...W,disabled:L,checked:U,onChange:e=>{_?Y.onChange?.(e):A?.(e),K(e.currentTarget.checked)},id:q,ref:t,type:"checkbox",...Z("input")}),r.createElement(p.x,{component:"label",htmlFor:q,mod:{error:N,"label-position":P},...Z("track")},r.createElement(p.x,{component:"span",mod:"reduce-motion",...Z("thumb")},M),r.createElement("span",{...Z("trackLabel")},U?x:k)))});F.classes={...w,...f.J},F.displayName="@mantine/core/Switch",F.Group=x},28862:function(e,t,n){"use strict";n.d(t,{i:function(){return D}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(89738),s=n(96739),l=n(6231),u=n(56589),d=n(20410),p=n(71656);let[m,f]=(0,p.R)("Table component was not found in the tree");var g={table:"m-b23fa0ef",th:"m-4e7aa4f3",tr:"m-4e7aa4fd",td:"m-4e7aa4ef",tbody:"m-b2404537",thead:"m-b242d975",caption:"m-9e5a3ac7",scrollContainer:"m-a100c15",scrollContainerInner:"m-62259741"};function h(e,t){let n=`Table${e.charAt(0).toUpperCase()}${e.slice(1)}`,o=(0,d.d)((o,i)=>{let a=(0,s.w)(n,{},o),{classNames:c,className:l,style:d,styles:p,...m}=a,g=f();return r.createElement(u.x,{component:e,ref:i,...function(e,t){if(!t)return;let n={};return t.columnBorder&&e.withColumnBorders&&(n["data-with-column-border"]=!0),t.rowBorder&&e.withRowBorders&&(n["data-with-row-border"]=!0),t.striped&&e.striped&&(n["data-striped"]=e.striped),t.highlightOnHover&&e.highlightOnHover&&(n["data-hover"]=!0),t.captionSide&&e.captionSide&&(n["data-side"]=e.captionSide),t.stickyHeader&&e.stickyHeader&&(n["data-sticky"]=!0),n}(g,t),...g.getStyles(e,{className:l,classNames:c,style:d,styles:p,props:a}),...m})});return o.displayName=`@mantine/core/${n}`,o.classes=g,o}let y=h("th",{columnBorder:!0}),v=h("td",{columnBorder:!0}),b=h("tr",{rowBorder:!0,striped:!0,highlightOnHover:!0}),k=h("thead",{stickyHeader:!0}),x=h("tbody"),w=h("tfoot"),E=h("caption",{captionSide:!0});function C({data:e}){return r.createElement(r.Fragment,null,e.caption&&r.createElement(E,null,e.caption),e.head&&r.createElement(k,null,r.createElement(b,null,e.head.map((e,t)=>r.createElement(y,{key:t},e)))),e.body&&r.createElement(x,null,e.body.map((e,t)=>r.createElement(b,{key:t},e.map((e,t)=>r.createElement(v,{key:t},e))))),e.foot&&r.createElement(w,null,r.createElement(b,null,e.foot.map((e,t)=>r.createElement(y,{key:t},e)))))}C.displayName="@mantine/core/TableDataRenderer";var F=n(49849);let S={type:"scrollarea"},B=(0,a.Z)((e,{minWidth:t,type:n})=>({scrollContainer:{"--table-min-width":(0,o.h)(t),"--table-overflow":"native"===n?"auto":void 0}})),j=(0,d.d)((e,t)=>{let n=(0,s.w)("TableScrollContainer",S,e),{classNames:o,className:i,style:a,styles:c,unstyled:d,vars:p,children:m,minWidth:f,type:h,...y}=n,v=(0,l.y)({name:"TableScrollContainer",classes:g,props:n,className:i,style:a,classNames:o,styles:c,unstyled:d,vars:p,varsResolver:B,rootSelector:"scrollContainer"});return r.createElement(u.x,{component:"scrollarea"===h?F.x:"div",..."scrollarea"===h?{offsetScrollbars:"x"}:{},ref:t,...v("scrollContainer"),...y},r.createElement("div",{...v("scrollContainerInner")},m))});j.classes=g,j.displayName="@mantine/core/TableScrollContainer";let I={withRowBorders:!0,verticalSpacing:7},M=(0,a.Z)((e,{layout:t,captionSide:n,horizontalSpacing:r,verticalSpacing:a,borderColor:s,stripedColor:l,highlightOnHoverColor:u,striped:d,highlightOnHover:p,stickyHeaderOffset:m,stickyHeader:f})=>({table:{"--table-layout":t,"--table-caption-side":n,"--table-horizontal-spacing":(0,i.bG)(r),"--table-vertical-spacing":(0,i.bG)(a),"--table-border-color":s?(0,c.p)(s,e):void 0,"--table-striped-color":d&&l?(0,c.p)(l,e):void 0,"--table-highlight-on-hover-color":p&&u?(0,c.p)(u,e):void 0,"--table-sticky-header-offset":f?(0,o.h)(m):void 0}})),D=(0,d.d)((e,t)=>{let n=(0,s.w)("Table",I,e),{classNames:o,className:i,style:a,styles:c,unstyled:d,vars:p,horizontalSpacing:f,verticalSpacing:h,captionSide:y,stripedColor:v,highlightOnHoverColor:b,striped:k,highlightOnHover:x,withColumnBorders:w,withRowBorders:E,withTableBorder:F,borderColor:S,layout:B,variant:j,data:D,children:T,stickyHeader:A,stickyHeaderOffset:P,mod:R,...N}=n,L=(0,l.y)({name:"Table",props:n,className:i,style:a,classes:g,classNames:o,styles:c,unstyled:d,rootSelector:"table",vars:p,varsResolver:M});return r.createElement(m,{value:{getStyles:L,stickyHeader:A,striped:!0===k?"odd":k||void 0,highlightOnHover:x,withColumnBorders:w,withRowBorders:E,captionSide:y||"bottom"}},r.createElement(u.x,{component:"table",variant:j,ref:t,mod:[{"data-with-table-border":F},R],...L("table"),...N},T||!!D&&r.createElement(C,{data:D})))});D.classes=g,D.displayName="@mantine/core/Table",D.Td=v,D.Th=y,D.Tr=b,D.Thead=k,D.Tbody=x,D.Tfoot=w,D.Caption=E,D.ScrollContainer=j,D.DataRenderer=C},26569:function(e,t,n){"use strict";n.d(t,{x:function(){return Text}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(42911),s=n(96739),l=n(6231),u=n(56589),d=n(50332),p={root:"m-b6d8b162"};let m={inherit:!1},f=(0,i.Z)((e,{variant:t,lineClamp:n,gradient:r,size:i,color:s})=>({root:{"--text-fz":(0,o.yv)(i),"--text-lh":(0,o.Dp)(i),"--text-gradient":"gradient"===t?(0,c.u)(r,e):void 0,"--text-line-clamp":"number"==typeof n?n.toString():void 0,"--text-color":s?(0,a.p)(s,e):void 0}})),Text=(0,d.b)((e,t)=>{let n=(0,s.w)("Text",m,e),{lineClamp:o,truncate:i,inline:a,inherit:c,gradient:d,span:g,__staticSelector:h,vars:y,className:v,style:b,classNames:k,styles:x,unstyled:w,variant:E,mod:C,size:F,...S}=n,B=(0,l.y)({name:["Text",h],props:n,classes:p,className:v,style:b,classNames:k,styles:x,unstyled:w,vars:y,varsResolver:f});return r.createElement(u.x,{...B("root",{focusable:!0}),ref:t,component:g?"span":"p",variant:E,mod:[{"data-truncate":"start"===i?"start":"end"===i||i?"end":void 0,"data-line-clamp":"number"==typeof o,"data-inline":a,"data-inherit":c},C],size:F,...S})});Text.classes=p,Text.displayName="@mantine/core/Text"},7033:function(e,t,n){"use strict";n.d(t,{o:function(){return s}});var r=n(27378),o=n(96739),i=n(20410),a=n(23163);let c={},s=(0,i.d)((e,t)=>{let n=(0,o.w)("TextInput",c,e);return r.createElement(a.M,{component:"input",ref:t,...n,__staticSelector:"TextInput"})});s.classes=a.M.classes,s.displayName="@mantine/core/TextInput"},57847:function(e,t,n){"use strict";n.d(t,{D:function(){return f}});var r=n(27378),o=n(83453),i=n(96739),a=n(6231),c=n(56589),s=n(20410),l=n(71078);let u=["h1","h2","h3","h4","h5","h6"];var d={root:"m-8a5d1357"};let p={order:1},m=(0,o.Z)((e,{order:t,size:n,lineClamp:r,textWrap:o})=>{let i=function(e,t){let n=void 0!==t?t:`h${e}`;return u.includes(n)?{fontSize:`var(--mantine-${n}-font-size)`,fontWeight:`var(--mantine-${n}-font-weight)`,lineHeight:`var(--mantine-${n}-line-height)`}:{fontSize:(0,l.h)(n),fontWeight:`var(--mantine-h${e}-font-weight)`,lineHeight:`var(--mantine-h${e}-line-height)`}}(t,n);return{root:{"--title-fw":i.fontWeight,"--title-lh":i.lineHeight,"--title-fz":i.fontSize,"--title-line-clamp":"number"==typeof r?r.toString():void 0,"--title-text-wrap":o}}}),f=(0,s.d)((e,t)=>{let n=(0,i.w)("Title",p,e),{classNames:o,className:s,style:l,styles:u,unstyled:f,order:g,vars:h,size:y,variant:v,lineClamp:b,textWrap:k,mod:x,...w}=n,E=(0,a.y)({name:"Title",props:n,classes:d,className:s,style:l,classNames:o,styles:u,unstyled:f,vars:h,varsResolver:m});return[1,2,3,4,5,6].includes(g)?r.createElement(c.x,{...E("root"),component:`h${g}`,variant:v,ref:t,mod:[{order:g,"data-line-clamp":"number"==typeof b},x],size:y,...w}):null});f.classes=d,f.displayName="@mantine/core/Title"},99684:function(e,t,n){"use strict";n.d(t,{u:function(){return z}});var r=n(27378),o=n(40624),i=n(72840),a=n(513),c=n(13041),s=n(92082),l=n(83453),u=n(89738),d=n(96739),p=n(6231),m=n(56589),f=n(20410),g=n(49134),h=n(93177),y=n(22211),v=n(15666),b=n(88101);let k={duration:100,transition:"fade"};var x=n(2256),w=n(48649),E=n(2216),C=n(63349),F=n(25772),S={tooltip:"m-1b3c8819",arrow:"m-f898399f"};let B={refProp:"ref",withinPortal:!0,offset:10,position:"right",zIndex:(0,c.w)("popover")},j=(0,l.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,s.H5)(t),"--tooltip-bg":n?(0,u.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),I=(0,f.d)((e,t)=>{let n=(0,d.w)("TooltipFloating",B,e),{children:o,refProp:c,withinPortal:s,style:l,className:u,classNames:f,styles:g,unstyled:h,radius:y,color:b,label:k,offset:I,position:M,multiline:D,zIndex:T,disabled:A,variant:P,vars:R,portalProps:N,...L}=n,H=(0,x.rZ)(),$=(0,p.y)({name:"TooltipFloating",props:n,classes:S,className:u,style:l,classNames:f,styles:g,unstyled:h,rootSelector:"tooltip",vars:R,varsResolver:j}),{handleMouseMove:O,x:z,y:_,opened:V,boundaryRef:Z,floating:G,setOpened:W}=function({offset:e,position:t}){let[n,o]=(0,r.useState)(!1),i=(0,r.useRef)(),{x:a,y:c,elements:s,refs:l,update:u,placement:d}=(0,E.YF)({placement:t,middleware:[(0,C.uY)({crossAxis:!0,padding:5,rootBoundary:"document"})]}),p=d.includes("right")?e:t.includes("left")?-1*e:0,m=d.includes("bottom")?e:t.includes("top")?-1*e:0,f=(0,r.useCallback)(({clientX:e,clientY:t})=>{l.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:e,y:t,left:e+p,top:t+m,right:e,bottom:t})})},[s.reference]);return(0,r.useEffect)(()=>{if(l.floating.current){let e=i.current;e.addEventListener("mousemove",f);let t=(0,F.Kx)(l.floating.current);return t.forEach(e=>{e.addEventListener("scroll",u)}),()=>{e.removeEventListener("mousemove",f),t.forEach(e=>{e.removeEventListener("scroll",u)})}}},[s.reference,l.floating.current,u,f,n]),{handleMouseMove:f,x:a,y:c,opened:n,setOpened:o,boundaryRef:i,floating:l.setFloating}}({offset:I,position:M});if(!(0,a.k)(o))throw Error("[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");let q=(0,i.Yx)(Z,o.ref,t);return r.createElement(r.Fragment,null,r.createElement(v.q,{...N,withinPortal:s},r.createElement(m.x,{...L,...$("tooltip",{style:{...(0,w.c)(l,H),zIndex:T,display:!A&&V?"block":"none",top:(_&&Math.round(_))??"",left:(z&&Math.round(z))??""}}),variant:P,ref:G},k)),(0,r.cloneElement)(o,{...o.props,[c]:q,onMouseEnter:e=>{o.props.onMouseEnter?.(e),O(e),W(!0)},onMouseLeave:e=>{o.props.onMouseLeave?.(e),W(!1)}}))});I.classes=S,I.displayName="@mantine/core/TooltipFloating";let M=(0,r.createContext)(!1),D=M.Provider,T=()=>(0,r.useContext)(M),A={openDelay:0,closeDelay:0};function P(e){let{openDelay:t,closeDelay:n,children:o}=(0,d.w)("TooltipGroup",A,e);return r.createElement(D,{value:!0},r.createElement(E.e0,{delay:{open:t,close:n}},o))}P.displayName="@mantine/core/TooltipGroup";var R=n(95954),N=n(31002),L=n(82591),H=n(5524);let $={position:"top",refProp:"ref",withinPortal:!0,inline:!1,arrowSize:4,arrowOffset:5,arrowRadius:0,arrowPosition:"side",offset:5,transitionProps:{duration:100,transition:"fade"},events:{hover:!0,focus:!1,touch:!1},zIndex:(0,c.w)("popover"),positionDependencies:[]},O=(0,l.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,s.H5)(t),"--tooltip-bg":n?(0,u.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),z=(0,f.d)((e,t)=>{let n=(0,d.w)("Tooltip",$,e),{children:c,position:s,refProp:l,label:u,openDelay:f,closeDelay:x,onPositionChange:w,opened:F,withinPortal:B,radius:j,color:I,classNames:M,styles:D,unstyled:A,style:P,className:z,withArrow:_,arrowSize:V,arrowOffset:Z,arrowRadius:G,arrowPosition:W,offset:q,transitionProps:Y,multiline:U,events:K,zIndex:X,disabled:J,positionDependencies:Q,onClick:ee,onMouseEnter:et,onMouseLeave:en,inline:er,variant:eo,keepMounted:ei,vars:ea,portalProps:ec,mod:es,...el}=(0,d.w)("Tooltip",$,n),{dir:eu}=(0,g.gm)(),ed=(0,r.useRef)(null),ep=function(e){let[t,n]=(0,r.useState)(!1),o="boolean"==typeof e.opened,i=o?e.opened:t,a=T(),c=(0,N.M)(),{delay:s,currentId:l,setCurrentId:u}=(0,E.tj)(),d=(0,r.useCallback)(e=>{n(e),e&&u(c)},[u,c]),{x:p,y:m,context:f,refs:g,update:h,placement:y,middlewareData:{arrow:{x:v,y:b}={}}}=(0,E.YF)({placement:e.position,open:i,onOpenChange:d,middleware:[(0,C.cv)(e.offset),(0,C.uY)({padding:8}),(0,C.RR)(),(0,R.x7)({element:e.arrowRef,padding:e.arrowOffset}),...e.inline?[(0,C.Qo)()]:[]]}),{getReferenceProps:k,getFloatingProps:x}=(0,E.NI)([(0,E.XI)(f,{enabled:e.events?.hover,delay:a?s:{open:e.openDelay,close:e.closeDelay},mouseOnly:!e.events?.touch}),(0,E.KK)(f,{enabled:e.events?.focus,keyboardOnly:!0}),(0,E.qs)(f,{role:"tooltip"}),(0,E.bQ)(f,{enabled:void 0===e.opened}),(0,E.Qu)(f,{id:c})]);(0,H.L)({opened:i,position:e.position,positionDependencies:e.positionDependencies,floating:{refs:g,update:h}}),(0,L.l)(()=>{e.onPositionChange?.(y)},[y]);let w=i&&l&&l!==c;return{x:p,y:m,arrowX:v,arrowY:b,reference:g.setReference,floating:g.setFloating,getFloatingProps:x,getReferenceProps:k,isGroupPhase:w,opened:i,placement:y}}({position:(0,h._)(eu,s),closeDelay:x,openDelay:f,onPositionChange:w,opened:F,events:K,arrowRef:ed,arrowOffset:Z,offset:"number"==typeof q?q+(_?V/2:0):q,positionDependencies:[...Q,c],inline:er}),em=(0,p.y)({name:"Tooltip",props:n,classes:S,className:z,style:P,classNames:M,styles:D,unstyled:A,rootSelector:"tooltip",vars:ea,varsResolver:O});if(!(0,a.k)(c))throw Error("[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");let ef=(0,i.Yx)(ep.reference,c.ref,t),eg={...k,duration:100,transition:"fade",...Y};return r.createElement(r.Fragment,null,r.createElement(v.q,{...ec,withinPortal:B},r.createElement(b.u,{...eg,keepMounted:ei,mounted:!J&&!!ep.opened,duration:ep.isGroupPhase?10:eg.duration},e=>r.createElement(m.x,{...el,variant:eo,mod:[{multiline:U},es],...ep.getFloatingProps({ref:ep.floating,className:em("tooltip").className,style:{...em("tooltip").style,...e,zIndex:X,top:ep.y??0,left:ep.x??0}})},u,r.createElement(y.Y,{ref:ed,arrowX:ep.arrowX,arrowY:ep.arrowY,visible:_,position:ep.placement,arrowSize:V,arrowOffset:Z,arrowRadius:G,arrowPosition:W,...em("arrow")})))),(0,r.cloneElement)(c,ep.getReferenceProps({onClick:ee,onMouseEnter:et,onMouseLeave:en,onMouseMove:n.onMouseMove,onPointerDown:n.onPointerDown,onPointerEnter:n.onPointerEnter,[l]:ef,className:(0,o.Z)(z,c.props.className),...c.props})))});z.classes=S,z.displayName="@mantine/core/Tooltip",z.Floating=I,z.Group=P},88101:function(e,t,n){"use strict";n.d(t,{u:function(){return l}});var r=n(27378),o=n(34296);let i={entering:"in",entered:"in",exiting:"out",exited:"out","pre-exiting":"out","pre-entering":"out"};var a=n(82269),c=n(82591),s=n(2256);function l({keepMounted:e,transition:t="fade",duration:n=250,exitDuration:l=n,mounted:u,children:d,timingFunction:p="ease",onExit:m,onEntered:f,onEnter:g,onExited:h}){let{transitionDuration:y,transitionStatus:v,transitionTimingFunction:b}=function({duration:e,exitDuration:t,timingFunction:n,mounted:o,onEnter:i,onExit:l,onEntered:u,onExited:d}){let p=(0,s.rZ)(),m=(0,a.J)(),f=!!p.respectReducedMotion&&m,[g,h]=(0,r.useState)(f?0:e),[y,v]=(0,r.useState)(o?"entered":"exited"),b=(0,r.useRef)(-1),k=n=>{let r=n?i:l,o=n?u:d;v(n?"pre-entering":"pre-exiting"),window.clearTimeout(b.current);let a=f?0:n?e:t;if(h(a),0===a)"function"==typeof r&&r(),"function"==typeof o&&o(),v(n?"entered":"exited");else{let e=window.setTimeout(()=>{"function"==typeof r&&r(),v(n?"entering":"exiting")},10);b.current=window.setTimeout(()=>{window.clearTimeout(e),"function"==typeof o&&o(),v(n?"entered":"exited")},a)}};return(0,c.l)(()=>{k(o)},[o]),(0,r.useEffect)(()=>()=>window.clearTimeout(b.current),[]),{transitionDuration:g,transitionStatus:y,transitionTimingFunction:n||"ease"}}({mounted:u,exitDuration:l,duration:n,timingFunction:p,onExit:m,onEntered:f,onEnter:g,onExited:h});return 0===y?u?r.createElement(r.Fragment,null,d({})):e?d({display:"none"}):null:"exited"===v?e?d({display:"none"}):null:r.createElement(r.Fragment,null,d(function({transition:e,state:t,duration:n,timingFunction:r}){let a={transitionDuration:`${n}ms`,transitionTimingFunction:r};return"string"==typeof e?e in o.p?{transitionProperty:o.p[e].transitionProperty,...a,...o.p[e].common,...o.p[e][i[t]]}:{}:{transitionProperty:e.transitionProperty,...a,...e.common,...e[i[t]]}}({transition:t,duration:y,state:v,timingFunction:b})))}l.displayName="@mantine/core/Transition"},34296:function(e,t,n){"use strict";n.d(t,{p:function(){return i}});var r=n(71078);n(27378);let o=e=>({in:{opacity:1,transform:"scale(1)"},out:{opacity:0,transform:`scale(.9) translateY(${(0,r.h)("bottom"===e?10:-10)})`},transitionProperty:"transform, opacity"}),i={fade:{in:{opacity:1},out:{opacity:0},transitionProperty:"opacity"},scale:{in:{opacity:1,transform:"scale(1)"},out:{opacity:0,transform:"scale(0)"},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"scale-y":{in:{opacity:1,transform:"scaleY(1)"},out:{opacity:0,transform:"scaleY(0)"},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"scale-x":{in:{opacity:1,transform:"scaleX(1)"},out:{opacity:0,transform:"scaleX(0)"},common:{transformOrigin:"left"},transitionProperty:"transform, opacity"},"skew-up":{in:{opacity:1,transform:"translateY(0) skew(0deg, 0deg)"},out:{opacity:0,transform:`translateY(-${(0,r.h)(20)}) skew(-10deg, -5deg)`},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"skew-down":{in:{opacity:1,transform:"translateY(0) skew(0deg, 0deg)"},out:{opacity:0,transform:`translateY(${(0,r.h)(20)}) skew(-10deg, -5deg)`},common:{transformOrigin:"bottom"},transitionProperty:"transform, opacity"},"rotate-left":{in:{opacity:1,transform:"translateY(0) rotate(0deg)"},out:{opacity:0,transform:`translateY(${(0,r.h)(20)}) rotate(-5deg)`},common:{transformOrigin:"bottom"},transitionProperty:"transform, opacity"},"rotate-right":{in:{opacity:1,transform:"translateY(0) rotate(0deg)"},out:{opacity:0,transform:`translateY(${(0,r.h)(20)}) rotate(5deg)`},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"slide-down":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:"translateY(-100%)"},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"slide-up":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:"translateY(100%)"},common:{transformOrigin:"bottom"},transitionProperty:"transform, opacity"},"slide-left":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:"translateX(100%)"},common:{transformOrigin:"left"},transitionProperty:"transform, opacity"},"slide-right":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:"translateX(-100%)"},common:{transformOrigin:"right"},transitionProperty:"transform, opacity"},pop:{...o("bottom"),common:{transformOrigin:"center center"}},"pop-bottom-left":{...o("bottom"),common:{transformOrigin:"bottom left"}},"pop-bottom-right":{...o("bottom"),common:{transformOrigin:"bottom right"}},"pop-top-left":{...o("top"),common:{transformOrigin:"top left"}},"pop-top-right":{...o("top"),common:{transformOrigin:"top right"}}}},19397:function(e,t,n){"use strict";n.d(t,{k:function(){return u}});var r=n(27378),o=n(96739),i=n(6231),a=n(56589),c=n(50332),s={root:"m-87cf2631"};let l={__staticSelector:"UnstyledButton"},u=(0,c.b)((e,t)=>{let n=(0,o.w)("UnstyledButton",l,e),{className:c,component:u="button",__staticSelector:d,unstyled:p,classNames:m,styles:f,style:g,...h}=n,y=(0,i.y)({name:d,props:n,classes:s,className:c,style:g,classNames:m,styles:f,unstyled:p});return r.createElement(a.x,{...y("root",{focusable:!0}),component:u,ref:t,type:"button"===u?"button":void 0,...h})});u.classes=s,u.displayName="@mantine/core/UnstyledButton"},30020:function(e,t,n){"use strict";n.d(t,{T:function(){return u}});var r=n(27378),o=n(96739),i=n(6231),a=n(56589),c=n(20410),s={root:"m-515a97f8"};let l={},u=(0,c.d)((e,t)=>{let n=(0,o.w)("VisuallyHidden",l,e),{classNames:c,className:u,style:d,styles:p,unstyled:m,vars:f,...g}=n,h=(0,i.y)({name:"VisuallyHidden",classes:s,props:n,className:u,style:d,classNames:c,styles:p,unstyled:m});return r.createElement(a.x,{component:"span",ref:t,...h("root"),...g})});u.classes=s,u.displayName="@mantine/core/VisuallyHidden"},56589:function(e,t,n){"use strict";n.d(t,{x:function(){return h}});var r=n(27378),o=n(40624),i=n(31788),a=n(9889),c=n(96403),s=n(2256);function l(e){return e.startsWith("data-")?e:`data-${e}`}function u(e,t){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...u(n,t)}),{}):"function"==typeof e?e(t):null==e?{}:e}var d=n(55934),p=n(22897),m=n(70238),f=n(40593);let g=(0,r.forwardRef)(({component:e,style:t,__vars:n,className:i,variant:g,mod:h,size:y,hiddenFrom:v,visibleFrom:b,lightHidden:k,darkHidden:x,renderRoot:w,...E},C)=>{let F=(0,s.rZ)(),{styleProps:S,rest:B}=(0,d.c)(E),j=(0,f.m)(),I=(0,m.n)({styleProps:S,theme:F,data:p.p}),M={ref:C,style:function({theme:e,style:t,vars:n,styleProps:r}){let o=u(t,e),i=u(n,e);return{...o,...i,...r}}({theme:F,style:t,vars:n,styleProps:I.inlineStyles}),className:(0,o.Z)(i,{[j]:I.hasResponsiveStyles,"mantine-light-hidden":k,"mantine-dark-hidden":x,[`mantine-hidden-from-${v}`]:v,[`mantine-visible-from-${b}`]:b}),"data-variant":g,"data-size":(0,c.s)(y)?void 0:y||void 0,...function e(t){return t?"string"==typeof t?{[l(t)]:!0}:Array.isArray(t)?[...t].reduce((t,n)=>({...t,...e(n)}),{}):Object.keys(t).reduce((e,n)=>{let r=t[n];return void 0===r||""===r||!1===r||null===r||(e[l(n)]=t[n]),e},{}):null}(h),...B};return r.createElement(r.Fragment,null,I.hasResponsiveStyles&&r.createElement(a.f,{selector:`.${j}`,styles:I.styles,media:I.media}),"function"==typeof w?w(M):r.createElement(e||"div",{...M}))});g.displayName="@mantine/core/Box";let h=(0,i.F)(g)},48649:function(e,t,n){"use strict";n.d(t,{c:function(){return function e(t,n){return Array.isArray(t)?[...t].reduce((t,r)=>({...t,...e(r,n)}),{}):"function"==typeof t?t(n):null==t?{}:t}}})},55934:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(86689);function o(e){let{m:t,mx:n,my:o,mt:i,mb:a,ml:c,mr:s,p:l,px:u,py:d,pt:p,pb:m,pl:f,pr:g,bg:h,c:y,opacity:v,ff:b,fz:k,fw:x,lts:w,ta:E,lh:C,fs:F,tt:S,td:B,w:j,miw:I,maw:M,h:D,mih:T,mah:A,bgsz:P,bgp:R,bgr:N,bga:L,pos:H,top:$,left:O,bottom:z,right:_,inset:V,display:Z,flex:G,hiddenFrom:W,visibleFrom:q,lightHidden:Y,darkHidden:U,...K}=e,X=(0,r.L)({m:t,mx:n,my:o,mt:i,mb:a,ml:c,mr:s,p:l,px:u,py:d,pt:p,pb:m,pl:f,pr:g,bg:h,c:y,opacity:v,ff:b,fz:k,fw:x,lts:w,ta:E,lh:C,fs:F,tt:S,td:B,w:j,miw:I,maw:M,h:D,mih:T,mah:A,bgsz:P,bgp:R,bgr:N,bga:L,pos:H,top:$,left:O,bottom:z,right:_,inset:V,display:Z,flex:G,hiddenFrom:W,visibleFrom:q,lightHidden:Y,darkHidden:U});return{styleProps:X,rest:K}}n(27378)},70238:function(e,t,n){"use strict";n.d(t,{n:function(){return u}});var r=n(53007);n(27378);var o=n(88193);function i(e,t){let n=(0,o.E)({color:e,theme:t});return"dimmed"===n.color?"var(--mantine-color-dimmed)":"bright"===n.color?"var(--mantine-color-bright)":n.variable?`var(${n.variable})`:n.color}let a={text:"var(--mantine-font-family)",mono:"var(--mantine-font-family-monospace)",heading:"var(--mantine-font-family-headings)"};var c=n(71078);let s={color:i,textColor:function(e,t){let n=(0,o.E)({color:e,theme:t});return n.isThemeColor&&void 0===n.shade?`var(--mantine-color-${n.color}-text)`:i(e,t)},fontSize:function(e,t){return"string"==typeof e&&e in t.fontSizes?`var(--mantine-font-size-${e})`:"number"==typeof e||"string"==typeof e?(0,c.h)(e):e},spacing:function(e,t){if("number"==typeof e)return(0,c.h)(e);if("string"==typeof e){let n=e.replace("-","");if(!(n in t.spacing))return(0,c.h)(e);let r=`--mantine-spacing-${n}`;return e.startsWith("-")?`calc(var(${r}) * -1)`:`var(${r})`}return e},identity:function(e){return e},size:function(e){return"number"==typeof e?(0,c.h)(e):e},lineHeight:function(e,t){return"string"==typeof e&&e in t.lineHeights?`var(--mantine-line-height-${e})`:e},fontFamily:function(e){return"string"==typeof e&&e in a?a[e]:e}};function l(e){return e.replace("(min-width: ","").replace("em)","")}function u({styleProps:e,data:t,theme:n}){return function({media:e,...t}){let n=Object.keys(e),r=n.sort((e,t)=>Number(l(e))-Number(l(t))).map(t=>({query:t,styles:e[t]}));return{...t,media:r}}((0,r.X)(e).reduce((o,i)=>{var a,c;if("hiddenFrom"===i||"visibleFrom"===i)return o;let l=t[i],u=Array.isArray(l.property)?l.property:[l.property],d="object"==typeof(c=e[i])&&null!==c?"base"in c?c.base:void 0:c;if(!function(e){if("object"!=typeof e||null===e)return!1;let t=Object.keys(e);return 1!==t.length||"base"!==t[0]}(e[i]))return u.forEach(e=>{o.inlineStyles[e]=s[l.type](d,n)}),o;o.hasResponsiveStyles=!0;let p="object"==typeof(a=e[i])&&null!==a?(0,r.X)(a).filter(e=>"base"!==e):[];return u.forEach(t=>{d&&(o.styles[t]=s[l.type](d,n)),p.forEach(r=>{var a;let c=`(min-width: ${n.breakpoints[r]})`;o.media[c]={...o.media[c],[t]:s[l.type]("object"==typeof(a=e[i])&&null!==a&&r in a?a[r]:a,n)}})}),o},{hasResponsiveStyles:!1,styles:{},inlineStyles:{},media:{}}))}},22897:function(e,t,n){"use strict";n.d(t,{p:function(){return r}});let r={m:{type:"spacing",property:"margin"},mt:{type:"spacing",property:"marginTop"},mb:{type:"spacing",property:"marginBottom"},ml:{type:"spacing",property:"marginLeft"},mr:{type:"spacing",property:"marginRight"},mx:{type:"spacing",property:["marginRight","marginLeft"]},my:{type:"spacing",property:["marginTop","marginBottom"]},p:{type:"spacing",property:"padding"},pt:{type:"spacing",property:"paddingTop"},pb:{type:"spacing",property:"paddingBottom"},pl:{type:"spacing",property:"paddingLeft"},pr:{type:"spacing",property:"paddingRight"},px:{type:"spacing",property:["paddingRight","paddingLeft"]},py:{type:"spacing",property:["paddingTop","paddingBottom"]},bg:{type:"color",property:"background"},c:{type:"textColor",property:"color"},opacity:{type:"identity",property:"opacity"},ff:{type:"fontFamily",property:"fontFamily"},fz:{type:"fontSize",property:"fontSize"},fw:{type:"identity",property:"fontWeight"},lts:{type:"size",property:"letterSpacing"},ta:{type:"identity",property:"textAlign"},lh:{type:"lineHeight",property:"lineHeight"},fs:{type:"identity",property:"fontStyle"},tt:{type:"identity",property:"textTransform"},td:{type:"identity",property:"textDecoration"},w:{type:"spacing",property:"width"},miw:{type:"spacing",property:"minWidth"},maw:{type:"spacing",property:"maxWidth"},h:{type:"spacing",property:"height"},mih:{type:"spacing",property:"minHeight"},mah:{type:"spacing",property:"maxHeight"},bgsz:{type:"size",property:"backgroundSize"},bgp:{type:"identity",property:"backgroundPosition"},bgr:{type:"identity",property:"backgroundRepeat"},bga:{type:"identity",property:"backgroundAttachment"},pos:{type:"identity",property:"position"},top:{type:"identity",property:"top"},left:{type:"size",property:"left"},bottom:{type:"size",property:"bottom"},right:{type:"size",property:"right"},inset:{type:"size",property:"inset"},display:{type:"identity",property:"display"},flex:{type:"identity",property:"flex"}}},40593:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var r=n(27378);function o(){let e=(0,r.useId)().replace(/:/g,"");return`__m__-${e}`}},49134:function(e,t,n){"use strict";n.d(t,{_9:function(){return c},gm:function(){return a}});var r=n(27378),o=n(62849);let i=(0,r.createContext)({dir:"ltr",toggleDirection:()=>{},setDirection:()=>{}});function a(){return(0,r.useContext)(i)}function c({children:e,initialDirection:t="ltr",detectDirection:n=!0}){let[a,c]=(0,r.useState)(t),s=e=>{c(e),document.documentElement.setAttribute("dir",e)};return(0,o.Y)(()=>{if(n){let e=document.documentElement.getAttribute("dir");("rtl"===e||"ltr"===e)&&s(e)}},[]),r.createElement(i.Provider,{value:{dir:a,toggleDirection:()=>s("ltr"===a?"rtl":"ltr"),setDirection:s}},e)}},9889:function(e,t,n){"use strict";n.d(t,{f:function(){return c}});var r=n(27378),o=n(25370),i=n(53007);function a(e){return(0,i.X)(e).reduce((t,n)=>void 0!==e[n]?`${t}${n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}:${e[n]};`:t,"").trim()}function c({selector:e,styles:t,media:n}){let i=(0,o.R7)();return r.createElement("style",{"data-mantine-styles":"inline",nonce:i?.(),dangerouslySetInnerHTML:{__html:function({selector:e,styles:t,media:n}){let r=t?a(t):"",o=Array.isArray(n)?n.map(t=>`@media${t.query}{${e}{${a(t.styles)}}}`):[];return`${r?`${e}{${r}}`:""}${o.join("")}`.trim()}({selector:e,styles:t,media:n})}})}},25370:function(e,t,n){"use strict";n.d(t,{R7:function(){return s},Sm:function(){return a},XD:function(){return o},uK:function(){return c},wB:function(){return i}});var r=n(27378);let o=(0,r.createContext)(null);function i(){let e=(0,r.useContext)(o);if(!e)throw Error("[@mantine/core] MantineProvider was not found in tree");return e}function a(){return i().cssVariablesResolver}function c(){return i().classNamesPrefix}function s(){return i().getStyleNonce}},56641:function(e,t,n){"use strict";n.d(t,{m:function(){return l}});var r=n(53007),o=n(71078);n(27378);var i=n(98901),a=n(91948),c=n(34121);function s(e,t,n){(0,r.X)(t).forEach(r=>Object.assign(e,{[`--mantine-${n}-${r}`]:t[r]}))}let l=e=>{let t=(0,i.j)(e,"dark"),n=(0,i.j)(e,"light"),l=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:(0,o.h)(e.defaultRadius),u={variables:{"--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--mantine-color-scheme":"light dark","--mantine-moz-font-smoothing":e.fontSmoothing?"grayscale":"unset","--mantine-color-white":e.white,"--mantine-color-black":e.black,"--mantine-line-height":e.lineHeights.md,"--mantine-font-family":e.fontFamily,"--mantine-font-family-monospace":e.fontFamilyMonospace,"--mantine-font-family-headings":e.headings.fontFamily,"--mantine-heading-font-weight":e.headings.fontWeight,"--mantine-heading-text-wrap":e.headings.textWrap,"--mantine-radius-default":l,"--mantine-primary-color-filled":`var(--mantine-color-${e.primaryColor}-filled)`,"--mantine-primary-color-filled-hover":`var(--mantine-color-${e.primaryColor}-filled-hover)`,"--mantine-primary-color-light":`var(--mantine-color-${e.primaryColor}-light)`,"--mantine-primary-color-light-hover":`var(--mantine-color-${e.primaryColor}-light-hover)`,"--mantine-primary-color-light-color":`var(--mantine-color-${e.primaryColor}-light-color)`},light:{"--mantine-primary-color-contrast":(0,c.a)(e,"light"),"--mantine-color-bright":"var(--mantine-color-black)","--mantine-color-text":e.black,"--mantine-color-body":e.white,"--mantine-color-error":"var(--mantine-color-red-6)","--mantine-color-placeholder":"var(--mantine-color-gray-5)","--mantine-color-anchor":`var(--mantine-color-${e.primaryColor}-${n})`,"--mantine-color-default":"var(--mantine-color-white)","--mantine-color-default-hover":"var(--mantine-color-gray-0)","--mantine-color-default-color":"var(--mantine-color-black)","--mantine-color-default-border":"var(--mantine-color-gray-4)"},dark:{"--mantine-primary-color-contrast":(0,c.a)(e,"dark"),"--mantine-color-bright":"var(--mantine-color-white)","--mantine-color-text":"var(--mantine-color-dark-0)","--mantine-color-body":"var(--mantine-color-dark-7)","--mantine-color-error":"var(--mantine-color-red-8)","--mantine-color-placeholder":"var(--mantine-color-dark-3)","--mantine-color-anchor":`var(--mantine-color-${e.primaryColor}-4)`,"--mantine-color-default":"var(--mantine-color-dark-6)","--mantine-color-default-hover":"var(--mantine-color-dark-5)","--mantine-color-default-color":"var(--mantine-color-white)","--mantine-color-default-border":"var(--mantine-color-dark-4)"}};s(u.variables,e.breakpoints,"breakpoint"),s(u.variables,e.spacing,"spacing"),s(u.variables,e.fontSizes,"font-size"),s(u.variables,e.lineHeights,"line-height"),s(u.variables,e.shadows,"shadow"),s(u.variables,e.radius,"radius"),e.colors[e.primaryColor].forEach((t,n)=>{u.variables[`--mantine-primary-color-${n}`]=`var(--mantine-color-${e.primaryColor}-${n})`}),(0,r.X)(e.colors).forEach(r=>{e.colors[r].forEach((e,t)=>{u.variables[`--mantine-color-${r}-${t}`]=e});let o=`var(--mantine-color-${r}-${9===n?8:n+1})`,i=`var(--mantine-color-${r}-${9===t?8:t+1})`;u.light["--mantine-color-dimmed"]="var(--mantine-color-gray-6)",u.light[`--mantine-color-${r}-text`]=`var(--mantine-color-${r}-filled)`,u.light[`--mantine-color-${r}-filled`]=`var(--mantine-color-${r}-${n})`,u.light[`--mantine-color-${r}-filled-hover`]=o,u.light[`--mantine-color-${r}-light`]=(0,a.m)(e.colors[r][n],.1),u.light[`--mantine-color-${r}-light-hover`]=(0,a.m)(e.colors[r][n],.12),u.light[`--mantine-color-${r}-light-color`]=`var(--mantine-color-${r}-${n})`,u.light[`--mantine-color-${r}-outline`]=`var(--mantine-color-${r}-${n})`,u.light[`--mantine-color-${r}-outline-hover`]=(0,a.m)(e.colors[r][n],.05),u.dark["--mantine-color-dimmed"]="var(--mantine-color-dark-2)",u.dark[`--mantine-color-${r}-text`]=`var(--mantine-color-${r}-4)`,u.dark[`--mantine-color-${r}-filled`]=`var(--mantine-color-${r}-${t})`,u.dark[`--mantine-color-${r}-filled-hover`]=i,u.dark[`--mantine-color-${r}-light`]=(0,a.m)(e.colors[r][Math.max(0,t-2)],.15),u.dark[`--mantine-color-${r}-light-hover`]=(0,a.m)(e.colors[r][Math.max(0,t-2)],.2),u.dark[`--mantine-color-${r}-light-color`]=`var(--mantine-color-${r}-${Math.max(t-5,0)})`,u.dark[`--mantine-color-${r}-outline`]=`var(--mantine-color-${r}-${Math.max(t-4,0)})`,u.dark[`--mantine-color-${r}-outline-hover`]=(0,a.m)(e.colors[r][Math.max(t-4,0)],.05)});let d=e.headings.sizes;return(0,r.X)(d).forEach(t=>{u.variables[`--mantine-${t}-font-size`]=d[t].fontSize,u.variables[`--mantine-${t}-line-height`]=d[t].lineHeight,u.variables[`--mantine-${t}-font-weight`]=d[t].fontWeight||e.headings.fontWeight}),u}},50221:function(e,t,n){"use strict";n.d(t,{M:function(){return k}});var r=n(27378);function o(e){return"auto"===e||"dark"===e||"light"===e}var i=n(25370),a=n(53007),c=n(27589),s=n(71078),l=n(2256);function u(){let e=(0,l.rZ)(),t=(0,i.R7)(),n=(0,a.X)(e.breakpoints).reduce((t,n)=>{let r=e.breakpoints[n].includes("px"),o=(0,c.px)(e.breakpoints[n]),i=r?`${o-.1}px`:(0,s.em)(o-.1),a=r?`${o}px`:(0,s.em)(o);return`${t}@media (max-width: ${i}) {.mantine-visible-from-${n} {display: none !important;}}@media (min-width: ${a}) {.mantine-hidden-from-${n} {display: none !important;}}`},"");return r.createElement("style",{"data-mantine-styles":"classes",nonce:t?.(),dangerouslySetInnerHTML:{__html:n}})}function d(e){return Object.entries(e).map(([e,t])=>`${e}: ${t};`).join("")}function p(e,t){let n=Array.isArray(e)?e:[e];return n.reduce((e,t)=>`${t}{${e}}`,t)}var m=n(76612),f=n(56641),g=n(10248);let h=(0,f.m)(g.t);function y({cssVariablesSelector:e}){let t=(0,l.rZ)(),n=(0,i.R7)(),o=(0,i.Sm)(),c=function({theme:e,generator:t}){let n=(0,f.m)(e),r=t?.(e);return r?(0,m.R)(n,r):n}({theme:t,generator:o}),s=":root"===e,u=s?function(e){let t={variables:{},light:{},dark:{}};return(0,a.X)(e.variables).forEach(n=>{h.variables[n]!==e.variables[n]&&(t.variables[n]=e.variables[n])}),(0,a.X)(e.light).forEach(n=>{h.light[n]!==e.light[n]&&(t.light[n]=e.light[n])}),(0,a.X)(e.dark).forEach(n=>{h.dark[n]!==e.dark[n]&&(t.dark[n]=e.dark[n])}),t}(c):c,g=function(e,t){let n=d(e.variables),r=n?p(t,n):"",o=d(e.dark),i=o?p(`${t}[data-mantine-color-scheme="dark"]`,o):"",a=d(e.light),c=a?p(`${t}[data-mantine-color-scheme="light"]`,a):"";return`${r}${i}${c}`}(u,e);return g?r.createElement("style",{"data-mantine-styles":!0,nonce:n?.(),dangerouslySetInnerHTML:{__html:`${g}${s?"":` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92888],{95954:function(e,t,n){"use strict";n.d(t,{YF:function(){return m},x7:function(){return c}});var r=n(63349),o=n(25772),i=n(27378),a=n(31542);let c=e=>({name:"arrow",options:e,fn(t){let{element:n,padding:o}="function"==typeof e?e(t):e;if(n&&({}).hasOwnProperty.call(n,"current")){if(null!=n.current)return(0,r.x7)({element:n.current,padding:o}).fn(t)}else if(n)return(0,r.x7)({element:n,padding:o}).fn(t);return{}}});var s="undefined"!=typeof document?i.useLayoutEffect:i.useEffect;function l(e,t){let n,r,o;if(e===t)return!0;if(typeof e!=typeof t)return!1;if("function"==typeof e&&e.toString()===t.toString())return!0;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if((n=e.length)!=t.length)return!1;for(r=n;0!=r--;)if(!l(e[r],t[r]))return!1;return!0}if((n=(o=Object.keys(e)).length)!==Object.keys(t).length)return!1;for(r=n;0!=r--;)if(!({}).hasOwnProperty.call(t,o[r]))return!1;for(r=n;0!=r--;){let n=o[r];if(("_owner"!==n||!e.$$typeof)&&!l(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function u(e){if("undefined"==typeof window)return 1;let t=e.ownerDocument.defaultView||window;return t.devicePixelRatio||1}function d(e,t){let n=u(e);return Math.round(t*n)/n}function p(e){let t=i.useRef(e);return s(()=>{t.current=e}),t}function m(e){void 0===e&&(e={});let{placement:t="bottom",strategy:n="absolute",middleware:r=[],platform:c,elements:{reference:m,floating:f}={},transform:g=!0,whileElementsMounted:h,open:y}=e,[v,b]=i.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[k,x]=i.useState(r);l(k,r)||x(r);let[w,E]=i.useState(null),[C,F]=i.useState(null),S=i.useCallback(e=>{e!=M.current&&(M.current=e,E(e))},[E]),B=i.useCallback(e=>{e!==D.current&&(D.current=e,F(e))},[F]),j=m||w,I=f||C,M=i.useRef(null),D=i.useRef(null),T=i.useRef(v),A=p(h),P=p(c),R=i.useCallback(()=>{if(!M.current||!D.current)return;let e={placement:t,strategy:n,middleware:k};P.current&&(e.platform=P.current),(0,o.oo)(M.current,D.current,e).then(e=>{let t={...e,isPositioned:!0};N.current&&!l(T.current,t)&&(T.current=t,a.flushSync(()=>{b(t)}))})},[k,t,n,P]);s(()=>{!1===y&&T.current.isPositioned&&(T.current.isPositioned=!1,b(e=>({...e,isPositioned:!1})))},[y]);let N=i.useRef(!1);s(()=>(N.current=!0,()=>{N.current=!1}),[]),s(()=>{if(j&&(M.current=j),I&&(D.current=I),j&&I){if(A.current)return A.current(j,I,R);R()}},[j,I,R,A]);let L=i.useMemo(()=>({reference:M,floating:D,setReference:S,setFloating:B}),[S,B]),H=i.useMemo(()=>({reference:j,floating:I}),[j,I]),$=i.useMemo(()=>{let e={position:n,left:0,top:0};if(!H.floating)return e;let t=d(H.floating,v.x),r=d(H.floating,v.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...u(H.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}},[n,g,H.floating,v.x,v.y]);return i.useMemo(()=>({...v,update:R,refs:L,elements:H,floatingStyles:$}),[v,R,L,H,$])}},2216:function(e,t,n){"use strict";n.d(t,{KK:function(){return _},NI:function(){return Z},Qu:function(){return D},XI:function(){return B},YF:function(){return z},bQ:function(){return O},e0:function(){return M},qs:function(){return G},tj:function(){return I}});var r,o=n(25772),i=n(95954),a=n(27378);n(31542);var c="undefined"!=typeof document?a.useLayoutEffect:a.useEffect;let s=!1,l=0,u=()=>"floating-ui-"+l++,d=(r||(r=n.t(a,2)))["useId".toString()],p=d||function(){let[e,t]=a.useState(()=>s?u():void 0);return c(()=>{null==e&&t(u())},[]),a.useEffect(()=>{s||(s=!0)},[]),e},m=a.createContext(null),f=a.createContext(null),g=()=>{var e;return(null==(e=a.useContext(m))?void 0:e.id)||null},h=()=>a.useContext(f);function y(e){return(null==e?void 0:e.ownerDocument)||document}function v(e){return y(e).defaultView||window}function b(e){return!!e&&(e instanceof Element||e instanceof v(e).Element)}function k(e){return!!e&&(e instanceof HTMLElement||e instanceof v(e).HTMLElement)}function x(e,t){let n=["mouse","pen"];return t||n.push("",void 0),n.includes(e)}function w(e,t){if(!e||!t)return!1;let n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&function(e){if("undefined"==typeof ShadowRoot)return!1;let t=v(e).ShadowRoot;return e instanceof t||e instanceof ShadowRoot}(n)){let n=t;for(;n;){if(e===n)return!0;n=n.parentNode||n.host}}return!1}function E(e){return"data-floating-ui-"+e}function C(e){let t=(0,a.useRef)(e);return c(()=>{t.current=e}),t}let F=E("safe-polygon");function S(e,t,n){return n&&!x(n)?0:"number"==typeof e?e:null==e?void 0:e[t]}function B(e,t){void 0===t&&(t={});let{open:n,onOpenChange:r,dataRef:o,events:i,elements:{domReference:s,floating:l},refs:u}=e,{enabled:d=!0,delay:p=0,handleClose:m=null,mouseOnly:f=!1,restMs:v=0,move:k=!0}=t,E=h(),B=g(),j=C(m),I=C(p),M=a.useRef(),D=a.useRef(),T=a.useRef(),A=a.useRef(),P=a.useRef(!0),R=a.useRef(!1),N=a.useRef(()=>{}),L=a.useCallback(()=>{var e;let t=null==(e=o.current.openEvent)?void 0:e.type;return(null==t?void 0:t.includes("mouse"))&&"mousedown"!==t},[o]);a.useEffect(()=>{if(d)return i.on("dismiss",e),()=>{i.off("dismiss",e)};function e(){clearTimeout(D.current),clearTimeout(A.current),P.current=!0}},[d,i]),a.useEffect(()=>{if(!d||!j.current||!n)return;function e(e){L()&&r(!1,e)}let t=y(l).documentElement;return t.addEventListener("mouseleave",e),()=>{t.removeEventListener("mouseleave",e)}},[l,n,r,d,j,o,L]);let H=a.useCallback(function(e,t){void 0===t&&(t=!0);let n=S(I.current,"close",M.current);n&&!T.current?(clearTimeout(D.current),D.current=setTimeout(()=>r(!1,e),n)):t&&(clearTimeout(D.current),r(!1,e))},[I,r]),$=a.useCallback(()=>{N.current(),T.current=void 0},[]),O=a.useCallback(()=>{if(R.current){let e=y(u.floating.current).body;e.style.pointerEvents="",e.removeAttribute(F),R.current=!1}},[u]);return a.useEffect(()=>{if(d&&b(s))return n&&s.addEventListener("mouseleave",c),null==l||l.addEventListener("mouseleave",c),k&&s.addEventListener("mousemove",i,{once:!0}),s.addEventListener("mouseenter",i),s.addEventListener("mouseleave",a),()=>{n&&s.removeEventListener("mouseleave",c),null==l||l.removeEventListener("mouseleave",c),k&&s.removeEventListener("mousemove",i),s.removeEventListener("mouseenter",i),s.removeEventListener("mouseleave",a)};function t(){return!!o.current.openEvent&&["click","mousedown"].includes(o.current.openEvent.type)}function i(e){if(clearTimeout(D.current),P.current=!1,f&&!x(M.current)||v>0&&0===S(I.current,"open"))return;let t=S(I.current,"open",M.current);t?D.current=setTimeout(()=>{r(!0,e)},t):r(!0,e)}function a(r){if(t())return;N.current();let o=y(l);if(clearTimeout(A.current),j.current){n||clearTimeout(D.current),T.current=j.current({...e,tree:E,x:r.clientX,y:r.clientY,onClose(){O(),$(),H(r)}});let t=T.current;o.addEventListener("mousemove",t),N.current=()=>{o.removeEventListener("mousemove",t)};return}let i="touch"!==M.current||!w(l,r.relatedTarget);i&&H(r)}function c(n){t()||null==j.current||j.current({...e,tree:E,x:n.clientX,y:n.clientY,onClose(){O(),$(),H(n)}})(n)}},[s,l,d,e,f,v,k,H,$,O,r,n,E,I,j,o]),c(()=>{var e,t,r;if(d&&n&&null!=(e=j.current)&&e.__options.blockPointerEvents&&L()){let e=y(l).body;if(e.setAttribute(F,""),e.style.pointerEvents="none",R.current=!0,b(s)&&l){let e=null==E?void 0:null==(t=E.nodesRef.current.find(e=>e.id===B))?void 0:null==(r=t.context)?void 0:r.elements.floating;return e&&(e.style.pointerEvents=""),s.style.pointerEvents="auto",l.style.pointerEvents="auto",()=>{s.style.pointerEvents="",l.style.pointerEvents=""}}}},[d,n,B,l,s,E,j,o,L]),c(()=>{n||(M.current=void 0,$(),O())},[n,$,O]),a.useEffect(()=>()=>{$(),clearTimeout(D.current),clearTimeout(A.current),O()},[d,$,O]),a.useMemo(()=>{if(!d)return{};function e(e){M.current=e.pointerType}return{reference:{onPointerDown:e,onPointerEnter:e,onMouseMove(e){n||0===v||(clearTimeout(A.current),A.current=setTimeout(()=>{P.current||r(!0,e.nativeEvent)},v))}},floating:{onMouseEnter(){clearTimeout(D.current)},onMouseLeave(e){i.emit("dismiss",{type:"mouseLeave",data:{returnFocus:!1}}),H(e.nativeEvent,!1)}}}},[i,d,v,n,r,H])}let j=a.createContext({delay:0,initialDelay:0,timeoutMs:0,currentId:null,setCurrentId:()=>{},setState:()=>{},isInstantPhase:!1}),I=()=>a.useContext(j),M=e=>{let{children:t,delay:n,timeoutMs:r=0}=e,[o,i]=a.useReducer((e,t)=>({...e,...t}),{delay:n,timeoutMs:r,initialDelay:n,currentId:null,isInstantPhase:!1}),s=a.useRef(null),l=a.useCallback(e=>{i({currentId:e})},[]);return c(()=>{o.currentId?null===s.current?s.current=o.currentId:i({isInstantPhase:!0}):(i({isInstantPhase:!1}),s.current=null)},[o.currentId]),a.createElement(j.Provider,{value:a.useMemo(()=>({...o,setState:i,setCurrentId:l}),[o,i,l])},t)},D=(e,t)=>{let{open:n,onOpenChange:r}=e,{id:o}=t,{currentId:i,setCurrentId:a,initialDelay:s,setState:l,timeoutMs:u}=I();c(()=>{i&&(l({delay:{open:1,close:S(s,"close")}}),i!==o&&r(!1))},[o,r,l,i,s]),c(()=>{function e(){r(!1),l({delay:s,currentId:null})}if(!n&&i===o){if(u){let t=window.setTimeout(e,u);return()=>{clearTimeout(t)}}e()}},[n,l,i,o,r,s,u]),c(()=>{n&&a(o)},[n,a,o])};function T(e,t){let n=e.filter(e=>{var n;return e.parentId===t&&(null==(n=e.context)?void 0:n.open)}),r=n;for(;r.length;)r=e.filter(e=>{var t;return null==(t=r)?void 0:t.some(t=>{var n;return e.parentId===t.id&&(null==(n=e.context)?void 0:n.open)})}),n=n.concat(r);return n}let A=(r||(r=n.t(a,2)))["useInsertionEffect".toString()],P=A||(e=>e());function R(e){let t=a.useRef(()=>{});return P(()=>{t.current=e}),a.useCallback(function(){for(var e=arguments.length,n=Array(e),r=0;r{var t,n;return{escapeKeyBubbles:"boolean"==typeof e?e:null!=(t=null==e?void 0:e.escapeKey)&&t,outsidePressBubbles:"boolean"==typeof e?e:null==(n=null==e?void 0:e.outsidePress)||n}};function O(e,t){void 0===t&&(t={});let{open:n,onOpenChange:r,events:i,nodeId:c,elements:{reference:s,domReference:l,floating:u},dataRef:d}=e,{enabled:p=!0,escapeKey:m=!0,outsidePress:f=!0,outsidePressEvent:x="pointerdown",referencePress:w=!1,referencePressEvent:E="pointerdown",ancestorScroll:C=!1,bubbles:F}=t,S=h(),B=null!=g(),j=R("function"==typeof f?f:()=>!1),I="function"==typeof f?j:f,M=a.useRef(!1),{escapeKeyBubbles:D,outsidePressBubbles:A}=$(F),P=R(e=>{if(!n||!p||!m||"Escape"!==e.key)return;let t=S?T(S.nodesRef.current,c):[];if(!D&&(e.stopPropagation(),t.length>0)){let e=!0;if(t.forEach(t=>{var n;if(null!=(n=t.context)&&n.open&&!t.context.dataRef.current.__escapeKeyBubbles){e=!1;return}}),!e)return}i.emit("dismiss",{type:"escapeKey",data:{returnFocus:{preventScroll:!1}}}),r(!1,"nativeEvent"in e?e.nativeEvent:e)}),O=R(e=>{var t;let n=M.current;if(M.current=!1,n||"function"==typeof I&&!I(e))return;let o="composedPath"in e?e.composedPath()[0]:e.target;if(k(o)&&u){let t=o.clientWidth>0&&o.scrollWidth>o.clientWidth,n=o.clientHeight>0&&o.scrollHeight>o.clientHeight,r=n&&e.offsetX>o.clientWidth;if(n){let t="rtl"===v(u).getComputedStyle(o).direction;t&&(r=e.offsetX<=o.offsetWidth-o.clientWidth)}if(r||t&&e.offsetY>o.clientHeight)return}let a=S&&T(S.nodesRef.current,c).some(t=>{var n;return N(e,null==(n=t.context)?void 0:n.elements.floating)});if(N(e,u)||N(e,l)||a)return;let s=S?T(S.nodesRef.current,c):[];if(s.length>0){let e=!0;if(s.forEach(t=>{var n;if(null!=(n=t.context)&&n.open&&!t.context.dataRef.current.__outsidePressBubbles){e=!1;return}}),!e)return}i.emit("dismiss",{type:"outsidePress",data:{returnFocus:B?{preventScroll:!0}:function(e){if(0===e.mozInputSource&&e.isTrusted)return!0;let t=/Android/i;return(t.test(function(){let e=navigator.userAgentData;return null!=e&&e.platform?e.platform:navigator.platform}())||t.test(function(){let e=navigator.userAgentData;return e&&Array.isArray(e.brands)?e.brands.map(e=>{let{brand:t,version:n}=e;return t+"/"+n}).join(" "):navigator.userAgent}()))&&e.pointerType?"click"===e.type&&1===e.buttons:0===e.detail&&!e.pointerType}(e)||0===(t=e).width&&0===t.height||1===t.width&&1===t.height&&0===t.pressure&&0===t.detail&&"mouse"!==t.pointerType||t.width<1&&t.height<1&&0===t.pressure&&0===t.detail}}),r(!1,e)});return a.useEffect(()=>{if(!n||!p)return;function e(e){r(!1,e)}d.current.__escapeKeyBubbles=D,d.current.__outsidePressBubbles=A;let t=y(u);m&&t.addEventListener("keydown",P),I&&t.addEventListener(x,O);let i=[];return C&&(b(l)&&(i=(0,o.Kx)(l)),b(u)&&(i=i.concat((0,o.Kx)(u))),!b(s)&&s&&s.contextElement&&(i=i.concat((0,o.Kx)(s.contextElement)))),(i=i.filter(e=>{var n;return e!==(null==(n=t.defaultView)?void 0:n.visualViewport)})).forEach(t=>{t.addEventListener("scroll",e,{passive:!0})}),()=>{m&&t.removeEventListener("keydown",P),I&&t.removeEventListener(x,O),i.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,s,m,I,x,n,r,C,p,D,A,P,O]),a.useEffect(()=>{M.current=!1},[I,x]),a.useMemo(()=>p?{reference:{onKeyDown:P,[L[E]]:e=>{w&&(i.emit("dismiss",{type:"referencePress",data:{returnFocus:!1}}),r(!1,e.nativeEvent))}},floating:{onKeyDown:P,[H[x]]:()=>{M.current=!0}}}:{},[p,i,w,x,E,r,P])}function z(e){var t;void 0===e&&(e={});let{open:n=!1,onOpenChange:r,nodeId:o}=e,[s,l]=a.useState(null),u=(null==(t=e.elements)?void 0:t.reference)||s,d=(0,i.YF)(e),m=h(),f=R((e,t)=>{e&&(y.current.openEvent=t),null==r||r(e,t)}),g=a.useRef(null),y=a.useRef({}),v=a.useState(()=>(function(){let e=new Map;return{emit(t,n){var r;null==(r=e.get(t))||r.forEach(e=>e(n))},on(t,n){e.set(t,[...e.get(t)||[],n])},off(t,n){var r;e.set(t,(null==(r=e.get(t))?void 0:r.filter(e=>e!==n))||[])}}})())[0],k=p(),x=a.useCallback(e=>{let t=b(e)?{getBoundingClientRect:()=>e.getBoundingClientRect(),contextElement:e}:e;d.refs.setReference(t)},[d.refs]),w=a.useCallback(e=>{(b(e)||null===e)&&(g.current=e,l(e)),(b(d.refs.reference.current)||null===d.refs.reference.current||null!==e&&!b(e))&&d.refs.setReference(e)},[d.refs]),E=a.useMemo(()=>({...d.refs,setReference:w,setPositionReference:x,domReference:g}),[d.refs,w,x]),C=a.useMemo(()=>({...d.elements,domReference:u}),[d.elements,u]),F=a.useMemo(()=>({...d,refs:E,elements:C,dataRef:y,nodeId:o,floatingId:k,events:v,open:n,onOpenChange:f}),[d,o,k,v,n,f,E,C]);return c(()=>{let e=null==m?void 0:m.nodesRef.current.find(e=>e.id===o);e&&(e.context=F)}),a.useMemo(()=>({...d,context:F,refs:E,elements:C}),[d,E,C,F])}function _(e,t){void 0===t&&(t={});let{open:n,onOpenChange:r,dataRef:o,events:i,refs:c,elements:{floating:s,domReference:l}}=e,{enabled:u=!0,keyboardOnly:d=!0}=t,p=a.useRef(""),m=a.useRef(!1),f=a.useRef();return a.useEffect(()=>{if(!u)return;let e=y(s),t=e.defaultView||window;function r(){!n&&k(l)&&l===function(e){let t=e.activeElement;for(;(null==(n=t)?void 0:null==(r=n.shadowRoot)?void 0:r.activeElement)!=null;){var n,r;t=t.shadowRoot.activeElement}return t}(y(l))&&(m.current=!0)}return t.addEventListener("blur",r),()=>{t.removeEventListener("blur",r)}},[s,l,n,u]),a.useEffect(()=>{if(u)return i.on("dismiss",e),()=>{i.off("dismiss",e)};function e(e){("referencePress"===e.type||"escapeKey"===e.type)&&(m.current=!0)}},[i,u]),a.useEffect(()=>()=>{clearTimeout(f.current)},[]),a.useMemo(()=>u?{reference:{onPointerDown(e){let{pointerType:t}=e;p.current=t,m.current=!!(t&&d)},onMouseLeave(){m.current=!1},onFocus(e){var t;m.current||"focus"===e.type&&(null==(t=o.current.openEvent)?void 0:t.type)==="mousedown"&&N(o.current.openEvent,l)||r(!0,e.nativeEvent)},onBlur(e){m.current=!1;let t=e.relatedTarget,n=b(t)&&t.hasAttribute(E("focus-guard"))&&"outside"===t.getAttribute("data-type");f.current=setTimeout(()=>{w(c.floating.current,t)||w(l,t)||n||r(!1,e.nativeEvent)})}}}:{},[u,d,l,c,o,r])}function V(e,t,n){let r=new Map;return{..."floating"===n&&{tabIndex:-1},...e,...t.map(e=>e?e[n]:null).concat(e).reduce((e,t)=>(t&&Object.entries(t).forEach(t=>{let[n,o]=t;if(0===n.indexOf("on")){if(r.has(n)||r.set(n,[]),"function"==typeof o){var i;null==(i=r.get(n))||i.push(o),e[n]=function(){for(var e,t=arguments.length,o=Array(t),i=0;ie(...o)).find(e=>void 0!==e)}}}else e[n]=o}),e),{})}}function Z(e){void 0===e&&(e=[]);let t=e,n=a.useCallback(t=>V(t,e,"reference"),t),r=a.useCallback(t=>V(t,e,"floating"),t),o=a.useCallback(t=>V(t,e,"item"),e.map(e=>null==e?void 0:e.item));return a.useMemo(()=>({getReferenceProps:n,getFloatingProps:r,getItemProps:o}),[n,r,o])}function G(e,t){void 0===t&&(t={});let{open:n,floatingId:r}=e,{enabled:o=!0,role:i="dialog"}=t,c=p();return a.useMemo(()=>{let e={id:r,role:i};return o?"tooltip"===i?{reference:{"aria-describedby":n?r:void 0},floating:e}:{reference:{"aria-expanded":n?"true":"false","aria-haspopup":"alertdialog"===i?"dialog":i,"aria-controls":n?r:void 0,..."listbox"===i&&{role:"combobox"},..."menu"===i&&{id:c}},floating:{...e,..."menu"===i&&{"aria-labelledby":c}}}:{}},[o,i,n,r,c])}},54764:function(e,t,n){"use strict";n.d(t,{Z:function(){return y}});var r=n(27378),o=n(23615),i=n.n(o),a={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"},c=Object.defineProperty,s=Object.defineProperties,l=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,m=(e,t,n)=>t in e?c(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))d.call(t,n)&&m(e,n,t[n]);if(u)for(var n of u(t))p.call(t,n)&&m(e,n,t[n]);return e},g=(e,t)=>s(e,l(t)),h=(e,t)=>{var n={};for(var r in e)d.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&u)for(var r of u(e))0>t.indexOf(r)&&p.call(e,r)&&(n[r]=e[r]);return n},y=(e,t,n)=>{let o=(0,r.forwardRef)((t,o)=>{var{color:i="currentColor",size:c=24,stroke:s=2,children:l}=t,u=h(t,["color","size","stroke","children"]);return(0,r.createElement)("svg",f(g(f({ref:o},a),{width:c,height:c,stroke:i,strokeWidth:s,className:`tabler-icon tabler-icon-${e}`}),u),[...n.map(([e,t])=>(0,r.createElement)(e,t)),...l||[]])});return o.propTypes={color:i().string,size:i().oneOfType([i().string,i().number]),stroke:i().oneOfType([i().string,i().number])},o.displayName=`${t}`,o}},13070:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("brand-mantine","IconBrandMantine",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M11 16c1.22 -.912 2 -2.36 2 -4a5.01 5.01 0 0 0 -2 -4",key:"svg-1"}],["path",{d:"M14 9h-2",key:"svg-2"}],["path",{d:"M14 15h-2",key:"svg-3"}],["path",{d:"M10 12h.01",key:"svg-4"}]])},16659:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("check","IconCheck",[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]])},62283:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("chevron-down","IconChevronDown",[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]])},24948:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("circle-dashed","IconCircleDashed",[["path",{d:"M8.56 3.69a9 9 0 0 0 -2.92 1.95",key:"svg-0"}],["path",{d:"M3.69 8.56a9 9 0 0 0 -.69 3.44",key:"svg-1"}],["path",{d:"M3.69 15.44a9 9 0 0 0 1.95 2.92",key:"svg-2"}],["path",{d:"M8.56 20.31a9 9 0 0 0 3.44 .69",key:"svg-3"}],["path",{d:"M15.44 20.31a9 9 0 0 0 2.92 -1.95",key:"svg-4"}],["path",{d:"M20.31 15.44a9 9 0 0 0 .69 -3.44",key:"svg-5"}],["path",{d:"M20.31 8.56a9 9 0 0 0 -1.95 -2.92",key:"svg-6"}],["path",{d:"M15.44 3.69a9 9 0 0 0 -3.44 -.69",key:"svg-7"}]])},94503:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("components","IconComponents",[["path",{d:"M3 12l3 3l3 -3l-3 -3z",key:"svg-0"}],["path",{d:"M15 12l3 3l3 -3l-3 -3z",key:"svg-1"}],["path",{d:"M9 6l3 3l3 -3l-3 -3z",key:"svg-2"}],["path",{d:"M9 18l3 3l3 -3l-3 -3z",key:"svg-3"}]])},31550:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("external-link","IconExternalLink",[["path",{d:"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6",key:"svg-0"}],["path",{d:"M11 13l9 -9",key:"svg-1"}],["path",{d:"M15 4h5v5",key:"svg-2"}]])},61433:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("forms","IconForms",[["path",{d:"M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3",key:"svg-0"}],["path",{d:"M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3",key:"svg-1"}],["path",{d:"M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7",key:"svg-2"}],["path",{d:"M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1",key:"svg-3"}],["path",{d:"M17 12h.01",key:"svg-4"}],["path",{d:"M13 12h.01",key:"svg-5"}]])},4675:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("info-circle","IconInfoCircle",[["path",{d:"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",key:"svg-0"}],["path",{d:"M12 9h.01",key:"svg-1"}],["path",{d:"M11 12h1v4h1",key:"svg-2"}]])},66684:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("menu-2","IconMenu2",[["path",{d:"M4 6l16 0",key:"svg-0"}],["path",{d:"M4 12l16 0",key:"svg-1"}],["path",{d:"M4 18l16 0",key:"svg-2"}]])},11541:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("moon","IconMoon",[["path",{d:"M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z",key:"svg-0"}]])},20243:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("notebook","IconNotebook",[["path",{d:"M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18",key:"svg-0"}],["path",{d:"M13 8l2 0",key:"svg-1"}],["path",{d:"M13 12l2 0",key:"svg-2"}]])},27854:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("search","IconSearch",[["path",{d:"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0",key:"svg-0"}],["path",{d:"M21 21l-6 -6",key:"svg-1"}]])},61736:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("sun","IconSun",[["path",{d:"M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0",key:"svg-0"}],["path",{d:"M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7",key:"svg-1"}]])},63166:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("text-direction-ltr","IconTextDirectionLtr",[["path",{d:"M5 19h14",key:"svg-0"}],["path",{d:"M17 21l2 -2l-2 -2",key:"svg-1"}],["path",{d:"M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5",key:"svg-2"}],["path",{d:"M14 15v-11",key:"svg-3"}],["path",{d:"M10 15v-11",key:"svg-4"}]])},91964:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r=(0,n(54764).Z)("text-direction-rtl","IconTextDirectionRtl",[["path",{d:"M16 4h-6.5a3.5 3.5 0 0 0 0 7h.5",key:"svg-0"}],["path",{d:"M14 15v-11",key:"svg-1"}],["path",{d:"M10 15v-11",key:"svg-2"}],["path",{d:"M5 19h14",key:"svg-3"}],["path",{d:"M7 21l-2 -2l2 -2",key:"svg-4"}]])},36321:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n(1347)}])},74490:function(e,t,n){"use strict";n.d(t,{U:function(){return c}});var r=n(24246);n(27378);var o=n(40624),i=n(43134),a=n.n(i);function c(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,o.Z)(a().section,t),...n})}},17992:function(e,t,n){"use strict";n.d(t,{T:function(){return p}});var r=n(24246);n(27378);var o=n(79894),i=n.n(o),a=n(40624),c=n(29995),s=n(30020),l=n(27080),u=n(91487),d=n.n(u);function p(e){return(0,r.jsxs)(i(),{href:"/",className:(0,a.Z)(d().logo,c.C.auto),"aria-label":"Mantine",children:[(0,r.jsx)(s.T,{children:"Welcome to Mantine, React components library that you always wished for"}),(0,r.jsx)(l.D,{size:30,...e})]})}},16809:function(e,t,n){"use strict";n.d(t,{g:function(){return c}});var r=n(24246);n(27378);var o=n(28862),i=n(71078),a=n(74490);function c(e){let{data:t,head:n}=e,c=t.map((e,t)=>{let n=e.map((e,t)=>(0,r.jsx)(o.i.Td,{children:"string"==typeof e&&e.includes("var(--mantine-scale)")?function(e){let t=e.match(/calc\((.*?)\)/g);if(!t)return e;let n=e;return t.forEach(e=>{let t=e.replace("calc(","").replace(")","").split("*")[0].trim();n=n.replace(e,t)}),n.replaceAll("rem)","rem")}(e):e},t));return(0,r.jsx)(o.i.Tr,{children:n},t)}),s=Array.isArray(n)?n.map((e,t)=>(0,r.jsx)(o.i.Th,{children:e},t)):null;return(0,r.jsx)(a.U,{children:(0,r.jsx)("div",{style:{overflowX:"auto"},children:(0,r.jsx)("div",{style:{minWidth:(0,i.h)(400)},children:(0,r.jsxs)(o.i,{children:[s&&(0,r.jsx)(o.i.Thead,{children:(0,r.jsx)(o.i.Tr,{children:s})}),(0,r.jsx)(o.i.Tbody,{children:c})]})})})})}},79388:function(e,t,n){"use strict";n.d(t,{yp:function(){return l},gw:function(){return eP.g},Ec:function(){return H},NV:function(){return _},Cu:function(){return eX},an:function(){return b}});var r=n(24246),o=n(27378),i=n(40624),a=n(27154),c=n(87066),s=n.n(c);function l(e){let{className:t,...n}=e;return(0,r.jsx)(a.P,{className:(0,i.Z)(s().code,t),...n})}function u(e){let{children:t}=e;return(0,r.jsx)(l,{code:t.props.children,language:function(e){let t=(e.props.className||"").match(RegExp("language-(?.*)")),n=t&&t.groups&&t.groups.lang?t.groups.lang:"tsx";if(["js","jsx","ts","tsx"].includes(n))return"tsx";if(["css","scss"].includes(n))return"scss";if(["html","bash","json"].includes(n))return n;throw Error("Unknown language: ".concat(n))}(t)})}var d=n(16659),p=n(57847),m=n(29995),f=n(19397),g=n(1674);function h(e){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",...e,children:[(0,r.jsx)("path",{d:"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"}),(0,r.jsx)("path",{d:"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"})]})}var y=n(92911),v=n.n(y);function b(e){let{id:t,children:n,order:o=2,...a}=e,{copied:c,copy:s,reset:l}=(0,g.V)();return 1===o?(0,r.jsx)(p.D,{className:v().title,"data-h1":!0,children:n}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{id:t,"data-heading":n,"data-order":o,className:v().offset}),(0,r.jsxs)(p.D,{order:o,className:v().title,...a,children:[(0,r.jsx)("a",{className:(0,i.Z)(v().link,m.C.auto),href:"#".concat(t),children:n}),(0,r.jsx)(f.k,{className:v().copyButton,tabIndex:-1,"aria-label":"Copy link to the section",onClick:()=>s("".concat(window.location.origin).concat(window.location.pathname,"#").concat(t)),onMouseLeave:l,title:c?"✓ Copied to clipboard":"Copy link",children:c?(0,r.jsx)(d.Z,{className:v().copyIcon}):(0,r.jsx)(h,{className:v().copyIcon})})]})]})}let k=e=>t=>(0,r.jsx)(b,{order:e,...t}),x={div:"HTMLDivElement",button:"HTMLButtonElement",input:"HTMLInputElement",textarea:"HTMLTextAreaElement",select:"HTMLSelectElement",a:"HTMLAnchorElement"};function w(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"get-element-ref",children:"Get element ref"}),(0,r.jsx)(l,{code:function(e){let t=e.refType in x?x[e.refType]:e.refType;return"import { useRef } from 'react';\nimport { ".concat(e.component," } from '").concat(e.package||"@mantine/core","';\n\nfunction Demo() {\n const ref = useRef<").concat(t,">(null);\n return <").concat(e.component," ref={ref} />;\n}\n ")}(e)})]})}var E=n(56589),C=n(71078);function F({size:e,style:t,...n}){return o.createElement(E.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",preserveAspectRatio:"xMidYMid",style:[{width:(0,C.h)(e),height:(0,C.h)(e)},t],...n},o.createElement("path",{fill:"#3178C6",d:"M128 0c70.692 0 128 57.308 128 128 0 70.692-57.308 128-128 128C57.308 256 0 198.692 0 128 0 57.308 57.308 0 128 0z"}),o.createElement("path",{fill:"#FFF",d:"M140.463 160.712v25.03c4.017 2.086 8.767 3.651 14.25 4.694 5.484 1.043 11.264 1.564 17.34 1.564 5.921 0 11.547-.574 16.876-1.721 5.329-1.147 10.002-3.037 14.018-5.671 4.016-2.633 7.196-6.075 9.539-10.325 2.343-4.25 3.514-9.503 3.514-15.761 0-4.537-.669-8.513-2.008-11.929a27.928 27.928 0 00-5.793-9.112c-2.523-2.66-5.548-5.045-9.075-7.157-3.527-2.112-7.505-4.107-11.933-5.984-3.244-1.356-6.153-2.673-8.728-3.95-2.574-1.278-4.762-2.581-6.565-3.911-1.802-1.33-3.192-2.738-4.17-4.224-.979-1.486-1.468-3.168-1.468-5.045 0-1.721.438-3.272 1.313-4.654.876-1.382 2.111-2.569 3.707-3.56 1.597-.99 3.553-1.76 5.87-2.307 2.317-.547 4.892-.821 7.724-.821 2.06 0 4.235.156 6.526.47 2.292.312 4.596.794 6.913 1.446a47.66 47.66 0 016.758 2.464 37.143 37.143 0 016.063 3.442V80.302c-3.759-1.46-7.865-2.542-12.319-3.246-4.454-.704-9.564-1.056-15.331-1.056-5.87 0-11.431.639-16.683 1.916-5.252 1.278-9.873 3.273-13.864 5.984-3.991 2.712-7.144 6.166-9.461 10.364S140 103.481 140 109.322c0 7.457 2.124 13.818 6.372 19.085 4.248 5.267 10.697 9.726 19.348 13.376a260.147 260.147 0 019.5 4.146c2.934 1.355 5.47 2.763 7.607 4.223 2.137 1.461 3.823 3.051 5.059 4.772 1.236 1.721 1.854 3.676 1.854 5.866a9.06 9.06 0 01-1.159 4.498c-.772 1.382-1.943 2.581-3.514 3.598-1.57 1.017-3.527 1.812-5.87 2.386-2.343.573-5.085.86-8.225.86-5.355 0-10.659-.952-15.911-2.855-5.252-1.903-10.118-4.758-14.598-8.565zm-42.752-62.17H130V78H40v20.541h32.132V190H97.71V98.541z"}))}var S=n(4675),B=n(2256),j=n(46374),I=n(91948),M=n(61628),D=n.n(M);function T(e){let{className:t,...n}=e,o=(0,B.rZ)();return(0,r.jsx)(j.V,{className:(0,i.Z)(D().root,t),icon:(0,r.jsx)(S.Z,{className:D().icon}),radius:"md",__vars:{"--docs-bq-code-bg-light":(0,I.m)(o.colors.blue[6],.2),"--docs-bq-code-bg-dark":(0,I.m)(o.colors.blue[4],.2)},...n})}var A=n(79894),P=n.n(A),R=n(9136),N=n(75356),L=n.n(N);function H(e){let{href:t,...n}=e,o=null==t?void 0:t.replace("https://mantine.dev","");return(null==o?void 0:o.startsWith("http"))||!(o.trim().length>0)?(0,r.jsx)(R.e,{className:L().link,href:t,...n}):(0,r.jsx)(R.e,{className:L().link,component:P(),href:o,...n})}var $=n(94998),O=n(75522),z=n.n(O);function _(e){let{className:t,...n}=e;return(0,r.jsx)("p",{className:(0,i.Z)(z().paragraph,t),...n})}function V(e){let{className:t,...n}=e;return(0,r.jsx)("ul",{className:(0,i.Z)(z().ul,t),...n})}function Z(e){let{className:t,...n}=e;return(0,r.jsx)("li",{className:(0,i.Z)(z().li,t),...n})}function G(e){return(0,r.jsx)($.E,{...e})}function W(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"polymorphic-component",children:"Polymorphic component"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:e.component})," is a"," ",(0,r.jsx)(H,{href:"/guides/polymorphic/",children:"polymorphic component"})," – its default root element is ",(0,r.jsx)(G,{children:e.defaultElement}),", but it can be changed to any other element or component with ",(0,r.jsx)(G,{children:"component"})," prop:"]}),(0,r.jsx)(l,{code:"import { ".concat(e.component," } from '").concat(e.package||"@mantine/core","';\n\nfunction Demo() {\n return <").concat(e.component,' component="').concat(e.changeToElement,'" />;\n}\n ')}),e.withNext&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(_,{children:["You can also use components in ",(0,r.jsx)(G,{children:"component"})," prop, for example, Next.js"," ",(0,r.jsx)(G,{children:"Link"}),":"]}),(0,r.jsx)(l,{code:"import Link from 'next/link';\nimport { ".concat(e.component," } from '").concat(e.package||"@mantine/core","';\n\nfunction Demo() {\n return <").concat(e.component,' component={Link} href="/" />;\n}')})]}),(0,r.jsxs)(T,{icon:(0,r.jsx)(F,{size:32}),color:"#3178C6",children:[(0,r.jsx)(_,{children:(0,r.jsx)("strong",{children:"Polymorphic components with TypeScript"})}),(0,r.jsxs)(_,{children:["Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example,"," ",(0,r.jsxs)(G,{children:[e.component,"Props"]})," does not extend"," ",(0,r.jsxs)(G,{children:["React.ComponentPropsWithoutRef","'<'","div","'>'"]})," ","although ",(0,r.jsx)(G,{children:e.defaultElement})," is the default element."]}),(0,r.jsxs)(_,{children:["If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support ",(0,r.jsx)(G,{children:"component"})," prop), then your component props interface should extend HTML element props, for example:"," "]}),(0,r.jsx)(l,{code:"import type { ".concat(e.component,"Props, ElementProps } from '").concat(e.package||"@mantine/core","';\n\ninterface My").concat(e.component,"Props extends ").concat(e.component,"Props,\n ElementProps<'").concat(e.changeToElement,"', keyof ").concat(e.component,"Props> {}")}),(0,r.jsxs)(_,{children:["If you want your component to remain polymorphic after wrapping, use"," ",(0,r.jsx)(G,{children:"createPolymorphicComponent"})," function described in"," ",(0,r.jsx)(H,{href:"/guides/polymorphic/",children:"this guide"}),"."]})]})]})}let q=e=>"import { ".concat(e,", Button } from '@mantine/core';\n\nfunction Demo() {\n return (\n <>\n <").concat(e,".Target>\n \n \n\n {/* OK */}\n <").concat(e,".Target>\n \n \n\n {/* String, NOT OK – will throw error */}\n <").concat(e,".Target>Raw string\n\n {/* Number, NOT OK – will throw error */}\n <").concat(e,".Target>{2}\n\n {/* Fragment, NOT OK – will throw error */}\n <").concat(e,".Target>\n <>Fragment, NOT OK, will throw error\n \n\n {/* Multiple nodes, NOT OK – will throw error */}\n <").concat(e,".Target>\n
More that one node
\n
NOT OK, will throw error
\n \n \n );\n}"),Y=e=>"\n// Example of code that WILL NOT WORK\nimport { ".concat(e," } from '@mantine/core';\n\nfunction MyComponent() {\n return
My component
;\n}\n\n// This will not work – MyComponent does not support ref\nfunction Demo() {\n return (\n <").concat(e,">\n <").concat(e,".Target>\n \n \n \n );\n}"),U=e=>"\n// Example of code that will work\nimport { forwardRef } from 'react';\nimport { ".concat(e," } from '@mantine/core';\n\nconst MyComponent = forwardRef>((props, ref) => (\n
\n My component\n
\n));\n\n// Works correctly – ref is forwarded\nfunction Demo() {\n return (\n <").concat(e,">\n <").concat(e,".Target>\n \n \n \n );\n}\n");function K(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"target-children",children:"".concat(t,".Target children")}),(0,r.jsxs)(_,{children:[(0,r.jsxs)(G,{children:[t,".Target"]})," requires an element or a component as a single child – strings, fragments, numbers and multiple elements/components are not supported and"," ",(0,r.jsx)("b",{children:"will throw error"}),". Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box."]}),(0,r.jsx)(l,{code:q(t),language:"tsx"}),(0,r.jsx)(b,{id:"required-ref-prop",children:"Required ref prop"}),(0,r.jsxs)(_,{children:["Custom components that are rendered inside ",t,".Target are required to support"," ",(0,r.jsx)(G,{children:"ref"})," prop:"]}),(0,r.jsx)(l,{code:Y(t),language:"tsx"}),(0,r.jsxs)(_,{children:["Use ",(0,r.jsx)(G,{children:"forwardRef"})," function to forward ref to root element:"]}),(0,r.jsx)(l,{code:U(t),language:"tsx"})]})}function X(e){let{component:t,element:n}=e;return(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," component supports ",(0,r.jsx)(H,{href:"/core/input",children:"Input"})," ","and ",(0,r.jsx)(H,{href:"/core/input",children:"Input.Wrapper"})," components features and all"," ",(0,r.jsx)(G,{children:n})," element props. ",(0,r.jsx)(G,{children:t})," documentation does not include all features supported by the component – see"," ",(0,r.jsx)(H,{href:"/core/input",children:"Input"})," documentation to learn about all available features."]})}let J=(e,t)=>"\nimport { ".concat(e," } from '").concat(t,"';\n\n// Inaccessible input – screen reader will not announce it properly\nfunction Demo() {\n return <").concat(e," />;\n}\n"),Q=(e,t)=>"\nimport { ".concat(e," } from '").concat(t,"';\n\n// Accessible input – it has aria-label\nfunction Demo() {\n return <").concat(e,' aria-label="My input" />;\n}\n'),ee=(e,t)=>"\nimport { ".concat(e," } from '").concat(t,"';\n\n// Accessible input – it has associated label element\nfunction Demo() {\n return <").concat(e,' label="My input" />;\n}\n');function et(e){let t=e.package||"@mantine/core";return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"accessibility",children:"Accessibility"}),(0,r.jsxs)(_,{children:["If ",(0,r.jsx)(G,{children:e.component})," is used without ",(0,r.jsx)(G,{children:"label"})," prop, it will not be announced properly by screen reader:"]}),(0,r.jsx)(l,{code:J(e.component,t),language:"tsx"}),(0,r.jsxs)(_,{children:["Set ",(0,r.jsx)(G,{children:"aria-label"})," to make the input accessible. In this case label will not be visible, but screen reader will announce it:"]}),(0,r.jsx)(l,{code:Q(e.component,t),language:"tsx"}),(0,r.jsxs)(_,{children:["If ",(0,r.jsx)(G,{children:"label"})," prop is set, input will be accessible it is not required to set"," ",(0,r.jsx)(G,{children:"aria-label"}),":"]}),(0,r.jsx)(l,{code:ee(e.component,t),language:"tsx"})]})}function en(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"browser-support",children:"Browser support"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," uses"," ",(0,r.jsx)(H,{href:"https://caniuse.com/flexbox-gap",children:"flexbox gap"})," to add spacing between children. In older browsers, ",(0,r.jsx)(G,{children:t})," children may not have spacing. You can install PostCSS"," ",(0,r.jsx)(H,{href:"https://github.com/gavinmcfarland/flex-gap-polyfill",children:"flex-gap-polyfill"})," ","to add support for older browsers."]})]})}function er(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"gradient-variant",children:"Gradient variant"}),(0,r.jsxs)(_,{children:["When ",(0,r.jsx)(G,{children:"variant"})," prop is set to ",(0,r.jsx)(G,{children:"gradient"}),", you can control gradient with ",(0,r.jsx)(G,{children:"gradient"})," prop, it accepts an object with"," ",(0,r.jsx)(G,{children:"from"}),", ",(0,r.jsx)(G,{children:"to"})," and ",(0,r.jsx)(G,{children:"deg"})," properties. If the",(0,r.jsx)(G,{children:"gradient"})," prop is not set, ",(0,r.jsx)(G,{children:t})," will use"," ",(0,r.jsx)(G,{children:"theme.defaultGradient"})," which can be configured on the"," ",(0,r.jsx)(H,{href:"/theming/theme-object",children:"theme object"}),". ",(0,r.jsx)(G,{children:"gradient"})," ","prop is ignored when ",(0,r.jsx)(G,{children:"variant"})," is not ",(0,r.jsx)(G,{children:"gradient"}),"."]}),(0,r.jsxs)(_,{children:["Note that ",(0,r.jsx)(G,{children:'variant="gradient"'})," supports only linear gradients with two colors. If you need a more complex gradient, then use"," ",(0,r.jsx)(H,{href:"/styles/styles-api",children:"Styles API"})," to modify"," ",(0,r.jsx)(G,{children:t})," styles."]})]})}function eo(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"styles-api",children:"Styles API"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," supports"," ",(0,r.jsx)(H,{href:"/styles/styles-api/",children:"Styles API"}),", you can add styles to any inner element of the component with",(0,r.jsx)(G,{children:"classNames"})," prop. Follow"," ",(0,r.jsx)(H,{href:"/styles/styles-api/",children:"Styles API"})," documentation to learn more."]})]})}var ei=n(31550),ea=n(24948),ec=n(28862),Text=n(26569),es=n(8671),el=n(46624);let eu=[{type:"next",name:"next-app-tss-template",link:"https://github.com/jason-dark/next-app-mantine-v7-tss-template",description:"Next.js template with app router and tss (emotion based) setup"},{type:"next",name:"next-pages-tss-template",link:"https://github.com/enyelsequeira/tss-with-pages-dir",description:"Next.js template with pages router and tss (emotion based) setup"},{type:"next",name:"t3-template",link:"https://github.com/WillKirkmanM/mantine-t3-template",description:"Next.js app router T3 stack template"},{type:"vite",name:"nx-vite-monorepo-template",link:"https://github.com/dipiash/nx-vite-react-ts-mantine-boilerplate",description:"NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules"},{type:"vite",name:"vike-mantine-template",link:"https://github.com/Kenzo-Wada/vike-mantine-template",description:"Vite ssr template with Vike"}],ed=[{type:"next",name:"next-app-template",link:"https://github.com/mantinedev/next-app-template",description:"Next.js template with app router and full setup: Jest, Storybook, ESLint"},{type:"next",name:"next-pages-template",link:"https://github.com/mantinedev/next-pages-template",description:"Next.js template with pages router and full setup: Jest, Storybook, ESLint"},{type:"next",name:"next-app-min-template",link:"https://github.com/mantinedev/next-app-min-template",description:"Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration"},{type:"next",name:"next-pages-min-template",link:"https://github.com/mantinedev/next-pages-min-template",description:"Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration"},{type:"next",name:"next-vanilla-extract-template",link:"https://github.com/mantinedev/next-vanilla-extract-template",description:"Next.js template with Vanilla extract example"},{type:"vite",name:"vite-template",link:"https://github.com/mantinedev/vite-template",description:"Vite template with full setup: Vitest, Prettier, Storybook, ESLint"},{type:"vite",name:"vite-min-template",link:"https://github.com/mantinedev/vite-min-template",description:"Vite template with minimal setup – no additional tools included, only default Vite configuration"},{type:"vite",name:"vite-vanilla-extract-template",link:"https://github.com/mantinedev/vite-vanilla-extract-template",description:"Vite template with Vanilla extract example"},{type:"remix",name:"remix-template",link:"https://github.com/mantinedev/remix-template",description:"Remix template with basic setup"},{type:"gatsby",name:"gatsby-template",link:"https://github.com/mantinedev/gatsby-template",description:"Gatsby template with basic setup"},{type:"redwood",name:"redwood-template",link:"https://github.com/mantinedev/redwood-template",description:"RedwoodJS template with basic setup"}];var ep=n(25416),em=n.n(ep);function ef(e){let{type:t,name:n,community:o=!1}=e,i=o?eu:ed,a=n?i.filter(e=>n.includes(e.name)):t?i.filter(e=>e.type===t):i,c=a.map(e=>{let t=el.mZ[e.type];return(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{className:em().iconCell,w:70,children:(0,r.jsx)("div",{className:em().icon,"data-type":e.type,children:(0,r.jsx)(t,{})})}),(0,r.jsxs)(ec.i.Td,{children:[(0,r.jsx)(Text.x,{fz:"sm",fw:500,children:e.name}),(0,r.jsx)(Text.x,{fz:"xs",children:e.description})]}),(0,r.jsx)(ec.i.Td,{w:146,children:(0,r.jsx)(es.z,{component:"a",href:e.link,target:"_blank",size:"xs",variant:"default",rightSection:(0,r.jsx)(ei.Z,{stroke:1.5,className:em().externalLinkIcon}),children:"Use template"})})]},e.name)});return(0,r.jsx)(ec.i,{highlightOnHover:!0,verticalSpacing:"sm",layout:"fixed",children:(0,r.jsxs)(ec.i.Tbody,{children:[o&&(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{className:em().iconCell,w:70,children:(0,r.jsx)("div",{className:em().icon,"data-type":"empty",children:(0,r.jsx)(ea.Z,{stroke:1.5,size:40})})}),(0,r.jsxs)(ec.i.Td,{children:[(0,r.jsx)(Text.x,{fz:"sm",fw:500,children:"Your template here"}),(0,r.jsx)(Text.x,{fz:"xs",children:"Create a template with your stack and share it with the community"})]}),(0,r.jsx)(ec.i.Td,{w:146,children:(0,r.jsx)(es.z,{component:P(),href:"/submit-template/",size:"xs",children:"Submit template"})})]}),c]})})}function eg(e){let{type:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"templates",children:"Get started with a template"}),(0,r.jsxs)(_,{children:["The easiest way to get started is to use one of the templates. All templates are configured correctly: they include ",(0,r.jsx)(H,{href:"/styles/postcss-preset",children:"PostCSS setup"}),","," ",(0,r.jsx)(H,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," and other essential features. Some templates also include additional features like"," ",(0,r.jsx)(H,{href:"/guides/jest",children:"Jest"}),","," ",(0,r.jsx)(H,{href:"/guides/storybook",children:"Storybook"})," and ESLint."]}),(0,r.jsxs)(_,{children:["If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on ",(0,r.jsx)(H,{href:"/templates-usage",children:"this page"}),"."]}),(0,r.jsx)(ef,{type:t})]})}function eh(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"combobox",children:"Made with Combobox"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," is an ",(0,r.jsx)("b",{children:"opinionated"})," component built on top of"," ",(0,r.jsx)(H,{href:"/core/combobox",children:"Combobox"})," component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with ",(0,r.jsx)(H,{href:"/core/combobox",children:"Combobox"}),". You can find examples of custom ",t.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase()," ","components on ",(0,r.jsx)(H,{href:"/combobox/?e=BasicSelect",children:"the examples page"}),"."]})]})}let ey=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," data={['React', 'Angular']} />;\n}\n"),ev=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return (\n <").concat(e,"\n data={[\n { value: 'react', label: 'React' },\n { value: 'ng', label: 'Angular' },\n ]}\n />\n );\n}\n"),eb=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return (\n <").concat(e,"\n data={[\n { group: 'Frontend', items: ['React', 'Angular'] },\n { group: 'Backend', items: ['Express', 'Django'] },\n ]}\n />\n );\n}\n"),ek=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return (\n <").concat(e,"\n data={[\n { group: 'Frontend', items: [{ value: 'react', label: 'React' }, { value: 'ng', label: 'Angular' }] },\n { group: 'Backend', items: [{ value: 'express', label: 'Express' }, { value: 'django', label: 'Django' }] },\n ]}\n />\n );\n}\n");function ex(e){let{component:t}=e,n="Autocomplete"!==t&&"TagsInput"!==t;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"data-formats",children:"Data formats"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," ",(0,r.jsx)(G,{children:"data"})," prop accepts data in one of the following formats:"]}),(0,r.jsx)(_,{children:"Array of strings:"}),(0,r.jsx)(l,{language:"tsx",code:ey(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(_,{children:["Array of object with ",(0,r.jsx)(G,{children:"value"}),", ",(0,r.jsx)(G,{children:"label"})," and optional"," ",(0,r.jsx)(G,{children:"disabled"})," keys:"]}),(0,r.jsx)(l,{language:"tsx",code:ev(t)})]}),(0,r.jsx)(_,{children:"Array of groups with string options:"}),(0,r.jsx)(l,{language:"tsx",code:eb(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(_,{children:"Array of groups with object options:"}),(0,r.jsx)(l,{language:"tsx",code:ek(t)})]})]})}function ew(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"large-data-sets",children:"Large data sets"}),(0,r.jsxs)(_,{children:["The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can do it with ",(0,r.jsx)(G,{children:"limit"})," prop. Note that if you use a custom ",(0,r.jsx)(G,{children:"filter"})," function, you need to implement your own logic to limit the number of options in ",(0,r.jsx)(G,{children:"filter"})]}),(0,r.jsxs)(_,{children:["Example of ",(0,r.jsx)(G,{children:t})," with 100 000 options, 5 options are rendered at the same time:"]})]})}function eE(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"options-filtering",children:"Options filtering"}),"By default, ",(0,r.jsx)(G,{children:t})," filters options by checking if the option label contains input value. You can change this behavior with ",(0,r.jsx)(G,{children:"filter"})," prop.",(0,r.jsx)(G,{children:"filter"})," function receives an object with the following properties as a single argument:",(0,r.jsxs)(V,{children:[(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"options"})," – array of options or options groups, all options are in"," ",(0,r.jsx)(G,{children:"{ value: string; label: string; disabled?: boolean }"})," format"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"search"})," – current search query"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"limit"})," – value of ",(0,r.jsx)(G,{children:"limit"})," prop passed to"," ",(0,r.jsx)(G,{children:t})]})]}),(0,r.jsx)(_,{children:"Example of a custom filter function that matches options by words instead of letters sequence:"})]})}let eC=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ withinPortal: false }} data={[]} />;\n}\n"),eF=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ zIndex: 1000 }} data={[]} />;\n}\n");function eS(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"combobox-props",children:"Combobox props"}),(0,r.jsxs)(_,{children:["You can override ",(0,r.jsx)(H,{href:"/core/combobox",children:"Combobox"})," props with"," ",(0,r.jsx)(G,{children:"comboboxProps"}),". It is useful when you need to change some of the props that are not exposed by ",(0,r.jsx)(G,{children:t}),", for example"," ",(0,r.jsx)(G,{children:"withinPortal"}),":"]}),(0,r.jsx)(l,{language:"tsx",code:eC(t)}),(0,r.jsx)(b,{id:"change-z-index",children:"Change dropdown z-index"}),(0,r.jsx)(l,{language:"tsx",code:eF(t)})]})}function eB(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"server-components-incompatible",children:"Incompatible with server components"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," is not compatible with React server components as it requires function as children. To use ",(0,r.jsx)(G,{children:t})," add"," ",(0,r.jsx)(G,{children:'"use client;"'})," at the top of the file."]})]})}let ej=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," wrapperProps={{ 'data-testid': 'wrapper' }} data-testid=\"input\" />;\n}\n");function eI(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"browser-support",children:"Add props to the root element"}),(0,r.jsxs)(_,{children:["All props passed to the component are forwarded to the input element. If you need to add props to the root element, use ",(0,r.jsx)(G,{children:"wrapperProps"}),". In the following example:"]}),(0,r.jsxs)(V,{children:[(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:'data-testid="wrapper"'})," is added to the root element"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:'data-testid="input"'})," is added to the input element"]})]}),(0,r.jsx)(l,{code:ej(t),language:"tsx"})]})}function eM(e){let{component:t}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"left-and-right-sections",children:"Left and right sections"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," supports ",(0,r.jsx)(G,{children:"leftSection"})," and"," ",(0,r.jsx)(G,{children:"rightSection"})," props. These sections are rendered with absolute position inside the input wrapper. You can use them to display icons, input controls or any other elements."]}),(0,r.jsx)(_,{children:"You can use the following props to control sections styles and content:"}),(0,r.jsxs)(V,{children:[(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"rightSection"}),"/",(0,r.jsx)(G,{children:"leftSection"})," – React node to render on the corresponding side of input"]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"rightSectionWidth"}),"/",(0,r.jsx)(G,{children:"leftSectionWidth"})," – controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component ",(0,r.jsx)(G,{children:"size"})," prop."]}),(0,r.jsxs)(Z,{children:[(0,r.jsx)(G,{children:"rightSectionPointerEvents"}),"/",(0,r.jsx)(G,{children:"leftSectionPointerEvents"})," – controls ",(0,r.jsx)(G,{children:"pointer-events"})," property of the section. If you want to render a non-interactive element, set it to ",(0,r.jsx)(G,{children:"none"})," to pass clicks through to the input."]})]})]})}function eD(e){let{component:t,withVariant:n=!0}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"auto-contrast",children:"autoContrast"}),(0,r.jsxs)(_,{children:[(0,r.jsx)(G,{children:t})," supports ",(0,r.jsx)(G,{children:"autoContrast"})," prop and"," ",(0,r.jsx)(H,{href:"/theming/theme-object/#autocontrast",children:"theme.autoContrast"}),". If"," ",(0,r.jsx)(G,{children:"autoContrast"})," is set either on ",(0,r.jsx)(G,{children:t})," or on theme, content color will be adjusted to have sufficient contrast with the value specified in"," ",(0,r.jsx)(G,{children:"color"})," prop."]}),(0,r.jsxs)(_,{children:["Note that ",(0,r.jsx)(G,{children:"autoContrast"})," feature works only if you use"," ",(0,r.jsx)(G,{children:"color"})," prop to change background color.",n&&(0,r.jsxs)(r.Fragment,{children:[" ",(0,r.jsx)(G,{children:"autoContrast"})," works only with ",(0,r.jsx)(G,{children:"filled"})," variant."]})]})]})}var eT=n(71670),eA=n(97700),eP=n(16809);function eR(e){let{label:t,link:n}=e;return(0,r.jsx)(es.z,{component:"a",href:n,target:"_blank",rightSection:(0,r.jsx)(ei.Z,{style:{width:(0,C.h)(18),height:(0,C.h)(18)},stroke:1.5}),fullWidth:!0,justify:"space-between",h:50,px:20,radius:"md",children:t})}var eN=n(2488);function eL({size:e,style:t,...n}){return o.createElement(E.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",style:[{width:(0,C.h)(e),height:(0,C.h)(e)},t],...n},o.createElement("path",{fill:"#368FB9",d:"M128 0C57.328 0 0 57.328 0 128s57.328 128 128 128 128-57.328 128-128S198.672 0 128 0"}),o.createElement("path",{fill:"#FFF",d:"M203.317 174.06c-7.907 1.878-11.91 3.608-21.695 9.983-15.271 9.884-31.976 14.48-31.976 14.48s-1.383 2.076-5.387 3.015c-6.918 1.68-32.963 3.114-35.335 3.163-6.376.05-10.28-1.63-11.367-4.25-3.311-7.907 4.744-11.367 4.744-11.367s-1.779-1.087-2.817-2.076c-.939-.939-1.927-2.816-2.224-2.125-1.235 3.015-1.878 10.379-5.189 13.69-4.547 4.596-13.146 3.064-18.236.395-5.585-2.965.395-9.933.395-9.933s-3.015 1.779-5.436-1.878c-2.175-3.36-4.2-9.094-3.657-16.16.593-8.056 9.587-15.865 9.587-15.865s-1.581-11.91 3.608-24.117c4.695-11.12 17.347-20.065 17.347-20.065s-10.626-11.762-6.672-22.338c2.57-6.92 3.608-6.87 4.448-7.166 2.965-1.137 5.831-2.373 7.957-4.695 10.625-11.466 24.166-9.292 24.166-9.292s6.425-19.52 12.356-15.715c1.828 1.186 8.401 15.814 8.401 15.814s7.018-4.102 7.809-2.57c4.25 8.254 4.744 24.019 2.866 33.607-3.163 15.814-11.07 24.315-14.233 29.652-.741 1.236 8.5 5.14 14.332 21.3 5.387 14.777.593 27.182 1.433 28.566.148.247.198.346.198.346s6.177.494 18.582-7.166c6.622-4.102 14.48-8.698 23.425-8.797 8.65-.149 9.094 9.983 2.57 11.564zm11.763-7.265c-.89-7.017-6.82-11.86-14.431-11.762-11.367.148-20.905 6.03-27.231 9.934-2.471 1.532-4.596 2.669-6.425 3.509.395-5.733.05-13.245-2.916-21.498-3.608-9.885-8.45-15.963-11.91-19.472 4.003-5.832 9.489-14.332 12.058-27.478 2.224-11.219 1.533-28.664-3.558-38.45-1.038-1.976-2.767-3.41-4.942-4.003-.89-.247-2.57-.741-5.881.198-4.991-10.329-6.721-11.416-8.056-12.306-2.767-1.779-6.029-2.174-9.093-1.038-4.102 1.483-7.61 5.437-10.922 12.454a51.47 51.47 0 00-1.334 3.015c-6.277.445-16.161 2.718-24.513 11.762-1.038 1.137-3.064 1.977-5.19 2.768h.05c-4.349 1.532-6.326 5.09-8.747 11.515-3.361 8.994.098 17.84 3.508 23.574-4.645 4.151-10.823 10.773-14.084 18.532-4.053 9.588-4.498 18.978-4.35 24.068-3.459 3.658-8.796 10.527-9.39 18.237-.79 10.773 3.114 18.088 4.844 20.756.494.791 1.038 1.434 1.63 2.076-.197 1.334-.246 2.768.05 4.25.643 3.46 2.817 6.277 6.128 8.056 6.524 3.46 15.617 4.942 22.635 1.433 2.52 2.669 7.117 5.239 15.469 5.239h.494c2.125 0 29.109-1.433 36.967-3.36 3.509-.841 5.93-2.324 7.512-3.658 5.04-1.582 18.977-6.326 32.123-14.826 9.291-6.03 12.504-7.315 19.423-8.995 6.72-1.63 10.922-7.759 10.082-14.53z"}))}var eH=n(53781),e$=n(87329),eO=n(17404),ez=n.n(eO);function e_(e){let{yarnScript:t,npmScript:n}=e,[o,i]=(0,eN.I)({key:"script-tab",defaultValue:0});return(0,r.jsx)(e$.Q,{classNames:{root:ez().root},activeTab:o,onTabChange:i,code:[{fileName:"yarn",code:t,language:"bash",icon:(0,r.jsx)(eL,{className:ez().icon,size:16})},{fileName:"npm",code:n,language:"bash",icon:(0,r.jsx)(eH._,{className:ez().icon,size:16})}]})}function eV(e){let{packages:t,dev:n}=e;return(0,r.jsx)(e_,{yarnScript:"yarn add ".concat(n?"--dev ":"").concat(t),npmScript:"npm install ".concat(n?"--save-dev ":"").concat(t)})}var eZ=n(1358);function eG(e){let{data:t}=e,n=t.some(e=>e.condition),o=t.map((e,t)=>(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{children:(0,r.jsx)(eZ.T,{children:e.key})}),(0,r.jsx)(ec.i.Td,{children:e.description}),n&&(0,r.jsx)(ec.i.Td,{children:e.condition?(0,r.jsx)($.E,{children:e.condition}):"–"})]},t));return(0,r.jsx)("div",{style:{overflowX:"auto"},children:(0,r.jsx)("div",{style:{minWidth:(0,C.h)(500)},children:(0,r.jsxs)(ec.i,{verticalSpacing:"md",children:[(0,r.jsx)(ec.i.Thead,{children:(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Td,{children:"Key"}),(0,r.jsx)(ec.i.Td,{children:"Description"}),n&&(0,r.jsx)(ec.i.Td,{children:"Condition"})]})}),(0,r.jsx)("tbody",{children:o})]})})})}var eW=n(94193);let eq=[{package:"@mantine/hooks",description:"Hooks for state and UI management",dependencies:["@mantine/hooks"]},{package:"@mantine/core",description:"Core components library: inputs, buttons, overlays, etc.",dependencies:["@mantine/hooks","@mantine/core"]},{package:"@mantine/form",description:"Form management library",dependencies:["@mantine/form"]},{package:"@mantine/dates",description:"Date inputs, calendars",dependencies:["@mantine/hooks","@mantine/core","@mantine/dates","dayjs"]},{package:"@mantine/charts",description:"Recharts based charts library",dependencies:["@mantine/hooks","@mantine/core","@mantine/charts","recharts@2"]},{package:"@mantine/notifications",description:"Notifications system",dependencies:["@mantine/hooks","@mantine/core","@mantine/notifications"]},{package:"@mantine/code-highlight",description:"Code highlight with your theme colors and styles",dependencies:["@mantine/hooks","@mantine/core","@mantine/code-highlight"]},{package:"@mantine/tiptap",description:"Rich text editor based on Tiptap",dependencies:["@mantine/hooks","@mantine/core","@mantine/tiptap","@tabler/icons-react","@tiptap/react","@tiptap/extension-link","@tiptap/starter-kit"]},{package:"@mantine/dropzone",description:"Capture files with drag and drop",dependencies:["@mantine/hooks","@mantine/core","@mantine/dropzone"]},{package:"@mantine/carousel",description:"Embla based carousel component",dependencies:["@mantine/hooks","@mantine/core","@mantine/carousel","embla-carousel-react"]},{package:"@mantine/spotlight",description:"Overlay command center",dependencies:["@mantine/hooks","@mantine/core","@mantine/spotlight"]},{package:"@mantine/modals",description:"Centralized modals manager",dependencies:["@mantine/hooks","@mantine/core","@mantine/modals"]},{package:"@mantine/nprogress",description:"Navigation progress",dependencies:["@mantine/hooks","@mantine/core","@mantine/nprogress"]}];var eY=n(10568),eU=n.n(eY);function eK(e){let{extraPackages:t=[]}=e,[n,i]=(0,o.useState)(["@mantine/core","@mantine/hooks"]),a=e=>i(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e]),c=eq.map(e=>(0,r.jsxs)(ec.i.Tr,{className:eU().row,onClick:()=>a(e.package),children:[(0,r.jsx)(ec.i.Td,{children:(0,r.jsx)(eW.X,{checked:n.includes(e.package),onChange:()=>{},className:eU().checkbox})}),(0,r.jsx)(ec.i.Td,{children:(0,r.jsx)($.E,{children:e.package})}),(0,r.jsx)(ec.i.Td,{className:eU().hiddenMobile,children:(0,r.jsx)(Text.x,{fz:"sm",children:e.description})})]},e.package));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(_,{children:"Choose packages that you will use in your application:"}),(0,r.jsxs)(ec.i,{mb:"xl",children:[(0,r.jsx)(ec.i.Thead,{children:(0,r.jsxs)(ec.i.Tr,{children:[(0,r.jsx)(ec.i.Th,{children:(0,r.jsx)(eW.X,{onChange:()=>i(e=>e.length===eq.length?[]:eq.map(e=>e.package)),checked:n.length>0,indeterminate:n.length0})}),(0,r.jsx)(ec.i.Th,{children:"Package"}),(0,r.jsx)(ec.i.Th,{className:eU().hiddenMobile,children:"Description"})]})}),(0,r.jsx)("tbody",{children:c})]}),(0,r.jsx)(_,{children:"Install dependencies:"}),(0,r.jsx)(eV,{packages:function(e,t){let n=e.reduce((e,t)=>(e.push(...eq.find(e=>e.package===t).dependencies),e),[]),r=Array.from(new Set(["@mantine/core","@mantine/hooks",...n,...t]));return r.join(" ")}(n,t)})]})}function eX(e){let{children:t}=e;return(0,r.jsx)(eT.Z,{components:{Demo:eA.B,GetElementRef:w,Polymorphic:W,InputFeatures:X,InputAccessibility:et,FlexboxGapSupport:en,Gradient:er,StylesApiSelectors:eo,DataTable:eP.g,TargetComponent:K,KeyboardEventsTable:eG,InstallScript:eV,PackagesInstallation:eK,NpmScript:e_,TemplatesList:ef,GetTemplates:eg,ComboboxDisclaimer:eh,ComboboxData:ex,ComboboxLargeData:ew,ComboboxFiltering:eE,ComboboxProps:eS,ServerComponentsIncompatible:eB,ExamplesButton:eR,WrapperProps:eI,InputSections:eM,AutoContrast:eD,pre:u,h1:k(1),h2:k(2),h3:k(3),h4:k(4),h5:k(5),h6:k(6),a:H,p:_,li:Z,ul:V,blockquote:T,code:G},children:t})}},79203:function(e,t,n){"use strict";n.d(t,{o:function(){return p},m:function(){return d}});var r=n(24246);n(27378);var o=n(86677),i=n(27854),a=n(71078),c=n(95299),s=n(39700),l=n(54568);let[u,d]=(0,c.Gv)();function p(){let e=(0,o.useRouter)(),t=l.Se.filter(e=>!e.hideInSearch).map(t=>({id:t.slug,label:t.title,description:t.search||t.description||(t.date?"Released ".concat(t.date):void 0),onClick:()=>e.push(t.slug)}));return(0,r.jsx)(s.$,{store:u,shortcut:["mod + K","mod + P","/"],actions:t,tagsToIgnore:[],highlightQuery:!0,clearQueryOnClose:!0,radius:"md",limit:7,nothingFound:"Nothing found...",searchProps:{leftSection:(0,r.jsx)(i.Z,{style:{width:(0,a.h)(20),height:(0,a.h)(20)}}),placeholder:"Search documentation..."}})}},5415:function(e,t,n){"use strict";n.d(t,{N:function(){return eD}});var r=n(24246),o=n(27378),i=n(58675),a=n(31550),c=n(62283),s=n(40624),l=n(82409),Text=n(26569),u=n(82827),d=n(19397),p=n(94998),m=n(22971),f=n(56589),g=n(70098),h=n(99684),y=n(61736),v=n(11541),b=n(27650),k=n(35499),x=n(31788);let w=(0,x.F)(function({tooltip:e,className:t,"aria-label":n,...r}){return o.createElement(h.u,{label:e},o.createElement(d.k,{className:(0,s.Z)("m-18a11a80",t),"aria-label":n||e,...r}))});var E={icon:"m-83c3d5d1",dark:"m-83c188ce",light:"m-f4e3c6be"};function C(){let{setColorScheme:e}=(0,b.X)(),t=(0,k.l)("light",{getInitialValueInEffect:!0});return o.createElement(w,{onClick:()=>e("light"===t?"dark":"light"),tooltip:`${"dark"===t?"Light":"Dark"} mode`,"aria-label":"Toggle color scheme"},o.createElement(y.Z,{className:(0,s.Z)(E.icon,E.light),stroke:1.5}),o.createElement(v.Z,{className:(0,s.Z)(E.icon,E.dark),stroke:1.5}))}var F=n(63166),S=n(91964),B=n(49134),j=n(71078);function I(){let{toggleDirection:e,dir:t}=(0,B.gm)();return o.createElement(w,{onClick:()=>e(),tooltip:`${"ltr"===t?"RTL":"LTR"} direction`},"rtl"===t?o.createElement(F.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22),pointerEvents:"none"},stroke:1.5}):o.createElement(S.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22),pointerEvents:"none"},stroke:1.5}))}var M=n(86010);function D({link:e}){return o.createElement(w,{tooltip:"Discord",component:"a",href:e,className:"m-19df8210"},o.createElement(M.D,{size:20}))}var T=n(56695);function A({link:e}){return o.createElement(w,{tooltip:"Source code",component:"a",href:e},o.createElement(T.E,{size:22}))}var P=n(27854);function R({className:e,...t}){return o.createElement(d.k,{...t,className:(0,s.Z)("m-6e98493a",e)},o.createElement(m.Z,{gap:"xs"},o.createElement(P.Z,{style:{width:(0,j.h)(15),height:(0,j.h)(15)},stroke:1.5}),o.createElement(Text.x,{fz:"sm",c:"dimmed",pr:80},"Search"),o.createElement(Text.x,{fw:700,className:"m-602cb89e"},"Ctrl + K")))}function N({onSearch:e,githubLink:t,withDirectionToggle:n=!0,withSearch:r=!0,withGithub:i=!0,withDiscord:a=!0,withColorScheme:c=!0,discordLink:s,...l}){return o.createElement(h.u.Group,{openDelay:600,closeDelay:100},o.createElement(m.Z,{gap:"xs",...l},r&&o.createElement(R,{onClick:e}),a&&o.createElement(D,{link:s}),i&&o.createElement(A,{link:t}),n&&o.createElement(I,null),c&&o.createElement(C,null)))}function L({onSearch:e}){return o.createElement(w,{onClick:()=>e(),tooltip:"Search"},o.createElement(P.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}))}let H=[{v:"v6",name:"6.0.21",link:"https://v6.mantine.dev/"},{v:"v5",name:"5.10.5",link:"https://v5.mantine.dev/"},{v:"v4",name:"4.2.12",link:"https://v4.mantine.dev/"},{v:"v3",name:"3.6.14",link:"https://v3.mantine.dev/"},{v:"v2",name:"2.5.1",link:"https://v2.mantine.dev/"},{v:"v1",name:"1.3.1",link:"https://v1.mantine.dev/"}];var $=n(86175),O=n(17992),z=n(79203),_=n(60837),V=n.n(_);function Z(e){let{navbarOpened:t,onNavbarToggle:n,headerControlsProps:o}=e,i=H.map(e=>(0,r.jsxs)(l.v.Item,{component:"a",href:e.link,target:"_blank",rightSection:(0,r.jsx)(a.Z,{className:V().versionExternalIcon,stroke:1.5}),children:[(0,r.jsx)("b",{children:e.v})," ",(0,r.jsxs)(Text.x,{span:!0,c:"dimmed",fz:"xs",children:["(",e.name,")"]})]},e.name));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("header",{className:(0,s.Z)(V().header,u.Z.classNames.fullWidth),"data-desktop":!0,children:[(0,r.jsxs)("div",{className:V().logo,children:[(0,r.jsx)(O.T,{}),(0,r.jsxs)(l.v,{width:180,withinPortal:!1,children:[(0,r.jsx)(l.v.Target,{children:(0,r.jsx)(d.k,{children:(0,r.jsxs)(p.E,{fw:"bold",className:V().version,children:[(0,r.jsx)("span",{children:"7.5.1"}),(0,r.jsx)(c.Z,{className:V().versionChevron,stroke:1.5})]})})}),(0,r.jsx)(l.v.Dropdown,{children:i})]})]}),(0,r.jsx)(N,{className:V().controls,onSearch:z.m.open,githubLink:"https://github.com/mantinedev/mantine",discordLink:$.$.discordLink,...o})]}),(0,r.jsx)("header",{className:(0,s.Z)(V().header,u.Z.classNames.fullWidth),"data-mobile":!0,children:(0,r.jsxs)(m.Z,{justify:"space-between",w:"100%",wrap:"nowrap",children:[(0,r.jsx)(f.x,{miw:80,children:(0,r.jsx)(g.O,{opened:t,onClick:n,size:"sm","aria-label":"Toggle navbar"})}),(0,r.jsx)(O.T,{}),(0,r.jsxs)(m.Z,{gap:"sm",children:[(0,r.jsx)(L,{onSearch:z.m.open}),(0,r.jsx)(C,{})]})]})})]})}var G=n(54764),W=(0,G.Z)("compass","IconCompass",[["path",{d:"M8 16l2 -6l6 -2l-2 6l-6 2",key:"svg-0"}],["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-1"}],["path",{d:"M12 3l0 2",key:"svg-2"}],["path",{d:"M12 19l0 2",key:"svg-3"}],["path",{d:"M3 12l2 0",key:"svg-4"}],["path",{d:"M19 12l2 0",key:"svg-5"}]]),q=n(13070),Y=(0,G.Z)("api","IconApi",[["path",{d:"M4 13h5",key:"svg-0"}],["path",{d:"M12 16v-8h3a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-3",key:"svg-1"}],["path",{d:"M20 8v8",key:"svg-2"}],["path",{d:"M9 16v-5.5a2.5 2.5 0 0 0 -5 0v5.5",key:"svg-3"}]]),U=(0,G.Z)("heart-handshake","IconHeartHandshake",[["path",{d:"M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572",key:"svg-0"}],["path",{d:"M12 6l-3.293 3.293a1 1 0 0 0 0 1.414l.543 .543c.69 .69 1.81 .69 2.5 0l1 -1a3.182 3.182 0 0 1 4.5 0l2.25 2.25",key:"svg-1"}],["path",{d:"M12.5 15.5l2 2",key:"svg-2"}],["path",{d:"M15 13l2 2",key:"svg-3"}]]),K=(0,G.Z)("palette","IconPalette",[["path",{d:"M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25",key:"svg-0"}],["path",{d:"M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-1"}],["path",{d:"M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-2"}],["path",{d:"M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-3"}]]),X=(0,G.Z)("help","IconHelp",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M12 17l0 .01",key:"svg-1"}],["path",{d:"M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4",key:"svg-2"}]]),J=n(49849),Q=n(54568),ee=n(79894),et=n.n(ee),en=n(86677),er=(0,G.Z)("box","IconBox",[["path",{d:"M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5",key:"svg-0"}],["path",{d:"M12 12l8 -4.5",key:"svg-1"}],["path",{d:"M12 12l0 9",key:"svg-2"}],["path",{d:"M12 12l-8 -4.5",key:"svg-3"}]]),eo=n(61433),ei=(0,G.Z)("bulb","IconBulb",[["path",{d:"M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7",key:"svg-0"}],["path",{d:"M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3",key:"svg-1"}],["path",{d:"M9.7 17l4.6 0",key:"svg-2"}]]),ea=(0,G.Z)("refresh","IconRefresh",[["path",{d:"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4",key:"svg-0"}],["path",{d:"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4",key:"svg-1"}]]),ec=n(20243),es=(0,G.Z)("box-multiple","IconBoxMultiple",[["path",{d:"M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2",key:"svg-1"}]]),el=n(66684),eu=n(94503),ed=(0,G.Z)("speakerphone","IconSpeakerphone",[["path",{d:"M18 8a3 3 0 0 1 0 6",key:"svg-0"}],["path",{d:"M10 8v11a1 1 0 0 1 -1 1h-1a1 1 0 0 1 -1 -1v-5",key:"svg-1"}],["path",{d:"M12 8h0l4.524 -3.77a.9 .9 0 0 1 1.476 .692v12.156a.9 .9 0 0 1 -1.476 .692l-4.524 -3.77h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h8",key:"svg-2"}]]),ep=(0,G.Z)("letter-case","IconLetterCase",[["path",{d:"M17.5 15.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0",key:"svg-0"}],["path",{d:"M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5",key:"svg-1"}],["path",{d:"M3 13h7",key:"svg-2"}],["path",{d:"M21 12v7",key:"svg-3"}]]),em=(0,G.Z)("layout-2","IconLayout2",[["path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-1"}],["path",{d:"M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-2"}],["path",{d:"M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z",key:"svg-3"}]]),ef=(0,G.Z)("click","IconClick",[["path",{d:"M3 12l3 0",key:"svg-0"}],["path",{d:"M12 3l0 3",key:"svg-1"}],["path",{d:"M7.8 7.8l-2.2 -2.2",key:"svg-2"}],["path",{d:"M16.2 7.8l2.2 -2.2",key:"svg-3"}],["path",{d:"M7.8 16.2l-2.2 2.2",key:"svg-4"}],["path",{d:"M12 12l9 3l-4 2l-2 4l-3 -9",key:"svg-5"}]]),eg=(0,G.Z)("selector","IconSelector",[["path",{d:"M8 9l4 -4l4 4",key:"svg-0"}],["path",{d:"M16 15l-4 4l-4 -4",key:"svg-1"}]]);let eh={"State management":er,"UI and Dom":eo.Z,Utilities:ei,Lifecycle:ea,"Data display":ec.Z,overlays:es,navigation:el.Z,inputs:eo.Z,misc:eu.Z,feedback:ed,typography:ep,layout:em,buttons:ef,combobox:eg};var ey=n(42205),ev=n.n(ey);function eb(e){return"category"in e}function ek(e,t){return e.pages.some(e=>eb(e)?e.pages.some(e=>e.slug===t):e.slug===t)}function ex(e){let{data:t,onNavbarClose:n,linkRef:o}=e,i=(0,en.useRouter)();return(0,r.jsx)(d.k,{component:et(),href:t.slug,mod:{active:t.slug===i.pathname},className:ev().link,onClick:n,ref:o,children:t.title})}function ew(e){let{data:t,onNavbarClose:n}=e,i=(0,en.useRouter)(),[a,s]=(0,o.useState)(ek(t,i.pathname)),l=(0,o.useRef)({}),u=e=>{let t=l.current[e];if(!t)return;let n=window.innerHeight,{top:r,bottom:o}=t.getBoundingClientRect();(r<60||o>n)&&t.scrollIntoView({block:"center"})};(0,o.useEffect)(()=>{ek(t,i.pathname)&&(s(!0),setTimeout(()=>u(i.pathname),10))},[i.pathname]);let p=t.pages.map(e=>{if(eb(e)){let t=e.pages.sort((e,t)=>e.title.localeCompare(t.title)),o=t.map(e=>(0,r.jsx)(ex,{data:e,onNavbarClose:n,linkRef:t=>{l.current[e.slug]=t}},e.slug)),i=eh[e.category];return(0,r.jsxs)("div",{className:ev().category,children:[(0,r.jsxs)(Text.x,{className:ev().categoryTitle,children:[(0,r.jsx)(i,{className:ev().categoryIcon}),e.category]}),o]},e.category)}return(0,r.jsx)(ex,{data:e,onNavbarClose:n,linkRef:t=>{l.current[e.slug]=t}},e.slug)});return(0,r.jsxs)(f.x,{className:ev().group,mod:{opened:a},children:[(0,r.jsxs)(d.k,{className:ev().header,onClick:()=>s(e=>!e),children:[(0,r.jsx)(c.Z,{className:ev().chevron,"data-collapsed":!a||void 0}),(0,r.jsx)(Text.x,{className:ev().title,children:t.group.replace("-"," ")})]}),a&&p]})}var eE=n(30092),eC=n.n(eE);function eF(e){let{href:t,external:n,children:o,icon:i,onNavbarClose:c}=e,s=(0,en.useRouter)();return(0,r.jsxs)(d.k,{component:n?"a":et(),href:t,target:n?"_blank":void 0,className:eC().link,mod:{active:s.pathname===t},onClick:c,children:[(0,r.jsx)("span",{className:eC().icon,children:i}),(0,r.jsx)("span",{className:eC().label,children:o}),n&&(0,r.jsx)("span",{className:eC().external,children:(0,r.jsx)(a.Z,{size:14})})]})}var eS=n(84020),eB=n.n(eS);function ej(e){let{navbarOpened:t,onNavbarClose:n,mobileNavbarOnly:o}=e,{dir:i}=(0,B.gm)(),a=Q.kl.map(e=>(0,r.jsx)(ew,{data:e,onNavbarClose:n},e.group));return(0,r.jsx)(f.x,{component:"nav",className:(0,s.Z)(eB().navbar,{[u.Z.classNames.zeroRight]:"rtl"===i}),mod:{hidden:!t,"mobile-only":o},children:(0,r.jsx)(J.x,{className:eB().scrollarea,type:"never",offsetScrollbars:!1,children:(0,r.jsxs)("div",{className:eB().body,children:[(0,r.jsx)(eF,{icon:(0,r.jsx)(W,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/getting-started",onNavbarClose:n,children:"Getting started"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(q.Z,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/about",onNavbarClose:n,children:"About Mantine"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(Y,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/overview",onNavbarClose:n,children:"API Overview"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(U,{style:{width:(0,j.h)(25),height:(0,j.h)(25)},stroke:1.5}),href:"/contribute",onNavbarClose:n,children:"Contribute"}),(0,r.jsx)(eF,{icon:(0,r.jsx)(K,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}),href:"/colors-generator",onNavbarClose:n,children:"Colors generator"}),(0,r.jsx)(eF,{external:!0,icon:(0,r.jsx)(X,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}),href:"https://help.mantine.dev",onNavbarClose:n,children:"Help center"}),(0,r.jsx)(eF,{external:!0,icon:(0,r.jsx)(q.Z,{style:{width:(0,j.h)(22),height:(0,j.h)(22)},stroke:1.5}),href:"https://ui.mantine.dev",onNavbarClose:n,children:"Mantine UI"}),(0,r.jsx)("div",{className:eB().groups,children:a})]})})})}var eI=n(29888),eM=n.n(eI);function eD(e){let{children:t,withNavbar:n=!0,mobileNavbarOnly:o=!1,navbarOpened:a,onNavbarOpenedChange:c,headerControlsProps:s}=e,[l,u]=(0,i.C)({value:a,defaultValue:!1,finalValue:!1,onChange:c});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Z,{navbarOpened:l,onNavbarToggle:()=>u(!l),headerControlsProps:s}),n&&(0,r.jsx)(ej,{navbarOpened:l,onNavbarClose:()=>u(!1),mobileNavbarOnly:o}),(0,r.jsx)("main",{className:eM().main,id:"mdx",style:{paddingLeft:n&&!o?void 0:0,paddingRight:n&&!o?void 0:0},children:t})]})}},46624:function(e,t,n){"use strict";n.d(t,{mZ:function(){return l}});var r=n(24246),o=n(27378),i=n(56589),a=n(71078),c=n(85128),s=n.n(c);let l={next:function(e){let{size:t=40,...n}=e;return(0,r.jsx)(i.x,{component:"svg",__vars:{"--icon-size":(0,a.h)(t)},xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 309",className:s().nextIcon,"data-large":!0,...n,children:(0,r.jsx)("path",{fill:"currentColor",d:"M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56 391.441 0l-103.85 150.65 53.515 74.127h-10.663l-48.686-67.462-48.888 67.462h-10.461l53.917-74.128-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212 0-1.81 1.356-3.212 3.165-3.212 1.83 0 3.165 1.401 3.165 3.212 0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29 3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828 3.875 0 6.717-2.005 6.717-4.764 0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602 0-5.54 4.521-9.227 11.303-9.227 6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657-3.81 0-6.35 1.833-6.35 4.635 0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753 0 5.95-4.607 9.68-11.97 9.68-6.89 0-11.52-3.558-11.864-9.12z"})})},vite:function(e){let{size:t=28,...n}=e,c=(0,o.useId)(),l="vite-a-".concat(c),u="vite-b-".concat(c);return(0,r.jsxs)(i.x,{__vars:{"--icon-size":(0,a.h)(t)},component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 257",className:s().icon,...n,children:[(0,r.jsxs)("defs",{children:[(0,r.jsxs)("linearGradient",{id:l,x1:"-.828%",x2:"57.636%",y1:"7.652%",y2:"78.411%",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#41D1FF"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#BD34FE"})]}),(0,r.jsxs)("linearGradient",{id:u,x1:"43.376%",x2:"50.316%",y1:"2.242%",y2:"89.03%",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:"#FFEA83"}),(0,r.jsx)("stop",{offset:"8.333%",stopColor:"#FFDD35"}),(0,r.jsx)("stop",{offset:"100%",stopColor:"#FFA800"})]})]}),(0,r.jsx)("path",{fill:"url(#".concat(l,")"),d:"M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 002.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62z"}),(0,r.jsx)("path",{fill:"url(#".concat(u,")"),d:"M185.432.063L96.44 17.501a3.268 3.268 0 00-2.634 3.014l-5.474 92.456a3.268 3.268 0 003.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113z"})]})},gatsby:function(e){let{size:t=28,...n}=e;return(0,r.jsxs)(i.x,{__vars:{"--icon-size":(0,a.h)(t)},component:"svg",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 256 256",className:s().icon,...n,children:[(0,r.jsx)("rect",{width:"250",height:"250",x:"3",y:"3",fill:"#fff",rx:"125"}),(0,r.jsx)("path",{fill:"#744C9E",d:"M128 0C57.308 0 0 57.307 0 128s57.308 128 128 128c70.693 0 128-57.307 128-128S198.693 0 128 0zM27.504 129.334l99.161 99.162c-54.45-.71-98.452-44.711-99.161-99.162zm122.992 96.649L30.016 105.504C40.234 60.824 80.223 27.487 128 27.487c33.397 0 62.985 16.293 81.263 41.36l-13.917 12.279C180.52 59.864 155.887 45.949 128 45.949c-35.505 0-65.74 22.552-77.169 54.113L155.94 205.169c25.525-9.243 45.156-30.79 51.731-57.477h-43.567V128h64.41c0 47.778-33.336 87.767-78.017 97.983z"})]})},redwood:function(e){let{size:t=28,...n}=e;return(0,r.jsxs)(i.x,{__vars:{"--icon-size":(0,a.h)(t)},component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 277",className:s().icon,...n,children:[(0,r.jsx)("path",{fill:"#FFF",d:"M112.39 3.928C101.983 9.164 80.046 19.36 68.16 27.493c-11.885 8.134-10.407 15.711-15.61 20.948-5.203 5.237-20.814 18.329-31.22 26.184-10.407 7.855-7.806 28.803-10.407 36.658-2.602 7.855-7.806 26.184-10.407 34.04-2.602 7.855 5.203 18.329 10.407 28.802 5.203 10.474 18.211 39.277 23.415 49.75 5.203 10.474 20.813 5.237 33.822 15.71 13.009 10.475 31.22 23.568 44.229 31.423 13.008 7.855 18.212 7.855 31.22 0 13.009-7.855 31.22-20.948 44.23-31.422 13.008-10.474 28.618-5.237 33.822-15.71 5.203-10.474 18.211-39.277 23.415-49.75 5.203-10.474 13.008-20.948 10.406-28.803-2.602-7.856-7.804-26.185-10.406-34.04-2.602-7.855 0-28.803-10.407-36.658s-22.487-17.857-31.22-26.184c-8.734-8.327-5.204-13.092-15.61-20.948-10.407-7.855-33.823-18.329-44.23-23.565-10.406-5.237-20.813-5.237-31.22 0z"}),(0,r.jsx)("path",{fill:"#BF4722",d:"M75.644 49.319l48.694 33.238a6.886 6.886 0 003.7 1.155 6.665 6.665 0 003.7-1.155l48.73-33.35a6.65 6.65 0 002.748-5.947 6.633 6.633 0 00-3.672-5.418L130.85 13.733a6.692 6.692 0 00-5.846 0l-48.546 24.11a6.633 6.633 0 00-3.707 5.5 6.649 6.649 0 002.893 5.976zm68.933 43.671a6.721 6.721 0 002.886 5.515l39.037 26.68a6.55 6.55 0 008.103-.522l32.746-29.288a6.654 6.654 0 002.213-5.156 6.648 6.648 0 00-2.509-5.017L195.787 60.2a6.623 6.623 0 00-7.844-.298l-40.48 27.686a6.72 6.72 0 00-2.886 5.403zm-97.09 36.293a6.696 6.696 0 012.182 5.627 6.524 6.524 0 01-3.293 5.068l-23.31 13.973a6.586 6.586 0 01-7.5-.512 6.698 6.698 0 01-2.195-7.238l8.621-27.127a6.607 6.607 0 014.551-4.397 6.406 6.406 0 016.143 1.453l14.8 13.153zm126.432 2.832l-42.144-28.84a6.622 6.622 0 00-7.4 0l-42.145 28.84a6.754 6.754 0 00-2.886 5.068 6.88 6.88 0 002.22 5.44l42.108 37.672a6.597 6.597 0 004.403 1.677 6.63 6.63 0 004.403-1.677l42.107-37.672a6.73 6.73 0 002.183-5.44 6.606 6.606 0 00-2.849-5.068zm-112.41-7.452L28.802 95.375a6.804 6.804 0 01-2.22-5.254 6.574 6.574 0 012.478-5.03l31.266-25.152a6.696 6.696 0 017.882-.298l40.442 27.685a6.682 6.682 0 013.01 5.59 6.682 6.682 0 01-3.01 5.589l-39 26.68a6.624 6.624 0 01-8.14-.522zm167.95 42.069l-33.302-19.935a6.55 6.55 0 00-7.77.745l-40.702 36.33a6.696 6.696 0 00-2.13 6.13 6.66 6.66 0 004.055 5.05l56.463 22.878a6.333 6.333 0 002.442.485c2.621.008 5-1.54 6.069-3.95l17.501-39.2c1.425-3.102.29-6.787-2.627-8.533zm4.624-47.658l8.622 27.127h-.074a6.71 6.71 0 01-.975 5.958 6.61 6.61 0 01-5.353 2.724 6.478 6.478 0 01-3.367-.932l-23.348-13.973a6.489 6.489 0 01-3.182-5.068 6.62 6.62 0 012.183-5.627l14.8-13.19a6.59 6.59 0 016.143-1.454 6.72 6.72 0 014.551 4.435zm-123.51 70.91a6.66 6.66 0 00-2.109-6.111l-40.701-36.331a6.55 6.55 0 00-7.77-.745L26.69 166.732c-2.883 1.754-4.024 5.392-2.664 8.496l17.539 39.2c1.453 3.268 5.21 4.798 8.51 3.465l56.427-22.88a6.659 6.659 0 004.07-5.03zm19.98 11.178l45.29 18.333a6.665 6.665 0 013.997 5.44 6.614 6.614 0 01-2.813 6.223l-45.326 31.488a6.551 6.551 0 01-3.7 1.191 6.682 6.682 0 01-3.7-1.191l-45.29-31.488a6.651 6.651 0 01-2.849-6.222 6.775 6.775 0 014.144-5.44l45.29-18.334a6.69 6.69 0 014.958 0z"})]})},remix:function(e){let{size:t=40,...n}=e;return(0,r.jsx)(i.x,{component:"svg",__vars:{"--icon-size":(0,a.h)(t)},xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 512 128",className:s().nextIcon,"data-large":!0,...n,children:(0,r.jsx)("path",{fill:"currentColor",d:"M404.472 38.335v89.493h-32.264V38.335h32.264zm41.606-.176l14.738 21.27 15.136-21.27h33.26l-32.264 42.54L512 127.653h-35.65l-17.724-24.28-17.726 24.28h-33.26l34.853-45.55L410.43 38.16h35.65zm-116.09-2.827c24.252 0 31.522 16.717 31.665 35.158l.002.56v56.184H329.39V79.313l-.006-.72-.01-.707-.018-.693-.023-.678a63.244 63.244 0 00-.014-.334l-.033-.657a53.255 53.255 0 00-.04-.643l-.046-.629a44.966 44.966 0 00-.026-.309l-.058-.608-.065-.593c-.915-7.718-3.901-11.725-11.61-11.725-9.142 0-13.103 6.379-14.086 16.549l-.064.724c-.12 1.46-.18 2.996-.189 4.598l-.001 44.346h-32.264V79.678l-.003-.727c0-.12-.002-.24-.003-.359l-.012-.706-.018-.693-.025-.678-.032-.664a54.24 54.24 0 00-.018-.327l-.043-.643-.05-.629-.057-.615c-.838-8.303-3.885-12.62-11.888-12.62-10.45 0-14.263 8.653-14.338 21.87l-.001 44.347h-32.264V37.74h32.264v13.444c4.78-9.832 14.34-15.852 27.683-15.852 15.734 0 23.899 7.224 27.684 17.658 4.78-10.033 15.335-17.658 30.271-17.658zm-170.42-2.827c29.38 0 45.093 20.06 45.405 44.02l.004.728v9.029H142.64c.797 11.036 8.764 16.253 18.522 16.253 8.65 0 14.195-2.931 17.21-9.76l.117-.272 25.891 2.407c-4.58 20.468-20.912 31.905-44.413 31.905-28.48 0-48.794-17.257-48.794-45.75 0-28.293 20.713-48.56 48.396-48.56zM60.366 0c32.541 0 48.712 15.488 48.712 40.228 0 18.505-11.38 30.573-26.752 32.585 12.977 2.615 20.563 10.057 21.96 24.74l.203 2.7.177 2.524.152 2.362.106 1.78.114 2.1.06 1.2.083 1.904.068 1.8.034 1.033.045 1.657.04 1.894.014.916.025 2.652.008 2.768.001 1.655H71.857c0-.698.006-1.37.014-2.03l.02-1.306.058-3.164.015-1.06.01-1.097.001-.566-.001-1.063-.01-1.115-.014-.876-.027-1.225-.04-1.3-.054-1.381-.068-1.472-.04-.772-.069-1.207-.079-1.268-.122-1.792-.106-1.424C70.417 88.912 65 85.186 55.093 84.73l-.646-.025-.658-.016a54.423 54.423 0 00-.67-.008L0 84.68V58.33h54.376c14.374 0 21.56-4.406 21.56-16.072 0-10.258-7.186-16.475-21.56-16.475H0V0h60.365zM35.483 106.855c4.402 0 6.245 2.445 6.9 4.785l.071.27.032.133.055.267.047.263.02.13.033.257.025.252.01.123.013.243.004.118.003.23v12.572H0v-19.643h35.483zM159.17 55.782c-8.078 0-12.642 3.906-14.826 9.625l-.164.443-.154.45c-.15.454-.285.918-.408 1.39l-.118.477c-.075.32-.145.642-.21.97l-.092.492c-.015.083-.03.166-.043.249l-.08.5-.037.253h31.268c-.399-8.027-5.577-14.85-15.136-14.85zm245.5-54.369v28.494H372.01V1.413h32.662z"})})}}},54568:function(e,t,n){"use strict";n.d(t,{us:function(){return a},kl:function(){return c},YU:function(){return s},Se:function(){return l}});let r={NotFound:{title:"404",slug:"/404",hideHeader:!0,hideInSearch:!0,hideSiblings:!0},About:{title:"About Mantine",slug:"/about",search:"Browser support, releases cycle, previous versions documentation",hideSiblings:!0,hideHeader:!0},GettingStarted:{title:"Getting started",search:"Getting started with Mantine",slug:"/getting-started",hideSiblings:!0,hideHeader:!0},TemplatesUsage:{title:"Getting started with a template",slug:"/templates-usage",hideInSearch:!0,hideSiblings:!0,hideHeader:!0},Overview:{title:"Mantine API overview",slug:"/overview",search:"Overview of Mantine components API",hideSiblings:!0,hideHeader:!0},Contribute:{title:"Contributing to Mantine",slug:"/contribute",search:"Learn how to contribute to Mantine",hideSiblings:!0,hideHeader:!0},SubmitTemplate:{title:"Submit a template",slug:"/submit-template",search:"Learn how to submit a template",hideSiblings:!0,hideHeader:!0},Changelog700:{title:"Version v7.0.0",slug:"/changelog/7-0-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.0.0",date:"September 18th, 2023"},Changelog710:{title:"Version v7.1.0",slug:"/changelog/7-1-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.1.0",date:"September 28th, 2023"},Changelog720:{title:"Version v7.2.0",slug:"/changelog/7-2-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.2.0",date:"November 7th, 2023"},Changelog730:{title:"Version v7.3.0",slug:"/changelog/7-3-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.3.0",date:"December 5th, 2023"},Changelog740:{title:"Version v7.4.0",slug:"/changelog/7-4-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.4.0",date:"January 3rd, 2024"},Changelog750:{title:"Version v7.5.0",slug:"/changelog/7-5-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.5.0",date:"January 26th, 2024"},PreviousChangelogs:{title:"All releases",slug:"/changelog/previous-versions",hideHeader:!0},AllReleases:{title:"All releases",slug:"/changelog/all-releases",hideHeader:!0}};function o(e,t){let n=e.replace(/[A-Z]/g,e=>"-".concat(e.toLowerCase()));return{title:n,package:"@mantine/hooks",slug:"/hooks/".concat(n),description:t,import:"import { ".concat(e," } from '@mantine/hooks';"),source:"@mantine/hooks/src/".concat(n,"/").concat(n,".ts"),docs:"hooks/".concat(n,".mdx")}}let i={useClickOutside:o("useClickOutside","Detects click and touch events outside of given element or elements group"),useClipboard:o("useClipboard","Wrapper around navigator.clipboard with feedback timeout"),useColorScheme:o("useColorScheme","Detects user system color scheme with window.matchMedia API"),useCounter:o("useCounter","Increments/decrements state within given boundaries"),useDebouncedState:o("useDebouncedState","Debounces value changes"),useDebouncedValue:o("useDebouncedValue","Debounces value changes"),useDidUpdate:o("useDidUpdate","Calls given function in useEffect when value changes, but not when the component mounts"),useDisclosure:o("useDisclosure","Manages boolean state, provides open, close and toggle handlers, usually used with modals, drawers and popovers"),useDocumentTitle:o("useDocumentTitle","Sets document.title to given string"),useDocumentVisibility:o("useDocumentVisibility","Detects if the current tab is active"),useElementSize:o("useElementSize","Returns element width and height and observes changes with ResizeObserver"),useEventListener:o("useEventListener","Subscribes to events of a given element with a ref"),useEyeDropper:o("useEyeDropper","Pick color from any pixel on the screen"),useFavicon:o("useFavicon","Changes favicon"),useFocusReturn:o("useFocusReturn","Captures last focused element on the page and returns focus to it once given condition is met"),useFocusTrap:o("useFocusTrap","Traps focus inside given element"),useFocusWithin:o("useFocusWithin","Detects if any element within the given element has focus"),useForceUpdate:o("useForceUpdate","Forces the component to rerender without state change"),useFullscreen:o("useFullscreen","Enter/exit fullscreen mode with given element or entire page"),useHash:o("useHash","Get and set hash value in the URL"),useHeadroom:o("useHeadroom","Create headers that are hidden after user scrolls past given distance"),useHotkeys:o("useHotkeys","Listen for keys combinations on document element"),useHover:o("useHover","Detects if given element is hovered"),useId:o("useId","Generates memoized random id"),useIdle:o("useIdle","Detects if the user does nothing on the page"),useInputState:o("useInputState","Manages input state"),useIntersection:o("useIntersection","Detects if given element is visible in the viewport or other element with IntersectionObserver"),useInterval:o("useInterval","Calls function with a given interval"),useIsomorphicEffect:o("useIsomorphicEffect","useLayoutEffect replacement"),useListState:o("useListState","Manages array state"),useLocalStorage:o("useLocalStorage","Exposes localStorage value as react state, syncs state across opened tabs"),useLogger:o("useLogger","Logs given values to console when component renders"),useMediaQuery:o("useMediaQuery","Subscribes to media queries with window.matchMedia"),useMergedRef:o("useMergedRef","Merges multiple refs objects or functions into one ref callback"),useMouse:o("useMouse","Tracks mouse position over the viewport or given element"),useMove:o("useMove","Handles move behavior over given element, can be used to build custom sliders"),useNetwork:o("useNetwork","Returns current connection status"),useOs:o("useOs","Detects user operating system"),usePageLeave:o("usePageLeave","Calls given function when the mouse leaves the page"),usePrevious:o("usePrevious","Returns previous value of given state"),useQueue:o("useQueue","Manages queue of values"),useReducedMotion:o("useReducedMotion","Detects if user prefers to reduce motion"),useResizeObserver:o("useResizeObserver","Tracks element size and position changes with ResizeObserver"),useScrollIntoView:o("useScrollIntoView","Scrolls given element into view"),useSetState:o("useSetState","Manages state with setState-like API"),useShallowEffect:o("useShallowEffect","useEffect drop in replacement with dependencies shallow comparison"),useTextSelection:o("useTextSelection","Returns current selected text on the page"),useTimeout:o("useTimeout","Calls function in given timeout"),useToggle:o("useToggle","Switches between given values"),useUncontrolled:o("useUncontrolled","Manage state of both controlled and uncontrolled components"),useValidatedState:o("useValidatedState","Manages state with validation"),useViewportSize:o("useViewportSize","Returns viewport width and height and subscribes to changes"),useWindowEvent:o("useWindowEvent","Adds event listener to the window object on component mount and removes the event when the component unmounts"),useWindowScroll:o("useWindowScroll","Tracks window scroll position"),usePagination:o("usePagination","Manages pagination state"),useInViewport:o("useInViewport","Detects if element is visible in the viewport")},a={...r,MantineProvider:{title:"MantineProvider",slug:"/theming/mantine-provider",search:"Theme context, CSS reset, CSS variables, context classes and styles",hideHeader:!0},ThemeObject:{title:"Theme object",slug:"/theming/theme-object",search:"use-mantine-theme, theme override, MantineTheme",hideHeader:!0},ColorSchemes:{title:"Color schemes",slug:"/theming/color-schemes",search:"use-mantine-color-scheme, color schemes management, data-mantine-color-scheme",hideHeader:!0},Colors:{title:"Colors",slug:"/theming/colors",search:"Default colors, primaryColor, primaryShade",hideHeader:!0},ColorFunctions:{title:"Color functions",slug:"/styles/color-functions",search:"Functions to manipulate colors, darken, lighten, parse",hideHeader:!0},Typography:{title:"Typography",slug:"/theming/typography",search:"Change fonts, @font-face",hideHeader:!0},DefaultProps:{title:"Default props",slug:"/theming/default-props",search:"Default props for components",hideHeader:!0},DefaultTheme:{title:"Default theme",slug:"/theming/default-theme",hideHeader:!0},StylesOverview:{title:"Styles overview",slug:"/styles/styles-overview",search:"Overview of the ways to apply styles",hideHeader:!0},MantineStyles:{title:"Mantine styles",slug:"/styles/mantine-styles",search:"Mantine .css files",hideHeader:!0},CSSModules:{title:"CSS modules",slug:"/styles/css-modules",search:"Get started with CSS modules",hideHeader:!0},VanillaExtract:{title:"Vanilla extract",slug:"/styles/vanilla-extract",search:"Mantine + Vanilla extract integration",hideHeader:!0},UsageWithSass:{title:"Usage with Sass",slug:"/styles/sass",search:"Mantine Sass mixins, functions and variables",hideHeader:!0},PostCSSPreset:{title:"PostCSS preset",slug:"/styles/postcss-preset",search:"postcss-preset-mantine, mixins, CSS functions",hideHeader:!0},GlobalStyles:{title:"Global styles",slug:"/styles/global-styles",search:"Global styles that are required for Mantine components to work properly",hideHeader:!0},CssVariables:{title:"CSS variables",slug:"/styles/css-variables",search:"Mantine CSS variables and resolvers",hideHeader:!0},CSSVariablesList:{title:"CSS variables list",slug:"/styles/css-variables-list",hideSiblings:!0,hideHeader:!0},CSSFilesList:{title:"CSS files list",slug:"/styles/css-files-list",search:"List of all Mantine .css files",hideHeader:!0},Rem:{title:"rem, em and px units",slug:"/styles/rem",search:"rem and em units with Mantine components, units conversion",hideHeader:!0},StyleProp:{title:"style prop",slug:"/styles/style",search:"style prop usage",hideHeader:!0},ResponsiveStyles:{title:"Responsive styles",slug:"/styles/responsive",search:"Media queries, breakpoints, inline responsive styles",hideHeader:!0},StylesApi:{title:"Styles API",slug:"/styles/styles-api",search:"classNames, styles and unstyled props",hideHeader:!0},DataAttributes:{title:"data-* attributes",slug:"/styles/data-attributes",search:"Usage of data-* attributes to apply styles",hideHeader:!0},VariantsAndSizes:{title:"Variants and sizes",slug:"/styles/variants-sizes",search:"Customize components sizes and variants",hideHeader:!0},StyleProps:{title:"Style props",slug:"/styles/style-props",search:"Props to add inline styles",hideHeader:!0},Rtl:{title:"RTL (right-to-left)",slug:"/styles/rtl",search:"Change text direction to right-to-left",hideHeader:!0},StylesPerformance:{title:"Styles performance",slug:"/styles/styles-performance",search:"Learn how to improve your styles performance",hideHeader:!0},UnstyledComponents:{title:"Unstyled / headless",slug:"/styles/unstyled",search:"Headless/unstyled components",hideHeader:!0},Polymorphic:{title:"Polymorphic components",slug:"/guides/polymorphic",search:"createPolymorphicComponent, change root element, component prop",hideHeader:!0},NextJs:{title:"Usage with Next.js",slug:"/guides/next",search:"Get started with Next.js",hideHeader:!0},Vite:{title:"Usage with Vite",slug:"/guides/vite",search:"Get started with Vite",hideHeader:!0},Remix:{title:"Usage with Remix",slug:"/guides/remix",search:"Get started with Remix",hideHeader:!0},Gatsby:{title:"Usage with Gatsby",slug:"/guides/gatsby",search:"Get started with Gatsby",hideHeader:!0},Redwood:{title:"Usage with Redwood",slug:"/guides/redwood",search:"Get started with Redwood",hideHeader:!0},Storybook:{title:"Usage with Storybook",slug:"/guides/storybook",search:"Setup Mantine with Storybook",hideHeader:!0},TypeScript:{title:"Usage with TypeScript",slug:"/guides/typescript",search:"Usage with TypeScript",hideHeader:!0},JavaScript:{title:"Usage with JavaScript",slug:"/guides/javascript",search:"Usage with JavaScript",hideHeader:!0},Icons:{title:"Icons libraries",slug:"/guides/icons",search:"Usage of icons libraries with Mantine",hideHeader:!0},Jest:{title:"Testing with Jest",slug:"/guides/jest",search:"Testing with Jest and React Testing Library",hideHeader:!0},Vitest:{title:"Testing with Vitest",slug:"/guides/vitest",search:"Testing with Vitest and React Testing Library",hideHeader:!0},SixToSeven:{title:"6.x to 7.x migration",slug:"/guides/6x-to-7x",search:"Styles migration guide from 6.x to 7.x",hideHeader:!0},FunctionsReference:{title:"Functions reference",slug:"/guides/functions-reference",search:"A list of functions exported from Mantine packages that are not documented anywhere else",hideHeader:!0},Box:{title:"Box",package:"@mantine/core",slug:"/core/box",description:"Base component for all Mantine components",import:"import { Box } from '@mantine/core';",source:"@mantine/core/src/components/Box/Box.tsx",docs:"core/box.mdx"},Button:{title:"Button",package:"@mantine/core",slug:"/core/button",description:"Button component to render button or link",componentPrefix:"Button",props:["Button","ButtonGroup"],styles:["Button","ButtonGroup"],import:"import { Button } from '@mantine/core';",source:"@mantine/core/src/components/Button/Button.tsx",docs:"core/button.mdx"},Loader:{title:"Loader",package:"@mantine/core",slug:"/core/loader",description:"Indicate loading state",props:["Loader"],styles:["Loader"],import:"import { Loader } from '@mantine/core';",source:"@mantine/core/src/components/Loader/Loader.tsx",docs:"core/loader.mdx"},Container:{title:"Container",package:"@mantine/core",slug:"/core/container",description:"Center content with padding and max-width",props:["Container"],styles:["Container"],import:"import { Container } from '@mantine/core';",source:"@mantine/core/src/components/Container/Container.tsx",docs:"core/container.mdx"},Anchor:{title:"Anchor",package:"@mantine/core",slug:"/core/anchor",description:"Display link with theme styles",props:["Anchor"],styles:["Anchor"],import:"import { Anchor } from '@mantine/core';",source:"@mantine/core/src/components/Anchor/Anchor.tsx",docs:"core/anchor.mdx"},Input:{title:"Input",package:"@mantine/core",slug:"/core/input",description:"Base component to create custom inputs",componentPrefix:"Input",props:["Input","InputWrapper","InputLabel","InputDescription","InputError"],styles:["Input","InputWrapper"],polymorphic:!0,import:"import { Input } from '@mantine/core';",source:"@mantine/core/src/components/Input/Input.tsx",docs:"core/input.mdx"},ActionIcon:{title:"ActionIcon",package:"@mantine/core",slug:"/core/action-icon",description:"Icon button",componentPrefix:"ActionIcon",props:["ActionIcon","ActionIconGroup"],styles:["ActionIcon","ActionIconGroup"],polymorphic:!0,import:"import { ActionIcon } from '@mantine/core';",source:"@mantine/core/src/components/ActionIcon/ActionIcon.tsx",docs:"core/action-icon.mdx"},CloseButton:{title:"CloseButton",package:"@mantine/core",slug:"/core/close-button",description:"Button with close icon",props:["CloseButton"],styles:["CloseButton"],polymorphic:!0,import:"import { CloseButton } from '@mantine/core';",source:"@mantine/core/src/components/CloseButton/CloseButton.tsx",docs:"core/close-button.mdx"},CopyButton:{title:"CopyButton",package:"@mantine/core",slug:"/core/copy-button",description:"Copies given text to clipboard",props:["CopyButton"],import:"import { CopyButton } from '@mantine/core';",source:"@mantine/core/src/components/CopyButton/CopyButton.tsx",docs:"core/copy-button.mdx"},FileButton:{title:"FileButton",package:"@mantine/core",slug:"/core/file-button",description:"Open file picker with a button click",props:["FileButton"],import:"import { FileButton } from '@mantine/core';",source:"@mantine/core/src/components/FileButton/FileButton.tsx",docs:"core/file-button.mdx"},UnstyledButton:{title:"UnstyledButton",package:"@mantine/core",slug:"/core/unstyled-button",description:"Unstyled polymorphic button",polymorphic:!0,import:"import { UnstyledButton } from '@mantine/core';",source:"@mantine/core/src/components/UnstyledButton/UnstyledButton.tsx",docs:"core/unstyled-button.mdx"},Tabs:{title:"Tabs",package:"@mantine/core",slug:"/core/tabs",props:["Tabs","TabsList","TabsTab","TabsPanel"],styles:["Tabs"],description:"Switch between different views",import:"import { Tabs } from '@mantine/core';",source:"@mantine/core/src/components/Tabs/Tabs.tsx",docs:"core/tabs.mdx"},BackgroundImage:{title:"BackgroundImage",package:"@mantine/core",slug:"/core/background-image",description:"Displays image as background",polymorphic:!0,props:["BackgroundImage"],styles:["BackgroundImage"],import:"import { BackgroundImage } from '@mantine/core';",source:"@mantine/core/src/components/BackgroundImage/BackgroundImage.tsx",docs:"core/background-image.mdx"},Blockquote:{title:"Blockquote",package:"@mantine/core",slug:"/core/blockquote",props:["Blockquote"],styles:["Blockquote"],description:"Blockquote with optional cite",import:"import { Blockquote } from '@mantine/core';",source:"@mantine/core/src/components/Blockquote/Blockquote.tsx",docs:"core/blockquote.mdx"},Breadcrumbs:{title:"Breadcrumbs",package:"@mantine/core",slug:"/core/breadcrumbs",props:["Breadcrumbs"],styles:["Breadcrumbs"],description:"Separates list of react nodes with given separator",import:"import { Breadcrumbs } from '@mantine/core';",source:"@mantine/core/src/components/Breadcrumbs/Breadcrumbs.tsx",docs:"core/breadcrumbs.mdx"},Burger:{title:"Burger",package:"@mantine/core",slug:"/core/burger",props:["Burger"],styles:["Burger"],description:"Open/close navigation button",import:"import { Burger } from '@mantine/core';",source:"@mantine/core/src/components/Burger/Burger.tsx",docs:"core/burger.mdx"},Center:{title:"Center",package:"@mantine/core",slug:"/core/center",props:["Center"],styles:["Center"],polymorphic:!0,description:"Centers content vertically and horizontally",import:"import { Center } from '@mantine/core';",source:"@mantine/core/src/components/Center/Center.tsx",docs:"core/center.mdx"},Code:{title:"Code",package:"@mantine/core",slug:"/core/code",props:["Code"],styles:["Code"],description:"Inline and block code",import:"import { Code } from '@mantine/core';",source:"@mantine/core/src/components/Code/Code.tsx",docs:"core/code.mdx"},Collapse:{title:"Collapse",package:"@mantine/core",slug:"/core/collapse",props:["Collapse"],description:"Animate presence with slide down/up transition",import:"import { Collapse } from '@mantine/core';",source:"@mantine/core/src/components/Collapse/Collapse.tsx",docs:"core/collapse.mdx"},ColorPicker:{title:"ColorPicker",package:"@mantine/core",slug:"/core/color-picker",props:["ColorPicker"],styles:["ColorPicker"],description:"Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats",import:"import { ColorPicker } from '@mantine/core';",source:"@mantine/core/src/components/ColorPicker/ColorPicker.tsx",docs:"core/color-picker.mdx"},ColorSwatch:{title:"ColorSwatch",package:"@mantine/core",slug:"/core/color-swatch",props:["ColorSwatch"],styles:["ColorSwatch"],polymorphic:!0,description:"Displays color",import:"import { ColorSwatch } from '@mantine/core';",source:"@mantine/core/src/components/ColorSwatch/ColorSwatch.tsx",docs:"core/color-swatch.mdx"},FocusTrap:{title:"FocusTrap",package:"@mantine/core",slug:"/core/focus-trap",props:["FocusTrap"],description:"Trap focus at child node",import:"import { FocusTrap } from '@mantine/core';",source:"@mantine/core/src/components/FocusTrap/FocusTrap.tsx",docs:"core/focus-trap.mdx"},Group:{title:"Group",package:"@mantine/core",slug:"/core/group",props:["Group"],styles:["Group"],description:"Compose elements and components in a horizontal flex container",import:"import { Group } from '@mantine/core';",source:"@mantine/core/src/components/Group/Group.tsx",docs:"core/group.mdx"},Highlight:{title:"Highlight",package:"@mantine/core",slug:"/core/highlight",props:["Highlight"],styles:["Highlight"],polymorphic:!0,description:"Highlight given part of a string with mark",import:"import { Highlight } from '@mantine/core';",source:"@mantine/core/src/components/Highlight/Highlight.tsx",docs:"core/highlight.mdx"},Kbd:{title:"Kbd",package:"@mantine/core",slug:"/core/kbd",props:["Kbd"],styles:["Kbd"],description:"Display keyboard key",import:"import { Kbd } from '@mantine/core';",source:"@mantine/core/src/components/Kbd/Kbd.tsx",docs:"core/kbd.mdx"},Mark:{title:"Mark",package:"@mantine/core",slug:"/core/mark",props:["Mark"],styles:["Mark"],description:"Highlight part of the text",import:"import { Mark } from '@mantine/core';",source:"@mantine/core/src/components/Mark/Mark.tsx",docs:"core/mark.mdx"},NativeSelect:{title:"NativeSelect",package:"@mantine/core",slug:"/core/native-select",props:["NativeSelect"],styles:["NativeSelect"],description:"Native select element based on Input",import:"import { NativeSelect } from '@mantine/core';",source:"@mantine/core/src/components/NativeSelect/NativeSelect.tsx",docs:"core/native-select.mdx"},Notification:{title:"Notification",package:"@mantine/core",slug:"/core/notification",props:["Notification"],styles:["Notification"],description:"Show dynamic notifications and alerts to user, part of notifications system",import:"import { Notification } from '@mantine/core';",source:"@mantine/core/src/components/Notification/Notification.tsx",docs:"core/notification.mdx"},Paper:{title:"Paper",package:"@mantine/core",slug:"/core/paper",props:["Paper"],styles:["Paper"],description:"Renders white or dark background depending on color scheme",polymorphic:!0,import:"import { Paper } from '@mantine/core';",source:"@mantine/core/src/components/Paper/Paper.tsx",docs:"core/paper.mdx"},Popover:{title:"Popover",package:"@mantine/core",slug:"/core/popover",componentPrefix:"Popover",props:["Popover","PopoverTarget"],styles:["Popover"],description:"Display popover section relative to given target element",import:"import { Popover } from '@mantine/core';",source:"@mantine/core/src/components/Popover/Popover.tsx",docs:"core/popover.mdx"},Portal:{title:"Portal",package:"@mantine/core",slug:"/core/portal",props:["Portal"],description:"Renders component outside of parent element tree",import:"import { Portal } from '@mantine/core';",source:"@mantine/core/src/components/Portal/Portal.tsx",docs:"core/portal.mdx"},ScrollArea:{title:"ScrollArea",package:"@mantine/core",slug:"/core/scroll-area",props:["ScrollArea"],styles:["ScrollArea"],description:"Area with custom scrollbars",import:"import { ScrollArea } from '@mantine/core';",source:"@mantine/core/src/components/ScrollArea/ScrollArea.tsx",docs:"core/scroll-area.mdx"},SegmentedControl:{title:"SegmentedControl",package:"@mantine/core",slug:"/core/segmented-control",props:["SegmentedControl"],styles:["SegmentedControl"],description:"A linear set of two or more segments",import:"import { SegmentedControl } from '@mantine/core';",source:"@mantine/core/src/components/SegmentedControl/SegmentedControl.tsx",docs:"core/segmented-control.mdx"},Slider:{title:"Slider",package:"@mantine/core",slug:"/core/slider",props:["Slider","RangeSlider"],styles:["Slider"],description:"Slider and RangeSlider components",import:"import { Slider } from '@mantine/core';",source:"@mantine/core/src/components/Slider/Slider/Slider.tsx",docs:"core/slider.mdx"},Stack:{title:"Stack",package:"@mantine/core",slug:"/core/stack",props:["Stack"],styles:["Stack"],description:"Compose elements and components in a vertical flex container",import:"import { Stack } from '@mantine/core';",source:"@mantine/core/src/components/Stack/Stack.tsx",docs:"core/stack.mdx"},Switch:{title:"Switch",package:"@mantine/core",slug:"/core/switch",props:["Switch","SwitchGroup"],styles:["Switch"],description:"Capture boolean input from user",import:"import { Switch } from '@mantine/core';",source:"@mantine/core/src/components/Switch/Switch.tsx",docs:"core/switch.mdx"},Table:{title:"Table",package:"@mantine/core",slug:"/core/table",props:["Table"],styles:["Table"],description:"Render table with theme styles",import:"import { Table } from '@mantine/core';",source:"@mantine/core/src/components/Table/Table.tsx",docs:"core/table.mdx"},Text:{title:"Text",package:"@mantine/core",slug:"/core/text",props:["Text"],styles:["Text"],description:"Display text",import:"import { Text } from '@mantine/core';",source:"@mantine/core/src/components/Text/Text.tsx",docs:"core/text.mdx"},TextInput:{title:"TextInput",package:"@mantine/core",slug:"/core/text-input",props:["TextInput"],styles:["TextInput"],description:"Capture string input from user",import:"import { TextInput } from '@mantine/core';",source:"@mantine/core/src/components/TextInput/TextInput.tsx",docs:"core/text-input.mdx"},Title:{title:"Title",package:"@mantine/core",slug:"/core/title",props:["Title"],styles:["Title"],description:"h1-h6 heading",import:"import { Title } from '@mantine/core';",source:"@mantine/core/src/components/Title/Title.tsx",docs:"core/title.mdx"},Badge:{title:"Badge",package:"@mantine/core",slug:"/core/badge",props:["Badge"],styles:["Badge"],polymorphic:!0,description:"Display badge, pill or tag",import:"import { Badge } from '@mantine/core';",source:"@mantine/core/src/components/Badge/Badge.tsx",docs:"core/badge.mdx"},Tooltip:{title:"Tooltip",package:"@mantine/core",slug:"/core/tooltip",props:["Tooltip"],styles:["Tooltip"],description:"Renders tooltip at given element on mouse over or other event",import:"import { Tooltip } from '@mantine/core';",source:"@mantine/core/src/components/Tooltip/Tooltip.tsx",docs:"core/tooltip.mdx"},Transition:{title:"Transition",package:"@mantine/core",slug:"/core/transition",props:["Transition"],description:"Animate presence of component with pre-made animations",import:"import { Transition } from '@mantine/core';",source:"@mantine/core/src/components/Transition/Transition.tsx",docs:"core/transition.mdx"},TypographyStylesProvider:{title:"TypographyStylesProvider",package:"@mantine/core",slug:"/core/typography-styles-provider",description:"Styles provider for html content",import:"import { TypographyStylesProvider } from '@mantine/core';",source:"@mantine/core/src/components/TypographyStylesProvider/TypographyStylesProvider.tsx",docs:"core/typography-styles-provider.mdx"},VisuallyHidden:{title:"VisuallyHidden",package:"@mantine/core",slug:"/core/visually-hidden",description:"Hide element visually but keep it accessible for screen readers",import:"import { VisuallyHidden } from '@mantine/core';",source:"@mantine/core/src/components/VisuallyHidden/VisuallyHidden.tsx",docs:"core/visually-hidden.mdx"},Divider:{title:"Divider",package:"@mantine/core",slug:"/core/divider",props:["Divider"],styles:["Divider"],description:"Horizontal line with optional label or vertical divider",import:"import { Divider } from '@mantine/core';",source:"@mantine/core/src/components/Divider/Divider.tsx",docs:"core/divider.mdx"},AspectRatio:{title:"AspectRatio",package:"@mantine/core",slug:"/core/aspect-ratio",props:["AspectRatio"],styles:["AspectRatio"],description:"Maintain responsive consistent width/height ratio",import:"import { AspectRatio } from '@mantine/core';",source:"@mantine/core/src/components/AspectRatio/AspectRatio.tsx",docs:"core/aspect-ratio.mdx"},Overlay:{title:"Overlay",package:"@mantine/core",slug:"/core/overlay",props:["Overlay"],styles:["Overlay"],polymorphic:!0,description:"Overlays parent element with div element with any color and opacity",import:"import { Overlay } from '@mantine/core';",source:"@mantine/core/src/components/Overlay/Overlay.tsx",docs:"core/overlay.mdx"},Avatar:{title:"Avatar",package:"@mantine/core",slug:"/core/avatar",props:["Avatar"],styles:["Avatar"],polymorphic:!0,description:"Display user profile image, initials or fallback icon",import:"import { Avatar } from '@mantine/core';",source:"@mantine/core/src/components/Avatar/Avatar.tsx",docs:"core/avatar.mdx"},Alert:{title:"Alert",package:"@mantine/core",slug:"/core/alert",props:["Alert"],styles:["Alert"],description:"Attract user attention with important static message",import:"import { Alert } from '@mantine/core';",source:"@mantine/core/src/components/Alert/Alert.tsx",docs:"core/alert.mdx"},Affix:{title:"Affix",package:"@mantine/core",slug:"/core/affix",props:["Affix"],styles:["Affix"],description:"Renders children inside portal at fixed position",import:"import { Affix } from '@mantine/core';",source:"@mantine/core/src/components/Affix/Affix.tsx",docs:"core/affix.mdx"},Fieldset:{title:"Fieldset",package:"@mantine/core",slug:"/core/fieldset",props:["Fieldset"],styles:["Fieldset"],description:"Group related elements in a form",import:"import { Fieldset } from '@mantine/core';",source:"@mantine/core/src/components/Fieldset/Fieldset.tsx",docs:"core/fieldset.mdx"},Checkbox:{title:"Checkbox",package:"@mantine/core",slug:"/core/checkbox",componentPrefix:"Checkbox",props:["Checkbox","CheckboxGroup"],styles:["Checkbox","CheckboxGroup"],description:"Capture boolean input from user",import:"import { Checkbox } from '@mantine/core';",source:"@mantine/core/src/components/Checkbox/Checkbox.tsx",docs:"core/checkbox.mdx"},Combobox:{title:"Combobox",package:"@mantine/core",slug:"/core/combobox",componentPrefix:"Combobox",props:["Combobox","ComboboxOption","ComboboxTarget","ComboboxDropdownTarget","ComboboxEventsTarget","ComboboxDropdown","ComboboxGroup"],styles:["Combobox"],description:"Create custom select, autocomplete or multiselect inputs",import:"import { Combobox } from '@mantine/core';",source:"@mantine/core/src/components/Combobox/Combobox.tsx",docs:"core/combobox.mdx"},Modal:{title:"Modal",package:"@mantine/core",slug:"/core/modal",props:["Modal"],styles:["Modal"],description:"An accessible overlay dialog",import:"import { Modal } from '@mantine/core';",source:"@mantine/core/src/components/Modal/Modal.tsx",docs:"core/modal.mdx"},Drawer:{title:"Drawer",package:"@mantine/core",slug:"/core/drawer",props:["Drawer"],styles:["Drawer"],description:"Display overlay area at any side of the screen",import:"import { Drawer } from '@mantine/core';",source:"@mantine/core/src/components/Drawer/Drawer.tsx",docs:"core/drawer.mdx"},Accordion:{title:"Accordion",package:"@mantine/core",slug:"/core/accordion",props:["Accordion","AccordionItem","AccordionControl"],styles:["Accordion"],componentPrefix:"Accordion",description:"Divide content into collapsible sections",import:"import { Accordion } from '@mantine/core';",source:"@mantine/core/src/components/Accordion/Accordion.tsx",docs:"core/accordion.mdx"},Pill:{title:"Pill",package:"@mantine/core",slug:"/core/pill",props:["Pill","PillGroup"],styles:["Pill","PillGroup"],description:"Removable and non-removable tags",import:"import { Pill } from '@mantine/core';",source:"@mantine/core/src/components/Pill/Pill.tsx",docs:"core/pill.mdx"},PillsInput:{title:"PillsInput",package:"@mantine/core",slug:"/core/pills-input",props:["PillsInput","PillsInputField"],styles:["PillsInput","PillsInputField"],description:"Base component for custom tags inputs and multi selects",import:"import { PillsInput } from '@mantine/core';",source:"@mantine/core/src/components/PillsInput/PillsInput.tsx",docs:"core/pills-input.mdx"},Autocomplete:{title:"Autocomplete",package:"@mantine/core",slug:"/core/autocomplete",props:["Autocomplete"],styles:["Autocomplete"],description:"Autocomplete user input with any list of options",import:"import { Autocomplete } from '@mantine/core';",source:"@mantine/core/src/components/Autocomplete/Autocomplete.tsx",docs:"core/autocomplete.mdx"},TagsInput:{title:"TagsInput",package:"@mantine/core",slug:"/core/tags-input",props:["TagsInput"],styles:["TagsInput"],description:"Capture a list of values from user with free input and suggestions",import:"import { TagsInput } from '@mantine/core';",source:"@mantine/core/src/components/TagsInput/TagsInput.tsx",docs:"core/tags-input.mdx"},Select:{title:"Select",package:"@mantine/core",slug:"/core/select",props:["Select"],styles:["Select"],description:"Custom searchable select",import:"import { Select } from '@mantine/core';",source:"@mantine/core/src/components/Select/Select.tsx",docs:"core/select.mdx"},MultiSelect:{title:"MultiSelect",package:"@mantine/core",slug:"/core/multi-select",props:["MultiSelect"],styles:["MultiSelect"],description:"Custom searchable multi select",import:"import { MultiSelect } from '@mantine/core';",source:"@mantine/core/src/components/MultiSelect/MultiSelect.tsx",docs:"core/multi-select.mdx"},Pagination:{title:"Pagination",package:"@mantine/core",slug:"/core/pagination",componentPrefix:"Pagination",props:["Pagination","PaginationRoot","PaginationFirst","PaginationLast","PaginationNext","PaginationPrevious","PaginationItems","PaginationDots","PaginationControl"],styles:["Pagination"],description:"Display active page and navigate between multiple pages",import:"import { Pagination } from '@mantine/core';",source:"@mantine/core/src/components/Pagination/Pagination.tsx",docs:"core/pagination.mdx"},AppShell:{title:"AppShell",package:"@mantine/core",slug:"/core/app-shell",props:["AppShell","AppShellNavbar","AppShellHeader","AppShellAside","AppShellFooter"],styles:["AppShell"],componentPrefix:"AppShell",description:"Responsive shell for your application with header, navbar, aside and footer",import:"import { AppShell } from '@mantine/core';",source:"@mantine/core/src/components/AppShell/AppShell.tsx",docs:"core/app-shell.mdx"},Skeleton:{title:"Skeleton",package:"@mantine/core",slug:"/core/skeleton",props:["Skeleton"],styles:["Skeleton"],description:"Indicate content loading state",import:"import { Skeleton } from '@mantine/core';",source:"@mantine/core/src/components/Skeleton/Skeleton.tsx",docs:"core/skeleton.mdx"},SimpleGrid:{title:"SimpleGrid",package:"@mantine/core",slug:"/core/simple-grid",props:["SimpleGrid"],styles:["SimpleGrid"],description:"Responsive grid in which each item takes equal amount of space",import:"import { SimpleGrid } from '@mantine/core';",source:"@mantine/core/src/components/SimpleGrid/SimpleGrid.tsx",docs:"core/simple-grid.mdx"},Grid:{title:"Grid",package:"@mantine/core",slug:"/core/grid",props:["Grid","GridCol"],styles:["Grid"],componentPrefix:"Grid",description:"Responsive 12 columns grid system",import:"import { Grid } from '@mantine/core';",source:"@mantine/core/src/components/Grid/Grid.tsx",docs:"core/grid.mdx"},HoverCard:{title:"HoverCard",package:"@mantine/core",slug:"/core/hover-card",props:["HoverCard","HoverCardTarget"],styles:["HoverCard"],componentPrefix:"HoverCard",description:"Display popover section when target element is hovered",import:"import { HoverCard } from '@mantine/core';",source:"@mantine/core/src/components/HoverCard/HoverCard.tsx",docs:"core/hover-card.mdx"},Menu:{title:"Menu",package:"@mantine/core",slug:"/core/menu",props:["Menu","MenuTarget","MenuItem"],styles:["Menu"],componentPrefix:"Menu",description:"Combine a list of secondary actions into single interactive area",import:"import { Menu } from '@mantine/core';",source:"@mantine/core/src/components/Menu/Menu.tsx",docs:"core/menu.mdx"},Progress:{title:"Progress",package:"@mantine/core",slug:"/core/progress",props:["Progress","ProgressRoot","ProgressSection"],styles:["Progress"],componentPrefix:"Progress",description:"Give user feedback for status of the task",import:"import { Progress } from '@mantine/core';",source:"@mantine/core/src/components/Progress/Progress.tsx",docs:"core/progress.mdx"},RingProgress:{title:"RingProgress",package:"@mantine/core",slug:"/core/ring-progress",props:["RingProgress"],styles:["RingProgress"],description:"Give user feedback for status of the task with circle diagram",import:"import { RingProgress } from '@mantine/core';",source:"@mantine/core/src/components/RingProgress/RingProgress.tsx",docs:"core/ring-progress.mdx"},Chip:{title:"Chip",package:"@mantine/core",slug:"/core/chip",props:["Chip","ChipGroup"],styles:["Chip"],componentPrefix:"Chip",description:"Pick one or multiple values with inline controls",import:"import { Chip } from '@mantine/core';",source:"@mantine/core/src/components/Chip/Chip.tsx",docs:"core/chip.mdx"},PinInput:{title:"PinInput",package:"@mantine/core",slug:"/core/pin-input",props:["PinInput"],styles:["PinInput"],description:"Capture pin code or one time password from the user",import:"import { PinInput } from '@mantine/core';",source:"@mantine/core/src/components/PinInput/PinInput.tsx",docs:"core/pin-input.mdx"},Rating:{title:"Rating",package:"@mantine/core",slug:"/core/rating",props:["Rating"],styles:["Rating"],description:"Pick and display rating",import:"import { Rating } from '@mantine/core';",source:"@mantine/core/src/components/Rating/Rating.tsx",docs:"core/rating.mdx"},Space:{title:"Space",package:"@mantine/core",slug:"/core/space",description:"Add horizontal or vertical spacing from theme",import:"import { Space } from '@mantine/core';",source:"@mantine/core/src/components/Space/Space.tsx",docs:"core/space.mdx"},Indicator:{title:"Indicator",package:"@mantine/core",slug:"/core/indicator",props:["Indicator"],styles:["Indicator"],description:"Display element at the corner of another element",import:"import { Indicator } from '@mantine/core';",source:"@mantine/core/src/components/Indicator/Indicator.tsx",docs:"core/indicator.mdx"},Textarea:{title:"Textarea",package:"@mantine/core",slug:"/core/textarea",props:["Textarea"],styles:["Textarea"],description:"Autosize or regular textarea",import:"import { Textarea } from '@mantine/core';",source:"@mantine/core/src/components/Textarea/Textarea.tsx",docs:"core/textarea.mdx"},JsonInput:{title:"JsonInput",package:"@mantine/core",slug:"/core/json-input",props:["JsonInput"],styles:["JsonInput"],description:"Capture json data from user",import:"import { JsonInput } from '@mantine/core';",source:"@mantine/core/src/components/JsonInput/JsonInput.tsx",docs:"core/json-input.mdx"},Image:{title:"Image",package:"@mantine/core",slug:"/core/image",props:["Image"],styles:["Image"],polymorphic:!0,description:"Image with optional fallback",import:"import { Image } from '@mantine/core';",source:"@mantine/core/src/components/Image/Image.tsx",docs:"core/image.mdx"},Card:{title:"Card",package:"@mantine/core",slug:"/core/card",props:["Card","CardSection"],styles:["Card"],componentPrefix:"Card",description:"Card with sections",import:"import { Card } from '@mantine/core';",source:"@mantine/core/src/components/Card/Card.tsx",docs:"core/card.mdx"},PasswordInput:{title:"PasswordInput",package:"@mantine/core",slug:"/core/password-input",props:["PasswordInput"],styles:["PasswordInput"],description:"Capture password data from user",import:"import { PasswordInput } from '@mantine/core';",source:"@mantine/core/src/components/PasswordInput/PasswordInput.tsx",docs:"core/password-input.mdx"},FileInput:{title:"FileInput",package:"@mantine/core",slug:"/core/file-input",props:["FileInput"],styles:["FileInput"],description:"Capture files from user",import:"import { FileInput } from '@mantine/core';",source:"@mantine/core/src/components/FileInput/FileInput.tsx",docs:"core/file-input.mdx"},Stepper:{title:"Stepper",package:"@mantine/core",slug:"/core/stepper",props:["Stepper","StepperStep"],styles:["Stepper"],componentPrefix:"Stepper",description:"Display content divided into a steps sequence",import:"import { Stepper } from '@mantine/core';",source:"@mantine/core/src/components/Stepper/Stepper.tsx",docs:"core/stepper.mdx"},ColorInput:{title:"ColorInput",package:"@mantine/core",slug:"/core/color-input",props:["ColorInput"],styles:["ColorInput"],description:"Capture color from user",import:"import { ColorInput } from '@mantine/core';",source:"@mantine/core/src/components/ColorInput/ColorInput.tsx",docs:"core/color-input.mdx"},ThemeIcon:{title:"ThemeIcon",package:"@mantine/core",slug:"/core/theme-icon",props:["ThemeIcon"],styles:["ThemeIcon"],description:"Render icon inside element with theme colors",import:"import { ThemeIcon } from '@mantine/core';",source:"@mantine/core/src/components/ThemeIcon/ThemeIcon.tsx",docs:"core/theme-icon.mdx"},NumberInput:{title:"NumberInput",package:"@mantine/core",slug:"/core/number-input",props:["NumberInput"],styles:["NumberInput"],description:"Capture number from user",import:"import { NumberInput } from '@mantine/core';",source:"@mantine/core/src/components/NumberInput/NumberInput.tsx",docs:"core/number-input.mdx"},LoadingOverlay:{title:"LoadingOverlay",package:"@mantine/core",slug:"/core/loading-overlay",props:["LoadingOverlay"],styles:["LoadingOverlay"],description:"An overlay with centered loader",import:"import { LoadingOverlay } from '@mantine/core';",source:"@mantine/core/src/components/LoadingOverlay/LoadingOverlay.tsx",docs:"core/loading-overlay.mdx"},Radio:{title:"Radio",package:"@mantine/core",slug:"/core/radio",componentPrefix:"Radio",props:["Radio","RadioGroup"],styles:["Radio","RadioGroup"],description:"Wrapper for input type radio",import:"import { Radio } from '@mantine/core';",source:"@mantine/core/src/components/Radio/Radio.tsx",docs:"core/radio.mdx"},Timeline:{title:"Timeline",package:"@mantine/core",slug:"/core/timeline",componentPrefix:"Timeline",props:["Timeline","TimelineItem"],styles:["Timeline"],description:"Display list of events in chronological order",import:"import { Timeline } from '@mantine/core';",source:"@mantine/core/src/components/Timeline/Timeline.tsx",docs:"core/timeline.mdx"},Dialog:{title:"Dialog",package:"@mantine/core",slug:"/core/dialog",props:["Dialog"],styles:["Dialog"],description:"Display a fixed overlay dialog at any side of the screen",import:"import { Dialog } from '@mantine/core';",source:"@mantine/core/src/components/Dialog/Dialog.tsx",docs:"core/dialog.mdx"},Flex:{title:"Flex",package:"@mantine/core",slug:"/core/flex",props:["Flex"],styles:["Flex"],polymorphic:!0,description:"Compose elements in a flex container",import:"import { Flex } from '@mantine/core';",source:"@mantine/core/src/components/Flex/Flex.tsx",docs:"core/flex.mdx"},List:{title:"List",package:"@mantine/core",slug:"/core/list",componentPrefix:"List",props:["List","ListItem"],styles:["List"],description:"Display ordered or unordered list",import:"import { List } from '@mantine/core';",source:"@mantine/core/src/components/List/List.tsx",docs:"core/list.mdx"},Spoiler:{title:"Spoiler",package:"@mantine/core",slug:"/core/spoiler",props:["Spoiler"],styles:["Spoiler"],description:"Hide long sections of content under a spoiler",import:"import { Spoiler } from '@mantine/core';",source:"@mantine/core/src/components/Spoiler/Spoiler.tsx",docs:"core/spoiler.mdx"},NavLink:{title:"NavLink",package:"@mantine/core",slug:"/core/nav-link",props:["NavLink"],styles:["NavLink"],description:"Navigation link",polymorphic:!0,import:"import { NavLink } from '@mantine/core';",source:"@mantine/core/src/components/NavLink/NavLink.tsx",docs:"core/nav-link.mdx"},NumberFormatter:{title:"NumberFormatter",package:"@mantine/core",slug:"/core/number-formatter",props:["NumberFormatter"],description:"Format number with thousands/decimal separators and suffix/prefix",import:"import { NumberFormatter } from '@mantine/core';",source:"@mantine/core/src/components/NumberFormatter/NumberFormatter.tsx",docs:"core/number-formatter.mdx"},...i,Notifications:{title:"Notifications system",package:"@mantine/notifications",slug:"/x/notifications",props:["Notifications"],styles:["Notifications"],description:"Mantine notifications system",source:"@mantine/notifications/src",license:"MIT",docs:"x/notifications.mdx"},Spotlight:{title:"Spotlight",package:"@mantine/spotlight",slug:"/x/spotlight",props:["Spotlight","SpotlightRoot","SpotlightAction","SpotlightActionsGroup","SpotlightSearch"],styles:["Spotlight"],description:"Command center for your application",source:"@mantine/spotlight/src",license:"MIT",docs:"x/spotlight.mdx"},Carousel:{title:"Carousel",package:"@mantine/carousel",slug:"/x/carousel",props:["Carousel"],styles:["Carousel"],description:"Embla based carousel component",source:"@mantine/carousel/src",license:"MIT",docs:"x/carousel.mdx"},Dropzone:{title:"Dropzone",package:"@mantine/dropzone",slug:"/x/dropzone",props:["Dropzone"],styles:["Dropzone"],description:"Capture files from user with drag and drop",source:"@mantine/dropzone/src",license:"MIT",docs:"x/dropzone.mdx"},Nprogress:{title:"NavigationProgress",package:"@mantine/nprogress",slug:"/x/nprogress",props:["NavigationProgress"],description:"Navigation progress bar",source:"@mantine/nprogress/src",license:"MIT",docs:"x/nprogress.mdx"},CodeHighlight:{title:"CodeHighlight",package:"@mantine/code-highlight",slug:"/x/code-highlight",props:["CodeHighlight","CodeHighlightTabs","InlineCodeHighlight"],styles:["CodeHighlight","CodeHighlightTabs","InlineCodeHighlight"],description:"Highlight code with highlight.js",source:"@mantine/code-highlight/src",license:"MIT",docs:"x/code-highlight.mdx"},Modals:{title:"Modals manager",package:"@mantine/modals",slug:"/x/modals",props:["ModalsProvider"],description:"Centralized modals manager with option to handle state of multi-step modals",source:"@mantine/modals/src",license:"MIT",docs:"x/modals.mdx"},TipTap:{title:"Rich text editor",package:"@mantine/tiptap",slug:"/x/tiptap",props:["RichTextEditor"],styles:["RichTextEditor"],description:"Tiptap based rich text editor",source:"@mantine/tiptap/src",license:"MIT",docs:"x/tiptap.mdx"},useForm:{title:"use-form",package:"@mantine/form",slug:"/form/use-form",description:"Manage form state",source:"@mantine/form/src",license:"MIT",docs:"form/use-form.mdx"},createFormContext:{title:"Form context",package:"@mantine/form",slug:"/form/create-form-context",description:"Add context support to use-form with createFormContext",docs:"form/use-form.mdx"},formErrors:{title:"Form errors",package:"@mantine/form",slug:"/form/errors",description:"Manipulate form errors with use-form hook",docs:"form/errors.mdx"},formNested:{title:"Nested fields",package:"@mantine/form",slug:"/form/nested",description:"Manage nested arrays and object state with use-form hook",docs:"form/nested.mdx"},formRecipes:{title:"Recipes",package:"@mantine/form",slug:"/form/recipes",description:"use-form examples",docs:"form/recipes.mdx"},formStatus:{title:"Touched & dirty",package:"@mantine/form",slug:"/form/status",description:"Get fields and form touched and dirty status",docs:"form/status.mdx"},formValidation:{title:"Form validation",package:"@mantine/form",slug:"/form/validation",description:"Validate fields with use-form hook",docs:"form/validation.mdx"},formSchemaValidation:{title:"Form schema validation",package:"@mantine/form",slug:"/form/schema-validation",description:"use-form schema based validation with zod, yup, joi and superstruct",docs:"form/schema-validation.mdx"},formValidators:{title:"Form validators",package:"@mantine/form",slug:"/form/validators",description:"Premade validation functions",docs:"form/validators.mdx"},formValues:{title:"Form values",package:"@mantine/form",slug:"/form/values",description:"Manipulate form values with use-form",docs:"form/values.mdx"},formActions:{title:"Form actions",package:"@mantine/form",slug:"/form/actions",description:"Change form state from anywhere in the application",docs:"form/actions.mdx"},formGetInputProps:{title:"getInputProps",package:"@mantine/form",slug:"/form/get-input-props",description:"A handler to get input props for any field in the form",docs:"form/get-input-props.mdx"},GettingStartedDates:{title:"Getting started",description:"Get started with @mantine/dates package",package:"@mantine/dates",license:"MIT",slug:"/dates/getting-started",docs:"dates/getting-started.mdx",hideInSearch:!0},Calendar:{title:"Calendar",package:"@mantine/dates",slug:"/dates/calendar",description:"Base component for custom date pickers",props:["Calendar"],styles:["Calendar"],import:"import { Calendar } from '@mantine/dates';",source:"@mantine/dates/src/components/Calendar/Calendar.tsx",docs:"dates/calendar.mdx"},DateInput:{title:"DateInput",package:"@mantine/dates",slug:"/dates/date-input",description:"Free form date input",props:["DateInput"],styles:["DateInput"],import:"import { DateInput } from '@mantine/dates';",source:"@mantine/dates/src/components/DateInput/DateInput.tsx",docs:"dates/date-input.mdx"},DatePicker:{title:"DatePicker",package:"@mantine/dates",slug:"/dates/date-picker",description:"Inline date, multiple dates and dates range picker",props:["DatePicker"],styles:["DatePicker"],import:"import { DatePicker } from '@mantine/dates';",source:"@mantine/dates/src/components/DatePicker/DatePicker.tsx",docs:"dates/date-picker.mdx"},DatePickerInput:{title:"DatePickerInput",package:"@mantine/dates",slug:"/dates/date-picker-input",description:"Date, multiple dates and dates range picker input",props:["DatePickerInput"],styles:["DatePickerInput"],import:"import { DatePickerInput } from '@mantine/dates';",source:"@mantine/dates/src/components/DatePickerInput/DatePickerInput.tsx",docs:"dates/date-picker-input.mdx"},DatesProvider:{title:"DatesProvider",package:"@mantine/dates",slug:"/dates/dates-provider",description:"Settings provider for @mantine/dates components",import:"import { DatesProvider } from '@mantine/dates';",source:"@mantine/dates/src/components/DatesProvider/DatesProvider.tsx",docs:"dates/dates-provider.mdx"},DateTimePicker:{title:"DateTimePicker",package:"@mantine/dates",slug:"/dates/date-time-picker",props:["DateTimePicker"],styles:["DateTimePicker"],description:"Capture datetime from the user",import:"import { DateTimePicker } from '@mantine/dates';",source:"@mantine/dates/src/components/DateTimePicker/DateTimePicker.tsx",docs:"dates/date-time-picker.mdx"},MonthPicker:{title:"MonthPicker",package:"@mantine/dates",slug:"/dates/month-picker",props:["MonthPicker"],styles:["MonthPicker"],description:"Inline month, multiple months and months range picker",import:"import { MonthPicker } from '@mantine/dates';",source:"@mantine/dates/src/components/MonthPicker/MonthPicker.tsx",docs:"dates/month-picker.mdx"},MonthPickerInput:{title:"MonthPickerInput",package:"@mantine/dates",slug:"/dates/month-picker-input",props:["MonthPickerInput"],styles:["MonthPickerInput"],description:"Month, multiple months and months range picker input",import:"import { MonthPickerInput } from '@mantine/dates';",source:"@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.tsx",docs:"dates/month-picker-input.mdx"},TimeInput:{title:"TimeInput",package:"@mantine/dates",slug:"/dates/time-input",props:["TimeInput"],styles:["TimeInput"],description:"Capture time from the user",import:"import { TimeInput } from '@mantine/dates';",source:"@mantine/dates/src/components/TimeInput/TimeInput.tsx",docs:"dates/time-input.mdx"},YearPicker:{title:"YearPicker",package:"@mantine/dates",slug:"/dates/year-picker",props:["YearPicker"],styles:["YearPicker"],description:"Inline year, multiple years and years range picker",import:"import { YearPicker } from '@mantine/dates';",source:"@mantine/dates/src/components/YearPicker/YearPicker.tsx",docs:"dates/year-picker.mdx"},YearPickerInput:{title:"YearPickerInput",package:"@mantine/dates",slug:"/dates/year-picker-input",props:["YearPickerInput"],styles:["YearPickerInput"],description:"Inline year, multiple years and years range picker",import:"import { YearPickerInput } from '@mantine/dates';",source:"@mantine/dates/src/components/YearPickerInput/YearPickerInput.tsx",docs:"dates/year-picker-input.mdx"},GettingStartedCharts:{title:"Getting started",description:"Get started with @mantine/charts package",package:"@mantine/charts",license:"MIT",slug:"/charts/getting-started",docs:"charts/getting-started.mdx",hideInSearch:!0},AreaChart:{title:"AreaChart",props:["AreaChart"],styles:["AreaChart"],package:"@mantine/charts",slug:"/charts/area-chart",description:"Area chart component with stacked, percent and split variants",import:"import { AreaChart } from '@mantine/charts';",source:"@mantine/charts/src/AreaChart/AreaChart.tsx",docs:"charts/area-chart.mdx"},BarChart:{title:"BarChart",props:["BarChart"],styles:["BarChart"],package:"@mantine/charts",slug:"/charts/bar-chart",description:"Bar chart component with stacked and percent variants",import:"import { BarChart } from '@mantine/charts';",source:"@mantine/charts/src/BarChart/BarChart.tsx",docs:"charts/bar-chart.mdx"},LineChart:{title:"LineChart",props:["LineChart"],styles:["LineChart"],package:"@mantine/charts",slug:"/charts/line-chart",description:"Line chart component",import:"import { LineChart } from '@mantine/charts';",source:"@mantine/charts/src/LineChart/LineChart.tsx",docs:"charts/line-chart.mdx"},Sparkline:{title:"Sparkline",props:["Sparkline"],styles:["Sparkline"],package:"@mantine/charts",slug:"/charts/sparkline",description:"Simplified area chart to show trends",import:"import { Sparkline } from '@mantine/charts';",source:"@mantine/charts/src/Sparkline/Sparkline.tsx",docs:"charts/sparkline.mdx"},DonutChart:{title:"DonutChart",props:["DonutChart"],styles:["DonutChart"],package:"@mantine/charts",slug:"/charts/donut-chart",description:"Donut chart component",import:"import { DonutChart } from '@mantine/charts';",source:"@mantine/charts/src/DonutChart/DonutChart.tsx",docs:"charts/donut-chart.mdx"},PieChart:{title:"PieChart",props:["PieChart"],styles:["PieChart"],package:"@mantine/charts",slug:"/charts/pie-chart",description:"Pie chart component",import:"import { PieChart } from '@mantine/charts';",source:"@mantine/charts/src/PieChart/PieChart.tsx",docs:"charts/pie-chart.mdx"}},c=[{group:"theming",pages:[a.MantineProvider,a.ThemeObject,a.Colors,a.ColorSchemes,a.Typography,a.DefaultProps]},{group:"styles",pages:[a.StylesOverview,a.MantineStyles,a.CSSFilesList,a.CSSModules,a.PostCSSPreset,a.UsageWithSass,a.VanillaExtract,a.GlobalStyles,a.CssVariables,a.CSSVariablesList,a.Rem,a.StyleProp,a.ResponsiveStyles,a.StylesApi,a.DataAttributes,a.VariantsAndSizes,a.UnstyledComponents,a.StyleProps,a.ColorFunctions,a.Rtl,a.StylesPerformance]},{group:"guides",pages:[a.Polymorphic,a.Icons,a.NextJs,a.Vite,a.Remix,a.Gatsby,a.Redwood,a.Storybook,a.TypeScript,a.JavaScript,a.Jest,a.Vitest,a.FunctionsReference,a.SixToSeven]},{group:"mantine-hooks",pages:[{category:"UI and Dom",pages:[a.useClickOutside,a.useColorScheme,a.useElementSize,a.useEventListener,a.useFocusReturn,a.useFocusTrap,a.useFocusWithin,a.useFullscreen,a.useHotkeys,a.useHover,a.useIntersection,a.useMediaQuery,a.useMouse,a.useMove,a.useReducedMotion,a.useResizeObserver,a.useScrollIntoView,a.useViewportSize,a.useWindowEvent,a.useWindowScroll,a.useInViewport]},{category:"State management",pages:[a.useCounter,a.useDebouncedState,a.useDebouncedValue,a.useDisclosure,a.useId,a.useInputState,a.useListState,a.useLocalStorage,a.usePrevious,a.useQueue,a.useSetState,a.useToggle,a.useUncontrolled,a.useValidatedState,a.usePagination]},{category:"Utilities",pages:[a.useClipboard,a.useDocumentTitle,a.useDocumentVisibility,a.useEyeDropper,a.useFavicon,a.useHash,a.useHeadroom,a.useIdle,a.useInterval,a.useMergedRef,a.useNetwork,a.useOs,a.usePageLeave,a.useTextSelection,a.useTimeout]},{category:"Lifecycle",pages:[a.useDidUpdate,a.useForceUpdate,a.useIsomorphicEffect,a.useLogger,a.useShallowEffect]}]},{group:"mantine-form",pages:[a.useForm,a.formValues,a.formGetInputProps,a.formErrors,a.formValidation,a.formSchemaValidation,a.formValidators,a.formNested,a.formStatus,a.createFormContext,a.formActions,a.formRecipes]},{group:"mantine-core",pages:[{category:"layout",pages:[a.Container,a.Center,a.Group,a.Stack,a.AspectRatio,a.AppShell,a.SimpleGrid,a.Grid,a.Space,a.Flex]},{category:"inputs",pages:[a.Input,a.ColorPicker,a.NativeSelect,a.SegmentedControl,a.Slider,a.Switch,a.TextInput,a.Checkbox,a.Radio,a.Fieldset,a.PinInput,a.Chip,a.Rating,a.Textarea,a.JsonInput,a.PasswordInput,a.FileInput,a.ColorInput,a.NumberInput]},{category:"combobox",pages:[a.Combobox,a.Pill,a.PillsInput,a.Autocomplete,a.TagsInput,a.Select,a.MultiSelect]},{category:"buttons",pages:[a.ActionIcon,a.Button,a.CloseButton,a.CopyButton,a.FileButton,a.UnstyledButton]},{category:"navigation",pages:[a.Anchor,a.Tabs,a.Breadcrumbs,a.Burger,a.Pagination,a.Stepper,a.NavLink]},{category:"feedback",pages:[a.Loader,a.Alert,a.Notification,a.Skeleton,a.Progress,a.RingProgress]},{category:"overlays",pages:[a.Popover,a.Tooltip,a.Overlay,a.Affix,a.Modal,a.Drawer,a.HoverCard,a.Menu,a.LoadingOverlay,a.Dialog]},{category:"Data display",pages:[a.BackgroundImage,a.ColorSwatch,a.Kbd,a.Badge,a.Avatar,a.Accordion,a.Indicator,a.Card,a.Image,a.ThemeIcon,a.Timeline,a.Spoiler,a.NumberFormatter]},{category:"typography",pages:[a.Blockquote,a.Code,a.Highlight,a.Mark,a.Table,a.Text,a.Title,a.TypographyStylesProvider,a.List]},{category:"misc",pages:[a.Collapse,a.FocusTrap,a.Paper,a.Portal,a.ScrollArea,a.Transition,a.VisuallyHidden,a.Divider,a.Box]}]},{group:"mantine-dates",pages:[a.GettingStartedDates,a.DatesProvider,a.Calendar,a.DateInput,a.DateTimePicker,a.DatePicker,a.DatePickerInput,a.MonthPicker,a.MonthPickerInput,a.YearPicker,a.YearPickerInput,a.TimeInput]},{group:"mantine-charts",pages:[a.GettingStartedCharts,a.AreaChart,a.BarChart,a.LineChart,a.DonutChart,a.PieChart,a.Sparkline]},{group:"extensions",pages:[a.CodeHighlight,a.Notifications,a.Spotlight,a.Carousel,a.Dropzone,a.Nprogress,a.Modals,a.TipTap]},{group:"changelog",pages:[a.Changelog750,a.Changelog740,a.Changelog730,a.Changelog720,a.Changelog710,a.Changelog700,a.AllReleases]}],s=c.reduce((e,t)=>(t.pages.forEach(t=>{if(t.category){let n=[...t.pages];n.sort((e,t)=>e.title.localeCompare(t.title)),e.push(...n)}else e.push(t)}),e),[]),l=[...s,...Object.keys(r).map(e=>r[e]),{title:"Combobox examples",slug:"/combobox/?e=BasicSelect",search:"50+ examples of Combobox usage"},{title:"AppShell examples",slug:"/app-shell/?e=BasicAppShell",search:"10+ examples of AppShell usage"}].reduce((e,t)=>(e.some(e=>e.slug===t.slug)||e.push(t),e),[])},1347:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return eB}});var r=n(24246);n(30781),n(72129),n(80684),n(61140),n(6051),n(22719),n(26324),n(21574),n(54457),n(57346),n(28631),n(7391),n(61671),n(29975),n(40750);var o=n(27378),i=n(88038),a=n.n(i),c=n(49134),s=n(50221),l=n(2488),u=n(69142);function d(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,p(e,t)}n(23615);var f=n(31542),g={disabled:!1},h=o.createContext(null),y="unmounted",v="exited",b="entering",k="entered",x="exiting",w=function(e){function t(t,n){r=e.call(this,t,n)||this;var r,o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o=v,r.appearStatus=b):o=k:o=t.unmountOnExit||t.mountOnEnter?y:v,r.state={status:o},r.nextCallback=null,r}m(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&t.status===y?{status:v}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==b&&n!==k&&(t=b):(n===b||n===k)&&(t=x)}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){if(this.cancelNextCallback(),t===b){if(this.props.unmountOnExit||this.props.mountOnEnter){var n=this.props.nodeRef?this.props.nodeRef.current:f.findDOMNode(this);n&&n.scrollTop}this.performEnter(e)}else this.performExit()}else this.props.unmountOnExit&&this.state.status===v&&this.setState({status:y})},n.performEnter=function(e){var t=this,n=this.props.enter,r=this.context?this.context.isMounting:e,o=this.props.nodeRef?[r]:[f.findDOMNode(this),r],i=o[0],a=o[1],c=this.getTimeouts(),s=r?c.appear:c.enter;if(!e&&!n||g.disabled){this.safeSetState({status:k},function(){t.props.onEntered(i)});return}this.props.onEnter(i,a),this.safeSetState({status:b},function(){t.props.onEntering(i,a),t.onTransitionEnd(s,function(){t.safeSetState({status:k},function(){t.props.onEntered(i,a)})})})},n.performExit=function(){var e=this,t=this.props.exit,n=this.getTimeouts(),r=this.props.nodeRef?void 0:f.findDOMNode(this);if(!t||g.disabled){this.safeSetState({status:v},function(){e.props.onExited(r)});return}this.props.onExit(r),this.safeSetState({status:x},function(){e.props.onExiting(r),e.onTransitionEnd(n.exit,function(){e.safeSetState({status:v},function(){e.props.onExited(r)})})})},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t){this.setNextCallback(t);var n=this.props.nodeRef?this.props.nodeRef.current:f.findDOMNode(this),r=null==e&&!this.props.addEndListener;if(!n||r){setTimeout(this.nextCallback,0);return}if(this.props.addEndListener){var o=this.props.nodeRef?[this.nextCallback]:[n,this.nextCallback],i=o[0],a=o[1];this.props.addEndListener(i,a)}null!=e&&setTimeout(this.nextCallback,e)},n.render=function(){var e=this.state.status;if(e===y)return null;var t=this.props,n=t.children,r=(t.in,t.mountOnEnter,t.unmountOnExit,t.appear,t.enter,t.exit,t.timeout,t.addEndListener,t.onEnter,t.onEntering,t.onEntered,t.onExit,t.onExiting,t.onExited,t.nodeRef,d(t,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]));return o.createElement(h.Provider,{value:null},"function"==typeof n?n(e,r):o.cloneElement(o.Children.only(n),r))},t}(o.Component);function E(){}function C(){return(C=Object.assign||function(e){for(var t=1;t{var a;let{autoClose:c,message:s,...l}=e,u="number"==typeof(a=e.autoClose)?a:!1!==a&&!1!==n&&n,d=(0,o.useRef)(),p=()=>window.clearTimeout(d.current),m=()=>{t(e.id),p()},f=()=>{"number"==typeof u&&(d.current=window.setTimeout(m,u))};return(0,o.useEffect)(()=>{e.onOpen?.(e)},[]),(0,o.useEffect)(()=>(f(),p),[u]),o.createElement(Notification.P,{...r,...l,onClose:m,ref:i,onMouseEnter:p,onMouseLeave:f},s)});V.displayName="@mantine/notifications/NotificationContainer";var Z=n(59269),G={root:"m-b37d9ac7",notification:"m-5ed0edd0"};let W={position:"bottom-right",autoClose:4e3,transitionDuration:250,containerWidth:440,notificationMaxHeight:200,limit:5,zIndex:(0,I.w)("overlay"),store:Z.Ps,withinPortal:!0},q=(0,M.Z)((e,{zIndex:t,position:n,containerWidth:r})=>{let[o,i]=n.split("-");return{root:{"--notifications-z-index":t?.toString(),"--notifications-top":"top"===o?"var(--mantine-spacing-md)":void 0,"--notifications-bottom":"bottom"===o?"var(--mantine-spacing-md)":void 0,"--notifications-left":"left"===i?"var(--mantine-spacing-md)":"center"===i?"50%":void 0,"--notifications-right":"right"===i?"var(--mantine-spacing-md)":void 0,"--notifications-transform":"center"===i?"translateX(-50%)":void 0,"--notifications-container-width":(0,D.h)(r)}}}),Y=(0,T.d)((e,t)=>{let n=(0,A.w)("Notifications",W,e),{classNames:r,className:i,style:a,styles:c,unstyled:s,vars:l,position:u,autoClose:d,transitionDuration:p,containerWidth:m,notificationMaxHeight:f,limit:g,zIndex:h,store:y,portalProps:v,withinPortal:b,...k}=n,x=(0,P.rZ)(),E=(0,Z.zn)(y),C=(0,H.N)(),F=(0,$.J)(),S=(0,o.useRef)({}),B=(0,o.useRef)(0),I=!!x.respectReducedMotion&&F,M=I?1:p,D=(0,R.y)({name:"Notifications",classes:G,props:n,className:i,style:a,classNames:r,styles:c,unstyled:s,vars:l,varsResolver:q});(0,o.useEffect)(()=>{y?.updateState(e=>({...e,limit:g||5}))},[g]),(0,O.l)(()=>{E.notifications.length>B.current&&setTimeout(()=>C(),0),B.current=E.notifications.length},[E.notifications]);let T=E.notifications.map(({style:e,...t})=>o.createElement(w,{key:t.id,timeout:M,onEnter:()=>S.current[t.id].offsetHeight,nodeRef:{current:S.current[t.id]}},n=>o.createElement(V,{ref:e=>{S.current[t.id]=e},data:t,onHide:e=>(0,Z.yK)(e,y),autoClose:d,...D("notification",{style:{...function({state:e,maxHeight:t,position:n,transitionDuration:r}){let[o,i]=n.split("-"),a="center"===i?`${o}-center`:i,c={opacity:0,maxHeight:t,transform:z[a],transitionDuration:`${r}ms, ${r}ms, ${r}ms`,transitionTimingFunction:"cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",transitionProperty:"opacity, transform, max-height"},s={opacity:1,transform:_[a]},l={opacity:0,maxHeight:0,transform:z[a]};return{...c,...{entering:s,entered:s,exiting:l,exited:l}[e]}}({state:n,position:u,transitionDuration:M,maxHeight:f}),...e}})})));return o.createElement(N.q,{withinPortal:b,...v},o.createElement(L.x,{...D("root"),ref:t,...k},o.createElement(j,null,T)))});Y.classes=G,Y.displayName="@mantine/notifications/Notifications",Y.show=Z.N9.show,Y.hide=Z.N9.hide,Y.update=Z.N9.update,Y.clean=Z.N9.clean,Y.cleanQueue=Z.N9.cleanQueue,Y.updateState=Z.N9.updateState;var U=n(36572),K=n(43218),X=n.n(K);function J(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(X(),{strategy:"afterInteractive",src:"https://www.googletagmanager.com/gtag/js?id=G-4Z4NNVLRH5"}),(0,r.jsx)(X(),{id:"ga",strategy:"afterInteractive",children:"\nwindow.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\n\ngtag('config', 'G-4Z4NNVLRH5');\n"})]})}var Q=n(86677),ee=n(27650),et=n(35499);let en=["/combobox"];function er(){let e=(0,Q.useRouter)(),{setColorScheme:t}=(0,ee.X)(),{toggleDirection:n}=(0,c.gm)(),o=(0,et.l)("light");return(0,u.A)([["mod + J",()=>t("light"===o?"dark":"light")],["mod + shift + L",()=>!en.includes(e.pathname)&&n()]],[]),(0,r.jsx)(r.Fragment,{children:null})}var eo=n(79388),Text=n(26569),ei=n(8671),ea=n(72120),ec=n(55574),es=n(22971);let el=(0,o.createContext)(null);function eu({id:e,cancelProps:t,confirmProps:n,labels:r={cancel:"",confirm:""},closeOnConfirm:i=!0,closeOnCancel:a=!0,groupProps:c,onCancel:s,onConfirm:l,children:u}){let{cancel:d,confirm:p}=r,m=function(){let e=(0,o.useContext)(el);if(!e)throw Error("[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component");return e}();return o.createElement(o.Fragment,null,u&&o.createElement(L.x,{mb:"md"},u),o.createElement(es.Z,{justify:"flex-end",...c},o.createElement(ei.z,{variant:"default",...t,onClick:n=>{"function"==typeof t?.onClick&&t?.onClick(n),"function"==typeof s&&s(),a&&m.closeModal(e)}},t?.children||d),o.createElement(ei.z,{...n,onClick:t=>{"function"==typeof n?.onClick&&n?.onClick(t),"function"==typeof l&&l(),i&&m.closeModal(e)}},n?.children||p)))}el.displayName="@mantine/modals/ModalsContext";var ed=n(41788);function ep(e,t){t&&"confirm"===e.type&&e.props.onCancel?.(),e.props.onClose?.()}function em(e,t){switch(t.type){case"OPEN":return{current:t.modal,modals:[...e.modals,t.modal]};case"CLOSE":{let n=e.modals.find(e=>e.id===t.modalId);if(!n)return e;ep(n,t.canceled);let r=e.modals.filter(e=>e.id!==t.modalId);return{current:r[r.length-1]||e.current,modals:r}}case"CLOSE_ALL":if(!e.modals.length)return e;return e.modals.concat().reverse().forEach(e=>{ep(e,t.canceled)}),{current:e.current,modals:[]};default:return e}}function ef({children:e,modalProps:t,labels:n,modals:r}){let[i,a]=(0,o.useReducer)(em,{modals:[],current:null}),c=(0,o.useRef)(i);c.current=i;let s=(0,o.useCallback)(e=>{a({type:"CLOSE_ALL",canceled:e})},[c,a]),l=(0,o.useCallback)(({modalId:e,...t})=>{let n=e||(0,ec.k)();return a({type:"OPEN",modal:{id:n,type:"content",props:t}}),n},[a]),u=(0,o.useCallback)(({modalId:e,...t})=>{let n=e||(0,ec.k)();return a({type:"OPEN",modal:{id:n,type:"confirm",props:t}}),n},[a]),d=(0,o.useCallback)((e,{modalId:t,...n})=>{let r=t||(0,ec.k)();return a({type:"OPEN",modal:{id:r,type:"context",props:n,ctx:e}}),r},[a]),p=(0,o.useCallback)((e,t)=>{a({type:"CLOSE",modalId:e,canceled:t})},[c,a]);(0,ed.Ro)({openModal:l,openConfirmModal:u,openContextModal:({modal:e,...t})=>d(e,t),closeModal:p,closeContextModal:p,closeAllModals:s});let m={modals:i.modals,openModal:l,openConfirmModal:u,openContextModal:d,closeModal:p,closeContextModal:p,closeAll:s},{modalProps:f,content:g}=(()=>{let e=c.current.current;switch(e?.type){case"context":{let{innerProps:t,...n}=e.props,i=r[e.ctx];return{modalProps:n,content:o.createElement(i,{innerProps:t,context:m,id:e.id})}}case"confirm":{let{modalProps:t,confirmProps:r}=function(e){if(!e)return{confirmProps:{},modalProps:{}};let{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:c,confirmProps:s,groupProps:l,labels:u,...d}=e;return{confirmProps:{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:c,confirmProps:s,groupProps:l,labels:u},modalProps:{id:t,...d}}}(e.props);return{modalProps:t,content:o.createElement(eu,{...r,id:e.id,labels:e.props.labels||n})}}case"content":{let{children:t,...n}=e.props;return{modalProps:n,content:o.createElement(o.Fragment,null,t)}}default:return{modalProps:{},content:null}}})();return o.createElement(el.Provider,{value:m},o.createElement(ea.u,{zIndex:(0,I.w)("modal")+1,...t,...f,opened:i.modals.length>0,onClose:()=>p(i.current?.id)},g),e)}let eg=e=>{let{context:t,id:n,innerProps:o}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Text.x,{size:"sm",children:o.modalBody}),(0,r.jsx)(ei.z,{fullWidth:!0,mt:"md",onClick:()=>t.closeModal(n),children:"Close modal"})]})};function eh(e){let{children:t}=e;return(0,r.jsx)(ef,{labels:{confirm:"Confirm",cancel:"Cancel"},modals:{demonstration:eg},children:t})}var ey=n(79203),ev=n(5415),eb=n(10248),ek=n(7402),ex=n.n(ek);function ew(){return(0,r.jsx)(a(),{children:(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:":root{ --docs-font-primary: ".concat(ex().style.fontFamily,", ").concat(eb.t.fontFamily,"; }")}})})}var eE=n(74369);let eC=(0,eE.j)({fontFamilyMonospace:"Menlo, Monaco, ".concat(eb.t.fontFamilyMonospace),colors:{"ocean-blue":["#7AD1DD","#5FCCDB","#44CADC","#2AC9DE","#1AC2D9","#11B7CD","#09ADC3","#0E99AC","#128797","#147885"],"oklch-blue":["oklch(96.27% 0.0217 238.66)","oklch(92.66% 0.0429 240.01)","oklch(86.02% 0.0827 241.66)","oklch(78.2% 0.13 243.83)","oklch(71.8% 0.1686 246.06)","oklch(66.89% 0.1986 248.32)","oklch(62.59% 0.2247 250.29)","oklch(58.56% 0.2209 251.26)","oklch(54.26% 0.2067 251.67)","oklch(49.72% 0.1888 251.59)"],"bright-pink":["#F0BBDD","#ED9BCF","#EC7CC3","#ED5DB8","#F13EAF","#F71FA7","#FF00A1","#E00890","#C50E82","#AD1374"]}});n(59863),n(45061);let eF=["/","/combobox","/app-shell"];async function eS(){let{getHighlighter:e}=await Promise.all([n.e(39962),n.e(8506)]).then(n.bind(n,87342)),t=await e({langs:["tsx","scss","html","bash","json"]});return t}function eB(e){let{Component:t,pageProps:n,router:o}=e,i=!eF.includes(o.pathname),[d,p]=(0,l.I)({key:"mantine-navbar-opened",defaultValue:!0});return(0,u.A)([["mod + alt + N",()=>p(!d)]]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(a(),{children:[(0,r.jsx)("title",{children:"Mantine"}),(0,r.jsx)("link",{rel:"shortcut icon",href:"/favicon.svg"}),(0,r.jsx)("meta",{name:"viewport",content:"minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"}),(0,r.jsx)("meta",{name:"og:image:width",content:"1280"}),(0,r.jsx)("meta",{name:"og:image:height",content:"640"}),(0,r.jsx)("meta",{name:"og:type",content:"website"}),(0,r.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,r.jsx)("meta",{name:"twitter:creator",content:"@mantinedev"}),(0,r.jsx)("meta",{name:"og:image",content:"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"})]}),(0,r.jsx)(J,{}),(0,r.jsx)(ew,{}),(0,r.jsx)(c._9,{initialDirection:"ltr",detectDirection:!1,children:(0,r.jsx)(s.M,{theme:eC,defaultColorScheme:"light",children:(0,r.jsxs)(U.U,{loadShiki:eS,children:[(0,r.jsx)(ey.o,{}),(0,r.jsx)(Y,{}),(0,r.jsx)(eh,{children:(0,r.jsxs)(eo.Cu,{children:[(0,r.jsx)(er,{}),i?(0,r.jsx)(ev.N,{withNavbar:d,children:(0,r.jsx)(t,{...n})}):(0,r.jsx)(t,{...n})]})})]})})})]})}},20459:function(e,t){"use strict";var n,r;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{PrefetchKind:function(){return n},ACTION_REFRESH:function(){return o},ACTION_NAVIGATE:function(){return i},ACTION_RESTORE:function(){return a},ACTION_SERVER_PATCH:function(){return c},ACTION_PREFETCH:function(){return s},ACTION_FAST_REFRESH:function(){return l},ACTION_SERVER_ACTION:function(){return u},isThenable:function(){return d}});let o="refresh",i="navigate",a="restore",c="server-patch",s="prefetch",l="fast-refresh",u="server-action";function d(e){return e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then}(r=n||(n={})).AUTO="auto",r.FULL="full",r.TEMPORARY="temporary",("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},41982:function(e,t,n){"use strict";function r(e,t,n,r){return!1}Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"getDomainLocale",{enumerable:!0,get:function(){return r}}),n(54293),("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},28368:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return k}});let r=n(51538),o=r._(n(27378)),i=n(32250),a=n(95877),c=n(64151),s=n(74453),l=n(79213),u=n(48461),d=n(55348),p=n(13662),m=n(41982),f=n(46598),g=n(20459),h=new Set;function y(e,t,n,r,o,i){if(!i&&!(0,a.isLocalURL)(t))return;if(!r.bypassPrefetchedCheck){let o=void 0!==r.locale?r.locale:"locale"in e?e.locale:void 0,i=t+"%"+n+"%"+o;if(h.has(i))return;h.add(i)}let c=i?e.prefetch(t,o):e.prefetch(t,n,r);Promise.resolve(c).catch(e=>{})}function v(e){return"string"==typeof e?e:(0,c.formatUrl)(e)}let b=o.default.forwardRef(function(e,t){let n,r;let{href:c,as:h,children:b,prefetch:k=null,passHref:x,replace:w,shallow:E,scroll:C,locale:F,onClick:S,onMouseEnter:B,onTouchStart:j,legacyBehavior:I=!1,...M}=e;n=b,I&&("string"==typeof n||"number"==typeof n)&&(n=o.default.createElement("a",null,n));let D=o.default.useContext(u.RouterContext),T=o.default.useContext(d.AppRouterContext),A=null!=D?D:T,P=!D,R=!1!==k,N=null===k?g.PrefetchKind.AUTO:g.PrefetchKind.FULL,{href:L,as:H}=o.default.useMemo(()=>{if(!D){let e=v(c);return{href:e,as:h?v(h):e}}let[e,t]=(0,i.resolveHref)(D,c,!0);return{href:e,as:h?(0,i.resolveHref)(D,h):t||e}},[D,c,h]),$=o.default.useRef(L),O=o.default.useRef(H);I&&(r=o.default.Children.only(n));let z=I?r&&"object"==typeof r&&r.ref:t,[_,V,Z]=(0,p.useIntersection)({rootMargin:"200px"}),G=o.default.useCallback(e=>{(O.current!==H||$.current!==L)&&(Z(),O.current=H,$.current=L),_(e),z&&("function"==typeof z?z(e):"object"==typeof z&&(z.current=e))},[H,z,L,Z,_]);o.default.useEffect(()=>{A&&V&&R&&y(A,L,H,{locale:F},{kind:N},P)},[H,L,V,F,R,null==D?void 0:D.locale,A,P,N]);let W={ref:G,onClick(e){I||"function"!=typeof S||S(e),I&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),A&&!e.defaultPrevented&&function(e,t,n,r,i,c,s,l,u,d){let{nodeName:p}=e.currentTarget,m="A"===p.toUpperCase();if(m&&(function(e){let t=e.currentTarget,n=t.getAttribute("target");return n&&"_self"!==n||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!u&&!(0,a.isLocalURL)(n)))return;e.preventDefault();let f=()=>{let e=null==s||s;"beforePopState"in t?t[i?"replace":"push"](n,r,{shallow:c,locale:l,scroll:e}):t[i?"replace":"push"](r||n,{forceOptimisticNavigation:!d,scroll:e})};u?o.default.startTransition(f):f()}(e,A,L,H,w,E,C,F,P,R)},onMouseEnter(e){I||"function"!=typeof B||B(e),I&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),A&&(R||!P)&&y(A,L,H,{locale:F,priority:!0,bypassPrefetchedCheck:!0},{kind:N},P)},onTouchStart(e){I||"function"!=typeof j||j(e),I&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),A&&(R||!P)&&y(A,L,H,{locale:F,priority:!0,bypassPrefetchedCheck:!0},{kind:N},P)}};if((0,s.isAbsoluteUrl)(H))W.href=H;else if(!I||x||"a"===r.type&&!("href"in r.props)){let e=void 0!==F?F:null==D?void 0:D.locale,t=(null==D?void 0:D.isLocaleDomain)&&(0,m.getDomainLocale)(H,e,null==D?void 0:D.locales,null==D?void 0:D.domainLocales);W.href=t||(0,f.addBasePath)((0,l.addLocale)(H,e,null==D?void 0:D.defaultLocale))}return I?o.default.cloneElement(r,W):o.default.createElement("a",{...M,...W},n)}),k=b;("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},13662:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return s}});let r=n(27378),o=n(75152),i="function"==typeof IntersectionObserver,a=new Map,c=[];function s(e){let{rootRef:t,rootMargin:n,disabled:s}=e,l=s||!i,[u,d]=(0,r.useState)(!1),p=(0,r.useRef)(null),m=(0,r.useCallback)(e=>{p.current=e},[]);(0,r.useEffect)(()=>{if(i){if(l||u)return;let e=p.current;if(e&&e.tagName){let r=function(e,t,n){let{id:r,observer:o,elements:i}=function(e){let t;let n={root:e.root||null,margin:e.rootMargin||""},r=c.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=a.get(r)))return t;let o=new Map,i=new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e);return t={id:n,observer:i,elements:o},c.push(n),a.set(n,t),t}(n);return i.set(e,t),o.observe(e),function(){if(i.delete(e),o.unobserve(e),0===i.size){o.disconnect(),a.delete(r);let e=c.findIndex(e=>e.root===r.root&&e.margin===r.margin);e>-1&&c.splice(e,1)}}}(e,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:n});return r}}else if(!u){let e=(0,o.requestIdleCallback)(()=>d(!0));return()=>(0,o.cancelIdleCallback)(e)}},[l,n,t,u,p.current]);let f=(0,r.useCallback)(()=>{d(!1)},[]);return[m,u,f]}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},40750:function(){},21574:function(){},57346:function(){},61140:function(){},30781:function(){},72129:function(){},6051:function(){},80684:function(){},22719:function(){},26324:function(){},54457:function(){},28631:function(){},61671:function(){},7391:function(){},29975:function(){},45061:function(){},59863:function(){},7402:function(e){e.exports={style:{fontFamily:"'__greycliffCF_0e41f6', '__greycliffCF_Fallback_0e41f6'"},className:"__className_0e41f6"}},43134:function(e){e.exports={section:"DocsSection_section__o2plc"}},91487:function(e){e.exports={logo:"Logo_logo__c5nVK"}},61628:function(e){e.exports={root:"MdxInfo_root__KVEKQ",icon:"MdxInfo_icon__cOv9p"}},75356:function(e){e.exports={link:"MdxLink_link__DWoQo"}},17404:function(e){e.exports={root:"MdxNpmScript_root__wk_w9",icon:"MdxNpmScript_icon___9BYF"}},10568:function(e){e.exports={row:"MdxPackagesInstallation_row__4jECZ",checkbox:"MdxPackagesInstallation_checkbox__jBi9e",hiddenMobile:"MdxPackagesInstallation_hiddenMobile__VJhVH"}},87066:function(e){e.exports={code:"MdxPre_code__tSup0"}},25416:function(e){e.exports={externalLinkIcon:"MdxTemplatesList_externalLinkIcon___In9x",icon:"MdxTemplatesList_icon__759wE",iconCell:"MdxTemplatesList_iconCell__t22nh"}},92911:function(e){e.exports={title:"MdxTitle_title__lm_03",copyButton:"MdxTitle_copyButton__Rk3tQ",link:"MdxTitle_link__O_5hL",offset:"MdxTitle_offset__NkEGi",copyIcon:"MdxTitle_copyIcon__LScnY"}},75522:function(e){e.exports={paragraph:"MdxTypography_paragraph__XriB5",ul:"MdxTypography_ul__gGDJt",li:"MdxTypography_li__gO4GM"}},60837:function(e){e.exports={header:"Header_header__KDGDv",logo:"Header_logo__DqpNC",version:"Header_version__jVWmz",versionChevron:"Header_versionChevron__t4WMy",versionExternalIcon:"Header_versionExternalIcon___plOU"}},84020:function(e){e.exports={navbar:"Navbar_navbar__LAEds",scrollarea:"Navbar_scrollarea__sbhtk",body:"Navbar_body__8M1M_",groups:"Navbar_groups__4j6NE"}},42205:function(e){e.exports={group:"NavbarLinksGroup_group__Xgv_M",header:"NavbarLinksGroup_header__yNIL7",chevron:"NavbarLinksGroup_chevron__x5W5G",title:"NavbarLinksGroup_title__sFCQR",category:"NavbarLinksGroup_category__nrDId",categoryTitle:"NavbarLinksGroup_categoryTitle__GUTGd",categoryIcon:"NavbarLinksGroup_categoryIcon__qE5p8",link:"NavbarLinksGroup_link__jLgZu"}},30092:function(e){e.exports={link:"NavbarMainLink_link__eG_24",icon:"NavbarMainLink_icon__ePqig",external:"NavbarMainLink_external__Ko9pq",label:"NavbarMainLink_label__gBi5w"}},29888:function(e){e.exports={main:"Shell_main__o5vhe"}},85128:function(e){e.exports={nextIcon:"icons_nextIcon__ZCrZ1",icon:"icons_icon__yq4dY"}},88038:function(e,t,n){e.exports=n(24069)},79894:function(e,t,n){e.exports=n(28368)},86677:function(e,t,n){e.exports=n(16250)},43218:function(e,t,n){e.exports=n(62388)},27061:function(e){var t,n,r,o=e.exports={};function i(){throw Error("setTimeout has not been defined")}function a(){throw Error("clearTimeout has not been defined")}function c(e){if(t===setTimeout)return setTimeout(e,0);if((t===i||!t)&&setTimeout)return t=setTimeout,setTimeout(e,0);try{return t(e,0)}catch(n){try{return t.call(null,e,0)}catch(n){return t.call(this,e,0)}}}!function(){try{t="function"==typeof setTimeout?setTimeout:i}catch(e){t=i}try{n="function"==typeof clearTimeout?clearTimeout:a}catch(e){n=a}}();var s=[],l=!1,u=-1;function d(){l&&r&&(l=!1,r.length?s=r.concat(s):u=-1,s.length&&p())}function p(){if(!l){var e=c(d);l=!0;for(var t=s.length;t;){for(r=s,s=[];++u1)for(var n=1;nt.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);ot.indexOf(r[o])&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n}(e,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noIsolation","inert","allowPinchZoom","as","gapMode"]),S=(n=[i,t],r=function(e){return n.forEach(function(t){return"function"==typeof t?t(e):t&&(t.current=e),t})},(o=(0,u.useState)(function(){return{value:null,callback:r,facade:{get current(){return o.value},set current(value){var e=o.value;e!==value&&(o.value=value,o.callback(value,e))}}}})[0]).callback=r,o.facade),B=l(l({},F),c);return u.createElement(u.Fragment,null,y&&u.createElement(b,{sideCar:f,removeScrollBar:h,shards:v,noIsolation:k,inert:x,setCallbacks:s,allowPinchZoom:!!w,lockRef:i,gapMode:C}),d?u.cloneElement(u.Children.only(p),l(l({},B),{ref:S})):u.createElement(void 0===E?"div":E,l({},B,{className:m,ref:S}),p))});h.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},h.classNames={fullWidth:p,zeroRight:d};var y=function(e){var t=e.sideCar,n=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&0>t.indexOf(r)&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);ot.indexOf(r[o])&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]]);return n}(e,["sideCar"]);if(!t)throw Error("Sidecar: please provide `sideCar` property to import the right car");var r=t.read();if(!r)throw Error("Sidecar medium not found");return u.createElement(r,m({},n))};y.isSideCarExport=!0;var v=function(){var e=0,t=null;return{add:function(o){if(0==e&&(t=function(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var t=r||n.nc;return t&&e.setAttribute("nonce",t),e}())){var i,a;(i=t).styleSheet?i.styleSheet.cssText=o:i.appendChild(document.createTextNode(o)),a=t,(document.head||document.getElementsByTagName("head")[0]).appendChild(a)}e++},remove:function(){--e||!t||(t.parentNode&&t.parentNode.removeChild(t),t=null)}}},b=function(){var e=v();return function(t,n){u.useEffect(function(){return e.add(t),function(){e.remove()}},[t&&n])}},k=function(){var e=b();return function(t){return e(t.styles,t.dynamic),null}},x={left:0,top:0,right:0,gap:0},w=function(e){return parseInt(e||"",10)||0},E=function(e){var t=window.getComputedStyle(document.body),n=t["padding"===e?"paddingLeft":"marginLeft"],r=t["padding"===e?"paddingTop":"marginTop"],o=t["padding"===e?"paddingRight":"marginRight"];return[w(n),w(r),w(o)]},C=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return x;var t=E(e),n=document.documentElement.clientWidth,r=window.innerWidth;return{left:t[0],top:t[1],right:t[2],gap:Math.max(0,r-n+t[2]-t[0])}},F=k(),S=function(e,t,n,r){var o=e.left,i=e.top,a=e.right,c=e.gap;return void 0===n&&(n="margin"),"\n .".concat("with-scroll-bars-hidden"," {\n overflow: hidden ").concat(r,";\n padding-right: ").concat(c,"px ").concat(r,";\n }\n body {\n overflow: hidden ").concat(r,";\n overscroll-behavior: contain;\n ").concat([t&&"position: relative ".concat(r,";"),"margin"===n&&"\n padding-left: ".concat(o,"px;\n padding-top: ").concat(i,"px;\n padding-right: ").concat(a,"px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(c,"px ").concat(r,";\n "),"padding"===n&&"padding-right: ".concat(c,"px ").concat(r,";")].filter(Boolean).join(""),"\n }\n \n .").concat(d," {\n right: ").concat(c,"px ").concat(r,";\n }\n \n .").concat(p," {\n margin-right: ").concat(c,"px ").concat(r,";\n }\n \n .").concat(d," .").concat(d," {\n right: 0 ").concat(r,";\n }\n \n .").concat(p," .").concat(p," {\n margin-right: 0 ").concat(r,";\n }\n \n body {\n ").concat("--removed-body-scroll-bar-size",": ").concat(c,"px;\n }\n")},B=function(e){var t=e.noRelative,n=e.noImportant,r=e.gapMode,o=void 0===r?"margin":r,i=u.useMemo(function(){return C(o)},[o]);return u.createElement(F,{styles:S(i,!t,o,n?"":"!important")})},j=!1;if("undefined"!=typeof window)try{var I=Object.defineProperty({},"passive",{get:function(){return j=!0,!0}});window.addEventListener("test",I,I),window.removeEventListener("test",I,I)}catch(e){j=!1}var M=!!j&&{passive:!1},D=function(e,t){var n=window.getComputedStyle(e);return"hidden"!==n[t]&&!(n.overflowY===n.overflowX&&"TEXTAREA"!==e.tagName&&"visible"===n[t])},T=function(e,t){var n=t.ownerDocument,r=t;do{if("undefined"!=typeof ShadowRoot&&r instanceof ShadowRoot&&(r=r.host),A(e,r)){var o=P(e,r);if(o[1]>o[2])return!0}r=r.parentNode}while(r&&r!==n.body);return!1},A=function(e,t){return"v"===e?D(t,"overflowY"):D(t,"overflowX")},P=function(e,t){return"v"===e?[t.scrollTop,t.scrollHeight,t.clientHeight]:[t.scrollLeft,t.scrollWidth,t.clientWidth]},R=function(e,t,n,r,o){var i,a=(i=window.getComputedStyle(t).direction,"h"===e&&"rtl"===i?-1:1),c=a*r,s=n.target,l=t.contains(s),u=!1,d=c>0,p=0,m=0;do{var f=P(e,s),g=f[0],h=f[1]-f[2]-a*g;(g||h)&&A(e,s)&&(p+=h,m+=g),s=s instanceof ShadowRoot?s.host:s.parentNode}while(!l&&s!==document.body||l&&(t.contains(s)||t===s));return d&&(o&&1>Math.abs(p)||!o&&c>p)?u=!0:!d&&(o&&1>Math.abs(m)||!o&&-c>m)&&(u=!0),u},N=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},L=function(e){return[e.deltaX,e.deltaY]},H=function(e){return e&&"current"in e?e.current:e},$=0,O=[],z=(f.useMedium(function(e){var t=u.useRef([]),n=u.useRef([0,0]),r=u.useRef(),o=u.useState($++)[0],i=u.useState(k)[0],a=u.useRef(e);u.useEffect(function(){a.current=e},[e]),u.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(o));var t=(function(e,t,n){if(n||2==arguments.length)for(var r,o=0,i=t.length;oMath.abs(l)?"h":"v";if("touches"in e&&"h"===d&&"range"===u.type)return!1;var p=T(d,u);if(!p)return!0;if(p?o=d:(o="v"===d?"h":"v",p=T(d,u)),!p)return!1;if(!r.current&&"changedTouches"in e&&(s||l)&&(r.current=o),!o)return!0;var m=r.current||o;return R(m,t,e,"h"===m?s:l,!0)},[]),s=u.useCallback(function(e){if(O.length&&O[O.length-1]===i){var n="deltaY"in e?L(e):N(e),r=t.current.filter(function(t){var r;return t.name===e.type&&(t.target===e.target||e.target===t.shadowParent)&&(r=t.delta)[0]===n[0]&&r[1]===n[1]})[0];if(r&&r.should){e.cancelable&&e.preventDefault();return}if(!r){var o=(a.current.shards||[]).map(H).filter(Boolean).filter(function(t){return t.contains(e.target)});(o.length>0?c(e,o[0]):!a.current.noIsolation)&&e.cancelable&&e.preventDefault()}}},[]),l=u.useCallback(function(e,n,r,o){var i={name:e,delta:n,target:r,should:o,shadowParent:function(e){for(var t=null;null!==e;)e instanceof ShadowRoot&&(t=e.host,e=e.host),e=e.parentNode;return t}(r)};t.current.push(i),setTimeout(function(){t.current=t.current.filter(function(e){return e!==i})},1)},[]),d=u.useCallback(function(e){n.current=N(e),r.current=void 0},[]),p=u.useCallback(function(t){l(t.type,L(t),t.target,c(t,e.lockRef.current))},[]),m=u.useCallback(function(t){l(t.type,N(t),t.target,c(t,e.lockRef.current))},[]);u.useEffect(function(){return O.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:m}),document.addEventListener("wheel",s,M),document.addEventListener("touchmove",s,M),document.addEventListener("touchstart",d,M),function(){O=O.filter(function(e){return e!==i}),document.removeEventListener("wheel",s,M),document.removeEventListener("touchmove",s,M),document.removeEventListener("touchstart",d,M)}},[]);var f=e.removeScrollBar,g=e.inert;return u.createElement(u.Fragment,null,g?u.createElement(i,{styles:"\n .block-interactivity-".concat(o," {pointer-events: none;}\n .allow-interactivity-").concat(o," {pointer-events: all;}\n")}):null,f?u.createElement(B,{gapMode:e.gapMode}):null)}),y),_=u.forwardRef(function(e,t){return u.createElement(h,l({},e,{ref:t,sideCar:z}))});_.classNames=h.classNames;var V=_},63349:function(e,t,n){"use strict";function r(e){return e.split("-")[1]}function o(e){return"y"===e?"height":"width"}function i(e){return e.split("-")[0]}function a(e){return["top","bottom"].includes(i(e))?"x":"y"}function c(e,t,n){let c,{reference:s,floating:l}=e,u=s.x+s.width/2-l.width/2,d=s.y+s.height/2-l.height/2,p=a(t),m=o(p),f=s[m]/2-l[m]/2,g="x"===p;switch(i(t)){case"top":c={x:u,y:s.y-l.height};break;case"bottom":c={x:u,y:s.y+s.height};break;case"right":c={x:s.x+s.width,y:d};break;case"left":c={x:s.x-l.width,y:d};break;default:c={x:s.x,y:s.y}}switch(r(t)){case"start":c[p]-=f*(n&&g?-1:1);break;case"end":c[p]+=f*(n&&g?-1:1)}return c}n.d(t,{JB:function(){return d},Qo:function(){return w},RR:function(){return k},cv:function(){return E},dp:function(){return B},dr:function(){return S},oo:function(){return s},uY:function(){return F},x7:function(){return g}});let s=async(e,t,n)=>{let{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:a}=n,s=i.filter(Boolean),l=await (null==a.isRTL?void 0:a.isRTL(t)),u=await a.getElementRects({reference:e,floating:t,strategy:o}),{x:d,y:p}=c(u,r,l),m=r,f={},g=0;for(let n=0;n({name:"arrow",options:e,async fn(t){let{x:n,y:i,placement:c,rects:s,platform:d,elements:p}=t,{element:g,padding:h=0}=l(e,t)||{};if(null==g)return{};let y=u(h),v={x:n,y:i},b=a(c),k=o(b),x=await d.getDimensions(g),w="y"===b,E=w?"clientHeight":"clientWidth",C=s.reference[k]+s.reference[b]-v[b]-s.floating[k],F=v[b]-s.reference[b],S=await (null==d.getOffsetParent?void 0:d.getOffsetParent(g)),B=S?S[E]:0;B&&await (null==d.isElement?void 0:d.isElement(S))||(B=p.floating[E]||s.floating[k]);let j=B/2-x[k]/2-1,I=m(y[w?"top":"left"],j),M=m(y[w?"bottom":"right"],j),D=B-x[k]-M,T=B/2-x[k]/2+(C/2-F/2),A=f(I,m(T,D)),P=null!=r(c)&&T!=A&&s.reference[k]/2-(Te.concat(t,t+"-start",t+"-end"),[]),{left:"right",right:"left",bottom:"top",top:"bottom"});function y(e){return e.replace(/left|right|bottom|top/g,e=>h[e])}let v={start:"end",end:"start"};function b(e){return e.replace(/start|end/g,e=>v[e])}let k=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,c,s,u;let{placement:d,middlewareData:m,rects:f,initialPlacement:g,platform:h,elements:v}=t,{mainAxis:k=!0,crossAxis:x=!0,fallbackPlacements:w,fallbackStrategy:E="bestFit",fallbackAxisSideDirection:C="none",flipAlignment:F=!0,...S}=l(e,t),B=i(d),j=i(g)===g,I=await (null==h.isRTL?void 0:h.isRTL(v.floating)),M=w||(j||!F?[y(g)]:function(e){let t=y(e);return[b(e),t,b(t)]}(g));w||"none"===C||M.push(...function(e,t,n,o){let a=r(e),c=function(e,t,n){let r=["left","right"],o=["right","left"];switch(e){case"top":case"bottom":return n?t?o:r:t?r:o;case"left":case"right":return t?["top","bottom"]:["bottom","top"];default:return[]}}(i(e),"start"===n,o);return a&&(c=c.map(e=>e+"-"+a),t&&(c=c.concat(c.map(b)))),c}(g,F,C,I));let D=[g,...M],T=await p(t,S),A=[],P=(null==(n=m.flip)?void 0:n.overflows)||[];if(k&&A.push(T[B]),x){let{main:e,cross:t}=function(e,t,n){void 0===n&&(n=!1);let i=r(e),c=a(e),s=o(c),l="x"===c?i===(n?"end":"start")?"right":"left":"start"===i?"bottom":"top";return t.reference[s]>t.floating[s]&&(l=y(l)),{main:l,cross:y(l)}}(d,f,I);A.push(T[e],T[t])}if(P=[...P,{placement:d,overflows:A}],!A.every(e=>e<=0)){let e=((null==(c=m.flip)?void 0:c.index)||0)+1,t=D[e];if(t)return{data:{index:e,overflows:P},reset:{placement:t}};let n=null==(s=P.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:s.placement;if(!n)switch(E){case"bestFit":{let e=null==(u=P.map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0])?void 0:u[0];e&&(n=e);break}case"initialPlacement":n=g}if(d!==n)return{reset:{placement:n}}}return{}}}};function x(e){let t=m(...e.map(e=>e.left)),n=m(...e.map(e=>e.top));return{x:t,y:n,width:f(...e.map(e=>e.right))-t,height:f(...e.map(e=>e.bottom))-n}}let w=function(e){return void 0===e&&(e={}),{name:"inline",options:e,async fn(t){let{placement:n,elements:r,rects:o,platform:c,strategy:s}=t,{padding:p=2,x:g,y:h}=l(e,t),y=Array.from(await (null==c.getClientRects?void 0:c.getClientRects(r.reference))||[]),v=function(e){let t=e.slice().sort((e,t)=>e.y-t.y),n=[],r=null;for(let e=0;er.height/2?n.push([o]):n[n.length-1].push(o),r=o}return n.map(e=>d(x(e)))}(y),b=d(x(y)),k=u(p),w=await c.getElementRects({reference:{getBoundingClientRect:function(){if(2===v.length&&v[0].left>v[1].right&&null!=g&&null!=h)return v.find(e=>g>e.left-k.left&&ge.top-k.top&&h=2){if("x"===a(n)){let e=v[0],t=v[v.length-1],r="top"===i(n),o=e.top,a=t.bottom,c=r?e.left:t.left,s=r?e.right:t.right;return{top:o,bottom:a,left:c,right:s,width:s-c,height:a-o,x:c,y:o}}let e="left"===i(n),t=f(...v.map(e=>e.right)),r=m(...v.map(e=>e.left)),o=v.filter(n=>e?n.left===r:n.right===t),c=o[0].top,s=o[o.length-1].bottom;return{top:c,bottom:s,left:r,right:t,width:t-r,height:s-c,x:r,y:c}}return b}},floating:r.floating,strategy:s});return o.reference.x!==w.reference.x||o.reference.y!==w.reference.y||o.reference.width!==w.reference.width||o.reference.height!==w.reference.height?{reset:{rects:w}}:{}}}},E=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){let{x:n,y:o}=t,c=await async function(e,t){let{placement:n,platform:o,elements:c}=e,s=await (null==o.isRTL?void 0:o.isRTL(c.floating)),u=i(n),d=r(n),p="x"===a(n),m=["left","top"].includes(u)?-1:1,f=s&&p?-1:1,g=l(t,e),{mainAxis:h,crossAxis:y,alignmentAxis:v}="number"==typeof g?{mainAxis:g,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...g};return d&&"number"==typeof v&&(y="end"===d?-1*v:v),p?{x:y*f,y:h*m}:{x:h*m,y:y*f}}(t,e);return{x:n+c.x,y:o+c.y,data:c}}}};function C(e){return"x"===e?"y":"x"}let F=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){let{x:n,y:r,placement:o}=t,{mainAxis:c=!0,crossAxis:s=!1,limiter:u={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...d}=l(e,t),g={x:n,y:r},h=await p(t,d),y=a(i(o)),v=C(y),b=g[y],k=g[v];if(c){let e="y"===y?"bottom":"right";b=f(b+h["y"===y?"top":"left"],m(b,b-h[e]))}if(s){let e="y"===v?"bottom":"right";k=f(k+h["y"===v?"top":"left"],m(k,k-h[e]))}let x=u.fn({...t,[y]:b,[v]:k});return{...x,data:{x:x.x-n,y:x.y-r}}}}},S=function(e){return void 0===e&&(e={}),{options:e,fn(t){let{x:n,y:r,placement:o,rects:c,middlewareData:s}=t,{offset:u=0,mainAxis:d=!0,crossAxis:p=!0}=l(e,t),m={x:n,y:r},f=a(o),g=C(f),h=m[f],y=m[g],v=l(u,t),b="number"==typeof v?{mainAxis:v,crossAxis:0}:{mainAxis:0,crossAxis:0,...v};if(d){let e="y"===f?"height":"width",t=c.reference[f]-c.floating[e]+b.mainAxis,n=c.reference[f]+c.reference[e]-b.mainAxis;hn&&(h=n)}if(p){var k,x;let e="y"===f?"width":"height",t=["top","left"].includes(i(o)),n=c.reference[g]-c.floating[e]+(t&&(null==(k=s.offset)?void 0:k[g])||0)+(t?0:b.crossAxis),r=c.reference[g]+c.reference[e]+(t?0:(null==(x=s.offset)?void 0:x[g])||0)-(t?b.crossAxis:0);yr&&(y=r)}return{[f]:h,[g]:y}}}},B=function(e){return void 0===e&&(e={}),{name:"size",options:e,async fn(t){let n,o;let{placement:c,rects:s,platform:u,elements:d}=t,{apply:g=()=>{},...h}=l(e,t),y=await p(t,h),v=i(c),b=r(c),k="x"===a(c),{width:x,height:w}=s.floating;"top"===v||"bottom"===v?(n=v,o=b===(await (null==u.isRTL?void 0:u.isRTL(d.floating))?"start":"end")?"left":"right"):(o=v,n="end"===b?"top":"bottom");let E=w-y[n],C=x-y[o],F=!t.middlewareData.shift,S=E,B=C;if(k){let e=x-y.left-y.right;B=b||F?m(C,e):e}else{let e=w-y.top-y.bottom;S=b||F?m(E,e):e}if(F&&!b){let e=f(y.left,0),t=f(y.right,0),n=f(y.top,0),r=f(y.bottom,0);k?B=x-2*(0!==e||0!==t?e+t:f(y.left,y.right)):S=w-2*(0!==n||0!==r?n+r:f(y.top,y.bottom))}await g({...t,availableWidth:B,availableHeight:S});let j=await u.getDimensions(d.floating);return x!==j.width||w!==j.height?{reset:{rects:!0}}:{}}}}},25772:function(e,t,n){"use strict";n.d(t,{Kx:function(){return M},Me:function(){return R},oo:function(){return N}});var r=n(63349);function o(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function i(e){return o(e).getComputedStyle(e)}function a(e){return e instanceof o(e).Node}function c(e){return a(e)?(e.nodeName||"").toLowerCase():"#document"}function s(e){return e instanceof HTMLElement||e instanceof o(e).HTMLElement}function l(e){return"undefined"!=typeof ShadowRoot&&(e instanceof o(e).ShadowRoot||e instanceof ShadowRoot)}function u(e){let{overflow:t,overflowX:n,overflowY:r,display:o}=i(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!["inline","contents"].includes(o)}function d(e){let t=p(),n=i(e);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!t&&!!n.backdropFilter&&"none"!==n.backdropFilter||!t&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some(e=>(n.willChange||"").includes(e))||["paint","layout","strict","content"].some(e=>(n.contain||"").includes(e))}function p(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function m(e){return["html","body","#document"].includes(c(e))}let f=Math.min,g=Math.max,h=Math.round,y=Math.floor,v=e=>({x:e,y:e});function b(e){let t=i(e),n=parseFloat(t.width)||0,r=parseFloat(t.height)||0,o=s(e),a=o?e.offsetWidth:n,c=o?e.offsetHeight:r,l=h(n)!==a||h(r)!==c;return l&&(n=a,r=c),{width:n,height:r,$:l}}function k(e){return e instanceof Element||e instanceof o(e).Element}function x(e){return k(e)?e:e.contextElement}function w(e){let t=x(e);if(!s(t))return v(1);let n=t.getBoundingClientRect(),{width:r,height:o,$:i}=b(t),a=(i?h(n.width):n.width)/r,c=(i?h(n.height):n.height)/o;return a&&Number.isFinite(a)||(a=1),c&&Number.isFinite(c)||(c=1),{x:a,y:c}}let E=v(0);function C(e){let t=o(e);return p()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:E}function F(e,t,n,i){var a;void 0===t&&(t=!1),void 0===n&&(n=!1);let c=e.getBoundingClientRect(),s=x(e),l=v(1);t&&(i?k(i)&&(l=w(i)):l=w(e));let u=(void 0===(a=n)&&(a=!1),!(!i||a&&i!==o(s))&&a)?C(s):v(0),d=(c.left+u.x)/l.x,p=(c.top+u.y)/l.y,m=c.width/l.x,f=c.height/l.y;if(s){let e=o(s),t=i&&k(i)?o(i):i,n=e.frameElement;for(;n&&i&&t!==e;){let e=w(n),t=n.getBoundingClientRect(),r=getComputedStyle(n),i=t.left+(n.clientLeft+parseFloat(r.paddingLeft))*e.x,a=t.top+(n.clientTop+parseFloat(r.paddingTop))*e.y;d*=e.x,p*=e.y,m*=e.x,f*=e.y,d+=i,p+=a,n=o(n).frameElement}}return(0,r.JB)({width:m,height:f,x:d,y:p})}function S(e){return k(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function B(e){var t;return null==(t=(a(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function j(e){return F(B(e)).left+S(e).scrollLeft}function I(e){if("html"===c(e))return e;let t=e.assignedSlot||e.parentNode||l(e)&&e.host||B(e);return l(t)?t.host:t}function M(e,t){var n;void 0===t&&(t=[]);let r=function e(t){let n=I(t);return m(n)?t.ownerDocument?t.ownerDocument.body:t.body:s(n)&&u(n)?n:e(n)}(e),i=r===(null==(n=e.ownerDocument)?void 0:n.body),a=o(r);return i?t.concat(a,a.visualViewport||[],u(r)?r:[]):t.concat(r,M(r))}function D(e,t,n){let a;if("viewport"===t)a=function(e,t){let n=o(e),r=B(e),i=n.visualViewport,a=r.clientWidth,c=r.clientHeight,s=0,l=0;if(i){a=i.width,c=i.height;let e=p();(!e||e&&"fixed"===t)&&(s=i.offsetLeft,l=i.offsetTop)}return{width:a,height:c,x:s,y:l}}(e,n);else if("document"===t)a=function(e){let t=B(e),n=S(e),r=e.ownerDocument.body,o=g(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),a=g(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight),c=-n.scrollLeft+j(e),s=-n.scrollTop;return"rtl"===i(r).direction&&(c+=g(t.clientWidth,r.clientWidth)-o),{width:o,height:a,x:c,y:s}}(B(e));else if(k(t))a=function(e,t){let n=F(e,!0,"fixed"===t),r=n.top+e.clientTop,o=n.left+e.clientLeft,i=s(e)?w(e):v(1);return{width:e.clientWidth*i.x,height:e.clientHeight*i.y,x:o*i.x,y:r*i.y}}(t,n);else{let n=C(e);a={...t,x:t.x-n.x,y:t.y-n.y}}return(0,r.JB)(a)}function T(e,t){return s(e)&&"fixed"!==i(e).position?t?t(e):e.offsetParent:null}function A(e,t){let n=o(e);if(!s(e))return n;let r=T(e,t);for(;r&&["table","td","th"].includes(c(r))&&"static"===i(r).position;)r=T(r,t);return r&&("html"===c(r)||"body"===c(r)&&"static"===i(r).position&&!d(r))?n:r||function(e){let t=I(e);for(;s(t)&&!m(t);){if(d(t))return t;t=I(t)}return null}(e)||n}let P={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:n,strategy:r}=e,o=s(n),i=B(n);if(n===i)return t;let a={scrollLeft:0,scrollTop:0},l=v(1),d=v(0);if((o||!o&&"fixed"!==r)&&(("body"!==c(n)||u(i))&&(a=S(n)),s(n))){let e=F(n);l=w(n),d.x=e.x+n.clientLeft,d.y=e.y+n.clientTop}return{width:t.width*l.x,height:t.height*l.y,x:t.x*l.x-a.scrollLeft*l.x+d.x,y:t.y*l.y-a.scrollTop*l.y+d.y}},getDocumentElement:B,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:o}=e,a=[..."clippingAncestors"===n?function(e,t){let n=t.get(e);if(n)return n;let r=M(e).filter(e=>k(e)&&"body"!==c(e)),o=null,a="fixed"===i(e).position,s=a?I(e):e;for(;k(s)&&!m(s);){let t=i(s),n=d(s);n||"fixed"!==t.position||(o=null),(a?!n&&!o:!n&&"static"===t.position&&o&&["absolute","fixed"].includes(o.position)||u(s)&&!n&&function e(t,n){let r=I(t);return!(r===n||!k(r)||m(r))&&("fixed"===i(r).position||e(r,n))}(e,s))?r=r.filter(e=>e!==s):o=t,s=I(s)}return t.set(e,r),r}(t,this._c):[].concat(n),r],s=a[0],l=a.reduce((e,n)=>{let r=D(t,n,o);return e.top=g(r.top,e.top),e.right=f(r.right,e.right),e.bottom=f(r.bottom,e.bottom),e.left=g(r.left,e.left),e},D(t,s,o));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},getOffsetParent:A,getElementRects:async function(e){let{reference:t,floating:n,strategy:r}=e,o=this.getOffsetParent||A,i=this.getDimensions;return{reference:function(e,t,n){let r=s(t),o=B(t),i="fixed"===n,a=F(e,!0,i,t),l={scrollLeft:0,scrollTop:0},d=v(0);if(r||!r&&!i){if(("body"!==c(t)||u(o))&&(l=S(t)),s(t)){let e=F(t,!0,i,t);d.x=e.x+t.clientLeft,d.y=e.y+t.clientTop}else o&&(d.x=j(o))}return{x:a.left+l.scrollLeft-d.x,y:a.top+l.scrollTop-d.y,width:a.width,height:a.height}}(t,await o(n),r),floating:{x:0,y:0,...await i(n)}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){return b(e)},getScale:w,isElement:k,isRTL:function(e){return"rtl"===getComputedStyle(e).direction}};function R(e,t,n,r){void 0===r&&(r={});let{ancestorScroll:o=!0,ancestorResize:i=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=r,l=x(e),u=o||i?[...l?M(l):[],...M(t)]:[];u.forEach(e=>{o&&e.addEventListener("scroll",n,{passive:!0}),i&&e.addEventListener("resize",n)});let d=l&&c?function(e,t){let n,r=null,o=B(e);function i(){clearTimeout(n),r&&r.disconnect(),r=null}return function a(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),i();let{left:l,top:u,width:d,height:p}=e.getBoundingClientRect();if(c||t(),!d||!p)return;let m={rootMargin:-y(u)+"px "+-y(o.clientWidth-(l+d))+"px "+-y(o.clientHeight-(u+p))+"px "+-y(l)+"px",threshold:g(0,f(1,s))||1},h=!0;function v(e){let t=e[0].intersectionRatio;if(t!==s){if(!h)return a();t?a(!1,t):n=setTimeout(()=>{a(!1,1e-7)},100)}h=!1}try{r=new IntersectionObserver(v,{...m,root:o.ownerDocument})}catch(e){r=new IntersectionObserver(v,m)}r.observe(e)}(!0),i}(l,n):null,p,m=-1,h=null;a&&(h=new ResizeObserver(e=>{let[r]=e;r&&r.target===l&&h&&(h.unobserve(t),cancelAnimationFrame(m),m=requestAnimationFrame(()=>{h&&h.observe(t)})),n()}),l&&!s&&h.observe(l),h.observe(t));let v=s?F(e):null;return s&&function t(){let r=F(e);v&&(r.x!==v.x||r.y!==v.y||r.width!==v.width||r.height!==v.height)&&n(),v=r,p=requestAnimationFrame(t)}(),n(),()=>{u.forEach(e=>{o&&e.removeEventListener("scroll",n),i&&e.removeEventListener("resize",n)}),d&&d(),h&&h.disconnect(),h=null,s&&cancelAnimationFrame(p)}}let N=(e,t,n)=>{let o=new Map,i={platform:P,...n},a={...i.platform,_c:o};return(0,r.oo)(e,t,{...i,platform:a})}},71670:function(e,t,n){"use strict";n.d(t,{Z:function(){return c},a:function(){return a}});var r=n(27378);let o={},i=r.createContext(o);function a(e){let t=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(i.Provider,{value:t},e.children)}},40624:function(e,t,n){"use strict";t.Z=function(){for(var e,t,n=0,r="";n({group:{"--ai-border-width":(0,p.h)(t)}})),y=(0,m.d)((e,t)=>{let n=(0,a.w)("ActionIconGroup",g,e),{className:o,style:i,classNames:l,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:y,variant:v,mod:b,...k}=(0,a.w)("ActionIconGroup",g,e),x=(0,c.y)({name:"ActionIconGroup",props:n,classes:f,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:m,varsResolver:h,rootSelector:"group"});return r.createElement(s.x,{...x("group"),ref:t,variant:v,mod:[{"data-orientation":p},b],role:"group",...k})});y.classes=f,y.displayName="@mantine/core/ActionIconGroup";let v={},b=(0,i.Z)((e,{size:t,radius:n,variant:r,gradient:i,color:a,autoContrast:c})=>{let s=e.variantColorResolver({color:a||e.primaryColor,theme:e,gradient:i,variant:r||"filled",autoContrast:c});return{root:{"--ai-size":(0,o.ap)(t,"ai-size"),"--ai-radius":void 0===n?void 0:(0,o.H5)(n),"--ai-bg":a||r?s.background:void 0,"--ai-hover":a||r?s.hover:void 0,"--ai-hover-color":a||r?s.hoverColor:void 0,"--ai-color":s.color,"--ai-bd":a||r?s.border:void 0}}}),k=(0,l.b)((e,t)=>{let n=(0,a.w)("ActionIcon",v,e),{className:o,unstyled:i,variant:l,classNames:p,styles:m,style:g,loading:h,loaderProps:y,size:k,color:x,radius:w,__staticSelector:E,gradient:C,vars:F,children:S,disabled:B,"data-disabled":j,autoContrast:I,mod:M,...D}=n,T=(0,c.y)({name:["ActionIcon",E],props:n,className:o,style:g,classes:f,classNames:p,styles:m,unstyled:i,vars:F,varsResolver:b});return r.createElement(d.k,{...T("root",{active:!B&&!h&&!j}),...D,unstyled:i,variant:l,size:k,disabled:B||h,ref:t,mod:[{loading:h,disabled:B||j},M]},r.createElement(s.x,{component:"span",...T("loader"),"aria-hidden":!0},r.createElement(u.a,{color:"var(--ai-color)",size:"calc(var(--ai-size) * 0.55)",...y})),r.createElement(s.x,{component:"span",mod:{loading:h},...T("icon")},S))});k.classes=f,k.displayName="@mantine/core/ActionIcon",k.Group=y},9136:function(e,t,n){"use strict";n.d(t,{e:function(){return l}});var r=n(27378),o=n(40624),i=n(96739),a=n(50332),Text=n(26569),c={root:"m-849cf0da"};let s={underline:"hover"},l=(0,a.b)((e,t)=>{let{underline:n,className:a,unstyled:l,mod:u,...d}=(0,i.w)("Anchor",s,e);return r.createElement(Text.x,{component:"a",ref:t,className:(0,o.Z)({[c.root]:!l},a),...d,mod:[{underline:n},u],__staticSelector:"Anchor",unstyled:l})});l.classes=c,l.displayName="@mantine/core/Anchor"},46374:function(e,t,n){"use strict";n.d(t,{V:function(){return y}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(88193),s=n(89738),l=n(91948),u=n(96739),d=n(6231),p=n(56589),m=n(20410),f={root:"m-ddec01c0",icon:"m-dde7bd57",cite:"m-dde51a35"};let g={iconSize:48},h=(0,a.Z)((e,{color:t,iconSize:n,radius:r})=>{let a=(0,c.E)({color:t||e.primaryColor,theme:e,colorScheme:"dark"}),u=(0,c.E)({color:t||e.primaryColor,theme:e,colorScheme:"light"});return{root:{"--bq-bg-light":(0,l.m)(u.value,.07),"--bq-bg-dark":(0,l.m)(a.value,.06),"--bq-bd":(0,s.p)(t,e),"--bq-icon-size":(0,o.h)(n),"--bq-radius":(0,i.H5)(r)}}}),y=(0,m.d)((e,t)=>{let n=(0,u.w)("Blockquote",g,e),{classNames:o,className:i,style:a,styles:c,unstyled:s,vars:l,children:m,icon:y,iconSize:v,cite:b,...k}=n,x=(0,d.y)({name:"Blockquote",classes:f,props:n,className:i,style:a,classNames:o,styles:c,unstyled:s,vars:l,varsResolver:h});return r.createElement(p.x,{component:"blockquote",ref:t,...x("root"),...k},y&&r.createElement("span",{...x("icon")},y),m,b&&r.createElement("cite",{...x("cite")},b))});y.classes=f,y.displayName="@mantine/core/Blockquote"},70098:function(e,t,n){"use strict";n.d(t,{O:function(){return g}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(96739),s=n(6231),l=n(56589),u=n(20410),d=n(19397),p={root:"m-fea6bf1a",burger:"m-d4fb9cad"};let m={},f=(0,i.Z)((e,{color:t,size:n,transitionDuration:r,transitionTimingFunction:i})=>({root:{"--burger-color":t?(0,a.p)(t,e):void 0,"--burger-size":(0,o.ap)(n,"burger-size"),"--burger-transition-duration":void 0===r?void 0:`${r}ms`,"--burger-transition-timing-function":i}})),g=(0,u.d)((e,t)=>{let n=(0,c.w)("Burger",m,e),{classNames:o,className:i,style:a,styles:u,unstyled:g,vars:h,opened:y,children:v,transitionDuration:b,transitionTimingFunction:k,...x}=n,w=(0,s.y)({name:"Burger",classes:p,props:n,className:i,style:a,classNames:o,styles:u,unstyled:g,vars:h,varsResolver:f});return r.createElement(d.k,{...w("root"),ref:t,...x},r.createElement(l.x,{mod:["reduce-motion",{opened:y}],...w("burger")}),v)});g.classes=p,g.displayName="@mantine/core/Burger"},8671:function(e,t,n){"use strict";n.d(t,{z:function(){return k}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(50332),u=n(42029),d=n(19397),p=n(71078),m=n(20410),f={root:"m-77c9d27d",inner:"m-80f1301b",loader:"m-a25b86ee",label:"m-811560b9",section:"m-a74036a",group:"m-80d6d844"};let g={orientation:"horizontal"},h=(0,i.Z)((e,{borderWidth:t})=>({group:{"--button-border-width":(0,p.h)(t)}})),y=(0,m.d)((e,t)=>{let n=(0,a.w)("ButtonGroup",g,e),{className:o,style:i,classNames:l,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:y,variant:v,mod:b,...k}=(0,a.w)("ButtonGroup",g,e),x=(0,c.y)({name:"ButtonGroup",props:n,classes:f,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:m,varsResolver:h,rootSelector:"group"});return r.createElement(s.x,{...x("group"),ref:t,variant:v,mod:[{"data-orientation":p},b],role:"group",...k})});y.classes=f,y.displayName="@mantine/core/ButtonGroup";let v={},b=(0,i.Z)((e,{radius:t,color:n,gradient:r,variant:i,size:a,justify:c,autoContrast:s})=>{let l=e.variantColorResolver({color:n||e.primaryColor,theme:e,gradient:r,variant:i||"filled",autoContrast:s});return{root:{"--button-justify":c,"--button-height":(0,o.ap)(a,"button-height"),"--button-padding-x":(0,o.ap)(a,"button-padding-x"),"--button-fz":a?.includes("compact")?(0,o.yv)(a.replace("compact-","")):(0,o.yv)(a),"--button-radius":void 0===t?void 0:(0,o.H5)(t),"--button-bg":n||i?l.background:void 0,"--button-hover":n||i?l.hover:void 0,"--button-color":l.color,"--button-bd":n||i?l.border:void 0,"--button-hover-color":n||i?l.hoverColor:void 0}}}),k=(0,l.b)((e,t)=>{let n=(0,a.w)("Button",v,e),{style:o,vars:i,className:l,color:p,disabled:m,children:g,leftSection:h,rightSection:y,fullWidth:k,variant:x,radius:w,loading:E,loaderProps:C,gradient:F,classNames:S,styles:B,unstyled:j,"data-disabled":I,autoContrast:M,mod:D,...T}=n,A=(0,c.y)({name:"Button",props:n,classes:f,className:l,style:o,classNames:S,styles:B,unstyled:j,vars:i,varsResolver:b}),P=!!h,R=!!y;return r.createElement(d.k,{ref:t,...A("root",{active:!m&&!E&&!I}),unstyled:j,variant:x,disabled:m||E,mod:[{disabled:m||I,loading:E,block:k,"with-left-section":P,"with-right-section":R},D],...T},r.createElement(s.x,{component:"span",...A("loader"),"aria-hidden":!0},r.createElement(u.a,{color:"var(--button-color)",size:"calc(var(--button-height) / 1.8)",...C})),r.createElement("span",{...A("inner")},h&&r.createElement(s.x,{component:"span",...A("section"),mod:{position:"left"}},h),r.createElement(s.x,{component:"span",mod:{loading:E},...A("label")},g),y&&r.createElement(s.x,{component:"span",...A("section"),mod:{position:"right"}},y)))});k.classes=f,k.displayName="@mantine/core/Button",k.Group=y},38765:function(e,t,n){"use strict";n.d(t,{P:function(){return a},n:function(){return i}});var r=n(27378),o=n(71078);function i({size:e,style:t,...n}){let i=void 0!==e?{width:(0,o.h)(e),height:(0,o.h)(e),...t}:t;return r.createElement("svg",{viewBox:"0 0 10 7",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:i,"aria-hidden":!0,...n},r.createElement("path",{d:"M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}function a({indeterminate:e,...t}){return e?r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 32 6","aria-hidden":!0,...t},r.createElement("rect",{width:"32",height:"6",fill:"currentColor",rx:"3"})):r.createElement(i,{...t})}},94193:function(e,t,n){"use strict";n.d(t,{X:function(){return I}});var r=n(27378),o=n(31002),i=n(92082),a=n(83453),c=n(88193),s=n(89738),l=n(34121),u=n(55357),d=n(96739),p=n(6231),m=n(55934),f=n(56589),g=n(20410),h=n(91549);let y=(0,r.createContext)(null),v=y.Provider,b=()=>(0,r.useContext)(y);var k=n(58675),x=n(42487),w=n(96606);let E={},C=(0,g.d)((e,t)=>{let{value:n,defaultValue:o,onChange:i,size:a,wrapperProps:c,children:s,readOnly:l,...u}=(0,d.w)("CheckboxGroup",E,e),[p,m]=(0,k.C)({value:n,defaultValue:o,finalValue:[],onChange:i});return r.createElement(v,{value:{value:p,onChange:e=>{let t=e.currentTarget.value;l||m(p.includes(t)?p.filter(e=>e!==t):[...p,t])},size:a}},r.createElement(x.I.Wrapper,{size:a,ref:t,...c,...u,labelElement:"div",__staticSelector:"CheckboxGroup"},r.createElement(w.m,{role:"group"},s)))});C.classes=x.I.Wrapper.classes,C.displayName="@mantine/core/CheckboxGroup";var F=n(38765),S={root:"m-bf2d988c",inner:"m-26062bec",input:"m-26063560",icon:"m-bf295423","input--outline":"m-215c4542"};let B={labelPosition:"right",icon:F.P},j=(0,a.Z)((e,{radius:t,color:n,size:r,iconColor:o,variant:a,autoContrast:d})=>{let p=(0,c.E)({color:n||e.primaryColor,theme:e}),m=p.isThemeColor&&void 0===p.shade?`var(--mantine-color-${p.color}-outline)`:p.color;return{root:{"--checkbox-size":(0,i.ap)(r,"checkbox-size"),"--checkbox-radius":void 0===t?void 0:(0,i.H5)(t),"--checkbox-color":"outline"===a?m:(0,s.p)(n,e),"--checkbox-icon-color":o?(0,s.p)(o,e):(0,u.o)(d,e)?(0,l.R)({color:n,theme:e}):void 0}}}),I=(0,g.d)((e,t)=>{let n=(0,d.w)("Checkbox",B,e),{classNames:i,className:a,style:c,styles:s,unstyled:l,vars:u,color:g,label:y,id:v,size:k,radius:x,wrapperProps:w,children:E,checked:C,labelPosition:F,description:I,error:M,disabled:D,variant:T,indeterminate:A,icon:P,rootRef:R,iconColor:N,onChange:L,autoContrast:H,mod:$,...O}=n,z=b(),_=k||z?.size,V=(0,p.y)({name:"Checkbox",props:n,classes:S,className:a,style:c,classNames:i,styles:s,unstyled:l,vars:u,varsResolver:j}),{styleProps:Z,rest:G}=(0,m.c)(O),W=(0,o.M)(v),q=z?{checked:z.value.includes(G.value),onChange:e=>{z.onChange(e),L?.(e)}}:{};return r.createElement(h.Z,{...V("root"),__staticSelector:"Checkbox",__stylesApiProps:n,id:W,size:_,labelPosition:F,label:y,description:I,error:M,disabled:D,classNames:i,styles:s,unstyled:l,"data-checked":q.checked||C||void 0,variant:T,ref:R,mod:$,...Z,...w},r.createElement(f.x,{...V("inner"),mod:{"data-label-position":F}},r.createElement(f.x,{component:"input",id:W,ref:t,checked:C,disabled:D,mod:{error:!!M,indeterminate:A},...V("input",{focusable:!0,variant:T}),onChange:L,...G,...q,type:"checkbox"}),r.createElement(P,{indeterminate:A,...V("icon")})))});I.classes={...S,...h.J},I.displayName="@mantine/core/Checkbox",I.Group=C},96217:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(96739),s=n(6231),l=n(50332),u=n(19397);let d=(0,r.forwardRef)(({size:e="var(--cb-icon-size, 70%)",style:t,...n},o)=>r.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{...t,width:e,height:e},ref:o,...n},r.createElement("path",{d:"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})));d.displayName="@mantine/core/CloseIcon";var p={root:"m-86a44da5","root--subtle":"m-220c80f2"};let m={variant:"subtle"},f=(0,a.Z)((e,{size:t,radius:n,iconSize:r})=>({root:{"--cb-size":(0,i.ap)(t,"cb-size"),"--cb-radius":void 0===n?void 0:(0,i.H5)(n),"--cb-icon-size":(0,o.h)(r)}})),g=(0,l.b)((e,t)=>{let n=(0,c.w)("CloseButton",m,e),{iconSize:o,children:i,vars:a,radius:l,className:g,classNames:h,style:y,styles:v,unstyled:b,"data-disabled":k,disabled:x,variant:w,icon:E,mod:C,...F}=n,S=(0,s.y)({name:"CloseButton",props:n,className:g,style:y,classes:p,classNames:h,styles:v,unstyled:b,vars:a,varsResolver:f});return r.createElement(u.k,{ref:t,...F,unstyled:b,variant:w,disabled:x,mod:[{disabled:x||k},C],...S("root",{variant:w,active:!0})},E||r.createElement(d,null),i)});g.classes=p,g.displayName="@mantine/core/CloseButton"},94998:function(e,t,n){"use strict";n.d(t,{E:function(){return m}});var r=n(27378),o=n(83453),i=n(89738),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-b183c0a2"};let d={},p=(0,o.Z)((e,{color:t})=>({root:{"--code-bg":t?(0,i.p)(t,e):void 0}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Code",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:g,color:h,block:y,variant:v,mod:b,...k}=n,x=(0,c.y)({name:"Code",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return r.createElement(s.x,{component:y?"pre":"code",variant:v,ref:t,mod:[{block:y},b],...x("root"),...k,dir:"ltr"})});m.classes=u,m.displayName="@mantine/core/Code"},26596:function(e,t,n){"use strict";n.d(t,{k:function(){return l}});var r=n(27378),o=n(71078),i=n(96739),a=n(21551),c=n(84668);let s={},l=(0,r.forwardRef)((e,t)=>{let{value:n,onChange:l,onChangeEnd:u,color:d,...p}=(0,i.w)("AlphaSlider",s,e);return r.createElement(a._,{...p,ref:t,value:n,onChange:e=>l?.(c.NM(e,2)),onChangeEnd:e=>u?.(c.NM(e,2)),maxValue:1,round:!1,"data-alpha":!0,overlays:[{backgroundImage:"linear-gradient(45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--_slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--_slider-checkers) 75%)",backgroundSize:`${(0,o.h)(8)} ${(0,o.h)(8)}`,backgroundPosition:`0 0, 0 ${(0,o.h)(4)}, ${(0,o.h)(4)} ${(0,o.h)(-4)}, ${(0,o.h)(-4)} 0`},{backgroundImage:`linear-gradient(90deg, transparent, ${d})`},{boxShadow:`rgba(0, 0, 0, .1) 0 0 0 ${(0,o.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,o.h)(4)} inset`}]})});l.displayName="@mantine/core/AlphaSlider"},80567:function(e,t,n){"use strict";n.d(t,{K:function(){return o},j:function(){return i}}),n(27378);var r=n(89871);let[o,i]=(0,r.V)(null)},36227:function(e,t,n){"use strict";n.d(t,{z:function(){return F}});var r=n(27378),o=n(58675),i=n(82591),a=n(92082),c=n(83453),s=n(96739),l=n(6231),u=n(56589),d=n(20410),p=n(16202),m=n(26596),f=n(80567),g=n(45035),h=n(84668),y=n(12333),v=n(60790),b=n(58066);function k({className:e,onChange:t,onChangeEnd:n,value:o,saturationLabel:i,focusable:a=!0,size:c,color:s,onScrubStart:l,onScrubEnd:d,...p}){let{getStyles:m}=(0,f.j)(),[h,y]=(0,r.useState)({x:o.s/100,y:1-o.v/100}),k=(0,r.useRef)(h),{ref:x}=(0,v.r)(({x:e,y:n})=>{k.current={x:e,y:n},t({s:Math.round(100*e),v:Math.round((1-n)*100)})},{onScrubEnd:()=>{let{x:e,y:t}=k.current;n({s:Math.round(100*e),v:Math.round((1-t)*100)}),d?.()},onScrubStart:l});(0,r.useEffect)(()=>{y({x:o.s/100,y:1-o.v/100})},[o.s,o.v]);let w=(e,r)=>{e.preventDefault();let o=(0,v.E)(r);t({s:Math.round(100*o.x),v:Math.round((1-o.y)*100)}),n({s:Math.round(100*o.x),v:Math.round((1-o.y)*100)})};return r.createElement(u.x,{...m("saturation"),ref:x,...p,role:"slider","aria-label":i,"aria-valuenow":h.x,"aria-valuetext":(0,g.Rt)("rgba",o),tabIndex:a?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowUp":w(e,{y:h.y-.05,x:h.x});break;case"ArrowDown":w(e,{y:h.y+.05,x:h.x});break;case"ArrowRight":w(e,{x:h.x+.05,y:h.y});break;case"ArrowLeft":w(e,{x:h.x-.05,y:h.y})}}},r.createElement("div",{...m("saturationOverlay",{style:{backgroundColor:`hsl(${o.h}, 100%, 50%)`}})}),r.createElement("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(90deg, #fff, transparent)"}})}),r.createElement("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(0deg, #000, transparent)"}})}),r.createElement(b.b,{position:h,...m("thumb",{style:{backgroundColor:s}})}))}k.displayName="@mantine/core/Saturation";let x=(0,r.forwardRef)(({className:e,datatype:t,setValue:n,onChangeEnd:o,size:i,focusable:a,data:c,swatchesPerRow:s,...l},d)=>{let m=(0,f.j)(),g=c.map((e,t)=>r.createElement(p.b,{...m.getStyles("swatch"),unstyled:m.unstyled,component:"button",type:"button",color:e,key:t,radius:"sm",onClick:()=>{n(e),o?.(e)},"aria-label":e,tabIndex:a?0:-1,"data-swatch":!0}));return r.createElement(u.x,{...m.getStyles("swatches"),ref:d,...l},g)});x.displayName="@mantine/core/Swatches";var w=n(95324);let E={swatchesPerRow:7,withPicker:!0,focusable:!0,size:"md",__staticSelector:"ColorPicker"},C=(0,c.Z)((e,{size:t,swatchesPerRow:n})=>({wrapper:{"--cp-preview-size":(0,a.ap)(t,"cp-preview-size"),"--cp-width":(0,a.ap)(t,"cp-width"),"--cp-body-spacing":(0,a.bG)(t),"--cp-swatch-size":`${100/n}%`,"--cp-thumb-size":(0,a.ap)(t,"cp-thumb-size"),"--cp-saturation-height":(0,a.ap)(t,"cp-saturation-height")}})),F=(0,d.d)((e,t)=>{let n=(0,s.w)("ColorPicker",E,e),{classNames:a,className:c,style:d,styles:v,unstyled:b,vars:F,format:S,value:B,defaultValue:j,onChange:I,onChangeEnd:M,withPicker:D,size:T,saturationLabel:A,hueLabel:P,alphaLabel:R,focusable:N,swatches:L,swatchesPerRow:H,fullWidth:$,onColorSwatchClick:O,__staticSelector:z,mod:_,...V}=n,Z=(0,l.y)({name:z,props:n,classes:w.Z,className:c,style:d,classNames:a,styles:v,unstyled:b,rootSelector:"wrapper",vars:F,varsResolver:C}),G=(0,r.useRef)(S),W=(0,r.useRef)(),q=(0,r.useRef)(-1),Y=(0,r.useRef)(!1),U="hexa"===S||"rgba"===S||"hsla"===S,[K,X,J]=(0,o.C)({value:B,defaultValue:j,finalValue:"#FFFFFF",onChange:I}),[Q,ee]=(0,r.useState)((0,h.lu)(K)),et=()=>{window.clearTimeout(q.current),Y.current=!0},en=()=>{window.clearTimeout(q.current),q.current=window.setTimeout(()=>{Y.current=!1},200)},er=e=>{ee(t=>{let n={...t,...e};return W.current=(0,g.Rt)(G.current,n),n}),X(W.current)};return(0,i.l)(()=>{(0,h.fi)(B)&&!Y.current&&ee((0,h.lu)(B))},[B]),(0,i.l)(()=>{G.current=S,X((0,g.Rt)(S,Q))},[S]),r.createElement(f.K,{value:{getStyles:Z,unstyled:b}},r.createElement(u.x,{ref:t,...Z("wrapper"),size:T,mod:[{"full-width":$},_],...V},D&&r.createElement(r.Fragment,null,r.createElement(k,{value:Q,onChange:er,onChangeEnd:({s:e,v:t})=>M?.(g.Rt(G.current,{...Q,s:e,v:t})),color:K,size:T,focusable:N,saturationLabel:A,onScrubStart:et,onScrubEnd:en}),r.createElement("div",{...Z("body")},r.createElement("div",{...Z("sliders")},r.createElement(y.Q,{value:Q.h,onChange:e=>er({h:e}),onChangeEnd:e=>M?.(g.Rt(G.current,{...Q,h:e})),size:T,focusable:N,"aria-label":P,onScrubStart:et,onScrubEnd:en}),U&&r.createElement(m.k,{value:Q.a,onChange:e=>er({a:e}),onChangeEnd:e=>{M?.(g.Rt(G.current,{...Q,a:e}))},size:T,color:(0,g.Rt)("hex",Q),focusable:N,"aria-label":R,onScrubStart:et,onScrubEnd:en})),U&&r.createElement(p.b,{color:K,radius:"sm",size:"var(--cp-preview-size)",...Z("preview")}))),Array.isArray(L)&&r.createElement(x,{data:L,swatchesPerRow:H,focusable:N,setValue:X,onChangeEnd:e=>{let t=(0,g.Rt)(S,(0,h.lu)(e));O?.(t),M?.(t),J||ee((0,h.lu)(e))}})))});F.classes=w.Z,F.displayName="@mantine/core/ColorPicker"},95324:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={wrapper:"m-fee9c77",preview:"m-9dddfbac",body:"m-bffecc3e",sliders:"m-3283bb96",thumb:"m-40d572ba",swatch:"m-d8ee6fd8",swatches:"m-5711e686",saturation:"m-202a296e",saturationOverlay:"m-11b3db02",slider:"m-d856d47d",sliderOverlay:"m-8f327113"}},21551:function(e,t,n){"use strict";n.d(t,{_:function(){return y}});var r=n(27378),o=n(60790),i=n(82591),a=n(72840),c=n(71078),s=n(2256),l=n(96739),u=n(6231),d=n(56589),p=n(20410),m=n(80567),f=n(58066),g=n(95324);let h={},y=(0,p.d)((e,t)=>{let n=(0,l.w)("ColorSlider",h,e),{classNames:p,className:y,style:v,styles:b,unstyled:k,vars:x,onChange:w,onChangeEnd:E,maxValue:C,round:F,size:S="md",focusable:B=!0,value:j,overlays:I,thumbColor:M="transparent",onScrubStart:D,onScrubEnd:T,__staticSelector:A="ColorPicker",...P}=n,R=(0,u.y)({name:A,classes:g.Z,props:n,className:y,style:v,classNames:p,styles:b,unstyled:k}),N=m.j()?.getStyles,L=N||R,H=(0,s.rZ)(),[$,O]=(0,r.useState)({y:0,x:j/C}),z=(0,r.useRef)($),_=e=>F?Math.round(e*C):e*C,{ref:V}=(0,o.r)(({x:e,y:t})=>{z.current={x:e,y:t},w?.(_(e))},{onScrubEnd:()=>{let{x:e}=z.current;E?.(_(e)),T?.()},onScrubStart:D});(0,i.l)(()=>{O({y:0,x:j/C})},[j]);let Z=(e,t)=>{e.preventDefault();let n=(0,o.E)(t);w?.(_(n.x)),E?.(_(n.x))},G=I.map((e,t)=>r.createElement("div",{...L("sliderOverlay"),style:e,key:t}));return r.createElement(d.x,{...P,ref:(0,a.Yx)(V,t),...L("slider"),role:"slider","aria-valuenow":j,"aria-valuemax":C,"aria-valuemin":0,tabIndex:B?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowRight":Z(e,{x:$.x+.05,y:$.y});break;case"ArrowLeft":Z(e,{x:$.x-.05,y:$.y})}},"data-focus-ring":H.focusRing,__vars:{"--_cp-thumb-size":`var(--cp-thumb-size-${S})`}},G,r.createElement(f.b,{position:$,...L("thumb",{style:{top:(0,c.h)(1),background:M}})}))});y.displayName="@mantine/core/ColorSlider"},12333:function(e,t,n){"use strict";n.d(t,{Q:function(){return c}});var r=n(27378),o=n(71078),i=n(96739),a=n(21551);let c=(0,r.forwardRef)((e,t)=>{let{value:n,onChange:c,onChangeEnd:s,color:l,...u}=(0,i.w)("HueSlider",{},e);return r.createElement(a._,{...u,ref:t,value:n,onChange:c,onChangeEnd:s,maxValue:360,thumbColor:`hsl(${n}, 100%, 50%)`,round:!0,"data-hue":!0,overlays:[{backgroundImage:"linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))"},{boxShadow:`rgba(0, 0, 0, .1) 0 0 0 ${(0,o.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,o.h)(4)} inset`}]})});c.displayName="@mantine/core/HueSlider"},58066:function(e,t,n){"use strict";n.d(t,{b:function(){return i}});var r=n(27378),o=n(56589);let i=(0,r.forwardRef)(({position:e,...t},n)=>r.createElement(o.x,{ref:n,__vars:{"--_thumb-y-offset":`${100*e.y}%`,"--_thumb-x-offset":`${100*e.x}%`},...t}));i.displayName="@mantine/core/ColorPickerThumb"},45035:function(e,t,n){"use strict";n.d(t,{Rt:function(){return u}});var r=n(84668);function o({h:e,s:t,v:n,a:o}){let i=e/360*6,a=t/100,c=n/100,s=Math.floor(i),l=c*(1-a),u=c*(1-(i-s)*a),d=c*(1-(1-i+s)*a),p=s%6;return{r:(0,r.NM)(255*[c,u,l,l,d,c][p]),g:(0,r.NM)(255*[d,c,c,u,l,l][p]),b:(0,r.NM)(255*[l,l,d,c,c,u][p]),a:(0,r.NM)(o,2)}}function i(e,t){let{r:n,g:i,b:a,a:c}=o(e);return t?`rgba(${n}, ${i}, ${a}, ${(0,r.NM)(c,2)})`:`rgb(${n}, ${i}, ${a})`}function a({h:e,s:t,v:n,a:o},i){let a=(200-t)*n/100,c={h:Math.round(e),s:Math.round(a>0&&a<200?t*n/100/(a<=100?a:200-a)*100:0),l:Math.round(a/2)};return i?`hsla(${c.h}, ${c.s}%, ${c.l}%, ${(0,r.NM)(o,2)})`:`hsl(${c.h}, ${c.s}%, ${c.l}%)`}function c(e){let t=e.toString(16);return t.length<2?`0${t}`:t}function s(e){let{r:t,g:n,b:r}=o(e);return`#${c(t)}${c(n)}${c(r)}`}let l={hex:s,hexa:e=>(function(e){let t=Math.round(255*e.a);return`${s(e)}${c(t)}`})(e),rgb:e=>i(e,!1),rgba:e=>i(e,!0),hsl:e=>a(e,!1),hsla:e=>a(e,!0)};function u(e,t){return t?e in l?l[e](t):l.hex(t):"#000000"}},84668:function(e,t,n){"use strict";function r(e,t=0,n=10**t){return Math.round(n*e)/n}n.d(t,{NM:function(){return r},fi:function(){return m},lu:function(){return f}});let o={grad:.9,turn:360,rad:360/(2*Math.PI)},i=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;function a(e){let t=i.exec(e);return t?function({h:e,s:t,l:n,a:r}){let o=t*((n<50?n:100-n)/100);return{h:e,s:o>0?2*o/(n+o)*100:0,v:n+o,a:r}}({h:function(e,t="deg"){return Number(e)*(o[t]||1)}(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:void 0===t[5]?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}}function c({r:e,g:t,b:n,a:o}){let i=Math.max(e,t,n),a=i-Math.min(e,t,n),c=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:r(60*(c<0?c+6:c),3),s:r(i?a/i*100:0,3),v:r(i/255*100,3),a:o}}function s(e){let t="#"===e[0]?e.slice(1):e;return 3===t.length?c({r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}):c({r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:1})}let l=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;function u(e){let t=l.exec(e);return t?c({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}}let d={hex:/^#?([0-9A-F]{3}){1,2}$/i,hexa:/^#?([0-9A-F]{4}){1,2}$/i,rgb:/^rgb\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/i,rgba:/^rgba\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/i,hsl:/hsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?%)\s*,\s*(\d+(?:\.\d+)?%)\)/i,hsla:/^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/i},p={hex:s,hexa:function(e){let t="#"===e[0]?e.slice(1):e,n=e=>r(parseInt(e,16)/255,3);if(4===t.length){let e=t.slice(0,3),r=n(t[3]+t[3]),o={...s(e),a:r};return o}let o=t.slice(0,6),i=n(t.slice(6,8)),a={...s(o),a:i};return a},rgb:u,rgba:u,hsl:a,hsla:a};function m(e){for(let[,t]of Object.entries(d))if(t.test(e))return!0;return!1}function f(e){if("string"!=typeof e)return{h:0,s:0,v:0,a:1};if("transparent"===e)return{h:0,s:0,v:0,a:0};let t=e.trim();for(let[e,n]of Object.entries(d))if(n.test(t))return p[e](t);return{h:0,s:0,v:0,a:1}}},16202:function(e,t,n){"use strict";n.d(t,{b:function(){return f}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(96739),s=n(6231),l=n(56589),u=n(50332),d={root:"m-de3d2490",colorOverlay:"m-862f3d1b",shadowOverlay:"m-98ae7f22",alphaOverlay:"m-95709ac0",childrenOverlay:"m-93e74e3"};let p={withShadow:!0},m=(0,a.Z)((e,{radius:t,size:n})=>({root:{"--cs-radius":void 0===t?void 0:(0,i.H5)(t),"--cs-size":(0,o.h)(n)}})),f=(0,u.b)((e,t)=>{let n=(0,c.w)("ColorSwatch",p,e),{classNames:o,className:i,style:a,styles:u,unstyled:f,vars:g,color:h,size:y,radius:v,withShadow:b,children:k,variant:x,...w}=(0,c.w)("ColorSwatch",p,n),E=(0,s.y)({name:"ColorSwatch",props:n,classes:d,className:i,style:a,classNames:o,styles:u,unstyled:f,vars:g,varsResolver:m});return r.createElement(l.x,{ref:t,variant:x,size:y,...E("root",{focusable:!0}),...w},r.createElement("span",{...E("alphaOverlay")}),b&&r.createElement("span",{...E("shadowOverlay")}),r.createElement("span",{...E("colorOverlay",{style:{backgroundColor:h}})}),r.createElement("span",{...E("childrenOverlay")},k))});f.classes=d,f.displayName="@mantine/core/ColorSwatch"},62443:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={dropdown:"m-88b62a41",options:"m-b2821a6e",option:"m-92253aa5",search:"m-985517d8",empty:"m-2530cd1d",header:"m-858f94bd",footer:"m-82b967cb",group:"m-254f3e4f",groupLabel:"m-2bb2e9e5",chevron:"m-2943220b",optionsDropdownOption:"m-390b5f4",optionsDropdownCheckIcon:"m-8ee53fc2"}},13685:function(e,t,n){"use strict";n.d(t,{d:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u=n(62443);let d={error:null},p=(0,i.Z)((e,{size:t})=>({chevron:{"--combobox-chevron-size":(0,o.ap)(t,"combobox-chevron-size")}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("ComboboxChevron",d,e),{size:o,error:i,style:l,className:m,classNames:f,styles:g,unstyled:h,vars:y,mod:v,...b}=n,k=(0,c.y)({name:"ComboboxChevron",classes:u.Z,props:n,style:l,className:m,classNames:f,styles:g,unstyled:h,vars:y,varsResolver:p,rootSelector:"chevron"});return r.createElement(s.x,{component:"svg",...b,...k("chevron"),size:o,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",mod:["combobox-chevron",{error:i},v],ref:t},r.createElement("path",{d:"M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))});m.classes=u.Z,m.displayName="@mantine/core/ComboboxChevron"},2161:function(e,t,n){"use strict";function r(e){return e?e.map(e=>(function e(t){return"string"==typeof t?{value:t,label:t}:"value"in t&&!("label"in t)?{value:t.value,label:t.value,disabled:t.disabled}:"number"==typeof t?{value:t.toString(),label:t.toString()}:"group"in t?{group:t.group,items:t.items.map(t=>e(t))}:t})(e)):[]}n.d(t,{R:function(){return r}})},78131:function(e,t,n){"use strict";n.d(t,{q:function(){return c}});var r=n(27378),o=n(1674),i=n(96739);let a={timeout:1e3};function c(e){let{children:t,timeout:n,value:c,...s}=(0,i.w)("CopyButton",a,e),l=(0,o.V)({timeout:n});return r.createElement(r.Fragment,null,t({copy:()=>l.copy(c),copied:l.copied,...s}))}c.displayName="@mantine/core/CopyButton"},22211:function(e,t,n){"use strict";n.d(t,{Y:function(){return l}});var r=n(27378),o=n(49134),i=n(71078);function a(e,t,n,r){return"center"===e||"center"===r?{top:t}:"end"===e?{bottom:n}:"start"===e?{top:n}:{}}function c(e,t,n,r,o){return"center"===e||"center"===r?{left:t}:"end"===e?{["ltr"===o?"right":"left"]:n}:"start"===e?{["ltr"===o?"left":"right"]:n}:{}}let s={bottom:"borderTopLeftRadius",left:"borderTopRightRadius",right:"borderBottomLeftRadius",top:"borderBottomRightRadius"},l=(0,r.forwardRef)(({position:e,arrowSize:t,arrowOffset:n,arrowRadius:l,arrowPosition:u,visible:d,arrowX:p,arrowY:m,style:f,...g},h)=>{let{dir:y}=(0,o.gm)();return d?r.createElement("div",{...g,ref:h,style:{...f,...function({position:e,arrowSize:t,arrowOffset:n,arrowRadius:r,arrowPosition:o,arrowX:l,arrowY:u,dir:d}){let[p,m="center"]=e.split("-"),f={width:(0,i.h)(t),height:(0,i.h)(t),transform:"rotate(45deg)",position:"absolute",[s[p]]:(0,i.h)(r)},g=(0,i.h)(-t/2);return"left"===p?{...f,...a(m,u,n,o),right:g,borderLeftColor:"transparent",borderBottomColor:"transparent"}:"right"===p?{...f,...a(m,u,n,o),left:g,borderRightColor:"transparent",borderTopColor:"transparent"}:"top"===p?{...f,...c(m,l,n,o,d),bottom:g,borderTopColor:"transparent",borderLeftColor:"transparent"}:"bottom"===p?{...f,...c(m,l,n,o,d),top:g,borderBottomColor:"transparent",borderRightColor:"transparent"}:{}}({position:e,arrowSize:t,arrowOffset:n,arrowRadius:l,arrowPosition:u,dir:y,arrowX:p,arrowY:m})}}):null});l.displayName="@mantine/core/FloatingArrow"},93177:function(e,t,n){"use strict";function r(e,t){if("rtl"===e&&(t.includes("right")||t.includes("left"))){let[e,n]=t.split("-"),r="right"===e?"left":"right";return void 0===n?r:`${r}-${n}`}return t}n.d(t,{_:function(){return r}})},91531:function(e,t,n){"use strict";n.d(t,{U:function(){return o}});var r=n(27378);function o({open:e,close:t,openDelay:n,closeDelay:o}){let i=(0,r.useRef)(-1),a=(0,r.useRef)(-1),c=()=>{window.clearTimeout(i.current),window.clearTimeout(a.current)};return(0,r.useEffect)(()=>c,[]),{openDropdown:()=>{c(),0===n||void 0===n?e():i.current=window.setTimeout(e,n)},closeDropdown:()=>{c(),0===o||void 0===o?t():a.current=window.setTimeout(t,o)}}}},5524:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(27378),o=n(25772),i=n(82591);function a({opened:e,floating:t,position:n,positionDependencies:a}){let[c,s]=(0,r.useState)(0);(0,r.useEffect)(()=>{if(t.refs.reference.current&&t.refs.floating.current)return(0,o.Me)(t.refs.reference.current,t.refs.floating.current,t.update)},[t.refs.reference.current,t.refs.floating.current,e,c,n]),(0,i.l)(()=>{t.update()},a),(0,i.l)(()=>{s(e=>e+1)},[e])}},47210:function(e,t,n){"use strict";n.d(t,{i:function(){return p}});var r=n(27378),o=n(55574);let i=/input|select|textarea|button|object/,a="a, input, select, textarea, button, object, [tabindex]";function c(e){let t=e.getAttribute("tabindex");return null===t&&(t=void 0),parseInt(t,10)}function s(e){let t=e.nodeName.toLowerCase(),n=!Number.isNaN(c(e)),r=i.test(t)&&!e.disabled||e instanceof HTMLAnchorElement&&e.href||n;return r&&function(e){let t=e.getAttribute("aria-hidden")||e.getAttribute("hidden")||"hidden"===e.getAttribute("type");if(t)return!1;let n=e;for(;n&&n!==document.body&&11!==n.nodeType;){if("none"===n.style.display)return!1;n=n.parentNode}return!0}(e)}function l(e){let t=c(e),n=Number.isNaN(t);return(n||t>=0)&&s(e)}var u=n(72840),d=n(513);function p({children:e,active:t=!0,refProp:n="ref"}){let i=function(e=!0){let t=(0,r.useRef)(),n=(0,r.useRef)(null),i=e=>{let t=e.querySelector("[data-autofocus]");if(!t){let n=Array.from(e.querySelectorAll(a));!(t=n.find(l)||n.find(s)||null)&&s(e)&&(t=e)}t&&t.focus({preventScroll:!0})},c=(0,r.useCallback)(r=>{if(e){if(null===r){n.current&&(n.current(),n.current=null);return}n.current=function(e,t="body > :not(script)"){let n=(0,o.k)(),r=Array.from(document.querySelectorAll(t)).map(t=>{if(t?.shadowRoot?.contains(e)||t.contains(e))return;let r=t.getAttribute("aria-hidden"),o=t.getAttribute("data-hidden"),i=t.getAttribute("data-focus-id");return t.setAttribute("data-focus-id",n),null===r||"false"===r?t.setAttribute("aria-hidden","true"):o||i||t.setAttribute("data-hidden",r),{node:t,ariaHidden:o||null}});return()=>{r.forEach(e=>{e&&n===e.node.getAttribute("data-focus-id")&&(null===e.ariaHidden?e.node.removeAttribute("aria-hidden"):e.node.setAttribute("aria-hidden",e.ariaHidden),e.node.removeAttribute("data-focus-id"),e.node.removeAttribute("data-hidden"))})}}(r),t.current!==r&&(r?(setTimeout(()=>{r.getRootNode()&&i(r)}),t.current=r):t.current=null)}},[e]);return(0,r.useEffect)(()=>{if(!e)return;t.current&&setTimeout(()=>i(t.current));let r=e=>{"Tab"===e.key&&t.current&&function(e,t){let n=Array.from(e.querySelectorAll(a)).filter(l);if(!n.length){t.preventDefault();return}let r=n[t.shiftKey?0:n.length-1],o=e.getRootNode(),i=r===o.activeElement||e===o.activeElement,c=o.activeElement,s="INPUT"===c.tagName&&"radio"===c.getAttribute("type");if(s){let e=n.filter(e=>"radio"===e.getAttribute("type")&&e.getAttribute("name")===c.getAttribute("name"));i=e.includes(r)}if(!i)return;t.preventDefault();let u=n[t.shiftKey?n.length-1:0];u&&u.focus()}(t.current,e)};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r),n.current&&n.current()}},[e]),c}(t),c=(0,u.Yx)(i,e?.ref);return(0,d.k)(e)?(0,r.cloneElement)(e,{[n]:c}):e}p.displayName="@mantine/core/FocusTrap"},22971:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-4081bf90"};let d={preventGrowOverflow:!0,gap:"md",align:"center",justify:"flex-start",wrap:"wrap"},p=(0,i.Z)((e,{grow:t,preventGrowOverflow:n,gap:r,align:i,justify:a,wrap:c},{childWidth:s})=>({root:{"--group-child-width":t&&n?s:void 0,"--group-gap":(0,o.bG)(r),"--group-align":i,"--group-justify":a,"--group-wrap":c}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Group",d,e),{classNames:i,className:l,style:m,styles:f,unstyled:g,children:h,gap:y,align:v,justify:b,wrap:k,grow:x,preventGrowOverflow:w,vars:E,variant:C,__size:F,mod:S,...B}=n,j=r.Children.toArray(h).filter(Boolean),I=j.length,M=(0,o.bG)(y??"md"),D=`calc(${100/I}% - (${M} - ${M} / ${I}))`,T=(0,c.y)({name:"Group",props:n,stylesCtx:{childWidth:D},className:l,style:m,classes:u,classNames:i,styles:f,unstyled:g,vars:E,varsResolver:p});return r.createElement(s.x,{...T("root"),ref:t,variant:C,mod:[{grow:x},S],size:F,...B},j)});m.classes=u,m.displayName="@mantine/core/Group"},26853:function(e,t,n){"use strict";n.d(t,{y:function(){return l}});var r=n(27378),o=n(96739),i=n(50332),a=n(20804),Text=n(26569);function c(e){return e.replace(/[-[\]{}()*+?.,\\^$|#]/g,"\\$&")}let s={},l=(0,i.b)((e,t)=>{let{unstyled:n,children:i,highlight:l,highlightStyles:u,color:d,...p}=(0,o.w)("Highlight",s,e),m=function(e,t){if(null==t)return[{chunk:e,highlighted:!1}];let n=Array.isArray(t)?t.map(c):c(t),r=Array.isArray(n)?n.filter(e=>e.trim().length>0).length>0:""!==n.trim();if(!r)return[{chunk:e,highlighted:!1}];let o="string"==typeof n?n.trim():n.filter(e=>0!==e.trim().length).map(e=>e.trim()).sort((e,t)=>t.length-e.length).join("|"),i=RegExp(`(${o})`,"gi"),a=e.split(i).map(e=>({chunk:e,highlighted:i.test(e)})).filter(({chunk:e})=>e);return a}(i,l);return r.createElement(Text.x,{unstyled:n,ref:t,...p,__staticSelector:"Highlight"},m.map(({chunk:e,highlighted:t},o)=>t?r.createElement(a.v,{unstyled:n,key:o,color:d,style:u,"data-highlight":e},e):r.createElement("span",{key:o},e)))});l.classes=Text.x.classes,l.displayName="@mantine/core/Highlight"},91549:function(e,t,n){"use strict";n.d(t,{Z:function(){return u},J:function(){return l}});var r=n(27378),o=n(92082),i=n(6231),a=n(56589),c=n(42487),s={root:"m-5f75b09e",body:"m-5f6e695e",labelWrapper:"m-d3ea56bb",label:"m-8ee546b8",description:"m-328f68c0",error:"m-8e8a99cc"};let l=s,u=(0,r.forwardRef)(({__staticSelector:e,__stylesApiProps:t,className:n,classNames:l,styles:u,unstyled:d,children:p,label:m,description:f,id:g,disabled:h,error:y,size:v,labelPosition:b="left",variant:k,style:x,vars:w,mod:E,...C},F)=>{let S=(0,i.y)({name:e,props:t,className:n,style:x,classes:s,classNames:l,styles:u,unstyled:d});return r.createElement(a.x,{...S("root"),ref:F,__vars:{"--label-fz":(0,o.yv)(v),"--label-lh":(0,o.ap)(v,"label-lh")},mod:[{"label-position":b},E],variant:k,size:v,...C},r.createElement("div",{...S("body")},p,r.createElement("div",{...S("labelWrapper"),"data-disabled":h||void 0},m&&r.createElement("label",{...S("label"),"data-disabled":h||void 0,htmlFor:g},m),f&&r.createElement(c.I.Description,{size:v,__inheritStyles:!1,...S("description")},f),y&&"boolean"!==y&&r.createElement(c.I.Error,{size:v,__inheritStyles:!1,...S("error")},y))))});u.displayName="@mantine/core/InlineInput"},42487:function(e,t,n){"use strict";n.d(t,{I:function(){return T}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(96739),s=n(6231),l=n(55934),u=n(56589),d=n(50332),p=n(20410),m=n(5739),f={wrapper:"m-6c018570",input:"m-8fb7ebe7",section:"m-82577fc2",placeholder:"m-88bacfd0",root:"m-46b77525",label:"m-8fdc1311",required:"m-78a94662",error:"m-8f816625",description:"m-fe47ce59"};let g={},h=(0,a.Z)((e,{size:t})=>({description:{"--input-description-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`}})),y=(0,p.d)((e,t)=>{let n=(0,c.w)("InputDescription",g,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,size:y,__staticSelector:v,__inheritStyles:b=!0,variant:k,...x}=(0,c.w)("InputDescription",g,n),w=(0,m.D)(),E=(0,s.y)({name:["InputWrapper",v],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"description",vars:p,varsResolver:h}),C=b&&w?.getStyles||E;return r.createElement(u.x,{component:"p",ref:t,variant:k,size:y,...C("description"),...x})});y.classes=f,y.displayName="@mantine/core/InputDescription";let v={},b=(0,a.Z)((e,{size:t})=>({error:{"--input-error-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`}})),k=(0,p.d)((e,t)=>{let n=(0,c.w)("InputError",v,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,size:g,__staticSelector:h,__inheritStyles:y=!0,variant:k,...x}=n,w=(0,s.y)({name:["InputWrapper",h],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"error",vars:p,varsResolver:b}),E=(0,m.D)(),C=y&&E?.getStyles||w;return r.createElement(u.x,{component:"p",ref:t,variant:k,size:g,...C("error"),...x})});k.classes=f,k.displayName="@mantine/core/InputError";let x={labelElement:"label"},w=(0,a.Z)((e,{size:t})=>({label:{"--input-label-size":(0,i.yv)(t),"--input-asterisk-color":void 0}})),E=(0,p.d)((e,t)=>{let n=(0,c.w)("InputLabel",x,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,labelElement:g,size:h,required:y,htmlFor:v,onMouseDown:b,children:k,__staticSelector:E,variant:C,mod:F,...S}=(0,c.w)("InputLabel",x,n),B=(0,s.y)({name:["InputWrapper",E],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"label",vars:p,varsResolver:w}),j=(0,m.D)(),I=j?.getStyles||B;return r.createElement(u.x,{...I("label"),component:g,variant:C,size:h,ref:t,htmlFor:"label"===g?v:void 0,mod:[{required:y},F],onMouseDown:e=>{b?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault()},...S},k,y&&r.createElement("span",{...I("required"),"aria-hidden":!0}," *"))});E.classes=f,E.displayName="@mantine/core/InputLabel";let C={},F=(0,p.d)((e,t)=>{let n=(0,c.w)("InputPlaceholder",C,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,__staticSelector:m,variant:g,error:h,mod:y,...v}=(0,c.w)("InputPlaceholder",C,n),b=(0,s.y)({name:["InputPlaceholder",m],props:n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,rootSelector:"placeholder"});return r.createElement(u.x,{...b("placeholder"),mod:[{error:!!h},y],component:"span",variant:g,ref:t,...v})});F.classes=f,F.displayName="@mantine/core/InputPlaceholder";var S=n(31002);let B={labelElement:"label",inputContainer:e=>e,inputWrapperOrder:["label","description","input","error"]},j=(0,a.Z)((e,{size:t})=>({label:{"--input-label-size":(0,i.yv)(t),"--input-asterisk-color":void 0},error:{"--input-error-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`},description:{"--input-description-size":void 0===t?void 0:`calc(${(0,i.yv)(t)} - ${(0,o.h)(2)})`}})),I=(0,p.d)((e,t)=>{let n=(0,c.w)("InputWrapper",B,e),{classNames:o,className:i,style:a,styles:l,unstyled:d,vars:p,size:g,variant:h,__staticSelector:v,inputContainer:b,inputWrapperOrder:x,label:w,error:C,description:F,labelProps:I,descriptionProps:M,errorProps:D,labelElement:T,children:A,withAsterisk:P,id:R,required:N,__stylesApiProps:L,mod:H,...$}=n,O=(0,s.y)({name:["InputWrapper",v],props:L||n,classes:f,className:i,style:a,classNames:o,styles:l,unstyled:d,vars:p,varsResolver:j}),z={size:g,variant:h,__staticSelector:v},_=(0,S.M)(R),V=D?.id||`${_}-error`,Z=M?.id||`${_}-description`,G=!!C&&"boolean"!=typeof C,W=!!F,q=`${G?V:""} ${W?Z:""}`,Y=q.trim().length>0?q.trim():void 0,U=I?.id||`${_}-label`,K=w&&r.createElement(E,{key:"label",labelElement:T,id:U,htmlFor:_,required:"boolean"==typeof P?P:N,...z,...I},w),X=W&&r.createElement(y,{key:"description",...M,...z,size:M?.size||z.size,id:M?.id||Z},F),J=r.createElement(r.Fragment,{key:"input"},b(A)),Q=G&&r.createElement(k,{...D,...z,size:D?.size||z.size,key:"error",id:D?.id||V},C),ee=x.map(e=>{switch(e){case"label":return K;case"input":return J;case"description":return X;case"error":return Q;default:return null}});return r.createElement(m.I,{value:{getStyles:O,describedBy:Y,inputId:_,labelId:U,...function(e,{hasDescription:t,hasError:n}){let r=e.findIndex(e=>"input"===e),o=e[r-1],i=e[r+1];return{offsetBottom:t&&"description"===i||n&&"error"===i,offsetTop:t&&"description"===o||n&&"error"===o}}(x,{hasDescription:W,hasError:G})}},r.createElement(u.x,{ref:t,variant:h,size:g,mod:[{error:!!C},H],...O("root"),...$},ee))});I.classes=f,I.displayName="@mantine/core/InputWrapper";let M={variant:"default",leftSectionPointerEvents:"none",rightSectionPointerEvents:"none",withAria:!0,withErrorStyles:!0},D=(0,a.Z)((e,t,n)=>({wrapper:{"--input-margin-top":n.offsetTop?"calc(var(--mantine-spacing-xs) / 2)":void 0,"--input-margin-bottom":n.offsetBottom?"calc(var(--mantine-spacing-xs) / 2)":void 0,"--input-height":(0,i.ap)(t.size,"input-height"),"--input-fz":(0,i.yv)(t.size),"--input-radius":void 0===t.radius?void 0:(0,i.H5)(t.radius),"--input-left-section-width":void 0!==t.leftSectionWidth?(0,o.h)(t.leftSectionWidth):void 0,"--input-right-section-width":void 0!==t.rightSectionWidth?(0,o.h)(t.rightSectionWidth):void 0,"--input-padding-y":t.multiline?(0,i.ap)(t.size,"input-padding-y"):void 0,"--input-left-section-pointer-events":t.leftSectionPointerEvents,"--input-right-section-pointer-events":t.rightSectionPointerEvents}})),T=(0,d.b)((e,t)=>{let n=(0,c.w)("Input",M,e),{classNames:o,className:i,style:a,styles:d,unstyled:p,required:g,__staticSelector:h,__stylesApiProps:y,size:v,wrapperProps:b,error:k,disabled:x,leftSection:w,leftSectionProps:E,leftSectionWidth:C,rightSection:F,rightSectionProps:S,rightSectionWidth:B,rightSectionPointerEvents:j,leftSectionPointerEvents:I,variant:T,vars:A,pointer:P,multiline:R,radius:N,id:L,withAria:H,withErrorStyles:$,mod:O,...z}=n,{styleProps:_,rest:V}=(0,l.c)(z),Z=(0,m.D)(),G={offsetBottom:Z?.offsetBottom,offsetTop:Z?.offsetTop},W=(0,s.y)({name:["Input",h],props:y||n,classes:f,className:i,style:a,classNames:o,styles:d,unstyled:p,stylesCtx:G,rootSelector:"wrapper",vars:A,varsResolver:D}),q=H?{required:g,disabled:x,"aria-invalid":!!k,"aria-describedby":Z?.describedBy,id:Z?.inputId||L}:{};return r.createElement(u.x,{...W("wrapper"),..._,...b,mod:[{error:!!k&&$,pointer:P,disabled:x,multiline:R,"data-with-right-section":!!F,"data-with-left-section":!!w},O],variant:T,size:v},w&&r.createElement("div",{...E,"data-position":"left",...W("section",{className:E?.className,style:E?.style})},w),r.createElement(u.x,{component:"input",...V,...q,ref:t,required:g,mod:{disabled:x,error:!!k&&$},variant:T,...W("input")}),F&&r.createElement("div",{...S,"data-position":"right",...W("section",{className:S?.className,style:S?.style})},F))});T.classes=f,T.Wrapper=I,T.Label=E,T.Error=k,T.Description=y,T.Placeholder=F,T.displayName="@mantine/core/Input"},5739:function(e,t,n){"use strict";n.d(t,{D:function(){return i},I:function(){return o}}),n(27378);var r=n(89871);let[o,i]=(0,r.V)({offsetBottom:!1,offsetTop:!1,describedBy:void 0,getStyles:null,inputId:void 0,labelId:void 0})},69859:function(e,t,n){"use strict";n.d(t,{k:function(){return i}}),n(27378);var r=n(96739),o=n(55934);function i(e,t,n){let i=(0,r.w)(e,t,n),{label:a,description:c,error:s,required:l,classNames:u,styles:d,className:p,unstyled:m,__staticSelector:f,__stylesApiProps:g,errorProps:h,labelProps:y,descriptionProps:v,wrapperProps:b,id:k,size:x,style:w,inputContainer:E,inputWrapperOrder:C,withAsterisk:F,variant:S,vars:B,mod:j,...I}=i,{styleProps:M,rest:D}=(0,o.c)(I),T={label:a,description:c,error:s,required:l,classNames:u,className:p,__staticSelector:f,__stylesApiProps:g||i,errorProps:h,labelProps:y,descriptionProps:v,unstyled:m,styles:d,size:x,style:w,inputContainer:E,inputWrapperOrder:C,withAsterisk:F,variant:S,id:k,mod:j,...b};return{...D,classNames:u,styles:d,unstyled:m,wrapperProps:{...T,...M},inputProps:{required:l,classNames:u,styles:d,unstyled:m,size:x,__staticSelector:f,__stylesApiProps:g||i,error:s,variant:S,id:k}}}},23163:function(e,t,n){"use strict";n.d(t,{M:function(){return s}});var r=n(27378),o=n(50332),i=n(42487),a=n(69859);let c={__staticSelector:"InputBase",withAria:!0},s=(0,o.b)((e,t)=>{let{inputProps:n,wrapperProps:o,...s}=(0,a.k)("InputBase",c,e);return r.createElement(i.I.Wrapper,{...o},r.createElement(i.I,{...n,...s,ref:t}))});s.classes={...i.I.classes,...i.I.Wrapper.classes},s.displayName="@mantine/core/InputBase"},96606:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(27378),o=n(5739);function i({children:e,role:t}){let n=(0,o.D)();return n?r.createElement("div",{role:t,"aria-labelledby":n.labelId,"aria-describedby":n.describedBy},e):r.createElement(r.Fragment,null,e)}},1358:function(e,t,n){"use strict";n.d(t,{T:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-dc6f14e2"};let d={},p=(0,i.Z)((e,{size:t})=>({root:{"--kbd-fz":(0,o.ap)(t,"kbd-fz"),"--kbd-padding":(0,o.ap)(t,"kbd-padding")}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Kbd",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:g,...h}=n,y=(0,c.y)({name:"Kbd",classes:u,props:n,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return r.createElement(s.x,{component:"kbd",ref:t,...y("root"),...h})});m.classes=u,m.displayName="@mantine/core/Kbd"},42029:function(e,t,n){"use strict";n.d(t,{a:function(){return b}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(96739),s=n(6231),l=n(56589),u=n(20410),d=n(40624),p={root:"m-5ae2e3c",barsLoader:"m-7a2bd4cd",bar:"m-870bb79","bars-loader-animation":"m-5d2b3b9d",dotsLoader:"m-4e3f22d7",dot:"m-870c4af","loader-dots-animation":"m-aac34a1",ovalLoader:"m-b34414df","oval-loader-animation":"m-f8e89c4b"};let m=(0,r.forwardRef)(({className:e,...t},n)=>r.createElement(l.x,{component:"span",className:(0,d.Z)(p.barsLoader,e),...t,ref:n},r.createElement("span",{className:p.bar}),r.createElement("span",{className:p.bar}),r.createElement("span",{className:p.bar}))),f=(0,r.forwardRef)(({className:e,...t},n)=>r.createElement(l.x,{component:"span",className:(0,d.Z)(p.dotsLoader,e),...t,ref:n},r.createElement("span",{className:p.dot}),r.createElement("span",{className:p.dot}),r.createElement("span",{className:p.dot}))),g=(0,r.forwardRef)(({className:e,...t},n)=>r.createElement(l.x,{component:"span",className:(0,d.Z)(p.ovalLoader,e),...t,ref:n})),h={bars:m,oval:g,dots:f},y={loaders:h,type:"oval"},v=(0,i.Z)((e,{size:t,color:n})=>({root:{"--loader-size":(0,o.ap)(t,"loader-size"),"--loader-color":n?(0,a.p)(n,e):void 0}})),b=(0,u.d)((e,t)=>{let n=(0,c.w)("Loader",y,e),{size:o,color:i,type:a,vars:u,className:d,style:m,classNames:f,styles:g,unstyled:h,loaders:b,variant:k,children:x,...w}=n,E=(0,s.y)({name:"Loader",props:n,classes:p,className:d,style:m,classNames:f,styles:g,unstyled:h,vars:u,varsResolver:v});return x?r.createElement(l.x,{...E("root"),ref:t,...w},x):r.createElement(l.x,{...E("root"),ref:t,component:b[a],variant:k,size:o,...w})});b.defaultLoaders=h,b.classes=p,b.displayName="@mantine/core/Loader"},20804:function(e,t,n){"use strict";n.d(t,{v:function(){return f}});var r=n(27378),o=n(83453),i=n(96739),a=n(6231),c=n(56589),s=n(20410),l=n(88193);function u({color:e,theme:t,defaultShade:n}){let r=(0,l.E)({color:e,theme:t});return r.isThemeColor?void 0===r.shade?`var(--mantine-color-${r.color}-${n})`:`var(${r.variable})`:e}var d={root:"m-bcb3f3c2"};let p={color:"yellow"},m=(0,o.Z)((e,{color:t})=>({root:{"--mark-bg-dark":u({color:t,theme:e,defaultShade:5}),"--mark-bg-light":u({color:t,theme:e,defaultShade:2})}})),f=(0,s.d)((e,t)=>{let n=(0,i.w)("Mark",p,e),{classNames:o,className:s,style:l,styles:u,unstyled:f,vars:g,color:h,variant:y,...v}=n,b=(0,a.y)({name:"Mark",props:n,className:s,style:l,classes:d,classNames:o,styles:u,unstyled:f,vars:g,varsResolver:m});return r.createElement(c.x,{component:"mark",ref:t,variant:y,...b("root"),...v})});f.classes=d,f.displayName="@mantine/core/Mark"},82409:function(e,t,n){"use strict";n.d(t,{v:function(){return H}});var r=n(27378),o=n(58675),i=n(82591),a=n(98783),c=n(5564),s=n(6231),l=n(96739),u=n(91531),d=n(63433),p=n(71656);let[m,f]=(0,p.R)("Menu component was not found in the tree");var g=n(56589),h=n(20410),y={dropdown:"m-dc9b7c9f",label:"m-9bfac126",divider:"m-efdf90cb",item:"m-99ac2aa1",itemLabel:"m-5476e0d3",itemSection:"m-8b75e504"};let v={},b=(0,h.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,...s}=(0,l.w)("MenuDivider",v,e),u=f();return r.createElement(g.x,{ref:t,...u.getStyles("divider",{className:o,style:i,styles:a,classNames:n}),...s})});b.classes=y,b.displayName="@mantine/core/MenuDivider";var k=n(72840),x=n(41664);let w={},E=(0,h.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,onMouseEnter:s,onMouseLeave:u,children:p,...m}=(0,l.w)("MenuDropdown",w,e),g=(0,r.useRef)(null),h=f(),y=(0,x.x)(s,()=>("hover"===h.trigger||"click-hover"===h.trigger)&&h.openDropdown()),v=(0,x.x)(u,()=>("hover"===h.trigger||"click-hover"===h.trigger)&&h.closeDropdown());return r.createElement(d.J.Dropdown,{...m,onMouseEnter:y,onMouseLeave:v,role:"menu","aria-orientation":"vertical",ref:(0,k.Yx)(t,g),...h.getStyles("dropdown",{className:o,style:i,styles:a,classNames:n,withStaticClass:!1}),tabIndex:-1,"data-menu-dropdown":!0,onKeyDown:e=>{("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.preventDefault(),g.current?.querySelectorAll("[data-menu-item]:not(:disabled)")[0]?.focus())}},r.createElement("div",{tabIndex:-1,"data-autofocus":!0}),p)});E.classes=y,E.displayName="@mantine/core/MenuDropdown";var C=n(61734),F=n(88193),S=n(2256),B=n(50332),j=n(49134),I=n(19397);let M={},D=(0,B.b)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,color:s,closeMenuOnClick:u,leftSection:d,rightSection:p,children:m,disabled:g,...h}=(0,l.w)("MenuItem",M,e),y=f(),v=(0,S.rZ)(),{dir:b}=(0,j.gm)(),w=(0,r.useRef)(),E=y.getItemIndex(w.current),B=(0,x.x)(h.onMouseLeave,()=>y.setHovered(-1)),D=(0,x.x)(h.onMouseEnter,()=>y.setHovered(y.getItemIndex(w.current))),T=(0,x.x)(h.onClick,()=>{"boolean"==typeof u?u&&y.closeDropdownImmediately():y.closeOnItemClick&&y.closeDropdownImmediately()}),A=(0,x.x)(h.onFocus,()=>y.setHovered(y.getItemIndex(w.current))),P=s?v.variantColorResolver({color:s,theme:v,variant:"light"}):void 0,R=s?(0,F.E)({color:s,theme:v}):null;return r.createElement(I.k,{...h,unstyled:y.unstyled,tabIndex:y.menuItemTabIndex,onFocus:A,...y.getStyles("item",{className:o,style:i,styles:a,classNames:n}),ref:(0,k.Yx)(w,t),role:"menuitem",disabled:g,"data-menu-item":!0,"data-disabled":g||void 0,"data-hovered":y.hovered===E||void 0,onMouseEnter:D,onMouseLeave:B,onClick:T,onKeyDown:(0,C.R)({siblingSelector:"[data-menu-item]",parentSelector:"[data-menu-dropdown]",activateOnFocus:!1,loop:y.loop,dir:b,orientation:"vertical",onKeyDown:h.onKeydown}),__vars:{"--menu-item-color":R?.isThemeColor&&R?.shade===void 0?`var(--mantine-color-${R.color}-6)`:P?.color,"--menu-item-hover":P?.hover}},d&&r.createElement("div",{...y.getStyles("itemSection",{styles:a,classNames:n}),"data-position":"left"},d),m&&r.createElement("div",{...y.getStyles("itemLabel",{styles:a,classNames:n})},m),p&&r.createElement("div",{...y.getStyles("itemSection",{styles:a,classNames:n}),"data-position":"right"},p))});D.classes=y,D.displayName="@mantine/core/MenuItem";let T={},A=(0,h.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:c,...s}=(0,l.w)("MenuLabel",T,e),u=f();return r.createElement(g.x,{ref:t,...u.getStyles("label",{className:o,style:i,styles:a,classNames:n}),...s})});A.classes=y,A.displayName="@mantine/core/MenuLabel";var P=n(513);let R={refProp:"ref"},N=(0,r.forwardRef)((e,t)=>{let{children:n,refProp:o,...i}=(0,l.w)("MenuTarget",R,e);if(!(0,P.k)(n))throw Error("Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let a=f(),c=(0,x.x)(n.props.onClick,()=>{"click"===a.trigger?a.toggleDropdown():"click-hover"!==a.trigger||(a.setOpenedViaClick(!0),a.opened||a.openDropdown())}),s=(0,x.x)(n.props.onMouseEnter,()=>("hover"===a.trigger||"click-hover"===a.trigger)&&a.openDropdown()),u=(0,x.x)(n.props.onMouseLeave,()=>{"hover"===a.trigger?a.closeDropdown():"click-hover"!==a.trigger||a.openedViaClick||a.closeDropdown()});return r.createElement(d.J.Target,{refProp:o,popupType:"menu",ref:t,...i},(0,r.cloneElement)(n,{onClick:c,onMouseEnter:s,onMouseLeave:u,"data-expanded":!!a.opened||void 0}))});N.displayName="@mantine/core/MenuTarget";let L={trapFocus:!0,closeOnItemClick:!0,clickOutsideEvents:["mousedown","touchstart","keydown"],loop:!0,trigger:"click",openDelay:0,closeDelay:100,menuItemTabIndex:-1};function H(e){let t=(0,l.w)("Menu",L,e),{children:n,onOpen:p,onClose:f,opened:g,defaultOpened:h,trapFocus:v,onChange:b,closeOnItemClick:k,loop:x,closeOnEscape:w,trigger:E,openDelay:C,closeDelay:F,classNames:S,styles:B,unstyled:j,variant:I,vars:M,menuItemTabIndex:D,...T}=t,A=(0,s.y)({name:"Menu",classes:y,props:t,classNames:S,styles:B,unstyled:j}),[P,{setHovered:R,resetHovered:N}]=function(){let[e,t]=(0,r.useState)(-1);return[e,{setHovered:t,resetHovered:()=>t(-1)}]}(),[H,$]=(0,o.C)({value:g,defaultValue:h,finalValue:!1,onChange:b}),[O,z]=(0,r.useState)(!1),_=()=>{$(!1),z(!1),H&&f?.()},V=()=>{$(!0),H||p?.()},Z=()=>{H?_():V()},{openDropdown:G,closeDropdown:W}=(0,u.U)({open:V,close:_,closeDelay:F,openDelay:C}),{resolvedClassNames:q,resolvedStyles:Y}=(0,c.h)({classNames:S,styles:B,props:t});return(0,i.l)(()=>{N()},[H]),r.createElement(m,{value:{getStyles:A,opened:H,toggleDropdown:Z,getItemIndex:e=>e?Array.from(a.p(e,"[data-menu-dropdown]")?.querySelectorAll("[data-menu-item]")||[]).findIndex(t=>t===e):null,hovered:P,setHovered:R,openedViaClick:O,setOpenedViaClick:z,closeOnItemClick:k,closeDropdown:"click"===E?_:W,openDropdown:"click"===E?V:G,closeDropdownImmediately:_,loop:x,trigger:E,unstyled:j,menuItemTabIndex:D}},r.createElement(d.J,{...T,opened:H,onChange:Z,defaultOpened:h,trapFocus:v,closeOnEscape:w,__staticSelector:"Menu",classNames:q,styles:Y,unstyled:j,variant:I},n))}H.extend=e=>e,H.classes=y,H.displayName="@mantine/core/Menu",H.Item=D,H.Label=A,H.Dropdown=E,H.Target=N,H.Divider=b},72120:function(e,t,n){"use strict";n.d(t,{u:function(){return $}});var r=n(27378),o=n(13041),i=n(96739),a=n(20410),c=n(65784),s=n(71656);let[l,u]=(0,s.R)("Modal component was not found in tree");var d={root:"m-9df02822",content:"m-54c44539",inner:"m-1f958f16",header:"m-d0e2b9cd"};let p={},m=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalBody",p,e),{classNames:o,className:a,style:s,styles:l,vars:d,...m}=n,f=u();return r.createElement(c.y,{ref:t,...f.getStyles("body",{classNames:o,style:s,styles:l,className:a}),...m})});m.classes=d,m.displayName="@mantine/core/ModalBody";var f=n(76643);let g={},h=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalCloseButton",g,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(f._,{ref:t,...p.getStyles("close",{classNames:o,style:c,styles:s,className:a}),...d})});h.classes=d,h.displayName="@mantine/core/ModalCloseButton";var y=n(71078),v=n(22344),b=n(4588);let k={},x=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalContent",k,e),{classNames:o,className:a,style:c,styles:s,vars:l,children:d,...p}=n,m=u(),f=m.scrollAreaComponent||b.Z;return r.createElement(v.G,{...m.getStyles("content",{className:a,style:c,styles:s,classNames:o}),innerProps:m.getStyles("inner",{className:a,style:c,styles:s,classNames:o}),ref:t,...p},r.createElement(f,{style:{maxHeight:`calc(100vh - (${(0,y.h)(m.yOffset)} * 2))`}},d))});x.classes=d,x.displayName="@mantine/core/ModalContent";var w=n(71281);let E={},C=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalHeader",E,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(w.o,{ref:t,...p.getStyles("header",{classNames:o,style:c,styles:s,className:a}),...d})});C.classes=d,C.displayName="@mantine/core/ModalHeader";var F=n(51382);let S={},B=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalOverlay",S,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(F.e,{ref:t,...p.getStyles("overlay",{classNames:o,style:c,styles:s,className:a}),...d})});B.classes=d,B.displayName="@mantine/core/ModalOverlay";var j=n(92082),I=n(83453),M=n(6231),D=n(45058);let T={__staticSelector:"Modal",closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),transitionProps:{duration:200,transition:"pop"},yOffset:"5dvh"},A=(0,I.Z)((e,{radius:t,size:n,yOffset:r,xOffset:o})=>({root:{"--modal-radius":void 0===t?void 0:(0,j.H5)(t),"--modal-size":(0,j.ap)(n,"modal-size"),"--modal-y-offset":(0,y.h)(r),"--modal-x-offset":(0,y.h)(o)}})),P=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalRoot",T,e),{classNames:o,className:a,style:c,styles:s,unstyled:u,vars:p,yOffset:m,scrollAreaComponent:f,radius:g,fullScreen:h,centered:y,xOffset:v,__staticSelector:b,...k}=n,x=(0,M.y)({name:b,classes:d,props:n,className:a,style:c,classNames:o,styles:s,unstyled:u,vars:p,varsResolver:A});return r.createElement(l,{value:{yOffset:m,scrollAreaComponent:f,getStyles:x}},r.createElement(D.e,{ref:t,...x("root"),"data-full-screen":h||void 0,"data-centered":y||void 0,unstyled:u,...k}))});P.classes=d,P.displayName="@mantine/core/ModalRoot";var R=n(86053);let N={},L=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalTitle",N,e),{classNames:o,className:a,style:c,styles:s,vars:l,...d}=n,p=u();return r.createElement(R.q,{ref:t,...p.getStyles("title",{classNames:o,style:c,styles:s,className:a}),...d})});L.classes=d,L.displayName="@mantine/core/ModalTitle";let H={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),transitionProps:{duration:200,transition:"pop"},withOverlay:!0,withCloseButton:!0},$=(0,a.d)((e,t)=>{let{title:n,withOverlay:o,overlayProps:a,withCloseButton:c,closeButtonProps:s,children:l,radius:u,...d}=(0,i.w)("Modal",H,e),p=!!n||c;return r.createElement(P,{ref:t,radius:u,...d},o&&r.createElement(B,{...a}),r.createElement(x,{radius:u},p&&r.createElement(C,null,n&&r.createElement(L,null,n),c&&r.createElement(h,{...s})),r.createElement(m,null,l)))});$.classes=d,$.displayName="@mantine/core/Modal",$.Root=P,$.Overlay=B,$.Content=x,$.Body=m,$.Header=C,$.Title=L,$.CloseButton=h},6959:function(e,t,n){"use strict";n.d(t,{i:function(){return o},q:function(){return i}}),n(27378);var r=n(71656);let[o,i]=(0,r.R)("ModalBase component was not found in tree")},45058:function(e,t,n){"use strict";n.d(t,{e:function(){return f}});var r=n(27378),o=n(82827),i=n(13041),a=n(92082),c=n(56589),s=n(15666),l=n(6959),u=n(31002),d=n(56617),p=n(13955),m=n(82269);let f=(0,r.forwardRef)(({keepMounted:e,opened:t,onClose:n,id:f,transitionProps:g,trapFocus:h,closeOnEscape:y,returnFocus:v,closeOnClickOutside:b,withinPortal:k,portalProps:x,lockScroll:w,children:E,zIndex:C,shadow:F,padding:S,__vars:B,unstyled:j,removeScrollProps:I,...M},D)=>{let{_id:T,titleMounted:A,bodyMounted:P,shouldLockScroll:R,setTitleMounted:N,setBodyMounted:L}=function({id:e,transitionProps:t,opened:n,trapFocus:o,closeOnEscape:i,onClose:a,returnFocus:c}){let s=(0,u.M)(e),[l,f]=(0,r.useState)(!1),[g,h]=(0,r.useState)(!1),y="number"==typeof t?.duration?t?.duration:200,v=function({opened:e,transitionDuration:t}){let[n,o]=(0,r.useState)(e),i=(0,r.useRef)(),a=(0,m.J)(),c=a?0:t;return(0,r.useEffect)(()=>(e?(o(!0),window.clearTimeout(i.current)):0===c?o(!1):i.current=window.setTimeout(()=>o(!1),c),()=>window.clearTimeout(i.current)),[e,c]),n}({opened:n,transitionDuration:y});return(0,d.s)("keydown",e=>{!o&&"Escape"===e.key&&i&&a()}),(0,p.u)({opened:n,shouldReturnFocus:o&&c}),{_id:s,titleMounted:l,bodyMounted:g,shouldLockScroll:v,setTitleMounted:f,setBodyMounted:h}}({id:f,transitionProps:g,opened:t,trapFocus:h,closeOnEscape:y,onClose:n,returnFocus:v});return r.createElement(s.q,{...x,withinPortal:k},r.createElement(l.i,{value:{opened:t,onClose:n,closeOnClickOutside:b,transitionProps:{...g,keepMounted:e},getTitleId:()=>`${T}-title`,getBodyId:()=>`${T}-body`,titleMounted:A,bodyMounted:P,setTitleMounted:N,setBodyMounted:L,trapFocus:h,closeOnEscape:y,zIndex:C,unstyled:j}},r.createElement(o.Z,{enabled:R&&w,...I},r.createElement(c.x,{ref:D,...M,__vars:{...B,"--mb-z-index":(C||(0,i.w)("modal")).toString(),"--mb-shadow":(0,a.Xj)(F),"--mb-padding":(0,a.bG)(S)}},E))))})},99643:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={title:"m-615af6c9",header:"m-b5489c3c",inner:"m-60c222c7",content:"m-fd1ab0aa",close:"m-606cb269",body:"m-5df29311"}},65784:function(e,t,n){"use strict";n.d(t,{y:function(){return s}});var r=n(27378),o=n(40624),i=n(56589),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,...t},n)=>{let s=function(){let e=(0,a.q)();return(0,r.useEffect)(()=>(e.setBodyMounted(!0),()=>e.setBodyMounted(!1)),[]),e.getBodyId()}(),l=(0,a.q)();return r.createElement(i.x,{ref:n,...t,id:s,className:(0,o.Z)({[c.Z.body]:!l.unstyled},e)})});s.displayName="@mantine/core/ModalBaseBody"},76643:function(e,t,n){"use strict";n.d(t,{_:function(){return s}});var r=n(27378),o=n(40624),i=n(96217),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,onClick:t,...n},s)=>{let l=(0,a.q)();return r.createElement(i.P,{ref:s,...n,onClick:e=>{l.onClose(),t?.(e)},className:(0,o.Z)({[c.Z.close]:!l.unstyled},e),unstyled:l.unstyled})});s.displayName="@mantine/core/ModalBaseCloseButton"},22344:function(e,t,n){"use strict";n.d(t,{G:function(){return u}});var r=n(27378),o=n(40624),i=n(47210),a=n(98477),c=n(88101),s=n(6959),l=n(99643);let u=(0,r.forwardRef)(({transitionProps:e,className:t,innerProps:n,onKeyDown:u,style:d,...p},m)=>{let f=(0,s.q)(),g=e=>{let t=e.target?.getAttribute("data-mantine-stop-propagation")!=="true";t&&"Escape"===e.key&&f.closeOnEscape&&f.onClose(),u?.(e)};return r.createElement(c.u,{mounted:f.opened,transition:"pop",...f.transitionProps,...e},e=>r.createElement("div",{...n,className:(0,o.Z)({[l.Z.inner]:!f.unstyled},n.className)},r.createElement(i.i,{active:f.opened&&f.trapFocus},r.createElement(a.X,{...p,component:"section",role:"dialog",tabIndex:-1,"aria-modal":!0,"aria-describedby":f.bodyMounted?f.getBodyId():void 0,"aria-labelledby":f.titleMounted?f.getTitleId():void 0,onKeyDown:g,ref:m,style:[d,e],className:(0,o.Z)({[l.Z.content]:!f.unstyled},t),unstyled:f.unstyled},p.children))))})},71281:function(e,t,n){"use strict";n.d(t,{o:function(){return s}});var r=n(27378),o=n(40624),i=n(56589),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,...t},n)=>{let s=(0,a.q)();return r.createElement(i.x,{component:"header",ref:n,className:(0,o.Z)({[c.Z.header]:!s.unstyled},e),...t})});s.displayName="@mantine/core/ModalBaseHeader"},51382:function(e,t,n){"use strict";n.d(t,{e:function(){return s}});var r=n(27378),o=n(7118),i=n(88101),a=n(6959);let c={duration:200,timingFunction:"ease",transition:"fade"},s=(0,r.forwardRef)(({onClick:e,transitionProps:t,style:n,...s},l)=>{let u=(0,a.q)(),d=function(e){let t=(0,a.q)();return{...c,...t.transitionProps,...e}}(t);return r.createElement(i.u,{mounted:u.opened,...d,transition:"fade"},t=>r.createElement(o.a,{ref:l,fixed:!0,style:[n,t],zIndex:u.zIndex,unstyled:u.unstyled,onClick:t=>{e?.(t),u.closeOnClickOutside&&u.onClose()},...s}))});s.displayName="@mantine/core/ModalBaseOverlay"},86053:function(e,t,n){"use strict";n.d(t,{q:function(){return s}});var r=n(27378),o=n(40624),i=n(56589),a=n(6959),c=n(99643);let s=(0,r.forwardRef)(({className:e,...t},n)=>{let s=function(){let e=(0,a.q)();return(0,r.useEffect)(()=>(e.setTitleMounted(!0),()=>e.setTitleMounted(!1)),[]),e.getTitleId()}(),l=(0,a.q)();return r.createElement(i.x,{component:"h2",ref:n,className:(0,o.Z)({[c.Z.title]:!l.unstyled},e),...t,id:s})});s.displayName="@mantine/core/ModalBaseTitle"},4588:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(27378);function o({children:e}){return r.createElement(r.Fragment,null,e)}},28764:function(e,t,n){"use strict";n.d(t,{p:function(){return d}});var r=n(27378),o=n(96739),i=n(20410),a=n(2161),c=n(13685),s=n(23163);function l({data:e}){if("group"in e){let t=e.items.map(e=>r.createElement(l,{key:e.value,data:e}));return r.createElement("optgroup",{label:e.group},t)}let{value:t,label:n,...o}=e;return r.createElement("option",{key:e.value,value:e.value,...o},e.label)}l.displayName="@mantine/core/NativeSelectOption";let u={rightSectionPointerEvents:"none"},d=(0,i.d)((e,t)=>{let{data:n,children:i,size:d,error:p,rightSection:m,unstyled:f,...g}=(0,o.w)("NativeSelect",u,e),h=(0,a.R)(n).map((e,t)=>r.createElement(l,{key:t,data:e}));return r.createElement(s.M,{component:"select",ref:t,...g,__staticSelector:"NativeSelect",size:d,pointer:!0,error:p,unstyled:f,rightSection:m||r.createElement(c.d,{size:d,error:p,unstyled:f})},i||h)});d.classes=s.M.classes,d.displayName="@mantine/core/NativeSelect"},2303:function(e,t,n){"use strict";n.d(t,{P:function(){return Notification}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(96739),s=n(6231),l=n(56589),u=n(20410),d=n(96217),p=n(42029),m={root:"m-a513464",icon:"m-a4ceffb",loader:"m-b0920b15",body:"m-a49ed24",title:"m-3feedf16",description:"m-3d733a3a",closeButton:"m-919a4d88"};let f={withCloseButton:!0},g=(0,i.Z)((e,{radius:t,color:n})=>({root:{"--notification-radius":void 0===t?void 0:(0,o.H5)(t),"--notification-color":n?(0,a.p)(n,e):void 0}})),Notification=(0,u.d)((e,t)=>{let n=(0,c.w)("Notification",f,e),{className:o,color:i,radius:a,loading:u,withCloseButton:h,withBorder:y,title:v,icon:b,children:k,onClose:x,closeButtonProps:w,classNames:E,style:C,styles:F,unstyled:S,variant:B,vars:j,mod:I,...M}=n,D=(0,s.y)({name:"Notification",classes:m,props:n,className:o,style:C,classNames:E,styles:F,unstyled:S,vars:j,varsResolver:g});return r.createElement(l.x,{...D("root"),mod:[{"data-with-icon":!!b||u,"data-with-border":y},I],ref:t,variant:B,...M,role:"alert"},b&&!u&&r.createElement("div",{...D("icon")},b),u&&r.createElement(p.a,{size:28,color:i,...D("loader")}),r.createElement("div",{...D("body")},v&&r.createElement("div",{...D("title")},v),r.createElement(l.x,{...D("description"),mod:{"data-with-title":!!v}},k)),h&&r.createElement(d.P,{iconSize:16,color:"gray",...w,unstyled:S,onClick:x,...D("closeButton")}))});Notification.classes=m,Notification.displayName="@mantine/core/Notification"},7118:function(e,t,n){"use strict";n.d(t,{a:function(){return h}});var r=n(27378),o=n(71078),i=n(13041),a=n(92082),c=n(83453),s=n(91948),l=n(96739),u=n(6231),d=n(56589),p=n(50332),m={root:"m-9814e45f"};let f={zIndex:(0,i.w)("modal")},g=(0,c.Z)((e,{gradient:t,color:n,backgroundOpacity:r,blur:i,radius:c,zIndex:l})=>({root:{"--overlay-bg":t||(void 0!==n||void 0!==r)&&(0,s.m)(n||"#000",r??.6)||void 0,"--overlay-filter":i?`blur(${(0,o.h)(i)})`:void 0,"--overlay-radius":void 0===c?void 0:(0,a.H5)(c),"--overlay-z-index":l?.toString()}})),h=(0,p.b)((e,t)=>{let n=(0,l.w)("Overlay",f,e),{classNames:o,className:i,style:a,styles:c,unstyled:s,vars:p,fixed:h,center:y,children:v,radius:b,zIndex:k,gradient:x,blur:w,color:E,backgroundOpacity:C,mod:F,...S}=n,B=(0,u.y)({name:"Overlay",props:n,classes:m,className:i,style:a,classNames:o,styles:c,unstyled:s,vars:p,varsResolver:g});return r.createElement(d.x,{ref:t,...B("root"),mod:[{center:y,fixed:h},F],...S},v)});h.classes=m,h.displayName="@mantine/core/Overlay"},98477:function(e,t,n){"use strict";n.d(t,{X:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(50332),u={root:"m-1b7284a3"};let d={},p=(0,i.Z)((e,{radius:t,shadow:n})=>({root:{"--paper-radius":void 0===t?void 0:(0,o.H5)(t),"--paper-shadow":(0,o.Xj)(n)}})),m=(0,l.b)((e,t)=>{let n=(0,a.w)("Paper",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,withBorder:g,vars:h,radius:y,shadow:v,variant:b,mod:k,...x}=n,w=(0,c.y)({name:"Paper",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return r.createElement(s.x,{ref:t,mod:[{"data-with-border":g},k],...w("root"),variant:b,...x})});m.classes=u,m.displayName="@mantine/core/Paper"},63433:function(e,t,n){"use strict";n.d(t,{J:function(){return z}});var r=n(27378),o=n(31002),i=n(93226),a=n(13041),c=n(92082),s=n(83453),l=n(96739),u=n(6231),d=n(49134),p=n(93177),m=n(71656);let[f,g]=(0,m.R)("Popover component was not found in the tree");var h=n(13955),y=n(72840),v=n(71078);let b=()=>{};var k=n(56589),x=n(20410),w=n(22211),E=n(47210),C=n(15666),F=n(88101),S={dropdown:"m-38a85659",arrow:"m-a31dc6c1"};let B={},j=(0,x.d)((e,t)=>{let n=(0,l.w)("PopoverDropdown",B,e),{className:o,style:i,vars:a,children:c,onKeyDownCapture:s,variant:u,classNames:d,styles:p,...m}=n,f=g(),x=(0,h.u)({opened:f.opened,shouldReturnFocus:f.returnFocus}),S=f.withRoles?{"aria-labelledby":f.getTargetId(),id:f.getDropdownId(),role:"dialog",tabIndex:-1}:{},j=(0,y.Yx)(t,f.floating);return f.disabled?null:r.createElement(C.q,{...f.portalProps,withinPortal:f.withinPortal},r.createElement(F.u,{mounted:f.opened,...f.transitionProps,transition:f.transitionProps?.transition||"fade",duration:f.transitionProps?.duration??150,keepMounted:f.keepMounted,exitDuration:"number"==typeof f.transitionProps?.exitDuration?f.transitionProps.exitDuration:f.transitionProps?.duration},e=>r.createElement(E.i,{active:f.trapFocus},r.createElement(k.x,{...S,...m,variant:u,ref:j,onKeyDownCapture:function(e,t={active:!0}){return"function"==typeof e&&t.active?n=>{"Escape"===n.key&&(e(n),t.onTrigger?.())}:t.onKeyDown||b}(f.onClose,{active:f.closeOnEscape,onTrigger:x,onKeyDown:s}),"data-position":f.placement,...f.getStyles("dropdown",{className:o,props:n,classNames:d,styles:p,style:[{...e,zIndex:f.zIndex,top:f.y??0,left:f.x??0,width:"target"===f.width?void 0:(0,v.h)(f.width)},i]})},c,r.createElement(w.Y,{ref:f.arrowRef,arrowX:f.arrowX,arrowY:f.arrowY,visible:f.withArrow,position:f.placement,arrowSize:f.arrowSize,arrowRadius:f.arrowRadius,arrowOffset:f.arrowOffset,arrowPosition:f.arrowPosition,...f.getStyles("arrow",{props:n,classNames:d,styles:p})})))))});j.classes=S,j.displayName="@mantine/core/PopoverDropdown";var I=n(40624),M=n(513);let D={refProp:"ref",popupType:"dialog"},T=(0,x.d)((e,t)=>{let{children:n,refProp:o,popupType:i,...a}=(0,l.w)("PopoverTarget",D,e);if(!(0,M.k)(n))throw Error("Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let c=g(),s=(0,y.Yx)(c.reference,n.ref,t),u=c.withRoles?{"aria-haspopup":i,"aria-expanded":c.opened,"aria-controls":c.getDropdownId(),id:c.getTargetId()}:{};return(0,r.cloneElement)(n,{...a,...u,...c.targetProps,className:(0,I.Z)(c.targetProps.className,a.className,n.props.className),[o]:s,...c.controlled?null:{onClick:c.onToggle}})});T.displayName="@mantine/core/PopoverTarget";var A=n(63349),P=n(95954),R=n(2216),N=n(58675),L=n(82591),H=n(5524);let $={position:"bottom",offset:8,positionDependencies:[],transitionProps:{transition:"fade",duration:150},middlewares:{flip:!0,shift:!0,inline:!1},arrowSize:7,arrowOffset:5,arrowRadius:0,arrowPosition:"side",closeOnClickOutside:!0,withinPortal:!0,closeOnEscape:!0,trapFocus:!1,withRoles:!0,returnFocus:!1,clickOutsideEvents:["mousedown","touchstart"],zIndex:(0,a.w)("popover"),__staticSelector:"Popover",width:"max-content"},O=(0,s.Z)((e,{radius:t,shadow:n})=>({dropdown:{"--popover-radius":void 0===t?void 0:(0,c.H5)(t),"--popover-shadow":(0,c.Xj)(n)}}));function z(e){let t=(0,l.w)("Popover",$,e),{children:n,position:a,offset:c,onPositionChange:s,positionDependencies:m,opened:g,transitionProps:h,width:y,middlewares:v,withArrow:b,arrowSize:k,arrowOffset:x,arrowRadius:w,arrowPosition:E,unstyled:C,classNames:F,styles:B,closeOnClickOutside:j,withinPortal:I,portalProps:M,closeOnEscape:D,clickOutsideEvents:T,trapFocus:z,onClose:_,onOpen:V,onChange:Z,zIndex:G,radius:W,shadow:q,id:Y,defaultOpened:U,__staticSelector:K,withRoles:X,disabled:J,returnFocus:Q,variant:ee,keepMounted:et,vars:en,...er}=t,eo=(0,u.y)({name:K,props:t,classes:S,classNames:F,styles:B,unstyled:C,rootSelector:"dropdown",vars:en,varsResolver:O}),ei=(0,r.useRef)(null),[ea,ec]=(0,r.useState)(null),[es,el]=(0,r.useState)(null),{dir:eu}=(0,d.gm)(),ed=(0,o.M)(Y),ep=function(e){let[t,n]=(0,N.C)({value:e.opened,defaultValue:e.defaultOpened,finalValue:!1,onChange:e.onChange}),r=(0,R.YF)({placement:e.position,middleware:function(e,t){let n=[(0,A.cv)(e.offset)];return e.middlewares?.shift&&n.push((0,A.uY)({limiter:(0,A.dr)()})),e.middlewares?.flip&&n.push((0,A.RR)()),e.middlewares?.inline&&n.push((0,A.Qo)()),n.push((0,P.x7)({element:e.arrowRef,padding:e.arrowOffset})),(e.middlewares?.size||"target"===e.width)&&n.push((0,A.dp)({apply({rects:n,availableWidth:r,availableHeight:o}){let i=t(),a=i.refs.floating.current?.style??{};e.middlewares?.size&&Object.assign(a,{maxWidth:`${r}px`,maxHeight:`${o}px`}),"target"===e.width&&Object.assign(a,{width:`${n.reference.width}px`})}})),n}(e,()=>r)});return(0,H.L)({opened:e.opened,position:e.position,positionDependencies:e.positionDependencies||[],floating:r}),(0,L.l)(()=>{e.onPositionChange?.(r.placement)},[r.placement]),(0,L.l)(()=>{e.opened?e.onOpen?.():e.onClose?.()},[e.opened]),{floating:r,controlled:"boolean"==typeof e.opened,opened:t,onClose:()=>{t&&(e.onClose?.(),n(!1))},onToggle:()=>{t?(e.onClose?.(),n(!1)):(e.onOpen?.(),n(!0))}}}({middlewares:v,width:y,position:(0,p._)(eu,a),offset:"number"==typeof c?c+(b?k/2:0):c,arrowRef:ei,arrowOffset:x,onPositionChange:s,positionDependencies:m,opened:g,defaultOpened:U,onChange:Z,onOpen:V,onClose:_});(0,i.O)(()=>j&&ep.onClose(),T,[ea,es]);let em=(0,r.useCallback)(e=>{ec(e),ep.floating.refs.setReference(e)},[ep.floating.refs.setReference]),ef=(0,r.useCallback)(e=>{el(e),ep.floating.refs.setFloating(e)},[ep.floating.refs.setFloating]);return r.createElement(f,{value:{returnFocus:Q,disabled:J,controlled:ep.controlled,reference:em,floating:ef,x:ep.floating.x,y:ep.floating.y,arrowX:ep.floating?.middlewareData?.arrow?.x,arrowY:ep.floating?.middlewareData?.arrow?.y,opened:ep.opened,arrowRef:ei,transitionProps:h,width:y,withArrow:b,arrowSize:k,arrowOffset:x,arrowRadius:w,arrowPosition:E,placement:ep.floating.placement,trapFocus:z,withinPortal:I,portalProps:M,zIndex:G,radius:W,shadow:q,closeOnEscape:D,onClose:ep.onClose,onToggle:ep.onToggle,getTargetId:()=>`${ed}-target`,getDropdownId:()=>`${ed}-dropdown`,withRoles:X,targetProps:er,__staticSelector:K,classNames:F,styles:B,unstyled:C,variant:ee,keepMounted:et,getStyles:eo}},n)}z.Target=T,z.Dropdown=j,z.displayName="@mantine/core/Popover",z.extend=e=>e},15666:function(e,t,n){"use strict";n.d(t,{q:function(){return i}});var r=n(27378),o=n(7727);function i({withinPortal:e=!0,children:t,...n}){return e?r.createElement(o.h,{...n},t):r.createElement(r.Fragment,null,t)}i.displayName="@mantine/core/OptionalPortal"},7727:function(e,t,n){"use strict";n.d(t,{h:function(){return l}});var r=n(27378),o=n(31542),i=n(62849),a=n(72840),c=n(96739);let s={},l=(0,r.forwardRef)((e,t)=>{let{children:n,target:l,...u}=(0,c.w)("Portal",s,e),[d,p]=(0,r.useState)(!1),m=(0,r.useRef)(null);return((0,i.Y)(()=>(p(!0),m.current=l?"string"==typeof l?document.querySelector(l):l:function(e){let t=document.createElement("div");return t.setAttribute("data-portal","true"),"string"==typeof e.className&&t.classList.add(...e.className.split(" ").filter(Boolean)),"object"==typeof e.style&&Object.assign(t.style,e.style),"string"==typeof e.id&&t.setAttribute("id",e.id),t}(u),(0,a.kR)(t,m.current),!l&&m.current&&document.body.appendChild(m.current),()=>{!l&&m.current&&document.body.removeChild(m.current)}),[l]),d&&m.current)?(0,o.createPortal)(r.createElement(r.Fragment,null,n),m.current):null});l.displayName="@mantine/core/Portal"},49849:function(e,t,n){"use strict";n.d(t,{x:function(){return G}});var r=n(27378),o=n(71078),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u=n(71656);let[d,p]=(0,u.R)("ScrollArea.Root component was not found in tree");function m(e){let t=(0,r.useRef)(e);return(0,r.useEffect)(()=>{t.current=e}),(0,r.useMemo)(()=>(...e)=>t.current?.(...e),[])}var f=n(62849);function g(e,t){let n=m(t);(0,f.Y)(()=>{let t=0;if(e){let r=new ResizeObserver(()=>{cancelAnimationFrame(t),t=window.requestAnimationFrame(n)});return r.observe(e),()=>{window.cancelAnimationFrame(t),r.unobserve(e)}}},[e,n])}let h=r.forwardRef((e,t)=>{let{style:n,...o}=e,i=p(),[a,c]=r.useState(0),[s,l]=r.useState(0),u=!!(a&&s);return g(i.scrollbarX,()=>{let e=i.scrollbarX?.offsetHeight||0;i.onCornerHeightChange(e),l(e)}),g(i.scrollbarY,()=>{let e=i.scrollbarY?.offsetWidth||0;i.onCornerWidthChange(e),c(e)}),u?r.createElement("div",{...o,ref:t,style:{...n,width:a,height:s}}):null}),y=r.forwardRef((e,t)=>{let n=p(),o=!!(n.scrollbarX&&n.scrollbarY),i="scroll"!==n.type&&o;return i?r.createElement(h,{...e,ref:t}):null});var v=n(72840);let b={scrollHideDelay:1e3,type:"hover"},k=(0,r.forwardRef)((e,t)=>{let n=(0,a.w)("ScrollAreaRoot",b,e),{type:o,scrollHideDelay:i,scrollbars:c,...l}=n,[u,p]=(0,r.useState)(null),[m,f]=(0,r.useState)(null),[g,h]=(0,r.useState)(null),[y,k]=(0,r.useState)(null),[x,w]=(0,r.useState)(null),[E,C]=(0,r.useState)(0),[F,S]=(0,r.useState)(0),[B,j]=(0,r.useState)(!1),[I,M]=(0,r.useState)(!1),D=(0,v.Yx)(t,e=>p(e));return r.createElement(d,{value:{type:o,scrollHideDelay:i,scrollArea:u,viewport:m,onViewportChange:f,content:g,onContentChange:h,scrollbarX:y,onScrollbarXChange:k,scrollbarXEnabled:B,onScrollbarXEnabledChange:j,scrollbarY:x,onScrollbarYChange:w,scrollbarYEnabled:I,onScrollbarYEnabledChange:M,onCornerWidthChange:C,onCornerHeightChange:S}},r.createElement(s.x,{...l,ref:D,__vars:{"--sa-corner-width":"xy"!==c?"0px":`${E}px`,"--sa-corner-height":"xy"!==c?"0px":`${F}px`}}))});function x(e,t){let n=m(e),o=(0,r.useRef)(0);return(0,r.useEffect)(()=>()=>window.clearTimeout(o.current),[]),(0,r.useCallback)(()=>{window.clearTimeout(o.current),o.current=window.setTimeout(n,t)},[n,t])}k.displayName="@mantine/core/ScrollAreaRoot";var w=n(49134);function E(e,t){let n=e/t;return Number.isNaN(n)?0:n}function C(e){let t=E(e.viewport,e.content),n=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,r=(e.scrollbar.size-n)*t;return Math.max(r,18)}function F(e,t){return n=>{if(e[0]===e[1]||t[0]===t[1])return t[0];let r=(t[1]-t[0])/(e[1]-e[0]);return t[0]+r*(n-e[0])}}function S(e,t,n="ltr"){let r=C(t),o=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,i=t.scrollbar.size-o,a=t.content-t.viewport,c=function(e,[t,n]){return Math.min(n,Math.max(t,e))}(e,"ltr"===n?[0,a]:[-1*a,0]),s=F([0,a],[0,i-r]);return s(c)}function B(e){return e?parseInt(e,10):0}function j(e,t,{checkForDefaultPrevented:n=!0}={}){return r=>{e?.(r),!1!==n&&r.defaultPrevented||t?.(r)}}let[I,M]=(0,u.R)("ScrollAreaScrollbar was not found in tree"),D=(0,r.forwardRef)((e,t)=>{let{sizes:n,hasThumb:o,onThumbChange:i,onThumbPointerUp:a,onThumbPointerDown:c,onThumbPositionChange:s,onDragScroll:l,onWheelScroll:u,onResize:d,...f}=e,h=p(),[y,b]=r.useState(null),k=(0,v.Yx)(t,e=>b(e)),w=r.useRef(null),E=r.useRef(""),{viewport:C}=h,F=n.content-n.viewport,S=m(u),B=m(s),M=x(d,10),D=e=>{if(w.current){let t=e.clientX-w.current.left,n=e.clientY-w.current.top;l({x:t,y:n})}};return(0,r.useEffect)(()=>{let e=e=>{let t=e.target,n=y?.contains(t);n&&S(e,F)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})},[C,y,F,S]),(0,r.useEffect)(B,[n,B]),g(y,M),g(h.content,M),r.createElement(I,{value:{scrollbar:y,hasThumb:o,onThumbChange:m(i),onThumbPointerUp:m(a),onThumbPositionChange:B,onThumbPointerDown:m(c)}},r.createElement("div",{...f,ref:k,style:{position:"absolute",...f.style},onPointerDown:j(e.onPointerDown,e=>{if(0===e.button){let t=e.target;t.setPointerCapture(e.pointerId),w.current=y.getBoundingClientRect(),E.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",D(e)}}),onPointerMove:j(e.onPointerMove,D),onPointerUp:j(e.onPointerUp,e=>{let t=e.target;t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=E.current,w.current=null})}))}),T=(0,r.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:o,style:i,...a}=e,c=p(),[s,l]=(0,r.useState)(),u=(0,r.useRef)(null),d=(0,v.Yx)(t,u,c.onScrollbarXChange);return(0,r.useEffect)(()=>{u.current&&l(getComputedStyle(u.current))},[u]),r.createElement(D,{"data-orientation":"horizontal",...a,ref:d,sizes:n,style:{...i,"--sa-thumb-width":`${C(n)}px`},onThumbPointerDown:t=>e.onThumbPointerDown(t.x),onDragScroll:t=>e.onDragScroll(t.x),onWheelScroll:(t,n)=>{if(c.viewport){let r=c.viewport.scrollLeft+t.deltaX;e.onWheelScroll(r),r>0&&r{u.current&&c.viewport&&s&&o({content:c.viewport.scrollWidth,viewport:c.viewport.offsetWidth,scrollbar:{size:u.current.clientWidth,paddingStart:B(s.paddingLeft),paddingEnd:B(s.paddingRight)}})}})}),A=(0,r.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:o,style:i,...a}=e,c=p(),[s,l]=r.useState(),u=(0,r.useRef)(null),d=(0,v.Yx)(t,u,c.onScrollbarYChange);return(0,r.useEffect)(()=>{u.current&&l(getComputedStyle(u.current))},[u]),r.createElement(D,{...a,"data-orientation":"vertical",ref:d,sizes:n,style:{"--sa-thumb-height":`${C(n)}px`,...i},onThumbPointerDown:t=>e.onThumbPointerDown(t.y),onDragScroll:t=>e.onDragScroll(t.y),onWheelScroll:(t,n)=>{if(c.viewport){let r=c.viewport.scrollTop+t.deltaY;e.onWheelScroll(r),r>0&&r{u.current&&c.viewport&&s&&o({content:c.viewport.scrollHeight,viewport:c.viewport.offsetHeight,scrollbar:{size:u.current.clientHeight,paddingStart:B(s.paddingTop),paddingEnd:B(s.paddingBottom)}})}})}),P=(0,r.forwardRef)((e,t)=>{let{orientation:n="vertical",...o}=e,{dir:i}=(0,w.gm)(),a=p(),c=(0,r.useRef)(null),s=(0,r.useRef)(0),[l,u]=(0,r.useState)({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),d=E(l.viewport,l.content),m={...o,sizes:l,onSizesChange:u,hasThumb:!!(d>0&&d<1),onThumbChange:e=>{c.current=e},onThumbPointerUp:()=>{s.current=0},onThumbPointerDown:e=>{s.current=e}},f=(e,t)=>(function(e,t,n,r="ltr"){let o=C(n),i=t||o/2,a=n.scrollbar.paddingStart+i,c=n.scrollbar.size-n.scrollbar.paddingEnd-(o-i),s=n.content-n.viewport,l=F([a,c],"ltr"===r?[0,s]:[-1*s,0]);return l(e)})(e,s.current,l,t);return"horizontal"===n?r.createElement(T,{...m,ref:t,onThumbPositionChange:()=>{if(a.viewport&&c.current){let e=a.viewport.scrollLeft,t=S(e,l,i);c.current.style.transform=`translate3d(${t}px, 0, 0)`}},onWheelScroll:e=>{a.viewport&&(a.viewport.scrollLeft=e)},onDragScroll:e=>{a.viewport&&(a.viewport.scrollLeft=f(e,i))}}):"vertical"===n?r.createElement(A,{...m,ref:t,onThumbPositionChange:()=>{if(a.viewport&&c.current){let e=a.viewport.scrollTop,t=S(e,l);c.current.style.transform=`translate3d(0, ${t}px, 0)`}},onWheelScroll:e=>{a.viewport&&(a.viewport.scrollTop=e)},onDragScroll:e=>{a.viewport&&(a.viewport.scrollTop=f(e))}}):null}),R=(0,r.forwardRef)((e,t)=>{let n=p(),{forceMount:o,...i}=e,[a,c]=(0,r.useState)(!1),s="horizontal"===e.orientation,l=x(()=>{if(n.viewport){let e=n.viewport.offsetWidth{let{forceMount:n,...o}=e,i=p(),[a,c]=(0,r.useState)(!1);return((0,r.useEffect)(()=>{let{scrollArea:e}=i,t=0;if(e){let n=()=>{window.clearTimeout(t),c(!0)},r=()=>{t=window.setTimeout(()=>c(!1),i.scrollHideDelay)};return e.addEventListener("pointerenter",n),e.addEventListener("pointerleave",r),()=>{window.clearTimeout(t),e.removeEventListener("pointerenter",n),e.removeEventListener("pointerleave",r)}}},[i.scrollArea,i.scrollHideDelay]),n||a)?r.createElement(R,{"data-state":a?"visible":"hidden",...o,ref:t}):null}),L=(0,r.forwardRef)((e,t)=>{let{forceMount:n,...o}=e,i=p(),a="horizontal"===e.orientation,[c,s]=(0,r.useState)("hidden"),l=x(()=>s("idle"),100);return((0,r.useEffect)(()=>{if("idle"===c){let e=window.setTimeout(()=>s("hidden"),i.scrollHideDelay);return()=>window.clearTimeout(e)}},[c,i.scrollHideDelay]),(0,r.useEffect)(()=>{let{viewport:e}=i,t=a?"scrollLeft":"scrollTop";if(e){let n=e[t],r=()=>{let r=e[t],o=n!==r;o&&(s("scrolling"),l()),n=r};return e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}},[i.viewport,a,l]),n||"hidden"!==c)?r.createElement(P,{"data-state":"hidden"===c?"hidden":"visible",...o,ref:t,onPointerEnter:j(e.onPointerEnter,()=>s("interacting")),onPointerLeave:j(e.onPointerLeave,()=>s("idle"))}):null}),H=r.forwardRef((e,t)=>{let{forceMount:n,...o}=e,i=p(),{onScrollbarXEnabledChange:a,onScrollbarYEnabledChange:c}=i,s="horizontal"===e.orientation;return r.useEffect(()=>(s?a(!0):c(!0),()=>{s?a(!1):c(!1)}),[s,a,c]),"hover"===i.type?r.createElement(N,{...o,ref:t,forceMount:n}):"scroll"===i.type?r.createElement(L,{...o,ref:t,forceMount:n}):"auto"===i.type?r.createElement(R,{...o,ref:t,forceMount:n}):"always"===i.type?r.createElement(P,{...o,ref:t}):null}),$=(0,r.forwardRef)((e,t)=>{let{style:n,...o}=e,i=p(),a=M(),{onThumbPositionChange:c}=a,s=(0,v.Yx)(t,e=>a.onThumbChange(e)),l=(0,r.useRef)(),u=x(()=>{l.current&&(l.current(),l.current=void 0)},100);return(0,r.useEffect)(()=>{let{viewport:e}=i;if(e){let t=()=>{if(u(),!l.current){let t=function(e,t=()=>{}){let n={left:e.scrollLeft,top:e.scrollTop},r=0;return function o(){let i={left:e.scrollLeft,top:e.scrollTop},a=n.left!==i.left,c=n.top!==i.top;(a||c)&&t(),n=i,r=window.requestAnimationFrame(o)}(),()=>window.cancelAnimationFrame(r)}(e,c);l.current=t,c()}};return c(),e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}},[i.viewport,u,c]),r.createElement("div",{"data-state":a.hasThumb?"visible":"hidden",...o,ref:s,style:{width:"var(--sa-thumb-width)",height:"var(--sa-thumb-height)",...n},onPointerDownCapture:j(e.onPointerDownCapture,e=>{let t=e.target,n=t.getBoundingClientRect(),r=e.clientX-n.left,o=e.clientY-n.top;a.onThumbPointerDown({x:r,y:o})}),onPointerUp:j(e.onPointerUp,a.onThumbPointerUp)})}),O=r.forwardRef((e,t)=>{let{forceMount:n,...o}=e,i=M();return n||i.hasThumb?r.createElement($,{ref:t,...o}):null}),z=(0,r.forwardRef)(({children:e,style:t,...n},o)=>{let i=p(),a=(0,v.Yx)(o,i.onViewportChange);return r.createElement(s.x,{...n,ref:a,style:{overflowX:i.scrollbarXEnabled?"scroll":"hidden",overflowY:i.scrollbarYEnabled?"scroll":"hidden",...t}},r.createElement("div",{style:{minWidth:"100%",display:"table"},ref:i.onContentChange},e))});z.displayName="@mantine/core/ScrollAreaViewport";var _={root:"m-d57069b5",viewport:"m-c0783ff9",viewportInner:"m-f8f631dd",scrollbar:"m-c44ba933",thumb:"m-d8b5e363",corner:"m-21657268"};let V={scrollHideDelay:1e3,type:"hover",scrollbars:"xy"},Z=(0,i.Z)((e,{scrollbarSize:t})=>({root:{"--scrollarea-scrollbar-size":(0,o.h)(t)}})),G=(0,l.d)((e,t)=>{let n=(0,a.w)("ScrollArea",V,e),{classNames:o,className:i,style:s,styles:l,unstyled:u,scrollbarSize:d,vars:p,type:m,scrollHideDelay:f,viewportProps:g,viewportRef:h,onScrollPositionChange:v,children:b,offsetScrollbars:x,scrollbars:w,...E}=n,[C,F]=(0,r.useState)(!1),S=(0,c.y)({name:"ScrollArea",props:n,classes:_,className:i,style:s,classNames:o,styles:l,unstyled:u,vars:p,varsResolver:Z});return r.createElement(k,{type:"never"===m?"always":m,scrollHideDelay:f,ref:t,scrollbars:w,...S("root"),...E},r.createElement(z,{...g,...S("viewport"),ref:h,"data-offset-scrollbars":!0===x?"xy":x||void 0,"data-scrollbars":w||void 0,onScroll:"function"==typeof v?({currentTarget:e})=>v({x:e.scrollLeft,y:e.scrollTop}):void 0},b),("xy"===w||"x"===w)&&r.createElement(H,{...S("scrollbar"),orientation:"horizontal","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},r.createElement(O,{...S("thumb")})),("xy"===w||"y"===w)&&r.createElement(H,{...S("scrollbar"),orientation:"vertical","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},r.createElement(O,{...S("thumb")})),r.createElement(y,{...S("corner"),"data-hovered":C||void 0,"data-hidden":"never"===m||void 0}))});G.displayName="@mantine/core/ScrollArea";let W=(0,l.d)((e,t)=>{let{children:n,classNames:o,styles:i,scrollbarSize:c,scrollHideDelay:l,type:u,dir:d,offsetScrollbars:p,viewportRef:m,onScrollPositionChange:f,unstyled:g,variant:h,viewportProps:y,scrollbars:v,style:b,vars:k,...x}=(0,a.w)("ScrollAreaAutosize",V,e);return r.createElement(s.x,{...x,ref:t,style:[{display:"flex",overflow:"auto"},b]},r.createElement(s.x,{style:{display:"flex",flexDirection:"column",flex:1}},r.createElement(G,{classNames:o,styles:i,scrollHideDelay:l,scrollbarSize:c,type:u,dir:d,offsetScrollbars:p,viewportRef:m,onScrollPositionChange:f,unstyled:g,variant:h,viewportProps:y,vars:k,scrollbars:v},n)))});G.classes=_,W.displayName="@mantine/core/ScrollAreaAutosize",W.classes=_,G.Autosize=W},46674:function(e,t,n){"use strict";n.d(t,{s:function(){return C}});var r=n(27378),o=n(58675),i=n(31002),a=n(88936),c=n(76318),s=n(72840),l=n(92082),u=n(96947),d=n(83453),p=n(89738),m=n(34121),f=n(2256),g=n(96739),h=n(6231),y=n(56589),v=n(20410),b=n(49134);function k(e,t){let n=parseFloat(e.replace("px",""));return Number.isNaN(n)?t:n}var x={root:"m-cf365364",indicator:"m-9e182ccd",label:"m-1738fcb2",input:"m-1714d588",control:"m-69686b9b"};let w={withItemsBorders:!0},E=(0,d.Z)((e,{radius:t,color:n,transitionDuration:r,size:o,transitionTimingFunction:i})=>({root:{"--sc-radius":void 0===t?void 0:(0,l.H5)(t),"--sc-color":n?(0,p.p)(n,e):void 0,"--sc-shadow":n?void 0:"var(--mantine-shadow-xs)","--sc-transition-duration":void 0===r?void 0:`${r}ms`,"--sc-transition-timing-function":i,"--sc-padding":(0,l.ap)(o,"sc-padding"),"--sc-font-size":(0,l.yv)(o)}})),C=(0,v.d)((e,t)=>{let n=(0,g.w)("SegmentedControl",w,e),{classNames:l,className:d,style:p,styles:v,unstyled:C,vars:F,data:S,value:B,defaultValue:j,onChange:I,size:M,name:D,disabled:T,readOnly:A,fullWidth:P,orientation:R,radius:N,color:L,transitionDuration:H,transitionTimingFunction:$,variant:O,autoContrast:z,withItemsBorders:_,mod:V,...Z}=n,G=(0,h.y)({name:"SegmentedControl",props:n,classes:x,className:d,style:p,classNames:l,styles:v,unstyled:C,vars:F,varsResolver:E}),{dir:W}=(0,b.gm)(),q=(0,f.rZ)(),Y=S.map(e=>"string"==typeof e?{label:e,value:e}:e),[U,K]=(0,o.C)({value:B,defaultValue:j,finalValue:Array.isArray(S)?Y.find(e=>!e.disabled)?.value??S[0]?.value??null:null,onChange:I}),[X,J]=(0,r.useState)({width:0,height:0,translate:[0,0]}),Q=(0,i.M)(D),ee=(0,r.useRef)({}),et=(0,r.useRef)(null),[en,er]=(0,r.useState)(!1),[eo,ei]=(0,a.y)();(0,r.useEffect)(()=>{if(U in ee.current&&eo.current){let e=ee.current[U];if(e){let t=function(e,t){let n=window.getComputedStyle(e);return{top:k(n.getPropertyValue("padding-top"),t),right:k(n.getPropertyValue("padding-right"),t),bottom:k(n.getPropertyValue("padding-bottom"),t),left:k(n.getPropertyValue("padding-left"),t)}}(et.current,4),n=e.getBoundingClientRect(),r=e.offsetWidth/n.width,o=e.clientWidth*r||0,i=e.clientHeight*r||0,a=ei.width-e.parentElement.offsetLeft+("rtl"===W?t.left:t.right)-o,c=e.parentElement.offsetLeft-("rtl"===W?t.right:t.left);J({width:o,height:i,translate:["rtl"===W?-1*a:c,e.parentElement.offsetTop-t.top]})}else J({width:0,height:0,translate:[0,0]})}},[U,ei,W]),(0,c.K)(()=>{"test"!==(0,u.d)()&&er(!0)},20,{autoInvoke:!0});let ea=Y.map(e=>r.createElement(y.x,{...G("control"),mod:{active:U===e.value,orientation:R},key:e.value},r.createElement("input",{...G("input"),disabled:T||e.disabled,type:"radio",name:Q,value:e.value,id:`${Q}-${e.value}`,checked:U===e.value,onChange:()=>!A&&K(e.value),"data-focus-ring":q.focusRing}),r.createElement(y.x,{component:"label",...G("label"),mod:{active:U===e.value&&!(T||e.disabled),disabled:T||e.disabled,"read-only":A},htmlFor:`${Q}-${e.value}`,ref:t=>{ee.current[e.value]=t},__vars:{"--sc-label-color":void 0!==L?(0,m.R)({color:L,theme:q}):void 0}},e.label))),ec=(0,s.Yx)(eo,et,t);return 0===S.length?null:r.createElement(y.x,{...G("root"),variant:O,size:M,ref:ec,mod:[{"full-width":P,orientation:R,initialization:!en,"with-items-borders":_},V],...Z,role:"radiogroup"},"string"==typeof U&&r.createElement(y.x,{component:"span",...G("indicator"),__vars:{"--sc-indicator-width":`${X.width}px`,"--sc-indicator-height":`${X.height}px`,"--sc-indicator-transform":`translate(${X.translate[0]}px, ${X.translate[1]}px)`}}),ea)});C.classes=x,C.displayName="@mantine/core/SegmentedControl"},28372:function(e,t,n){"use strict";n.d(t,{I:function(){return i},Y:function(){return o}}),n(27378);var r=n(71656);let[o,i]=(0,r.R)("SliderProvider was not found in tree")},45630:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={root:"m-dd36362e",label:"m-c9357328",thumb:"m-c9a9a60a",trackContainer:"m-a8645c2",track:"m-c9ade57f",bar:"m-38aeed47",markWrapper:"m-b7b0423a",mark:"m-dd33bc19",markLabel:"m-68c77a5b"}},16902:function(e,t,n){"use strict";n.d(t,{i:function(){return B}});var r=n(27378),o=n(58675),i=n(28086),a=n(60790),c=n(72840),s=n(71078),l=n(92082),u=n(83453),d=n(89738),p=n(96739),m=n(6231),f=n(20410),g=n(49134),h=n(28372),y=n(92918),v=n(18887),b=n(90796),k=n(77279),x=n(15390),w=n(39044),E=n(37744),C=n(45630);let F={radius:"xl",min:0,max:100,step:1,marks:[],label:e=>e,labelTransitionProps:{transition:"fade",duration:0},labelAlwaysOn:!1,thumbLabel:"",showLabelOnHover:!0,disabled:!1,scale:e=>e},S=(0,u.Z)((e,{size:t,color:n,thumbSize:r,radius:o})=>({root:{"--slider-size":(0,l.ap)(t,"slider-size"),"--slider-color":n?(0,d.p)(n,e):void 0,"--slider-radius":void 0===o?void 0:(0,l.H5)(o),"--slider-thumb-size":void 0!==r?(0,s.h)(r):"calc(var(--slider-size) * 2)"}})),B=(0,f.d)((e,t)=>{let n=(0,p.w)("Slider",F,e),{classNames:s,styles:l,value:u,onChange:d,onChangeEnd:f,size:B,min:j,max:I,step:M,precision:D,defaultValue:T,name:A,marks:P,label:R,labelTransitionProps:N,labelAlwaysOn:L,thumbLabel:H,showLabelOnHover:$,thumbChildren:O,disabled:z,unstyled:_,scale:V,inverted:Z,className:G,style:W,vars:q,hiddenInputProps:Y,...U}=n,K=(0,m.y)({name:"Slider",props:n,classes:C.Z,classNames:s,className:G,styles:l,style:W,vars:q,varsResolver:S,unstyled:_}),{dir:X}=(0,g.gm)(),[J,Q]=(0,r.useState)(!1),[ee,et]=(0,o.C)({value:"number"==typeof u?(0,i.u)(u,j,I):u,defaultValue:"number"==typeof T?(0,i.u)(T,j,I):T,finalValue:(0,i.u)(0,j,I),onChange:d}),en=(0,r.useRef)(ee),er=(0,r.useRef)(),eo=(0,r.useRef)(),ei=(0,w.b)({value:ee,min:j,max:I}),ea=V(ee),ec="function"==typeof R?R(ea):R,es=D??(0,E.p)(M),el=(0,r.useCallback)(({x:e})=>{if(!z){let t=(0,k.i)({value:e,min:j,max:I,step:M,precision:es});et(t),en.current=t}},[z,j,I,M,es,et]),{ref:eu,active:ed}=(0,a.r)(el,{onScrubEnd:()=>f?.(en.current)},X);return r.createElement(h.Y,{value:{getStyles:K}},r.createElement(y.l,{...U,ref:(0,c.Yx)(t,er),onKeyDownCapture:e=>{if(!z)switch(e.key){case"ArrowUp":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max(ee+M,j),I),es);f?.(t),et(t);break}case"ArrowRight":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max("rtl"===X?ee-M:ee+M,j),I),es);f?.(t),et(t);break}case"ArrowDown":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max(ee-M,j),I),es);f?.(t),et(t);break}case"ArrowLeft":{e.preventDefault(),eo.current?.focus();let t=(0,x.J)(Math.min(Math.max("rtl"===X?ee+M:ee-M,j),I),es);f?.(t),et(t);break}case"Home":e.preventDefault(),eo.current?.focus(),f?.(j),et(j);break;case"End":e.preventDefault(),eo.current?.focus(),f?.(I),et(I)}},onMouseDownCapture:()=>er.current?.focus(),size:B,disabled:z},r.createElement(b.f,{inverted:Z,offset:0,filled:ei,marks:P,min:j,max:I,value:ea,disabled:z,containerProps:{ref:eu,onMouseEnter:$?()=>Q(!0):void 0,onMouseLeave:$?()=>Q(!1):void 0}},r.createElement(v.b,{max:I,min:j,value:ea,position:ei,dragging:ed,label:ec,ref:eo,labelTransitionProps:N,labelAlwaysOn:L,thumbLabel:H,showLabelOnHover:$,isHovered:J,disabled:z},O)),r.createElement("input",{type:"hidden",name:A,value:ea,...Y})))});B.classes=C.Z,B.displayName="@mantine/core/Slider"},92918:function(e,t,n){"use strict";n.d(t,{l:function(){return a}});var r=n(27378),o=n(56589),i=n(28372);let a=(0,r.forwardRef)(({size:e,disabled:t,variant:n,color:a,thumbSize:c,radius:s,...l},u)=>{let{getStyles:d}=(0,i.I)();return r.createElement(o.x,{tabIndex:-1,variant:n,size:e,ref:u,...d("root"),...l})});a.displayName="@mantine/core/SliderRoot"},18887:function(e,t,n){"use strict";n.d(t,{b:function(){return c}});var r=n(27378),o=n(56589),i=n(88101),a=n(28372);let c=(0,r.forwardRef)(({max:e,min:t,value:n,position:c,label:s,dragging:l,onMouseDown:u,onKeyDownCapture:d,labelTransitionProps:p,labelAlwaysOn:m,thumbLabel:f,onFocus:g,onBlur:h,showLabelOnHover:y,isHovered:v,children:b=null,disabled:k},x)=>{let{getStyles:w}=(0,a.I)(),[E,C]=(0,r.useState)(!1),F=m||l||E||y&&v;return r.createElement(o.x,{tabIndex:0,role:"slider","aria-label":f,"aria-valuemax":e,"aria-valuemin":t,"aria-valuenow":n,ref:x,__vars:{"--slider-thumb-offset":`${c}%`},...w("thumb",{focusable:!0}),mod:{dragging:l,disabled:k},onFocus:()=>{C(!0),"function"==typeof g&&g()},onBlur:()=>{C(!1),"function"==typeof h&&h()},onTouchStart:u,onMouseDown:u,onKeyDownCapture:d,onClick:e=>e.stopPropagation()},b,r.createElement(i.u,{mounted:null!=s&&!!F,transition:"fade",duration:0,...p},e=>r.createElement("div",{...w("label",{style:e})},s)))});c.displayName="@mantine/core/SliderThumb"},90796:function(e,t,n){"use strict";n.d(t,{f:function(){return s}});var r=n(27378),o=n(56589),i=n(28372),a=n(39044);function c({marks:e,min:t,max:n,disabled:c,value:s,offset:l,inverted:u}){let{getStyles:d}=(0,i.I)();if(!e)return null;let p=e.map((e,i)=>r.createElement(o.x,{...d("markWrapper"),__vars:{"--mark-offset":`${(0,a.b)({value:e.value,min:t,max:n})}%`},key:i},r.createElement(o.x,{...d("mark"),mod:{filled:function({mark:e,offset:t,value:n,inverted:r=!1}){return r?"number"==typeof t&&e.value<=t||e.value>=n:"number"==typeof t?e.value>=t&&e.value<=n:e.value<=n}({mark:e,value:s,offset:l,inverted:u}),disabled:c}}),e.label&&r.createElement("div",{...d("markLabel")},e.label)));return r.createElement("div",null,p)}function s({filled:e,children:t,offset:n,disabled:a,marksOffset:s,inverted:l,containerProps:u,...d}){let{getStyles:p}=(0,i.I)();return r.createElement(r.Fragment,null,r.createElement(o.x,{...p("trackContainer"),mod:{disabled:a},...u},r.createElement(o.x,{...p("track"),mod:{inverted:l,disabled:a}},r.createElement(o.x,{mod:{inverted:l,disabled:a},__vars:{"--slider-bar-width":`calc(${e}% + var(--slider-size))`,"--slider-bar-offset":`calc(${n}% - var(--slider-size))`},...p("bar")}),t,r.createElement(c,{...d,offset:s,disabled:a,inverted:l}))))}c.displayName="@mantine/core/SliderMarks",s.displayName="@mantine/core/SliderTrack"},77279:function(e,t,n){"use strict";function r({value:e,containerWidth:t,min:n,max:r,step:o,precision:i}){let a=(t?Math.min(Math.max(e,0),t)/t:e)*(r-n),c=Math.max((0!==a?Math.round(a/o)*o:0)+n,n);return void 0!==i?Number(c.toFixed(i)):c}n.d(t,{i:function(){return r}})},15390:function(e,t,n){"use strict";function r(e,t){return parseFloat(e.toFixed(t))}n.d(t,{J:function(){return r}})},39044:function(e,t,n){"use strict";function r({value:e,min:t,max:n}){return Math.min(Math.max((e-t)/(n-t)*100,0),100)}n.d(t,{b:function(){return r}})},37744:function(e,t,n){"use strict";function r(e){if(!e)return 0;let t=e.toString().split(".");return t.length>1?t[1].length:0}n.d(t,{p:function(){return r}})},27884:function(e,t,n){"use strict";n.d(t,{K:function(){return m}});var r=n(27378),o=n(92082),i=n(83453),a=n(96739),c=n(6231),s=n(56589),l=n(20410),u={root:"m-6d731127"};let d={gap:"md",align:"stretch",justify:"flex-start"},p=(0,i.Z)((e,{gap:t,align:n,justify:r})=>({root:{"--stack-gap":(0,o.bG)(t),"--stack-align":n,"--stack-justify":r}})),m=(0,l.d)((e,t)=>{let n=(0,a.w)("Stack",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:g,align:h,justify:y,gap:v,variant:b,...k}=n,x=(0,c.y)({name:"Stack",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return r.createElement(s.x,{ref:t,...x("root"),variant:b,...k})});m.classes=u,m.displayName="@mantine/core/Stack"},17829:function(e,t,n){"use strict";n.d(t,{r:function(){return F}});var r=n(27378),o=n(31002),i=n(58675),a=n(92082),c=n(83453),s=n(89738),l=n(96739),u=n(6231),d=n(55934),p=n(56589),m=n(20410),f=n(91549);let g=(0,r.createContext)(null),h=g.Provider,y=()=>(0,r.useContext)(g);var v=n(42487),b=n(96606);let k={},x=(0,m.d)((e,t)=>{let{value:n,defaultValue:o,onChange:a,size:c,wrapperProps:s,children:u,readOnly:d,...p}=(0,l.w)("SwitchGroup",k,e),[m,f]=(0,i.C)({value:n,defaultValue:o,finalValue:[],onChange:a});return r.createElement(h,{value:{value:m,onChange:e=>{let t=e.currentTarget.value;d||f(m.includes(t)?m.filter(e=>e!==t):[...m,t])},size:c}},r.createElement(v.I.Wrapper,{size:c,ref:t,...s,...p,labelElement:"div",__staticSelector:"SwitchGroup"},r.createElement(b.m,{role:"group"},u)))});x.classes=v.I.Wrapper.classes,x.displayName="@mantine/core/SwitchGroup";var w={root:"m-5f93f3bb",input:"m-926b4011",track:"m-9307d992",thumb:"m-93039a1d",trackLabel:"m-8277e082"};let E={labelPosition:"right"},C=(0,c.Z)((e,{radius:t,color:n,size:r})=>({root:{"--switch-radius":void 0===t?void 0:(0,a.H5)(t),"--switch-height":(0,a.ap)(r,"switch-height"),"--switch-width":(0,a.ap)(r,"switch-width"),"--switch-thumb-size":(0,a.ap)(r,"switch-thumb-size"),"--switch-label-font-size":(0,a.ap)(r,"switch-label-font-size"),"--switch-track-label-padding":(0,a.ap)(r,"switch-track-label-padding"),"--switch-color":n?(0,s.p)(n,e):void 0}})),F=(0,m.d)((e,t)=>{let n=(0,l.w)("Switch",E,e),{classNames:a,className:c,style:s,styles:m,unstyled:g,vars:h,color:v,label:b,offLabel:k,onLabel:x,id:F,size:S,radius:B,wrapperProps:j,children:I,thumbIcon:M,checked:D,defaultChecked:T,onChange:A,labelPosition:P,description:R,error:N,disabled:L,variant:H,rootRef:$,mod:O,...z}=n,_=y(),V=S||_?.size,Z=(0,u.y)({name:"Switch",props:n,classes:w,className:c,style:s,classNames:a,styles:m,unstyled:g,vars:h,varsResolver:C}),{styleProps:G,rest:W}=(0,d.c)(z),q=(0,o.M)(F),Y=_?{checked:_.value.includes(W.value),onChange:_.onChange}:{},[U,K]=(0,i.C)({value:Y.checked??D,defaultValue:T,finalValue:!1});return r.createElement(f.Z,{...Z("root"),__staticSelector:"Switch",__stylesApiProps:n,id:q,size:V,labelPosition:P,label:b,description:R,error:N,disabled:L,classNames:a,styles:m,unstyled:g,"data-checked":Y.checked||void 0,variant:H,ref:$,mod:O,...G,...j},r.createElement("input",{...W,disabled:L,checked:U,onChange:e=>{_?Y.onChange?.(e):A?.(e),K(e.currentTarget.checked)},id:q,ref:t,type:"checkbox",...Z("input")}),r.createElement(p.x,{component:"label",htmlFor:q,mod:{error:N,"label-position":P},...Z("track")},r.createElement(p.x,{component:"span",mod:"reduce-motion",...Z("thumb")},M),r.createElement("span",{...Z("trackLabel")},U?x:k)))});F.classes={...w,...f.J},F.displayName="@mantine/core/Switch",F.Group=x},28862:function(e,t,n){"use strict";n.d(t,{i:function(){return D}});var r=n(27378),o=n(71078),i=n(92082),a=n(83453),c=n(89738),s=n(96739),l=n(6231),u=n(56589),d=n(20410),p=n(71656);let[m,f]=(0,p.R)("Table component was not found in the tree");var g={table:"m-b23fa0ef",th:"m-4e7aa4f3",tr:"m-4e7aa4fd",td:"m-4e7aa4ef",tbody:"m-b2404537",thead:"m-b242d975",caption:"m-9e5a3ac7",scrollContainer:"m-a100c15",scrollContainerInner:"m-62259741"};function h(e,t){let n=`Table${e.charAt(0).toUpperCase()}${e.slice(1)}`,o=(0,d.d)((o,i)=>{let a=(0,s.w)(n,{},o),{classNames:c,className:l,style:d,styles:p,...m}=a,g=f();return r.createElement(u.x,{component:e,ref:i,...function(e,t){if(!t)return;let n={};return t.columnBorder&&e.withColumnBorders&&(n["data-with-column-border"]=!0),t.rowBorder&&e.withRowBorders&&(n["data-with-row-border"]=!0),t.striped&&e.striped&&(n["data-striped"]=e.striped),t.highlightOnHover&&e.highlightOnHover&&(n["data-hover"]=!0),t.captionSide&&e.captionSide&&(n["data-side"]=e.captionSide),t.stickyHeader&&e.stickyHeader&&(n["data-sticky"]=!0),n}(g,t),...g.getStyles(e,{className:l,classNames:c,style:d,styles:p,props:a}),...m})});return o.displayName=`@mantine/core/${n}`,o.classes=g,o}let y=h("th",{columnBorder:!0}),v=h("td",{columnBorder:!0}),b=h("tr",{rowBorder:!0,striped:!0,highlightOnHover:!0}),k=h("thead",{stickyHeader:!0}),x=h("tbody"),w=h("tfoot"),E=h("caption",{captionSide:!0});function C({data:e}){return r.createElement(r.Fragment,null,e.caption&&r.createElement(E,null,e.caption),e.head&&r.createElement(k,null,r.createElement(b,null,e.head.map((e,t)=>r.createElement(y,{key:t},e)))),e.body&&r.createElement(x,null,e.body.map((e,t)=>r.createElement(b,{key:t},e.map((e,t)=>r.createElement(v,{key:t},e))))),e.foot&&r.createElement(w,null,r.createElement(b,null,e.foot.map((e,t)=>r.createElement(y,{key:t},e)))))}C.displayName="@mantine/core/TableDataRenderer";var F=n(49849);let S={type:"scrollarea"},B=(0,a.Z)((e,{minWidth:t,type:n})=>({scrollContainer:{"--table-min-width":(0,o.h)(t),"--table-overflow":"native"===n?"auto":void 0}})),j=(0,d.d)((e,t)=>{let n=(0,s.w)("TableScrollContainer",S,e),{classNames:o,className:i,style:a,styles:c,unstyled:d,vars:p,children:m,minWidth:f,type:h,...y}=n,v=(0,l.y)({name:"TableScrollContainer",classes:g,props:n,className:i,style:a,classNames:o,styles:c,unstyled:d,vars:p,varsResolver:B,rootSelector:"scrollContainer"});return r.createElement(u.x,{component:"scrollarea"===h?F.x:"div",..."scrollarea"===h?{offsetScrollbars:"x"}:{},ref:t,...v("scrollContainer"),...y},r.createElement("div",{...v("scrollContainerInner")},m))});j.classes=g,j.displayName="@mantine/core/TableScrollContainer";let I={withRowBorders:!0,verticalSpacing:7},M=(0,a.Z)((e,{layout:t,captionSide:n,horizontalSpacing:r,verticalSpacing:a,borderColor:s,stripedColor:l,highlightOnHoverColor:u,striped:d,highlightOnHover:p,stickyHeaderOffset:m,stickyHeader:f})=>({table:{"--table-layout":t,"--table-caption-side":n,"--table-horizontal-spacing":(0,i.bG)(r),"--table-vertical-spacing":(0,i.bG)(a),"--table-border-color":s?(0,c.p)(s,e):void 0,"--table-striped-color":d&&l?(0,c.p)(l,e):void 0,"--table-highlight-on-hover-color":p&&u?(0,c.p)(u,e):void 0,"--table-sticky-header-offset":f?(0,o.h)(m):void 0}})),D=(0,d.d)((e,t)=>{let n=(0,s.w)("Table",I,e),{classNames:o,className:i,style:a,styles:c,unstyled:d,vars:p,horizontalSpacing:f,verticalSpacing:h,captionSide:y,stripedColor:v,highlightOnHoverColor:b,striped:k,highlightOnHover:x,withColumnBorders:w,withRowBorders:E,withTableBorder:F,borderColor:S,layout:B,variant:j,data:D,children:T,stickyHeader:A,stickyHeaderOffset:P,mod:R,...N}=n,L=(0,l.y)({name:"Table",props:n,className:i,style:a,classes:g,classNames:o,styles:c,unstyled:d,rootSelector:"table",vars:p,varsResolver:M});return r.createElement(m,{value:{getStyles:L,stickyHeader:A,striped:!0===k?"odd":k||void 0,highlightOnHover:x,withColumnBorders:w,withRowBorders:E,captionSide:y||"bottom"}},r.createElement(u.x,{component:"table",variant:j,ref:t,mod:[{"data-with-table-border":F},R],...L("table"),...N},T||!!D&&r.createElement(C,{data:D})))});D.classes=g,D.displayName="@mantine/core/Table",D.Td=v,D.Th=y,D.Tr=b,D.Thead=k,D.Tbody=x,D.Tfoot=w,D.Caption=E,D.ScrollContainer=j,D.DataRenderer=C},26569:function(e,t,n){"use strict";n.d(t,{x:function(){return Text}});var r=n(27378),o=n(92082),i=n(83453),a=n(89738),c=n(42911),s=n(96739),l=n(6231),u=n(56589),d=n(50332),p={root:"m-b6d8b162"};let m={inherit:!1},f=(0,i.Z)((e,{variant:t,lineClamp:n,gradient:r,size:i,color:s})=>({root:{"--text-fz":(0,o.yv)(i),"--text-lh":(0,o.Dp)(i),"--text-gradient":"gradient"===t?(0,c.u)(r,e):void 0,"--text-line-clamp":"number"==typeof n?n.toString():void 0,"--text-color":s?(0,a.p)(s,e):void 0}})),Text=(0,d.b)((e,t)=>{let n=(0,s.w)("Text",m,e),{lineClamp:o,truncate:i,inline:a,inherit:c,gradient:d,span:g,__staticSelector:h,vars:y,className:v,style:b,classNames:k,styles:x,unstyled:w,variant:E,mod:C,size:F,...S}=n,B=(0,l.y)({name:["Text",h],props:n,classes:p,className:v,style:b,classNames:k,styles:x,unstyled:w,vars:y,varsResolver:f});return r.createElement(u.x,{...B("root",{focusable:!0}),ref:t,component:g?"span":"p",variant:E,mod:[{"data-truncate":"start"===i?"start":"end"===i||i?"end":void 0,"data-line-clamp":"number"==typeof o,"data-inline":a,"data-inherit":c},C],size:F,...S})});Text.classes=p,Text.displayName="@mantine/core/Text"},7033:function(e,t,n){"use strict";n.d(t,{o:function(){return s}});var r=n(27378),o=n(96739),i=n(20410),a=n(23163);let c={},s=(0,i.d)((e,t)=>{let n=(0,o.w)("TextInput",c,e);return r.createElement(a.M,{component:"input",ref:t,...n,__staticSelector:"TextInput"})});s.classes=a.M.classes,s.displayName="@mantine/core/TextInput"},57847:function(e,t,n){"use strict";n.d(t,{D:function(){return f}});var r=n(27378),o=n(83453),i=n(96739),a=n(6231),c=n(56589),s=n(20410),l=n(71078);let u=["h1","h2","h3","h4","h5","h6"];var d={root:"m-8a5d1357"};let p={order:1},m=(0,o.Z)((e,{order:t,size:n,lineClamp:r,textWrap:o})=>{let i=function(e,t){let n=void 0!==t?t:`h${e}`;return u.includes(n)?{fontSize:`var(--mantine-${n}-font-size)`,fontWeight:`var(--mantine-${n}-font-weight)`,lineHeight:`var(--mantine-${n}-line-height)`}:{fontSize:(0,l.h)(n),fontWeight:`var(--mantine-h${e}-font-weight)`,lineHeight:`var(--mantine-h${e}-line-height)`}}(t,n);return{root:{"--title-fw":i.fontWeight,"--title-lh":i.lineHeight,"--title-fz":i.fontSize,"--title-line-clamp":"number"==typeof r?r.toString():void 0,"--title-text-wrap":o}}}),f=(0,s.d)((e,t)=>{let n=(0,i.w)("Title",p,e),{classNames:o,className:s,style:l,styles:u,unstyled:f,order:g,vars:h,size:y,variant:v,lineClamp:b,textWrap:k,mod:x,...w}=n,E=(0,a.y)({name:"Title",props:n,classes:d,className:s,style:l,classNames:o,styles:u,unstyled:f,vars:h,varsResolver:m});return[1,2,3,4,5,6].includes(g)?r.createElement(c.x,{...E("root"),component:`h${g}`,variant:v,ref:t,mod:[{order:g,"data-line-clamp":"number"==typeof b},x],size:y,...w}):null});f.classes=d,f.displayName="@mantine/core/Title"},99684:function(e,t,n){"use strict";n.d(t,{u:function(){return z}});var r=n(27378),o=n(40624),i=n(72840),a=n(513),c=n(13041),s=n(92082),l=n(83453),u=n(89738),d=n(96739),p=n(6231),m=n(56589),f=n(20410),g=n(49134),h=n(93177),y=n(22211),v=n(15666),b=n(88101);let k={duration:100,transition:"fade"};var x=n(2256),w=n(48649),E=n(2216),C=n(63349),F=n(25772),S={tooltip:"m-1b3c8819",arrow:"m-f898399f"};let B={refProp:"ref",withinPortal:!0,offset:10,position:"right",zIndex:(0,c.w)("popover")},j=(0,l.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,s.H5)(t),"--tooltip-bg":n?(0,u.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),I=(0,f.d)((e,t)=>{let n=(0,d.w)("TooltipFloating",B,e),{children:o,refProp:c,withinPortal:s,style:l,className:u,classNames:f,styles:g,unstyled:h,radius:y,color:b,label:k,offset:I,position:M,multiline:D,zIndex:T,disabled:A,variant:P,vars:R,portalProps:N,...L}=n,H=(0,x.rZ)(),$=(0,p.y)({name:"TooltipFloating",props:n,classes:S,className:u,style:l,classNames:f,styles:g,unstyled:h,rootSelector:"tooltip",vars:R,varsResolver:j}),{handleMouseMove:O,x:z,y:_,opened:V,boundaryRef:Z,floating:G,setOpened:W}=function({offset:e,position:t}){let[n,o]=(0,r.useState)(!1),i=(0,r.useRef)(),{x:a,y:c,elements:s,refs:l,update:u,placement:d}=(0,E.YF)({placement:t,middleware:[(0,C.uY)({crossAxis:!0,padding:5,rootBoundary:"document"})]}),p=d.includes("right")?e:t.includes("left")?-1*e:0,m=d.includes("bottom")?e:t.includes("top")?-1*e:0,f=(0,r.useCallback)(({clientX:e,clientY:t})=>{l.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:e,y:t,left:e+p,top:t+m,right:e,bottom:t})})},[s.reference]);return(0,r.useEffect)(()=>{if(l.floating.current){let e=i.current;e.addEventListener("mousemove",f);let t=(0,F.Kx)(l.floating.current);return t.forEach(e=>{e.addEventListener("scroll",u)}),()=>{e.removeEventListener("mousemove",f),t.forEach(e=>{e.removeEventListener("scroll",u)})}}},[s.reference,l.floating.current,u,f,n]),{handleMouseMove:f,x:a,y:c,opened:n,setOpened:o,boundaryRef:i,floating:l.setFloating}}({offset:I,position:M});if(!(0,a.k)(o))throw Error("[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");let q=(0,i.Yx)(Z,o.ref,t);return r.createElement(r.Fragment,null,r.createElement(v.q,{...N,withinPortal:s},r.createElement(m.x,{...L,...$("tooltip",{style:{...(0,w.c)(l,H),zIndex:T,display:!A&&V?"block":"none",top:(_&&Math.round(_))??"",left:(z&&Math.round(z))??""}}),variant:P,ref:G},k)),(0,r.cloneElement)(o,{...o.props,[c]:q,onMouseEnter:e=>{o.props.onMouseEnter?.(e),O(e),W(!0)},onMouseLeave:e=>{o.props.onMouseLeave?.(e),W(!1)}}))});I.classes=S,I.displayName="@mantine/core/TooltipFloating";let M=(0,r.createContext)(!1),D=M.Provider,T=()=>(0,r.useContext)(M),A={openDelay:0,closeDelay:0};function P(e){let{openDelay:t,closeDelay:n,children:o}=(0,d.w)("TooltipGroup",A,e);return r.createElement(D,{value:!0},r.createElement(E.e0,{delay:{open:t,close:n}},o))}P.displayName="@mantine/core/TooltipGroup";var R=n(95954),N=n(31002),L=n(82591),H=n(5524);let $={position:"top",refProp:"ref",withinPortal:!0,inline:!1,arrowSize:4,arrowOffset:5,arrowRadius:0,arrowPosition:"side",offset:5,transitionProps:{duration:100,transition:"fade"},events:{hover:!0,focus:!1,touch:!1},zIndex:(0,c.w)("popover"),positionDependencies:[]},O=(0,l.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,s.H5)(t),"--tooltip-bg":n?(0,u.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),z=(0,f.d)((e,t)=>{let n=(0,d.w)("Tooltip",$,e),{children:c,position:s,refProp:l,label:u,openDelay:f,closeDelay:x,onPositionChange:w,opened:F,withinPortal:B,radius:j,color:I,classNames:M,styles:D,unstyled:A,style:P,className:z,withArrow:_,arrowSize:V,arrowOffset:Z,arrowRadius:G,arrowPosition:W,offset:q,transitionProps:Y,multiline:U,events:K,zIndex:X,disabled:J,positionDependencies:Q,onClick:ee,onMouseEnter:et,onMouseLeave:en,inline:er,variant:eo,keepMounted:ei,vars:ea,portalProps:ec,mod:es,...el}=(0,d.w)("Tooltip",$,n),{dir:eu}=(0,g.gm)(),ed=(0,r.useRef)(null),ep=function(e){let[t,n]=(0,r.useState)(!1),o="boolean"==typeof e.opened,i=o?e.opened:t,a=T(),c=(0,N.M)(),{delay:s,currentId:l,setCurrentId:u}=(0,E.tj)(),d=(0,r.useCallback)(e=>{n(e),e&&u(c)},[u,c]),{x:p,y:m,context:f,refs:g,update:h,placement:y,middlewareData:{arrow:{x:v,y:b}={}}}=(0,E.YF)({placement:e.position,open:i,onOpenChange:d,middleware:[(0,C.cv)(e.offset),(0,C.uY)({padding:8}),(0,C.RR)(),(0,R.x7)({element:e.arrowRef,padding:e.arrowOffset}),...e.inline?[(0,C.Qo)()]:[]]}),{getReferenceProps:k,getFloatingProps:x}=(0,E.NI)([(0,E.XI)(f,{enabled:e.events?.hover,delay:a?s:{open:e.openDelay,close:e.closeDelay},mouseOnly:!e.events?.touch}),(0,E.KK)(f,{enabled:e.events?.focus,keyboardOnly:!0}),(0,E.qs)(f,{role:"tooltip"}),(0,E.bQ)(f,{enabled:void 0===e.opened}),(0,E.Qu)(f,{id:c})]);(0,H.L)({opened:i,position:e.position,positionDependencies:e.positionDependencies,floating:{refs:g,update:h}}),(0,L.l)(()=>{e.onPositionChange?.(y)},[y]);let w=i&&l&&l!==c;return{x:p,y:m,arrowX:v,arrowY:b,reference:g.setReference,floating:g.setFloating,getFloatingProps:x,getReferenceProps:k,isGroupPhase:w,opened:i,placement:y}}({position:(0,h._)(eu,s),closeDelay:x,openDelay:f,onPositionChange:w,opened:F,events:K,arrowRef:ed,arrowOffset:Z,offset:"number"==typeof q?q+(_?V/2:0):q,positionDependencies:[...Q,c],inline:er}),em=(0,p.y)({name:"Tooltip",props:n,classes:S,className:z,style:P,classNames:M,styles:D,unstyled:A,rootSelector:"tooltip",vars:ea,varsResolver:O});if(!(0,a.k)(c))throw Error("[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");let ef=(0,i.Yx)(ep.reference,c.ref,t),eg={...k,duration:100,transition:"fade",...Y};return r.createElement(r.Fragment,null,r.createElement(v.q,{...ec,withinPortal:B},r.createElement(b.u,{...eg,keepMounted:ei,mounted:!J&&!!ep.opened,duration:ep.isGroupPhase?10:eg.duration},e=>r.createElement(m.x,{...el,variant:eo,mod:[{multiline:U},es],...ep.getFloatingProps({ref:ep.floating,className:em("tooltip").className,style:{...em("tooltip").style,...e,zIndex:X,top:ep.y??0,left:ep.x??0}})},u,r.createElement(y.Y,{ref:ed,arrowX:ep.arrowX,arrowY:ep.arrowY,visible:_,position:ep.placement,arrowSize:V,arrowOffset:Z,arrowRadius:G,arrowPosition:W,...em("arrow")})))),(0,r.cloneElement)(c,ep.getReferenceProps({onClick:ee,onMouseEnter:et,onMouseLeave:en,onMouseMove:n.onMouseMove,onPointerDown:n.onPointerDown,onPointerEnter:n.onPointerEnter,[l]:ef,className:(0,o.Z)(z,c.props.className),...c.props})))});z.classes=S,z.displayName="@mantine/core/Tooltip",z.Floating=I,z.Group=P},88101:function(e,t,n){"use strict";n.d(t,{u:function(){return l}});var r=n(27378),o=n(34296);let i={entering:"in",entered:"in",exiting:"out",exited:"out","pre-exiting":"out","pre-entering":"out"};var a=n(82269),c=n(82591),s=n(2256);function l({keepMounted:e,transition:t="fade",duration:n=250,exitDuration:l=n,mounted:u,children:d,timingFunction:p="ease",onExit:m,onEntered:f,onEnter:g,onExited:h}){let{transitionDuration:y,transitionStatus:v,transitionTimingFunction:b}=function({duration:e,exitDuration:t,timingFunction:n,mounted:o,onEnter:i,onExit:l,onEntered:u,onExited:d}){let p=(0,s.rZ)(),m=(0,a.J)(),f=!!p.respectReducedMotion&&m,[g,h]=(0,r.useState)(f?0:e),[y,v]=(0,r.useState)(o?"entered":"exited"),b=(0,r.useRef)(-1),k=n=>{let r=n?i:l,o=n?u:d;v(n?"pre-entering":"pre-exiting"),window.clearTimeout(b.current);let a=f?0:n?e:t;if(h(a),0===a)"function"==typeof r&&r(),"function"==typeof o&&o(),v(n?"entered":"exited");else{let e=window.setTimeout(()=>{"function"==typeof r&&r(),v(n?"entering":"exiting")},10);b.current=window.setTimeout(()=>{window.clearTimeout(e),"function"==typeof o&&o(),v(n?"entered":"exited")},a)}};return(0,c.l)(()=>{k(o)},[o]),(0,r.useEffect)(()=>()=>window.clearTimeout(b.current),[]),{transitionDuration:g,transitionStatus:y,transitionTimingFunction:n||"ease"}}({mounted:u,exitDuration:l,duration:n,timingFunction:p,onExit:m,onEntered:f,onEnter:g,onExited:h});return 0===y?u?r.createElement(r.Fragment,null,d({})):e?d({display:"none"}):null:"exited"===v?e?d({display:"none"}):null:r.createElement(r.Fragment,null,d(function({transition:e,state:t,duration:n,timingFunction:r}){let a={transitionDuration:`${n}ms`,transitionTimingFunction:r};return"string"==typeof e?e in o.p?{transitionProperty:o.p[e].transitionProperty,...a,...o.p[e].common,...o.p[e][i[t]]}:{}:{transitionProperty:e.transitionProperty,...a,...e.common,...e[i[t]]}}({transition:t,duration:y,state:v,timingFunction:b})))}l.displayName="@mantine/core/Transition"},34296:function(e,t,n){"use strict";n.d(t,{p:function(){return i}});var r=n(71078);n(27378);let o=e=>({in:{opacity:1,transform:"scale(1)"},out:{opacity:0,transform:`scale(.9) translateY(${(0,r.h)("bottom"===e?10:-10)})`},transitionProperty:"transform, opacity"}),i={fade:{in:{opacity:1},out:{opacity:0},transitionProperty:"opacity"},scale:{in:{opacity:1,transform:"scale(1)"},out:{opacity:0,transform:"scale(0)"},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"scale-y":{in:{opacity:1,transform:"scaleY(1)"},out:{opacity:0,transform:"scaleY(0)"},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"scale-x":{in:{opacity:1,transform:"scaleX(1)"},out:{opacity:0,transform:"scaleX(0)"},common:{transformOrigin:"left"},transitionProperty:"transform, opacity"},"skew-up":{in:{opacity:1,transform:"translateY(0) skew(0deg, 0deg)"},out:{opacity:0,transform:`translateY(-${(0,r.h)(20)}) skew(-10deg, -5deg)`},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"skew-down":{in:{opacity:1,transform:"translateY(0) skew(0deg, 0deg)"},out:{opacity:0,transform:`translateY(${(0,r.h)(20)}) skew(-10deg, -5deg)`},common:{transformOrigin:"bottom"},transitionProperty:"transform, opacity"},"rotate-left":{in:{opacity:1,transform:"translateY(0) rotate(0deg)"},out:{opacity:0,transform:`translateY(${(0,r.h)(20)}) rotate(-5deg)`},common:{transformOrigin:"bottom"},transitionProperty:"transform, opacity"},"rotate-right":{in:{opacity:1,transform:"translateY(0) rotate(0deg)"},out:{opacity:0,transform:`translateY(${(0,r.h)(20)}) rotate(5deg)`},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"slide-down":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:"translateY(-100%)"},common:{transformOrigin:"top"},transitionProperty:"transform, opacity"},"slide-up":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:"translateY(100%)"},common:{transformOrigin:"bottom"},transitionProperty:"transform, opacity"},"slide-left":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:"translateX(100%)"},common:{transformOrigin:"left"},transitionProperty:"transform, opacity"},"slide-right":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:"translateX(-100%)"},common:{transformOrigin:"right"},transitionProperty:"transform, opacity"},pop:{...o("bottom"),common:{transformOrigin:"center center"}},"pop-bottom-left":{...o("bottom"),common:{transformOrigin:"bottom left"}},"pop-bottom-right":{...o("bottom"),common:{transformOrigin:"bottom right"}},"pop-top-left":{...o("top"),common:{transformOrigin:"top left"}},"pop-top-right":{...o("top"),common:{transformOrigin:"top right"}}}},19397:function(e,t,n){"use strict";n.d(t,{k:function(){return u}});var r=n(27378),o=n(96739),i=n(6231),a=n(56589),c=n(50332),s={root:"m-87cf2631"};let l={__staticSelector:"UnstyledButton"},u=(0,c.b)((e,t)=>{let n=(0,o.w)("UnstyledButton",l,e),{className:c,component:u="button",__staticSelector:d,unstyled:p,classNames:m,styles:f,style:g,...h}=n,y=(0,i.y)({name:d,props:n,classes:s,className:c,style:g,classNames:m,styles:f,unstyled:p});return r.createElement(a.x,{...y("root",{focusable:!0}),component:u,ref:t,type:"button"===u?"button":void 0,...h})});u.classes=s,u.displayName="@mantine/core/UnstyledButton"},30020:function(e,t,n){"use strict";n.d(t,{T:function(){return u}});var r=n(27378),o=n(96739),i=n(6231),a=n(56589),c=n(20410),s={root:"m-515a97f8"};let l={},u=(0,c.d)((e,t)=>{let n=(0,o.w)("VisuallyHidden",l,e),{classNames:c,className:u,style:d,styles:p,unstyled:m,vars:f,...g}=n,h=(0,i.y)({name:"VisuallyHidden",classes:s,props:n,className:u,style:d,classNames:c,styles:p,unstyled:m});return r.createElement(a.x,{component:"span",ref:t,...h("root"),...g})});u.classes=s,u.displayName="@mantine/core/VisuallyHidden"},56589:function(e,t,n){"use strict";n.d(t,{x:function(){return h}});var r=n(27378),o=n(40624),i=n(31788),a=n(9889),c=n(96403),s=n(2256);function l(e){return e.startsWith("data-")?e:`data-${e}`}function u(e,t){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...u(n,t)}),{}):"function"==typeof e?e(t):null==e?{}:e}var d=n(55934),p=n(22897),m=n(70238),f=n(40593);let g=(0,r.forwardRef)(({component:e,style:t,__vars:n,className:i,variant:g,mod:h,size:y,hiddenFrom:v,visibleFrom:b,lightHidden:k,darkHidden:x,renderRoot:w,...E},C)=>{let F=(0,s.rZ)(),{styleProps:S,rest:B}=(0,d.c)(E),j=(0,f.m)(),I=(0,m.n)({styleProps:S,theme:F,data:p.p}),M={ref:C,style:function({theme:e,style:t,vars:n,styleProps:r}){let o=u(t,e),i=u(n,e);return{...o,...i,...r}}({theme:F,style:t,vars:n,styleProps:I.inlineStyles}),className:(0,o.Z)(i,{[j]:I.hasResponsiveStyles,"mantine-light-hidden":k,"mantine-dark-hidden":x,[`mantine-hidden-from-${v}`]:v,[`mantine-visible-from-${b}`]:b}),"data-variant":g,"data-size":(0,c.s)(y)?void 0:y||void 0,...function e(t){return t?"string"==typeof t?{[l(t)]:!0}:Array.isArray(t)?[...t].reduce((t,n)=>({...t,...e(n)}),{}):Object.keys(t).reduce((e,n)=>{let r=t[n];return void 0===r||""===r||!1===r||null===r||(e[l(n)]=t[n]),e},{}):null}(h),...B};return r.createElement(r.Fragment,null,I.hasResponsiveStyles&&r.createElement(a.f,{selector:`.${j}`,styles:I.styles,media:I.media}),"function"==typeof w?w(M):r.createElement(e||"div",{...M}))});g.displayName="@mantine/core/Box";let h=(0,i.F)(g)},48649:function(e,t,n){"use strict";n.d(t,{c:function(){return function e(t,n){return Array.isArray(t)?[...t].reduce((t,r)=>({...t,...e(r,n)}),{}):"function"==typeof t?t(n):null==t?{}:t}}})},55934:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(86689);function o(e){let{m:t,mx:n,my:o,mt:i,mb:a,ml:c,mr:s,p:l,px:u,py:d,pt:p,pb:m,pl:f,pr:g,bg:h,c:y,opacity:v,ff:b,fz:k,fw:x,lts:w,ta:E,lh:C,fs:F,tt:S,td:B,w:j,miw:I,maw:M,h:D,mih:T,mah:A,bgsz:P,bgp:R,bgr:N,bga:L,pos:H,top:$,left:O,bottom:z,right:_,inset:V,display:Z,flex:G,hiddenFrom:W,visibleFrom:q,lightHidden:Y,darkHidden:U,...K}=e,X=(0,r.L)({m:t,mx:n,my:o,mt:i,mb:a,ml:c,mr:s,p:l,px:u,py:d,pt:p,pb:m,pl:f,pr:g,bg:h,c:y,opacity:v,ff:b,fz:k,fw:x,lts:w,ta:E,lh:C,fs:F,tt:S,td:B,w:j,miw:I,maw:M,h:D,mih:T,mah:A,bgsz:P,bgp:R,bgr:N,bga:L,pos:H,top:$,left:O,bottom:z,right:_,inset:V,display:Z,flex:G,hiddenFrom:W,visibleFrom:q,lightHidden:Y,darkHidden:U});return{styleProps:X,rest:K}}n(27378)},70238:function(e,t,n){"use strict";n.d(t,{n:function(){return u}});var r=n(53007);n(27378);var o=n(88193);function i(e,t){let n=(0,o.E)({color:e,theme:t});return"dimmed"===n.color?"var(--mantine-color-dimmed)":"bright"===n.color?"var(--mantine-color-bright)":n.variable?`var(${n.variable})`:n.color}let a={text:"var(--mantine-font-family)",mono:"var(--mantine-font-family-monospace)",heading:"var(--mantine-font-family-headings)"};var c=n(71078);let s={color:i,textColor:function(e,t){let n=(0,o.E)({color:e,theme:t});return n.isThemeColor&&void 0===n.shade?`var(--mantine-color-${n.color}-text)`:i(e,t)},fontSize:function(e,t){return"string"==typeof e&&e in t.fontSizes?`var(--mantine-font-size-${e})`:"number"==typeof e||"string"==typeof e?(0,c.h)(e):e},spacing:function(e,t){if("number"==typeof e)return(0,c.h)(e);if("string"==typeof e){let n=e.replace("-","");if(!(n in t.spacing))return(0,c.h)(e);let r=`--mantine-spacing-${n}`;return e.startsWith("-")?`calc(var(${r}) * -1)`:`var(${r})`}return e},identity:function(e){return e},size:function(e){return"number"==typeof e?(0,c.h)(e):e},lineHeight:function(e,t){return"string"==typeof e&&e in t.lineHeights?`var(--mantine-line-height-${e})`:e},fontFamily:function(e){return"string"==typeof e&&e in a?a[e]:e}};function l(e){return e.replace("(min-width: ","").replace("em)","")}function u({styleProps:e,data:t,theme:n}){return function({media:e,...t}){let n=Object.keys(e),r=n.sort((e,t)=>Number(l(e))-Number(l(t))).map(t=>({query:t,styles:e[t]}));return{...t,media:r}}((0,r.X)(e).reduce((o,i)=>{var a,c;if("hiddenFrom"===i||"visibleFrom"===i)return o;let l=t[i],u=Array.isArray(l.property)?l.property:[l.property],d="object"==typeof(c=e[i])&&null!==c?"base"in c?c.base:void 0:c;if(!function(e){if("object"!=typeof e||null===e)return!1;let t=Object.keys(e);return 1!==t.length||"base"!==t[0]}(e[i]))return u.forEach(e=>{o.inlineStyles[e]=s[l.type](d,n)}),o;o.hasResponsiveStyles=!0;let p="object"==typeof(a=e[i])&&null!==a?(0,r.X)(a).filter(e=>"base"!==e):[];return u.forEach(t=>{d&&(o.styles[t]=s[l.type](d,n)),p.forEach(r=>{var a;let c=`(min-width: ${n.breakpoints[r]})`;o.media[c]={...o.media[c],[t]:s[l.type]("object"==typeof(a=e[i])&&null!==a&&r in a?a[r]:a,n)}})}),o},{hasResponsiveStyles:!1,styles:{},inlineStyles:{},media:{}}))}},22897:function(e,t,n){"use strict";n.d(t,{p:function(){return r}});let r={m:{type:"spacing",property:"margin"},mt:{type:"spacing",property:"marginTop"},mb:{type:"spacing",property:"marginBottom"},ml:{type:"spacing",property:"marginLeft"},mr:{type:"spacing",property:"marginRight"},mx:{type:"spacing",property:["marginRight","marginLeft"]},my:{type:"spacing",property:["marginTop","marginBottom"]},p:{type:"spacing",property:"padding"},pt:{type:"spacing",property:"paddingTop"},pb:{type:"spacing",property:"paddingBottom"},pl:{type:"spacing",property:"paddingLeft"},pr:{type:"spacing",property:"paddingRight"},px:{type:"spacing",property:["paddingRight","paddingLeft"]},py:{type:"spacing",property:["paddingTop","paddingBottom"]},bg:{type:"color",property:"background"},c:{type:"textColor",property:"color"},opacity:{type:"identity",property:"opacity"},ff:{type:"fontFamily",property:"fontFamily"},fz:{type:"fontSize",property:"fontSize"},fw:{type:"identity",property:"fontWeight"},lts:{type:"size",property:"letterSpacing"},ta:{type:"identity",property:"textAlign"},lh:{type:"lineHeight",property:"lineHeight"},fs:{type:"identity",property:"fontStyle"},tt:{type:"identity",property:"textTransform"},td:{type:"identity",property:"textDecoration"},w:{type:"spacing",property:"width"},miw:{type:"spacing",property:"minWidth"},maw:{type:"spacing",property:"maxWidth"},h:{type:"spacing",property:"height"},mih:{type:"spacing",property:"minHeight"},mah:{type:"spacing",property:"maxHeight"},bgsz:{type:"size",property:"backgroundSize"},bgp:{type:"identity",property:"backgroundPosition"},bgr:{type:"identity",property:"backgroundRepeat"},bga:{type:"identity",property:"backgroundAttachment"},pos:{type:"identity",property:"position"},top:{type:"identity",property:"top"},left:{type:"size",property:"left"},bottom:{type:"size",property:"bottom"},right:{type:"size",property:"right"},inset:{type:"size",property:"inset"},display:{type:"identity",property:"display"},flex:{type:"identity",property:"flex"}}},40593:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var r=n(27378);function o(){let e=(0,r.useId)().replace(/:/g,"");return`__m__-${e}`}},49134:function(e,t,n){"use strict";n.d(t,{_9:function(){return c},gm:function(){return a}});var r=n(27378),o=n(62849);let i=(0,r.createContext)({dir:"ltr",toggleDirection:()=>{},setDirection:()=>{}});function a(){return(0,r.useContext)(i)}function c({children:e,initialDirection:t="ltr",detectDirection:n=!0}){let[a,c]=(0,r.useState)(t),s=e=>{c(e),document.documentElement.setAttribute("dir",e)};return(0,o.Y)(()=>{if(n){let e=document.documentElement.getAttribute("dir");("rtl"===e||"ltr"===e)&&s(e)}},[]),r.createElement(i.Provider,{value:{dir:a,toggleDirection:()=>s("ltr"===a?"rtl":"ltr"),setDirection:s}},e)}},9889:function(e,t,n){"use strict";n.d(t,{f:function(){return c}});var r=n(27378),o=n(25370),i=n(53007);function a(e){return(0,i.X)(e).reduce((t,n)=>void 0!==e[n]?`${t}${n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}:${e[n]};`:t,"").trim()}function c({selector:e,styles:t,media:n}){let i=(0,o.R7)();return r.createElement("style",{"data-mantine-styles":"inline",nonce:i?.(),dangerouslySetInnerHTML:{__html:function({selector:e,styles:t,media:n}){let r=t?a(t):"",o=Array.isArray(n)?n.map(t=>`@media${t.query}{${e}{${a(t.styles)}}}`):[];return`${r?`${e}{${r}}`:""}${o.join("")}`.trim()}({selector:e,styles:t,media:n})}})}},25370:function(e,t,n){"use strict";n.d(t,{R7:function(){return s},Sm:function(){return a},XD:function(){return o},uK:function(){return c},wB:function(){return i}});var r=n(27378);let o=(0,r.createContext)(null);function i(){let e=(0,r.useContext)(o);if(!e)throw Error("[@mantine/core] MantineProvider was not found in tree");return e}function a(){return i().cssVariablesResolver}function c(){return i().classNamesPrefix}function s(){return i().getStyleNonce}},56641:function(e,t,n){"use strict";n.d(t,{m:function(){return l}});var r=n(53007),o=n(71078);n(27378);var i=n(98901),a=n(91948),c=n(34121);function s(e,t,n){(0,r.X)(t).forEach(r=>Object.assign(e,{[`--mantine-${n}-${r}`]:t[r]}))}let l=e=>{let t=(0,i.j)(e,"dark"),n=(0,i.j)(e,"light"),l=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:(0,o.h)(e.defaultRadius),u={variables:{"--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--mantine-color-scheme":"light dark","--mantine-moz-font-smoothing":e.fontSmoothing?"grayscale":"unset","--mantine-color-white":e.white,"--mantine-color-black":e.black,"--mantine-line-height":e.lineHeights.md,"--mantine-font-family":e.fontFamily,"--mantine-font-family-monospace":e.fontFamilyMonospace,"--mantine-font-family-headings":e.headings.fontFamily,"--mantine-heading-font-weight":e.headings.fontWeight,"--mantine-heading-text-wrap":e.headings.textWrap,"--mantine-radius-default":l,"--mantine-primary-color-filled":`var(--mantine-color-${e.primaryColor}-filled)`,"--mantine-primary-color-filled-hover":`var(--mantine-color-${e.primaryColor}-filled-hover)`,"--mantine-primary-color-light":`var(--mantine-color-${e.primaryColor}-light)`,"--mantine-primary-color-light-hover":`var(--mantine-color-${e.primaryColor}-light-hover)`,"--mantine-primary-color-light-color":`var(--mantine-color-${e.primaryColor}-light-color)`},light:{"--mantine-primary-color-contrast":(0,c.a)(e,"light"),"--mantine-color-bright":"var(--mantine-color-black)","--mantine-color-text":e.black,"--mantine-color-body":e.white,"--mantine-color-error":"var(--mantine-color-red-6)","--mantine-color-placeholder":"var(--mantine-color-gray-5)","--mantine-color-anchor":`var(--mantine-color-${e.primaryColor}-${n})`,"--mantine-color-default":"var(--mantine-color-white)","--mantine-color-default-hover":"var(--mantine-color-gray-0)","--mantine-color-default-color":"var(--mantine-color-black)","--mantine-color-default-border":"var(--mantine-color-gray-4)"},dark:{"--mantine-primary-color-contrast":(0,c.a)(e,"dark"),"--mantine-color-bright":"var(--mantine-color-white)","--mantine-color-text":"var(--mantine-color-dark-0)","--mantine-color-body":"var(--mantine-color-dark-7)","--mantine-color-error":"var(--mantine-color-red-8)","--mantine-color-placeholder":"var(--mantine-color-dark-3)","--mantine-color-anchor":`var(--mantine-color-${e.primaryColor}-4)`,"--mantine-color-default":"var(--mantine-color-dark-6)","--mantine-color-default-hover":"var(--mantine-color-dark-5)","--mantine-color-default-color":"var(--mantine-color-white)","--mantine-color-default-border":"var(--mantine-color-dark-4)"}};s(u.variables,e.breakpoints,"breakpoint"),s(u.variables,e.spacing,"spacing"),s(u.variables,e.fontSizes,"font-size"),s(u.variables,e.lineHeights,"line-height"),s(u.variables,e.shadows,"shadow"),s(u.variables,e.radius,"radius"),e.colors[e.primaryColor].forEach((t,n)=>{u.variables[`--mantine-primary-color-${n}`]=`var(--mantine-color-${e.primaryColor}-${n})`}),(0,r.X)(e.colors).forEach(r=>{e.colors[r].forEach((e,t)=>{u.variables[`--mantine-color-${r}-${t}`]=e});let o=`var(--mantine-color-${r}-${9===n?8:n+1})`,i=`var(--mantine-color-${r}-${9===t?8:t+1})`;u.light["--mantine-color-dimmed"]="var(--mantine-color-gray-6)",u.light[`--mantine-color-${r}-text`]=`var(--mantine-color-${r}-filled)`,u.light[`--mantine-color-${r}-filled`]=`var(--mantine-color-${r}-${n})`,u.light[`--mantine-color-${r}-filled-hover`]=o,u.light[`--mantine-color-${r}-light`]=(0,a.m)(e.colors[r][n],.1),u.light[`--mantine-color-${r}-light-hover`]=(0,a.m)(e.colors[r][n],.12),u.light[`--mantine-color-${r}-light-color`]=`var(--mantine-color-${r}-${n})`,u.light[`--mantine-color-${r}-outline`]=`var(--mantine-color-${r}-${n})`,u.light[`--mantine-color-${r}-outline-hover`]=(0,a.m)(e.colors[r][n],.05),u.dark["--mantine-color-dimmed"]="var(--mantine-color-dark-2)",u.dark[`--mantine-color-${r}-text`]=`var(--mantine-color-${r}-4)`,u.dark[`--mantine-color-${r}-filled`]=`var(--mantine-color-${r}-${t})`,u.dark[`--mantine-color-${r}-filled-hover`]=i,u.dark[`--mantine-color-${r}-light`]=(0,a.m)(e.colors[r][Math.max(0,t-2)],.15),u.dark[`--mantine-color-${r}-light-hover`]=(0,a.m)(e.colors[r][Math.max(0,t-2)],.2),u.dark[`--mantine-color-${r}-light-color`]=`var(--mantine-color-${r}-${Math.max(t-5,0)})`,u.dark[`--mantine-color-${r}-outline`]=`var(--mantine-color-${r}-${Math.max(t-4,0)})`,u.dark[`--mantine-color-${r}-outline-hover`]=(0,a.m)(e.colors[r][Math.max(t-4,0)],.05)});let d=e.headings.sizes;return(0,r.X)(d).forEach(t=>{u.variables[`--mantine-${t}-font-size`]=d[t].fontSize,u.variables[`--mantine-${t}-line-height`]=d[t].lineHeight,u.variables[`--mantine-${t}-font-weight`]=d[t].fontWeight||e.headings.fontWeight}),u}},50221:function(e,t,n){"use strict";n.d(t,{M:function(){return k}});var r=n(27378);function o(e){return"auto"===e||"dark"===e||"light"===e}var i=n(25370),a=n(53007),c=n(27589),s=n(71078),l=n(2256);function u(){let e=(0,l.rZ)(),t=(0,i.R7)(),n=(0,a.X)(e.breakpoints).reduce((t,n)=>{let r=e.breakpoints[n].includes("px"),o=(0,c.px)(e.breakpoints[n]),i=r?`${o-.1}px`:(0,s.em)(o-.1),a=r?`${o}px`:(0,s.em)(o);return`${t}@media (max-width: ${i}) {.mantine-visible-from-${n} {display: none !important;}}@media (min-width: ${a}) {.mantine-hidden-from-${n} {display: none !important;}}`},"");return r.createElement("style",{"data-mantine-styles":"classes",nonce:t?.(),dangerouslySetInnerHTML:{__html:n}})}function d(e){return Object.entries(e).map(([e,t])=>`${e}: ${t};`).join("")}function p(e,t){let n=Array.isArray(e)?e:[e];return n.reduce((e,t)=>`${t}{${e}}`,t)}var m=n(76612),f=n(56641),g=n(10248);let h=(0,f.m)(g.t);function y({cssVariablesSelector:e}){let t=(0,l.rZ)(),n=(0,i.R7)(),o=(0,i.Sm)(),c=function({theme:e,generator:t}){let n=(0,f.m)(e),r=t?.(e);return r?(0,m.R)(n,r):n}({theme:t,generator:o}),s=":root"===e,u=s?function(e){let t={variables:{},light:{},dark:{}};return(0,a.X)(e.variables).forEach(n=>{h.variables[n]!==e.variables[n]&&(t.variables[n]=e.variables[n])}),(0,a.X)(e.light).forEach(n=>{h.light[n]!==e.light[n]&&(t.light[n]=e.light[n])}),(0,a.X)(e.dark).forEach(n=>{h.dark[n]!==e.dark[n]&&(t.dark[n]=e.dark[n])}),t}(c):c,g=function(e,t){let n=d(e.variables),r=n?p(t,n):"",o=d(e.dark),i=o?p(`${t}[data-mantine-color-scheme="dark"]`,o):"",a=d(e.light),c=a?p(`${t}[data-mantine-color-scheme="light"]`,a):"";return`${r}${i}${c}`}(u,e);return g?r.createElement("style",{"data-mantine-styles":!0,nonce:n?.(),dangerouslySetInnerHTML:{__html:`${g}${s?"":` ${e}[data-mantine-color-scheme="dark"] { --mantine-color-scheme: dark; } ${e}[data-mantine-color-scheme="light"] { --mantine-color-scheme: light; } -`}`}}):null}y.displayName="@mantine/CssVariables";var v=n(62849);function b(e,t){let n="auto"!==e?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";t()?.setAttribute("data-mantine-color-scheme",n)}function k({theme:e,children:t,getStyleNonce:n,withCssVariables:a=!0,cssVariablesSelector:c=":root",classNamesPrefix:s="mantine",colorSchemeManager:d=function({key:e="mantine-color-scheme-value"}={}){let t;return{get:t=>{if("undefined"==typeof window)return t;try{let n=window.localStorage.getItem(e);return o(n)?n:t}catch{return t}},set:t=>{try{window.localStorage.setItem(e,t)}catch(e){console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.",e)}},subscribe:n=>{t=t=>{t.storageArea===window.localStorage&&t.key===e&&o(t.newValue)&&n(t.newValue)},window.addEventListener("storage",t)},unsubscribe:()=>{window.removeEventListener("storage",t)},clear:()=>{window.localStorage.removeItem(e)}}}(),defaultColorScheme:p="light",getRootElement:m=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g}){let{colorScheme:h,setColorScheme:k,clearColorScheme:x}=function({manager:e,defaultColorScheme:t,getRootElement:n,forceColorScheme:o}){let i=(0,r.useRef)(),[a,c]=(0,r.useState)(()=>e.get(t)),s=o||a,l=(0,r.useCallback)(t=>{o||(b(t,n),c(t),e.set(t))},[e.set,s,o]),u=(0,r.useCallback)(()=>{c(t),b(t,n),e.clear()},[e.clear,t]);return(0,r.useEffect)(()=>(e.subscribe(l),e.unsubscribe),[e.subscribe,e.unsubscribe]),(0,v.Y)(()=>{b(e.get(t),n)},[]),(0,r.useEffect)(()=>{if(o)return b(o,n),()=>{};void 0===o&&b(a,n),i.current=window.matchMedia("(prefers-color-scheme: dark)");let e=e=>{"auto"===a&&b(e.matches?"dark":"light",n)};return i.current?.addEventListener("change",e),()=>i.current?.removeEventListener("change",e)},[a,o]),{colorScheme:s,setColorScheme:l,clearColorScheme:u}}({defaultColorScheme:p,forceColorScheme:g,manager:d,getRootElement:m});return!function({respectReducedMotion:e,getRootElement:t}){(0,v.Y)(()=>{e&&t()?.setAttribute("data-respect-reduced-motion","true")},[e])}({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:m}),r.createElement(i.XD.Provider,{value:{colorSchemeManager:d,colorScheme:h,setColorScheme:k,clearColorScheme:x,getRootElement:m,classNamesPrefix:s,getStyleNonce:n,cssVariablesResolver:f,cssVariablesSelector:c}},r.createElement(l.M2,{theme:e},a&&r.createElement(y,{cssVariablesSelector:c}),r.createElement(u,null),t))}!function(){let e=console.error;console.error=(...t)=>{t.length>1&&"string"==typeof t[0]&&t[0].toLowerCase().includes("extra attributes from the server")&&"string"==typeof t[1]&&t[1].toLowerCase().includes("data-mantine-color-scheme")||e(...t)}}(),k.displayName="@mantine/core/MantineProvider"},2256:function(e,t,n){"use strict";n.d(t,{M2:function(){return d},rZ:function(){return u}});var r=n(27378),o=n(10248),i=n(76612);function a(e){return!(e<0)&&!(e>9)&&parseInt(e.toString(),10)===e}function c(e){if(!(e.primaryColor in e.colors))throw Error("[@mantine/core] MantineProvider: Invalid theme.primaryColor, it accepts only key of theme.colors, learn more – https://mantine.dev/theming/colors/#primary-color");if("object"==typeof e.primaryShade&&(!a(e.primaryShade.dark)||!a(e.primaryShade.light))||"number"==typeof e.primaryShade&&!a(e.primaryShade))throw Error("[@mantine/core] MantineProvider: Invalid theme.primaryShade, it accepts only 0-9 integers or an object { light: 0-9, dark: 0-9 }")}let s=(0,r.createContext)(null),l=()=>(0,r.useContext)(s)||o.t;function u(){let e=(0,r.useContext)(s);if(!e)throw Error("@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app");return e}function d({theme:e,children:t,inherit:n=!0}){let a=l(),u=(0,r.useMemo)(()=>(function(e,t){if(!t)return c(e),e;let n=(0,i.R)(e,t);return t.fontFamily&&!t.headings?.fontFamily&&(n.headings.fontFamily=t.fontFamily),c(n),n})(n?a:o.t,e),[e,a,n]);return r.createElement(s.Provider,{value:u},t)}d.displayName="@mantine/core/MantineThemeProvider"},97717:function(e,t,n){"use strict";n.d(t,{_:function(){return o}});var r=n(76927);function o(e,t){if(e.startsWith("var("))return`color-mix(in srgb, ${e}, black ${100*t}%)`;let{r:n,g:o,b:i,a}=(0,r.c)(e),c=1-t,s=e=>Math.round(e*c);return`rgba(${s(n)}, ${s(o)}, ${s(i)}, ${a})`}},61658:function(e,t,n){"use strict";n.d(t,{B:function(){return s}});var r=n(71078);n(27378);var o=n(97717),i=n(42911),a=n(88193),c=n(91948);let s=({color:e,theme:t,variant:n,gradient:s,autoContrast:l})=>{let u=(0,a.E)({color:e,theme:t}),d="boolean"==typeof l?l:t.autoContrast;if("filled"===n){let t=d&&u.isLight?"var(--mantine-color-black)":"var(--mantine-color-white)";return u.isThemeColor?void 0===u.shade?{background:`var(--mantine-color-${e}-filled)`,hover:`var(--mantine-color-${e}-filled-hover)`,color:t,border:`${(0,r.h)(1)} solid transparent`}:{background:`var(--mantine-color-${u.color}-${u.shade})`,hover:`var(--mantine-color-${u.color}-${9===u.shade?8:u.shade+1})`,color:t,border:`${(0,r.h)(1)} solid transparent`}:{background:e,hover:(0,o._)(e,.1),color:t,border:`${(0,r.h)(1)} solid transparent`}}if("light"===n){if(u.isThemeColor){if(void 0===u.shade)return{background:`var(--mantine-color-${e}-light)`,hover:`var(--mantine-color-${e}-light-hover)`,color:`var(--mantine-color-${e}-light-color)`,border:`${(0,r.h)(1)} solid transparent`};let n=t.colors[u.color][u.shade];return{background:(0,c.m)(n,.1),hover:(0,c.m)(n,.12),color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}}return{background:(0,c.m)(e,.1),hover:(0,c.m)(e,.12),color:e,border:`${(0,r.h)(1)} solid transparent`}}if("outline"===n)return u.isThemeColor?void 0===u.shade?{background:"transparent",hover:`var(--mantine-color-${e}-outline-hover)`,color:`var(--mantine-color-${e}-outline)`,border:`${(0,r.h)(1)} solid var(--mantine-color-${e}-outline)`}:{background:"transparent",hover:(0,c.m)(t.colors[u.color][u.shade],.05),color:`var(--mantine-color-${u.color}-${u.shade})`,border:`${(0,r.h)(1)} solid var(--mantine-color-${u.color}-${u.shade})`}:{background:"transparent",hover:(0,c.m)(e,.05),color:e,border:`${(0,r.h)(1)} solid ${e}`};if("subtle"===n){if(u.isThemeColor){if(void 0===u.shade)return{background:"transparent",hover:`var(--mantine-color-${e}-light-hover)`,color:`var(--mantine-color-${e}-light-color)`,border:`${(0,r.h)(1)} solid transparent`};let n=t.colors[u.color][u.shade];return{background:"transparent",hover:(0,c.m)(n,.12),color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}}return{background:"transparent",hover:(0,c.m)(e,.12),color:e,border:`${(0,r.h)(1)} solid transparent`}}return"transparent"===n?u.isThemeColor?void 0===u.shade?{background:"transparent",hover:"transparent",color:`var(--mantine-color-${e}-light-color)`,border:`${(0,r.h)(1)} solid transparent`}:{background:"transparent",hover:"transparent",color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}:{background:"transparent",hover:"transparent",color:e,border:`${(0,r.h)(1)} solid transparent`}:"white"===n?u.isThemeColor?void 0===u.shade?{background:"var(--mantine-color-white)",hover:(0,o._)(t.white,.01),color:`var(--mantine-color-${e}-filled)`,border:`${(0,r.h)(1)} solid transparent`}:{background:"var(--mantine-color-white)",hover:(0,o._)(t.white,.01),color:`var(--mantine-color-${u.color}-${u.shade})`,border:`${(0,r.h)(1)} solid transparent`}:{background:"var(--mantine-color-white)",hover:(0,o._)(t.white,.01),color:e,border:`${(0,r.h)(1)} solid transparent`}:"gradient"===n?{background:(0,i.u)(s,t),hover:(0,i.u)(s,t),color:"var(--mantine-color-white)",border:"none"}:"default"===n?{background:"var(--mantine-color-default)",hover:"var(--mantine-color-default-hover)",color:"var(--mantine-color-default-color)",border:`${(0,r.h)(1)} solid var(--mantine-color-default-border)`}:{}}},34121:function(e,t,n){"use strict";n.d(t,{R:function(){return i},a:function(){return a}});var r=n(98901),o=n(88193);function i({color:e,theme:t,autoContrast:n=!0}){let r="boolean"==typeof n?n:t.autoContrast;if(!r)return"var(--mantine-color-white)";let i=(0,o.E)({color:e||t.primaryColor,theme:t});return i.isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function a(e,t){return i({color:e.colors[e.primaryColor][(0,r.j)(e,t)],theme:e,autoContrast:null})}},42911:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(89738);function o(e,t){let n={from:e?.from||t.defaultGradient.from,to:e?.to||t.defaultGradient.to,deg:e?.deg||t.defaultGradient.deg||0},o=(0,r.p)(n.from,t),i=(0,r.p)(n.to,t);return`linear-gradient(${n.deg}deg, ${o} 0%, ${i} 100%)`}},98901:function(e,t,n){"use strict";function r(e,t){return"number"==typeof e.primaryShade?e.primaryShade:"dark"===t?e.primaryShade.dark:e.primaryShade.light}n.d(t,{j:function(){return r}})},89738:function(e,t,n){"use strict";n.d(t,{p:function(){return o}});var r=n(88193);function o(e,t){let n=(0,r.E)({color:e||t.primaryColor,theme:t});return n.variable?`var(${n.variable})`:e}},63987:function(e,t,n){"use strict";n.d(t,{e:function(){return i}});var r=n(76927);function o(e){return e<=.03928?e/12.92:((e+.055)/1.055)**2.4}function i(e,t=.179){return!e.startsWith("var(")&&function(e){if(e.startsWith("oklch("))return(function(e){let t=e.match(/oklch\((.*?)%\s/);return t?parseFloat(t[1]):null}(e)||0)/100;let{r:t,g:n,b:i}=(0,r.c)(e),a=o(t/255),c=o(n/255),s=o(i/255);return .2126*a+.7152*c+.0722*s}(e)>t}},88193:function(e,t,n){"use strict";n.d(t,{E:function(){return i}});var r=n(98901),o=n(63987);function i({color:e,theme:t,colorScheme:n}){if("string"!=typeof e)throw Error(`[@mantine/core] Failed to parse color. Expected color to be a string, instead got ${typeof e}`);if("bright"===e)return{color:e,value:"dark"===n?t.white:t.black,shade:void 0,isThemeColor:!1,isLight:(0,o.e)("dark"===n?t.white:t.black,t.luminanceThreshold),variable:"--mantine-color-bright"};if("dimmed"===e)return{color:e,value:"dark"===n?t.colors.dark[2]:t.colors.gray[7],shade:void 0,isThemeColor:!1,isLight:(0,o.e)("dark"===n?t.colors.dark[2]:t.colors.gray[6],t.luminanceThreshold),variable:"--mantine-color-dimmed"};if("white"===e||"black"===e)return{color:e,value:"white"===e?t.white:t.black,shade:void 0,isThemeColor:!1,isLight:(0,o.e)("white"===e?t.white:t.black,t.luminanceThreshold),variable:`--mantine-color-${e}`};let[i,a]=e.split("."),c=a?Number(a):void 0,s=i in t.colors;if(s){let e=void 0!==c?t.colors[i][c]:t.colors[i][(0,r.j)(t,n||"light")];return{color:i,value:e,shade:c,isThemeColor:s,isLight:(0,o.e)(e,t.luminanceThreshold),variable:a?`--mantine-color-${i}-${c}`:`--mantine-color-${i}-filled`}}return{color:e,value:e,isThemeColor:s,isLight:(0,o.e)(e,t.luminanceThreshold),shade:c,variable:void 0}}},91948:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var r=n(76927);function o(e,t){if("string"!=typeof e||t>1||t<0)return"rgba(0, 0, 0, 1)";if(e.startsWith("var("))return`color-mix(in srgb, ${e}, transparent ${(1-t)*100}%)`;if(e.startsWith("oklch"))return e.includes("/")?e.replace(/\/\s*[\d.]+\s*\)/,`/ ${t})`):e.replace(")",` / ${t})`);let{r:n,g:o,b:i}=(0,r.c)(e);return`rgba(${n}, ${o}, ${i}, ${t})`}},76927:function(e,t,n){"use strict";function r(e){return/^#?([0-9A-F]{3}){1,2}([0-9A-F]{2})?$/i.test(e)?function(e){let t=e.replace("#","");if(3===t.length){let e=t.split("");t=[e[0],e[0],e[1],e[1],e[2],e[2]].join("")}if(8===t.length){let e=parseInt(t.slice(6,8),16)/255;return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:e}}let n=parseInt(t,16);return{r:n>>16&255,g:n>>8&255,b:255&n,a:1}}(e):e.startsWith("rgb")?function(e){let[t,n,r,o]=e.replace(/[^0-9,./]/g,"").split(/[/,]/).map(Number);return{r:t,g:n,b:r,a:o||1}}(e):e.startsWith("hsl")?function(e){let t,n,r;let o=e.match(/^hsla?\(\s*(\d+)\s*,\s*(\d+%)\s*,\s*(\d+%)\s*(,\s*(0?\.\d+|\d+(\.\d+)?))?\s*\)$/i);if(!o)return{r:0,g:0,b:0,a:1};let i=parseInt(o[1],10),a=parseInt(o[2],10)/100,c=parseInt(o[3],10)/100,s=o[5]?parseFloat(o[5]):void 0,l=(1-Math.abs(2*c-1))*a,u=i/60,d=l*(1-Math.abs(u%2-1)),p=c-l/2;return u>=0&&u<1?(t=l,n=d,r=0):u>=1&&u<2?(t=d,n=l,r=0):u>=2&&u<3?(t=0,n=l,r=d):u>=3&&u<4?(t=0,n=d,r=l):u>=4&&u<5?(t=d,n=0,r=l):(t=l,n=0,r=d),{r:Math.round((t+p)*255),g:Math.round((n+p)*255),b:Math.round((r+p)*255),a:s||1}}(e):{r:0,g:0,b:0,a:1}}n.d(t,{c:function(){return r}})},74369:function(e,t,n){"use strict";function r(e){return e}n.d(t,{j:function(){return r}})},10248:function(e,t,n){"use strict";n.d(t,{t:function(){return a}});var r=n(71078);n(27378);var o=n(61658);let i="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",a={scale:1,fontSmoothing:!0,focusRing:"auto",white:"#fff",black:"#000",colors:{dark:["#C9C9C9","#b8b8b8","#828282","#696969","#424242","#3b3b3b","#2e2e2e","#242424","#1f1f1f","#141414"],gray:["#f8f9fa","#f1f3f5","#e9ecef","#dee2e6","#ced4da","#adb5bd","#868e96","#495057","#343a40","#212529"],red:["#fff5f5","#ffe3e3","#ffc9c9","#ffa8a8","#ff8787","#ff6b6b","#fa5252","#f03e3e","#e03131","#c92a2a"],pink:["#fff0f6","#ffdeeb","#fcc2d7","#faa2c1","#f783ac","#f06595","#e64980","#d6336c","#c2255c","#a61e4d"],grape:["#f8f0fc","#f3d9fa","#eebefa","#e599f7","#da77f2","#cc5de8","#be4bdb","#ae3ec9","#9c36b5","#862e9c"],violet:["#f3f0ff","#e5dbff","#d0bfff","#b197fc","#9775fa","#845ef7","#7950f2","#7048e8","#6741d9","#5f3dc4"],indigo:["#edf2ff","#dbe4ff","#bac8ff","#91a7ff","#748ffc","#5c7cfa","#4c6ef5","#4263eb","#3b5bdb","#364fc7"],blue:["#e7f5ff","#d0ebff","#a5d8ff","#74c0fc","#4dabf7","#339af0","#228be6","#1c7ed6","#1971c2","#1864ab"],cyan:["#e3fafc","#c5f6fa","#99e9f2","#66d9e8","#3bc9db","#22b8cf","#15aabf","#1098ad","#0c8599","#0b7285"],teal:["#e6fcf5","#c3fae8","#96f2d7","#63e6be","#38d9a9","#20c997","#12b886","#0ca678","#099268","#087f5b"],green:["#ebfbee","#d3f9d8","#b2f2bb","#8ce99a","#69db7c","#51cf66","#40c057","#37b24d","#2f9e44","#2b8a3e"],lime:["#f4fce3","#e9fac8","#d8f5a2","#c0eb75","#a9e34b","#94d82d","#82c91e","#74b816","#66a80f","#5c940d"],yellow:["#fff9db","#fff3bf","#ffec99","#ffe066","#ffd43b","#fcc419","#fab005","#f59f00","#f08c00","#e67700"],orange:["#fff4e6","#ffe8cc","#ffd8a8","#ffc078","#ffa94d","#ff922b","#fd7e14","#f76707","#e8590c","#d9480f"]},primaryShade:{light:6,dark:8},primaryColor:"blue",variantColorResolver:o.B,autoContrast:!1,luminanceThreshold:.3,fontFamily:i,fontFamilyMonospace:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",respectReducedMotion:!1,cursorType:"default",defaultGradient:{from:"blue",to:"cyan",deg:45},defaultRadius:"sm",activeClassName:"mantine-active",focusClassName:"",headings:{fontFamily:i,fontWeight:"700",textWrap:"wrap",sizes:{h1:{fontSize:(0,r.h)(34),lineHeight:"1.3"},h2:{fontSize:(0,r.h)(26),lineHeight:"1.35"},h3:{fontSize:(0,r.h)(22),lineHeight:"1.4"},h4:{fontSize:(0,r.h)(18),lineHeight:"1.45"},h5:{fontSize:(0,r.h)(16),lineHeight:"1.5"},h6:{fontSize:(0,r.h)(14),lineHeight:"1.5"}}},fontSizes:{xs:(0,r.h)(12),sm:(0,r.h)(14),md:(0,r.h)(16),lg:(0,r.h)(18),xl:(0,r.h)(20)},lineHeights:{xs:"1.4",sm:"1.45",md:"1.55",lg:"1.6",xl:"1.65"},radius:{xs:(0,r.h)(2),sm:(0,r.h)(4),md:(0,r.h)(8),lg:(0,r.h)(16),xl:(0,r.h)(32)},spacing:{xs:(0,r.h)(10),sm:(0,r.h)(12),md:(0,r.h)(16),lg:(0,r.h)(20),xl:(0,r.h)(32)},breakpoints:{xs:"36em",sm:"48em",md:"62em",lg:"75em",xl:"88em"},shadows:{xs:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), 0 ${(0,r.h)(1)} ${(0,r.h)(2)} rgba(0, 0, 0, 0.1)`,sm:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(10)} ${(0,r.h)(15)} ${(0,r.h)(-5)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(7)} ${(0,r.h)(7)} ${(0,r.h)(-5)}`,md:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(20)} ${(0,r.h)(25)} ${(0,r.h)(-5)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(10)} ${(0,r.h)(10)} ${(0,r.h)(-5)}`,lg:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(28)} ${(0,r.h)(23)} ${(0,r.h)(-7)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(12)} ${(0,r.h)(12)} ${(0,r.h)(-7)}`,xl:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(36)} ${(0,r.h)(28)} ${(0,r.h)(-7)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(17)} ${(0,r.h)(17)} ${(0,r.h)(-7)}`},other:{},components:{}}},35499:function(e,t,n){"use strict";n.d(t,{l:function(){return i}});var r=n(81866),o=n(27650);function i(e,t={getInitialValueInEffect:!0}){let n=(0,r.t)(e,t),{colorScheme:i}=(0,o.X)();return"auto"===i?n:i}},27650:function(e,t,n){"use strict";n.d(t,{X:function(){return c}});var r=n(27378),o=n(81866),i=n(25370);function a(){let e=document.createElement("style");return e.innerHTML="*, *::before, *::after {transition: none !important;}",e.setAttribute("data-mantine-disable-transition","true"),document.head.appendChild(e),()=>document.querySelectorAll("[data-mantine-disable-transition]").forEach(e=>e.remove())}function c({keepTransitions:e}={}){let t=(0,r.useRef)(),n=(0,r.useRef)(),c=(0,r.useContext)(i.XD);if(!c)throw Error("[@mantine/core] MantineProvider was not found in tree");let s=r=>{c.setColorScheme(r),t.current=e?()=>{}:a(),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},l=(0,o.t)("light",{getInitialValueInEffect:!1}),u="auto"===c.colorScheme?l:c.colorScheme,d=(0,r.useCallback)(()=>s("light"===u?"dark":"light"),[s,u]);return(0,r.useEffect)(()=>()=>{t.current?.(),window.clearTimeout(n.current)},[]),{colorScheme:c.colorScheme,setColorScheme:s,clearColorScheme:()=>{c.clearColorScheme(),t.current=e?()=>{}:a(),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},toggleColorScheme:d}}},96739:function(e,t,n){"use strict";n.d(t,{w:function(){return i}});var r=n(86689);n(27378);var o=n(2256);function i(e,t,n){let i=(0,o.rZ)(),a=i.components[e]?.defaultProps,c="function"==typeof a?a(i):a;return{...t,...c,...(0,r.L)(n)}}},31788:function(e,t,n){"use strict";function r(e){return e}n.d(t,{F:function(){return r}})},20410:function(e,t,n){"use strict";n.d(t,{d:function(){return i},y:function(){return o}});var r=n(27378);function o(e){return e}function i(e){let t=(0,r.forwardRef)(e);return t.extend=o,t}},50332:function(e,t,n){"use strict";n.d(t,{b:function(){return i}});var r=n(27378),o=n(20410);function i(e){let t=(0,r.forwardRef)(e);return t.extend=o.y,t}},83453:function(e,t,n){"use strict";function r(e){return e}n.d(t,{Z:function(){return r}})},5564:function(e,t,n){"use strict";n.d(t,{h:function(){return a}}),n(27378);var r=n(2256),o=n(26077),i=n(2756);function a({classNames:e,styles:t,props:n,stylesCtx:a}){let c=(0,r.rZ)();return{resolvedClassNames:(0,o.m)({theme:c,classNames:e,props:n,stylesCtx:a||void 0}),resolvedStyles:(0,i.i)({theme:c,styles:t,props:n,stylesCtx:a||void 0})}}},29995:function(e,t,n){"use strict";n.d(t,{C:function(){return o},_:function(){return i}});var r=n(40624);let o={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function i({theme:e,options:t,unstyled:n}){return(0,r.Z)(t?.focusable&&!n&&(e.focusClassName||o[e.focusRing]),t?.active&&!n&&e.activeClassName)}},26077:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(40624);let o={};function i({theme:e,classNames:t,props:n,stylesCtx:i}){let a=Array.isArray(t)?t:[t],c=a.map(t=>"function"==typeof t?t(e,n,i):t||o);return function(e){let t={};return e.forEach(e=>{Object.entries(e).forEach(([e,n])=>{t[e]?t[e]=(0,r.Z)(t[e],n):t[e]=n})}),t}(c)}},2756:function(e,t,n){"use strict";function r({theme:e,styles:t,props:n,stylesCtx:r}){let o=Array.isArray(t)?t:[t];return o.reduce((t,o)=>"function"==typeof o?{...t,...o(e,n,r)}:{...t,...o},{})}n.d(t,{i:function(){return r}})},6231:function(e,t,n){"use strict";n.d(t,{y:function(){return d}}),n(27378);var r=n(25370),o=n(2256),i=n(40624),a=n(29995),c=n(26077),s=n(2756);function l({style:e,theme:t}){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...l({style:n,theme:t})}),{}):"function"==typeof e?e(t):null==e?{}:e}var u=n(86689);function d({name:e,classes:t,props:n,stylesCtx:d,className:p,style:m,rootSelector:f="root",unstyled:g,classNames:h,styles:y,vars:v,varsResolver:b}){let k=(0,o.rZ)(),x=(0,r.uK)(),w=(Array.isArray(e)?e:[e]).filter(e=>e);return(e,r)=>({className:function({theme:e,options:t,themeName:n,selector:r,classNamesPrefix:o,classNames:s,classes:l,unstyled:u,className:d,rootSelector:p,props:m,stylesCtx:f}){return(0,i.Z)((0,a._)({theme:e,options:t,unstyled:u}),function({themeName:e,theme:t,selector:n,props:r,stylesCtx:o}){return e.map(e=>c.m({theme:t,classNames:t.components[e]?.classNames,props:r,stylesCtx:o})?.[n])}({theme:e,themeName:n,selector:r,props:m,stylesCtx:f}),function({options:e,classes:t,selector:n,unstyled:r}){return e?.variant&&!r?t[`${n}--${e.variant}`]:void 0}({options:t,classes:l,selector:r,unstyled:u}),function({selector:e,stylesCtx:t,theme:n,classNames:r,props:o}){return(0,c.m)({theme:n,classNames:r,props:o,stylesCtx:t})[e]}({selector:r,stylesCtx:f,theme:e,classNames:s,props:m}),function({selector:e,stylesCtx:t,options:n,props:r,theme:o}){return(0,c.m)({theme:o,classNames:n?.classNames,props:n?.props||r,stylesCtx:t})[e]}({selector:r,stylesCtx:f,options:t,props:m,theme:e}),function({rootSelector:e,selector:t,className:n}){return e===t?n:void 0}({rootSelector:p,selector:r,className:d}),function({selector:e,classes:t,unstyled:n}){return n?void 0:t[e]}({selector:r,classes:l,unstyled:u}),function({themeName:e,classNamesPrefix:t,selector:n,withStaticClass:r}){return!1===r?[]:e.map(e=>`${t}-${e}-${n}`)}({themeName:n,classNamesPrefix:o,selector:r,withStaticClass:t?.withStaticClass}),t?.className)}({theme:k,options:r,themeName:w,selector:e,classNamesPrefix:x,classNames:h,classes:t,unstyled:g,className:p,rootSelector:f,props:n,stylesCtx:d}),style:function({theme:e,themeName:t,selector:n,options:r,props:o,stylesCtx:i,rootSelector:a,styles:c,style:d,vars:p,varsResolver:m}){return{...function({theme:e,themeName:t,props:n,stylesCtx:r,selector:o}){return t.map(t=>(0,s.i)({theme:e,styles:e.components[t]?.styles,props:n,stylesCtx:r})[o]).reduce((e,t)=>({...e,...t}),{})}({theme:e,themeName:t,props:o,stylesCtx:i,selector:n}),...(0,s.i)({theme:e,styles:c,props:o,stylesCtx:i})[n],...(0,s.i)({theme:e,styles:r?.styles,props:r?.props||o,stylesCtx:i})[n],...function({vars:e,varsResolver:t,theme:n,props:r,stylesCtx:o,selector:i,themeName:a}){return[t?.(n,r,o),...a.map(e=>n.components?.[e]?.vars?.(n,r,o)),e?.(n,r,o)].reduce((e,t)=>(t&&Object.keys(t).forEach(n=>{e[n]={...e[n],...(0,u.L)(t[n])}}),e),{})?.[i]}({theme:e,props:o,stylesCtx:i,vars:p,varsResolver:m,selector:n,themeName:t}),...a===n?l({style:d,theme:e}):null,...l({style:r?.style,theme:e})}}({theme:k,themeName:w,selector:e,options:r,props:n,stylesCtx:d,rootSelector:f,styles:y,style:m,vars:v,varsResolver:b})})}},41664:function(e,t,n){"use strict";function r(e,t){return n=>{e?.(n),t?.(n)}}n.d(t,{x:function(){return r}})},89871:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var r=n(27378);function o(e=null){let t=(0,r.createContext)(e);return[({children:e,value:n})=>r.createElement(t.Provider,{value:n},e),()=>(0,r.useContext)(t)]}},71656:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var r=n(27378);function o(e){let t=(0,r.createContext)(null);return[({children:e,value:n})=>r.createElement(t.Provider,{value:n},e),()=>{let n=(0,r.useContext)(t);if(null===n)throw Error(e);return n}]}},61734:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var r=n(98783);function o({parentSelector:e,siblingSelector:t,onKeyDown:n,loop:o=!0,activateOnFocus:i=!1,dir:a="rtl",orientation:c}){return s=>{n?.(s);let l=Array.from(r.p(s.currentTarget,e)?.querySelectorAll(t)||[]).filter(t=>{var n;return n=s.currentTarget,(0,r.p)(n,e)===(0,r.p)(t,e)}),u=l.findIndex(e=>s.currentTarget===e),d=function(e,t,n){for(let n=e+1;n=0;n-=1)if(!t[n].disabled)return n;if(n){for(let e=t.length-1;e>-1;e-=1)if(!t[e].disabled)return e}return e}(u,l,o),m="rtl"===a?p:d,f="rtl"===a?d:p;switch(s.key){case"ArrowRight":"horizontal"===c&&(s.stopPropagation(),s.preventDefault(),l[m].focus(),i&&l[m].click());break;case"ArrowLeft":"horizontal"===c&&(s.stopPropagation(),s.preventDefault(),l[f].focus(),i&&l[f].click());break;case"ArrowUp":"vertical"===c&&(s.stopPropagation(),s.preventDefault(),l[p].focus(),i&&l[p].click());break;case"ArrowDown":"vertical"===c&&(s.stopPropagation(),s.preventDefault(),l[d].focus(),i&&l[d].click());break;case"Home":s.stopPropagation(),s.preventDefault(),l[0].disabled||l[0].focus();break;case"End":{s.stopPropagation(),s.preventDefault();let e=l.length-1;l[e].disabled||l[e].focus()}}}}},76612:function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&!Array.isArray(e)}n.d(t,{R:function(){return function e(t,n){let o={...t};return r(t)&&r(n)&&Object.keys(n).forEach(i=>{r(n[i])&&i in t?o[i]=e(o[i],n[i]):o[i]=n[i]}),o}}})},86689:function(e,t,n){"use strict";function r(e){return Object.keys(e).reduce((t,n)=>(void 0!==e[n]&&(t[n]=e[n]),t),{})}n.d(t,{L:function(){return r}})},98783:function(e,t,n){"use strict";function r(e,t){let n=e;for(;(n=n.parentElement)&&!n.matches(t););return n}n.d(t,{p:function(){return r}})},13041:function(e,t,n){"use strict";n.d(t,{w:function(){return o}});let r={app:100,modal:200,popover:300,overlay:400,max:9999};function o(e){return r[e]}},96947:function(e,t,n){"use strict";n.d(t,{d:function(){return o}});var r=n(27061);function o(){return void 0!==r&&r.env?"production":"development"}},92082:function(e,t,n){"use strict";n.d(t,{Dp:function(){return l},H5:function(){return c},Xj:function(){return u},ap:function(){return i},bG:function(){return a},yv:function(){return s}});var r=n(96403),o=n(71078);function i(e,t="size",n=!0){if(void 0!==e)return(0,r.s)(e)?n?(0,o.h)(e):e:`var(--${t}-${e})`}function a(e){return i(e,"mantine-spacing")}function c(e){return void 0===e?"var(--mantine-radius-default)":i(e,"mantine-radius")}function s(e){return i(e,"mantine-font-size")}function l(e){return i(e,"mantine-line-height",!1)}function u(e){if(e)return i(e,"mantine-shadow",!1)}},513:function(e,t,n){"use strict";n.d(t,{k:function(){return o}});var r=n(27378);function o(e){return!Array.isArray(e)&&null!==e&&"object"==typeof e&&e.type!==r.Fragment}},96403:function(e,t,n){"use strict";function r(e){return"number"==typeof e||"string"==typeof e&&(!!(e.startsWith("calc(")||e.startsWith("var(")||e.includes(" ")&&""!==e.trim())||/[0-9]/.test(e.trim().replace("-","")[0]))}n.d(t,{s:function(){return r}})},53007:function(e,t,n){"use strict";function r(e){return Object.keys(e)}n.d(t,{X:function(){return r}})},27589:function(e,t,n){"use strict";function r(e){let t="string"==typeof e&&e.includes("var(--mantine-scale)")?e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim():e;return"number"==typeof t?t:"string"==typeof t?t.includes("calc")||t.includes("var")?t:t.includes("px")?Number(t.replace("px","")):t.includes("rem")?16*Number(t.replace("rem","")):t.includes("em")?16*Number(t.replace("em","")):Number(t):NaN}n.d(t,{px:function(){return r}})},71078:function(e,t,n){"use strict";function r(e){return`calc(${e} * var(--mantine-scale))`}function o(e,{shouldScale:t=!1}={}){return function n(o){if(0===o||"0"===o)return`0${e}`;if("number"==typeof o){let n=`${o/16}${e}`;return t?r(n):n}if("string"==typeof o){if(o.startsWith("calc(")||o.startsWith("var(")||o.startsWith("clamp("))return o;if(o.includes(" "))return o.split(" ").map(e=>n(e)).join(" ");if(o.includes(e))return t?r(o):o;let i=o.replace("px","");if(!Number.isNaN(Number(i))){let n=`${Number(i)/16}${e}`;return t?r(n):n}}return o}}n.d(t,{em:function(){return a},h:function(){return i}});let i=o("rem",{shouldScale:!0}),a=o("em")},93226:function(e,t,n){"use strict";n.d(t,{O:function(){return i}});var r=n(27378);let o=["mousedown","touchstart"];function i(e,t,n){let i=(0,r.useRef)();return(0,r.useEffect)(()=>{let r=t=>{let{target:r}=t??{};if(Array.isArray(n)){let o=r?.hasAttribute("data-ignore-outside-clicks")||!document.body.contains(r)&&"HTML"!==r.tagName,i=n.every(e=>!!e&&!t.composedPath().includes(e));i&&!o&&e()}else i.current&&!i.current.contains(r)&&e()};return(t||o).forEach(e=>document.addEventListener(e,r)),()=>{(t||o).forEach(e=>document.removeEventListener(e,r))}},[i,e,n]),i}},1674:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var r=n(27378);function o({timeout:e=2e3}={}){let[t,n]=(0,r.useState)(null),[o,i]=(0,r.useState)(!1),[a,c]=(0,r.useState)(null),s=t=>{window.clearTimeout(a),c(window.setTimeout(()=>i(!1),e)),i(t)};return{copy:e=>{"clipboard"in navigator?navigator.clipboard.writeText(e).then(()=>s(!0)).catch(e=>n(e)):n(Error("useClipboard: navigator.clipboard is not supported"))},reset:()=>{i(!1),n(null),window.clearTimeout(a)},error:t,copied:o}}},81866:function(e,t,n){"use strict";n.d(t,{t:function(){return o}});var r=n(73133);function o(e,t){return(0,r.a)("(prefers-color-scheme: dark)","dark"===e,t)?"dark":"light"}},82591:function(e,t,n){"use strict";n.d(t,{l:function(){return o}});var r=n(27378);function o(e,t){let n=(0,r.useRef)(!1);(0,r.useEffect)(()=>()=>{n.current=!1},[]),(0,r.useEffect)(()=>{if(n.current)return e();n.current=!0},t)}},13955:function(e,t,n){"use strict";n.d(t,{u:function(){return i}});var r=n(27378),o=n(82591);function i({opened:e,shouldReturnFocus:t=!0}){let n=(0,r.useRef)(),i=()=>{n.current&&"focus"in n.current&&"function"==typeof n.current.focus&&n.current?.focus({preventScroll:!0})};return(0,o.l)(()=>{let r=-1,o=e=>{"Tab"===e.key&&window.clearTimeout(r)};return document.addEventListener("keydown",o),e?n.current=document.activeElement:t&&(r=window.setTimeout(i,10)),()=>{window.clearTimeout(r),document.removeEventListener("keydown",o)}},[e,t]),i}},85804:function(e,t,n){"use strict";n.d(t,{N:function(){return i}});var r=n(27378);let o=e=>(e+1)%1e6;function i(){let[,e]=(0,r.useReducer)(o,0);return e}},68439:function(e,t,n){"use strict";function r(e){return t=>(function(e,t){let{alt:n,ctrl:r,meta:o,mod:i,shift:a,key:c}=e,{altKey:s,ctrlKey:l,metaKey:u,shiftKey:d,key:p}=t;if(n!==s)return!1;if(i){if(!l&&!u)return!1}else if(r!==l||o!==u)return!1;return a===d&&!!c&&(p.toLowerCase()===c.toLowerCase()||t.code.replace("Key","").toLowerCase()===c.toLowerCase())})(function(e){let t=e.toLowerCase().split("+").map(e=>e.trim()),n={alt:t.includes("alt"),ctrl:t.includes("ctrl"),meta:t.includes("meta"),mod:t.includes("mod"),shift:t.includes("shift")},r=["alt","ctrl","meta","shift","mod"],o=t.find(e=>!r.includes(e));return{...n,key:o}}(e),t)}function o(e){return t=>{let n="nativeEvent"in t?t.nativeEvent:t;e.forEach(([e,o,i={preventDefault:!0}])=>{r(e)(n)&&(i.preventDefault&&t.preventDefault(),o(n))})}}n.d(t,{k:function(){return r},yr:function(){return o}})},69142:function(e,t,n){"use strict";n.d(t,{A:function(){return i}});var r=n(27378),o=n(68439);function i(e,t=["INPUT","TEXTAREA","SELECT"],n=!1){(0,r.useEffect)(()=>{let r=r=>{e.forEach(([e,i,a={preventDefault:!0}])=>{(0,o.k)(e)(r)&&function(e,t,n=!1){return!(e.target instanceof HTMLElement)||(n?!t.includes(e.target.tagName):!e.target.isContentEditable&&!t.includes(e.target.tagName))}(r,t,n)&&(a.preventDefault&&r.preventDefault(),i(r))})};return document.documentElement.addEventListener("keydown",r),()=>document.documentElement.removeEventListener("keydown",r)},[e])}},31002:function(e,t,n){"use strict";n.d(t,{M:function(){return c}});var r=n(27378),o=n(62849),i=n(55574);let a=r["useId".toString()]||(()=>void 0);function c(e){let t=function(){let e=a();return e?`mantine-${e.replace(/:/g,"")}`:""}(),[n,c]=(0,r.useState)(t);return((0,o.Y)(()=>{c((0,i.k)())},[]),"string"==typeof e)?e:"undefined"==typeof window?t:n}},62849:function(e,t,n){"use strict";n.d(t,{Y:function(){return o}});var r=n(27378);let o="undefined"!=typeof document?r.useLayoutEffect:r.useEffect},2488:function(e,t,n){"use strict";n.d(t,{I:function(){return c}});var r=n(27378),o=n(56617);function i(e){try{return e&&JSON.parse(e)}catch{return e}}function a(e){return{getItem:t=>{try{return window[e].getItem(t)}catch(e){return console.warn("use-local-storage: Failed to get value from storage, localStorage is blocked"),null}},setItem:(t,n)=>{try{window[e].setItem(t,n)}catch(e){console.warn("use-local-storage: Failed to set value to storage, localStorage is blocked")}},removeItem:t=>{try{window[e].removeItem(t)}catch(e){console.warn("use-local-storage: Failed to remove value from storage, localStorage is blocked")}}}}function c(e){return(function(e,t){let n="localStorage"===e?"mantine-local-storage":"mantine-session-storage",{getItem:c,setItem:s,removeItem:l}=a(e);return function({key:a,defaultValue:u,getInitialValueInEffect:d=!0,deserialize:p=i,serialize:m=e=>(function(e,t="use-local-storage"){try{return JSON.stringify(e)}catch(e){throw Error(`@mantine/hooks ${t}: Failed to serialize the value`)}})(e,t)}){let f=(0,r.useCallback)(t=>{let n;try{n="undefined"==typeof window||!(e in window)||null===window[e]||!!t}catch(e){n=!0}if(n)return u;let r=c(a);return null!==r?p(r):u},[a,u]),[g,h]=(0,r.useState)(f(d)),y=(0,r.useCallback)(e=>{e instanceof Function?h(t=>{let r=e(t);return s(a,m(r)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e(t)}})),r}):(s(a,m(e)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e}})),h(e))},[a]),v=(0,r.useCallback)(()=>{l(a),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:u}}))},[]);return(0,o.s)("storage",t=>{t.storageArea===window[e]&&t.key===a&&h(p(t.newValue??void 0))}),(0,o.s)(n,e=>{e.detail.key===a&&h(e.detail.value)}),(0,r.useEffect)(()=>{void 0!==u&&void 0===g&&y(u)},[u,g,y]),(0,r.useEffect)(()=>{d&&h(f())},[]),[void 0===g?u:g,y,v]}})("localStorage","use-local-storage")(e)}!function(e){let{getItem:t}=a(e)}("localStorage")},73133:function(e,t,n){"use strict";n.d(t,{a:function(){return o}});var r=n(27378);function o(e,t,{getInitialValueInEffect:n}={getInitialValueInEffect:!0}){var o;let[i,a]=(0,r.useState)(n?t:"boolean"==typeof o?o:!!("undefined"!=typeof window&&"matchMedia"in window)&&window.matchMedia(e).matches),c=(0,r.useRef)();return(0,r.useEffect)(()=>{if("matchMedia"in window)return c.current=window.matchMedia(e),a(c.current.matches),function(e,t){try{return e.addEventListener("change",t),()=>e.removeEventListener("change",t)}catch(n){return e.addListener(t),()=>e.removeListener(t)}}(c.current,e=>a(e.matches))},[e]),i}},72840:function(e,t,n){"use strict";n.d(t,{Yx:function(){return a},kR:function(){return o},lq:function(){return i}});var r=n(27378);function o(e,t){"function"==typeof e?e(t):"object"==typeof e&&null!==e&&"current"in e&&(e.current=t)}function i(...e){return t=>{e.forEach(e=>o(e,t))}}function a(...e){return(0,r.useCallback)(i(...e),e)}},60790:function(e,t,n){"use strict";n.d(t,{E:function(){return i},r:function(){return a}});var r=n(27378),o=n(28086);function i(e){return{x:(0,o.u)(e.x,0,1),y:(0,o.u)(e.y,0,1)}}function a(e,t,n="ltr"){let i=(0,r.useRef)(null),a=(0,r.useRef)(!1),c=(0,r.useRef)(!1),s=(0,r.useRef)(0),[l,u]=(0,r.useState)(!1);return(0,r.useEffect)(()=>{a.current=!0},[]),(0,r.useEffect)(()=>{let r=({x:t,y:r})=>{cancelAnimationFrame(s.current),s.current=requestAnimationFrame(()=>{if(a.current&&i.current){i.current.style.userSelect="none";let a=i.current.getBoundingClientRect();if(a.width&&a.height){let i=(0,o.u)((t-a.left)/a.width,0,1);e({x:"ltr"===n?i:1-i,y:(0,o.u)((r-a.top)/a.height,0,1)})}}})},l=()=>{document.addEventListener("mousemove",g),document.addEventListener("mouseup",m),document.addEventListener("touchmove",y),document.addEventListener("touchend",m)},d=()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",m),document.removeEventListener("touchmove",y),document.removeEventListener("touchend",m)},p=()=>{!c.current&&a.current&&(c.current=!0,"function"==typeof t?.onScrubStart&&t.onScrubStart(),u(!0),l())},m=()=>{c.current&&a.current&&(c.current=!1,u(!1),d(),setTimeout(()=>{"function"==typeof t?.onScrubEnd&&t.onScrubEnd()},0))},f=e=>{p(),e.preventDefault(),g(e)},g=e=>r({x:e.clientX,y:e.clientY}),h=e=>{e.cancelable&&e.preventDefault(),p(),y(e)},y=e=>{e.cancelable&&e.preventDefault(),r({x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY})};return i.current?.addEventListener("mousedown",f),i.current?.addEventListener("touchstart",h,{passive:!1}),()=>{i.current&&(i.current.removeEventListener("mousedown",f),i.current.removeEventListener("touchstart",h))}},[n,e]),{ref:i,active:l}}},82269:function(e,t,n){"use strict";n.d(t,{J:function(){return o}});var r=n(73133);function o(e,t){return(0,r.a)("(prefers-reduced-motion: reduce)",e,t)}},88936:function(e,t,n){"use strict";n.d(t,{h:function(){return a},y:function(){return i}});var r=n(27378);let o={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};function i(){let e=(0,r.useRef)(0),t=(0,r.useRef)(null),[n,i]=(0,r.useState)(o),a=(0,r.useMemo)(()=>"undefined"!=typeof window?new ResizeObserver(n=>{let r=n[0];r&&(cancelAnimationFrame(e.current),e.current=requestAnimationFrame(()=>{t.current&&i(r.contentRect)}))}):null,[]);return(0,r.useEffect)(()=>(t.current&&a?.observe(t.current),()=>{a?.disconnect(),e.current&&cancelAnimationFrame(e.current)}),[t.current]),[t,n]}function a(){let[e,{width:t,height:n}]=i();return{ref:e,width:t,height:n}}},76318:function(e,t,n){"use strict";n.d(t,{K:function(){return o}});var r=n(27378);function o(e,t,n={autoInvoke:!1}){let o=(0,r.useRef)(null),i=(0,r.useCallback)((...n)=>{o.current||(o.current=window.setTimeout(()=>{e(n),o.current=null},t))},[t]),a=(0,r.useCallback)(()=>{o.current&&(window.clearTimeout(o.current),o.current=null)},[]);return(0,r.useEffect)(()=>(n.autoInvoke&&i(),a),[a,i]),{start:i,clear:a}}},58675:function(e,t,n){"use strict";n.d(t,{C:function(){return o}});var r=n(27378);function o({value:e,defaultValue:t,finalValue:n,onChange:o=()=>{}}){let[i,a]=(0,r.useState)(void 0!==t?t:n);return void 0!==e?[e,o,!0]:[i,(e,...t)=>{a(e),o?.(e,...t)},!1]}},56617:function(e,t,n){"use strict";n.d(t,{s:function(){return o}});var r=n(27378);function o(e,t,n){(0,r.useEffect)(()=>(window.addEventListener(e,t,n),()=>window.removeEventListener(e,t,n)),[e,t])}},28086:function(e,t,n){"use strict";function r(e,t,n){return void 0===t&&void 0===n?e:void 0!==t&&void 0===n?Math.max(e,t):void 0===t&&void 0!==n?Math.min(e,n):Math.min(Math.max(e,t),n)}n.d(t,{u:function(){return r}})},55574:function(e,t,n){"use strict";function r(){return`mantine-${Math.random().toString(36).slice(2,11)}`}n.d(t,{k:function(){return r}})},44258:function(e,t,n){"use strict";function r(e){return"string"!=typeof e?"":e.charAt(0).toUpperCase()+e.slice(1)}n.d(t,{j:function(){return r}})},41788:function(e,t,n){"use strict";n.d(t,{qk:function(){return p},Ro:function(){return a}});var r,o=n(27378);let i="undefined"!=typeof window?o.useLayoutEffect:o.useEffect,[a,c]=(r="mantine-modals",[function(e){let t=Object.keys(e).reduce((t,n)=>(t[`${r}:${n}`]=t=>e[n](t.detail),t),{});i(()=>(Object.keys(t).forEach(e=>{window.removeEventListener(e,t[e]),window.addEventListener(e,t[e])}),()=>Object.keys(t).forEach(e=>{window.removeEventListener(e,t[e])})),[t])},function(e){return(...t)=>{var n,o;return n=`${r}:${String(e)}`,o=t[0],void window.dispatchEvent(new CustomEvent(n,{detail:o}))}}]),s=c("openModal"),l=c("closeModal"),u=c("closeAllModals"),d=c("openConfirmModal"),p={open:s,close:l,closeAll:u,openConfirmModal:d,openContextModal:e=>c("openContextModal")(e)}},59269:function(e,t,n){"use strict";n.d(t,{N9:function(){return l},Ps:function(){return i},yK:function(){return s},zn:function(){return a}});var r=n(55574),o=n(33993);let i=(0,o.M)({notifications:[],queue:[],limit:5}),a=(e=i)=>(0,o.o)(e);function c(e,t){let n=e.getState(),r=t([...n.notifications,...n.queue]);e.setState({notifications:r.slice(0,n.limit),queue:r.slice(n.limit),limit:n.limit})}function s(e,t=i){return c(t,t=>t.filter(t=>t.id!==e||(t.onClose?.(t),!1))),e}let l={show:function(e,t=i){let n=e.id||(0,r.k)();return c(t,t=>e.id&&t.some(t=>t.id===e.id)?t:[...t,{...e,id:n}]),n},hide:s,update:function(e,t=i){return c(t,t=>t.map(t=>t.id===e.id?{...t,...e}:t)),e.id},clean:function(e=i){c(e,()=>[])},cleanQueue:function(e=i){c(e,t=>t.slice(0,e.getState().limit))},updateState:c}},39700:function(e,t,n){"use strict";n.d(t,{$:function(){return _}});var r=n(27378),o=n(13041),i=n(20410),a=n(96739),c=n(58675);function s(e){return void 0!==e.group&&Array.isArray(e.actions)}var l=n(95299),u=n(26853),d=n(19397),p=n(56589),m=n(71656);let[f,g]=(0,m.R)("Spotlight component was not found in tree");var h={root:"m-d2b315db",content:"m-3cd250e0",body:"m-d2abce9b",search:"m-f366a061",actionsList:"m-6e463822",action:"m-d49bb8ef",actionBody:"m-3d475731",actionSection:"m-832642f6",actionLabel:"m-6c2a1345",actionDescription:"m-a6d9d78d",empty:"m-82f78f74",footer:"m-ddcaf054",actionsGroup:"m-5a3e5f7b"};let y={dimmedSections:!0,highlightQuery:!1},v=(0,i.d)((e,t)=>{let n=(0,a.w)("SpotlightAction",y,e),{className:o,style:i,classNames:c,styles:s,id:m,description:f,label:h,leftSection:v,rightSection:b,children:k,dimmedSections:x,highlightQuery:w,highlightColor:E,closeSpotlightOnTrigger:C,onClick:F,onMouseDown:S,keywords:B,vars:j,...I}=n,M=g(),D={classNames:c,styles:s},T=w&&"string"==typeof h?r.createElement(u.y,{component:"span",highlight:M.query,color:E,...M.getStyles("actionLabel",D)},h):r.createElement("span",{...M.getStyles("actionLabel",D)},h);return r.createElement(d.k,{ref:t,"data-action":!0,...M.getStyles("action",{className:o,style:i,...D}),...I,onMouseDown:e=>{e.preventDefault(),S?.(e)},onClick:e=>{F?.(e),(C??M.closeOnActionTrigger)&&l.j5.close(M.store)},tabIndex:-1},k||r.createElement(r.Fragment,null,v&&r.createElement(p.x,{component:"span",mod:{position:"left",dimmed:x},...M.getStyles("actionSection",D)},v),r.createElement("span",{...M.getStyles("actionBody",D)},T,r.createElement("span",{...M.getStyles("actionDescription",D)},f)),b&&r.createElement(p.x,{component:"span",mod:{position:"right",dimmed:x},...M.getStyles("actionSection",D)},b)))});v.classes=h,v.displayName="@mantine/spotlight/SpotlightAction";let b={},k=(0,i.d)((e,t)=>{let{className:n,style:o,styles:i,classNames:c,label:s,children:l,...u}=(0,a.w)("SpotlightActionsGroup",b,e),d=g();return r.createElement(p.x,{...d.getStyles("actionsGroup",{className:n,style:o,classNames:c,styles:i}),ref:t,...u,__vars:{"--spotlight-label":`'${s}'`}},l)});k.classes=h,k.displayName="@mantine/core/SpotlightActionsGroup";var x=n(49849);let w={},E=(0,i.d)((e,t)=>{let{className:n,style:o,id:i,children:c,vars:s,classNames:u,styles:d,...p}=(0,a.w)("SpotlightActionsList",w,e),m=g(),f=`mantine-${(0,r.useId)().replace(/:/g,"")}`,h=i||f;return(0,r.useEffect)(()=>(l.j5.setListId(h,m.store),()=>l.j5.setListId("",m.store)),[]),r.createElement(x.x.Autosize,{...m.getStyles("actionsList",{className:n,style:o,classNames:u,styles:d}),ref:t,type:"scroll",scrollbarSize:"var(--spotlight-actions-list-padding)",offsetScrollbars:"y",id:h,...p},c)});E.classes=h,E.displayName="@mantine/spotlight/SpotlightActionsList";let C={},F=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:c,...s}=(0,a.w)("SpotlightEmpty",C,e),l=g();return r.createElement(p.x,{ref:t,...l.getStyles("empty",{classNames:i,styles:c,className:n,style:o}),...s})});F.classes=h,F.displayName="@mantine/spotlight/SpotlightEmpty";let S={},B=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:c,...s}=(0,a.w)("SpotlightFooter",S,e),l=g();return r.createElement(p.x,{ref:t,...l.getStyles("footer",{className:n,classNames:i,style:o,styles:c}),...s})});B.classes=h,B.displayName="@mantine/spotlight/SpotlightFooter";var j=n(2256),I=n(6231),M=n(72120),D=n(26077),T=n(2756),A=n(71078),P=n(69142),R=n(82591);let N={size:600,yOffset:80,zIndex:(0,o.w)("max"),overlayProps:{backgroundOpacity:.35,blur:7},transitionProps:{duration:200,transition:"pop"},store:l.x9,clearQueryOnClose:!0,closeOnActionTrigger:!0,shortcut:"mod + K",maxHeight:400,scrollable:!1},L=(0,i.d)((e,t)=>{let n=(0,a.w)("SpotlightRoot",N,e),{classNames:o,className:i,style:c,styles:s,unstyled:u,vars:d,store:p,children:m,query:g,onQueryChange:y,transitionProps:v,clearQueryOnClose:b,shortcut:k,tagsToIgnore:x,triggerOnContentEditable:w,disabled:E,onSpotlightOpen:C,onSpotlightClose:F,forceOpened:S,closeOnActionTrigger:B,maxHeight:L,scrollable:H,...$}=n,O=(0,j.rZ)(),{opened:z,query:_}=(0,l.QP)(p),V=e=>{y?.(e),l.j5.setQuery(e,p)},Z=(0,I.y)({name:"Spotlight",classes:h,props:n,className:i,style:c,classNames:o,styles:s,unstyled:u});return((0,P.A)(function(e,t){if(!e)return[];let n=()=>l.j5.open(t);return Array.isArray(e)?e.map(e=>[e,n]):[[e,n]]}(k,p),x,w),(0,R.l)(()=>{z?C?.():F?.()},[z]),E)?null:r.createElement(f,{value:{getStyles:Z,query:g||_,setQuery:V,store:p,closeOnActionTrigger:B}},r.createElement(M.u,{ref:t,...$,withCloseButton:!1,opened:z||!!S,padding:0,onClose:()=>l.j5.close(p),className:i,style:c,classNames:(0,D.m)({theme:O,classNames:[h,o],props:n,stylesCtx:void 0}),styles:(0,T.i)({theme:O,styles:s,props:n,stylesCtx:void 0}),transitionProps:{...v,onExited:()=>{b&&V(""),l.j5.clearSpotlightState({clearQuery:b},p),v?.onExited?.()}},__vars:{"--spotlight-max-height":H?(0,A.h)(L):void 0},__staticSelector:"Spotlight","data-scrollable":H||void 0},m))});L.classes=h,L.displayName="@mantine/spotlight/SpotlightRoot";var H=n(42487);let $={size:"lg"},O=(0,i.d)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:c,vars:s,value:u,...d}=(0,a.w)("SpotlightSearch",$,e),p=g(),m=p.getStyles("search"),[f,h]=r.useState(!1);return r.createElement(H.I,{ref:t,classNames:[{input:m.className},n],styles:[{input:m.style},o],...d,value:u??p.query,onChange:e=>{p.setQuery(e.currentTarget.value),c?.(e)},onKeyDown:e=>{i?.(e),f||("ArrowDown"===e.nativeEvent.code&&(e.preventDefault(),l.j5.selectNextAction(p.store)),"ArrowUp"===e.nativeEvent.code&&(e.preventDefault(),l.j5.selectPreviousAction(p.store)),("Enter"===e.nativeEvent.code||"NumpadEnter"===e.nativeEvent.code)&&(e.preventDefault(),l.j5.triggerSelectedAction(p.store)))},onCompositionStart:()=>h(!0),onCompositionEnd:()=>h(!1)})});O.classes=h,O.displayName="@mantine/spotlight/SpotlightSearch";let z={size:600,yOffset:80,limit:1/0,zIndex:(0,o.w)("max"),overlayProps:{backgroundOpacity:.35,blur:7},transitionProps:{duration:200,transition:"pop"},store:l.x9,filter:(e,t)=>{let n=e.trim().toLowerCase(),r=[[],[]],o=t.reduce((e,t)=>"actions"in t?[...e,...t.actions.map(e=>({...e,group:t.group}))]:[...e,t],[]);return o.forEach(e=>{if(e.label?.toLowerCase().includes(n))r[0].push(e);else{var t;(e.description?.toLowerCase().includes(n)||(Array.isArray(t=e.keywords)?t.map(e=>e.trim()).join(",").toLowerCase().trim():"string"==typeof t?t.toLowerCase().trim():"").includes(n))&&r[1].push(e)}}),function(e){let t={},n=[];return e.forEach(e=>{e.group?(t[e.group]||(t[e.group]={pushed:!1,data:{group:e.group,actions:[]}}),t[e.group].data.actions.push(e),t[e.group].pushed||(t[e.group].pushed=!0,n.push(t[e.group].data))):n.push(e)}),n}(r.flat())},clearQueryOnClose:!0,closeOnActionTrigger:!0,shortcut:"mod + K",highlightQuery:!1},_=(0,i.d)((e,t)=>{let n=(0,a.w)("Spotlight",z,e),{searchProps:o,filter:i,query:l,onQueryChange:u,actions:d,nothingFound:p,highlightQuery:m,limit:f,...g}=n,[h,y]=(0,c.C)({value:l,defaultValue:"",finalValue:"",onChange:u}),b=(function e(t,n){let r=[];if(!Array.isArray(t))return[];for(let o=0;o=n)break;s(i)&&r.push({group:i.group,actions:e(i.actions,n-r.length)}),s(i)||r.push(i)}return r})(i(h,d),f).map(e=>{if(s(e)){let t=e.actions.map(({id:e,...t})=>r.createElement(v,{key:e,highlightQuery:m,...t}));return r.createElement(k,{key:e.group,label:e.group},t)}return r.createElement(v,{key:e.id,highlightQuery:m,...e})});return r.createElement(L,{...g,query:h,onQueryChange:y,ref:t},r.createElement(O,{...o}),r.createElement(E,null,b,0===b.length&&p&&r.createElement(F,null,p)))});_.classes=h,_.displayName="@mantine/spotlight/Spotlight",_.Search=O,_.ActionsList=E,_.Action=v,_.Empty=F,_.ActionsGroup=k,_.Footer=B,_.Root=L,_.open=l.US.open,_.close=l.US.close,_.toggle=l.US.toggle},95299:function(e,t,n){"use strict";n.d(t,{Gv:function(){return f},QP:function(){return a},US:function(){return h},j5:function(){return m},x9:function(){return g}});var r=n(28086),o=n(33993);let i=()=>(0,o.M)({opened:!1,empty:!1,selected:-1,listId:"",query:"",registeredActions:new Set}),a=e=>(0,o.o)(e);function c(e,t){let n=t.getState();t.setState({...n,...e(t.getState())})}function s(e){c(()=>({opened:!0}),e)}function l(e){c(()=>({opened:!1}),e)}function u(e){c(e=>({opened:!e.opened}),e)}function d(e,t){t.updateState(t=>({...t,selected:e}))}function p(e,t){let n=t.getState(),o=document.getElementById(n.listId),i=o?.querySelector("[data-selected]"),a=o?.querySelectorAll("[data-action]")??[],c=-1===e?a.length-1:e===a.length?0:e,s=(0,r.u)(c,0,a.length-1);return i?.removeAttribute("data-selected"),a[s]?.scrollIntoView({block:"nearest"}),a[s]?.setAttribute("data-selected","true"),d(s,t),s}let m={open:s,close:l,toggle:u,updateState:c,setSelectedAction:d,setListId:function(e,t){t.updateState(t=>({...t,listId:e}))},selectAction:p,selectNextAction:function(e){return p(e.getState().selected+1,e)},selectPreviousAction:function(e){return p(e.getState().selected-1,e)},triggerSelectedAction:function(e){let t=e.getState(),n=document.querySelector(`#${t.listId} [data-selected]`);n?.click()},registerAction:function(e,t){let n=t.getState();return n.registeredActions.add(e),()=>{n.registeredActions.delete(e)}},setQuery:function(e,t){c(()=>({query:e}),t),Promise.resolve().then(()=>{p(0,t),c(e=>({empty:e.query.trim().length>0&&0===e.registeredActions.size}),t)})},clearSpotlightState:function({clearQuery:e},t){t.updateState(t=>({...t,selected:-1,query:e?"":t.query,empty:!e&&t.empty}))}};function f(){let e=i();return[e,{open:()=>s(e),close:()=>l(e),toggle:()=>u(e)}]}let[g,h]=f(),{open:y,close:v,toggle:b}=h},33993:function(e,t,n){"use strict";n.d(t,{M:function(){return o},o:function(){return i}});var r=n(27378);function o(e){let t=e,n=!1,r=new Set;return{getState:()=>t,updateState(e){t="function"==typeof e?e(t):e},setState(e){this.updateState(e),r.forEach(e=>e(t))},initialize(e){n||(t=e,n=!0)},subscribe:e=>(r.add(e),()=>r.delete(e))}}function i(e){return(0,r.useSyncExternalStore)(e.subscribe,()=>e.getState(),()=>e.getState())}},97700:function(e,t,n){"use strict";n.d(t,{B:function(){return _}});var r=n(27378),o=n(56589),i=n(71078);function a({withPadding:e=!0,centered:t,maxWidth:n,minHeight:a,children:c,dimmed:s,striped:l}){return r.createElement(o.x,{className:"m-a3c6e060",mod:{"with-padding":e,centered:t,dimmed:s,striped:l},__vars:{"--demo-flex":n?"1":void 0,"--demo-max-width":n?(0,i.h)(n):void 0,"--demo-min-height":a?(0,i.h)(a):void 0,"--demo-margin-y":n&&t?"auto":void 0}},r.createElement("div",{className:"m-ad8eb9d6"},c))}var c=n(10532),s=n(87329),l={code:"m-66990f0a"};function u({code:e,defaultExpanded:t=!0}){let n="string"==typeof e?{code:e,fileName:"Demo.tsx",language:"tsx"}:e;return r.createElement(r.Fragment,null,n&&r.createElement(s.Q,{code:n,className:l.code,getFileIcon:c.g,withExpandButton:!0,defaultExpanded:t}))}var d=n(40624);function p({className:e,...t}){return r.createElement("div",{className:(0,d.Z)("m-761fa02a",e),...t})}function m({code:e,children:t,withPadding:n,centered:o,defaultExpanded:i=!0,maxWidth:c,minHeight:s,dimmed:l,striped:d}){return r.createElement(p,null,r.createElement(a,{withPadding:n,centered:o,maxWidth:c,minHeight:s,dimmed:l,striped:d},t),r.createElement(u,{code:e,defaultExpanded:i}))}var f=n(27884),Text=n(26569),g={columns:"m-df4e856a",controls:"m-de00ac9",header:"m-c4d78f60"};function h({children:e,withPadding:t,centered:n,maxWidth:o,minHeight:i,title:c,description:s,controls:l,dimmed:u,striped:d}){return r.createElement("div",{className:g.columns},r.createElement(a,{withPadding:t,maxWidth:o,minHeight:i,centered:n,dimmed:u,striped:d},e),r.createElement("div",{className:g.controls},c&&r.createElement("div",{className:g.header},r.createElement(Text.x,{fw:500,fz:"sm",mb:5},c),s&&r.createElement(Text.x,{c:"dimmed",fz:11,lh:1.45},s)),l))}var y=n(17829),v=n(44258);function b(e){return(0,v.j)(e.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase())}var k=n(42487),x=n(46674);function w(e){return e.map(e=>"string"==typeof e?{label:(0,v.j)(e),value:e}:{value:e.value,label:(0,v.j)(e.label)})}var E=n(10248),C=n(16202),F=n(38765),S=n(22971),B=n(63433),j=n(19397),I=n(36227),M=n(7033);function D(){return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 200 200",style:{width:(0,i.h)(18),height:(0,i.h)(18)}},r.createElement("path",{fill:"#FF5178",d:"M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"}),r.createElement("path",{fill:"#FF9259",d:"M49.982 13.408a99.999 99.999 0 00-36.595 36.61l51.968 29.99a40 40 0 0114.638-14.645l-30.01-51.955z"}),r.createElement("path",{fill:"#FFD23B",d:"M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"}),r.createElement("path",{fill:"#89C247",d:"M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"}),r.createElement("path",{fill:"#49B296",d:"M13.39 149.989a100.001 100.001 0 0036.599 36.607l30.006-51.958a39.99 39.99 0 01-14.639-14.643l-51.965 29.994z"}),r.createElement("path",{fill:"#2897B1",d:"M49.989 186.596A99.995 99.995 0 0099.987 200l.008-60a39.996 39.996 0 01-20-5.362l-30.007 51.958z"}),r.createElement("path",{fill:"#3EC3FF",d:"M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"}),r.createElement("path",{fill:"#09A1E5",d:"M150.003 186.601a100.001 100.001 0 0036.601-36.604l-51.962-29.998a40 40 0 01-14.641 14.641l30.002 51.961z"}),r.createElement("path",{fill:"#077CCC",d:"M186.607 149.992A99.993 99.993 0 00200 99.99l-60 .006a39.998 39.998 0 01-5.357 20.001l51.964 29.995z"}),r.createElement("path",{fill:"#622876",d:"M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"}),r.createElement("path",{fill:"#962B7C",d:"M186.597 49.99a99.994 99.994 0 00-36.606-36.598l-29.995 51.965a40 40 0 0114.643 14.64l51.958-30.006z"}),r.createElement("path",{fill:"#CB2E81",d:"M149.976 13.384A99.999 99.999 0 0099.973 0l.016 60a40.001 40.001 0 0120.002 5.353l29.985-51.97z"}))}var T={swatch:"m-5e1a038c",check:"m-f9decbb8",colorControl:"m-2f5f7bca"},A=n(28764),P=n(16902);let R=[{value:0,label:"xs"},{value:25,label:"sm"},{value:50,label:"md"},{value:75,label:"lg"},{value:100,label:"xl"}];function N(e,t){let n=e.reduce((e,t)=>(e[t.prop]=t.libraryValue,e),{});return Object.keys(t).reduce((e,r)=>(t[r]!==n[r]&&(e[r]=t[r]),e),{})}function L({code:e,controls:t,state:n}){return"function"==typeof e?e(N(t,n)):function(e,t){let n=[],r=function(e){let t=e.split("\n").find(e=>e.includes("{{props}}"));return t&&t.trim().startsWith("{{props}}")}(t),o=t.replace("{{children}}",e.children||"");for(let[t,r]of Object.entries(e))"children"!==t&&("string"==typeof r?n.push(`${t}="${r}"`):"number"==typeof r?n.push(`${t}={${r}}`):"boolean"==typeof r&&(r?n.push(t):n.push(`${t}={false}`)));if(!r){let e=n.join(" ");return e.length>0?o.replace("{{props}}",` ${e}`):o.replace("{{props}}","")}let i=o.replace(/^(\s*){{props}}(\s*)$/gm,(e,t,r)=>{let o=n.map((e,r)=>`${t}${e}${r!==n.length-1?"\n":""}`).join("");return`${o}${r}`});return i.trim().replace("\n\n","\n")}(N(t,n),e)}let H={boolean:function({value:e,onChange:t,prop:n,...o}){return r.createElement(y.r,{checked:e,onChange:e=>t(e.currentTarget.checked),label:b(n),...o})},segmented:function({data:e,value:t,onChange:n,prop:o,transformLabel:i=!0,...a}){return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(o),...a},r.createElement(x.s,{data:i?w(e):e,value:t,onChange:n,fullWidth:!0,transitionDuration:150}))},color:function({value:e,onChange:t,prop:n,...o}){let[i,a]=(0,r.useState)("#fff"),c=e=>{a(e),t(e)},s=Object.keys(E.t.colors).filter(e=>"dark"!==e).map(n=>r.createElement(C.b,{color:`var(--mantine-color-${n}-filled)`,component:"button",key:n,onClick:()=>t(n),radius:"sm",className:T.swatch,"aria-label":n},e===n&&r.createElement(F.n,{className:T.check})));return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(n),...o},r.createElement(S.Z,{gap:2,mt:2,wrap:"wrap"},s,r.createElement(B.J,{radius:"md",position:"bottom-end",shadow:"md"},r.createElement(B.J.Target,null,r.createElement(j.k,{className:T.colorControl,"aria-label":"Pick color"},r.createElement(D,null))),r.createElement(B.J.Dropdown,{p:8},r.createElement(I.z,{value:i,onChange:c,format:"rgba"}),r.createElement(M.o,{value:i,onChange:e=>c(e.currentTarget.value),placeholder:"Enter color",radius:"md",size:"xs",mt:"xs"})))))},string:function({value:e,onChange:t,prop:n,...o}){return r.createElement(M.o,{value:e,onChange:e=>t(e.currentTarget.value),label:b(n),placeholder:"Enter prop value",...o})},select:function({value:e,onChange:t,prop:n,data:o,...i}){return r.createElement(A.p,{value:e,onChange:e=>t(e.currentTarget.value),label:b(n),data:w(o),...i})},size:function({value:e,onChange:t,prop:n,...o}){let i=R.find(t=>t.label===e).value;return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(n),...o},r.createElement(P.i,{value:i,onChange:e=>t(R.find(t=>t.value===e).label),label:e=>R.find(t=>t.value===e).label,step:25,marks:R,styles:{markLabel:{display:"none"}},thumbLabel:"Size"}))},number:function({value:e,onChange:t,prop:n,step:o,min:i,max:a,...c}){return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(n),...c},r.createElement(P.i,{value:e,onChange:t,step:o,min:i,max:a,thumbLabel:"Size"}))}};function $({code:e,controls:t,children:n,centered:o,maxWidth:i,minHeight:a,withPadding:c,dimmed:s,striped:l}){let d=t.reduce((e,t)=>(e[t.prop]=t.initialValue,e),{}),[m,g]=(0,r.useState)(d),y=(e,t)=>g(n=>({...n,[e]:t})),v=t.map(e=>{let t=H[e.type],{initialValue:n,libraryValue:o,...i}=e;return r.createElement(t,{key:e.prop,value:m[e.prop],onChange:t=>y(e.prop,t),...i})});return r.createElement(p,null,r.createElement(h,{controls:r.createElement(f.K,{className:"m-b14e0e0b",gap:"sm"},v),centered:o,withPadding:c,maxWidth:i,minHeight:a,dimmed:s,striped:l},r.cloneElement(n,m)),r.createElement(u,{code:function({code:e,controls:t,state:n}){if("string"==typeof e||"function"==typeof e)return[{fileName:"Demo.tsx",language:"tsx",code:L({code:e,controls:t,state:n})}];if(Array.isArray(e))return e.map(e=>({fileName:e.fileName||"Demo.tsx",language:e.language||"tsx",code:L({code:e.code,controls:t,state:n})}));throw Error("Unexpected code format in configurator")}({code:e,controls:t,state:m})}))}function O(e){return e?`.${e} { +`}`}}):null}y.displayName="@mantine/CssVariables";var v=n(62849);function b(e,t){let n="auto"!==e?e:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";t()?.setAttribute("data-mantine-color-scheme",n)}function k({theme:e,children:t,getStyleNonce:n,withCssVariables:a=!0,cssVariablesSelector:c=":root",classNamesPrefix:s="mantine",colorSchemeManager:d=function({key:e="mantine-color-scheme-value"}={}){let t;return{get:t=>{if("undefined"==typeof window)return t;try{let n=window.localStorage.getItem(e);return o(n)?n:t}catch{return t}},set:t=>{try{window.localStorage.setItem(e,t)}catch(e){console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.",e)}},subscribe:n=>{t=t=>{t.storageArea===window.localStorage&&t.key===e&&o(t.newValue)&&n(t.newValue)},window.addEventListener("storage",t)},unsubscribe:()=>{window.removeEventListener("storage",t)},clear:()=>{window.localStorage.removeItem(e)}}}(),defaultColorScheme:p="light",getRootElement:m=()=>document.documentElement,cssVariablesResolver:f,forceColorScheme:g}){let{colorScheme:h,setColorScheme:k,clearColorScheme:x}=function({manager:e,defaultColorScheme:t,getRootElement:n,forceColorScheme:o}){let i=(0,r.useRef)(),[a,c]=(0,r.useState)(()=>e.get(t)),s=o||a,l=(0,r.useCallback)(t=>{o||(b(t,n),c(t),e.set(t))},[e.set,s,o]),u=(0,r.useCallback)(()=>{c(t),b(t,n),e.clear()},[e.clear,t]);return(0,r.useEffect)(()=>(e.subscribe(l),e.unsubscribe),[e.subscribe,e.unsubscribe]),(0,v.Y)(()=>{b(e.get(t),n)},[]),(0,r.useEffect)(()=>{if(o)return b(o,n),()=>{};void 0===o&&b(a,n),i.current=window.matchMedia("(prefers-color-scheme: dark)");let e=e=>{"auto"===a&&b(e.matches?"dark":"light",n)};return i.current?.addEventListener("change",e),()=>i.current?.removeEventListener("change",e)},[a,o]),{colorScheme:s,setColorScheme:l,clearColorScheme:u}}({defaultColorScheme:p,forceColorScheme:g,manager:d,getRootElement:m});return!function({respectReducedMotion:e,getRootElement:t}){(0,v.Y)(()=>{e&&t()?.setAttribute("data-respect-reduced-motion","true")},[e])}({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:m}),r.createElement(i.XD.Provider,{value:{colorSchemeManager:d,colorScheme:h,setColorScheme:k,clearColorScheme:x,getRootElement:m,classNamesPrefix:s,getStyleNonce:n,cssVariablesResolver:f,cssVariablesSelector:c}},r.createElement(l.M2,{theme:e},a&&r.createElement(y,{cssVariablesSelector:c}),r.createElement(u,null),t))}!function(){let e=console.error;console.error=(...t)=>{t.length>1&&"string"==typeof t[0]&&t[0].toLowerCase().includes("extra attributes from the server")&&"string"==typeof t[1]&&t[1].toLowerCase().includes("data-mantine-color-scheme")||e(...t)}}(),k.displayName="@mantine/core/MantineProvider"},2256:function(e,t,n){"use strict";n.d(t,{M2:function(){return d},rZ:function(){return u}});var r=n(27378),o=n(10248),i=n(76612);function a(e){return!(e<0)&&!(e>9)&&parseInt(e.toString(),10)===e}function c(e){if(!(e.primaryColor in e.colors))throw Error("[@mantine/core] MantineProvider: Invalid theme.primaryColor, it accepts only key of theme.colors, learn more – https://mantine.dev/theming/colors/#primary-color");if("object"==typeof e.primaryShade&&(!a(e.primaryShade.dark)||!a(e.primaryShade.light))||"number"==typeof e.primaryShade&&!a(e.primaryShade))throw Error("[@mantine/core] MantineProvider: Invalid theme.primaryShade, it accepts only 0-9 integers or an object { light: 0-9, dark: 0-9 }")}let s=(0,r.createContext)(null),l=()=>(0,r.useContext)(s)||o.t;function u(){let e=(0,r.useContext)(s);if(!e)throw Error("@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app");return e}function d({theme:e,children:t,inherit:n=!0}){let a=l(),u=(0,r.useMemo)(()=>(function(e,t){if(!t)return c(e),e;let n=(0,i.R)(e,t);return t.fontFamily&&!t.headings?.fontFamily&&(n.headings.fontFamily=t.fontFamily),c(n),n})(n?a:o.t,e),[e,a,n]);return r.createElement(s.Provider,{value:u},t)}d.displayName="@mantine/core/MantineThemeProvider"},97717:function(e,t,n){"use strict";n.d(t,{_:function(){return o}});var r=n(76927);function o(e,t){if(e.startsWith("var("))return`color-mix(in srgb, ${e}, black ${100*t}%)`;let{r:n,g:o,b:i,a}=(0,r.c)(e),c=1-t,s=e=>Math.round(e*c);return`rgba(${s(n)}, ${s(o)}, ${s(i)}, ${a})`}},61658:function(e,t,n){"use strict";n.d(t,{B:function(){return s}});var r=n(71078);n(27378);var o=n(97717),i=n(42911),a=n(88193),c=n(91948);let s=({color:e,theme:t,variant:n,gradient:s,autoContrast:l})=>{let u=(0,a.E)({color:e,theme:t}),d="boolean"==typeof l?l:t.autoContrast;if("filled"===n){let t=d&&u.isLight?"var(--mantine-color-black)":"var(--mantine-color-white)";return u.isThemeColor?void 0===u.shade?{background:`var(--mantine-color-${e}-filled)`,hover:`var(--mantine-color-${e}-filled-hover)`,color:t,border:`${(0,r.h)(1)} solid transparent`}:{background:`var(--mantine-color-${u.color}-${u.shade})`,hover:`var(--mantine-color-${u.color}-${9===u.shade?8:u.shade+1})`,color:t,border:`${(0,r.h)(1)} solid transparent`}:{background:e,hover:(0,o._)(e,.1),color:t,border:`${(0,r.h)(1)} solid transparent`}}if("light"===n){if(u.isThemeColor){if(void 0===u.shade)return{background:`var(--mantine-color-${e}-light)`,hover:`var(--mantine-color-${e}-light-hover)`,color:`var(--mantine-color-${e}-light-color)`,border:`${(0,r.h)(1)} solid transparent`};let n=t.colors[u.color][u.shade];return{background:(0,c.m)(n,.1),hover:(0,c.m)(n,.12),color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}}return{background:(0,c.m)(e,.1),hover:(0,c.m)(e,.12),color:e,border:`${(0,r.h)(1)} solid transparent`}}if("outline"===n)return u.isThemeColor?void 0===u.shade?{background:"transparent",hover:`var(--mantine-color-${e}-outline-hover)`,color:`var(--mantine-color-${e}-outline)`,border:`${(0,r.h)(1)} solid var(--mantine-color-${e}-outline)`}:{background:"transparent",hover:(0,c.m)(t.colors[u.color][u.shade],.05),color:`var(--mantine-color-${u.color}-${u.shade})`,border:`${(0,r.h)(1)} solid var(--mantine-color-${u.color}-${u.shade})`}:{background:"transparent",hover:(0,c.m)(e,.05),color:e,border:`${(0,r.h)(1)} solid ${e}`};if("subtle"===n){if(u.isThemeColor){if(void 0===u.shade)return{background:"transparent",hover:`var(--mantine-color-${e}-light-hover)`,color:`var(--mantine-color-${e}-light-color)`,border:`${(0,r.h)(1)} solid transparent`};let n=t.colors[u.color][u.shade];return{background:"transparent",hover:(0,c.m)(n,.12),color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}}return{background:"transparent",hover:(0,c.m)(e,.12),color:e,border:`${(0,r.h)(1)} solid transparent`}}return"transparent"===n?u.isThemeColor?void 0===u.shade?{background:"transparent",hover:"transparent",color:`var(--mantine-color-${e}-light-color)`,border:`${(0,r.h)(1)} solid transparent`}:{background:"transparent",hover:"transparent",color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}:{background:"transparent",hover:"transparent",color:e,border:`${(0,r.h)(1)} solid transparent`}:"white"===n?u.isThemeColor?void 0===u.shade?{background:"var(--mantine-color-white)",hover:(0,o._)(t.white,.01),color:`var(--mantine-color-${e}-filled)`,border:`${(0,r.h)(1)} solid transparent`}:{background:"var(--mantine-color-white)",hover:(0,o._)(t.white,.01),color:`var(--mantine-color-${u.color}-${u.shade})`,border:`${(0,r.h)(1)} solid transparent`}:{background:"var(--mantine-color-white)",hover:(0,o._)(t.white,.01),color:e,border:`${(0,r.h)(1)} solid transparent`}:"gradient"===n?{background:(0,i.u)(s,t),hover:(0,i.u)(s,t),color:"var(--mantine-color-white)",border:"none"}:"default"===n?{background:"var(--mantine-color-default)",hover:"var(--mantine-color-default-hover)",color:"var(--mantine-color-default-color)",border:`${(0,r.h)(1)} solid var(--mantine-color-default-border)`}:{}}},55357:function(e,t,n){"use strict";function r(e,t){return"boolean"==typeof e?e:t.autoContrast}n.d(t,{o:function(){return r}})},34121:function(e,t,n){"use strict";n.d(t,{R:function(){return i},a:function(){return a}});var r=n(98901),o=n(88193);function i({color:e,theme:t,autoContrast:n=!0}){let r="boolean"==typeof n?n:t.autoContrast;if(!r)return"var(--mantine-color-white)";let i=(0,o.E)({color:e||t.primaryColor,theme:t});return i.isLight?"var(--mantine-color-black)":"var(--mantine-color-white)"}function a(e,t){return i({color:e.colors[e.primaryColor][(0,r.j)(e,t)],theme:e,autoContrast:null})}},42911:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(89738);function o(e,t){let n={from:e?.from||t.defaultGradient.from,to:e?.to||t.defaultGradient.to,deg:e?.deg||t.defaultGradient.deg||0},o=(0,r.p)(n.from,t),i=(0,r.p)(n.to,t);return`linear-gradient(${n.deg}deg, ${o} 0%, ${i} 100%)`}},98901:function(e,t,n){"use strict";function r(e,t){return"number"==typeof e.primaryShade?e.primaryShade:"dark"===t?e.primaryShade.dark:e.primaryShade.light}n.d(t,{j:function(){return r}})},89738:function(e,t,n){"use strict";n.d(t,{p:function(){return o}});var r=n(88193);function o(e,t){let n=(0,r.E)({color:e||t.primaryColor,theme:t});return n.variable?`var(${n.variable})`:e}},63987:function(e,t,n){"use strict";n.d(t,{e:function(){return i}});var r=n(76927);function o(e){return e<=.03928?e/12.92:((e+.055)/1.055)**2.4}function i(e,t=.179){return!e.startsWith("var(")&&function(e){if(e.startsWith("oklch("))return(function(e){let t=e.match(/oklch\((.*?)%\s/);return t?parseFloat(t[1]):null}(e)||0)/100;let{r:t,g:n,b:i}=(0,r.c)(e),a=o(t/255),c=o(n/255),s=o(i/255);return .2126*a+.7152*c+.0722*s}(e)>t}},88193:function(e,t,n){"use strict";n.d(t,{E:function(){return i}});var r=n(98901),o=n(63987);function i({color:e,theme:t,colorScheme:n}){if("string"!=typeof e)throw Error(`[@mantine/core] Failed to parse color. Expected color to be a string, instead got ${typeof e}`);if("bright"===e)return{color:e,value:"dark"===n?t.white:t.black,shade:void 0,isThemeColor:!1,isLight:(0,o.e)("dark"===n?t.white:t.black,t.luminanceThreshold),variable:"--mantine-color-bright"};if("dimmed"===e)return{color:e,value:"dark"===n?t.colors.dark[2]:t.colors.gray[7],shade:void 0,isThemeColor:!1,isLight:(0,o.e)("dark"===n?t.colors.dark[2]:t.colors.gray[6],t.luminanceThreshold),variable:"--mantine-color-dimmed"};if("white"===e||"black"===e)return{color:e,value:"white"===e?t.white:t.black,shade:void 0,isThemeColor:!1,isLight:(0,o.e)("white"===e?t.white:t.black,t.luminanceThreshold),variable:`--mantine-color-${e}`};let[i,a]=e.split("."),c=a?Number(a):void 0,s=i in t.colors;if(s){let e=void 0!==c?t.colors[i][c]:t.colors[i][(0,r.j)(t,n||"light")];return{color:i,value:e,shade:c,isThemeColor:s,isLight:(0,o.e)(e,t.luminanceThreshold),variable:a?`--mantine-color-${i}-${c}`:`--mantine-color-${i}-filled`}}return{color:e,value:e,isThemeColor:s,isLight:(0,o.e)(e,t.luminanceThreshold),shade:c,variable:void 0}}},91948:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var r=n(76927);function o(e,t){if("string"!=typeof e||t>1||t<0)return"rgba(0, 0, 0, 1)";if(e.startsWith("var("))return`color-mix(in srgb, ${e}, transparent ${(1-t)*100}%)`;if(e.startsWith("oklch"))return e.includes("/")?e.replace(/\/\s*[\d.]+\s*\)/,`/ ${t})`):e.replace(")",` / ${t})`);let{r:n,g:o,b:i}=(0,r.c)(e);return`rgba(${n}, ${o}, ${i}, ${t})`}},76927:function(e,t,n){"use strict";function r(e){return/^#?([0-9A-F]{3}){1,2}([0-9A-F]{2})?$/i.test(e)?function(e){let t=e.replace("#","");if(3===t.length){let e=t.split("");t=[e[0],e[0],e[1],e[1],e[2],e[2]].join("")}if(8===t.length){let e=parseInt(t.slice(6,8),16)/255;return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:e}}let n=parseInt(t,16);return{r:n>>16&255,g:n>>8&255,b:255&n,a:1}}(e):e.startsWith("rgb")?function(e){let[t,n,r,o]=e.replace(/[^0-9,./]/g,"").split(/[/,]/).map(Number);return{r:t,g:n,b:r,a:o||1}}(e):e.startsWith("hsl")?function(e){let t,n,r;let o=e.match(/^hsla?\(\s*(\d+)\s*,\s*(\d+%)\s*,\s*(\d+%)\s*(,\s*(0?\.\d+|\d+(\.\d+)?))?\s*\)$/i);if(!o)return{r:0,g:0,b:0,a:1};let i=parseInt(o[1],10),a=parseInt(o[2],10)/100,c=parseInt(o[3],10)/100,s=o[5]?parseFloat(o[5]):void 0,l=(1-Math.abs(2*c-1))*a,u=i/60,d=l*(1-Math.abs(u%2-1)),p=c-l/2;return u>=0&&u<1?(t=l,n=d,r=0):u>=1&&u<2?(t=d,n=l,r=0):u>=2&&u<3?(t=0,n=l,r=d):u>=3&&u<4?(t=0,n=d,r=l):u>=4&&u<5?(t=d,n=0,r=l):(t=l,n=0,r=d),{r:Math.round((t+p)*255),g:Math.round((n+p)*255),b:Math.round((r+p)*255),a:s||1}}(e):{r:0,g:0,b:0,a:1}}n.d(t,{c:function(){return r}})},74369:function(e,t,n){"use strict";function r(e){return e}n.d(t,{j:function(){return r}})},10248:function(e,t,n){"use strict";n.d(t,{t:function(){return a}});var r=n(71078);n(27378);var o=n(61658);let i="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",a={scale:1,fontSmoothing:!0,focusRing:"auto",white:"#fff",black:"#000",colors:{dark:["#C9C9C9","#b8b8b8","#828282","#696969","#424242","#3b3b3b","#2e2e2e","#242424","#1f1f1f","#141414"],gray:["#f8f9fa","#f1f3f5","#e9ecef","#dee2e6","#ced4da","#adb5bd","#868e96","#495057","#343a40","#212529"],red:["#fff5f5","#ffe3e3","#ffc9c9","#ffa8a8","#ff8787","#ff6b6b","#fa5252","#f03e3e","#e03131","#c92a2a"],pink:["#fff0f6","#ffdeeb","#fcc2d7","#faa2c1","#f783ac","#f06595","#e64980","#d6336c","#c2255c","#a61e4d"],grape:["#f8f0fc","#f3d9fa","#eebefa","#e599f7","#da77f2","#cc5de8","#be4bdb","#ae3ec9","#9c36b5","#862e9c"],violet:["#f3f0ff","#e5dbff","#d0bfff","#b197fc","#9775fa","#845ef7","#7950f2","#7048e8","#6741d9","#5f3dc4"],indigo:["#edf2ff","#dbe4ff","#bac8ff","#91a7ff","#748ffc","#5c7cfa","#4c6ef5","#4263eb","#3b5bdb","#364fc7"],blue:["#e7f5ff","#d0ebff","#a5d8ff","#74c0fc","#4dabf7","#339af0","#228be6","#1c7ed6","#1971c2","#1864ab"],cyan:["#e3fafc","#c5f6fa","#99e9f2","#66d9e8","#3bc9db","#22b8cf","#15aabf","#1098ad","#0c8599","#0b7285"],teal:["#e6fcf5","#c3fae8","#96f2d7","#63e6be","#38d9a9","#20c997","#12b886","#0ca678","#099268","#087f5b"],green:["#ebfbee","#d3f9d8","#b2f2bb","#8ce99a","#69db7c","#51cf66","#40c057","#37b24d","#2f9e44","#2b8a3e"],lime:["#f4fce3","#e9fac8","#d8f5a2","#c0eb75","#a9e34b","#94d82d","#82c91e","#74b816","#66a80f","#5c940d"],yellow:["#fff9db","#fff3bf","#ffec99","#ffe066","#ffd43b","#fcc419","#fab005","#f59f00","#f08c00","#e67700"],orange:["#fff4e6","#ffe8cc","#ffd8a8","#ffc078","#ffa94d","#ff922b","#fd7e14","#f76707","#e8590c","#d9480f"]},primaryShade:{light:6,dark:8},primaryColor:"blue",variantColorResolver:o.B,autoContrast:!1,luminanceThreshold:.3,fontFamily:i,fontFamilyMonospace:"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",respectReducedMotion:!1,cursorType:"default",defaultGradient:{from:"blue",to:"cyan",deg:45},defaultRadius:"sm",activeClassName:"mantine-active",focusClassName:"",headings:{fontFamily:i,fontWeight:"700",textWrap:"wrap",sizes:{h1:{fontSize:(0,r.h)(34),lineHeight:"1.3"},h2:{fontSize:(0,r.h)(26),lineHeight:"1.35"},h3:{fontSize:(0,r.h)(22),lineHeight:"1.4"},h4:{fontSize:(0,r.h)(18),lineHeight:"1.45"},h5:{fontSize:(0,r.h)(16),lineHeight:"1.5"},h6:{fontSize:(0,r.h)(14),lineHeight:"1.5"}}},fontSizes:{xs:(0,r.h)(12),sm:(0,r.h)(14),md:(0,r.h)(16),lg:(0,r.h)(18),xl:(0,r.h)(20)},lineHeights:{xs:"1.4",sm:"1.45",md:"1.55",lg:"1.6",xl:"1.65"},radius:{xs:(0,r.h)(2),sm:(0,r.h)(4),md:(0,r.h)(8),lg:(0,r.h)(16),xl:(0,r.h)(32)},spacing:{xs:(0,r.h)(10),sm:(0,r.h)(12),md:(0,r.h)(16),lg:(0,r.h)(20),xl:(0,r.h)(32)},breakpoints:{xs:"36em",sm:"48em",md:"62em",lg:"75em",xl:"88em"},shadows:{xs:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), 0 ${(0,r.h)(1)} ${(0,r.h)(2)} rgba(0, 0, 0, 0.1)`,sm:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(10)} ${(0,r.h)(15)} ${(0,r.h)(-5)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(7)} ${(0,r.h)(7)} ${(0,r.h)(-5)}`,md:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(20)} ${(0,r.h)(25)} ${(0,r.h)(-5)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(10)} ${(0,r.h)(10)} ${(0,r.h)(-5)}`,lg:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(28)} ${(0,r.h)(23)} ${(0,r.h)(-7)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(12)} ${(0,r.h)(12)} ${(0,r.h)(-7)}`,xl:`0 ${(0,r.h)(1)} ${(0,r.h)(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${(0,r.h)(36)} ${(0,r.h)(28)} ${(0,r.h)(-7)}, rgba(0, 0, 0, 0.04) 0 ${(0,r.h)(17)} ${(0,r.h)(17)} ${(0,r.h)(-7)}`},other:{},components:{}}},35499:function(e,t,n){"use strict";n.d(t,{l:function(){return i}});var r=n(81866),o=n(27650);function i(e,t={getInitialValueInEffect:!0}){let n=(0,r.t)(e,t),{colorScheme:i}=(0,o.X)();return"auto"===i?n:i}},27650:function(e,t,n){"use strict";n.d(t,{X:function(){return c}});var r=n(27378),o=n(81866),i=n(25370);function a(){let e=document.createElement("style");return e.innerHTML="*, *::before, *::after {transition: none !important;}",e.setAttribute("data-mantine-disable-transition","true"),document.head.appendChild(e),()=>document.querySelectorAll("[data-mantine-disable-transition]").forEach(e=>e.remove())}function c({keepTransitions:e}={}){let t=(0,r.useRef)(),n=(0,r.useRef)(),c=(0,r.useContext)(i.XD);if(!c)throw Error("[@mantine/core] MantineProvider was not found in tree");let s=r=>{c.setColorScheme(r),t.current=e?()=>{}:a(),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},l=(0,o.t)("light",{getInitialValueInEffect:!1}),u="auto"===c.colorScheme?l:c.colorScheme,d=(0,r.useCallback)(()=>s("light"===u?"dark":"light"),[s,u]);return(0,r.useEffect)(()=>()=>{t.current?.(),window.clearTimeout(n.current)},[]),{colorScheme:c.colorScheme,setColorScheme:s,clearColorScheme:()=>{c.clearColorScheme(),t.current=e?()=>{}:a(),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},toggleColorScheme:d}}},96739:function(e,t,n){"use strict";n.d(t,{w:function(){return i}});var r=n(86689);n(27378);var o=n(2256);function i(e,t,n){let i=(0,o.rZ)(),a=i.components[e]?.defaultProps,c="function"==typeof a?a(i):a;return{...t,...c,...(0,r.L)(n)}}},31788:function(e,t,n){"use strict";function r(e){return e}n.d(t,{F:function(){return r}})},20410:function(e,t,n){"use strict";n.d(t,{d:function(){return i},y:function(){return o}});var r=n(27378);function o(e){return e}function i(e){let t=(0,r.forwardRef)(e);return t.extend=o,t}},50332:function(e,t,n){"use strict";n.d(t,{b:function(){return i}});var r=n(27378),o=n(20410);function i(e){let t=(0,r.forwardRef)(e);return t.extend=o.y,t}},83453:function(e,t,n){"use strict";function r(e){return e}n.d(t,{Z:function(){return r}})},5564:function(e,t,n){"use strict";n.d(t,{h:function(){return a}}),n(27378);var r=n(2256),o=n(26077),i=n(2756);function a({classNames:e,styles:t,props:n,stylesCtx:a}){let c=(0,r.rZ)();return{resolvedClassNames:(0,o.m)({theme:c,classNames:e,props:n,stylesCtx:a||void 0}),resolvedStyles:(0,i.i)({theme:c,styles:t,props:n,stylesCtx:a||void 0})}}},29995:function(e,t,n){"use strict";n.d(t,{C:function(){return o},_:function(){return i}});var r=n(40624);let o={always:"mantine-focus-always",auto:"mantine-focus-auto",never:"mantine-focus-never"};function i({theme:e,options:t,unstyled:n}){return(0,r.Z)(t?.focusable&&!n&&(e.focusClassName||o[e.focusRing]),t?.active&&!n&&e.activeClassName)}},26077:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(40624);let o={};function i({theme:e,classNames:t,props:n,stylesCtx:i}){let a=Array.isArray(t)?t:[t],c=a.map(t=>"function"==typeof t?t(e,n,i):t||o);return function(e){let t={};return e.forEach(e=>{Object.entries(e).forEach(([e,n])=>{t[e]?t[e]=(0,r.Z)(t[e],n):t[e]=n})}),t}(c)}},2756:function(e,t,n){"use strict";function r({theme:e,styles:t,props:n,stylesCtx:r}){let o=Array.isArray(t)?t:[t];return o.reduce((t,o)=>"function"==typeof o?{...t,...o(e,n,r)}:{...t,...o},{})}n.d(t,{i:function(){return r}})},6231:function(e,t,n){"use strict";n.d(t,{y:function(){return d}}),n(27378);var r=n(25370),o=n(2256),i=n(40624),a=n(29995),c=n(26077),s=n(2756);function l({style:e,theme:t}){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...l({style:n,theme:t})}),{}):"function"==typeof e?e(t):null==e?{}:e}var u=n(86689);function d({name:e,classes:t,props:n,stylesCtx:d,className:p,style:m,rootSelector:f="root",unstyled:g,classNames:h,styles:y,vars:v,varsResolver:b}){let k=(0,o.rZ)(),x=(0,r.uK)(),w=(Array.isArray(e)?e:[e]).filter(e=>e);return(e,r)=>({className:function({theme:e,options:t,themeName:n,selector:r,classNamesPrefix:o,classNames:s,classes:l,unstyled:u,className:d,rootSelector:p,props:m,stylesCtx:f}){return(0,i.Z)((0,a._)({theme:e,options:t,unstyled:u}),function({themeName:e,theme:t,selector:n,props:r,stylesCtx:o}){return e.map(e=>c.m({theme:t,classNames:t.components[e]?.classNames,props:r,stylesCtx:o})?.[n])}({theme:e,themeName:n,selector:r,props:m,stylesCtx:f}),function({options:e,classes:t,selector:n,unstyled:r}){return e?.variant&&!r?t[`${n}--${e.variant}`]:void 0}({options:t,classes:l,selector:r,unstyled:u}),function({selector:e,stylesCtx:t,theme:n,classNames:r,props:o}){return(0,c.m)({theme:n,classNames:r,props:o,stylesCtx:t})[e]}({selector:r,stylesCtx:f,theme:e,classNames:s,props:m}),function({selector:e,stylesCtx:t,options:n,props:r,theme:o}){return(0,c.m)({theme:o,classNames:n?.classNames,props:n?.props||r,stylesCtx:t})[e]}({selector:r,stylesCtx:f,options:t,props:m,theme:e}),function({rootSelector:e,selector:t,className:n}){return e===t?n:void 0}({rootSelector:p,selector:r,className:d}),function({selector:e,classes:t,unstyled:n}){return n?void 0:t[e]}({selector:r,classes:l,unstyled:u}),function({themeName:e,classNamesPrefix:t,selector:n,withStaticClass:r}){return!1===r?[]:e.map(e=>`${t}-${e}-${n}`)}({themeName:n,classNamesPrefix:o,selector:r,withStaticClass:t?.withStaticClass}),t?.className)}({theme:k,options:r,themeName:w,selector:e,classNamesPrefix:x,classNames:h,classes:t,unstyled:g,className:p,rootSelector:f,props:n,stylesCtx:d}),style:function({theme:e,themeName:t,selector:n,options:r,props:o,stylesCtx:i,rootSelector:a,styles:c,style:d,vars:p,varsResolver:m}){return{...function({theme:e,themeName:t,props:n,stylesCtx:r,selector:o}){return t.map(t=>(0,s.i)({theme:e,styles:e.components[t]?.styles,props:n,stylesCtx:r})[o]).reduce((e,t)=>({...e,...t}),{})}({theme:e,themeName:t,props:o,stylesCtx:i,selector:n}),...(0,s.i)({theme:e,styles:c,props:o,stylesCtx:i})[n],...(0,s.i)({theme:e,styles:r?.styles,props:r?.props||o,stylesCtx:i})[n],...function({vars:e,varsResolver:t,theme:n,props:r,stylesCtx:o,selector:i,themeName:a}){return[t?.(n,r,o),...a.map(e=>n.components?.[e]?.vars?.(n,r,o)),e?.(n,r,o)].reduce((e,t)=>(t&&Object.keys(t).forEach(n=>{e[n]={...e[n],...(0,u.L)(t[n])}}),e),{})?.[i]}({theme:e,props:o,stylesCtx:i,vars:p,varsResolver:m,selector:n,themeName:t}),...a===n?l({style:d,theme:e}):null,...l({style:r?.style,theme:e})}}({theme:k,themeName:w,selector:e,options:r,props:n,stylesCtx:d,rootSelector:f,styles:y,style:m,vars:v,varsResolver:b})})}},41664:function(e,t,n){"use strict";function r(e,t){return n=>{e?.(n),t?.(n)}}n.d(t,{x:function(){return r}})},89871:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var r=n(27378);function o(e=null){let t=(0,r.createContext)(e);return[({children:e,value:n})=>r.createElement(t.Provider,{value:n},e),()=>(0,r.useContext)(t)]}},71656:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var r=n(27378);function o(e){let t=(0,r.createContext)(null);return[({children:e,value:n})=>r.createElement(t.Provider,{value:n},e),()=>{let n=(0,r.useContext)(t);if(null===n)throw Error(e);return n}]}},61734:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var r=n(98783);function o({parentSelector:e,siblingSelector:t,onKeyDown:n,loop:o=!0,activateOnFocus:i=!1,dir:a="rtl",orientation:c}){return s=>{n?.(s);let l=Array.from(r.p(s.currentTarget,e)?.querySelectorAll(t)||[]).filter(t=>{var n;return n=s.currentTarget,(0,r.p)(n,e)===(0,r.p)(t,e)}),u=l.findIndex(e=>s.currentTarget===e),d=function(e,t,n){for(let n=e+1;n=0;n-=1)if(!t[n].disabled)return n;if(n){for(let e=t.length-1;e>-1;e-=1)if(!t[e].disabled)return e}return e}(u,l,o),m="rtl"===a?p:d,f="rtl"===a?d:p;switch(s.key){case"ArrowRight":"horizontal"===c&&(s.stopPropagation(),s.preventDefault(),l[m].focus(),i&&l[m].click());break;case"ArrowLeft":"horizontal"===c&&(s.stopPropagation(),s.preventDefault(),l[f].focus(),i&&l[f].click());break;case"ArrowUp":"vertical"===c&&(s.stopPropagation(),s.preventDefault(),l[p].focus(),i&&l[p].click());break;case"ArrowDown":"vertical"===c&&(s.stopPropagation(),s.preventDefault(),l[d].focus(),i&&l[d].click());break;case"Home":s.stopPropagation(),s.preventDefault(),l[0].disabled||l[0].focus();break;case"End":{s.stopPropagation(),s.preventDefault();let e=l.length-1;l[e].disabled||l[e].focus()}}}}},76612:function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&!Array.isArray(e)}n.d(t,{R:function(){return function e(t,n){let o={...t};return r(t)&&r(n)&&Object.keys(n).forEach(i=>{r(n[i])&&i in t?o[i]=e(o[i],n[i]):o[i]=n[i]}),o}}})},86689:function(e,t,n){"use strict";function r(e){return Object.keys(e).reduce((t,n)=>(void 0!==e[n]&&(t[n]=e[n]),t),{})}n.d(t,{L:function(){return r}})},98783:function(e,t,n){"use strict";function r(e,t){let n=e;for(;(n=n.parentElement)&&!n.matches(t););return n}n.d(t,{p:function(){return r}})},13041:function(e,t,n){"use strict";n.d(t,{w:function(){return o}});let r={app:100,modal:200,popover:300,overlay:400,max:9999};function o(e){return r[e]}},96947:function(e,t,n){"use strict";n.d(t,{d:function(){return o}});var r=n(27061);function o(){return void 0!==r&&r.env?"production":"development"}},92082:function(e,t,n){"use strict";n.d(t,{Dp:function(){return l},H5:function(){return c},Xj:function(){return u},ap:function(){return i},bG:function(){return a},yv:function(){return s}});var r=n(96403),o=n(71078);function i(e,t="size",n=!0){if(void 0!==e)return(0,r.s)(e)?n?(0,o.h)(e):e:`var(--${t}-${e})`}function a(e){return i(e,"mantine-spacing")}function c(e){return void 0===e?"var(--mantine-radius-default)":i(e,"mantine-radius")}function s(e){return i(e,"mantine-font-size")}function l(e){return i(e,"mantine-line-height",!1)}function u(e){if(e)return i(e,"mantine-shadow",!1)}},513:function(e,t,n){"use strict";n.d(t,{k:function(){return o}});var r=n(27378);function o(e){return!Array.isArray(e)&&null!==e&&"object"==typeof e&&e.type!==r.Fragment}},96403:function(e,t,n){"use strict";function r(e){return"number"==typeof e||"string"==typeof e&&(!!(e.startsWith("calc(")||e.startsWith("var(")||e.includes(" ")&&""!==e.trim())||/[0-9]/.test(e.trim().replace("-","")[0]))}n.d(t,{s:function(){return r}})},53007:function(e,t,n){"use strict";function r(e){return Object.keys(e)}n.d(t,{X:function(){return r}})},27589:function(e,t,n){"use strict";function r(e){let t="string"==typeof e&&e.includes("var(--mantine-scale)")?e.match(/^calc\((.*?)\)$/)?.[1].split("*")[0].trim():e;return"number"==typeof t?t:"string"==typeof t?t.includes("calc")||t.includes("var")?t:t.includes("px")?Number(t.replace("px","")):t.includes("rem")?16*Number(t.replace("rem","")):t.includes("em")?16*Number(t.replace("em","")):Number(t):NaN}n.d(t,{px:function(){return r}})},71078:function(e,t,n){"use strict";function r(e){return`calc(${e} * var(--mantine-scale))`}function o(e,{shouldScale:t=!1}={}){return function n(o){if(0===o||"0"===o)return`0${e}`;if("number"==typeof o){let n=`${o/16}${e}`;return t?r(n):n}if("string"==typeof o){if(o.startsWith("calc(")||o.startsWith("var(")||o.startsWith("clamp("))return o;if(o.includes(" "))return o.split(" ").map(e=>n(e)).join(" ");if(o.includes(e))return t?r(o):o;let i=o.replace("px","");if(!Number.isNaN(Number(i))){let n=`${Number(i)/16}${e}`;return t?r(n):n}}return o}}n.d(t,{em:function(){return a},h:function(){return i}});let i=o("rem",{shouldScale:!0}),a=o("em")},93226:function(e,t,n){"use strict";n.d(t,{O:function(){return i}});var r=n(27378);let o=["mousedown","touchstart"];function i(e,t,n){let i=(0,r.useRef)();return(0,r.useEffect)(()=>{let r=t=>{let{target:r}=t??{};if(Array.isArray(n)){let o=r?.hasAttribute("data-ignore-outside-clicks")||!document.body.contains(r)&&"HTML"!==r.tagName,i=n.every(e=>!!e&&!t.composedPath().includes(e));i&&!o&&e()}else i.current&&!i.current.contains(r)&&e()};return(t||o).forEach(e=>document.addEventListener(e,r)),()=>{(t||o).forEach(e=>document.removeEventListener(e,r))}},[i,e,n]),i}},1674:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var r=n(27378);function o({timeout:e=2e3}={}){let[t,n]=(0,r.useState)(null),[o,i]=(0,r.useState)(!1),[a,c]=(0,r.useState)(null),s=t=>{window.clearTimeout(a),c(window.setTimeout(()=>i(!1),e)),i(t)};return{copy:e=>{"clipboard"in navigator?navigator.clipboard.writeText(e).then(()=>s(!0)).catch(e=>n(e)):n(Error("useClipboard: navigator.clipboard is not supported"))},reset:()=>{i(!1),n(null),window.clearTimeout(a)},error:t,copied:o}}},81866:function(e,t,n){"use strict";n.d(t,{t:function(){return o}});var r=n(73133);function o(e,t){return(0,r.a)("(prefers-color-scheme: dark)","dark"===e,t)?"dark":"light"}},82591:function(e,t,n){"use strict";n.d(t,{l:function(){return o}});var r=n(27378);function o(e,t){let n=(0,r.useRef)(!1);(0,r.useEffect)(()=>()=>{n.current=!1},[]),(0,r.useEffect)(()=>{if(n.current)return e();n.current=!0},t)}},13955:function(e,t,n){"use strict";n.d(t,{u:function(){return i}});var r=n(27378),o=n(82591);function i({opened:e,shouldReturnFocus:t=!0}){let n=(0,r.useRef)(),i=()=>{n.current&&"focus"in n.current&&"function"==typeof n.current.focus&&n.current?.focus({preventScroll:!0})};return(0,o.l)(()=>{let r=-1,o=e=>{"Tab"===e.key&&window.clearTimeout(r)};return document.addEventListener("keydown",o),e?n.current=document.activeElement:t&&(r=window.setTimeout(i,10)),()=>{window.clearTimeout(r),document.removeEventListener("keydown",o)}},[e,t]),i}},85804:function(e,t,n){"use strict";n.d(t,{N:function(){return i}});var r=n(27378);let o=e=>(e+1)%1e6;function i(){let[,e]=(0,r.useReducer)(o,0);return e}},68439:function(e,t,n){"use strict";function r(e){return t=>(function(e,t){let{alt:n,ctrl:r,meta:o,mod:i,shift:a,key:c}=e,{altKey:s,ctrlKey:l,metaKey:u,shiftKey:d,key:p}=t;if(n!==s)return!1;if(i){if(!l&&!u)return!1}else if(r!==l||o!==u)return!1;return a===d&&!!c&&(p.toLowerCase()===c.toLowerCase()||t.code.replace("Key","").toLowerCase()===c.toLowerCase())})(function(e){let t=e.toLowerCase().split("+").map(e=>e.trim()),n={alt:t.includes("alt"),ctrl:t.includes("ctrl"),meta:t.includes("meta"),mod:t.includes("mod"),shift:t.includes("shift")},r=["alt","ctrl","meta","shift","mod"],o=t.find(e=>!r.includes(e));return{...n,key:o}}(e),t)}function o(e){return t=>{let n="nativeEvent"in t?t.nativeEvent:t;e.forEach(([e,o,i={preventDefault:!0}])=>{r(e)(n)&&(i.preventDefault&&t.preventDefault(),o(n))})}}n.d(t,{k:function(){return r},yr:function(){return o}})},69142:function(e,t,n){"use strict";n.d(t,{A:function(){return i}});var r=n(27378),o=n(68439);function i(e,t=["INPUT","TEXTAREA","SELECT"],n=!1){(0,r.useEffect)(()=>{let r=r=>{e.forEach(([e,i,a={preventDefault:!0}])=>{(0,o.k)(e)(r)&&function(e,t,n=!1){return!(e.target instanceof HTMLElement)||(n?!t.includes(e.target.tagName):!e.target.isContentEditable&&!t.includes(e.target.tagName))}(r,t,n)&&(a.preventDefault&&r.preventDefault(),i(r))})};return document.documentElement.addEventListener("keydown",r),()=>document.documentElement.removeEventListener("keydown",r)},[e])}},31002:function(e,t,n){"use strict";n.d(t,{M:function(){return c}});var r=n(27378),o=n(62849),i=n(55574);let a=r["useId".toString()]||(()=>void 0);function c(e){let t=function(){let e=a();return e?`mantine-${e.replace(/:/g,"")}`:""}(),[n,c]=(0,r.useState)(t);return((0,o.Y)(()=>{c((0,i.k)())},[]),"string"==typeof e)?e:"undefined"==typeof window?t:n}},62849:function(e,t,n){"use strict";n.d(t,{Y:function(){return o}});var r=n(27378);let o="undefined"!=typeof document?r.useLayoutEffect:r.useEffect},2488:function(e,t,n){"use strict";n.d(t,{I:function(){return c}});var r=n(27378),o=n(56617);function i(e){try{return e&&JSON.parse(e)}catch{return e}}function a(e){return{getItem:t=>{try{return window[e].getItem(t)}catch(e){return console.warn("use-local-storage: Failed to get value from storage, localStorage is blocked"),null}},setItem:(t,n)=>{try{window[e].setItem(t,n)}catch(e){console.warn("use-local-storage: Failed to set value to storage, localStorage is blocked")}},removeItem:t=>{try{window[e].removeItem(t)}catch(e){console.warn("use-local-storage: Failed to remove value from storage, localStorage is blocked")}}}}function c(e){return(function(e,t){let n="localStorage"===e?"mantine-local-storage":"mantine-session-storage",{getItem:c,setItem:s,removeItem:l}=a(e);return function({key:a,defaultValue:u,getInitialValueInEffect:d=!0,deserialize:p=i,serialize:m=e=>(function(e,t="use-local-storage"){try{return JSON.stringify(e)}catch(e){throw Error(`@mantine/hooks ${t}: Failed to serialize the value`)}})(e,t)}){let f=(0,r.useCallback)(t=>{let n;try{n="undefined"==typeof window||!(e in window)||null===window[e]||!!t}catch(e){n=!0}if(n)return u;let r=c(a);return null!==r?p(r):u},[a,u]),[g,h]=(0,r.useState)(f(d)),y=(0,r.useCallback)(e=>{e instanceof Function?h(t=>{let r=e(t);return s(a,m(r)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e(t)}})),r}):(s(a,m(e)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e}})),h(e))},[a]),v=(0,r.useCallback)(()=>{l(a),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:u}}))},[]);return(0,o.s)("storage",t=>{t.storageArea===window[e]&&t.key===a&&h(p(t.newValue??void 0))}),(0,o.s)(n,e=>{e.detail.key===a&&h(e.detail.value)}),(0,r.useEffect)(()=>{void 0!==u&&void 0===g&&y(u)},[u,g,y]),(0,r.useEffect)(()=>{d&&y(f())},[]),[void 0===g?u:g,y,v]}})("localStorage","use-local-storage")(e)}!function(e){let{getItem:t}=a(e)}("localStorage")},73133:function(e,t,n){"use strict";n.d(t,{a:function(){return o}});var r=n(27378);function o(e,t,{getInitialValueInEffect:n}={getInitialValueInEffect:!0}){var o;let[i,a]=(0,r.useState)(n?t:"boolean"==typeof o?o:!!("undefined"!=typeof window&&"matchMedia"in window)&&window.matchMedia(e).matches),c=(0,r.useRef)();return(0,r.useEffect)(()=>{if("matchMedia"in window)return c.current=window.matchMedia(e),a(c.current.matches),function(e,t){try{return e.addEventListener("change",t),()=>e.removeEventListener("change",t)}catch(n){return e.addListener(t),()=>e.removeListener(t)}}(c.current,e=>a(e.matches))},[e]),i}},72840:function(e,t,n){"use strict";n.d(t,{Yx:function(){return a},kR:function(){return o},lq:function(){return i}});var r=n(27378);function o(e,t){"function"==typeof e?e(t):"object"==typeof e&&null!==e&&"current"in e&&(e.current=t)}function i(...e){return t=>{e.forEach(e=>o(e,t))}}function a(...e){return(0,r.useCallback)(i(...e),e)}},60790:function(e,t,n){"use strict";n.d(t,{E:function(){return i},r:function(){return a}});var r=n(27378),o=n(28086);function i(e){return{x:(0,o.u)(e.x,0,1),y:(0,o.u)(e.y,0,1)}}function a(e,t,n="ltr"){let i=(0,r.useRef)(null),a=(0,r.useRef)(!1),c=(0,r.useRef)(!1),s=(0,r.useRef)(0),[l,u]=(0,r.useState)(!1);return(0,r.useEffect)(()=>{a.current=!0},[]),(0,r.useEffect)(()=>{let r=({x:t,y:r})=>{cancelAnimationFrame(s.current),s.current=requestAnimationFrame(()=>{if(a.current&&i.current){i.current.style.userSelect="none";let a=i.current.getBoundingClientRect();if(a.width&&a.height){let i=(0,o.u)((t-a.left)/a.width,0,1);e({x:"ltr"===n?i:1-i,y:(0,o.u)((r-a.top)/a.height,0,1)})}}})},l=()=>{document.addEventListener("mousemove",g),document.addEventListener("mouseup",m),document.addEventListener("touchmove",y),document.addEventListener("touchend",m)},d=()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",m),document.removeEventListener("touchmove",y),document.removeEventListener("touchend",m)},p=()=>{!c.current&&a.current&&(c.current=!0,"function"==typeof t?.onScrubStart&&t.onScrubStart(),u(!0),l())},m=()=>{c.current&&a.current&&(c.current=!1,u(!1),d(),setTimeout(()=>{"function"==typeof t?.onScrubEnd&&t.onScrubEnd()},0))},f=e=>{p(),e.preventDefault(),g(e)},g=e=>r({x:e.clientX,y:e.clientY}),h=e=>{e.cancelable&&e.preventDefault(),p(),y(e)},y=e=>{e.cancelable&&e.preventDefault(),r({x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY})};return i.current?.addEventListener("mousedown",f),i.current?.addEventListener("touchstart",h,{passive:!1}),()=>{i.current&&(i.current.removeEventListener("mousedown",f),i.current.removeEventListener("touchstart",h))}},[n,e]),{ref:i,active:l}}},82269:function(e,t,n){"use strict";n.d(t,{J:function(){return o}});var r=n(73133);function o(e,t){return(0,r.a)("(prefers-reduced-motion: reduce)",e,t)}},88936:function(e,t,n){"use strict";n.d(t,{h:function(){return a},y:function(){return i}});var r=n(27378);let o={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};function i(){let e=(0,r.useRef)(0),t=(0,r.useRef)(null),[n,i]=(0,r.useState)(o),a=(0,r.useMemo)(()=>"undefined"!=typeof window?new ResizeObserver(n=>{let r=n[0];r&&(cancelAnimationFrame(e.current),e.current=requestAnimationFrame(()=>{t.current&&i(r.contentRect)}))}):null,[]);return(0,r.useEffect)(()=>(t.current&&a?.observe(t.current),()=>{a?.disconnect(),e.current&&cancelAnimationFrame(e.current)}),[t.current]),[t,n]}function a(){let[e,{width:t,height:n}]=i();return{ref:e,width:t,height:n}}},76318:function(e,t,n){"use strict";n.d(t,{K:function(){return o}});var r=n(27378);function o(e,t,n={autoInvoke:!1}){let o=(0,r.useRef)(null),i=(0,r.useCallback)((...n)=>{o.current||(o.current=window.setTimeout(()=>{e(n),o.current=null},t))},[t]),a=(0,r.useCallback)(()=>{o.current&&(window.clearTimeout(o.current),o.current=null)},[]);return(0,r.useEffect)(()=>(n.autoInvoke&&i(),a),[a,i]),{start:i,clear:a}}},58675:function(e,t,n){"use strict";n.d(t,{C:function(){return o}});var r=n(27378);function o({value:e,defaultValue:t,finalValue:n,onChange:o=()=>{}}){let[i,a]=(0,r.useState)(void 0!==t?t:n);return void 0!==e?[e,o,!0]:[i,(e,...t)=>{a(e),o?.(e,...t)},!1]}},56617:function(e,t,n){"use strict";n.d(t,{s:function(){return o}});var r=n(27378);function o(e,t,n){(0,r.useEffect)(()=>(window.addEventListener(e,t,n),()=>window.removeEventListener(e,t,n)),[e,t])}},28086:function(e,t,n){"use strict";function r(e,t,n){return void 0===t&&void 0===n?e:void 0!==t&&void 0===n?Math.max(e,t):void 0===t&&void 0!==n?Math.min(e,n):Math.min(Math.max(e,t),n)}n.d(t,{u:function(){return r}})},55574:function(e,t,n){"use strict";function r(){return`mantine-${Math.random().toString(36).slice(2,11)}`}n.d(t,{k:function(){return r}})},44258:function(e,t,n){"use strict";function r(e){return"string"!=typeof e?"":e.charAt(0).toUpperCase()+e.slice(1)}n.d(t,{j:function(){return r}})},41788:function(e,t,n){"use strict";n.d(t,{qk:function(){return p},Ro:function(){return a}});var r,o=n(27378);let i="undefined"!=typeof window?o.useLayoutEffect:o.useEffect,[a,c]=(r="mantine-modals",[function(e){let t=Object.keys(e).reduce((t,n)=>(t[`${r}:${n}`]=t=>e[n](t.detail),t),{});i(()=>(Object.keys(t).forEach(e=>{window.removeEventListener(e,t[e]),window.addEventListener(e,t[e])}),()=>Object.keys(t).forEach(e=>{window.removeEventListener(e,t[e])})),[t])},function(e){return(...t)=>{var n,o;return n=`${r}:${String(e)}`,o=t[0],void window.dispatchEvent(new CustomEvent(n,{detail:o}))}}]),s=c("openModal"),l=c("closeModal"),u=c("closeAllModals"),d=c("openConfirmModal"),p={open:s,close:l,closeAll:u,openConfirmModal:d,openContextModal:e=>c("openContextModal")(e)}},59269:function(e,t,n){"use strict";n.d(t,{N9:function(){return l},Ps:function(){return i},yK:function(){return s},zn:function(){return a}});var r=n(55574),o=n(33993);let i=(0,o.M)({notifications:[],queue:[],limit:5}),a=(e=i)=>(0,o.o)(e);function c(e,t){let n=e.getState(),r=t([...n.notifications,...n.queue]);e.setState({notifications:r.slice(0,n.limit),queue:r.slice(n.limit),limit:n.limit})}function s(e,t=i){return c(t,t=>t.filter(t=>t.id!==e||(t.onClose?.(t),!1))),e}let l={show:function(e,t=i){let n=e.id||(0,r.k)();return c(t,t=>e.id&&t.some(t=>t.id===e.id)?t:[...t,{...e,id:n}]),n},hide:s,update:function(e,t=i){return c(t,t=>t.map(t=>t.id===e.id?{...t,...e}:t)),e.id},clean:function(e=i){c(e,()=>[])},cleanQueue:function(e=i){c(e,t=>t.slice(0,e.getState().limit))},updateState:c}},39700:function(e,t,n){"use strict";n.d(t,{$:function(){return _}});var r=n(27378),o=n(13041),i=n(20410),a=n(96739),c=n(58675);function s(e){return void 0!==e.group&&Array.isArray(e.actions)}var l=n(95299),u=n(26853),d=n(19397),p=n(56589),m=n(71656);let[f,g]=(0,m.R)("Spotlight component was not found in tree");var h={root:"m-d2b315db",content:"m-3cd250e0",body:"m-d2abce9b",search:"m-f366a061",actionsList:"m-6e463822",action:"m-d49bb8ef",actionBody:"m-3d475731",actionSection:"m-832642f6",actionLabel:"m-6c2a1345",actionDescription:"m-a6d9d78d",empty:"m-82f78f74",footer:"m-ddcaf054",actionsGroup:"m-5a3e5f7b"};let y={dimmedSections:!0,highlightQuery:!1},v=(0,i.d)((e,t)=>{let n=(0,a.w)("SpotlightAction",y,e),{className:o,style:i,classNames:c,styles:s,id:m,description:f,label:h,leftSection:v,rightSection:b,children:k,dimmedSections:x,highlightQuery:w,highlightColor:E,closeSpotlightOnTrigger:C,onClick:F,onMouseDown:S,keywords:B,vars:j,...I}=n,M=g(),D={classNames:c,styles:s},T=w&&"string"==typeof h?r.createElement(u.y,{component:"span",highlight:M.query,color:E,...M.getStyles("actionLabel",D)},h):r.createElement("span",{...M.getStyles("actionLabel",D)},h);return r.createElement(d.k,{ref:t,"data-action":!0,...M.getStyles("action",{className:o,style:i,...D}),...I,onMouseDown:e=>{e.preventDefault(),S?.(e)},onClick:e=>{F?.(e),(C??M.closeOnActionTrigger)&&l.j5.close(M.store)},tabIndex:-1},k||r.createElement(r.Fragment,null,v&&r.createElement(p.x,{component:"span",mod:{position:"left",dimmed:x},...M.getStyles("actionSection",D)},v),r.createElement("span",{...M.getStyles("actionBody",D)},T,r.createElement("span",{...M.getStyles("actionDescription",D)},f)),b&&r.createElement(p.x,{component:"span",mod:{position:"right",dimmed:x},...M.getStyles("actionSection",D)},b)))});v.classes=h,v.displayName="@mantine/spotlight/SpotlightAction";let b={},k=(0,i.d)((e,t)=>{let{className:n,style:o,styles:i,classNames:c,label:s,children:l,...u}=(0,a.w)("SpotlightActionsGroup",b,e),d=g();return r.createElement(p.x,{...d.getStyles("actionsGroup",{className:n,style:o,classNames:c,styles:i}),ref:t,...u,__vars:{"--spotlight-label":`'${s}'`}},l)});k.classes=h,k.displayName="@mantine/core/SpotlightActionsGroup";var x=n(49849);let w={},E=(0,i.d)((e,t)=>{let{className:n,style:o,id:i,children:c,vars:s,classNames:u,styles:d,...p}=(0,a.w)("SpotlightActionsList",w,e),m=g(),f=`mantine-${(0,r.useId)().replace(/:/g,"")}`,h=i||f;return(0,r.useEffect)(()=>(l.j5.setListId(h,m.store),()=>l.j5.setListId("",m.store)),[]),r.createElement(x.x.Autosize,{...m.getStyles("actionsList",{className:n,style:o,classNames:u,styles:d}),ref:t,type:"scroll",scrollbarSize:"var(--spotlight-actions-list-padding)",offsetScrollbars:"y",id:h,...p},c)});E.classes=h,E.displayName="@mantine/spotlight/SpotlightActionsList";let C={},F=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:c,...s}=(0,a.w)("SpotlightEmpty",C,e),l=g();return r.createElement(p.x,{ref:t,...l.getStyles("empty",{classNames:i,styles:c,className:n,style:o}),...s})});F.classes=h,F.displayName="@mantine/spotlight/SpotlightEmpty";let S={},B=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:c,...s}=(0,a.w)("SpotlightFooter",S,e),l=g();return r.createElement(p.x,{ref:t,...l.getStyles("footer",{className:n,classNames:i,style:o,styles:c}),...s})});B.classes=h,B.displayName="@mantine/spotlight/SpotlightFooter";var j=n(2256),I=n(6231),M=n(72120),D=n(26077),T=n(2756),A=n(71078),P=n(69142),R=n(82591);let N={size:600,yOffset:80,zIndex:(0,o.w)("max"),overlayProps:{backgroundOpacity:.35,blur:7},transitionProps:{duration:200,transition:"pop"},store:l.x9,clearQueryOnClose:!0,closeOnActionTrigger:!0,shortcut:"mod + K",maxHeight:400,scrollable:!1},L=(0,i.d)((e,t)=>{let n=(0,a.w)("SpotlightRoot",N,e),{classNames:o,className:i,style:c,styles:s,unstyled:u,vars:d,store:p,children:m,query:g,onQueryChange:y,transitionProps:v,clearQueryOnClose:b,shortcut:k,tagsToIgnore:x,triggerOnContentEditable:w,disabled:E,onSpotlightOpen:C,onSpotlightClose:F,forceOpened:S,closeOnActionTrigger:B,maxHeight:L,scrollable:H,...$}=n,O=(0,j.rZ)(),{opened:z,query:_}=(0,l.QP)(p),V=e=>{y?.(e),l.j5.setQuery(e,p)},Z=(0,I.y)({name:"Spotlight",classes:h,props:n,className:i,style:c,classNames:o,styles:s,unstyled:u});return((0,P.A)(function(e,t){if(!e)return[];let n=()=>l.j5.open(t);return Array.isArray(e)?e.map(e=>[e,n]):[[e,n]]}(k,p),x,w),(0,R.l)(()=>{z?C?.():F?.()},[z]),E)?null:r.createElement(f,{value:{getStyles:Z,query:g||_,setQuery:V,store:p,closeOnActionTrigger:B}},r.createElement(M.u,{ref:t,...$,withCloseButton:!1,opened:z||!!S,padding:0,onClose:()=>l.j5.close(p),className:i,style:c,classNames:(0,D.m)({theme:O,classNames:[h,o],props:n,stylesCtx:void 0}),styles:(0,T.i)({theme:O,styles:s,props:n,stylesCtx:void 0}),transitionProps:{...v,onExited:()=>{b&&V(""),l.j5.clearSpotlightState({clearQuery:b},p),v?.onExited?.()}},__vars:{"--spotlight-max-height":H?(0,A.h)(L):void 0},__staticSelector:"Spotlight","data-scrollable":H||void 0},m))});L.classes=h,L.displayName="@mantine/spotlight/SpotlightRoot";var H=n(42487);let $={size:"lg"},O=(0,i.d)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:c,vars:s,value:u,...d}=(0,a.w)("SpotlightSearch",$,e),p=g(),m=p.getStyles("search"),[f,h]=r.useState(!1);return r.createElement(H.I,{ref:t,classNames:[{input:m.className},n],styles:[{input:m.style},o],...d,value:u??p.query,onChange:e=>{p.setQuery(e.currentTarget.value),c?.(e)},onKeyDown:e=>{i?.(e),f||("ArrowDown"===e.nativeEvent.code&&(e.preventDefault(),l.j5.selectNextAction(p.store)),"ArrowUp"===e.nativeEvent.code&&(e.preventDefault(),l.j5.selectPreviousAction(p.store)),("Enter"===e.nativeEvent.code||"NumpadEnter"===e.nativeEvent.code)&&(e.preventDefault(),l.j5.triggerSelectedAction(p.store)))},onCompositionStart:()=>h(!0),onCompositionEnd:()=>h(!1)})});O.classes=h,O.displayName="@mantine/spotlight/SpotlightSearch";let z={size:600,yOffset:80,limit:1/0,zIndex:(0,o.w)("max"),overlayProps:{backgroundOpacity:.35,blur:7},transitionProps:{duration:200,transition:"pop"},store:l.x9,filter:(e,t)=>{let n=e.trim().toLowerCase(),r=[[],[]],o=t.reduce((e,t)=>"actions"in t?[...e,...t.actions.map(e=>({...e,group:t.group}))]:[...e,t],[]);return o.forEach(e=>{if(e.label?.toLowerCase().includes(n))r[0].push(e);else{var t;(e.description?.toLowerCase().includes(n)||(Array.isArray(t=e.keywords)?t.map(e=>e.trim()).join(",").toLowerCase().trim():"string"==typeof t?t.toLowerCase().trim():"").includes(n))&&r[1].push(e)}}),function(e){let t={},n=[];return e.forEach(e=>{e.group?(t[e.group]||(t[e.group]={pushed:!1,data:{group:e.group,actions:[]}}),t[e.group].data.actions.push(e),t[e.group].pushed||(t[e.group].pushed=!0,n.push(t[e.group].data))):n.push(e)}),n}(r.flat())},clearQueryOnClose:!0,closeOnActionTrigger:!0,shortcut:"mod + K",highlightQuery:!1},_=(0,i.d)((e,t)=>{let n=(0,a.w)("Spotlight",z,e),{searchProps:o,filter:i,query:l,onQueryChange:u,actions:d,nothingFound:p,highlightQuery:m,limit:f,...g}=n,[h,y]=(0,c.C)({value:l,defaultValue:"",finalValue:"",onChange:u}),b=(function e(t,n){let r=[];if(!Array.isArray(t))return[];for(let o=0;o=n)break;s(i)&&r.push({group:i.group,actions:e(i.actions,n-r.length)}),s(i)||r.push(i)}return r})(i(h,d),f).map(e=>{if(s(e)){let t=e.actions.map(({id:e,...t})=>r.createElement(v,{key:e,highlightQuery:m,...t}));return r.createElement(k,{key:e.group,label:e.group},t)}return r.createElement(v,{key:e.id,highlightQuery:m,...e})});return r.createElement(L,{...g,query:h,onQueryChange:y,ref:t},r.createElement(O,{...o}),r.createElement(E,null,b,0===b.length&&p&&r.createElement(F,null,p)))});_.classes=h,_.displayName="@mantine/spotlight/Spotlight",_.Search=O,_.ActionsList=E,_.Action=v,_.Empty=F,_.ActionsGroup=k,_.Footer=B,_.Root=L,_.open=l.US.open,_.close=l.US.close,_.toggle=l.US.toggle},95299:function(e,t,n){"use strict";n.d(t,{Gv:function(){return f},QP:function(){return a},US:function(){return h},j5:function(){return m},x9:function(){return g}});var r=n(28086),o=n(33993);let i=()=>(0,o.M)({opened:!1,empty:!1,selected:-1,listId:"",query:"",registeredActions:new Set}),a=e=>(0,o.o)(e);function c(e,t){let n=t.getState();t.setState({...n,...e(t.getState())})}function s(e){c(()=>({opened:!0}),e)}function l(e){c(()=>({opened:!1}),e)}function u(e){c(e=>({opened:!e.opened}),e)}function d(e,t){t.updateState(t=>({...t,selected:e}))}function p(e,t){let n=t.getState(),o=document.getElementById(n.listId),i=o?.querySelector("[data-selected]"),a=o?.querySelectorAll("[data-action]")??[],c=-1===e?a.length-1:e===a.length?0:e,s=(0,r.u)(c,0,a.length-1);return i?.removeAttribute("data-selected"),a[s]?.scrollIntoView({block:"nearest"}),a[s]?.setAttribute("data-selected","true"),d(s,t),s}let m={open:s,close:l,toggle:u,updateState:c,setSelectedAction:d,setListId:function(e,t){t.updateState(t=>({...t,listId:e}))},selectAction:p,selectNextAction:function(e){return p(e.getState().selected+1,e)},selectPreviousAction:function(e){return p(e.getState().selected-1,e)},triggerSelectedAction:function(e){let t=e.getState(),n=document.querySelector(`#${t.listId} [data-selected]`);n?.click()},registerAction:function(e,t){let n=t.getState();return n.registeredActions.add(e),()=>{n.registeredActions.delete(e)}},setQuery:function(e,t){c(()=>({query:e}),t),Promise.resolve().then(()=>{p(0,t),c(e=>({empty:e.query.trim().length>0&&0===e.registeredActions.size}),t)})},clearSpotlightState:function({clearQuery:e},t){t.updateState(t=>({...t,selected:-1,query:e?"":t.query,empty:!e&&t.empty}))}};function f(){let e=i();return[e,{open:()=>s(e),close:()=>l(e),toggle:()=>u(e)}]}let[g,h]=f(),{open:y,close:v,toggle:b}=h},33993:function(e,t,n){"use strict";n.d(t,{M:function(){return o},o:function(){return i}});var r=n(27378);function o(e){let t=e,n=!1,r=new Set;return{getState:()=>t,updateState(e){t="function"==typeof e?e(t):e},setState(e){this.updateState(e),r.forEach(e=>e(t))},initialize(e){n||(t=e,n=!0)},subscribe:e=>(r.add(e),()=>r.delete(e))}}function i(e){return(0,r.useSyncExternalStore)(e.subscribe,()=>e.getState(),()=>e.getState())}},97700:function(e,t,n){"use strict";n.d(t,{B:function(){return _}});var r=n(27378),o=n(56589),i=n(71078);function a({withPadding:e=!0,centered:t,maxWidth:n,minHeight:a,children:c,dimmed:s,striped:l}){return r.createElement(o.x,{className:"m-a3c6e060",mod:{"with-padding":e,centered:t,dimmed:s,striped:l},__vars:{"--demo-flex":n?"1":void 0,"--demo-max-width":n?(0,i.h)(n):void 0,"--demo-min-height":a?(0,i.h)(a):void 0,"--demo-margin-y":n&&t?"auto":void 0}},r.createElement("div",{className:"m-ad8eb9d6"},c))}var c=n(10532),s=n(87329),l={code:"m-66990f0a"};function u({code:e,defaultExpanded:t=!0}){let n="string"==typeof e?{code:e,fileName:"Demo.tsx",language:"tsx"}:e;return r.createElement(r.Fragment,null,n&&r.createElement(s.Q,{code:n,className:l.code,getFileIcon:c.g,withExpandButton:!0,defaultExpanded:t}))}var d=n(40624);function p({className:e,...t}){return r.createElement("div",{className:(0,d.Z)("m-761fa02a",e),...t})}function m({code:e,children:t,withPadding:n,centered:o,defaultExpanded:i=!0,maxWidth:c,minHeight:s,dimmed:l,striped:d}){return r.createElement(p,null,r.createElement(a,{withPadding:n,centered:o,maxWidth:c,minHeight:s,dimmed:l,striped:d},t),r.createElement(u,{code:e,defaultExpanded:i}))}var f=n(27884),Text=n(26569),g={columns:"m-df4e856a",controls:"m-de00ac9",header:"m-c4d78f60"};function h({children:e,withPadding:t,centered:n,maxWidth:o,minHeight:i,title:c,description:s,controls:l,dimmed:u,striped:d}){return r.createElement("div",{className:g.columns},r.createElement(a,{withPadding:t,maxWidth:o,minHeight:i,centered:n,dimmed:u,striped:d},e),r.createElement("div",{className:g.controls},c&&r.createElement("div",{className:g.header},r.createElement(Text.x,{fw:500,fz:"sm",mb:5},c),s&&r.createElement(Text.x,{c:"dimmed",fz:11,lh:1.45},s)),l))}var y=n(17829),v=n(44258);function b(e){return(0,v.j)(e.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase())}var k=n(42487),x=n(46674);function w(e){return e.map(e=>"string"==typeof e?{label:(0,v.j)(e),value:e}:{value:e.value,label:(0,v.j)(e.label)})}var E=n(10248),C=n(16202),F=n(38765),S=n(22971),B=n(63433),j=n(19397),I=n(36227),M=n(7033);function D(){return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 200 200",style:{width:(0,i.h)(18),height:(0,i.h)(18)}},r.createElement("path",{fill:"#FF5178",d:"M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"}),r.createElement("path",{fill:"#FF9259",d:"M49.982 13.408a99.999 99.999 0 00-36.595 36.61l51.968 29.99a40 40 0 0114.638-14.645l-30.01-51.955z"}),r.createElement("path",{fill:"#FFD23B",d:"M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"}),r.createElement("path",{fill:"#89C247",d:"M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"}),r.createElement("path",{fill:"#49B296",d:"M13.39 149.989a100.001 100.001 0 0036.599 36.607l30.006-51.958a39.99 39.99 0 01-14.639-14.643l-51.965 29.994z"}),r.createElement("path",{fill:"#2897B1",d:"M49.989 186.596A99.995 99.995 0 0099.987 200l.008-60a39.996 39.996 0 01-20-5.362l-30.007 51.958z"}),r.createElement("path",{fill:"#3EC3FF",d:"M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"}),r.createElement("path",{fill:"#09A1E5",d:"M150.003 186.601a100.001 100.001 0 0036.601-36.604l-51.962-29.998a40 40 0 01-14.641 14.641l30.002 51.961z"}),r.createElement("path",{fill:"#077CCC",d:"M186.607 149.992A99.993 99.993 0 00200 99.99l-60 .006a39.998 39.998 0 01-5.357 20.001l51.964 29.995z"}),r.createElement("path",{fill:"#622876",d:"M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"}),r.createElement("path",{fill:"#962B7C",d:"M186.597 49.99a99.994 99.994 0 00-36.606-36.598l-29.995 51.965a40 40 0 0114.643 14.64l51.958-30.006z"}),r.createElement("path",{fill:"#CB2E81",d:"M149.976 13.384A99.999 99.999 0 0099.973 0l.016 60a40.001 40.001 0 0120.002 5.353l29.985-51.97z"}))}var T={swatch:"m-5e1a038c",check:"m-f9decbb8",colorControl:"m-2f5f7bca"},A=n(28764),P=n(16902);let R=[{value:0,label:"xs"},{value:25,label:"sm"},{value:50,label:"md"},{value:75,label:"lg"},{value:100,label:"xl"}];function N(e,t){let n=e.reduce((e,t)=>(e[t.prop]=t.libraryValue,e),{});return Object.keys(t).reduce((e,r)=>(t[r]!==n[r]&&(e[r]=t[r]),e),{})}function L({code:e,controls:t,state:n}){return"function"==typeof e?e(N(t,n)):function(e,t){let n=[],r=function(e){let t=e.split("\n").find(e=>e.includes("{{props}}"));return t&&t.trim().startsWith("{{props}}")}(t),o=t.replace("{{children}}",e.children||"");for(let[t,r]of Object.entries(e))"children"!==t&&("string"==typeof r?n.push(`${t}="${r}"`):"number"==typeof r?n.push(`${t}={${r}}`):"boolean"==typeof r&&(r?n.push(t):n.push(`${t}={false}`)));if(!r){let e=n.join(" ");return e.length>0?o.replace("{{props}}",` ${e}`):o.replace("{{props}}","")}let i=o.replace(/^(\s*){{props}}(\s*)$/gm,(e,t,r)=>{let o=n.map((e,r)=>`${t}${e}${r!==n.length-1?"\n":""}`).join("");return`${o}${r}`});return i.trim().replace("\n\n","\n")}(N(t,n),e)}let H={boolean:function({value:e,onChange:t,prop:n,...o}){return r.createElement(y.r,{checked:e,onChange:e=>t(e.currentTarget.checked),label:b(n),...o})},segmented:function({data:e,value:t,onChange:n,prop:o,transformLabel:i=!0,...a}){return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(o),...a},r.createElement(x.s,{data:i?w(e):e,value:t,onChange:n,fullWidth:!0,transitionDuration:150}))},color:function({value:e,onChange:t,prop:n,...o}){let[i,a]=(0,r.useState)("#fff"),c=e=>{a(e),t(e)},s=Object.keys(E.t.colors).filter(e=>"dark"!==e).map(n=>r.createElement(C.b,{color:`var(--mantine-color-${n}-filled)`,component:"button",key:n,onClick:()=>t(n),radius:"sm",className:T.swatch,"aria-label":n},e===n&&r.createElement(F.n,{className:T.check})));return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(n),...o},r.createElement(S.Z,{gap:2,mt:2,wrap:"wrap"},s,r.createElement(B.J,{radius:"md",position:"bottom-end",shadow:"md"},r.createElement(B.J.Target,null,r.createElement(j.k,{className:T.colorControl,"aria-label":"Pick color"},r.createElement(D,null))),r.createElement(B.J.Dropdown,{p:8},r.createElement(I.z,{value:i,onChange:c,format:"rgba"}),r.createElement(M.o,{value:i,onChange:e=>c(e.currentTarget.value),placeholder:"Enter color",radius:"md",size:"xs",mt:"xs"})))))},string:function({value:e,onChange:t,prop:n,...o}){return r.createElement(M.o,{value:e,onChange:e=>t(e.currentTarget.value),label:b(n),placeholder:"Enter prop value",...o})},select:function({value:e,onChange:t,prop:n,data:o,...i}){return r.createElement(A.p,{value:e,onChange:e=>t(e.currentTarget.value),label:b(n),data:w(o),...i})},size:function({value:e,onChange:t,prop:n,...o}){let i=R.find(t=>t.label===e).value;return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(n),...o},r.createElement(P.i,{value:i,onChange:e=>t(R.find(t=>t.value===e).label),label:e=>R.find(t=>t.value===e).label,step:25,marks:R,styles:{markLabel:{display:"none"}},thumbLabel:"Size"}))},number:function({value:e,onChange:t,prop:n,step:o,min:i,max:a,...c}){return r.createElement(k.I.Wrapper,{labelElement:"div",label:b(n),...c},r.createElement(P.i,{value:e,onChange:t,step:o,min:i,max:a,thumbLabel:"Size"}))}};function $({code:e,controls:t,children:n,centered:o,maxWidth:i,minHeight:a,withPadding:c,dimmed:s,striped:l}){let d=t.reduce((e,t)=>(e[t.prop]=t.initialValue,e),{}),[m,g]=(0,r.useState)(d),y=(e,t)=>g(n=>({...n,[e]:t})),v=t.map(e=>{let t=H[e.type],{initialValue:n,libraryValue:o,...i}=e;return r.createElement(t,{key:e.prop,value:m[e.prop],onChange:t=>y(e.prop,t),...i})});return r.createElement(p,null,r.createElement(h,{controls:r.createElement(f.K,{className:"m-b14e0e0b",gap:"sm"},v),centered:o,withPadding:c,maxWidth:i,minHeight:a,dimmed:s,striped:l},r.cloneElement(n,m)),r.createElement(u,{code:function({code:e,controls:t,state:n}){if("string"==typeof e||"function"==typeof e)return[{fileName:"Demo.tsx",language:"tsx",code:L({code:e,controls:t,state:n})}];if(Array.isArray(e))return e.map(e=>({fileName:e.fileName||"Demo.tsx",language:e.language||"tsx",code:L({code:e.code,controls:t,state:n})}));throw Error("Unexpected code format in configurator")}({code:e,controls:t,state:m})}))}function O(e){return e?`.${e} { outline: 2px solid #fe0d45; outline-offset: -2px; } diff --git a/_next/static/chunks/pages/changelog/7-0-0-41233cf73b8e490b.js b/_next/static/chunks/pages/changelog/7-0-0-b8d90b39811a2c10.js similarity index 86% rename from _next/static/chunks/pages/changelog/7-0-0-41233cf73b8e490b.js rename to _next/static/chunks/pages/changelog/7-0-0-b8d90b39811a2c10.js index 35ccb07cbea..1a87a55c63a 100644 --- a/_next/static/chunks/pages/changelog/7-0-0-41233cf73b8e490b.js +++ b/_next/static/chunks/pages/changelog/7-0-0-b8d90b39811a2c10.js @@ -734,4 +734,4 @@ function Demo() { ); } -`,p=e=>{let n=(0,r.B)(e),t=(0,s.E)({color:e.color||e.theme.primaryColor,theme:e.theme});return t.isThemeColor&&"lime"===t.color&&"filled"===e.variant?{...n,color:"var(--mantine-color-black)",hoverColor:"var(--mantine-color-black)"}:"light"===e.variant?{background:(0,l.m)(t.value,.1),hover:(0,l.m)(t.value,.15),border:`${(0,i.h)(1)} solid ${t.value}`,color:(0,a._)(t.value,.1)}:"danger"===e.variant?{background:"var(--mantine-color-red-9)",hover:"var(--mantine-color-red-8)",color:"var(--mantine-color-white)",border:"none"}:n},u={type:"code",component:function(){return o.createElement(c.M2,{theme:{variantColorResolver:p}},o.createElement(d.Z,null,o.createElement(h.z,{color:"lime.4",variant:"filled"},"Lime filled button"),o.createElement(h.z,{color:"orange",variant:"light"},"Orange light button"),o.createElement(h.z,{variant:"danger"},"Danger button")))},centered:!0,code:m}},61209:function(e,n,t){"use strict";t.d(n,{Q:function(){return T}});var o=t(27378),r=t(40624),s=t(2688),l=t(71078),i=t(83453),a=t(20410),c=t(96739),d=t(6231),h=t(19397),m=t(56589),p=t(49849),u=t(99684),x=t(84246),f=t(78131),j=t(58675),g=t(77199);function b({expanded:e,style:n,...t}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,l.h)(18),height:(0,l.h)(18),...n},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 13v-8l-3 3m6 0l-3 -3"}),o.createElement("path",{d:"M9 17l1 0"}),o.createElement("path",{d:"M14 17l1 0"}),o.createElement("path",{d:"M19 17l1 0"}),o.createElement("path",{d:"M4 17l1 0"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 11v8l3 -3m-6 0l3 3"}),o.createElement("path",{d:"M9 7l1 0"}),o.createElement("path",{d:"M14 7l1 0"}),o.createElement("path",{d:"M19 7l1 0"}),o.createElement("path",{d:"M4 7l1 0"})))}function v({fileIcon:e,fileName:n,getFileIcon:t,className:r,style:s}){return e?o.createElement("span",{className:r,style:s},e):t&&n?o.createElement("span",{className:r,style:s},t(n)):null}var y=t(42595),w=t(17441);let E={...y.Z,root:(0,r.Z)(y.Z.root,w.Z.theme)},C={withHeader:!0,copyLabel:"Copy code",copiedLabel:"Copied",maxCollapsedHeight:(0,l.h)("8rem"),expandCodeLabel:"Expand code",collapseCodeLabel:"Collapse code"},S=(0,i.Z)((e,{maxCollapsedHeight:n})=>({root:{"--ch-max-collapsed-height":(0,l.h)(n)}})),T=(0,a.d)((e,n)=>{let t=(0,c.w)("CodeHighlightTabs",C,e),{classNames:r,className:l,style:i,styles:a,unstyled:y,vars:w,children:T,code:k,defaultActiveTab:I,activeTab:N,onTabChange:z,withHeader:P,copiedLabel:B,copyLabel:M,getFileIcon:D,maxCollapsedHeight:L,expanded:A,defaultExpanded:R,onExpandedChange:G,expandCodeLabel:F,collapseCodeLabel:V,withExpandButton:H,mod:X,...O}=t,Z=(0,d.y)({name:"CodeHighlightTabs",props:t,classes:E,className:l,style:i,classNames:r,styles:a,unstyled:y,vars:w,varsResolver:S}),[W,q]=(0,j.C)({defaultValue:I,value:N,finalValue:0,onChange:z}),[Y,$]=(0,j.C)({defaultValue:R,value:A,finalValue:!0,onChange:G}),_=Array.isArray(k)?k:[k],U=_[W],Q=s.Z.highlight(U.code.trim(),{language:U.language||"plaintext"}).value,K=_.map((e,n)=>o.createElement(h.k,{...Z("file"),key:e.fileName,mod:{active:n===W},onClick:()=>q(n)},o.createElement(v,{fileIcon:e.icon,getFileIcon:D,fileName:e.fileName,...Z("fileIcon")}),o.createElement("span",null,e.fileName)));return o.createElement(m.x,{...Z("root"),mod:[{collapsed:!Y},X],ref:n,...O,dir:"ltr"},P&&o.createElement("div",{...Z("header")},o.createElement(p.x,{type:"never",dir:"ltr",offsetScrollbars:!1},o.createElement("div",{...Z("files")},K)),o.createElement("div",{...Z("controls")},H&&o.createElement(u.u,{label:Y?V:F,fz:"sm",position:"left"},o.createElement(x.A,{onClick:()=>$(!Y),variant:"none","aria-label":Y?V:F,...Z("control")},o.createElement(b,{expanded:Y}))),o.createElement(f.q,{value:U.code.trim()},({copied:e,copy:n})=>o.createElement(u.u,{label:e?B:M,fz:"sm",position:"left"},o.createElement(x.A,{onClick:n,variant:"none",...Z("control"),"aria-label":e?B:M},o.createElement(g.T,{copied:e})))))),o.createElement(p.x,{type:"auto",dir:"ltr",offsetScrollbars:!1},o.createElement(m.x,{...Z("codeWrapper"),mod:{expanded:Y}},o.createElement("pre",{...Z("pre")},o.createElement("code",{...Z("code"),dangerouslySetInnerHTML:{__html:Q}})))),o.createElement(h.k,{...Z("showCodeButton"),mod:{hidden:Y},onClick:()=>$(!0)},F))});T.displayName="@mantine/core/CodeHighlightTabs",T.classes=E},77199:function(e,n,t){"use strict";t.d(n,{T:function(){return s}});var o=t(27378),r=t(71078);function s({copied:e,style:n,...t}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,r.h)(18),height:(0,r.h)(18),...n},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M5 12l5 5l10 -10"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"}),o.createElement("path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"})))}s.displayName="@mantine/code-highlight/CopyIcon"},40106:function(e,n,t){"use strict";t.d(n,{p:function(){return p}});var o=t(27378),r=t(92082),s=t(83453),l=t(96739),i=t(6231),a=t(56589),c=t(20410),d={root:"m-e9408a47","root--default":"m-84c9523a","root--filled":"m-ef274e49","root--unstyled":"m-eda993d3",legend:"m-90794832","legend--unstyled":"m-74ca27fe"};let h={variant:"default"},m=(0,s.Z)((e,{radius:n})=>({root:{"--fieldset-radius":void 0===n?void 0:(0,r.H5)(n)}})),p=(0,c.d)((e,n)=>{let t=(0,l.w)("Fieldset",h,e),{classNames:r,className:s,style:c,styles:p,unstyled:u,vars:x,legend:f,variant:j,children:g,...b}=t,v=(0,i.y)({name:"Fieldset",classes:d,props:t,className:s,style:c,classNames:r,styles:p,unstyled:u,vars:x,varsResolver:m});return o.createElement(a.x,{component:"fieldset",ref:n,variant:j,...v("root",{variant:j}),...b},f&&o.createElement("legend",{...v("legend",{variant:j})},f),g)});p.classes=d,p.displayName="@mantine/core/Fieldset"},13110:function(e,n,t){"use strict";t.d(n,{r:function(){return B}});var o=t(27378),r=t(83453),s=t(96739),l=t(6231),i=t(40593),a=t(56589),c=t(20410),d=t(71656);let[h,m]=(0,d.R)("Grid component was not found in tree");var p=t(40624),u=t(53007),x=t(86689),f=t(31582),j=t(75001),g=t(2256),b=t(9889);let v=(e,n)=>"content"===e?"auto":"auto"===e?"0rem":e?`${100/(n/e)}%`:void 0,y=(e,n,t)=>t||"auto"===e?"100%":"content"===e?"unset":v(e,n),w=(e,n)=>{if(e)return"auto"===e||n?"1":"auto"},E=(e,n)=>0===e?"0":e?`${100/(n/e)}%`:void 0;function C({span:e,order:n,offset:t,selector:r}){let s=(0,g.rZ)(),l=m(),i=(0,j.v)(e),a=void 0===i?12:(0,j.v)(e),c=(0,x.L)({"--col-order":j.v(n)?.toString(),"--col-flex-grow":w(a,l.grow),"--col-flex-basis":v(a,l.columns),"--col-width":"content"===a?"auto":void 0,"--col-max-width":y(a,l.columns,l.grow),"--col-offset":E((0,j.v)(t),l.columns)}),d=(0,u.X)(s.breakpoints).reduce((o,r)=>(o[r]||(o[r]={}),"object"==typeof n&&void 0!==n[r]&&(o[r]["--col-order"]=n[r]?.toString()),"object"==typeof e&&void 0!==e[r]&&(o[r]["--col-flex-grow"]=w(e[r],l.grow),o[r]["--col-flex-basis"]=v(e[r],l.columns),o[r]["--col-width"]="content"===e[r]?"auto":void 0,o[r]["--col-max-width"]=y(e[r],l.columns,l.grow)),"object"==typeof t&&void 0!==t[r]&&(o[r]["--col-offset"]=E(t[r],l.columns)),o),{}),h=(0,f.I)((0,u.X)(d),s).filter(e=>(0,u.X)(d[e.value]).length>0),p=h.map(e=>({query:`(min-width: ${s.breakpoints[e.value]})`,styles:d[e.value]}));return o.createElement(b.f,{styles:c,media:p,selector:r})}var S={root:"m-410352e9",inner:"m-dee7bd2f",col:"m-96bdd299"};let T={span:12},k=(0,c.d)((e,n)=>{let t=(0,s.w)("GridCol",T,e),{classNames:r,className:l,style:c,styles:d,vars:h,span:u,order:x,offset:f,...j}=t,g=m(),b=(0,i.m)();return o.createElement(o.Fragment,null,o.createElement(C,{selector:`.${b}`,span:u,order:x,offset:f}),o.createElement(a.x,{ref:n,...g.getStyles("col",{className:(0,p.Z)(l,b),style:c,classNames:r,styles:d}),...j}))});k.classes=S,k.displayName="@mantine/core/GridCol";var I=t(92082);function N({gutter:e,selector:n}){let t=(0,g.rZ)(),r=(0,x.L)({"--grid-gutter":(0,I.bG)((0,j.v)(e))}),s=(0,u.X)(t.breakpoints).reduce((n,t)=>(n[t]||(n[t]={}),"object"==typeof e&&void 0!==e[t]&&(n[t]["--grid-gutter"]=(0,I.bG)(e[t])),n),{}),l=(0,f.I)((0,u.X)(s),t).filter(e=>(0,u.X)(s[e.value]).length>0),i=l.map(e=>({query:`(min-width: ${t.breakpoints[e.value]})`,styles:s[e.value]}));return o.createElement(b.f,{styles:r,media:i,selector:n})}let z={gutter:"md",grow:!1,columns:12},P=(0,r.Z)((e,{justify:n,align:t,overflow:o})=>({root:{"--grid-justify":n,"--grid-align":t,"--grid-overflow":o}})),B=(0,c.d)((e,n)=>{let t=(0,s.w)("Grid",z,e),{classNames:r,className:c,style:d,styles:m,unstyled:p,vars:u,grow:x,gutter:f,columns:j,align:g,justify:b,children:v,...y}=t,w=(0,l.y)({name:"Grid",classes:S,props:t,className:c,style:d,classNames:r,styles:m,unstyled:p,vars:u,varsResolver:P}),E=(0,i.m)();return o.createElement(h,{value:{getStyles:w,grow:x,columns:j}},o.createElement(N,{selector:`.${E}`,...t}),o.createElement(a.x,{ref:n,...w("root",{className:E}),...y},o.createElement("div",{...w("inner")},v)))});B.classes=S,B.displayName="@mantine/core/Grid",B.Col=k},62339:function(e,n,t){"use strict";t.d(n,{Y:function(){return C}});var o=t(27378),r=t(40624),s=t(62740),l=t(58675),i=t(28086),a=t(72840),c=t(92082),d=t(83453),h=t(5564),m=t(6231),p=t(96739),u=t(20410),x=t(23163),f=t(19397);function j({direction:e,style:n,...t}){return o.createElement("svg",{style:{width:"var(--ni-chevron-size)",height:"var(--ni-chevron-size)",transform:"up"===e?"rotate(180deg)":void 0,...n},viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},o.createElement("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}var g={root:"m-e2f5cd4e",controls:"m-95e17d22",control:"m-80b4b171"};let b=/^-0(\.0*)?$/,v=/^-?0\d+$/;function y(e,n,t){return void 0===e||(void 0===n||e>=n)&&(void 0===t||e<=t)}let w={step:1,clampBehavior:"blur",allowDecimal:!0,allowNegative:!0,startValue:0},E=(0,d.Z)((e,{size:n})=>({controls:{"--ni-chevron-size":(0,c.ap)(n,"ni-chevron-size")}})),C=(0,u.d)((e,n)=>{let t=(0,p.w)("NumberInput",w,e),{className:c,classNames:d,styles:u,unstyled:C,vars:S,onChange:T,onValueChange:k,value:I,defaultValue:N,max:z,min:P,step:B,hideControls:M,rightSection:D,isAllowed:L,clampBehavior:A,onBlur:R,allowDecimal:G,decimalScale:F,onKeyDown:V,handlersRef:H,startValue:X,disabled:O,rightSectionPointerEvents:Z,allowNegative:W,readOnly:q,size:Y,rightSectionWidth:$,stepHoldInterval:_,stepHoldDelay:U,allowLeadingZeros:Q,...K}=t,J=(0,m.y)({name:"NumberInput",classes:g,props:t,classNames:d,styles:u,unstyled:C,vars:S,varsResolver:E}),{resolvedClassNames:ee,resolvedStyles:en}=(0,h.h)({classNames:d,styles:u,props:t}),[et,eo]=(0,l.C)({value:I,defaultValue:N,onChange:T}),er=void 0!==U&&void 0!==_,es=(0,o.useRef)(null),el=(0,o.useRef)(null),ei=(0,o.useRef)(0),ea=(0,o.useRef)();ea.current=()=>{"number"!=typeof et||Number.isNaN(et)?eo((0,i.u)(X,P,z)):void 0!==z?eo(et+B<=z?et+B:z):eo(et+B)};let ec=(0,o.useRef)();ec.current=()=>{"number"!=typeof et||Number.isNaN(et)?eo((0,i.u)(X,P,z)):eo(function({value:e,min:n,step:t=1,allowNegative:o}){let r=e-t;return void 0!==n&&r{e?ea.current():ec.current(),ei.current+=1},eh=e=>{if(ed(e),er){let n="number"==typeof _?_:_(ei.current);el.current=window.setTimeout(()=>eh(e),n)}},em=(e,n)=>{e.preventDefault(),es.current?.focus(),ed(n),er&&(el.current=window.setTimeout(()=>eh(n),U))},ep=()=>{el.current&&window.clearTimeout(el.current),el.current=null,ei.current=0},eu=o.createElement("div",{...J("controls")},o.createElement(f.k,{...J("control"),tabIndex:-1,"aria-hidden":!0,disabled:O||"number"==typeof et&&void 0!==z&&et>=z,mod:{direction:"up"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{em(e,!0)},onPointerUp:ep,onPointerLeave:ep},o.createElement(j,{direction:"up"})),o.createElement(f.k,{...J("control"),tabIndex:-1,"aria-hidden":!0,disabled:O||"number"==typeof et&&void 0!==P&&et<=P,mod:{direction:"down"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{em(e,!1)},onPointerUp:ep,onPointerLeave:ep},o.createElement(j,{direction:"down"})));return o.createElement(x.M,{component:s.h3,allowNegative:W,className:(0,r.Z)(g.root,c),size:Y,...K,readOnly:q,disabled:O,value:et,getInputRef:(0,a.Yx)(n,es),onValueChange:(e,n)=>{if("event"===n.source){var t;eo(!(("number"==typeof(t=e.floatValue)?t{V?.(e),q||("ArrowUp"===e.key&&(e.preventDefault(),ea.current()),"ArrowDown"===e.key&&(e.preventDefault(),ec.current()))},rightSectionPointerEvents:Z??(O?"none":void 0),rightSectionWidth:$??`var(--ni-right-section-width-${Y||"sm"})`,allowLeadingZeros:Q,onBlur:e=>{if(R?.(e),"blur"===A&&"number"==typeof et){let e=(0,i.u)(et,P,z);e!==et&&eo((0,i.u)(et,P,z))}},isAllowed:e=>"strict"===A?L?L(e)&&y(e.floatValue,P,z):y(e.floatValue,P,z):!L||L(e)})});C.classes={...x.M.classes,...g},C.displayName="@mantine/core/NumberInput"},37454:function(e,n,t){"use strict";t.d(n,{M:function(){return b}});var o=t(27378),r=t(96739),s=t(6231),l=t(40593),i=t(56589),a=t(20410),c=t(53007),d=t(86689),h=t(92082),m=t(31582),p=t(75001),u=t(2256),x=t(9889);function f({spacing:e,verticalSpacing:n,cols:t,selector:r}){let s=(0,u.rZ)(),l=void 0===n?e:n,i=(0,d.L)({"--sg-spacing-x":(0,h.bG)((0,p.v)(e)),"--sg-spacing-y":(0,h.bG)((0,p.v)(l)),"--sg-cols":p.v(t)?.toString()}),a=(0,c.X)(s.breakpoints).reduce((n,o)=>(n[o]||(n[o]={}),"object"==typeof e&&void 0!==e[o]&&(n[o]["--sg-spacing-x"]=(0,h.bG)(e[o])),"object"==typeof l&&void 0!==l[o]&&(n[o]["--sg-spacing-y"]=(0,h.bG)(l[o])),"object"==typeof t&&void 0!==t[o]&&(n[o]["--sg-cols"]=t[o]),n),{}),f=(0,m.I)((0,c.X)(a),s).filter(e=>(0,c.X)(a[e.value]).length>0),j=f.map(e=>({query:`(min-width: ${s.breakpoints[e.value]})`,styles:a[e.value]}));return o.createElement(x.f,{styles:i,media:j,selector:r})}var j={root:"m-2415a157"};let g={cols:1,spacing:"md"},b=(0,a.d)((e,n)=>{let t=(0,r.w)("SimpleGrid",g,e),{classNames:a,className:c,style:d,styles:h,unstyled:m,vars:p,cols:u,verticalSpacing:x,spacing:b,...v}=t,y=(0,s.y)({name:"SimpleGrid",classes:j,props:t,className:c,style:d,classNames:a,styles:h,unstyled:m,vars:p}),w=(0,l.m)();return o.createElement(o.Fragment,null,o.createElement(f,{...t,selector:`.${w}`}),o.createElement(i.x,{ref:n,...y("root",{className:w}),...v}))});b.classes=j,b.displayName="@mantine/core/SimpleGrid"}},function(e){e.O(0,[30370,62740,60213,15819,2775,45608,16584,17932,49774,92888,40179],function(){return e(e.s=46037)}),_N_E=e.O()}]); \ No newline at end of file +`,p=e=>{let n=(0,r.B)(e),t=(0,s.E)({color:e.color||e.theme.primaryColor,theme:e.theme});return t.isThemeColor&&"lime"===t.color&&"filled"===e.variant?{...n,color:"var(--mantine-color-black)",hoverColor:"var(--mantine-color-black)"}:"light"===e.variant?{background:(0,l.m)(t.value,.1),hover:(0,l.m)(t.value,.15),border:`${(0,i.h)(1)} solid ${t.value}`,color:(0,a._)(t.value,.1)}:"danger"===e.variant?{background:"var(--mantine-color-red-9)",hover:"var(--mantine-color-red-8)",color:"var(--mantine-color-white)",border:"none"}:n},u={type:"code",component:function(){return o.createElement(c.M2,{theme:{variantColorResolver:p}},o.createElement(d.Z,null,o.createElement(h.z,{color:"lime.4",variant:"filled"},"Lime filled button"),o.createElement(h.z,{color:"orange",variant:"light"},"Orange light button"),o.createElement(h.z,{variant:"danger"},"Danger button")))},centered:!0,code:m}},61209:function(e,n,t){"use strict";t.d(n,{Q:function(){return T}});var o=t(27378),r=t(40624),s=t(2688),l=t(71078),i=t(83453),a=t(20410),c=t(96739),d=t(6231),h=t(19397),m=t(56589),p=t(49849),u=t(99684),x=t(84246),f=t(78131),j=t(58675),g=t(77199);function b({expanded:e,style:n,...t}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,l.h)(18),height:(0,l.h)(18),...n},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 13v-8l-3 3m6 0l-3 -3"}),o.createElement("path",{d:"M9 17l1 0"}),o.createElement("path",{d:"M14 17l1 0"}),o.createElement("path",{d:"M19 17l1 0"}),o.createElement("path",{d:"M4 17l1 0"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 11v8l3 -3m-6 0l3 3"}),o.createElement("path",{d:"M9 7l1 0"}),o.createElement("path",{d:"M14 7l1 0"}),o.createElement("path",{d:"M19 7l1 0"}),o.createElement("path",{d:"M4 7l1 0"})))}function v({fileIcon:e,fileName:n,getFileIcon:t,className:r,style:s}){return e?o.createElement("span",{className:r,style:s},e):t&&n?o.createElement("span",{className:r,style:s},t(n)):null}var y=t(42595),w=t(17441);let E={...y.Z,root:(0,r.Z)(y.Z.root,w.Z.theme)},C={withHeader:!0,copyLabel:"Copy code",copiedLabel:"Copied",maxCollapsedHeight:(0,l.h)("8rem"),expandCodeLabel:"Expand code",collapseCodeLabel:"Collapse code",withCopyButton:!0},S=(0,i.Z)((e,{maxCollapsedHeight:n})=>({root:{"--ch-max-collapsed-height":(0,l.h)(n)}})),T=(0,a.d)((e,n)=>{let t=(0,c.w)("CodeHighlightTabs",C,e),{classNames:r,className:l,style:i,styles:a,unstyled:y,vars:w,children:T,code:k,defaultActiveTab:I,activeTab:N,onTabChange:z,withHeader:P,copiedLabel:B,copyLabel:M,getFileIcon:D,maxCollapsedHeight:L,expanded:A,defaultExpanded:R,onExpandedChange:G,expandCodeLabel:F,collapseCodeLabel:V,withExpandButton:H,withCopyButton:X,mod:O,...Z}=t,W=(0,d.y)({name:"CodeHighlightTabs",props:t,classes:E,className:l,style:i,classNames:r,styles:a,unstyled:y,vars:w,varsResolver:S}),[q,Y]=(0,j.C)({defaultValue:I,value:N,finalValue:0,onChange:z}),[$,_]=(0,j.C)({defaultValue:R,value:A,finalValue:!0,onChange:G}),U=Array.isArray(k)?k:[k],Q=U[q],K=s.Z.highlight(Q.code.trim(),{language:Q.language||"plaintext"}).value,J=U.map((e,n)=>o.createElement(h.k,{...W("file"),key:e.fileName,mod:{active:n===q},onClick:()=>Y(n)},o.createElement(v,{fileIcon:e.icon,getFileIcon:D,fileName:e.fileName,...W("fileIcon")}),o.createElement("span",null,e.fileName)));return o.createElement(m.x,{...W("root"),mod:[{collapsed:!$},O],ref:n,...Z,dir:"ltr"},P&&o.createElement("div",{...W("header")},o.createElement(p.x,{type:"never",dir:"ltr",offsetScrollbars:!1},o.createElement("div",{...W("files")},J)),o.createElement("div",{...W("controls")},H&&o.createElement(u.u,{label:$?V:F,fz:"sm",position:"left"},o.createElement(x.A,{onClick:()=>_(!$),variant:"none","aria-label":$?V:F,...W("control")},o.createElement(b,{expanded:$}))),X&&o.createElement(f.q,{value:Q.code.trim()},({copied:e,copy:n})=>o.createElement(u.u,{label:e?B:M,fz:"sm",position:"left"},o.createElement(x.A,{onClick:n,variant:"none",...W("control"),"aria-label":e?B:M},o.createElement(g.T,{copied:e})))))),o.createElement(p.x,{type:"auto",dir:"ltr",offsetScrollbars:!1},o.createElement(m.x,{...W("codeWrapper"),mod:{expanded:$}},o.createElement("pre",{...W("pre")},o.createElement("code",{...W("code"),dangerouslySetInnerHTML:{__html:K}})))),o.createElement(h.k,{...W("showCodeButton"),mod:{hidden:$},onClick:()=>_(!0)},F))});T.displayName="@mantine/core/CodeHighlightTabs",T.classes=E},77199:function(e,n,t){"use strict";t.d(n,{T:function(){return s}});var o=t(27378),r=t(71078);function s({copied:e,style:n,...t}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,r.h)(18),height:(0,r.h)(18),...n},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M5 12l5 5l10 -10"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"}),o.createElement("path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"})))}s.displayName="@mantine/code-highlight/CopyIcon"},40106:function(e,n,t){"use strict";t.d(n,{p:function(){return p}});var o=t(27378),r=t(92082),s=t(83453),l=t(96739),i=t(6231),a=t(56589),c=t(20410),d={root:"m-e9408a47","root--default":"m-84c9523a","root--filled":"m-ef274e49","root--unstyled":"m-eda993d3",legend:"m-90794832","legend--unstyled":"m-74ca27fe"};let h={variant:"default"},m=(0,s.Z)((e,{radius:n})=>({root:{"--fieldset-radius":void 0===n?void 0:(0,r.H5)(n)}})),p=(0,c.d)((e,n)=>{let t=(0,l.w)("Fieldset",h,e),{classNames:r,className:s,style:c,styles:p,unstyled:u,vars:x,legend:f,variant:j,children:g,...b}=t,v=(0,i.y)({name:"Fieldset",classes:d,props:t,className:s,style:c,classNames:r,styles:p,unstyled:u,vars:x,varsResolver:m});return o.createElement(a.x,{component:"fieldset",ref:n,variant:j,...v("root",{variant:j}),...b},f&&o.createElement("legend",{...v("legend",{variant:j})},f),g)});p.classes=d,p.displayName="@mantine/core/Fieldset"},13110:function(e,n,t){"use strict";t.d(n,{r:function(){return B}});var o=t(27378),r=t(83453),s=t(96739),l=t(6231),i=t(40593),a=t(56589),c=t(20410),d=t(71656);let[h,m]=(0,d.R)("Grid component was not found in tree");var p=t(40624),u=t(53007),x=t(86689),f=t(31582),j=t(75001),g=t(2256),b=t(9889);let v=(e,n)=>"content"===e?"auto":"auto"===e?"0rem":e?`${100/(n/e)}%`:void 0,y=(e,n,t)=>t||"auto"===e?"100%":"content"===e?"unset":v(e,n),w=(e,n)=>{if(e)return"auto"===e||n?"1":"auto"},E=(e,n)=>0===e?"0":e?`${100/(n/e)}%`:void 0;function C({span:e,order:n,offset:t,selector:r}){let s=(0,g.rZ)(),l=m(),i=(0,j.v)(e),a=void 0===i?12:(0,j.v)(e),c=(0,x.L)({"--col-order":j.v(n)?.toString(),"--col-flex-grow":w(a,l.grow),"--col-flex-basis":v(a,l.columns),"--col-width":"content"===a?"auto":void 0,"--col-max-width":y(a,l.columns,l.grow),"--col-offset":E((0,j.v)(t),l.columns)}),d=(0,u.X)(s.breakpoints).reduce((o,r)=>(o[r]||(o[r]={}),"object"==typeof n&&void 0!==n[r]&&(o[r]["--col-order"]=n[r]?.toString()),"object"==typeof e&&void 0!==e[r]&&(o[r]["--col-flex-grow"]=w(e[r],l.grow),o[r]["--col-flex-basis"]=v(e[r],l.columns),o[r]["--col-width"]="content"===e[r]?"auto":void 0,o[r]["--col-max-width"]=y(e[r],l.columns,l.grow)),"object"==typeof t&&void 0!==t[r]&&(o[r]["--col-offset"]=E(t[r],l.columns)),o),{}),h=(0,f.I)((0,u.X)(d),s).filter(e=>(0,u.X)(d[e.value]).length>0),p=h.map(e=>({query:`(min-width: ${s.breakpoints[e.value]})`,styles:d[e.value]}));return o.createElement(b.f,{styles:c,media:p,selector:r})}var S={root:"m-410352e9",inner:"m-dee7bd2f",col:"m-96bdd299"};let T={span:12},k=(0,c.d)((e,n)=>{let t=(0,s.w)("GridCol",T,e),{classNames:r,className:l,style:c,styles:d,vars:h,span:u,order:x,offset:f,...j}=t,g=m(),b=(0,i.m)();return o.createElement(o.Fragment,null,o.createElement(C,{selector:`.${b}`,span:u,order:x,offset:f}),o.createElement(a.x,{ref:n,...g.getStyles("col",{className:(0,p.Z)(l,b),style:c,classNames:r,styles:d}),...j}))});k.classes=S,k.displayName="@mantine/core/GridCol";var I=t(92082);function N({gutter:e,selector:n}){let t=(0,g.rZ)(),r=(0,x.L)({"--grid-gutter":(0,I.bG)((0,j.v)(e))}),s=(0,u.X)(t.breakpoints).reduce((n,t)=>(n[t]||(n[t]={}),"object"==typeof e&&void 0!==e[t]&&(n[t]["--grid-gutter"]=(0,I.bG)(e[t])),n),{}),l=(0,f.I)((0,u.X)(s),t).filter(e=>(0,u.X)(s[e.value]).length>0),i=l.map(e=>({query:`(min-width: ${t.breakpoints[e.value]})`,styles:s[e.value]}));return o.createElement(b.f,{styles:r,media:i,selector:n})}let z={gutter:"md",grow:!1,columns:12},P=(0,r.Z)((e,{justify:n,align:t,overflow:o})=>({root:{"--grid-justify":n,"--grid-align":t,"--grid-overflow":o}})),B=(0,c.d)((e,n)=>{let t=(0,s.w)("Grid",z,e),{classNames:r,className:c,style:d,styles:m,unstyled:p,vars:u,grow:x,gutter:f,columns:j,align:g,justify:b,children:v,...y}=t,w=(0,l.y)({name:"Grid",classes:S,props:t,className:c,style:d,classNames:r,styles:m,unstyled:p,vars:u,varsResolver:P}),E=(0,i.m)();return o.createElement(h,{value:{getStyles:w,grow:x,columns:j}},o.createElement(N,{selector:`.${E}`,...t}),o.createElement(a.x,{ref:n,...w("root",{className:E}),...y},o.createElement("div",{...w("inner")},v)))});B.classes=S,B.displayName="@mantine/core/Grid",B.Col=k},62339:function(e,n,t){"use strict";t.d(n,{Y:function(){return C}});var o=t(27378),r=t(40624),s=t(62740),l=t(58675),i=t(28086),a=t(72840),c=t(92082),d=t(83453),h=t(5564),m=t(6231),p=t(96739),u=t(20410),x=t(23163),f=t(19397);function j({direction:e,style:n,...t}){return o.createElement("svg",{style:{width:"var(--ni-chevron-size)",height:"var(--ni-chevron-size)",transform:"up"===e?"rotate(180deg)":void 0,...n},viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},o.createElement("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}var g={root:"m-e2f5cd4e",controls:"m-95e17d22",control:"m-80b4b171"};let b=/^-0(\.0*)?$/,v=/^-?0\d+$/;function y(e,n,t){return void 0===e||(void 0===n||e>=n)&&(void 0===t||e<=t)}let w={step:1,clampBehavior:"blur",allowDecimal:!0,allowNegative:!0,startValue:0},E=(0,d.Z)((e,{size:n})=>({controls:{"--ni-chevron-size":(0,c.ap)(n,"ni-chevron-size")}})),C=(0,u.d)((e,n)=>{let t=(0,p.w)("NumberInput",w,e),{className:c,classNames:d,styles:u,unstyled:C,vars:S,onChange:T,onValueChange:k,value:I,defaultValue:N,max:z,min:P,step:B,hideControls:M,rightSection:D,isAllowed:L,clampBehavior:A,onBlur:R,allowDecimal:G,decimalScale:F,onKeyDown:V,handlersRef:H,startValue:X,disabled:O,rightSectionPointerEvents:Z,allowNegative:W,readOnly:q,size:Y,rightSectionWidth:$,stepHoldInterval:_,stepHoldDelay:U,allowLeadingZeros:Q,...K}=t,J=(0,m.y)({name:"NumberInput",classes:g,props:t,classNames:d,styles:u,unstyled:C,vars:S,varsResolver:E}),{resolvedClassNames:ee,resolvedStyles:en}=(0,h.h)({classNames:d,styles:u,props:t}),[et,eo]=(0,l.C)({value:I,defaultValue:N,onChange:T}),er=void 0!==U&&void 0!==_,es=(0,o.useRef)(null),el=(0,o.useRef)(null),ei=(0,o.useRef)(0),ea=(0,o.useRef)();ea.current=()=>{"number"!=typeof et||Number.isNaN(et)?eo((0,i.u)(X,P,z)):void 0!==z?eo(et+B<=z?et+B:z):eo(et+B)};let ec=(0,o.useRef)();ec.current=()=>{"number"!=typeof et||Number.isNaN(et)?eo((0,i.u)(X,P,z)):eo(function({value:e,min:n,step:t=1,allowNegative:o}){let r=e-t;return void 0!==n&&r{e?ea.current():ec.current(),ei.current+=1},eh=e=>{if(ed(e),er){let n="number"==typeof _?_:_(ei.current);el.current=window.setTimeout(()=>eh(e),n)}},em=(e,n)=>{e.preventDefault(),es.current?.focus(),ed(n),er&&(el.current=window.setTimeout(()=>eh(n),U))},ep=()=>{el.current&&window.clearTimeout(el.current),el.current=null,ei.current=0},eu=o.createElement("div",{...J("controls")},o.createElement(f.k,{...J("control"),tabIndex:-1,"aria-hidden":!0,disabled:O||"number"==typeof et&&void 0!==z&&et>=z,mod:{direction:"up"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{em(e,!0)},onPointerUp:ep,onPointerLeave:ep},o.createElement(j,{direction:"up"})),o.createElement(f.k,{...J("control"),tabIndex:-1,"aria-hidden":!0,disabled:O||"number"==typeof et&&void 0!==P&&et<=P,mod:{direction:"down"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{em(e,!1)},onPointerUp:ep,onPointerLeave:ep},o.createElement(j,{direction:"down"})));return o.createElement(x.M,{component:s.h3,allowNegative:W,className:(0,r.Z)(g.root,c),size:Y,...K,readOnly:q,disabled:O,value:et,getInputRef:(0,a.Yx)(n,es),onValueChange:(e,n)=>{if("event"===n.source){var t;eo(!(("number"==typeof(t=e.floatValue)?t{V?.(e),q||("ArrowUp"===e.key&&(e.preventDefault(),ea.current()),"ArrowDown"===e.key&&(e.preventDefault(),ec.current()))},rightSectionPointerEvents:Z??(O?"none":void 0),rightSectionWidth:$??`var(--ni-right-section-width-${Y||"sm"})`,allowLeadingZeros:Q,onBlur:e=>{if(R?.(e),"blur"===A&&"number"==typeof et){let e=(0,i.u)(et,P,z);e!==et&&eo((0,i.u)(et,P,z))}},isAllowed:e=>"strict"===A?L?L(e)&&y(e.floatValue,P,z):y(e.floatValue,P,z):!L||L(e)})});C.classes={...x.M.classes,...g},C.displayName="@mantine/core/NumberInput"},37454:function(e,n,t){"use strict";t.d(n,{M:function(){return b}});var o=t(27378),r=t(96739),s=t(6231),l=t(40593),i=t(56589),a=t(20410),c=t(53007),d=t(86689),h=t(92082),m=t(31582),p=t(75001),u=t(2256),x=t(9889);function f({spacing:e,verticalSpacing:n,cols:t,selector:r}){let s=(0,u.rZ)(),l=void 0===n?e:n,i=(0,d.L)({"--sg-spacing-x":(0,h.bG)((0,p.v)(e)),"--sg-spacing-y":(0,h.bG)((0,p.v)(l)),"--sg-cols":p.v(t)?.toString()}),a=(0,c.X)(s.breakpoints).reduce((n,o)=>(n[o]||(n[o]={}),"object"==typeof e&&void 0!==e[o]&&(n[o]["--sg-spacing-x"]=(0,h.bG)(e[o])),"object"==typeof l&&void 0!==l[o]&&(n[o]["--sg-spacing-y"]=(0,h.bG)(l[o])),"object"==typeof t&&void 0!==t[o]&&(n[o]["--sg-cols"]=t[o]),n),{}),f=(0,m.I)((0,c.X)(a),s).filter(e=>(0,c.X)(a[e.value]).length>0),j=f.map(e=>({query:`(min-width: ${s.breakpoints[e.value]})`,styles:a[e.value]}));return o.createElement(x.f,{styles:i,media:j,selector:r})}var j={root:"m-2415a157"};let g={cols:1,spacing:"md"},b=(0,a.d)((e,n)=>{let t=(0,r.w)("SimpleGrid",g,e),{classNames:a,className:c,style:d,styles:h,unstyled:m,vars:p,cols:u,verticalSpacing:x,spacing:b,...v}=t,y=(0,s.y)({name:"SimpleGrid",classes:j,props:t,className:c,style:d,classNames:a,styles:h,unstyled:m,vars:p}),w=(0,l.m)();return o.createElement(o.Fragment,null,o.createElement(f,{...t,selector:`.${w}`}),o.createElement(i.x,{ref:n,...y("root",{className:w}),...v}))});b.classes=j,b.displayName="@mantine/core/SimpleGrid"}},function(e){e.O(0,[30370,62740,60213,15819,2775,45608,16584,17932,49774,92888,40179],function(){return e(e.s=46037)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/changelog/7-3-0-a35629e22a0607d1.js b/_next/static/chunks/pages/changelog/7-3-0-9bfc139eb682d2e4.js similarity index 87% rename from _next/static/chunks/pages/changelog/7-3-0-a35629e22a0607d1.js rename to _next/static/chunks/pages/changelog/7-3-0-9bfc139eb682d2e4.js index 78421044208..cc0896f15c0 100644 --- a/_next/static/chunks/pages/changelog/7-3-0-a35629e22a0607d1.js +++ b/_next/static/chunks/pages/changelog/7-3-0-9bfc139eb682d2e4.js @@ -59,4 +59,4 @@ function Demo() { ); } -`,l={type:"code",component:function(){let[e,n]=(0,r.useState)(250);return r.createElement(r.Fragment,null,r.createElement(a.x,null,"Hue value: ",e),r.createElement(t.Q,{value:e,onChange:n}))},code:i,centered:!0,maxWidth:300}},75014:function(e,n,o){"use strict";o.d(n,{Y:function(){return N}});var r=o(27378),a=o(31002),t=o(92082),i=o(83453),l=o(88193),s=o(89738),c=o(34121),d=o(96739),h=o(6231),m=o(55934),p=o(56589),u=o(20410),x=o(91549),j=o(89871);let[f,g]=(0,j.V)();var v=o(58675),b=o(42487),w=o(96606);let k={},y=(0,u.d)((e,n)=>{let{value:o,defaultValue:t,onChange:i,size:l,wrapperProps:s,children:c,name:h,readOnly:m,...p}=(0,d.w)("RadioGroup",k,e),u=(0,a.M)(h),[x,j]=(0,v.C)({value:o,defaultValue:t,finalValue:"",onChange:i});return r.createElement(f,{value:{value:x,onChange:e=>!m&&j(e.currentTarget.value),size:l,name:u}},r.createElement(b.I.Wrapper,{size:l,ref:n,...s,...p,labelElement:"div",__staticSelector:"RadioGroup"},r.createElement(w.m,{role:"radiogroup"},c)))});y.classes=b.I.Wrapper.classes,y.displayName="@mantine/core/RadioGroup";var C=o(71078);function E({size:e,style:n,...o}){return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 5 5",style:{width:(0,C.h)(e),height:(0,C.h)(e),...n},"aria-hidden":!0,...o},r.createElement("circle",{cx:"2.5",cy:"2.5",r:"2.5",fill:"currentColor"}))}var S={root:"m-f3f1af94",inner:"m-89c4f5e4",icon:"m-f3ed6b2b",radio:"m-8a3dbb89","radio--outline":"m-1bfe9d39"};let z={labelPosition:"right"},T=(0,i.Z)((e,{size:n,radius:o,color:r,iconColor:a,variant:i,autoContrast:d})=>{let h=(0,l.E)({color:r||e.primaryColor,theme:e}),m=h.isThemeColor&&void 0===h.shade?`var(--mantine-color-${h.color}-outline)`:h.color;return{root:{"--radio-size":(0,t.ap)(n,"radio-size"),"--radio-radius":void 0===o?void 0:(0,t.H5)(o),"--radio-color":"outline"===i?m:(0,s.p)(r,e),"--radio-icon-color":a?(0,s.p)(a,e):d?(0,c.R)({color:r,theme:e}):void 0,"--radio-icon-size":(0,t.ap)(n,"radio-icon-size")}}}),N=(0,u.d)((e,n)=>{let o=(0,d.w)("Radio",z,e),{classNames:t,className:i,style:l,styles:s,unstyled:c,vars:u,id:j,size:f,label:v,labelPosition:b,description:w,error:k,radius:y,color:C,variant:N,disabled:I,wrapperProps:M,icon:A=E,rootRef:R,iconColor:_,onChange:D,mod:B,...O}=o,G=(0,h.y)({name:"Radio",classes:S,props:o,className:i,style:l,classNames:t,styles:s,unstyled:c,vars:u,varsResolver:T}),P=g(),F=P?.size??f,Y=o.size?f:F,{styleProps:V,rest:H}=(0,m.c)(O),L=(0,a.M)(j),W=P?{checked:P.value===H.value,name:H.name??P.name,onChange:e=>{P.onChange(e),D?.(e)}}:{};return r.createElement(x.Z,{...G("root"),__staticSelector:"Radio",__stylesApiProps:o,id:L,size:Y,labelPosition:b,label:v,description:w,error:k,disabled:I,classNames:t,styles:s,unstyled:c,"data-checked":W.checked||void 0,variant:N,ref:R,mod:B,...V,...M},r.createElement(p.x,{...G("inner"),mod:{"label-position":b}},r.createElement(p.x,{...G("radio",{focusable:!0,variant:N}),onChange:D,...H,...W,component:"input",mod:{error:!!k},ref:n,id:L,disabled:I,type:"radio"}),r.createElement(A,{...G("icon"),"aria-hidden":!0})))});N.classes=S,N.displayName="@mantine/core/Radio",N.Group=y}},function(e){e.O(0,[30370,15819,2775,56926,16789,49774,92888,40179],function(){return e(e.s=57985)}),_N_E=e.O()}]); \ No newline at end of file +`,l={type:"code",component:function(){let[e,n]=(0,r.useState)(250);return r.createElement(r.Fragment,null,r.createElement(a.x,null,"Hue value: ",e),r.createElement(t.Q,{value:e,onChange:n}))},code:i,centered:!0,maxWidth:300}},75014:function(e,n,o){"use strict";o.d(n,{Y:function(){return I}});var r=o(27378),a=o(31002),t=o(92082),i=o(83453),l=o(88193),s=o(89738),c=o(34121),d=o(55357),h=o(96739),m=o(6231),p=o(55934),u=o(56589),x=o(20410),j=o(91549),f=o(89871);let[g,v]=(0,f.V)();var b=o(58675),w=o(42487),k=o(96606);let y={},C=(0,x.d)((e,n)=>{let{value:o,defaultValue:t,onChange:i,size:l,wrapperProps:s,children:c,name:d,readOnly:m,...p}=(0,h.w)("RadioGroup",y,e),u=(0,a.M)(d),[x,j]=(0,b.C)({value:o,defaultValue:t,finalValue:"",onChange:i});return r.createElement(g,{value:{value:x,onChange:e=>!m&&j(e.currentTarget.value),size:l,name:u}},r.createElement(w.I.Wrapper,{size:l,ref:n,...s,...p,labelElement:"div",__staticSelector:"RadioGroup"},r.createElement(k.m,{role:"radiogroup"},c)))});C.classes=w.I.Wrapper.classes,C.displayName="@mantine/core/RadioGroup";var E=o(71078);function S({size:e,style:n,...o}){return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 5 5",style:{width:(0,E.h)(e),height:(0,E.h)(e),...n},"aria-hidden":!0,...o},r.createElement("circle",{cx:"2.5",cy:"2.5",r:"2.5",fill:"currentColor"}))}var z={root:"m-f3f1af94",inner:"m-89c4f5e4",icon:"m-f3ed6b2b",radio:"m-8a3dbb89","radio--outline":"m-1bfe9d39"};let T={labelPosition:"right"},N=(0,i.Z)((e,{size:n,radius:o,color:r,iconColor:a,variant:i,autoContrast:h})=>{let m=(0,l.E)({color:r||e.primaryColor,theme:e}),p=m.isThemeColor&&void 0===m.shade?`var(--mantine-color-${m.color}-outline)`:m.color;return{root:{"--radio-size":(0,t.ap)(n,"radio-size"),"--radio-radius":void 0===o?void 0:(0,t.H5)(o),"--radio-color":"outline"===i?p:(0,s.p)(r,e),"--radio-icon-color":a?(0,s.p)(a,e):(0,d.o)(h,e)?(0,c.R)({color:r,theme:e}):void 0,"--radio-icon-size":(0,t.ap)(n,"radio-icon-size")}}}),I=(0,x.d)((e,n)=>{let o=(0,h.w)("Radio",T,e),{classNames:t,className:i,style:l,styles:s,unstyled:c,vars:d,id:x,size:f,label:g,labelPosition:b,description:w,error:k,radius:y,color:C,variant:E,disabled:I,wrapperProps:M,icon:A=S,rootRef:R,iconColor:_,onChange:D,mod:B,...O}=o,G=(0,m.y)({name:"Radio",classes:z,props:o,className:i,style:l,classNames:t,styles:s,unstyled:c,vars:d,varsResolver:N}),P=v(),F=P?.size??f,Y=o.size?f:F,{styleProps:V,rest:H}=(0,p.c)(O),L=(0,a.M)(x),W=P?{checked:P.value===H.value,name:H.name??P.name,onChange:e=>{P.onChange(e),D?.(e)}}:{};return r.createElement(j.Z,{...G("root"),__staticSelector:"Radio",__stylesApiProps:o,id:L,size:Y,labelPosition:b,label:g,description:w,error:k,disabled:I,classNames:t,styles:s,unstyled:c,"data-checked":W.checked||void 0,variant:E,ref:R,mod:B,...V,...M},r.createElement(u.x,{...G("inner"),mod:{"label-position":b}},r.createElement(u.x,{...G("radio",{focusable:!0,variant:E}),onChange:D,...H,...W,component:"input",mod:{error:!!k},ref:n,id:L,disabled:I,type:"radio"}),r.createElement(A,{...G("icon"),"aria-hidden":!0})))});I.classes=z,I.displayName="@mantine/core/Radio",I.Group=C}},function(e){e.O(0,[30370,15819,2775,56926,16789,49774,92888,40179],function(){return e(e.s=57985)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/autocomplete-dcdfdfe2334545c3.js b/_next/static/chunks/pages/core/autocomplete-63702baa5bf6e7ab.js similarity index 95% rename from _next/static/chunks/pages/core/autocomplete-dcdfdfe2334545c3.js rename to _next/static/chunks/pages/core/autocomplete-63702baa5bf6e7ab.js index be483d92b36..313fef9b6ca 100644 --- a/_next/static/chunks/pages/core/autocomplete-dcdfdfe2334545c3.js +++ b/_next/static/chunks/pages/core/autocomplete-63702baa5bf6e7ab.js @@ -335,4 +335,4 @@ function Demo() { /> ); } -`,eo={type:"styles-api",data:ee.I,component:function(e){return a.createElement(l.F,{...e,dropdownOpened:!0,leftSection:a.createElement(Q.Z,{style:{width:(0,N.h)(18),height:(0,N.h)(18)},stroke:1.5}),withAsterisk:!0,label:"Autocomplete",description:"Description",placeholder:"Autocomplete",data:[{group:"Frontend",items:["React","Angular"]},{group:"Backend",items:["Node","Django"]}]})},code:et,centered:!0,maxWidth:340};var er=o(3916),en=o(54568);let ea=(0,er.A)(en.us.Autocomplete);function el(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,n.a)(),...e.components},{ComboboxData:o,ComboboxDisclaimer:a,ComboboxFiltering:l,ComboboxLargeData:i,ComboboxProps:d,Demo:u,GetElementRef:s,InputAccessibility:m,InputFeatures:f,InputSections:b,StylesApiSelectors:y}=t;return o||ec("ComboboxData",!0),a||ec("ComboboxDisclaimer",!0),l||ec("ComboboxFiltering",!0),i||ec("ComboboxLargeData",!0),d||ec("ComboboxProps",!0),u||ec("Demo",!0),s||ec("GetElementRef",!0),m||ec("InputAccessibility",!0),f||ec("InputFeatures",!0),b||ec("InputSections",!0),y||ec("StylesApiSelectors",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a,{component:"Autocomplete"}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Autocomplete"})," provides user a list of suggestions based on the input,\nhowever user is not limited to suggestions and can type anything."]}),"\n",(0,r.jsx)(u,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Autocomplete"})," value must be a string, other types are not supported.\n",(0,r.jsx)(t.code,{children:"onChange"})," function is called with a string value as a single argument."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Autocomplete } from '@mantine/core';\n\nfunction Demo() {\n const [value, setValue] = useState('');\n return ;\n}\n"})}),"\n",(0,r.jsx)(o,{component:"Autocomplete"}),"\n",(0,r.jsx)(l,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:p}),"\n",(0,r.jsx)(t.h2,{id:"sort-options",children:"Sort options"}),"\n",(0,r.jsxs)(t.p,{children:["By default, options are sorted by their position in the data array. You can change this behavior\nwith ",(0,r.jsx)(t.code,{children:"filter"})," function:"]}),"\n",(0,r.jsx)(u,{data:h}),"\n",(0,r.jsx)(i,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:g}),"\n",(0,r.jsx)(t.h2,{id:"scrollable-dropdown",children:"Scrollable dropdown"}),"\n",(0,r.jsxs)(t.p,{children:["By default, the options list is wrapped with ",(0,r.jsx)(t.a,{href:"/core/scroll-area",children:"ScrollArea.Autosize"}),".\nYou can control dropdown max-height with ",(0,r.jsx)(t.code,{children:"maxDropdownHeight"})," prop if you do not change the default settings."]}),"\n",(0,r.jsxs)(t.p,{children:["If you want to use native scrollbars, set ",(0,r.jsx)(t.code,{children:"withScrollArea={false}"}),". Note that in this case,\nyou will need to change dropdown styles with ",(0,r.jsx)(t.a,{href:"/styles/styles-api",children:"Styles API"}),"."]}),"\n",(0,r.jsx)(u,{data:x}),"\n",(0,r.jsx)(t.h2,{id:"group-options",children:"Group options"}),"\n",(0,r.jsx)(u,{data:w}),"\n",(0,r.jsx)(t.h2,{id:"disabled-options",children:"Disabled options"}),"\n",(0,r.jsx)(t.p,{children:"When option is disabled, it cannot be selected and is ignored in keyboard navigation."}),"\n",(0,r.jsx)(u,{data:E}),"\n",(0,r.jsx)(d,{component:"Autocomplete"}),"\n",(0,r.jsx)(t.h2,{id:"inside-popover",children:"Inside Popover"}),"\n",(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"Autocomplete"})," inside popover, you need to set ",(0,r.jsx)(t.code,{children:"withinPortal: false"}),":"]}),"\n",(0,r.jsx)(u,{data:k}),"\n",(0,r.jsx)(t.h2,{id:"control-dropdown-opened-state",children:"Control dropdown opened state"}),"\n",(0,r.jsxs)(t.p,{children:["You can control dropdown opened state with ",(0,r.jsx)(t.code,{children:"dropdownOpened"})," prop. Additionally,\nyou can use ",(0,r.jsx)(t.code,{children:"onDropdownClose"})," and ",(0,r.jsx)(t.code,{children:"onDropdownOpen"})," to listen to dropdown opened state changes."]}),"\n",(0,r.jsx)(u,{data:R}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-position",children:"Dropdown position"}),"\n",(0,r.jsxs)(t.p,{children:["By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input.\nYou can change this behavior by setting ",(0,r.jsx)(t.code,{children:"position"})," and ",(0,r.jsx)(t.code,{children:"middlewares"})," props, which are passed down to the\nunderlying ",(0,r.jsx)(t.a,{href:"/core/popover",children:"Popover"})," component."]}),"\n",(0,r.jsx)(t.p,{children:"Example of dropdown that is always displayed above the input:"}),"\n",(0,r.jsx)(u,{data:Y}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-animation",children:"Dropdown animation"}),"\n",(0,r.jsxs)(t.p,{children:["By default, dropdown animations are disabled. To enable them, you can set ",(0,r.jsx)(t.code,{children:"transitionProps"}),",\nwhich will be passed down to the underlying ",(0,r.jsx)(t.a,{href:"/core/transition",children:"Transition"})," component."]}),"\n",(0,r.jsx)(u,{data:O}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-padding",children:"Dropdown padding"}),"\n",(0,r.jsx)(u,{data:B}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-shadow",children:"Dropdown shadow"}),"\n",(0,r.jsx)(u,{data:z}),"\n",(0,r.jsx)(b,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:Z}),"\n",(0,r.jsx)(t.h2,{id:"input-props",children:"Input props"}),"\n",(0,r.jsx)(f,{component:"Autocomplete",element:"input"}),"\n",(0,r.jsx)(u,{data:G}),"\n",(0,r.jsx)(t.h2,{id:"read-only",children:"Read only"}),"\n",(0,r.jsxs)(t.p,{children:["Set ",(0,r.jsx)(t.code,{children:"readOnly"})," to make the input read only. When ",(0,r.jsx)(t.code,{children:"readOnly"})," is set,\n",(0,r.jsx)(t.code,{children:"Autocomplete"})," will not show suggestions and will not call ",(0,r.jsx)(t.code,{children:"onChange"})," function."]}),"\n",(0,r.jsx)(u,{data:U}),"\n",(0,r.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,r.jsxs)(t.p,{children:["Set ",(0,r.jsx)(t.code,{children:"disabled"})," to disable the input. When ",(0,r.jsx)(t.code,{children:"disabled"})," is set,\nuser cannot interact with the input and ",(0,r.jsx)(t.code,{children:"Autocomplete"})," will not show suggestions."]}),"\n",(0,r.jsx)(u,{data:q}),"\n",(0,r.jsx)(t.h2,{id:"error-state",children:"Error state"}),"\n",(0,r.jsx)(u,{data:K}),"\n",(0,r.jsx)(y,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:eo}),"\n",(0,r.jsx)(s,{component:"Autocomplete",refType:"input"}),"\n",(0,r.jsx)(m,{component:"Autocomplete"})]})}function ei(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(ea,{...e,children:(0,r.jsx)(el,{...e})})}function ec(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},77481:function(e,t,o){"use strict";o.d(t,{Mt:function(){return r},nW:function(){return n},pc:function(){return a}});let r=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],n=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],a=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},26720:function(e,t,o){"use strict";o.d(t,{F:function(){return b}});var r=o(27378),n=o(31002),a=o(58675),l=o(5564),i=o(96739),c=o(20410),d=o(2161),u=o(38099),p=o(45608),s=o(81097),m=o(54526),h=o(23163);let f={},b=(0,c.d)((e,t)=>{let o=(0,i.w)("Autocomplete",f,e),{classNames:c,styles:b,unstyled:g,vars:y,dropdownOpened:v,defaultDropdownOpened:x,onDropdownClose:A,onDropdownOpen:w,onFocus:j,onBlur:E,onClick:P,onChange:V,data:S,value:k,defaultValue:D,selectFirstOptionOnChange:F,onOptionSubmit:R,comboboxProps:C,readOnly:Y,disabled:W,filter:O,limit:I,withScrollArea:B,maxDropdownHeight:_,size:z,id:T,...N}=o,L=(0,n.M)(T),Z=(0,d.R)(S),$=(0,u.g)(Z),[M,G]=(0,a.C)({value:k,defaultValue:D,finalValue:"",onChange:V}),H=(0,m.K)({opened:v,defaultOpened:x,onDropdownOpen:w,onDropdownClose:()=>{A?.(),H.resetSelectedOption()}}),{resolvedClassNames:U,resolvedStyles:J}=(0,l.h)({props:o,styles:b,classNames:c});return(0,r.useEffect)(()=>{F&&H.selectFirstOption()},[F,M]),r.createElement(p.h,{store:H,__staticSelector:"Autocomplete",classNames:U,styles:J,unstyled:g,readOnly:Y,onOptionSubmit:e=>{R?.(e),G($[e].label),H.closeDropdown()},size:z,...C},r.createElement(p.h.Target,null,r.createElement(h.M,{ref:t,...N,size:z,__staticSelector:"Autocomplete",disabled:W,readOnly:Y,value:M,onChange:e=>{G(e.currentTarget.value),H.openDropdown(),F&&H.selectFirstOption()},onFocus:e=>{H.openDropdown(),j?.(e)},onBlur:e=>{H.closeDropdown(),E?.(e)},onClick:e=>{H.openDropdown(),P?.(e)},classNames:U,styles:J,unstyled:g,id:L})),r.createElement(s.r,{data:Z,hidden:Y||W,filter:O,search:M,limit:I,hiddenWhenEmpty:!0,withScrollArea:B,maxDropdownHeight:_,unstyled:g,labelId:`${L}-label`}))});b.classes={...h.M.classes,...p.h.classes},b.displayName="@mantine/core/Autocomplete"},81097:function(e,t,o){"use strict";o.d(t,{r:function(){return p}});var r=o(27378),n=o(40624),a=o(38765),l=o(49849),i=o(45608),c=o(61777),d=o(62443);function u(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:o,checkIconPosition:l,unstyled:p}){if(!(0,c.f)(e)){let c=t&&u(o,e.value)&&r.createElement(a.n,{className:d.Z.optionsDropdownCheckIcon});return r.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,n.Z)({[d.Z.optionsDropdownOption]:!p}),"data-reverse":"right"===l||void 0,"data-checked":u(o,e.value)||void 0,"aria-selected":u(o,e.value)},"left"===l&&c,r.createElement("span",null,e.label),"right"===l&&c)}let s=e.items.map(e=>r.createElement(Option,{data:e,value:o,key:e.value,unstyled:p,withCheckIcon:t,checkIconPosition:l}));return r.createElement(i.h.Group,{label:e.group},s)}function p({data:e,hidden:t,hiddenWhenEmpty:o,filter:n,search:a,limit:u,maxDropdownHeight:p,withScrollArea:s=!0,filterOptions:m=!0,withCheckIcon:h=!1,value:f,checkIconPosition:b,nothingFoundMessage:g,unstyled:y,labelId:v}){!function e(t,o=new Set){if(Array.isArray(t))for(let r of t)if((0,c.f)(r))e(r.items,o);else{if(void 0===r.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof r.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof r.value}`);if(o.has(r.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${r.value}" was provided more than once`);o.add(r.value)}}(e);let x="string"==typeof a,A=x?(n||function e({options:t,search:o,limit:r}){let n=o.trim().toLowerCase(),a=[];for(let l=0;l0)return!1;return!0}(A),j=A.map(e=>r.createElement(Option,{data:e,key:(0,c.f)(e)?e.group:e.value,withCheckIcon:h,value:f,checkIconPosition:b,unstyled:y}));return r.createElement(i.h.Dropdown,{hidden:t||o&&w},r.createElement(i.h.Options,{labelledBy:v},s?r.createElement(l.x.Autosize,{mah:p??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y",className:d.Z.optionsDropdownScrollArea},j):j,w&&g&&r.createElement(i.h.Empty,null,g)))}},61777:function(e,t,o){"use strict";function r(e){return"group"in e}o.d(t,{f:function(){return r}})},38099:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},87921:function(e,t,o){"use strict";o.d(t,{q:function(){return n}});var r=o(27378);function n(e=!1,t){let{onOpen:o,onClose:n}=t||{},[a,l]=(0,r.useState)(e),i=(0,r.useCallback)(()=>{l(e=>e||(o?.(),!0))},[o]),c=(0,r.useCallback)(()=>{l(e=>e?(n?.(),!1):e)},[n]),d=(0,r.useCallback)(()=>{a?c():i()},[c,i,a]);return[a,{open:i,close:c,toggle:d}]}}},function(e){e.O(0,[30370,15819,2775,45608,49774,92888,40179],function(){return e(e.s=9524)}),_N_E=e.O()}]); \ No newline at end of file +`,eo={type:"styles-api",data:ee.I,component:function(e){return a.createElement(l.F,{...e,dropdownOpened:!0,leftSection:a.createElement(Q.Z,{style:{width:(0,N.h)(18),height:(0,N.h)(18)},stroke:1.5}),withAsterisk:!0,label:"Autocomplete",description:"Description",placeholder:"Autocomplete",data:[{group:"Frontend",items:["React","Angular"]},{group:"Backend",items:["Node","Django"]}]})},code:et,centered:!0,maxWidth:340};var er=o(3916),en=o(54568);let ea=(0,er.A)(en.us.Autocomplete);function el(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,n.a)(),...e.components},{ComboboxData:o,ComboboxDisclaimer:a,ComboboxFiltering:l,ComboboxLargeData:i,ComboboxProps:d,Demo:u,GetElementRef:s,InputAccessibility:m,InputFeatures:f,InputSections:b,StylesApiSelectors:y}=t;return o||ec("ComboboxData",!0),a||ec("ComboboxDisclaimer",!0),l||ec("ComboboxFiltering",!0),i||ec("ComboboxLargeData",!0),d||ec("ComboboxProps",!0),u||ec("Demo",!0),s||ec("GetElementRef",!0),m||ec("InputAccessibility",!0),f||ec("InputFeatures",!0),b||ec("InputSections",!0),y||ec("StylesApiSelectors",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a,{component:"Autocomplete"}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Autocomplete"})," provides user a list of suggestions based on the input,\nhowever user is not limited to suggestions and can type anything."]}),"\n",(0,r.jsx)(u,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Autocomplete"})," value must be a string, other types are not supported.\n",(0,r.jsx)(t.code,{children:"onChange"})," function is called with a string value as a single argument."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Autocomplete } from '@mantine/core';\n\nfunction Demo() {\n const [value, setValue] = useState('');\n return ;\n}\n"})}),"\n",(0,r.jsx)(o,{component:"Autocomplete"}),"\n",(0,r.jsx)(l,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:p}),"\n",(0,r.jsx)(t.h2,{id:"sort-options",children:"Sort options"}),"\n",(0,r.jsxs)(t.p,{children:["By default, options are sorted by their position in the data array. You can change this behavior\nwith ",(0,r.jsx)(t.code,{children:"filter"})," function:"]}),"\n",(0,r.jsx)(u,{data:h}),"\n",(0,r.jsx)(i,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:g}),"\n",(0,r.jsx)(t.h2,{id:"scrollable-dropdown",children:"Scrollable dropdown"}),"\n",(0,r.jsxs)(t.p,{children:["By default, the options list is wrapped with ",(0,r.jsx)(t.a,{href:"/core/scroll-area",children:"ScrollArea.Autosize"}),".\nYou can control dropdown max-height with ",(0,r.jsx)(t.code,{children:"maxDropdownHeight"})," prop if you do not change the default settings."]}),"\n",(0,r.jsxs)(t.p,{children:["If you want to use native scrollbars, set ",(0,r.jsx)(t.code,{children:"withScrollArea={false}"}),". Note that in this case,\nyou will need to change dropdown styles with ",(0,r.jsx)(t.a,{href:"/styles/styles-api",children:"Styles API"}),"."]}),"\n",(0,r.jsx)(u,{data:x}),"\n",(0,r.jsx)(t.h2,{id:"group-options",children:"Group options"}),"\n",(0,r.jsx)(u,{data:w}),"\n",(0,r.jsx)(t.h2,{id:"disabled-options",children:"Disabled options"}),"\n",(0,r.jsx)(t.p,{children:"When option is disabled, it cannot be selected and is ignored in keyboard navigation."}),"\n",(0,r.jsx)(u,{data:E}),"\n",(0,r.jsx)(d,{component:"Autocomplete"}),"\n",(0,r.jsx)(t.h2,{id:"inside-popover",children:"Inside Popover"}),"\n",(0,r.jsxs)(t.p,{children:["To use ",(0,r.jsx)(t.code,{children:"Autocomplete"})," inside popover, you need to set ",(0,r.jsx)(t.code,{children:"withinPortal: false"}),":"]}),"\n",(0,r.jsx)(u,{data:k}),"\n",(0,r.jsx)(t.h2,{id:"control-dropdown-opened-state",children:"Control dropdown opened state"}),"\n",(0,r.jsxs)(t.p,{children:["You can control dropdown opened state with ",(0,r.jsx)(t.code,{children:"dropdownOpened"})," prop. Additionally,\nyou can use ",(0,r.jsx)(t.code,{children:"onDropdownClose"})," and ",(0,r.jsx)(t.code,{children:"onDropdownOpen"})," to listen to dropdown opened state changes."]}),"\n",(0,r.jsx)(u,{data:R}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-position",children:"Dropdown position"}),"\n",(0,r.jsxs)(t.p,{children:["By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input.\nYou can change this behavior by setting ",(0,r.jsx)(t.code,{children:"position"})," and ",(0,r.jsx)(t.code,{children:"middlewares"})," props, which are passed down to the\nunderlying ",(0,r.jsx)(t.a,{href:"/core/popover",children:"Popover"})," component."]}),"\n",(0,r.jsx)(t.p,{children:"Example of dropdown that is always displayed above the input:"}),"\n",(0,r.jsx)(u,{data:Y}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-animation",children:"Dropdown animation"}),"\n",(0,r.jsxs)(t.p,{children:["By default, dropdown animations are disabled. To enable them, you can set ",(0,r.jsx)(t.code,{children:"transitionProps"}),",\nwhich will be passed down to the underlying ",(0,r.jsx)(t.a,{href:"/core/transition",children:"Transition"})," component."]}),"\n",(0,r.jsx)(u,{data:O}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-padding",children:"Dropdown padding"}),"\n",(0,r.jsx)(u,{data:B}),"\n",(0,r.jsx)(t.h2,{id:"dropdown-shadow",children:"Dropdown shadow"}),"\n",(0,r.jsx)(u,{data:z}),"\n",(0,r.jsx)(b,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:Z}),"\n",(0,r.jsx)(t.h2,{id:"input-props",children:"Input props"}),"\n",(0,r.jsx)(f,{component:"Autocomplete",element:"input"}),"\n",(0,r.jsx)(u,{data:G}),"\n",(0,r.jsx)(t.h2,{id:"read-only",children:"Read only"}),"\n",(0,r.jsxs)(t.p,{children:["Set ",(0,r.jsx)(t.code,{children:"readOnly"})," to make the input read only. When ",(0,r.jsx)(t.code,{children:"readOnly"})," is set,\n",(0,r.jsx)(t.code,{children:"Autocomplete"})," will not show suggestions and will not call ",(0,r.jsx)(t.code,{children:"onChange"})," function."]}),"\n",(0,r.jsx)(u,{data:U}),"\n",(0,r.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,r.jsxs)(t.p,{children:["Set ",(0,r.jsx)(t.code,{children:"disabled"})," to disable the input. When ",(0,r.jsx)(t.code,{children:"disabled"})," is set,\nuser cannot interact with the input and ",(0,r.jsx)(t.code,{children:"Autocomplete"})," will not show suggestions."]}),"\n",(0,r.jsx)(u,{data:q}),"\n",(0,r.jsx)(t.h2,{id:"error-state",children:"Error state"}),"\n",(0,r.jsx)(u,{data:K}),"\n",(0,r.jsx)(y,{component:"Autocomplete"}),"\n",(0,r.jsx)(u,{data:eo}),"\n",(0,r.jsx)(s,{component:"Autocomplete",refType:"input"}),"\n",(0,r.jsx)(m,{component:"Autocomplete"})]})}function ei(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(ea,{...e,children:(0,r.jsx)(el,{...e})})}function ec(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},77481:function(e,t,o){"use strict";o.d(t,{Mt:function(){return r},nW:function(){return n},pc:function(){return a}});let r=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],n=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],a=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},26720:function(e,t,o){"use strict";o.d(t,{F:function(){return b}});var r=o(27378),n=o(31002),a=o(58675),l=o(5564),i=o(96739),c=o(20410),d=o(2161),u=o(38099),p=o(45608),s=o(81097),m=o(54526),h=o(23163);let f={},b=(0,c.d)((e,t)=>{let o=(0,i.w)("Autocomplete",f,e),{classNames:c,styles:b,unstyled:g,vars:y,dropdownOpened:v,defaultDropdownOpened:x,onDropdownClose:A,onDropdownOpen:w,onFocus:j,onBlur:E,onClick:P,onChange:V,data:S,value:k,defaultValue:D,selectFirstOptionOnChange:F,onOptionSubmit:R,comboboxProps:C,readOnly:Y,disabled:W,filter:O,limit:I,withScrollArea:B,maxDropdownHeight:_,size:z,id:T,...N}=o,L=(0,n.M)(T),Z=(0,d.R)(S),$=(0,u.g)(Z),[M,G]=(0,a.C)({value:k,defaultValue:D,finalValue:"",onChange:V}),H=(0,m.K)({opened:v,defaultOpened:x,onDropdownOpen:w,onDropdownClose:()=>{A?.(),H.resetSelectedOption()}}),{resolvedClassNames:U,resolvedStyles:J}=(0,l.h)({props:o,styles:b,classNames:c});return(0,r.useEffect)(()=>{F&&H.selectFirstOption()},[F,M]),r.createElement(p.h,{store:H,__staticSelector:"Autocomplete",classNames:U,styles:J,unstyled:g,readOnly:Y,onOptionSubmit:e=>{R?.(e),G($[e].label),H.closeDropdown()},size:z,...C},r.createElement(p.h.Target,null,r.createElement(h.M,{ref:t,...N,size:z,__staticSelector:"Autocomplete",disabled:W,readOnly:Y,value:M,onChange:e=>{G(e.currentTarget.value),H.openDropdown(),F&&H.selectFirstOption()},onFocus:e=>{H.openDropdown(),j?.(e)},onBlur:e=>{H.closeDropdown(),E?.(e)},onClick:e=>{H.openDropdown(),P?.(e)},classNames:U,styles:J,unstyled:g,id:L})),r.createElement(s.r,{data:Z,hidden:Y||W,filter:O,search:M,limit:I,hiddenWhenEmpty:!0,withScrollArea:B,maxDropdownHeight:_,unstyled:g,labelId:`${L}-label`}))});b.classes={...h.M.classes,...p.h.classes},b.displayName="@mantine/core/Autocomplete"},81097:function(e,t,o){"use strict";o.d(t,{r:function(){return p}});var r=o(27378),n=o(40624),a=o(38765),l=o(49849),i=o(45608),c=o(61777),d=o(62443);function u(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:o,checkIconPosition:l,unstyled:p}){if(!(0,c.f)(e)){let c=t&&u(o,e.value)&&r.createElement(a.n,{className:d.Z.optionsDropdownCheckIcon});return r.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,n.Z)({[d.Z.optionsDropdownOption]:!p}),"data-reverse":"right"===l||void 0,"data-checked":u(o,e.value)||void 0,"aria-selected":u(o,e.value)},"left"===l&&c,r.createElement("span",null,e.label),"right"===l&&c)}let s=e.items.map(e=>r.createElement(Option,{data:e,value:o,key:e.value,unstyled:p,withCheckIcon:t,checkIconPosition:l}));return r.createElement(i.h.Group,{label:e.group},s)}function p({data:e,hidden:t,hiddenWhenEmpty:o,filter:n,search:a,limit:d,maxDropdownHeight:u,withScrollArea:p=!0,filterOptions:s=!0,withCheckIcon:m=!1,value:h,checkIconPosition:f,nothingFoundMessage:b,unstyled:g,labelId:y}){!function e(t,o=new Set){if(Array.isArray(t))for(let r of t)if((0,c.f)(r))e(r.items,o);else{if(void 0===r.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof r.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof r.value}`);if(o.has(r.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${r.value}" was provided more than once`);o.add(r.value)}}(e);let v="string"==typeof a,x=v?(n||function e({options:t,search:o,limit:r}){let n=o.trim().toLowerCase(),a=[];for(let l=0;l0)return!1;return!0}(x),w=x.map(e=>r.createElement(Option,{data:e,key:(0,c.f)(e)?e.group:e.value,withCheckIcon:m,value:h,checkIconPosition:f,unstyled:g}));return r.createElement(i.h.Dropdown,{hidden:t||o&&A},r.createElement(i.h.Options,{labelledBy:y},p?r.createElement(l.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y"},w):w,A&&b&&r.createElement(i.h.Empty,null,b)))}},61777:function(e,t,o){"use strict";function r(e){return"group"in e}o.d(t,{f:function(){return r}})},38099:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},87921:function(e,t,o){"use strict";o.d(t,{q:function(){return n}});var r=o(27378);function n(e=!1,t){let{onOpen:o,onClose:n}=t||{},[a,l]=(0,r.useState)(e),i=(0,r.useCallback)(()=>{l(e=>e||(o?.(),!0))},[o]),c=(0,r.useCallback)(()=>{l(e=>e?(n?.(),!1):e)},[n]),d=(0,r.useCallback)(()=>{a?c():i()},[c,i,a]);return[a,{open:i,close:c,toggle:d}]}}},function(e){e.O(0,[30370,15819,2775,45608,49774,92888,40179],function(){return e(e.s=9524)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/chip-d64b1c8c6b6e90ba.js b/_next/static/chunks/pages/core/chip-a10e52cf87e82716.js similarity index 98% rename from _next/static/chunks/pages/core/chip-d64b1c8c6b6e90ba.js rename to _next/static/chunks/pages/core/chip-a10e52cf87e82716.js index 8b662f5d880..14787903e0b 100644 --- a/_next/static/chunks/pages/core/chip-d64b1c8c6b6e90ba.js +++ b/_next/static/chunks/pages/core/chip-a10e52cf87e82716.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[96781],{86171:function(e,t,i){"use strict";i.d(t,{Z:function(){return n}});var n=(0,i(54764).Z)("x","IconX",[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]])},29077:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/chip",function(){return i(43564)}])},43564:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return X}});var n=i(24246),l=i(71670),a=i(27378),c=i(31002),r=i(58675),o=i(92082),p=i(83453),d=i(96739),h=i(6231),u=i(55934),s=i(56589),m=i(20410),C=i(38765),f=i(89871);let[v,g]=(0,f.V)(),b={};function k(e){let{value:t,defaultValue:i,onChange:n,multiple:l,children:c}=(0,d.w)("ChipGroup",b,e),[o,p]=(0,r.C)({value:t,defaultValue:i,finalValue:l?[]:null,onChange:n});return a.createElement(v,{value:{isChipSelected:e=>Array.isArray(o)?o.includes(e):e===o,onChange:e=>{let t=e.currentTarget.value;Array.isArray(o)?p(o.includes(t)?o.filter(e=>e!==t):[...o,t]):p(t)},multiple:l}},c)}k.displayName="@mantine/core/ChipGroup";var E={root:"m-f59ffda3",label:"m-be049a53","label--outline":"m-3904c1af","label--filled":"m-fa109255","label--light":"m-f7e165c3",iconWrapper:"m-9ac86df9",checkIcon:"m-d6d72580",input:"m-bde07329"};let y={type:"checkbox"},x=(0,p.Z)((e,{size:t,radius:i,variant:n,color:l,autoContrast:a})=>{let c=e.variantColorResolver({color:l||e.primaryColor,theme:e,variant:n||"filled",autoContrast:a});return{root:{"--chip-fz":(0,o.yv)(t),"--chip-size":(0,o.ap)(t,"chip-size"),"--chip-radius":void 0===i?void 0:(0,o.H5)(i),"--chip-checked-padding":(0,o.ap)(t,"chip-checked-padding"),"--chip-padding":(0,o.ap)(t,"chip-padding"),"--chip-icon-size":(0,o.ap)(t,"chip-icon-size"),"--chip-bg":l||n?c.background:void 0,"--chip-hover":l||n?c.hover:void 0,"--chip-color":l||n?c.color:void 0,"--chip-bd":l||n?c.border:void 0,"--chip-spacing":(0,o.ap)(t,"chip-spacing")}}}),j=(0,m.d)((e,t)=>{let i=(0,d.w)("Chip",y,e),{classNames:n,className:l,style:o,styles:p,unstyled:m,vars:f,id:v,checked:b,defaultChecked:k,onChange:j,value:w,wrapperProps:G,type:V,disabled:A,children:S,size:_,variant:T,icon:F,rootRef:N,autoContrast:Z,mod:z,...M}=i,D=(0,h.y)({name:"Chip",classes:E,props:i,className:l,style:o,classNames:n,styles:p,unstyled:m,vars:f,varsResolver:x}),O=g(),P=(0,c.M)(v),{styleProps:R,rest:I}=(0,u.c)(M),[X,L]=(0,r.C)({value:b,defaultValue:k,finalValue:!1,onChange:j}),W=O?{checked:O.isChipSelected(w),onChange:e=>{O.onChange(e),j?.(e.currentTarget.checked)},type:O.multiple?"checkbox":"radio"}:{},H=W.checked||X;return a.createElement(s.x,{size:_,variant:T,ref:N,mod:z,...D("root"),...R,...G},a.createElement("input",{type:V,...D("input"),checked:H,onChange:e=>L(e.currentTarget.checked),id:P,disabled:A,ref:t,value:w,...W,...I}),a.createElement("label",{htmlFor:P,"data-checked":H||void 0,"data-disabled":A||void 0,...D("label",{variant:T||"filled"})},H&&a.createElement("span",{...D("iconWrapper")},F||a.createElement(C.n,{...D("checkIcon")})),S))});j.classes=E,j.displayName="@mantine/core/Chip",j.Group=k;let w=` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[96781],{86171:function(e,t,i){"use strict";i.d(t,{Z:function(){return n}});var n=(0,i(54764).Z)("x","IconX",[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]])},29077:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/chip",function(){return i(43564)}])},43564:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return X}});var n=i(24246),l=i(71670),a=i(27378),c=i(31002),r=i(58675),o=i(92082),p=i(83453),d=i(96739),h=i(6231),u=i(55934),s=i(56589),m=i(20410),C=i(38765),f=i(89871);let[v,g]=(0,f.V)(),b={};function k(e){let{value:t,defaultValue:i,onChange:n,multiple:l,children:c}=(0,d.w)("ChipGroup",b,e),[o,p]=(0,r.C)({value:t,defaultValue:i,finalValue:l?[]:null,onChange:n});return a.createElement(v,{value:{isChipSelected:e=>Array.isArray(o)?o.includes(e):e===o,onChange:e=>{let t=e.currentTarget.value;Array.isArray(o)?p(o.includes(t)?o.filter(e=>e!==t):[...o,t]):p(t)},multiple:l}},c)}k.displayName="@mantine/core/ChipGroup";var E={root:"m-f59ffda3",label:"m-be049a53","label--outline":"m-3904c1af","label--filled":"m-fa109255","label--light":"m-f7e165c3",iconWrapper:"m-9ac86df9",checkIcon:"m-d6d72580",input:"m-bde07329"};let y={type:"checkbox"},x=(0,p.Z)((e,{size:t,radius:i,variant:n,color:l,autoContrast:a})=>{let c=e.variantColorResolver({color:l||e.primaryColor,theme:e,variant:n||"filled",autoContrast:a});return{root:{"--chip-fz":(0,o.yv)(t),"--chip-size":(0,o.ap)(t,"chip-size"),"--chip-radius":void 0===i?void 0:(0,o.H5)(i),"--chip-checked-padding":(0,o.ap)(t,"chip-checked-padding"),"--chip-padding":(0,o.ap)(t,"chip-padding"),"--chip-icon-size":(0,o.ap)(t,"chip-icon-size"),"--chip-bg":l||n?c.background:void 0,"--chip-hover":l||n?c.hover:void 0,"--chip-color":l||n?c.color:void 0,"--chip-bd":l||n?c.border:void 0,"--chip-spacing":(0,o.ap)(t,"chip-spacing")}}}),j=(0,m.d)((e,t)=>{let i=(0,d.w)("Chip",y,e),{classNames:n,className:l,style:o,styles:p,unstyled:m,vars:f,id:v,checked:b,defaultChecked:k,onChange:j,value:w,wrapperProps:G,type:V,disabled:A,children:S,size:_,variant:T,icon:F,rootRef:N,autoContrast:Z,mod:z,...M}=i,D=(0,h.y)({name:"Chip",classes:E,props:i,className:l,style:o,classNames:n,styles:p,unstyled:m,vars:f,varsResolver:x}),O=g(),P=(0,c.M)(v),{styleProps:R,rest:I}=(0,u.c)(M),[X,L]=(0,r.C)({value:b,defaultValue:k,finalValue:!1,onChange:j}),W=O?{checked:O.isChipSelected(w),onChange:e=>{O.onChange(e),j?.(e.currentTarget.checked)},type:O.multiple?"checkbox":"radio"}:{},H=W.checked||X;return a.createElement(s.x,{size:_,variant:T,ref:N,mod:z,...D("root"),...R,...G},a.createElement("input",{type:V,...D("input"),checked:H,onChange:e=>L(e.currentTarget.checked),id:P,disabled:A,ref:t,value:w,...W,...I}),a.createElement("label",{htmlFor:P,"data-checked":H||void 0,"data-disabled":A||void 0,...D("label",{variant:T||"filled"})},H&&a.createElement("span",{...D("iconWrapper")},F||a.createElement(C.n,{...D("checkIcon")})),a.createElement("span",null,S)))});j.classes=E,j.displayName="@mantine/core/Chip",j.Group=k;let w=` import { Chip } from '@mantine/core'; function Demo() { diff --git a/_next/static/chunks/pages/core/indicator-b9d60c0a8c64b119.js b/_next/static/chunks/pages/core/indicator-9ccd6b7bdc41f475.js similarity index 79% rename from _next/static/chunks/pages/core/indicator-b9d60c0a8c64b119.js rename to _next/static/chunks/pages/core/indicator-9ccd6b7bdc41f475.js index 76f8982d220..75ab74264b2 100644 --- a/_next/static/chunks/pages/core/indicator-b9d60c0a8c64b119.js +++ b/_next/static/chunks/pages/core/indicator-9ccd6b7bdc41f475.js @@ -74,4 +74,4 @@ function Demo() { ); } -`,w={type:"code",component:function(){let[e,{toggle:t}]=(0,f.q)();return i.createElement(g.K,{align:"center"},i.createElement(o.z,{inline:!0,disabled:!e,color:"red",size:12},i.createElement(l.q,{size:"lg",radius:"sm",src:"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png"})),i.createElement(b.z,{onClick:t},"Toggle indicator"))},code:x,centered:!0};var y=n(3916),C=n(54568);let E=(0,y.A)(C.us.Indicator);function z(e){let t={code:"code",h2:"h2",p:"p",...(0,r.a)(),...e.components},{Demo:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n,{data:s}),"\n",(0,a.jsx)(t.h2,{id:"inline",children:"Inline"}),"\n",(0,a.jsxs)(t.p,{children:["When the target element has a fixed width, set ",(0,a.jsx)(t.code,{children:"inline"})," prop to add ",(0,a.jsx)(t.code,{children:"display: inline-block;"})," styles to\nIndicator container. Alternatively, you can set width and height with ",(0,a.jsx)(t.code,{children:"style"})," prop if you still want the root\nelement to keep ",(0,a.jsx)(t.code,{children:"display: block"}),"."]}),"\n",(0,a.jsx)(n,{data:u}),"\n",(0,a.jsx)(t.h2,{id:"offset",children:"Offset"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"offset"})," to change indicator position. It is useful when Indicator component is\nused with children that have border-radius:"]}),"\n",(0,a.jsx)(n,{data:p}),"\n",(0,a.jsx)(t.h2,{id:"processing-animation",children:"Processing animation"}),"\n",(0,a.jsx)(n,{data:h}),"\n",(0,a.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"disabled"})," to hide the indicator:"]}),"\n",(0,a.jsx)(n,{data:w})]})}function j(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(E,{...e,children:(0,a.jsx)(z,{...e})})}},30770:function(e,t,n){"use strict";n.d(t,{q:function(){return w}});var a=n(27378),r=n(92082),i=n(83453),o=n(96739),l=n(6231),c=n(56589),s=n(50332),d=n(20410);let u=(0,a.createContext)(null),m=u.Provider;var p={group:"m-11def92b",root:"m-f85678b6",image:"m-11f8ac07",placeholder:"m-104cd71f"};let v={},h=(0,i.Z)((e,{spacing:t})=>({group:{"--ag-spacing":(0,r.bG)(t)}})),g=(0,d.d)((e,t)=>{let n=(0,o.w)("AvatarGroup",v,e),{classNames:r,className:i,style:s,styles:d,unstyled:u,vars:g,spacing:b,...f}=n,x=(0,l.y)({name:"AvatarGroup",classes:p,props:n,className:i,style:s,classNames:r,styles:d,unstyled:u,vars:g,varsResolver:h,rootSelector:"group"});return a.createElement(m,{value:!0},a.createElement(c.x,{ref:t,...x("group"),...f}))});function b(e){return a.createElement("svg",{...e,"data-avatar-placeholder-icon":!0,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a.createElement("path",{d:"M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}g.classes=p,g.displayName="@mantine/core/AvatarGroup";let f={},x=(0,i.Z)((e,{size:t,radius:n,variant:a,gradient:i,color:o,autoContrast:l})=>{let c=e.variantColorResolver({color:o||"gray",theme:e,gradient:i,variant:a||"light",autoContrast:l});return{root:{"--avatar-size":(0,r.ap)(t,"avatar-size"),"--avatar-radius":void 0===n?void 0:(0,r.H5)(n),"--avatar-bg":o||a?c.background:void 0,"--avatar-color":o||a?c.color:void 0,"--avatar-bd":o||a?c.border:void 0}}}),w=(0,s.b)((e,t)=>{let n=(0,o.w)("Avatar",f,e),{classNames:r,className:i,style:s,styles:d,unstyled:m,vars:v,src:h,alt:g,radius:w,color:y,gradient:C,imageProps:E,children:z,autoContrast:j,mod:I,...k}=n,A=function(){let e=(0,a.useContext)(u);return{withinGroup:!!e}}(),[V,_]=(0,a.useState)(!h),N=(0,l.y)({name:"Avatar",props:n,classes:p,className:i,style:s,classNames:r,styles:d,unstyled:m,vars:v,varsResolver:x});return(0,a.useEffect)(()=>_(!h),[h]),a.createElement(c.x,{...N("root"),mod:[{"within-group":A.withinGroup},I],ref:t,...k},V?a.createElement("span",{...N("placeholder"),title:g},z||a.createElement(b,null)):a.createElement("img",{...E,...N("image"),src:h,alt:g,onError:e=>{_(!0),E?.onError?.(e)}}))});w.classes=p,w.displayName="@mantine/core/Avatar",w.Group=g},87121:function(e,t,n){"use strict";n.d(t,{z:function(){return g}});var a=n(27378),r=n(71078),i=n(92082),o=n(83453),l=n(89738),c=n(34121),s=n(96739),d=n(6231),u=n(56589),m=n(20410),p={root:"m-e5262200",indicator:"m-760d1fb1",processing:"m-885901b1"};let v={position:"top-end",offset:0,inline:!1,withBorder:!1,disabled:!1,processing:!1},h=(0,o.Z)((e,{color:t,position:n,offset:a,size:o,radius:s,zIndex:d,autoContrast:u})=>({root:{"--indicator-color":t?(0,l.p)(t,e):void 0,"--indicator-text-color":u?(0,c.R)({color:t,theme:e}):void 0,"--indicator-size":(0,r.h)(o),"--indicator-radius":void 0===s?void 0:(0,i.H5)(s),"--indicator-z-index":d?.toString(),...function(e="top-end",t=0){let n={"--indicator-top":void 0,"--indicator-bottom":void 0,"--indicator-left":void 0,"--indicator-right":void 0,"--indicator-translate-x":void 0,"--indicator-translate-y":void 0},a=(0,r.h)(t),[i,o]=e.split("-");return"top"===i&&(n["--indicator-top"]=a,n["--indicator-translate-y"]="-50%"),"middle"===i&&(n["--indicator-top"]="50%",n["--indicator-translate-y"]="-50%"),"bottom"===i&&(n["--indicator-bottom"]=a,n["--indicator-translate-y"]="50%"),"start"===o&&(n["--indicator-left"]=a,n["--indicator-translate-x"]="-50%"),"center"===o&&(n["--indicator-left"]="50%",n["--indicator-translate-x"]="-50%"),"end"===o&&(n["--indicator-right"]=a,n["--indicator-translate-x"]="50%"),n}(n,a)}})),g=(0,m.d)((e,t)=>{let n=(0,s.w)("Indicator",v,e),{classNames:r,className:i,style:o,styles:l,unstyled:c,vars:m,children:g,position:b,offset:f,inline:x,label:w,radius:y,color:C,withBorder:E,disabled:z,processing:j,zIndex:I,autoContrast:k,mod:A,...V}=n,_=(0,d.y)({name:"Indicator",classes:p,props:n,className:i,style:o,classNames:r,styles:l,unstyled:c,vars:m,varsResolver:h});return a.createElement(u.x,{ref:t,..._("root"),mod:[{inline:x},A],...V},!z&&a.createElement(a.Fragment,null,a.createElement(u.x,{mod:{"with-label":!!w,"with-border":E,processing:j},..._("indicator")},w)),g)});g.classes=p,g.displayName="@mantine/core/Indicator"},87921:function(e,t,n){"use strict";n.d(t,{q:function(){return r}});var a=n(27378);function r(e=!1,t){let{onOpen:n,onClose:r}=t||{},[i,o]=(0,a.useState)(e),l=(0,a.useCallback)(()=>{o(e=>e||(n?.(),!0))},[n]),c=(0,a.useCallback)(()=>{o(e=>e?(r?.(),!1):e)},[r]),s=(0,a.useCallback)(()=>{i?c():l()},[c,l,i]);return[i,{open:l,close:c,toggle:s}]}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=74576)}),_N_E=e.O()}]); \ No newline at end of file +`,w={type:"code",component:function(){let[e,{toggle:t}]=(0,f.q)();return i.createElement(g.K,{align:"center"},i.createElement(o.z,{inline:!0,disabled:!e,color:"red",size:12},i.createElement(l.q,{size:"lg",radius:"sm",src:"https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png"})),i.createElement(b.z,{onClick:t},"Toggle indicator"))},code:x,centered:!0};var y=n(3916),C=n(54568);let E=(0,y.A)(C.us.Indicator);function z(e){let t={code:"code",h2:"h2",p:"p",...(0,r.a)(),...e.components},{Demo:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n,{data:s}),"\n",(0,a.jsx)(t.h2,{id:"inline",children:"Inline"}),"\n",(0,a.jsxs)(t.p,{children:["When the target element has a fixed width, set ",(0,a.jsx)(t.code,{children:"inline"})," prop to add ",(0,a.jsx)(t.code,{children:"display: inline-block;"})," styles to\nIndicator container. Alternatively, you can set width and height with ",(0,a.jsx)(t.code,{children:"style"})," prop if you still want the root\nelement to keep ",(0,a.jsx)(t.code,{children:"display: block"}),"."]}),"\n",(0,a.jsx)(n,{data:u}),"\n",(0,a.jsx)(t.h2,{id:"offset",children:"Offset"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"offset"})," to change indicator position. It is useful when Indicator component is\nused with children that have border-radius:"]}),"\n",(0,a.jsx)(n,{data:p}),"\n",(0,a.jsx)(t.h2,{id:"processing-animation",children:"Processing animation"}),"\n",(0,a.jsx)(n,{data:h}),"\n",(0,a.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"disabled"})," to hide the indicator:"]}),"\n",(0,a.jsx)(n,{data:w})]})}function j(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(E,{...e,children:(0,a.jsx)(z,{...e})})}},30770:function(e,t,n){"use strict";n.d(t,{q:function(){return w}});var a=n(27378),r=n(92082),i=n(83453),o=n(96739),l=n(6231),c=n(56589),s=n(50332),d=n(20410);let u=(0,a.createContext)(null),m=u.Provider;var p={group:"m-11def92b",root:"m-f85678b6",image:"m-11f8ac07",placeholder:"m-104cd71f"};let v={},h=(0,i.Z)((e,{spacing:t})=>({group:{"--ag-spacing":(0,r.bG)(t)}})),g=(0,d.d)((e,t)=>{let n=(0,o.w)("AvatarGroup",v,e),{classNames:r,className:i,style:s,styles:d,unstyled:u,vars:g,spacing:b,...f}=n,x=(0,l.y)({name:"AvatarGroup",classes:p,props:n,className:i,style:s,classNames:r,styles:d,unstyled:u,vars:g,varsResolver:h,rootSelector:"group"});return a.createElement(m,{value:!0},a.createElement(c.x,{ref:t,...x("group"),...f}))});function b(e){return a.createElement("svg",{...e,"data-avatar-placeholder-icon":!0,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a.createElement("path",{d:"M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}g.classes=p,g.displayName="@mantine/core/AvatarGroup";let f={},x=(0,i.Z)((e,{size:t,radius:n,variant:a,gradient:i,color:o,autoContrast:l})=>{let c=e.variantColorResolver({color:o||"gray",theme:e,gradient:i,variant:a||"light",autoContrast:l});return{root:{"--avatar-size":(0,r.ap)(t,"avatar-size"),"--avatar-radius":void 0===n?void 0:(0,r.H5)(n),"--avatar-bg":o||a?c.background:void 0,"--avatar-color":o||a?c.color:void 0,"--avatar-bd":o||a?c.border:void 0}}}),w=(0,s.b)((e,t)=>{let n=(0,o.w)("Avatar",f,e),{classNames:r,className:i,style:s,styles:d,unstyled:m,vars:v,src:h,alt:g,radius:w,color:y,gradient:C,imageProps:E,children:z,autoContrast:j,mod:I,...k}=n,A=function(){let e=(0,a.useContext)(u);return{withinGroup:!!e}}(),[V,_]=(0,a.useState)(!h),N=(0,l.y)({name:"Avatar",props:n,classes:p,className:i,style:s,classNames:r,styles:d,unstyled:m,vars:v,varsResolver:x});return(0,a.useEffect)(()=>_(!h),[h]),a.createElement(c.x,{...N("root"),mod:[{"within-group":A.withinGroup},I],ref:t,...k},V?a.createElement("span",{...N("placeholder"),title:g},z||a.createElement(b,null)):a.createElement("img",{...E,...N("image"),src:h,alt:g,onError:e=>{_(!0),E?.onError?.(e)}}))});w.classes=p,w.displayName="@mantine/core/Avatar",w.Group=g},87121:function(e,t,n){"use strict";n.d(t,{z:function(){return b}});var a=n(27378),r=n(71078),i=n(92082),o=n(83453),l=n(89738),c=n(34121),s=n(55357),d=n(96739),u=n(6231),m=n(56589),p=n(20410),v={root:"m-e5262200",indicator:"m-760d1fb1",processing:"m-885901b1"};let h={position:"top-end",offset:0,inline:!1,withBorder:!1,disabled:!1,processing:!1},g=(0,o.Z)((e,{color:t,position:n,offset:a,size:o,radius:d,zIndex:u,autoContrast:m})=>({root:{"--indicator-color":t?(0,l.p)(t,e):void 0,"--indicator-text-color":(0,s.o)(m,e)?(0,c.R)({color:t,theme:e}):void 0,"--indicator-size":(0,r.h)(o),"--indicator-radius":void 0===d?void 0:(0,i.H5)(d),"--indicator-z-index":u?.toString(),...function(e="top-end",t=0){let n={"--indicator-top":void 0,"--indicator-bottom":void 0,"--indicator-left":void 0,"--indicator-right":void 0,"--indicator-translate-x":void 0,"--indicator-translate-y":void 0},a=(0,r.h)(t),[i,o]=e.split("-");return"top"===i&&(n["--indicator-top"]=a,n["--indicator-translate-y"]="-50%"),"middle"===i&&(n["--indicator-top"]="50%",n["--indicator-translate-y"]="-50%"),"bottom"===i&&(n["--indicator-bottom"]=a,n["--indicator-translate-y"]="50%"),"start"===o&&(n["--indicator-left"]=a,n["--indicator-translate-x"]="-50%"),"center"===o&&(n["--indicator-left"]="50%",n["--indicator-translate-x"]="-50%"),"end"===o&&(n["--indicator-right"]=a,n["--indicator-translate-x"]="50%"),n}(n,a)}})),b=(0,p.d)((e,t)=>{let n=(0,d.w)("Indicator",h,e),{classNames:r,className:i,style:o,styles:l,unstyled:c,vars:s,children:p,position:b,offset:f,inline:x,label:w,radius:y,color:C,withBorder:E,disabled:z,processing:j,zIndex:I,autoContrast:k,mod:A,...V}=n,_=(0,u.y)({name:"Indicator",classes:v,props:n,className:i,style:o,classNames:r,styles:l,unstyled:c,vars:s,varsResolver:g});return a.createElement(m.x,{ref:t,..._("root"),mod:[{inline:x},A],...V},!z&&a.createElement(a.Fragment,null,a.createElement(m.x,{mod:{"with-label":!!w,"with-border":E,processing:j},..._("indicator")},w)),p)});b.classes=v,b.displayName="@mantine/core/Indicator"},87921:function(e,t,n){"use strict";n.d(t,{q:function(){return r}});var a=n(27378);function r(e=!1,t){let{onOpen:n,onClose:r}=t||{},[i,o]=(0,a.useState)(e),l=(0,a.useCallback)(()=>{o(e=>e||(n?.(),!0))},[n]),c=(0,a.useCallback)(()=>{o(e=>e?(r?.(),!1):e)},[r]),s=(0,a.useCallback)(()=>{i?c():l()},[c,l,i]);return[i,{open:l,close:c,toggle:s}]}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=74576)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/password-input-bf6e03b85f00eb02.js b/_next/static/chunks/pages/core/password-input-4791901047a0e699.js similarity index 92% rename from _next/static/chunks/pages/core/password-input-bf6e03b85f00eb02.js rename to _next/static/chunks/pages/core/password-input-4791901047a0e699.js index b353f29693c..2c785f04f10 100644 --- a/_next/static/chunks/pages/core/password-input-bf6e03b85f00eb02.js +++ b/_next/static/chunks/pages/core/password-input-4791901047a0e699.js @@ -189,4 +189,4 @@ function Demo() { /> ); } -`,L={type:"styles-api",data:_.m,component:function(e){return i.createElement(l.W,{label:"Label",placeholder:"PasswordInput",description:"Description",error:"Error",withAsterisk:!0,leftSection:i.createElement(S.Z,{style:{width:(0,x.h)(18),height:(0,x.h)(18)}}),...e})},code:N,centered:!0,maxWidth:340};var q=r(3916),A=r(54568);let R=(0,q.A)(A.us.PasswordInput);function B(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components},{Demo:r,GetElementRef:i,InputAccessibility:l,InputFeatures:s,InputSections:a,StylesApiSelectors:p}=t;return r||F("Demo",!0),i||F("GetElementRef",!0),l||F("InputAccessibility",!0),s||F("InputFeatures",!0),a||F("InputSections",!0),p||F("StylesApiSelectors",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(s,{component:"PasswordInput",element:"input"}),"\n",(0,n.jsx)(r,{data:c}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { PasswordInput } from '@mantine/core';\n\nfunction Demo() {\n const [value, setValue] = useState('');\n return (\n setValue(event.currentTarget.value)}\n />\n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"controlled-visibility-toggle",children:"Controlled visibility toggle"}),"\n",(0,n.jsxs)(t.p,{children:["Control visibility state with ",(0,n.jsx)(t.code,{children:"visible"})," and ",(0,n.jsx)(t.code,{children:"onVisibilityChange"})," props,\nfor example, the props can be used to sync visibility state between two inputs:"]}),"\n",(0,n.jsx)(r,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"change-visibility-toggle-icon",children:"Change visibility toggle icon"}),"\n",(0,n.jsxs)(t.p,{children:["To change visibility toggle icon, pass a React component that accepts ",(0,n.jsx)(t.code,{children:"reveal"})," prop to ",(0,n.jsx)(t.code,{children:"visibilityToggleIcon"}),":"]}),"\n",(0,n.jsx)(r,{data:v}),"\n",(0,n.jsx)(t.h2,{id:"strength-meter-example",children:"Strength meter example"}),"\n",(0,n.jsxs)(t.p,{children:["Password strength meter example with ",(0,n.jsx)(t.a,{href:"/core/progress/",children:"Progress"})," and ",(0,n.jsx)(t.a,{href:"/core/popover/",children:"Popover"})," components:"]}),"\n",(0,n.jsx)(r,{data:k,demoProps:{zIndex:4}}),"\n",(0,n.jsx)(t.h2,{id:"usage-without-visibility-toggle",children:"Usage without visibility toggle"}),"\n",(0,n.jsxs)(t.p,{children:["If you do not need visibility toggle button, use ",(0,n.jsx)(t.a,{href:"/core/text-input/",children:"TextInput"})," component instead:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { TextInput } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n"})}),"\n",(0,n.jsx)(a,{component:"PasswordInput"}),"\n",(0,n.jsxs)(t.p,{children:["Note that when ",(0,n.jsx)(t.code,{children:"rightSection"})," prop is used, visibility toggle button is not rendered."]}),"\n",(0,n.jsx)(r,{data:z}),"\n",(0,n.jsx)(t.h2,{id:"error-state",children:"Error state"}),"\n",(0,n.jsx)(r,{data:T}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["When ",(0,n.jsx)(t.code,{children:"disabled"})," prop is set, visibility toggle button is hidden:"]}),"\n",(0,n.jsx)(r,{data:Z}),"\n",(0,n.jsx)(p,{component:"PasswordInput"}),"\n",(0,n.jsx)(r,{data:L}),"\n",(0,n.jsx)(i,{component:"PasswordInput",refType:"input"}),"\n",(0,n.jsx)(l,{component:"PasswordInput"}),"\n",(0,n.jsxs)(t.p,{children:["To set ",(0,n.jsx)(t.code,{children:"aria-label"})," on the visibility toggle button, use ",(0,n.jsx)(t.code,{children:"visibilityToggleButtonProps"})," prop:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { PasswordInput } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n );\n}\n"})})]})}function O(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(R,{...e,children:(0,n.jsx)(B,{...e})})}function F(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},77481:function(e,t,r){"use strict";r.d(t,{Mt:function(){return n},nW:function(){return o},pc:function(){return i}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],o=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],i=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},25916:function(e,t,r){"use strict";r.d(t,{W:function(){return w}});var n=r(27378),o=r(40624),i=r(31002),l=r(58675),s=r(92082),a=r(83453),c=r(5564),p=r(6231),u=r(96739),d=r(55934),m=r(20410),h=r(84246),g=r(42487),b=r(23163),y={root:"m-f61ca620",input:"m-ccf8da4c",innerInput:"m-f2d85dd2",visibilityToggle:"m-b1072d44"};let v={visibilityToggleIcon:({reveal:e})=>n.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"}},n.createElement("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},f=(0,a.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,s.ap)(t,"psi-icon-size"),"--psi-button-size":(0,s.ap)(t,"psi-button-size")}})),w=(0,m.d)((e,t)=>{let r=(0,u.w)("PasswordInput",v,e),{classNames:s,className:a,style:m,styles:b,unstyled:w,vars:x,required:I,error:P,leftSection:C,disabled:E,id:V,variant:j,inputContainer:k,description:S,label:W,size:z,errorProps:D,descriptionProps:T,labelProps:M,withAsterisk:Z,inputWrapperOrder:_,wrapperProps:N,radius:L,rightSection:q,rightSectionWidth:A,rightSectionPointerEvents:R,leftSectionWidth:B,visible:O,defaultVisible:F,onVisibilityChange:X,visibilityToggleIcon:$,visibilityToggleButtonProps:Y,rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,mod:G,...H}=r,Q=(0,i.M)(V),[ee,et]=(0,l.C)({value:O,defaultValue:F,finalValue:!1,onChange:X}),er=()=>et(!ee),en=(0,p.y)({name:"PasswordInput",classes:y,props:r,className:a,style:m,classNames:s,styles:b,unstyled:w,vars:x,varsResolver:f}),{resolvedClassNames:eo,resolvedStyles:ei}=(0,c.h)({classNames:s,styles:b,props:r}),{styleProps:el,rest:es}=(0,d.c)(H),ea=n.createElement(h.A,{...en("visibilityToggle"),disabled:E,radius:L,"aria-hidden":!Y,tabIndex:-1,...Y,variant:"subtle",color:"gray",unstyled:w,onMouseDown:e=>{e.preventDefault(),Y?.onMouseDown?.(e),er()},onKeyDown:e=>{Y?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())}},n.createElement($,{reveal:ee}));return n.createElement(g.I.Wrapper,{required:I,id:Q,label:W,error:P,description:S,size:z,classNames:eo,styles:ei,__staticSelector:"PasswordInput",errorProps:D,descriptionProps:T,unstyled:w,withAsterisk:Z,inputWrapperOrder:_,inputContainer:k,variant:j,labelProps:{...M,htmlFor:Q},mod:G,...en("root"),...el,...N},n.createElement(g.I,{component:"div",error:P,leftSection:C,size:z,classNames:{...eo,input:(0,o.Z)(y.input,eo.input)},styles:ei,radius:L,disabled:E,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:q??ea,variant:j,unstyled:w,leftSectionWidth:B,rightSectionPointerEvents:R||"all",rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,withAria:!1},n.createElement("input",{required:I,"data-invalid":!!P||void 0,"data-with-left-section":!!C||void 0,...en("innerInput"),disabled:E,id:Q,ref:t,...es,autoComplete:es.autoComplete||"off",type:ee?"text":"password"})))});w.classes={...b.M.classes,...y},w.displayName="@mantine/core/PasswordInput"},30454:function(e,t,r){"use strict";r.d(t,{E:function(){return V}});var n=r(27378),o=r(5564),i=r(96739),l=r(20410),s=r(56589),a=r(71656);let[c,p]=(0,a.R)("Progress.Root component was not found in tree");var u={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let d={},m=(0,l.d)((e,t)=>{let{classNames:r,className:o,style:l,styles:a,vars:c,...u}=(0,i.w)("ProgressLabel",d,e),m=p();return n.createElement(s.x,{ref:t,...m.getStyles("label",{className:o,style:l,classNames:r,styles:a}),...u})});m.classes=u,m.displayName="@mantine/core/ProgressLabel";var h=r(92082),g=r(83453),b=r(6231);let y={},v=(0,g.Z)((e,{size:t,radius:r,transitionDuration:n})=>({root:{"--progress-size":(0,h.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,h.H5)(r),"--progress-transition-duration":"number"==typeof n?`${n}ms`:void 0}})),f=(0,l.d)((e,t)=>{let r=(0,i.w)("ProgressRoot",y,e),{classNames:o,className:l,style:a,styles:p,unstyled:d,vars:m,autoContrast:h,transitionDuration:g,...f}=r,w=(0,b.y)({name:"Progress",classes:u,props:r,className:l,style:a,classNames:o,styles:p,unstyled:d,vars:m,varsResolver:v});return n.createElement(c,{value:{getStyles:w,autoContrast:h}},n.createElement(s.x,{ref:t,...w("root"),...f}))});f.classes=u,f.displayName="@mantine/core/ProgressRoot";var w=r(89738),x=r(34121),I=r(2256);let P={withAria:!0},C=(0,l.d)((e,t)=>{let{classNames:r,className:o,style:l,styles:a,vars:c,value:u,withAria:d,color:m,striped:h,animated:g,mod:b,...y}=(0,i.w)("ProgressSection",P,e),v=p(),f=(0,I.rZ)(),C=d?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":u,"aria-valuetext":`${u}%`}:{};return n.createElement(s.x,{ref:t,...v.getStyles("section",{className:o,classNames:r,styles:a,style:l}),...y,...C,mod:[{striped:h||g,animated:g},b],__vars:{"--progress-section-width":`${u}%`,"--progress-section-color":(0,w.p)(m,f),"--progress-label-color":v.autoContrast?(0,x.R)({color:m,theme:f}):void 0}})});C.classes=u,C.displayName="@mantine/core/ProgressSection";let E={},V=(0,l.d)((e,t)=>{let r=(0,i.w)("Progress",E,e),{value:l,classNames:s,styles:a,vars:c,color:p,striped:u,animated:d,"aria-label":m,...h}=r,{resolvedClassNames:g,resolvedStyles:b}=(0,o.h)({classNames:s,styles:a,props:r});return n.createElement(f,{ref:t,classNames:g,styles:b,vars:c,...h},n.createElement(C,{value:l,color:p,striped:u,animated:d,"aria-label":m}))});V.classes=u,V.displayName="@mantine/core/Progress",V.Section=C,V.Root=f,V.Label=m},87921:function(e,t,r){"use strict";r.d(t,{q:function(){return o}});var n=r(27378);function o(e=!1,t){let{onOpen:r,onClose:o}=t||{},[i,l]=(0,n.useState)(e),s=(0,n.useCallback)(()=>{l(e=>e||(r?.(),!0))},[r]),a=(0,n.useCallback)(()=>{l(e=>e?(o?.(),!1):e)},[o]),c=(0,n.useCallback)(()=>{i?a():s()},[a,s,i]);return[i,{open:s,close:a,toggle:c}]}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=14785)}),_N_E=e.O()}]); \ No newline at end of file +`,L={type:"styles-api",data:_.m,component:function(e){return i.createElement(l.W,{label:"Label",placeholder:"PasswordInput",description:"Description",error:"Error",withAsterisk:!0,leftSection:i.createElement(S.Z,{style:{width:(0,x.h)(18),height:(0,x.h)(18)}}),...e})},code:N,centered:!0,maxWidth:340};var q=r(3916),A=r(54568);let R=(0,q.A)(A.us.PasswordInput);function B(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components},{Demo:r,GetElementRef:i,InputAccessibility:l,InputFeatures:s,InputSections:a,StylesApiSelectors:p}=t;return r||F("Demo",!0),i||F("GetElementRef",!0),l||F("InputAccessibility",!0),s||F("InputFeatures",!0),a||F("InputSections",!0),p||F("StylesApiSelectors",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(s,{component:"PasswordInput",element:"input"}),"\n",(0,n.jsx)(r,{data:c}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { PasswordInput } from '@mantine/core';\n\nfunction Demo() {\n const [value, setValue] = useState('');\n return (\n setValue(event.currentTarget.value)}\n />\n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"controlled-visibility-toggle",children:"Controlled visibility toggle"}),"\n",(0,n.jsxs)(t.p,{children:["Control visibility state with ",(0,n.jsx)(t.code,{children:"visible"})," and ",(0,n.jsx)(t.code,{children:"onVisibilityChange"})," props,\nfor example, the props can be used to sync visibility state between two inputs:"]}),"\n",(0,n.jsx)(r,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"change-visibility-toggle-icon",children:"Change visibility toggle icon"}),"\n",(0,n.jsxs)(t.p,{children:["To change visibility toggle icon, pass a React component that accepts ",(0,n.jsx)(t.code,{children:"reveal"})," prop to ",(0,n.jsx)(t.code,{children:"visibilityToggleIcon"}),":"]}),"\n",(0,n.jsx)(r,{data:v}),"\n",(0,n.jsx)(t.h2,{id:"strength-meter-example",children:"Strength meter example"}),"\n",(0,n.jsxs)(t.p,{children:["Password strength meter example with ",(0,n.jsx)(t.a,{href:"/core/progress/",children:"Progress"})," and ",(0,n.jsx)(t.a,{href:"/core/popover/",children:"Popover"})," components:"]}),"\n",(0,n.jsx)(r,{data:k,demoProps:{zIndex:4}}),"\n",(0,n.jsx)(t.h2,{id:"usage-without-visibility-toggle",children:"Usage without visibility toggle"}),"\n",(0,n.jsxs)(t.p,{children:["If you do not need visibility toggle button, use ",(0,n.jsx)(t.a,{href:"/core/text-input/",children:"TextInput"})," component instead:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { TextInput } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n"})}),"\n",(0,n.jsx)(a,{component:"PasswordInput"}),"\n",(0,n.jsxs)(t.p,{children:["Note that when ",(0,n.jsx)(t.code,{children:"rightSection"})," prop is used, visibility toggle button is not rendered."]}),"\n",(0,n.jsx)(r,{data:z}),"\n",(0,n.jsx)(t.h2,{id:"error-state",children:"Error state"}),"\n",(0,n.jsx)(r,{data:T}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["When ",(0,n.jsx)(t.code,{children:"disabled"})," prop is set, visibility toggle button is hidden:"]}),"\n",(0,n.jsx)(r,{data:Z}),"\n",(0,n.jsx)(p,{component:"PasswordInput"}),"\n",(0,n.jsx)(r,{data:L}),"\n",(0,n.jsx)(i,{component:"PasswordInput",refType:"input"}),"\n",(0,n.jsx)(l,{component:"PasswordInput"}),"\n",(0,n.jsxs)(t.p,{children:["To set ",(0,n.jsx)(t.code,{children:"aria-label"})," on the visibility toggle button, use ",(0,n.jsx)(t.code,{children:"visibilityToggleButtonProps"})," prop:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { PasswordInput } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n );\n}\n"})})]})}function O(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(R,{...e,children:(0,n.jsx)(B,{...e})})}function F(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},77481:function(e,t,r){"use strict";r.d(t,{Mt:function(){return n},nW:function(){return o},pc:function(){return i}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],o=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],i=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},25916:function(e,t,r){"use strict";r.d(t,{W:function(){return w}});var n=r(27378),o=r(40624),i=r(31002),l=r(58675),s=r(92082),a=r(83453),c=r(5564),p=r(6231),u=r(96739),d=r(55934),m=r(20410),h=r(84246),g=r(42487),b=r(23163),y={root:"m-f61ca620",input:"m-ccf8da4c",innerInput:"m-f2d85dd2",visibilityToggle:"m-b1072d44"};let v={visibilityToggleIcon:({reveal:e})=>n.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"}},n.createElement("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},f=(0,a.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,s.ap)(t,"psi-icon-size"),"--psi-button-size":(0,s.ap)(t,"psi-button-size")}})),w=(0,m.d)((e,t)=>{let r=(0,u.w)("PasswordInput",v,e),{classNames:s,className:a,style:m,styles:b,unstyled:w,vars:x,required:I,error:P,leftSection:C,disabled:E,id:V,variant:j,inputContainer:k,description:S,label:W,size:z,errorProps:D,descriptionProps:T,labelProps:M,withAsterisk:Z,inputWrapperOrder:_,wrapperProps:N,radius:L,rightSection:q,rightSectionWidth:A,rightSectionPointerEvents:R,leftSectionWidth:B,visible:O,defaultVisible:F,onVisibilityChange:X,visibilityToggleIcon:$,visibilityToggleButtonProps:Y,rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,mod:G,...H}=r,Q=(0,i.M)(V),[ee,et]=(0,l.C)({value:O,defaultValue:F,finalValue:!1,onChange:X}),er=()=>et(!ee),en=(0,p.y)({name:"PasswordInput",classes:y,props:r,className:a,style:m,classNames:s,styles:b,unstyled:w,vars:x,varsResolver:f}),{resolvedClassNames:eo,resolvedStyles:ei}=(0,c.h)({classNames:s,styles:b,props:r}),{styleProps:el,rest:es}=(0,d.c)(H),ea=n.createElement(h.A,{...en("visibilityToggle"),disabled:E,radius:L,"aria-hidden":!Y,tabIndex:-1,...Y,variant:"subtle",color:"gray",unstyled:w,onMouseDown:e=>{e.preventDefault(),Y?.onMouseDown?.(e),er()},onKeyDown:e=>{Y?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())}},n.createElement($,{reveal:ee}));return n.createElement(g.I.Wrapper,{required:I,id:Q,label:W,error:P,description:S,size:z,classNames:eo,styles:ei,__staticSelector:"PasswordInput",errorProps:D,descriptionProps:T,unstyled:w,withAsterisk:Z,inputWrapperOrder:_,inputContainer:k,variant:j,labelProps:{...M,htmlFor:Q},mod:G,...en("root"),...el,...N},n.createElement(g.I,{component:"div",error:P,leftSection:C,size:z,classNames:{...eo,input:(0,o.Z)(y.input,eo.input)},styles:ei,radius:L,disabled:E,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:q??ea,variant:j,unstyled:w,leftSectionWidth:B,rightSectionPointerEvents:R||"all",rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,withAria:!1},n.createElement("input",{required:I,"data-invalid":!!P||void 0,"data-with-left-section":!!C||void 0,...en("innerInput"),disabled:E,id:Q,ref:t,...es,autoComplete:es.autoComplete||"off",type:ee?"text":"password"})))});w.classes={...b.M.classes,...y},w.displayName="@mantine/core/PasswordInput"},30454:function(e,t,r){"use strict";r.d(t,{E:function(){return j}});var n=r(27378),o=r(5564),i=r(96739),l=r(20410),s=r(56589),a=r(71656);let[c,p]=(0,a.R)("Progress.Root component was not found in tree");var u={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let d={},m=(0,l.d)((e,t)=>{let{classNames:r,className:o,style:l,styles:a,vars:c,...u}=(0,i.w)("ProgressLabel",d,e),m=p();return n.createElement(s.x,{ref:t,...m.getStyles("label",{className:o,style:l,classNames:r,styles:a}),...u})});m.classes=u,m.displayName="@mantine/core/ProgressLabel";var h=r(92082),g=r(83453),b=r(6231);let y={},v=(0,g.Z)((e,{size:t,radius:r,transitionDuration:n})=>({root:{"--progress-size":(0,h.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,h.H5)(r),"--progress-transition-duration":"number"==typeof n?`${n}ms`:void 0}})),f=(0,l.d)((e,t)=>{let r=(0,i.w)("ProgressRoot",y,e),{classNames:o,className:l,style:a,styles:p,unstyled:d,vars:m,autoContrast:h,transitionDuration:g,...f}=r,w=(0,b.y)({name:"Progress",classes:u,props:r,className:l,style:a,classNames:o,styles:p,unstyled:d,vars:m,varsResolver:v});return n.createElement(c,{value:{getStyles:w,autoContrast:h}},n.createElement(s.x,{ref:t,...w("root"),...f}))});f.classes=u,f.displayName="@mantine/core/ProgressRoot";var w=r(89738),x=r(34121),I=r(55357),P=r(2256);let C={withAria:!0},E=(0,l.d)((e,t)=>{let{classNames:r,className:o,style:l,styles:a,vars:c,value:u,withAria:d,color:m,striped:h,animated:g,mod:b,...y}=(0,i.w)("ProgressSection",C,e),v=p(),f=(0,P.rZ)(),E=d?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":u,"aria-valuetext":`${u}%`}:{};return n.createElement(s.x,{ref:t,...v.getStyles("section",{className:o,classNames:r,styles:a,style:l}),...y,...E,mod:[{striped:h||g,animated:g},b],__vars:{"--progress-section-width":`${u}%`,"--progress-section-color":(0,w.p)(m,f),"--progress-label-color":(0,I.o)(v.autoContrast,f)?(0,x.R)({color:m,theme:f}):void 0}})});E.classes=u,E.displayName="@mantine/core/ProgressSection";let V={},j=(0,l.d)((e,t)=>{let r=(0,i.w)("Progress",V,e),{value:l,classNames:s,styles:a,vars:c,color:p,striped:u,animated:d,"aria-label":m,...h}=r,{resolvedClassNames:g,resolvedStyles:b}=(0,o.h)({classNames:s,styles:a,props:r});return n.createElement(f,{ref:t,classNames:g,styles:b,vars:c,...h},n.createElement(E,{value:l,color:p,striped:u,animated:d,"aria-label":m}))});j.classes=u,j.displayName="@mantine/core/Progress",j.Section=E,j.Root=f,j.Label=m},87921:function(e,t,r){"use strict";r.d(t,{q:function(){return o}});var n=r(27378);function o(e=!1,t){let{onOpen:r,onClose:o}=t||{},[i,l]=(0,n.useState)(e),s=(0,n.useCallback)(()=>{l(e=>e||(r?.(),!0))},[r]),a=(0,n.useCallback)(()=>{l(e=>e?(o?.(),!1):e)},[o]),c=(0,n.useCallback)(()=>{i?a():s()},[a,s,i]);return[i,{open:s,close:a,toggle:c}]}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=14785)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/popover-1b12de8c5c40c4a1.js b/_next/static/chunks/pages/core/popover-4d9f7c829601baab.js similarity index 59% rename from _next/static/chunks/pages/core/popover-1b12de8c5c40c4a1.js rename to _next/static/chunks/pages/core/popover-4d9f7c829601baab.js index c87d2d6514d..e716d3621f5 100644 --- a/_next/static/chunks/pages/core/popover-1b12de8c5c40c4a1.js +++ b/_next/static/chunks/pages/core/popover-4d9f7c829601baab.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[76959],{27693:function(e){var t,o,n,r,i,s,a,l,c,d,u,p,h,f,m,v,w,g,x,b,y,P;e.exports=(t="millisecond",o="second",n="minute",r="hour",i="week",s="month",a="quarter",l="year",c="date",d="Invalid Date",u=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,p=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,h=function(e,t,o){var n=String(e);return!n||n.length>=t?e:""+Array(t+1-n.length).join(o)+e},(m={})[f="en"]={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var t=["th","st","nd","rd"],o=e%100;return"["+e+(t[(o-20)%10]||t[o]||"th")+"]"}},v="$isDayjsObject",w=function(e){return e instanceof y||!(!e||!e[v])},g=function e(t,o,n){var r;if(!t)return f;if("string"==typeof t){var i=t.toLowerCase();m[i]&&(r=i),o&&(m[i]=o,r=i);var s=t.split("-");if(!r&&s.length>1)return e(s[0])}else{var a=t.name;m[a]=t,r=a}return!n&&r&&(f=r),r||!n&&f},x=function(e,t){if(w(e))return e.clone();var o="object"==typeof t?t:{};return o.date=e,o.args=arguments,new y(o)},(b={s:h,z:function(e){var t=-e.utcOffset(),o=Math.abs(t);return(t<=0?"+":"-")+h(Math.floor(o/60),2,"0")+":"+h(o%60,2,"0")},m:function e(t,o){if(t.date()=0&&(i[u]=parseInt(d,10))}var p=i[3],h=i[0]+"-"+i[1]+"-"+i[2]+" "+(24===p?0:p)+":"+i[4]+":"+i[5]+":000",f=+e;return(r.utc(h).valueOf()-(f-=f%1e3))/6e4},l=n.prototype;l.tz=function(e,t){void 0===e&&(e=i);var o=this.utcOffset(),n=this.toDate(),s=n.toLocaleString("en-US",{timeZone:e}),a=Math.round((n-new Date(s))/1e3/60),l=r(s,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(-(15*Math.round(n.getTimezoneOffset()/15))-a,!0);if(t){var c=l.utcOffset();l=l.add(o-c,"minute")}return l.$x.$timezone=e,l},l.offsetName=function(e){var t=this.$x.$timezone||r.tz.guess(),o=s(this.valueOf(),t,{timeZoneName:e}).find(function(e){return"timezonename"===e.type.toLowerCase()});return o&&o.value};var c=l.startOf;l.startOf=function(e,t){if(!this.$x||!this.$x.$timezone)return c.call(this,e,t);var o=r(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return c.call(o,e,t).tz(this.$x.$timezone,!0)},r.tz=function(e,t,o){var n=o&&t,s=o||t||i,l=a(+r(),s);if("string"!=typeof e)return r(e).tz(s);var c=function(e,t,o){var n=e-60*t*1e3,r=a(n,o);if(t===r)return[n,t];var i=a(n-=60*(r-t)*1e3,o);return r===i?[n,r]:[e-60*Math.min(r,i)*1e3,Math.max(r,i)]}(r.utc(e,n).valueOf(),l,s),d=c[0],u=c[1],p=r(d).utcOffset(u);return p.$x.$timezone=s,p},r.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},r.tz.setDefault=function(e){i=e}})},96600:function(e){var t,o,n;e.exports=(t="minute",o=/[+-]\d\d(?::?\d\d)?/g,n=/([+-]|\d\d)/g,function(e,r,i){var s=r.prototype;i.utc=function(e){var t={date:e,utc:!0,args:arguments};return new r(t)},s.utc=function(e){var o=i(this.toDate(),{locale:this.$L,utc:!0});return e?o.add(this.utcOffset(),t):o},s.local=function(){return i(this.toDate(),{locale:this.$L,utc:!1})};var a=s.parse;s.parse=function(e){e.utc&&(this.$u=!0),this.$utils().u(e.$offset)||(this.$offset=e.$offset),a.call(this,e)};var l=s.init;s.init=function(){if(this.$u){var e=this.$d;this.$y=e.getUTCFullYear(),this.$M=e.getUTCMonth(),this.$D=e.getUTCDate(),this.$W=e.getUTCDay(),this.$H=e.getUTCHours(),this.$m=e.getUTCMinutes(),this.$s=e.getUTCSeconds(),this.$ms=e.getUTCMilliseconds()}else l.call(this)};var c=s.utcOffset;s.utcOffset=function(e,r){var i=this.$utils().u;if(i(e))return this.$u?0:i(this.$offset)?c.call(this):this.$offset;if("string"==typeof e&&null===(e=function(e){void 0===e&&(e="");var t=e.match(o);if(!t)return null;var r=(""+t[0]).match(n)||["-",0,0],i=r[0],s=60*+r[1]+ +r[2];return 0===s?0:"+"===i?s:-s}(e)))return this;var s=16>=Math.abs(e)?60*e:e,a=this;if(r)return a.$offset=s,a.$u=0===e,a;if(0!==e){var l=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(a=this.local().add(s+l,t)).$offset=s,a.$x.$localOffset=l}else a=this.utc();return a};var d=s.format;s.format=function(e){var t=e||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return d.call(this,t)},s.valueOf=function(){var e=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*e},s.isUTC=function(){return!!this.$u},s.toISOString=function(){return this.toDate().toISOString()},s.toString=function(){return this.toDate().toUTCString()};var u=s.toDate;s.toDate=function(e){return"s"===e&&this.$offset?i(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():u.call(this)};var p=s.diff;s.diff=function(e,t,o){if(e&&this.$u===e.$u)return p.call(this,e,t,o);var n=this.local(),r=i(e).local();return p.call(n,r,t,o)}})},26353:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/popover",function(){return o(82075)}])},82075:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return N}});var n=o(24246),r=o(71670),i=o(27378),s=o(63433),a=o(8671),Text=o(26569);let l=` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[76959],{27693:function(e){var t,o,n,r,i,s,a,l,c,u,d,p,h,f,m,v,w,g,x,b,y,P;e.exports=(t="millisecond",o="second",n="minute",r="hour",i="week",s="month",a="quarter",l="year",c="date",u="Invalid Date",d=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,p=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,h=function(e,t,o){var n=String(e);return!n||n.length>=t?e:""+Array(t+1-n.length).join(o)+e},(m={})[f="en"]={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var t=["th","st","nd","rd"],o=e%100;return"["+e+(t[(o-20)%10]||t[o]||"th")+"]"}},v="$isDayjsObject",w=function(e){return e instanceof y||!(!e||!e[v])},g=function e(t,o,n){var r;if(!t)return f;if("string"==typeof t){var i=t.toLowerCase();m[i]&&(r=i),o&&(m[i]=o,r=i);var s=t.split("-");if(!r&&s.length>1)return e(s[0])}else{var a=t.name;m[a]=t,r=a}return!n&&r&&(f=r),r||!n&&f},x=function(e,t){if(w(e))return e.clone();var o="object"==typeof t?t:{};return o.date=e,o.args=arguments,new y(o)},(b={s:h,z:function(e){var t=-e.utcOffset(),o=Math.abs(t);return(t<=0?"+":"-")+h(Math.floor(o/60),2,"0")+":"+h(o%60,2,"0")},m:function e(t,o){if(t.date()=0&&(i[d]=parseInt(u,10))}var p=i[3],h=i[0]+"-"+i[1]+"-"+i[2]+" "+(24===p?0:p)+":"+i[4]+":"+i[5]+":000",f=+e;return(r.utc(h).valueOf()-(f-=f%1e3))/6e4},l=n.prototype;l.tz=function(e,t){void 0===e&&(e=i);var o=this.utcOffset(),n=this.toDate(),s=n.toLocaleString("en-US",{timeZone:e}),a=Math.round((n-new Date(s))/1e3/60),l=r(s,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(-(15*Math.round(n.getTimezoneOffset()/15))-a,!0);if(t){var c=l.utcOffset();l=l.add(o-c,"minute")}return l.$x.$timezone=e,l},l.offsetName=function(e){var t=this.$x.$timezone||r.tz.guess(),o=s(this.valueOf(),t,{timeZoneName:e}).find(function(e){return"timezonename"===e.type.toLowerCase()});return o&&o.value};var c=l.startOf;l.startOf=function(e,t){if(!this.$x||!this.$x.$timezone)return c.call(this,e,t);var o=r(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return c.call(o,e,t).tz(this.$x.$timezone,!0)},r.tz=function(e,t,o){var n=o&&t,s=o||t||i,l=a(+r(),s);if("string"!=typeof e)return r(e).tz(s);var c=function(e,t,o){var n=e-60*t*1e3,r=a(n,o);if(t===r)return[n,t];var i=a(n-=60*(r-t)*1e3,o);return r===i?[n,r]:[e-60*Math.min(r,i)*1e3,Math.max(r,i)]}(r.utc(e,n).valueOf(),l,s),u=c[0],d=c[1],p=r(u).utcOffset(d);return p.$x.$timezone=s,p},r.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},r.tz.setDefault=function(e){i=e}})},96600:function(e){var t,o,n;e.exports=(t="minute",o=/[+-]\d\d(?::?\d\d)?/g,n=/([+-]|\d\d)/g,function(e,r,i){var s=r.prototype;i.utc=function(e){var t={date:e,utc:!0,args:arguments};return new r(t)},s.utc=function(e){var o=i(this.toDate(),{locale:this.$L,utc:!0});return e?o.add(this.utcOffset(),t):o},s.local=function(){return i(this.toDate(),{locale:this.$L,utc:!1})};var a=s.parse;s.parse=function(e){e.utc&&(this.$u=!0),this.$utils().u(e.$offset)||(this.$offset=e.$offset),a.call(this,e)};var l=s.init;s.init=function(){if(this.$u){var e=this.$d;this.$y=e.getUTCFullYear(),this.$M=e.getUTCMonth(),this.$D=e.getUTCDate(),this.$W=e.getUTCDay(),this.$H=e.getUTCHours(),this.$m=e.getUTCMinutes(),this.$s=e.getUTCSeconds(),this.$ms=e.getUTCMilliseconds()}else l.call(this)};var c=s.utcOffset;s.utcOffset=function(e,r){var i=this.$utils().u;if(i(e))return this.$u?0:i(this.$offset)?c.call(this):this.$offset;if("string"==typeof e&&null===(e=function(e){void 0===e&&(e="");var t=e.match(o);if(!t)return null;var r=(""+t[0]).match(n)||["-",0,0],i=r[0],s=60*+r[1]+ +r[2];return 0===s?0:"+"===i?s:-s}(e)))return this;var s=16>=Math.abs(e)?60*e:e,a=this;if(r)return a.$offset=s,a.$u=0===e,a;if(0!==e){var l=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(a=this.local().add(s+l,t)).$offset=s,a.$x.$localOffset=l}else a=this.utc();return a};var u=s.format;s.format=function(e){var t=e||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return u.call(this,t)},s.valueOf=function(){var e=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*e},s.isUTC=function(){return!!this.$u},s.toISOString=function(){return this.toDate().toISOString()},s.toString=function(){return this.toDate().toUTCString()};var d=s.toDate;s.toDate=function(e){return"s"===e&&this.$offset?i(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():d.call(this)};var p=s.diff;s.diff=function(e,t,o){if(e&&this.$u===e.$u)return p.call(this,e,t,o);var n=this.local(),r=i(e).local();return p.call(n,r,t,o)}})},26353:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/popover",function(){return o(82075)}])},82075:function(e,t,o){"use strict";o.r(t),o.d(t,{default:function(){return Y}});var n=o(24246),r=o(71670),i=o(27378),s=o(63433),a=o(8671),Text=o(26569);let l=` import { Popover, Text, Button } from '@mantine/core'; function Demo() { @@ -13,7 +13,7 @@ function Demo() { ); } -`,c={type:"code",code:l,centered:!0,component:function(){return i.createElement(s.J,{width:200,position:"bottom",withArrow:!0,shadow:"md"},i.createElement(s.J.Target,null,i.createElement(a.z,null,"Toggle popover")),i.createElement(s.J.Dropdown,null,i.createElement(Text.x,{size:"xs"},"This is uncontrolled popover, it is opened when button is clicked")))}};var d=o(87921);let u=` +`,c={type:"code",code:l,centered:!0,component:function(){return i.createElement(s.J,{width:200,position:"bottom",withArrow:!0,shadow:"md"},i.createElement(s.J.Target,null,i.createElement(a.z,null,"Toggle popover")),i.createElement(s.J.Dropdown,null,i.createElement(Text.x,{size:"xs"},"This is uncontrolled popover, it is opened when button is clicked")))}};var u=o(87921);let d=` import { useDisclosure } from '@mantine/hooks'; import { Popover, Text, Button } from '@mantine/core'; @@ -32,7 +32,7 @@ function Demo() { ); } -`,p={type:"code",code:u,centered:!0,component:function(){let[e,{close:t,open:o}]=(0,d.q)(!1);return i.createElement(s.J,{width:200,position:"bottom",withArrow:!0,shadow:"md",opened:e},i.createElement(s.J.Target,null,i.createElement(a.z,{onMouseEnter:o,onMouseLeave:t},"Hover to see popover")),i.createElement(s.J.Dropdown,{style:{pointerEvents:"none"}},i.createElement(Text.x,{size:"sm"},"This popover is shown when user hovers the target element")))}};var h=o(7033);let f=` +`,p={type:"code",code:d,centered:!0,component:function(){let[e,{close:t,open:o}]=(0,u.q)(!1);return i.createElement(s.J,{width:200,position:"bottom",withArrow:!0,shadow:"md",opened:e},i.createElement(s.J.Target,null,i.createElement(a.z,{onMouseEnter:o,onMouseLeave:t},"Hover to see popover")),i.createElement(s.J.Dropdown,{style:{pointerEvents:"none"}},i.createElement(Text.x,{size:"sm"},"This popover is shown when user hovers the target element")))}};var h=o(7033);let f=` import { Popover, Button, TextInput } from '@mantine/core'; function Demo() { @@ -203,4 +203,4 @@ function Demo() { ); } -`,C={type:"code",component:function(){return i.createElement(s.J,{width:300,position:"bottom",withArrow:!0,shadow:"md"},i.createElement(s.J.Target,null,i.createElement(a.z,null,"Toggle popover")),i.createElement(s.J.Dropdown,{bg:"var(--mantine-color-body)"},i.createElement(k.P,{label:"Select within Popover",placeholder:"Select within Popover",comboboxProps:{withinPortal:!1},data:["React","Angular","Svelte","Vue"]}),i.createElement(z.a,{label:"DatePickerInput within Popover",placeholder:"DatePickerInput within Popover",popoverProps:{withinPortal:!1},mt:"md"})))},code:A,centered:!0};var B=o(3916),I=o(54568);let J=(0,B.A)(I.us.Popover);function _(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:o,KeyboardEventsTable:i,TargetComponent:s}=t;return o||Y("Demo",!0),i||Y("KeyboardEventsTable",!0),s||Y("TargetComponent",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(o,{data:c}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsxs)(t.p,{children:["You can control Popover state with ",(0,n.jsx)(t.code,{children:"opened"})," and ",(0,n.jsx)(t.code,{children:"onChange"})," props:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Button, Popover } from '@mantine/core';\n\nfunction Demo() {\n const [opened, setOpened] = useState(false);\n return (\n \n \n \n \n\n Dropdown\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.p,{children:"Controlled example with mouse events:"}),"\n",(0,n.jsx)(o,{data:p,demoProps:{toggle:!1}}),"\n",(0,n.jsx)(t.h2,{id:"focus-trap",children:"Focus trap"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to use interactive elements (inputs, buttons, etc.) inside ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"}),", set ",(0,n.jsx)(t.code,{children:"trapFocus"})," prop:"]}),"\n",(0,n.jsx)(o,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"inline-elements",children:"Inline elements"}),"\n",(0,n.jsxs)(t.p,{children:["Enable ",(0,n.jsx)(t.code,{children:"inline"})," middleware to use ",(0,n.jsx)(t.code,{children:"Popover"})," with inline elements:"]}),"\n",(0,n.jsx)(o,{data:g}),"\n",(0,n.jsx)(t.h2,{id:"same-width",children:"Same width"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:'width="target"'})," prop to make Popover dropdown take the same width as target element:"]}),"\n",(0,n.jsx)(o,{data:b}),"\n",(0,n.jsx)(t.h2,{id:"offset",children:"offset"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"offset"})," prop to a number to change dropdown position relative to the target element.\nThis way you can control dropdown offset on main axis only."]}),"\n",(0,n.jsx)(o,{data:D}),"\n",(0,n.jsxs)(t.p,{children:["To control offset on both axis, pass object with ",(0,n.jsx)(t.code,{children:"mainAxis"})," and ",(0,n.jsx)(t.code,{children:"crossAxis"})," properties:"]}),"\n",(0,n.jsx)(o,{data:$}),"\n",(0,n.jsx)(t.h2,{id:"middlewares",children:"Middlewares"}),"\n",(0,n.jsxs)(t.p,{children:["You can enable or disable ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/",children:"Floating UI"})," middlewares with\n",(0,n.jsx)(t.code,{children:"middlewares"})," prop:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/shift",children:"shit"})," middleware shifts the dropdown to keep it in view. It is enabled by default"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/flip",children:"flip"})," middleware changes the placement of the dropdown to keep it in view. It is enabled by default."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/inline",children:"inline"})," middleware improves positioning for inline reference elements that span over multiple lines. It is disabled by default."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Example of turning off ",(0,n.jsx)(t.code,{children:"shift"})," and ",(0,n.jsx)(t.code,{children:"flip"})," middlewares:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Popover content */}\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.p,{children:"In this example Popover dropdown will always be below the element – it will not\nshift of flip if there is not enough space in the viewport."}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-arrow",children:"Dropdown arrow"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"withArrow"})," prop to add an arrow to the dropdown. Arrow is a ",(0,n.jsx)(t.code,{children:"div"})," element rotated with ",(0,n.jsx)(t.code,{children:"transform: rotate(45deg)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"arrowPosition"})," prop determines how arrow is position relative to the target element when ",(0,n.jsx)(t.code,{children:"position"})," is set to ",(0,n.jsx)(t.code,{children:"*-start"})," and ",(0,n.jsx)(t.code,{children:"*-end"})," values on ",(0,n.jsx)(t.code,{children:"Popover"})," component.\nBy default, the value is ",(0,n.jsx)(t.code,{children:"center"})," – the arrow is positioned in the center of the target element if it is possible."]}),"\n",(0,n.jsxs)(t.p,{children:["If you change ",(0,n.jsx)(t.code,{children:"arrowPosition"})," to ",(0,n.jsx)(t.code,{children:"side"}),", then the arrow will be positioned on the side of the target element,\nand you will be able to control arrow offset with ",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop. Note that when ",(0,n.jsx)(t.code,{children:"arrowPosition"})," is set to ",(0,n.jsx)(t.code,{children:"center"}),",\n",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop is ignored."]}),"\n",(0,n.jsx)(o,{data:T}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"disabled"})," prop to prevent ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"})," from rendering:"]}),"\n",(0,n.jsx)(o,{data:S}),"\n",(0,n.jsx)(t.h2,{id:"click-outside",children:"Click outside"}),"\n",(0,n.jsxs)(t.p,{children:["By default, ",(0,n.jsx)(t.code,{children:"Popover"})," closes when you click outside of the dropdown. To disable this behavior, set ",(0,n.jsx)(t.code,{children:"closeOnClickOutside={false}"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["You can configure events that are used for click outside detection with ",(0,n.jsx)(t.code,{children:"clickOutsideEvents"})," prop.\nBy default, ",(0,n.jsx)(t.code,{children:"Popover"})," listens to ",(0,n.jsx)(t.code,{children:"mousedown"})," and ",(0,n.jsx)(t.code,{children:"touchstart"})," events. You can change it to any other\nevents, for example, ",(0,n.jsx)(t.code,{children:"mouseup"})," and ",(0,n.jsx)(t.code,{children:"touchend"}),":"]}),"\n",(0,n.jsx)(o,{data:M}),"\n",(0,n.jsx)(t.h2,{id:"initial-focus",children:"Initial focus"}),"\n",(0,n.jsxs)(t.p,{children:["Popover uses ",(0,n.jsx)(t.a,{href:"/core/focus-trap/",children:"FocusTrap"})," component to manage focus.\nAdd ",(0,n.jsx)(t.code,{children:"data-autofocus"})," attribute to element that should receive initial focus:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsx)(s,{component:"Popover"}),"\n",(0,n.jsx)(t.h2,{id:"nested-popovers",children:"Nested popovers"}),"\n",(0,n.jsxs)(t.p,{children:["Nested popovers require children rendering without ",(0,n.jsx)(t.a,{href:"/core/portal/",children:"Portal"}),". Usually, you\nshould disable portal with props of the component that renders popover content, for example,\n",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," has ",(0,n.jsx)(t.code,{children:"comboboxProps={{ withinPortal: false }}"})," prop. Check documentation\nof the component that you are using to render popover content to find out how to disable the portal.\nIf the portal is not disabled, outside click will close all popovers."]}),"\n",(0,n.jsxs)(t.p,{children:["Example of disabling portal in ",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," and ",(0,n.jsx)(t.a,{href:"/dates/date-picker-input/",children:"DatePickerInput"}),"\ncomponents:"]}),"\n",(0,n.jsx)(o,{data:C}),"\n",(0,n.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,n.jsxs)(t.p,{children:["Popover follows ",(0,n.jsx)(t.a,{href:"https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal",children:"WAI-ARIA recommendations"}),":"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Dropdown element has ",(0,n.jsx)(t.code,{children:'role="dialog"'})," and ",(0,n.jsx)(t.code,{children:'aria-labelledby="target-id"'})," attributes"]}),"\n",(0,n.jsxs)(t.li,{children:["Target element has ",(0,n.jsx)(t.code,{children:'aria-haspopup="dialog"'}),", ",(0,n.jsx)(t.code,{children:"aria-expanded"}),", ",(0,n.jsx)(t.code,{children:'aria-controls="dropdown-id"'})," attributes"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Uncontrolled Popover will be accessible only when used with ",(0,n.jsx)(t.code,{children:"button"})," element or component that renders it (",(0,n.jsx)(t.a,{href:"/core/button/",children:"Button"}),", ",(0,n.jsx)(t.a,{href:"/core/action-icon/",children:"ActionIcon"}),", etc.).\nOther elements will not support ",(0,n.jsx)(t.code,{children:"Space"})," and ",(0,n.jsx)(t.code,{children:"Enter"})," key presses."]}),"\n",(0,n.jsx)(t.h2,{id:"keyboard-interactions",children:"Keyboard interactions"}),"\n",(0,n.jsx)(i,{data:[{key:"Escape",description:"Closes dropdown",condition:"Focus within dropdown"},{key:"Space/Enter",description:"Opens/closes dropdown",condition:"Focus on target element"}]})]})}function N(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(J,{...e,children:(0,n.jsx)(_,{...e})})}function Y(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},67240:function(e,t,o){"use strict";o.d(t,{M:function(){return r},c:function(){return n}});let n=[{label:"top",value:"top"},{label:"top-start",value:"top-start"},{label:"top-end",value:"top-end"},{label:"left",value:"left"},{label:"left-start",value:"left-start"},{label:"left-end",value:"left-end"},{label:"right",value:"right"},{label:"right-start",value:"right-start"},{label:"right-end",value:"right-end"},{label:"bottom",value:"bottom"},{label:"bottom-start",value:"bottom-start"},{label:"bottom-end",value:"bottom-end"}],r=[{label:"side",value:"side"},{label:"center",value:"center"}]},81097:function(e,t,o){"use strict";o.d(t,{r:function(){return u}});var n=o(27378),r=o(40624),i=o(38765),s=o(49849),a=o(45608),l=o(61777),c=o(62443);function d(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:o,checkIconPosition:s,unstyled:u}){if(!(0,l.f)(e)){let l=t&&d(o,e.value)&&n.createElement(i.n,{className:c.Z.optionsDropdownCheckIcon});return n.createElement(a.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[c.Z.optionsDropdownOption]:!u}),"data-reverse":"right"===s||void 0,"data-checked":d(o,e.value)||void 0,"aria-selected":d(o,e.value)},"left"===s&&l,n.createElement("span",null,e.label),"right"===s&&l)}let p=e.items.map(e=>n.createElement(Option,{data:e,value:o,key:e.value,unstyled:u,withCheckIcon:t,checkIconPosition:s}));return n.createElement(a.h.Group,{label:e.group},p)}function u({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:i,limit:d,maxDropdownHeight:u,withScrollArea:p=!0,filterOptions:h=!0,withCheckIcon:f=!1,value:m,checkIconPosition:v,nothingFoundMessage:w,unstyled:g,labelId:x}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,l.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let b="string"==typeof i,y=b?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),i=[];for(let s=0;s0)return!1;return!0}(y),D=y.map(e=>n.createElement(Option,{data:e,key:(0,l.f)(e)?e.group:e.value,withCheckIcon:f,value:m,checkIconPosition:v,unstyled:g}));return n.createElement(a.h.Dropdown,{hidden:t||o&&P},n.createElement(a.h.Options,{labelledBy:x},p?n.createElement(s.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y",className:c.Z.optionsDropdownScrollArea},D):D,P&&w&&n.createElement(a.h.Empty,null,w)))}},61777:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},38099:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},2570:function(e,t,o){"use strict";o.d(t,{P:function(){return v}});var n=o(27378),r=o(31002),i=o(58675),s=o(5564),a=o(96739),l=o(20410),c=o(2161),d=o(38099),u=o(45608),p=o(81097),h=o(54526),f=o(23163);let m={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},v=(0,l.d)((e,t)=>{let o=(0,a.w)("Select",m,e),{classNames:l,styles:v,unstyled:w,vars:g,dropdownOpened:x,defaultDropdownOpened:b,onDropdownClose:y,onDropdownOpen:P,onFocus:D,onBlur:$,onClick:j,onChange:T,data:E,value:S,defaultValue:O,selectFirstOptionOnChange:M,onOptionSubmit:k,comboboxProps:z,readOnly:A,disabled:C,filter:B,limit:I,withScrollArea:J,maxDropdownHeight:_,size:N,searchable:Y,rightSection:V,checkIconPosition:H,withCheckIcon:U,nothingFoundMessage:F,name:L,form:Z,searchValue:W,defaultSearchValue:R,onSearchChange:q,allowDeselect:K,error:X,rightSectionPointerEvents:G,id:Q,clearable:ee,clearButtonProps:et,hiddenInputProps:eo,...en}=o,er=(0,n.useMemo)(()=>(0,c.R)(E),[E]),ei=(0,n.useMemo)(()=>(0,d.g)(er),[er]),es=(0,r.M)(Q),[ea,el]=(0,i.C)({value:S,defaultValue:O,finalValue:null,onChange:T}),ec="string"==typeof ea?ei[ea]:void 0,[ed,eu]=(0,i.C)({value:W,defaultValue:R,finalValue:ec?ec.label:"",onChange:q}),ep=(0,h.K)({opened:x,defaultOpened:b,onDropdownOpen:P,onDropdownClose:()=>{y?.(),ep.resetSelectedOption()}}),{resolvedClassNames:eh,resolvedStyles:ef}=(0,s.h)({props:o,styles:v,classNames:l});(0,n.useEffect)(()=>{M&&ep.selectFirstOption()},[M,ea]),(0,n.useEffect)(()=>{null===S&&eu(""),"string"==typeof S&&ec&&eu(ec.label)},[S,ec]);let em=ee&&!!ea&&!C&&!A&&n.createElement(u.h.ClearButton,{size:N,...et,onClear:()=>{el(null,null),eu("")}});return n.createElement(n.Fragment,null,n.createElement(u.h,{store:ep,__staticSelector:"Select",classNames:eh,styles:ef,unstyled:w,readOnly:A,onOptionSubmit:e=>{k?.(e);let t=K&&ei[e].value===ea?null:ei[e],o=t?t.value:null;el(o,t),eu("string"==typeof o&&t?.label||""),ep.closeDropdown()},size:N,...z},n.createElement(u.h.Target,{targetType:Y?"input":"button"},n.createElement(f.M,{id:es,ref:t,rightSection:V||em||n.createElement(u.h.Chevron,{size:N,error:X,unstyled:w}),rightSectionPointerEvents:G||(em?"all":"none"),...en,size:N,__staticSelector:"Select",disabled:C,readOnly:A||!Y,value:ed,onChange:e=>{eu(e.currentTarget.value),ep.openDropdown(),M&&ep.selectFirstOption()},onFocus:e=>{Y&&ep.openDropdown(),D?.(e)},onBlur:e=>{Y&&ep.closeDropdown(),eu(null!=ea&&ei[ea]?.label||""),$?.(e)},onClick:e=>{Y?ep.openDropdown():ep.toggleDropdown(),j?.(e)},classNames:eh,styles:ef,unstyled:w,pointer:!Y,error:X})),n.createElement(p.r,{data:er,hidden:A||C,filter:B,search:ed,limit:I,hiddenWhenEmpty:!Y||!F,withScrollArea:J,maxDropdownHeight:_,filterOptions:Y&&ec?.label!==ed,value:ea,checkIconPosition:H,withCheckIcon:U,nothingFoundMessage:F,unstyled:w,labelId:`${es}-label`})),n.createElement("input",{type:"hidden",name:L,value:ea||"",form:Z,disabled:C,...eo}))});v.classes={...f.M.classes,...u.h.classes},v.displayName="@mantine/core/Select"}},function(e){e.O(0,[30370,15819,2775,53993,45608,83014,49774,92888,40179],function(){return e(e.s=26353)}),_N_E=e.O()}]); \ No newline at end of file +`,C={type:"code",component:function(){return i.createElement(s.J,{width:300,position:"bottom",withArrow:!0,shadow:"md"},i.createElement(s.J.Target,null,i.createElement(a.z,null,"Toggle popover")),i.createElement(s.J.Dropdown,{bg:"var(--mantine-color-body)"},i.createElement(k.P,{label:"Select within Popover",placeholder:"Select within Popover",comboboxProps:{withinPortal:!1},data:["React","Angular","Svelte","Vue"]}),i.createElement(z.a,{label:"DatePickerInput within Popover",placeholder:"DatePickerInput within Popover",popoverProps:{withinPortal:!1},mt:"md"})))},code:A,centered:!0};var B=o(3916),I=o(54568);let J=(0,B.A)(I.us.Popover);function _(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:o,KeyboardEventsTable:i,TargetComponent:s}=t;return o||N("Demo",!0),i||N("KeyboardEventsTable",!0),s||N("TargetComponent",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(o,{data:c}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsxs)(t.p,{children:["You can control Popover state with ",(0,n.jsx)(t.code,{children:"opened"})," and ",(0,n.jsx)(t.code,{children:"onChange"})," props:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Button, Popover } from '@mantine/core';\n\nfunction Demo() {\n const [opened, setOpened] = useState(false);\n return (\n \n \n \n \n\n Dropdown\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.p,{children:"Controlled example with mouse events:"}),"\n",(0,n.jsx)(o,{data:p,demoProps:{toggle:!1}}),"\n",(0,n.jsx)(t.h2,{id:"focus-trap",children:"Focus trap"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to use interactive elements (inputs, buttons, etc.) inside ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"}),", set ",(0,n.jsx)(t.code,{children:"trapFocus"})," prop:"]}),"\n",(0,n.jsx)(o,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"inline-elements",children:"Inline elements"}),"\n",(0,n.jsxs)(t.p,{children:["Enable ",(0,n.jsx)(t.code,{children:"inline"})," middleware to use ",(0,n.jsx)(t.code,{children:"Popover"})," with inline elements:"]}),"\n",(0,n.jsx)(o,{data:g}),"\n",(0,n.jsx)(t.h2,{id:"same-width",children:"Same width"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:'width="target"'})," prop to make Popover dropdown take the same width as target element:"]}),"\n",(0,n.jsx)(o,{data:b}),"\n",(0,n.jsx)(t.h2,{id:"offset",children:"offset"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"offset"})," prop to a number to change dropdown position relative to the target element.\nThis way you can control dropdown offset on main axis only."]}),"\n",(0,n.jsx)(o,{data:D}),"\n",(0,n.jsxs)(t.p,{children:["To control offset on both axis, pass object with ",(0,n.jsx)(t.code,{children:"mainAxis"})," and ",(0,n.jsx)(t.code,{children:"crossAxis"})," properties:"]}),"\n",(0,n.jsx)(o,{data:$}),"\n",(0,n.jsx)(t.h2,{id:"middlewares",children:"Middlewares"}),"\n",(0,n.jsxs)(t.p,{children:["You can enable or disable ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/",children:"Floating UI"})," middlewares with\n",(0,n.jsx)(t.code,{children:"middlewares"})," prop:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/shift",children:"shift"})," middleware shifts the dropdown to keep it in view. It is enabled by default"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/flip",children:"flip"})," middleware changes the placement of the dropdown to keep it in view. It is enabled by default."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/inline",children:"inline"})," middleware improves positioning for inline reference elements that span over multiple lines. It is disabled by default."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Example of turning off ",(0,n.jsx)(t.code,{children:"shift"})," and ",(0,n.jsx)(t.code,{children:"flip"})," middlewares:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Popover content */}\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.p,{children:"In this example Popover dropdown will always be below the element – it will not\nshift of flip if there is not enough space in the viewport."}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-arrow",children:"Dropdown arrow"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"withArrow"})," prop to add an arrow to the dropdown. Arrow is a ",(0,n.jsx)(t.code,{children:"div"})," element rotated with ",(0,n.jsx)(t.code,{children:"transform: rotate(45deg)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"arrowPosition"})," prop determines how arrow is position relative to the target element when ",(0,n.jsx)(t.code,{children:"position"})," is set to ",(0,n.jsx)(t.code,{children:"*-start"})," and ",(0,n.jsx)(t.code,{children:"*-end"})," values on ",(0,n.jsx)(t.code,{children:"Popover"})," component.\nBy default, the value is ",(0,n.jsx)(t.code,{children:"center"})," – the arrow is positioned in the center of the target element if it is possible."]}),"\n",(0,n.jsxs)(t.p,{children:["If you change ",(0,n.jsx)(t.code,{children:"arrowPosition"})," to ",(0,n.jsx)(t.code,{children:"side"}),", then the arrow will be positioned on the side of the target element,\nand you will be able to control arrow offset with ",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop. Note that when ",(0,n.jsx)(t.code,{children:"arrowPosition"})," is set to ",(0,n.jsx)(t.code,{children:"center"}),",\n",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop is ignored."]}),"\n",(0,n.jsx)(o,{data:T}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"disabled"})," prop to prevent ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"})," from rendering:"]}),"\n",(0,n.jsx)(o,{data:S}),"\n",(0,n.jsx)(t.h2,{id:"click-outside",children:"Click outside"}),"\n",(0,n.jsxs)(t.p,{children:["By default, ",(0,n.jsx)(t.code,{children:"Popover"})," closes when you click outside of the dropdown. To disable this behavior, set ",(0,n.jsx)(t.code,{children:"closeOnClickOutside={false}"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["You can configure events that are used for click outside detection with ",(0,n.jsx)(t.code,{children:"clickOutsideEvents"})," prop.\nBy default, ",(0,n.jsx)(t.code,{children:"Popover"})," listens to ",(0,n.jsx)(t.code,{children:"mousedown"})," and ",(0,n.jsx)(t.code,{children:"touchstart"})," events. You can change it to any other\nevents, for example, ",(0,n.jsx)(t.code,{children:"mouseup"})," and ",(0,n.jsx)(t.code,{children:"touchend"}),":"]}),"\n",(0,n.jsx)(o,{data:M}),"\n",(0,n.jsx)(t.h2,{id:"initial-focus",children:"Initial focus"}),"\n",(0,n.jsxs)(t.p,{children:["Popover uses ",(0,n.jsx)(t.a,{href:"/core/focus-trap/",children:"FocusTrap"})," component to manage focus.\nAdd ",(0,n.jsx)(t.code,{children:"data-autofocus"})," attribute to element that should receive initial focus:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsx)(s,{component:"Popover"}),"\n",(0,n.jsx)(t.h2,{id:"nested-popovers",children:"Nested popovers"}),"\n",(0,n.jsxs)(t.p,{children:["Nested popovers require children rendering without ",(0,n.jsx)(t.a,{href:"/core/portal/",children:"Portal"}),". Usually, you\nshould disable portal with props of the component that renders popover content, for example,\n",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," has ",(0,n.jsx)(t.code,{children:"comboboxProps={{ withinPortal: false }}"})," prop. Check documentation\nof the component that you are using to render popover content to find out how to disable the portal.\nIf the portal is not disabled, outside click will close all popovers."]}),"\n",(0,n.jsxs)(t.p,{children:["Example of disabling portal in ",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," and ",(0,n.jsx)(t.a,{href:"/dates/date-picker-input/",children:"DatePickerInput"}),"\ncomponents:"]}),"\n",(0,n.jsx)(o,{data:C}),"\n",(0,n.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,n.jsxs)(t.p,{children:["Popover follows ",(0,n.jsx)(t.a,{href:"https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal",children:"WAI-ARIA recommendations"}),":"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Dropdown element has ",(0,n.jsx)(t.code,{children:'role="dialog"'})," and ",(0,n.jsx)(t.code,{children:'aria-labelledby="target-id"'})," attributes"]}),"\n",(0,n.jsxs)(t.li,{children:["Target element has ",(0,n.jsx)(t.code,{children:'aria-haspopup="dialog"'}),", ",(0,n.jsx)(t.code,{children:"aria-expanded"}),", ",(0,n.jsx)(t.code,{children:'aria-controls="dropdown-id"'})," attributes"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Uncontrolled Popover will be accessible only when used with ",(0,n.jsx)(t.code,{children:"button"})," element or component that renders it (",(0,n.jsx)(t.a,{href:"/core/button/",children:"Button"}),", ",(0,n.jsx)(t.a,{href:"/core/action-icon/",children:"ActionIcon"}),", etc.).\nOther elements will not support ",(0,n.jsx)(t.code,{children:"Space"})," and ",(0,n.jsx)(t.code,{children:"Enter"})," key presses."]}),"\n",(0,n.jsx)(t.h2,{id:"keyboard-interactions",children:"Keyboard interactions"}),"\n",(0,n.jsx)(i,{data:[{key:"Escape",description:"Closes dropdown",condition:"Focus within dropdown"},{key:"Space/Enter",description:"Opens/closes dropdown",condition:"Focus on target element"}]})]})}function Y(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(J,{...e,children:(0,n.jsx)(_,{...e})})}function N(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},67240:function(e,t,o){"use strict";o.d(t,{M:function(){return r},c:function(){return n}});let n=[{label:"top",value:"top"},{label:"top-start",value:"top-start"},{label:"top-end",value:"top-end"},{label:"left",value:"left"},{label:"left-start",value:"left-start"},{label:"left-end",value:"left-end"},{label:"right",value:"right"},{label:"right-start",value:"right-start"},{label:"right-end",value:"right-end"},{label:"bottom",value:"bottom"},{label:"bottom-start",value:"bottom-start"},{label:"bottom-end",value:"bottom-end"}],r=[{label:"side",value:"side"},{label:"center",value:"center"}]},81097:function(e,t,o){"use strict";o.d(t,{r:function(){return d}});var n=o(27378),r=o(40624),i=o(38765),s=o(49849),a=o(45608),l=o(61777),c=o(62443);function u(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:o,checkIconPosition:s,unstyled:d}){if(!(0,l.f)(e)){let l=t&&u(o,e.value)&&n.createElement(i.n,{className:c.Z.optionsDropdownCheckIcon});return n.createElement(a.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[c.Z.optionsDropdownOption]:!d}),"data-reverse":"right"===s||void 0,"data-checked":u(o,e.value)||void 0,"aria-selected":u(o,e.value)},"left"===s&&l,n.createElement("span",null,e.label),"right"===s&&l)}let p=e.items.map(e=>n.createElement(Option,{data:e,value:o,key:e.value,unstyled:d,withCheckIcon:t,checkIconPosition:s}));return n.createElement(a.h.Group,{label:e.group},p)}function d({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:i,limit:c,maxDropdownHeight:u,withScrollArea:d=!0,filterOptions:p=!0,withCheckIcon:h=!1,value:f,checkIconPosition:m,nothingFoundMessage:v,unstyled:w,labelId:g}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,l.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let x="string"==typeof i,b=x?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),i=[];for(let s=0;s0)return!1;return!0}(b),P=b.map(e=>n.createElement(Option,{data:e,key:(0,l.f)(e)?e.group:e.value,withCheckIcon:h,value:f,checkIconPosition:m,unstyled:w}));return n.createElement(a.h.Dropdown,{hidden:t||o&&y},n.createElement(a.h.Options,{labelledBy:g},d?n.createElement(s.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y"},P):P,y&&v&&n.createElement(a.h.Empty,null,v)))}},61777:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},38099:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},2570:function(e,t,o){"use strict";o.d(t,{P:function(){return v}});var n=o(27378),r=o(31002),i=o(58675),s=o(5564),a=o(96739),l=o(20410),c=o(2161),u=o(38099),d=o(45608),p=o(81097),h=o(54526),f=o(23163);let m={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},v=(0,l.d)((e,t)=>{let o=(0,a.w)("Select",m,e),{classNames:l,styles:v,unstyled:w,vars:g,dropdownOpened:x,defaultDropdownOpened:b,onDropdownClose:y,onDropdownOpen:P,onFocus:D,onBlur:$,onClick:j,onChange:T,data:E,value:S,defaultValue:O,selectFirstOptionOnChange:M,onOptionSubmit:k,comboboxProps:z,readOnly:A,disabled:C,filter:B,limit:I,withScrollArea:J,maxDropdownHeight:_,size:Y,searchable:N,rightSection:V,checkIconPosition:H,withCheckIcon:U,nothingFoundMessage:F,name:L,form:W,searchValue:Z,defaultSearchValue:R,onSearchChange:q,allowDeselect:K,error:X,rightSectionPointerEvents:G,id:Q,clearable:ee,clearButtonProps:et,hiddenInputProps:eo,...en}=o,er=(0,n.useMemo)(()=>(0,c.R)(E),[E]),ei=(0,n.useMemo)(()=>(0,u.g)(er),[er]),es=(0,r.M)(Q),[ea,el]=(0,i.C)({value:S,defaultValue:O,finalValue:null,onChange:T}),ec="string"==typeof ea?ei[ea]:void 0,[eu,ed]=(0,i.C)({value:Z,defaultValue:R,finalValue:ec?ec.label:"",onChange:q}),ep=(0,h.K)({opened:x,defaultOpened:b,onDropdownOpen:P,onDropdownClose:()=>{y?.(),ep.resetSelectedOption()}}),{resolvedClassNames:eh,resolvedStyles:ef}=(0,s.h)({props:o,styles:v,classNames:l});(0,n.useEffect)(()=>{M&&ep.selectFirstOption()},[M,ea]),(0,n.useEffect)(()=>{null===S&&ed(""),"string"==typeof S&&ec&&ed(ec.label)},[S,ec]);let em=ee&&!!ea&&!C&&!A&&n.createElement(d.h.ClearButton,{size:Y,...et,onClear:()=>{el(null,null),ed("")}});return n.createElement(n.Fragment,null,n.createElement(d.h,{store:ep,__staticSelector:"Select",classNames:eh,styles:ef,unstyled:w,readOnly:A,onOptionSubmit:e=>{k?.(e);let t=K&&ei[e].value===ea?null:ei[e],o=t?t.value:null;el(o,t),ed("string"==typeof o&&t?.label||""),ep.closeDropdown()},size:Y,...z},n.createElement(d.h.Target,{targetType:N?"input":"button"},n.createElement(f.M,{id:es,ref:t,rightSection:V||em||n.createElement(d.h.Chevron,{size:Y,error:X,unstyled:w}),rightSectionPointerEvents:G||(em?"all":"none"),...en,size:Y,__staticSelector:"Select",disabled:C,readOnly:A||!N,value:eu,onChange:e=>{ed(e.currentTarget.value),ep.openDropdown(),M&&ep.selectFirstOption()},onFocus:e=>{N&&ep.openDropdown(),D?.(e)},onBlur:e=>{N&&ep.closeDropdown(),ed(null!=ea&&ei[ea]?.label||""),$?.(e)},onClick:e=>{N?ep.openDropdown():ep.toggleDropdown(),j?.(e)},classNames:eh,styles:ef,unstyled:w,pointer:!N,error:X})),n.createElement(p.r,{data:er,hidden:A||C,filter:B,search:eu,limit:I,hiddenWhenEmpty:!N||!F,withScrollArea:J,maxDropdownHeight:_,filterOptions:N&&ec?.label!==eu,value:ea,checkIconPosition:H,withCheckIcon:U,nothingFoundMessage:F,unstyled:w,labelId:`${es}-label`})),n.createElement("input",{type:"hidden",name:L,value:ea||"",form:W,disabled:C,...eo}))});v.classes={...f.M.classes,...d.h.classes},v.displayName="@mantine/core/Select"}},function(e){e.O(0,[30370,15819,2775,53993,45608,83014,49774,92888,40179],function(){return e(e.s=26353)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/progress-e7833879ea2b9587.js b/_next/static/chunks/pages/core/progress-ce8a3529b3e2ee95.js similarity index 85% rename from _next/static/chunks/pages/core/progress-e7833879ea2b9587.js rename to _next/static/chunks/pages/core/progress-ce8a3529b3e2ee95.js index bf31cf7cb90..eebe1cb8938 100644 --- a/_next/static/chunks/pages/core/progress-e7833879ea2b9587.js +++ b/_next/static/chunks/pages/core/progress-ce8a3529b3e2ee95.js @@ -75,4 +75,4 @@ function Demo() { ); } -`,a={type:"code",component:function(){return t.createElement(n.E.Root,{size:"xl"},t.createElement(n.E.Section,{value:35,color:"cyan"},t.createElement(n.E.Label,null,"Documents")),t.createElement(n.E.Section,{value:28,color:"pink"},t.createElement(n.E.Label,null,"Photos")),t.createElement(n.E.Section,{value:15,color:"orange"},t.createElement(n.E.Label,null,"Other")))},code:s}},30454:function(e,r,o){"use strict";o.d(r,{E:function(){return w}});var t=o(27378),n=o(5564),s=o(96739),a=o(20410),l=o(56589),i=o(71656);let[c,u]=(0,i.R)("Progress.Root component was not found in tree");var m={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let d={},p=(0,a.d)((e,r)=>{let{classNames:o,className:n,style:a,styles:i,vars:c,...m}=(0,s.w)("ProgressLabel",d,e),p=u();return t.createElement(l.x,{ref:r,...p.getStyles("label",{className:n,style:a,classNames:o,styles:i}),...m})});p.classes=m,p.displayName="@mantine/core/ProgressLabel";var g=o(92082),b=o(83453),P=o(6231);let h={},E=(0,b.Z)((e,{size:r,radius:o,transitionDuration:t})=>({root:{"--progress-size":(0,g.ap)(r,"progress-size"),"--progress-radius":void 0===o?void 0:(0,g.H5)(o),"--progress-transition-duration":"number"==typeof t?`${t}ms`:void 0}})),v=(0,a.d)((e,r)=>{let o=(0,s.w)("ProgressRoot",h,e),{classNames:n,className:a,style:i,styles:u,unstyled:d,vars:p,autoContrast:g,transitionDuration:b,...v}=o,x=(0,P.y)({name:"Progress",classes:m,props:o,className:a,style:i,classNames:n,styles:u,unstyled:d,vars:p,varsResolver:E});return t.createElement(c,{value:{getStyles:x,autoContrast:g}},t.createElement(l.x,{ref:r,...x("root"),...v}))});v.classes=m,v.displayName="@mantine/core/ProgressRoot";var x=o(89738),f=o(34121),S=o(2256);let y={withAria:!0},j=(0,a.d)((e,r)=>{let{classNames:o,className:n,style:a,styles:i,vars:c,value:m,withAria:d,color:p,striped:g,animated:b,mod:P,...h}=(0,s.w)("ProgressSection",y,e),E=u(),v=(0,S.rZ)(),j=d?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":m,"aria-valuetext":`${m}%`}:{};return t.createElement(l.x,{ref:r,...E.getStyles("section",{className:n,classNames:o,styles:i,style:a}),...h,...j,mod:[{striped:g||b,animated:b},P],__vars:{"--progress-section-width":`${m}%`,"--progress-section-color":(0,x.p)(p,v),"--progress-label-color":E.autoContrast?(0,f.R)({color:p,theme:v}):void 0}})});j.classes=m,j.displayName="@mantine/core/ProgressSection";let L={},w=(0,a.d)((e,r)=>{let o=(0,s.w)("Progress",L,e),{value:a,classNames:l,styles:i,vars:c,color:u,striped:m,animated:d,"aria-label":p,...g}=o,{resolvedClassNames:b,resolvedStyles:P}=(0,n.h)({classNames:l,styles:i,props:o});return t.createElement(v,{ref:r,classNames:b,styles:P,vars:c,...g},t.createElement(j,{value:a,color:u,striped:m,animated:d,"aria-label":p}))});w.classes=m,w.displayName="@mantine/core/Progress",w.Section=j,w.Root=v,w.Label=p}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=83943)}),_N_E=e.O()}]); \ No newline at end of file +`,a={type:"code",component:function(){return t.createElement(n.E.Root,{size:"xl"},t.createElement(n.E.Section,{value:35,color:"cyan"},t.createElement(n.E.Label,null,"Documents")),t.createElement(n.E.Section,{value:28,color:"pink"},t.createElement(n.E.Label,null,"Photos")),t.createElement(n.E.Section,{value:15,color:"orange"},t.createElement(n.E.Label,null,"Other")))},code:s}},30454:function(e,r,o){"use strict";o.d(r,{E:function(){return D}});var t=o(27378),n=o(5564),s=o(96739),a=o(20410),l=o(56589),i=o(71656);let[c,u]=(0,i.R)("Progress.Root component was not found in tree");var m={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let d={},p=(0,a.d)((e,r)=>{let{classNames:o,className:n,style:a,styles:i,vars:c,...m}=(0,s.w)("ProgressLabel",d,e),p=u();return t.createElement(l.x,{ref:r,...p.getStyles("label",{className:n,style:a,classNames:o,styles:i}),...m})});p.classes=m,p.displayName="@mantine/core/ProgressLabel";var g=o(92082),b=o(83453),P=o(6231);let h={},E=(0,b.Z)((e,{size:r,radius:o,transitionDuration:t})=>({root:{"--progress-size":(0,g.ap)(r,"progress-size"),"--progress-radius":void 0===o?void 0:(0,g.H5)(o),"--progress-transition-duration":"number"==typeof t?`${t}ms`:void 0}})),v=(0,a.d)((e,r)=>{let o=(0,s.w)("ProgressRoot",h,e),{classNames:n,className:a,style:i,styles:u,unstyled:d,vars:p,autoContrast:g,transitionDuration:b,...v}=o,x=(0,P.y)({name:"Progress",classes:m,props:o,className:a,style:i,classNames:n,styles:u,unstyled:d,vars:p,varsResolver:E});return t.createElement(c,{value:{getStyles:x,autoContrast:g}},t.createElement(l.x,{ref:r,...x("root"),...v}))});v.classes=m,v.displayName="@mantine/core/ProgressRoot";var x=o(89738),f=o(34121),S=o(55357),y=o(2256);let j={withAria:!0},L=(0,a.d)((e,r)=>{let{classNames:o,className:n,style:a,styles:i,vars:c,value:m,withAria:d,color:p,striped:g,animated:b,mod:P,...h}=(0,s.w)("ProgressSection",j,e),E=u(),v=(0,y.rZ)(),L=d?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":m,"aria-valuetext":`${m}%`}:{};return t.createElement(l.x,{ref:r,...E.getStyles("section",{className:n,classNames:o,styles:i,style:a}),...h,...L,mod:[{striped:g||b,animated:b},P],__vars:{"--progress-section-width":`${m}%`,"--progress-section-color":(0,x.p)(p,v),"--progress-label-color":(0,S.o)(E.autoContrast,v)?(0,f.R)({color:p,theme:v}):void 0}})});L.classes=m,L.displayName="@mantine/core/ProgressSection";let w={},D=(0,a.d)((e,r)=>{let o=(0,s.w)("Progress",w,e),{value:a,classNames:l,styles:i,vars:c,color:u,striped:m,animated:d,"aria-label":p,...g}=o,{resolvedClassNames:b,resolvedStyles:P}=(0,n.h)({classNames:l,styles:i,props:o});return t.createElement(v,{ref:r,classNames:b,styles:P,vars:c,...g},t.createElement(L,{value:a,color:u,striped:m,animated:d,"aria-label":p}))});D.classes=m,D.displayName="@mantine/core/Progress",D.Section=L,D.Root=v,D.Label=p}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=83943)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/radio-7dc170b3514aab10.js b/_next/static/chunks/pages/core/radio-04c7827a139303ea.js similarity index 78% rename from _next/static/chunks/pages/core/radio-7dc170b3514aab10.js rename to _next/static/chunks/pages/core/radio-04c7827a139303ea.js index 7c4d5366e92..0811e7c589a 100644 --- a/_next/static/chunks/pages/core/radio-7dc170b3514aab10.js +++ b/_next/static/chunks/pages/core/radio-04c7827a139303ea.js @@ -107,4 +107,4 @@ function Demo() { /> ); } -`,w={type:"styles-api",data:C.P,component:function(e){return r.createElement(l.Y,{label:"Radio",description:"Radio description",error:"Radio error",defaultChecked:!0,...e})},code:V,centered:!0};var T=n(3916),Y=n(54568);let G=(0,T.A)(Y.us.Radio);function S(e){let o={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components},{Demo:n,GetElementRef:r,StylesApiSelectors:l,WrapperProps:i}=o;return n||_("Demo",!0),r||_("GetElementRef",!0),l||_("StylesApiSelectors",!0),i||_("WrapperProps",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n,{data:c}),"\n",(0,a.jsx)(o.h2,{id:"controlled",children:"Controlled"}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Radio } from '@mantine/core';\n\nfunction Demo() {\n const [checked, setChecked] = useState(false);\n return (\n setChecked(event.currentTarget.checked)}\n />\n );\n}\n"})}),"\n",(0,a.jsx)(o.h2,{id:"states",children:"States"}),"\n",(0,a.jsx)(n,{data:s}),"\n",(0,a.jsx)(o.h2,{id:"change-icon",children:"Change icon"}),"\n",(0,a.jsx)(n,{data:h}),"\n",(0,a.jsx)(o.h2,{id:"change-icon-color",children:"Change icon color"}),"\n",(0,a.jsx)(n,{data:f}),"\n",(0,a.jsx)(o.h2,{id:"disabled-state",children:"Disabled state"}),"\n",(0,a.jsx)(n,{data:g}),"\n",(0,a.jsx)(o.h2,{id:"pointer-cursor",children:"Pointer cursor"}),"\n",(0,a.jsxs)(o.p,{children:["By default, radio input and label have ",(0,a.jsx)(o.code,{children:"cursor: default"})," (same as native ",(0,a.jsx)(o.code,{children:'input[type="radio"]'}),").\nTo change cursor to pointer, set ",(0,a.jsx)(o.code,{children:"cursorType"})," on ",(0,a.jsx)(o.a,{href:"/theming/theme-object/",children:"theme"}),":"]}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:"import { createTheme, MantineProvider, Radio } from '@mantine/core';\n\nconst theme = createTheme({\n cursorType: 'pointer',\n});\n\nfunction Demo() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,a.jsx)(o.h2,{id:"radio-with-tooltip",children:"Radio with tooltip"}),"\n",(0,a.jsxs)(o.p,{children:["You can change target element to which tooltip is attached with ",(0,a.jsx)(o.code,{children:"refProp"}),":"]}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsxs)(o.li,{children:["If ",(0,a.jsx)(o.code,{children:"refProp"})," is not set, the tooltip is attached to the checkbox input"]}),"\n",(0,a.jsxs)(o.li,{children:["If ",(0,a.jsx)(o.code,{children:'refProp="rootRef"'})," is set, the tooltip is attached to the root element (contains label, input and other elements)"]}),"\n"]}),"\n",(0,a.jsx)(n,{data:y}),"\n",(0,a.jsx)(i,{component:"Radio"}),"\n",(0,a.jsx)(o.h2,{id:"radiogroup-component",children:"Radio.Group component"}),"\n",(0,a.jsx)(n,{data:E}),"\n",(0,a.jsx)(o.h2,{id:"controlled-radiogroup",children:"Controlled Radio.Group"}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:'import { useState } from \'react\';\nimport { Radio } from \'@mantine/core\';\n\nfunction Demo() {\n const [value, setValue] = useState(\'react\');\n\n return (\n \n \n \n \n \n \n );\n}\n'})}),"\n",(0,a.jsx)(r,{component:"Radio",refType:"input"}),"\n",(0,a.jsx)(l,{component:"Radio"}),"\n",(0,a.jsx)(n,{data:w}),"\n",(0,a.jsx)(o.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,a.jsxs)(o.p,{children:["Set ",(0,a.jsx)(o.code,{children:"aria-label"})," or ",(0,a.jsx)(o.code,{children:"label"})," prop to make the radio accessible:"]}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:'import { Radio } from \'@mantine/core\';\n\n// Not ok, input is not labeled\nfunction Bad() {\n return ;\n}\n\n// Ok, input is labelled by aria-label\nfunction GoodAriaLabel() {\n return ;\n}\n\n// Ok, input is labelled by label element\nfunction GoodLabel() {\n return ;\n}\n'})})]})}function D(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(G,{...e,children:(0,a.jsx)(S,{...e})})}function _(e,o){throw Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},75014:function(e,o,n){"use strict";n.d(o,{Y:function(){return Y}});var a=n(27378),t=n(31002),r=n(92082),l=n(83453),i=n(88193),c=n(89738),d=n(34121),u=n(96739),s=n(6231),p=n(55934),m=n(56589),h=n(20410),b=n(91549),f=n(89871);let[v,R]=(0,f.V)();var g=n(58675),k=n(42487),x=n(96606);let y={},j=(0,h.d)((e,o)=>{let{value:n,defaultValue:r,onChange:l,size:i,wrapperProps:c,children:d,name:s,readOnly:p,...m}=(0,u.w)("RadioGroup",y,e),h=(0,t.M)(s),[b,f]=(0,g.C)({value:n,defaultValue:r,finalValue:"",onChange:l});return a.createElement(v,{value:{value:b,onChange:e=>!p&&f(e.currentTarget.value),size:i,name:h}},a.createElement(k.I.Wrapper,{size:i,ref:o,...c,...m,labelElement:"div",__staticSelector:"RadioGroup"},a.createElement(x.m,{role:"radiogroup"},d)))});j.classes=k.I.Wrapper.classes,j.displayName="@mantine/core/RadioGroup";var E=n(71078);function C({size:e,style:o,...n}){return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 5 5",style:{width:(0,E.h)(e),height:(0,E.h)(e),...o},"aria-hidden":!0,...n},a.createElement("circle",{cx:"2.5",cy:"2.5",r:"2.5",fill:"currentColor"}))}var V={root:"m-f3f1af94",inner:"m-89c4f5e4",icon:"m-f3ed6b2b",radio:"m-8a3dbb89","radio--outline":"m-1bfe9d39"};let w={labelPosition:"right"},T=(0,l.Z)((e,{size:o,radius:n,color:a,iconColor:t,variant:l,autoContrast:u})=>{let s=(0,i.E)({color:a||e.primaryColor,theme:e}),p=s.isThemeColor&&void 0===s.shade?`var(--mantine-color-${s.color}-outline)`:s.color;return{root:{"--radio-size":(0,r.ap)(o,"radio-size"),"--radio-radius":void 0===n?void 0:(0,r.H5)(n),"--radio-color":"outline"===l?p:(0,c.p)(a,e),"--radio-icon-color":t?(0,c.p)(t,e):u?(0,d.R)({color:a,theme:e}):void 0,"--radio-icon-size":(0,r.ap)(o,"radio-icon-size")}}}),Y=(0,h.d)((e,o)=>{let n=(0,u.w)("Radio",w,e),{classNames:r,className:l,style:i,styles:c,unstyled:d,vars:h,id:f,size:v,label:g,labelPosition:k,description:x,error:y,radius:j,color:E,variant:Y,disabled:G,wrapperProps:S,icon:D=C,rootRef:_,iconColor:P,onChange:A,mod:N,...z}=n,I=(0,s.y)({name:"Radio",classes:V,props:n,className:l,style:i,classNames:r,styles:c,unstyled:d,vars:h,varsResolver:T}),M=R(),O=M?.size??v,F=n.size?v:O,{styleProps:Z,rest:B}=(0,p.c)(z),L=(0,t.M)(f),W=M?{checked:M.value===B.value,name:B.name??M.name,onChange:e=>{M.onChange(e),A?.(e)}}:{};return a.createElement(b.Z,{...I("root"),__staticSelector:"Radio",__stylesApiProps:n,id:L,size:F,labelPosition:k,label:g,description:x,error:y,disabled:G,classNames:r,styles:c,unstyled:d,"data-checked":W.checked||void 0,variant:Y,ref:_,mod:N,...Z,...S},a.createElement(m.x,{...I("inner"),mod:{"label-position":k}},a.createElement(m.x,{...I("radio",{focusable:!0,variant:Y}),onChange:A,...B,...W,component:"input",mod:{error:!!y},ref:o,id:L,disabled:G,type:"radio"}),a.createElement(D,{...I("icon"),"aria-hidden":!0})))});Y.classes=V,Y.displayName="@mantine/core/Radio",Y.Group=j}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=83225)}),_N_E=e.O()}]); \ No newline at end of file +`,w={type:"styles-api",data:C.P,component:function(e){return r.createElement(l.Y,{label:"Radio",description:"Radio description",error:"Radio error",defaultChecked:!0,...e})},code:V,centered:!0};var T=n(3916),Y=n(54568);let G=(0,T.A)(Y.us.Radio);function S(e){let o={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.a)(),...e.components},{Demo:n,GetElementRef:r,StylesApiSelectors:l,WrapperProps:i}=o;return n||_("Demo",!0),r||_("GetElementRef",!0),l||_("StylesApiSelectors",!0),i||_("WrapperProps",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n,{data:c}),"\n",(0,a.jsx)(o.h2,{id:"controlled",children:"Controlled"}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Radio } from '@mantine/core';\n\nfunction Demo() {\n const [checked, setChecked] = useState(false);\n return (\n setChecked(event.currentTarget.checked)}\n />\n );\n}\n"})}),"\n",(0,a.jsx)(o.h2,{id:"states",children:"States"}),"\n",(0,a.jsx)(n,{data:s}),"\n",(0,a.jsx)(o.h2,{id:"change-icon",children:"Change icon"}),"\n",(0,a.jsx)(n,{data:h}),"\n",(0,a.jsx)(o.h2,{id:"change-icon-color",children:"Change icon color"}),"\n",(0,a.jsx)(n,{data:f}),"\n",(0,a.jsx)(o.h2,{id:"disabled-state",children:"Disabled state"}),"\n",(0,a.jsx)(n,{data:g}),"\n",(0,a.jsx)(o.h2,{id:"pointer-cursor",children:"Pointer cursor"}),"\n",(0,a.jsxs)(o.p,{children:["By default, radio input and label have ",(0,a.jsx)(o.code,{children:"cursor: default"})," (same as native ",(0,a.jsx)(o.code,{children:'input[type="radio"]'}),").\nTo change cursor to pointer, set ",(0,a.jsx)(o.code,{children:"cursorType"})," on ",(0,a.jsx)(o.a,{href:"/theming/theme-object/",children:"theme"}),":"]}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:"import { createTheme, MantineProvider, Radio } from '@mantine/core';\n\nconst theme = createTheme({\n cursorType: 'pointer',\n});\n\nfunction Demo() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,a.jsx)(o.h2,{id:"radio-with-tooltip",children:"Radio with tooltip"}),"\n",(0,a.jsxs)(o.p,{children:["You can change target element to which tooltip is attached with ",(0,a.jsx)(o.code,{children:"refProp"}),":"]}),"\n",(0,a.jsxs)(o.ul,{children:["\n",(0,a.jsxs)(o.li,{children:["If ",(0,a.jsx)(o.code,{children:"refProp"})," is not set, the tooltip is attached to the checkbox input"]}),"\n",(0,a.jsxs)(o.li,{children:["If ",(0,a.jsx)(o.code,{children:'refProp="rootRef"'})," is set, the tooltip is attached to the root element (contains label, input and other elements)"]}),"\n"]}),"\n",(0,a.jsx)(n,{data:y}),"\n",(0,a.jsx)(i,{component:"Radio"}),"\n",(0,a.jsx)(o.h2,{id:"radiogroup-component",children:"Radio.Group component"}),"\n",(0,a.jsx)(n,{data:E}),"\n",(0,a.jsx)(o.h2,{id:"controlled-radiogroup",children:"Controlled Radio.Group"}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:'import { useState } from \'react\';\nimport { Radio } from \'@mantine/core\';\n\nfunction Demo() {\n const [value, setValue] = useState(\'react\');\n\n return (\n \n \n \n \n \n \n );\n}\n'})}),"\n",(0,a.jsx)(r,{component:"Radio",refType:"input"}),"\n",(0,a.jsx)(l,{component:"Radio"}),"\n",(0,a.jsx)(n,{data:w}),"\n",(0,a.jsx)(o.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,a.jsxs)(o.p,{children:["Set ",(0,a.jsx)(o.code,{children:"aria-label"})," or ",(0,a.jsx)(o.code,{children:"label"})," prop to make the radio accessible:"]}),"\n",(0,a.jsx)(o.pre,{children:(0,a.jsx)(o.code,{className:"language-tsx",children:'import { Radio } from \'@mantine/core\';\n\n// Not ok, input is not labeled\nfunction Bad() {\n return ;\n}\n\n// Ok, input is labelled by aria-label\nfunction GoodAriaLabel() {\n return ;\n}\n\n// Ok, input is labelled by label element\nfunction GoodLabel() {\n return ;\n}\n'})})]})}function D(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(G,{...e,children:(0,a.jsx)(S,{...e})})}function _(e,o){throw Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},75014:function(e,o,n){"use strict";n.d(o,{Y:function(){return G}});var a=n(27378),t=n(31002),r=n(92082),l=n(83453),i=n(88193),c=n(89738),d=n(34121),u=n(55357),s=n(96739),p=n(6231),m=n(55934),h=n(56589),b=n(20410),f=n(91549),v=n(89871);let[R,g]=(0,v.V)();var k=n(58675),x=n(42487),y=n(96606);let j={},E=(0,b.d)((e,o)=>{let{value:n,defaultValue:r,onChange:l,size:i,wrapperProps:c,children:d,name:u,readOnly:p,...m}=(0,s.w)("RadioGroup",j,e),h=(0,t.M)(u),[b,f]=(0,k.C)({value:n,defaultValue:r,finalValue:"",onChange:l});return a.createElement(R,{value:{value:b,onChange:e=>!p&&f(e.currentTarget.value),size:i,name:h}},a.createElement(x.I.Wrapper,{size:i,ref:o,...c,...m,labelElement:"div",__staticSelector:"RadioGroup"},a.createElement(y.m,{role:"radiogroup"},d)))});E.classes=x.I.Wrapper.classes,E.displayName="@mantine/core/RadioGroup";var C=n(71078);function V({size:e,style:o,...n}){return a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 5 5",style:{width:(0,C.h)(e),height:(0,C.h)(e),...o},"aria-hidden":!0,...n},a.createElement("circle",{cx:"2.5",cy:"2.5",r:"2.5",fill:"currentColor"}))}var w={root:"m-f3f1af94",inner:"m-89c4f5e4",icon:"m-f3ed6b2b",radio:"m-8a3dbb89","radio--outline":"m-1bfe9d39"};let T={labelPosition:"right"},Y=(0,l.Z)((e,{size:o,radius:n,color:a,iconColor:t,variant:l,autoContrast:s})=>{let p=(0,i.E)({color:a||e.primaryColor,theme:e}),m=p.isThemeColor&&void 0===p.shade?`var(--mantine-color-${p.color}-outline)`:p.color;return{root:{"--radio-size":(0,r.ap)(o,"radio-size"),"--radio-radius":void 0===n?void 0:(0,r.H5)(n),"--radio-color":"outline"===l?m:(0,c.p)(a,e),"--radio-icon-color":t?(0,c.p)(t,e):(0,u.o)(s,e)?(0,d.R)({color:a,theme:e}):void 0,"--radio-icon-size":(0,r.ap)(o,"radio-icon-size")}}}),G=(0,b.d)((e,o)=>{let n=(0,s.w)("Radio",T,e),{classNames:r,className:l,style:i,styles:c,unstyled:d,vars:u,id:b,size:v,label:R,labelPosition:k,description:x,error:y,radius:j,color:E,variant:C,disabled:G,wrapperProps:S,icon:D=V,rootRef:_,iconColor:P,onChange:A,mod:N,...z}=n,I=(0,p.y)({name:"Radio",classes:w,props:n,className:l,style:i,classNames:r,styles:c,unstyled:d,vars:u,varsResolver:Y}),M=g(),O=M?.size??v,F=n.size?v:O,{styleProps:Z,rest:B}=(0,m.c)(z),L=(0,t.M)(b),W=M?{checked:M.value===B.value,name:B.name??M.name,onChange:e=>{M.onChange(e),A?.(e)}}:{};return a.createElement(f.Z,{...I("root"),__staticSelector:"Radio",__stylesApiProps:n,id:L,size:F,labelPosition:k,label:R,description:x,error:y,disabled:G,classNames:r,styles:c,unstyled:d,"data-checked":W.checked||void 0,variant:C,ref:_,mod:N,...Z,...S},a.createElement(h.x,{...I("inner"),mod:{"label-position":k}},a.createElement(h.x,{...I("radio",{focusable:!0,variant:C}),onChange:A,...B,...W,component:"input",mod:{error:!!y},ref:o,id:L,disabled:G,type:"radio"}),a.createElement(D,{...I("icon"),"aria-hidden":!0})))});G.classes=w,G.displayName="@mantine/core/Radio",G.Group=E}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=83225)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/select-3fbf2998ca94f86c.js b/_next/static/chunks/pages/core/select-63ed0abf0e7244f7.js similarity index 88% rename from _next/static/chunks/pages/core/select-3fbf2998ca94f86c.js rename to _next/static/chunks/pages/core/select-63ed0abf0e7244f7.js index 5ad96a8b254..9fd484ad83f 100644 --- a/_next/static/chunks/pages/core/select-3fbf2998ca94f86c.js +++ b/_next/static/chunks/pages/core/select-63ed0abf0e7244f7.js @@ -454,4 +454,4 @@ function Demo() { /> ); } -`,eb={type:"styles-api",data:em.i,component:function(e){return l.createElement(a.P,{...e,dropdownOpened:!0,leftSection:l.createElement(eh.Z,{style:{width:(0,et.h)(18),height:(0,et.h)(18)},stroke:1.5}),withAsterisk:!0,label:"Select",description:"Description",placeholder:"Select",data:[{group:"Frontend",items:["React","Angular"]},{group:"Backend",items:["Node","Django"]}]})},code:ef,centered:!0,maxWidth:340};var ev=o(3916),eg=o(54568);let ex=(0,ev.A)(eg.us.Select);function ey(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{ComboboxData:o,ComboboxDisclaimer:l,ComboboxFiltering:a,ComboboxLargeData:i,ComboboxProps:d,Demo:u,GetElementRef:h,InputAccessibility:f,InputFeatures:v,InputSections:x,StylesApiSelectors:y}=t;return o||ew("ComboboxData",!0),l||ew("ComboboxDisclaimer",!0),a||ew("ComboboxFiltering",!0),i||ew("ComboboxLargeData",!0),d||ew("ComboboxProps",!0),u||ew("Demo",!0),h||ew("GetElementRef",!0),f||ew("InputAccessibility",!0),v||ew("InputFeatures",!0),x||ew("InputSections",!0),y||ew("StylesApiSelectors",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{component:"Select"}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"Select"})," allows capturing user input based on suggestions from the list.\nUnlike ",(0,n.jsx)(t.a,{href:"/core/autocomplete/",children:"Autocomplete"}),", ",(0,n.jsx)(t.code,{children:"Select"})," does not allow entering custom values."]}),"\n",(0,n.jsx)(u,{data:c}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"Select"})," value must be a string, other types are not supported.\n",(0,n.jsx)(t.code,{children:"onChange"})," function is called with a string value as a single argument."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Select } from '@mantine/core';\n\nfunction Demo() {\n const [value, setValue] = useState('');\n return ;\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"onchange-handler",children:"onChange handler"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"onChange"})," is called with two arguments:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"value"})," - string value of the selected option"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"option"})," – selected option object"]}),"\n"]}),"\n",(0,n.jsx)(t.p,{children:"If you prefer object format in state, use second argument of onChange handler:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { ComboboxItem, Select } from '@mantine/core';\n\nfunction Demo() {\n const [value, setValue] = useState(null);\n return (\n setValue(option)}\n />\n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"clearable",children:"Clearable"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"clearable"})," prop to display the clear button in the right section. The button is not displayed\nwhen:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"The component does not have a value"}),"\n",(0,n.jsx)(t.li,{children:"The component is disabled"}),"\n",(0,n.jsx)(t.li,{children:"The component is read only"}),"\n"]}),"\n",(0,n.jsx)(u,{data:s}),"\n",(0,n.jsx)(t.h2,{id:"allow-deselect",children:"Allow deselect"}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"allowDeselect"})," prop determines whether the value should be deselected when user clicks on the selected option.\nBy default, ",(0,n.jsx)(t.code,{children:"allowDeselect"})," is ",(0,n.jsx)(t.code,{children:"true"}),":"]}),"\n",(0,n.jsx)(u,{data:p}),"\n",(0,n.jsx)(t.h2,{id:"searchable",children:"Searchable"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"searchable"})," prop to allow filtering options by user input:"]}),"\n",(0,n.jsx)(u,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"controlled-search-value",children:"Controlled search value"}),"\n",(0,n.jsxs)(t.p,{children:["You can control search value with ",(0,n.jsx)(t.code,{children:"searchValue"})," and ",(0,n.jsx)(t.code,{children:"onSearchChange"})," props:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Select } from '@mantine/core';\n\nfunction Demo() {\n const [searchValue, setSearchValue] = useState('');\n return (\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"nothing-found",children:"Nothing found"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"nothingFoundMessage"})," prop to display given message when no options match search query.\nIf ",(0,n.jsx)(t.code,{children:"nothingFoundMessage"})," is not set, ",(0,n.jsx)(t.code,{children:"Select"})," dropdown will be hidden when no options match search query.\nThe message is not displayed when trimmed search query is empty."]}),"\n",(0,n.jsx)(u,{data:b}),"\n",(0,n.jsx)(t.h2,{id:"checked-option-icon",children:"Checked option icon"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"checkIconPosition"})," prop to ",(0,n.jsx)(t.code,{children:"left"})," or ",(0,n.jsx)(t.code,{children:"right"})," to control position of check icon in active option.\nTo remove the check icon, set ",(0,n.jsx)(t.code,{children:"withCheckIcon={false}"}),"."]}),"\n",(0,n.jsx)(u,{data:g}),"\n",(0,n.jsx)(o,{component:"Select"}),"\n",(0,n.jsx)(a,{component:"Select"}),"\n",(0,n.jsx)(u,{data:S}),"\n",(0,n.jsx)(t.h2,{id:"sort-options",children:"Sort options"}),"\n",(0,n.jsxs)(t.p,{children:["By default, options are sorted by their position in the data array. You can change this behavior\nwith ",(0,n.jsx)(t.code,{children:"filter"})," function:"]}),"\n",(0,n.jsx)(u,{data:P}),"\n",(0,n.jsx)(i,{component:"Select"}),"\n",(0,n.jsx)(u,{data:E}),"\n",(0,n.jsx)(t.h2,{id:"scrollable-dropdown",children:"Scrollable dropdown"}),"\n",(0,n.jsxs)(t.p,{children:["By default, the options list is wrapped with ",(0,n.jsx)(t.a,{href:"/core/scroll-area",children:"ScrollArea.Autosize"}),".\nYou can control dropdown max-height with ",(0,n.jsx)(t.code,{children:"maxDropdownHeight"})," prop if you do not change the default settings."]}),"\n",(0,n.jsxs)(t.p,{children:["If you want to use native scrollbars, set ",(0,n.jsx)(t.code,{children:"withScrollArea={false}"}),". Note that in this case,\nyou will need to change dropdown styles with ",(0,n.jsx)(t.a,{href:"/styles/styles-api",children:"Styles API"}),"."]}),"\n",(0,n.jsx)(u,{data:R}),"\n",(0,n.jsx)(t.h2,{id:"group-options",children:"Group options"}),"\n",(0,n.jsx)(u,{data:Y}),"\n",(0,n.jsx)(t.h2,{id:"disabled-options",children:"Disabled options"}),"\n",(0,n.jsx)(t.p,{children:"When option is disabled, it cannot be selected and is ignored in keyboard navigation."}),"\n",(0,n.jsx)(u,{data:W}),"\n",(0,n.jsx)(d,{component:"Select"}),"\n",(0,n.jsx)(t.h2,{id:"inside-popover",children:"Inside Popover"}),"\n",(0,n.jsxs)(t.p,{children:["To use ",(0,n.jsx)(t.code,{children:"Select"})," inside popover, you need to set ",(0,n.jsx)(t.code,{children:"withinPortal: false"}),":"]}),"\n",(0,n.jsx)(u,{data:T}),"\n",(0,n.jsx)(t.h2,{id:"control-dropdown-opened-state",children:"Control dropdown opened state"}),"\n",(0,n.jsxs)(t.p,{children:["You can control dropdown opened state with ",(0,n.jsx)(t.code,{children:"dropdownOpened"})," prop. Additionally,\nyou can use ",(0,n.jsx)(t.code,{children:"onDropdownClose"})," and ",(0,n.jsx)(t.code,{children:"onDropdownOpen"})," to listen to dropdown opened state changes."]}),"\n",(0,n.jsx)(u,{data:z}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-position",children:"Dropdown position"}),"\n",(0,n.jsxs)(t.p,{children:["By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input.\nYou can change this behavior by setting ",(0,n.jsx)(t.code,{children:"position"})," and ",(0,n.jsx)(t.code,{children:"middlewares"})," props, which are passed down to the\nunderlying ",(0,n.jsx)(t.a,{href:"/core/popover",children:"Popover"})," component."]}),"\n",(0,n.jsx)(t.p,{children:"Example of dropdown that is always displayed above the input:"}),"\n",(0,n.jsx)(u,{data:L}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-offset",children:"Dropdown offset"}),"\n",(0,n.jsxs)(t.p,{children:["To change dropdown offset, set ",(0,n.jsx)(t.code,{children:"offset"})," prop in ",(0,n.jsx)(t.code,{children:"comboboxProps"}),":"]}),"\n",(0,n.jsx)(u,{data:U}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-animation",children:"Dropdown animation"}),"\n",(0,n.jsxs)(t.p,{children:["By default, dropdown animations are disabled. To enable them, you can set ",(0,n.jsx)(t.code,{children:"transitionProps"}),",\nwhich will be passed down to the underlying ",(0,n.jsx)(t.a,{href:"/core/transition",children:"Transition"})," component."]}),"\n",(0,n.jsx)(u,{data:H}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-padding",children:"Dropdown padding"}),"\n",(0,n.jsx)(u,{data:X}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-shadow",children:"Dropdown shadow"}),"\n",(0,n.jsx)(u,{data:Q}),"\n",(0,n.jsx)(x,{component:"Select"}),"\n",(0,n.jsx)(u,{data:en}),"\n",(0,n.jsx)(t.h2,{id:"input-props",children:"Input props"}),"\n",(0,n.jsx)(v,{component:"Select",element:"input"}),"\n",(0,n.jsx)(u,{data:ea}),"\n",(0,n.jsx)(t.h2,{id:"read-only",children:"Read only"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"readOnly"})," to make the input read only. When ",(0,n.jsx)(t.code,{children:"readOnly"})," is set,\n",(0,n.jsx)(t.code,{children:"Select"})," will not show suggestions and will not call ",(0,n.jsx)(t.code,{children:"onChange"})," function."]}),"\n",(0,n.jsx)(u,{data:ec}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"disabled"})," to disable the input. When ",(0,n.jsx)(t.code,{children:"disabled"})," is set,\nuser cannot interact with the input and ",(0,n.jsx)(t.code,{children:"Select"})," will not show suggestions."]}),"\n",(0,n.jsx)(u,{data:es}),"\n",(0,n.jsx)(t.h2,{id:"error-state",children:"Error state"}),"\n",(0,n.jsx)(u,{data:ep}),"\n",(0,n.jsx)(y,{component:"Select"}),"\n",(0,n.jsx)(u,{data:eb}),"\n",(0,n.jsx)(h,{component:"Select",refType:"input"}),"\n",(0,n.jsx)(f,{component:"Select"}),"\n",(0,n.jsxs)(t.p,{children:["To set ",(0,n.jsx)(t.code,{children:"aria-label"})," on the clear button, use ",(0,n.jsx)(t.code,{children:"clearButtonProps"}),". Note that it is required\nonly when ",(0,n.jsx)(t.code,{children:"clearable"})," is set."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Select } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n );\n}\n"})})]})}function eS(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(ex,{...e,children:(0,n.jsx)(ey,{...e})})}function ew(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},77481:function(e,t,o){"use strict";o.d(t,{Mt:function(){return n},nW:function(){return r},pc:function(){return l}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],r=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],l=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},81097:function(e,t,o){"use strict";o.d(t,{r:function(){return u}});var n=o(27378),r=o(40624),l=o(38765),a=o(49849),i=o(45608),c=o(61777),d=o(62443);function s(e,t){return Array.isArray(e)?e.includes(t):e===t}function Option({data:e,withCheckIcon:t,value:o,checkIconPosition:a,unstyled:u}){if(!(0,c.f)(e)){let c=t&&s(o,e.value)&&n.createElement(l.n,{className:d.Z.optionsDropdownCheckIcon});return n.createElement(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[d.Z.optionsDropdownOption]:!u}),"data-reverse":"right"===a||void 0,"data-checked":s(o,e.value)||void 0,"aria-selected":s(o,e.value)},"left"===a&&c,n.createElement("span",null,e.label),"right"===a&&c)}let p=e.items.map(e=>n.createElement(Option,{data:e,value:o,key:e.value,unstyled:u,withCheckIcon:t,checkIconPosition:a}));return n.createElement(i.h.Group,{label:e.group},p)}function u({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:l,limit:d,maxDropdownHeight:s,withScrollArea:u=!0,filterOptions:p=!0,withCheckIcon:h=!1,value:m,checkIconPosition:f,nothingFoundMessage:b,unstyled:v,labelId:g}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,c.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let x="string"==typeof l,y=x?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),l=[];for(let a=0;a0)return!1;return!0}(y),w=y.map(e=>n.createElement(Option,{data:e,key:(0,c.f)(e)?e.group:e.value,withCheckIcon:h,value:m,checkIconPosition:f,unstyled:v}));return n.createElement(i.h.Dropdown,{hidden:t||o&&S},n.createElement(i.h.Options,{labelledBy:g},u?n.createElement(a.x.Autosize,{mah:s??220,type:"scroll",scrollbarSize:"var(--_combobox-padding)",offsetScrollbars:"y"},w):w,S&&b&&n.createElement(i.h.Empty,null,b)))}},61777:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},38099:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},2570:function(e,t,o){"use strict";o.d(t,{P:function(){return b}});var n=o(27378),r=o(31002),l=o(58675),a=o(5564),i=o(96739),c=o(20410),d=o(2161),s=o(38099),u=o(45608),p=o(81097),h=o(54526),m=o(23163);let f={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},b=(0,c.d)((e,t)=>{let o=(0,i.w)("Select",f,e),{classNames:c,styles:b,unstyled:v,vars:g,dropdownOpened:x,defaultDropdownOpened:y,onDropdownClose:S,onDropdownOpen:w,onFocus:j,onBlur:P,onClick:V,onChange:k,data:E,value:A,defaultValue:D,selectFirstOptionOnChange:R,onOptionSubmit:C,comboboxProps:Y,readOnly:O,disabled:W,filter:I,limit:F,withScrollArea:N,maxDropdownHeight:T,size:B,searchable:_,rightSection:z,checkIconPosition:M,withCheckIcon:L,nothingFoundMessage:Z,name:$,form:q,searchValue:U,defaultSearchValue:G,onSearchChange:H,allowDeselect:J,error:X,rightSectionPointerEvents:K,id:Q,clearable:ee,clearButtonProps:et,hiddenInputProps:eo,...en}=o,er=(0,n.useMemo)(()=>(0,d.R)(E),[E]),el=(0,n.useMemo)(()=>(0,s.g)(er),[er]),ea=(0,r.M)(Q),[ei,ec]=(0,l.C)({value:A,defaultValue:D,finalValue:null,onChange:k}),ed="string"==typeof ei?el[ei]:void 0,[es,eu]=(0,l.C)({value:U,defaultValue:G,finalValue:ed?ed.label:"",onChange:H}),ep=(0,h.K)({opened:x,defaultOpened:y,onDropdownOpen:w,onDropdownClose:()=>{S?.(),ep.resetSelectedOption()}}),{resolvedClassNames:eh,resolvedStyles:em}=(0,a.h)({props:o,styles:b,classNames:c});(0,n.useEffect)(()=>{R&&ep.selectFirstOption()},[R,ei]),(0,n.useEffect)(()=>{null===A&&eu(""),"string"==typeof A&&ed&&eu(ed.label)},[A,ed]);let ef=ee&&!!ei&&!W&&!O&&n.createElement(u.h.ClearButton,{size:B,...et,onClear:()=>{ec(null,null),eu("")}});return n.createElement(n.Fragment,null,n.createElement(u.h,{store:ep,__staticSelector:"Select",classNames:eh,styles:em,unstyled:v,readOnly:O,onOptionSubmit:e=>{C?.(e);let t=J&&el[e].value===ei?null:el[e],o=t?t.value:null;ec(o,t),eu("string"==typeof o&&t?.label||""),ep.closeDropdown()},size:B,...Y},n.createElement(u.h.Target,{targetType:_?"input":"button"},n.createElement(m.M,{id:ea,ref:t,rightSection:z||ef||n.createElement(u.h.Chevron,{size:B,error:X,unstyled:v}),rightSectionPointerEvents:K||(ef?"all":"none"),...en,size:B,__staticSelector:"Select",disabled:W,readOnly:O||!_,value:es,onChange:e=>{eu(e.currentTarget.value),ep.openDropdown(),R&&ep.selectFirstOption()},onFocus:e=>{_&&ep.openDropdown(),j?.(e)},onBlur:e=>{_&&ep.closeDropdown(),eu(null!=ei&&el[ei]?.label||""),P?.(e)},onClick:e=>{_?ep.openDropdown():ep.toggleDropdown(),V?.(e)},classNames:eh,styles:em,unstyled:v,pointer:!_,error:X})),n.createElement(p.r,{data:er,hidden:O||W,filter:I,search:es,limit:F,hiddenWhenEmpty:!_||!Z,withScrollArea:N,maxDropdownHeight:T,filterOptions:_&&ed?.label!==es,value:ei,checkIconPosition:M,withCheckIcon:L,nothingFoundMessage:Z,unstyled:v,labelId:`${ea}-label`})),n.createElement("input",{type:"hidden",name:$,value:ei||"",form:q,disabled:W,...eo}))});b.classes={...m.M.classes,...u.h.classes},b.displayName="@mantine/core/Select"},87921:function(e,t,o){"use strict";o.d(t,{q:function(){return r}});var n=o(27378);function r(e=!1,t){let{onOpen:o,onClose:r}=t||{},[l,a]=(0,n.useState)(e),i=(0,n.useCallback)(()=>{a(e=>e||(o?.(),!0))},[o]),c=(0,n.useCallback)(()=>{a(e=>e?(r?.(),!1):e)},[r]),d=(0,n.useCallback)(()=>{l?c():i()},[c,i,l]);return[l,{open:i,close:c,toggle:d}]}}},function(e){e.O(0,[30370,15819,2775,45608,49774,92888,40179],function(){return e(e.s=76623)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/stepper-bdb6df8b55e3dc83.js b/_next/static/chunks/pages/core/stepper-b3dd22ccb3f17fc3.js similarity index 85% rename from _next/static/chunks/pages/core/stepper-bdb6df8b55e3dc83.js rename to _next/static/chunks/pages/core/stepper-b3dd22ccb3f17fc3.js index 88b22a20a3e..0f34d676990 100644 --- a/_next/static/chunks/pages/core/stepper-bdb6df8b55e3dc83.js +++ b/_next/static/chunks/pages/core/stepper-b3dd22ccb3f17fc3.js @@ -388,4 +388,4 @@ function Demo() { ); } -`,$={type:"code",component:function(){let[e,t]=(0,c.useState)(1);return c.createElement(o.v,{classNames:Y,active:e,onStepClick:t},c.createElement(o.v.Step,{label:"Step 1",description:"Create an account"}),c.createElement(o.v.Step,{label:"Step 2",description:"Verify email"}),c.createElement(o.v.Step,{label:"Step 3",description:"Get full access"}))},code:[{fileName:"Demo.tsx",code:X,language:"tsx"},{fileName:"Demo.module.css",code:H,language:"scss"}]};var q=n(3916),J=n(54568);let K=(0,q.A)(J.us.Stepper);function Q(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,p.a)(),...e.components},{Demo:n,StylesApiSelectors:c}=t;return n||et("Demo",!0),c||et("StylesApiSelectors",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n,{data:S}),"\n",(0,r.jsx)(t.h2,{id:"allow-step-select",children:"Allow step select"}),"\n",(0,r.jsxs)(t.p,{children:["To disable step selection, set ",(0,r.jsx)(t.code,{children:"allowStepSelect"})," prop on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," component.\nIt can be used to prevent the user from reaching next steps while letting them go back and forth between steps they've already reached before:"]}),"\n",(0,r.jsx)(n,{data:u}),"\n",(0,r.jsx)(t.h2,{id:"disable-next-steps-selection",children:"Disable next steps selection"}),"\n",(0,r.jsxs)(t.p,{children:["Another way to disable selection of upcoming steps is to use the ",(0,r.jsx)(t.code,{children:"allowNextStepsSelect"})," directly on the ",(0,r.jsx)(t.code,{children:"Stepper"})," component.\nThis is useful when you don't need to control the behavior specifically for each step."]}),"\n",(0,r.jsx)(n,{data:v}),"\n",(0,r.jsx)(t.h2,{id:"color-radius-and-size",children:"Color, radius and size"}),"\n",(0,r.jsx)(n,{data:b}),"\n",(0,r.jsxs)(t.p,{children:["Component size is controlled by two props: ",(0,r.jsx)(t.code,{children:"size"})," and ",(0,r.jsx)(t.code,{children:"iconSize"}),".\n",(0,r.jsx)(t.code,{children:"size"})," prop controls icon size, label and description font size.\n",(0,r.jsx)(t.code,{children:"iconSize"})," allows to overwrite icon size separately from other size values:"]}),"\n",(0,r.jsx)(n,{data:g}),"\n",(0,r.jsx)(t.h2,{id:"with-custom-icons",children:"With custom icons"}),"\n",(0,r.jsxs)(t.p,{children:["You can replace the step icon by setting ",(0,r.jsx)(t.code,{children:"icon"})," prop on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," component.\nTo change completed check icon set ",(0,r.jsx)(t.code,{children:"completedIcon"})," on ",(0,r.jsx)(t.code,{children:"Stepper"})," component.\nYou can use any React node as an icon: component, string, number:"]}),"\n",(0,r.jsx)(n,{data:V}),"\n",(0,r.jsxs)(t.p,{children:["You can use ",(0,r.jsx)(t.code,{children:"Stepper"})," with icons only. Note that in this case, you will have to\nset ",(0,r.jsx)(t.code,{children:"aria-label"})," or ",(0,r.jsx)(t.code,{children:"title"})," on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," component to make it accessible:"]}),"\n",(0,r.jsx)(n,{data:A}),"\n",(0,r.jsx)(t.p,{children:"You can also change the completed icon for each step, for example, to indicate error state:"}),"\n",(0,r.jsx)(n,{data:N}),"\n",(0,r.jsx)(t.h2,{id:"vertical-orientation",children:"Vertical orientation"}),"\n",(0,r.jsx)(n,{data:M}),"\n",(0,r.jsx)(t.h2,{id:"icon-position",children:"Icon position"}),"\n",(0,r.jsxs)(t.p,{children:["To change step icon and body arrangement, set ",(0,r.jsx)(t.code,{children:'iconPosition="right"'}),":"]}),"\n",(0,r.jsx)(n,{data:W}),"\n",(0,r.jsx)(t.h2,{id:"loading-state",children:"Loading state"}),"\n",(0,r.jsxs)(t.p,{children:["To indicate loading state set ",(0,r.jsx)(t.code,{children:"loading"})," prop on Step component, ",(0,r.jsx)(t.code,{children:"Loader"})," will replace step icon.\nYou can configure the default loader in the ",(0,r.jsx)(t.a,{href:"/theming/theme-object/",children:"theme"}),"."]}),"\n",(0,r.jsx)(n,{data:_}),"\n",(0,r.jsx)(c,{component:"Stepper"}),"\n",(0,r.jsx)(n,{data:O}),"\n",(0,r.jsx)(t.p,{children:"Examples of styles customization with Styles API:"}),"\n",(0,r.jsx)(n,{data:U}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n,{data:$}),"\n",(0,r.jsx)(t.h2,{id:"get-step-ref",children:"Get step ref"}),"\n",(0,r.jsx)(t.p,{children:"You can get refs of step button and stepper root element (div):"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useRef } from 'react';\nimport { Stepper } from '@mantine/core';\n\nfunction MyStepper() {\n const firstStep = useRef(null);\n const stepper = useRef(null);\n\n return (\n \n \n \n \n );\n}\n"})}),"\n",(0,r.jsx)(t.h2,{id:"wrap-stepperstep",children:"Wrap Stepper.Step"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Stepper"})," component relies on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," order. Wrapping ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," is not supported,\nInstead you will need to use different approaches:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:'import { Stepper } from \'@mantine/core\';\n\n// This will not work, step children will not render\nfunction WillNotWork() {\n return (\n \n This part will not render\n \n );\n}\n\n// Create a separate component for children\nfunction WillWork() {\n return
This will work as expected!
;\n}\n\nfunction Demo() {\n return (\n \n First step\n {/* Wrapped Stepper.Step will not render children, do not do that */}\n \n \n \n \n Third step\n \n );\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:""})," components render button element, set ",(0,r.jsx)(t.code,{children:"aria-label"})," or ",(0,r.jsx)(t.code,{children:"title"})," props\nto make component visible for screen readers in case you do not specify ",(0,r.jsx)(t.code,{children:"label"})," or ",(0,r.jsx)(t.code,{children:"description"}),":"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:' // -> not ok, empty labels for screen reader\n // -> ok\n // -> ok\n // -> ok\n'})})]})}function ee(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(K,{...e,children:(0,r.jsx)(Q,{...e})})}function et(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},35292:function(e,t,n){"use strict";n.d(t,{v:function(){return V}});var r=n(27378),p=n(71078),c=n(92082),o=n(83453),a=n(89738),l=n(34121),i=n(96739),s=n(6231),d=n(56589),S=n(20410),m=n(71656);let[u,h]=(0,m.R)("Stepper component was not found in tree"),v=()=>null;v.displayName="@mantine/core/StepperCompleted";var f=n(2256),b=n(38765),y=n(42029),g=n(88101),C=n(19397),x={root:"m-cbb4ea7e",steps:"m-aaf89d0b",separator:"m-2a371ac9",content:"m-78da155d",step:"m-cbb57068","step--horizontal":"m-f56b1e2c","step--vertical":"m-833edb7e",verticalSeparator:"m-6496b3f3",stepWrapper:"m-818e70b",stepIcon:"m-1959ad01",stepCompletedIcon:"m-a79331dc",stepBody:"m-1956aa2a",stepLabel:"m-12051f6c",stepDescription:"m-164eea74"};let k=(e,t)=>"function"==typeof e?r.createElement(e,{step:t||0}):e,E={withIcon:!0,allowStepClick:!0,iconPosition:"left"},j=(0,S.d)((e,t)=>{let{classNames:n,className:p,style:c,styles:o,vars:l,step:s,state:d,color:S,icon:m,completedIcon:u,progressIcon:v,label:x,description:j,withIcon:w,iconSize:I,loading:V,allowStepClick:G,allowStepSelect:A,iconPosition:z,orientation:B,mod:N,...D}=(0,i.w)("StepperStep",E,e),M=h(),F=(0,f.rZ)(),W={classNames:n,styles:o},P="stepCompleted"===d?null:"stepProgress"===d?v:m,_={"data-progress":"stepProgress"===d||void 0,"data-completed":"stepCompleted"===d||void 0};return r.createElement(C.k,{...M.getStyles("step",{className:p,style:c,variant:M.orientation,...W}),mod:[{"icon-position":z||M.iconPosition,"allow-click":G},N],ref:t,..._,...D,__vars:{"--step-color":S?(0,a.p)(S,F):void 0},tabIndex:G?0:-1},w&&r.createElement("span",{...M.getStyles("stepWrapper",W)},r.createElement("span",{...M.getStyles("stepIcon",W),..._},r.createElement(g.u,{mounted:"stepCompleted"===d,transition:"pop",duration:200},e=>r.createElement("span",{...M.getStyles("stepCompletedIcon",{style:e,...W})},V?r.createElement(y.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...M.getStyles("stepLoader",W)}):k(u,s)||r.createElement(b.n,{size:"60%"}))),"stepCompleted"!==d?V?r.createElement(y.a,{...M.getStyles("stepLoader",W),size:"calc(var(--stepper-icon-size) / 2)",color:S}):k(P||m,s):null),"vertical"===B&&r.createElement("span",{...M.getStyles("verticalSeparator",W),"data-active":"stepCompleted"===d||void 0})),(x||j)&&r.createElement("span",{...M.getStyles("stepBody",W),"data-orientation":M.orientation,"data-icon-position":z||M.iconPosition},x&&r.createElement("span",{...M.getStyles("stepLabel",W)},k(x,s)),j&&r.createElement("span",{...M.getStyles("stepDescription",W)},k(j,s))))});j.classes=x,j.displayName="@mantine/core/StepperStep";let w={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},I=(0,o.Z)((e,{color:t,iconSize:n,size:r,contentPadding:o,radius:i,autoContrast:s})=>({root:{"--stepper-color":t?(0,a.p)(t,e):void 0,"--stepper-icon-color":s?(0,l.R)({color:t,theme:e}):void 0,"--stepper-icon-size":void 0===n?(0,c.ap)(r,"stepper-icon-size"):(0,p.h)(n),"--stepper-content-padding":(0,c.bG)(o),"--stepper-radius":void 0===i?void 0:(0,c.H5)(i),"--stepper-fz":(0,c.yv)(r),"--stepper-spacing":(0,c.bG)(r)}})),V=(0,S.d)((e,t)=>{let n=(0,i.w)("Stepper",w,e),{classNames:p,className:c,style:o,styles:a,unstyled:l,vars:S,children:m,onStepClick:h,active:f,icon:b,completedIcon:y,progressIcon:g,color:C,iconSize:k,contentPadding:E,orientation:j,iconPosition:V,size:G,radius:A,allowNextStepsSelect:z,wrap:B,...N}=n,D=(0,s.y)({name:"Stepper",classes:x,props:n,className:c,style:o,classNames:p,styles:a,unstyled:l,vars:S,varsResolver:I}),M=r.Children.toArray(m),F=M.filter(e=>e.type!==v),W=M.find(e=>e.type===v),P=F.reduce((e,t,n)=>{let p=f===n?"stepProgress":f>n?"stepCompleted":"stepInactive",c="function"==typeof h&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===p||z);return e.push((0,r.cloneElement)(t,{icon:t.props.icon||b||n+1,key:n,step:n,state:p,onClick:()=>c&&h?.(n),allowStepClick:c,completedIcon:t.props.completedIcon||y,progressIcon:t.props.progressIcon||g,color:t.props.color||C,iconSize:k,radius:A,iconPosition:t.props.iconPosition||V,orientation:j,unstyled:l})),"horizontal"===j&&n!==F.length-1&&e.push(r.createElement("div",{...D("separator"),"data-active":nF.length-1?T:_;return r.createElement(u,{value:{getStyles:D,orientation:j,iconPosition:V}},r.createElement(d.x,{...D("root"),ref:t,size:G,...N},r.createElement(d.x,{...D("steps"),mod:{orientation:j,"icon-position":V,wrap:B&&"vertical"!==j}},P),Z&&r.createElement("div",{...D("content")},Z)))});V.classes=x,V.displayName="@mantine/core/Stepper",V.Completed=v,V.Step=j}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=88265)}),_N_E=e.O()}]); \ No newline at end of file +`,$={type:"code",component:function(){let[e,t]=(0,c.useState)(1);return c.createElement(o.v,{classNames:Y,active:e,onStepClick:t},c.createElement(o.v.Step,{label:"Step 1",description:"Create an account"}),c.createElement(o.v.Step,{label:"Step 2",description:"Verify email"}),c.createElement(o.v.Step,{label:"Step 3",description:"Get full access"}))},code:[{fileName:"Demo.tsx",code:X,language:"tsx"},{fileName:"Demo.module.css",code:H,language:"scss"}]};var q=n(3916),J=n(54568);let K=(0,q.A)(J.us.Stepper);function Q(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,p.a)(),...e.components},{Demo:n,StylesApiSelectors:c}=t;return n||et("Demo",!0),c||et("StylesApiSelectors",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n,{data:S}),"\n",(0,r.jsx)(t.h2,{id:"allow-step-select",children:"Allow step select"}),"\n",(0,r.jsxs)(t.p,{children:["To disable step selection, set ",(0,r.jsx)(t.code,{children:"allowStepSelect"})," prop on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," component.\nIt can be used to prevent the user from reaching next steps while letting them go back and forth between steps they've already reached before:"]}),"\n",(0,r.jsx)(n,{data:u}),"\n",(0,r.jsx)(t.h2,{id:"disable-next-steps-selection",children:"Disable next steps selection"}),"\n",(0,r.jsxs)(t.p,{children:["Another way to disable selection of upcoming steps is to use the ",(0,r.jsx)(t.code,{children:"allowNextStepsSelect"})," directly on the ",(0,r.jsx)(t.code,{children:"Stepper"})," component.\nThis is useful when you don't need to control the behavior specifically for each step."]}),"\n",(0,r.jsx)(n,{data:v}),"\n",(0,r.jsx)(t.h2,{id:"color-radius-and-size",children:"Color, radius and size"}),"\n",(0,r.jsx)(n,{data:b}),"\n",(0,r.jsxs)(t.p,{children:["Component size is controlled by two props: ",(0,r.jsx)(t.code,{children:"size"})," and ",(0,r.jsx)(t.code,{children:"iconSize"}),".\n",(0,r.jsx)(t.code,{children:"size"})," prop controls icon size, label and description font size.\n",(0,r.jsx)(t.code,{children:"iconSize"})," allows to overwrite icon size separately from other size values:"]}),"\n",(0,r.jsx)(n,{data:g}),"\n",(0,r.jsx)(t.h2,{id:"with-custom-icons",children:"With custom icons"}),"\n",(0,r.jsxs)(t.p,{children:["You can replace the step icon by setting ",(0,r.jsx)(t.code,{children:"icon"})," prop on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," component.\nTo change completed check icon set ",(0,r.jsx)(t.code,{children:"completedIcon"})," on ",(0,r.jsx)(t.code,{children:"Stepper"})," component.\nYou can use any React node as an icon: component, string, number:"]}),"\n",(0,r.jsx)(n,{data:V}),"\n",(0,r.jsxs)(t.p,{children:["You can use ",(0,r.jsx)(t.code,{children:"Stepper"})," with icons only. Note that in this case, you will have to\nset ",(0,r.jsx)(t.code,{children:"aria-label"})," or ",(0,r.jsx)(t.code,{children:"title"})," on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," component to make it accessible:"]}),"\n",(0,r.jsx)(n,{data:A}),"\n",(0,r.jsx)(t.p,{children:"You can also change the completed icon for each step, for example, to indicate error state:"}),"\n",(0,r.jsx)(n,{data:N}),"\n",(0,r.jsx)(t.h2,{id:"vertical-orientation",children:"Vertical orientation"}),"\n",(0,r.jsx)(n,{data:M}),"\n",(0,r.jsx)(t.h2,{id:"icon-position",children:"Icon position"}),"\n",(0,r.jsxs)(t.p,{children:["To change step icon and body arrangement, set ",(0,r.jsx)(t.code,{children:'iconPosition="right"'}),":"]}),"\n",(0,r.jsx)(n,{data:W}),"\n",(0,r.jsx)(t.h2,{id:"loading-state",children:"Loading state"}),"\n",(0,r.jsxs)(t.p,{children:["To indicate loading state set ",(0,r.jsx)(t.code,{children:"loading"})," prop on Step component, ",(0,r.jsx)(t.code,{children:"Loader"})," will replace step icon.\nYou can configure the default loader in the ",(0,r.jsx)(t.a,{href:"/theming/theme-object/",children:"theme"}),"."]}),"\n",(0,r.jsx)(n,{data:_}),"\n",(0,r.jsx)(c,{component:"Stepper"}),"\n",(0,r.jsx)(n,{data:O}),"\n",(0,r.jsx)(t.p,{children:"Examples of styles customization with Styles API:"}),"\n",(0,r.jsx)(n,{data:U}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(n,{data:$}),"\n",(0,r.jsx)(t.h2,{id:"get-step-ref",children:"Get step ref"}),"\n",(0,r.jsx)(t.p,{children:"You can get refs of step button and stepper root element (div):"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { useRef } from 'react';\nimport { Stepper } from '@mantine/core';\n\nfunction MyStepper() {\n const firstStep = useRef(null);\n const stepper = useRef(null);\n\n return (\n \n \n \n \n );\n}\n"})}),"\n",(0,r.jsx)(t.h2,{id:"wrap-stepperstep",children:"Wrap Stepper.Step"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"Stepper"})," component relies on ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," order. Wrapping ",(0,r.jsx)(t.code,{children:"Stepper.Step"})," is not supported,\nInstead you will need to use different approaches:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:'import { Stepper } from \'@mantine/core\';\n\n// This will not work, step children will not render\nfunction WillNotWork() {\n return (\n \n This part will not render\n \n );\n}\n\n// Create a separate component for children\nfunction WillWork() {\n return
This will work as expected!
;\n}\n\nfunction Demo() {\n return (\n \n First step\n {/* Wrapped Stepper.Step will not render children, do not do that */}\n \n \n \n \n Third step\n \n );\n}\n'})}),"\n",(0,r.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:""})," components render button element, set ",(0,r.jsx)(t.code,{children:"aria-label"})," or ",(0,r.jsx)(t.code,{children:"title"})," props\nto make component visible for screen readers in case you do not specify ",(0,r.jsx)(t.code,{children:"label"})," or ",(0,r.jsx)(t.code,{children:"description"}),":"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:' // -> not ok, empty labels for screen reader\n // -> ok\n // -> ok\n // -> ok\n'})})]})}function ee(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(K,{...e,children:(0,r.jsx)(Q,{...e})})}function et(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},35292:function(e,t,n){"use strict";n.d(t,{v:function(){return G}});var r=n(27378),p=n(71078),c=n(92082),o=n(83453),a=n(89738),l=n(34121),i=n(55357),s=n(96739),d=n(6231),S=n(56589),m=n(20410),u=n(71656);let[h,v]=(0,u.R)("Stepper component was not found in tree"),f=()=>null;f.displayName="@mantine/core/StepperCompleted";var b=n(2256),y=n(38765),g=n(42029),C=n(88101),x=n(19397),k={root:"m-cbb4ea7e",steps:"m-aaf89d0b",separator:"m-2a371ac9",content:"m-78da155d",step:"m-cbb57068","step--horizontal":"m-f56b1e2c","step--vertical":"m-833edb7e",verticalSeparator:"m-6496b3f3",stepWrapper:"m-818e70b",stepIcon:"m-1959ad01",stepCompletedIcon:"m-a79331dc",stepBody:"m-1956aa2a",stepLabel:"m-12051f6c",stepDescription:"m-164eea74"};let E=(e,t)=>"function"==typeof e?r.createElement(e,{step:t||0}):e,j={withIcon:!0,allowStepClick:!0,iconPosition:"left"},w=(0,m.d)((e,t)=>{let{classNames:n,className:p,style:c,styles:o,vars:l,step:i,state:d,color:S,icon:m,completedIcon:u,progressIcon:h,label:f,description:k,withIcon:w,iconSize:I,loading:V,allowStepClick:G,allowStepSelect:A,iconPosition:z,orientation:B,mod:N,...D}=(0,s.w)("StepperStep",j,e),M=v(),F=(0,b.rZ)(),W={classNames:n,styles:o},P="stepCompleted"===d?null:"stepProgress"===d?h:m,_={"data-progress":"stepProgress"===d||void 0,"data-completed":"stepCompleted"===d||void 0};return r.createElement(x.k,{...M.getStyles("step",{className:p,style:c,variant:M.orientation,...W}),mod:[{"icon-position":z||M.iconPosition,"allow-click":G},N],ref:t,..._,...D,__vars:{"--step-color":S?(0,a.p)(S,F):void 0},tabIndex:G?0:-1},w&&r.createElement("span",{...M.getStyles("stepWrapper",W)},r.createElement("span",{...M.getStyles("stepIcon",W),..._},r.createElement(C.u,{mounted:"stepCompleted"===d,transition:"pop",duration:200},e=>r.createElement("span",{...M.getStyles("stepCompletedIcon",{style:e,...W})},V?r.createElement(g.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...M.getStyles("stepLoader",W)}):E(u,i)||r.createElement(y.n,{size:"60%"}))),"stepCompleted"!==d?V?r.createElement(g.a,{...M.getStyles("stepLoader",W),size:"calc(var(--stepper-icon-size) / 2)",color:S}):E(P||m,i):null),"vertical"===B&&r.createElement("span",{...M.getStyles("verticalSeparator",W),"data-active":"stepCompleted"===d||void 0})),(f||k)&&r.createElement("span",{...M.getStyles("stepBody",W),"data-orientation":M.orientation,"data-icon-position":z||M.iconPosition},f&&r.createElement("span",{...M.getStyles("stepLabel",W)},E(f,i)),k&&r.createElement("span",{...M.getStyles("stepDescription",W)},E(k,i))))});w.classes=k,w.displayName="@mantine/core/StepperStep";let I={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},V=(0,o.Z)((e,{color:t,iconSize:n,size:r,contentPadding:o,radius:s,autoContrast:d})=>({root:{"--stepper-color":t?(0,a.p)(t,e):void 0,"--stepper-icon-color":(0,i.o)(d,e)?(0,l.R)({color:t,theme:e}):void 0,"--stepper-icon-size":void 0===n?(0,c.ap)(r,"stepper-icon-size"):(0,p.h)(n),"--stepper-content-padding":(0,c.bG)(o),"--stepper-radius":void 0===s?void 0:(0,c.H5)(s),"--stepper-fz":(0,c.yv)(r),"--stepper-spacing":(0,c.bG)(r)}})),G=(0,m.d)((e,t)=>{let n=(0,s.w)("Stepper",I,e),{classNames:p,className:c,style:o,styles:a,unstyled:l,vars:i,children:m,onStepClick:u,active:v,icon:b,completedIcon:y,progressIcon:g,color:C,iconSize:x,contentPadding:E,orientation:j,iconPosition:w,size:G,radius:A,allowNextStepsSelect:z,wrap:B,...N}=n,D=(0,d.y)({name:"Stepper",classes:k,props:n,className:c,style:o,classNames:p,styles:a,unstyled:l,vars:i,varsResolver:V}),M=r.Children.toArray(m),F=M.filter(e=>e.type!==f),W=M.find(e=>e.type===f),P=F.reduce((e,t,n)=>{let p=v===n?"stepProgress":v>n?"stepCompleted":"stepInactive",c="function"==typeof u&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===p||z);return e.push((0,r.cloneElement)(t,{icon:t.props.icon||b||n+1,key:n,step:n,state:p,onClick:()=>c&&u?.(n),allowStepClick:c,completedIcon:t.props.completedIcon||y,progressIcon:t.props.progressIcon||g,color:t.props.color||C,iconSize:x,radius:A,iconPosition:t.props.iconPosition||w,orientation:j,unstyled:l})),"horizontal"===j&&n!==F.length-1&&e.push(r.createElement("div",{...D("separator"),"data-active":nF.length-1?T:_;return r.createElement(h,{value:{getStyles:D,orientation:j,iconPosition:w}},r.createElement(S.x,{...D("root"),ref:t,size:G,...N},r.createElement(S.x,{...D("steps"),mod:{orientation:j,"icon-position":w,wrap:B&&"vertical"!==j}},P),Z&&r.createElement("div",{...D("content")},Z)))});G.classes=k,G.displayName="@mantine/core/Stepper",G.Completed=f,G.Step=w}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=88265)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/timeline-bab157784a44c8a0.js b/_next/static/chunks/pages/core/timeline-699fbbe3d2186135.js similarity index 87% rename from _next/static/chunks/pages/core/timeline-bab157784a44c8a0.js rename to _next/static/chunks/pages/core/timeline-699fbbe3d2186135.js index 2512e356807..db111b4a0d2 100644 --- a/_next/static/chunks/pages/core/timeline-bab157784a44c8a0.js +++ b/_next/static/chunks/pages/core/timeline-699fbbe3d2186135.js @@ -88,4 +88,4 @@ function Demo() { ); } -`,o={type:"configurator",component:function(e){return n.createElement(l.x,{maw:320,mx:"auto"},n.createElement(r.i,{noIcon:!0,...e}))},code:a,controls:[{prop:"color",type:"color",initialValue:"blue",libraryValue:"blue"},{prop:"radius",type:"size",initialValue:"xl",libraryValue:"xl"},{prop:"active",type:"number",initialValue:1,libraryValue:null,min:-1,max:3},{prop:"reverseActive",type:"boolean",initialValue:!1,libraryValue:!1},{prop:"lineWidth",type:"number",initialValue:4,libraryValue:4,min:1,max:6},{prop:"bulletSize",type:"number",initialValue:25,libraryValue:20,min:18,max:40,step:1},{prop:"align",type:"segmented",data:[{label:"Left",value:"left"},{label:"Right",value:"right"}],initialValue:"left",libraryValue:"left"}]}},33892:function(e,t,i){"use strict";i.d(t,{i:function(){return c}});var n=i(27378),l=i(60069),r=i(40421),a=i(25026),o=i(6199),m=i(92143),s=i(26569);function c({noIcon:e,...t}){let i=!e;return n.createElement(m.T,{active:1,bulletSize:24,lineWidth:2,...t},n.createElement(m.T.Item,{bullet:i?n.createElement(l.Z,{size:"0.8rem"}):null,title:"New branch"},n.createElement(s.x,{c:"dimmed",size:"sm"},"You've created new branch"," ",n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"fix-notifications")," ","from master"),n.createElement(s.x,{size:"xs",mt:4},"2 hours ago")),n.createElement(m.T.Item,{bullet:i?n.createElement(r.Z,{size:"0.8rem"}):null,title:"Commits"},n.createElement(s.x,{c:"dimmed",size:"sm"},"You've pushed 23 commits to"," ",n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"fix-notifications")," ","branch"),n.createElement(s.x,{size:"xs",mt:4},"52 minutes ago")),n.createElement(m.T.Item,{title:"Pull request",bullet:i?n.createElement(a.Z,{size:"0.8rem"}):null,lineVariant:"dashed"},n.createElement(s.x,{c:"dimmed",size:"sm"},"You've submitted a pull request"," ",n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"Fix incorrect notification message (#187)")," "),n.createElement(s.x,{size:"xs",mt:4},"34 minutes ago")),n.createElement(m.T.Item,{title:"Code review",bullet:i?n.createElement(o.Z,{size:"0.8rem"}):null},n.createElement(s.x,{c:"dimmed",size:"sm"},n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"Robert Gluesticker")," ","left a code review on your pull request"),n.createElement(s.x,{size:"xs",mt:4},"12 minutes ago")))}},30770:function(e,t,i){"use strict";i.d(t,{q:function(){return b}});var n=i(27378),l=i(92082),r=i(83453),a=i(96739),o=i(6231),m=i(56589),s=i(50332),c=i(20410);let u=(0,n.createContext)(null),d=u.Provider;var p={group:"m-11def92b",root:"m-f85678b6",image:"m-11f8ac07",placeholder:"m-104cd71f"};let h={},v=(0,r.Z)((e,{spacing:t})=>({group:{"--ag-spacing":(0,l.bG)(t)}})),x=(0,c.d)((e,t)=>{let i=(0,a.w)("AvatarGroup",h,e),{classNames:l,className:r,style:s,styles:c,unstyled:u,vars:x,spacing:T,...f}=i,g=(0,o.y)({name:"AvatarGroup",classes:p,props:i,className:r,style:s,classNames:l,styles:c,unstyled:u,vars:x,varsResolver:v,rootSelector:"group"});return n.createElement(d,{value:!0},n.createElement(m.x,{ref:t,...g("group"),...f}))});function T(e){return n.createElement("svg",{...e,"data-avatar-placeholder-icon":!0,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}x.classes=p,x.displayName="@mantine/core/AvatarGroup";let f={},g=(0,r.Z)((e,{size:t,radius:i,variant:n,gradient:r,color:a,autoContrast:o})=>{let m=e.variantColorResolver({color:a||"gray",theme:e,gradient:r,variant:n||"light",autoContrast:o});return{root:{"--avatar-size":(0,l.ap)(t,"avatar-size"),"--avatar-radius":void 0===i?void 0:(0,l.H5)(i),"--avatar-bg":a||n?m.background:void 0,"--avatar-color":a||n?m.color:void 0,"--avatar-bd":a||n?m.border:void 0}}}),b=(0,s.b)((e,t)=>{let i=(0,a.w)("Avatar",f,e),{classNames:l,className:r,style:s,styles:c,unstyled:d,vars:h,src:v,alt:x,radius:b,color:I,gradient:y,imageProps:E,children:z,autoContrast:w,mod:k,...C}=i,j=function(){let e=(0,n.useContext)(u);return{withinGroup:!!e}}(),[M,Z]=(0,n.useState)(!v),_=(0,o.y)({name:"Avatar",props:i,classes:p,className:r,style:s,classNames:l,styles:c,unstyled:d,vars:h,varsResolver:g});return(0,n.useEffect)(()=>Z(!v),[v]),n.createElement(m.x,{..._("root"),mod:[{"within-group":j.withinGroup},k],ref:t,...C},M?n.createElement("span",{..._("placeholder"),title:x},z||n.createElement(T,null)):n.createElement("img",{...E,..._("image"),src:v,alt:x,onError:e=>{Z(!0),E?.onError?.(e)}}))});b.classes=p,b.displayName="@mantine/core/Avatar",b.Group=x},81036:function(e,t,i){"use strict";i.d(t,{k:function(){return p}});var n=i(27378),l=i(92082),r=i(83453),a=i(96739),o=i(6231),m=i(56589),s=i(20410),c={root:"m-7341320d"};let u={},d=(0,r.Z)((e,{size:t,radius:i,variant:n,gradient:r,color:a,autoContrast:o})=>{let m=e.variantColorResolver({color:a||e.primaryColor,theme:e,gradient:r,variant:n||"filled",autoContrast:o});return{root:{"--ti-size":(0,l.ap)(t,"ti-size"),"--ti-radius":void 0===i?void 0:(0,l.H5)(i),"--ti-bg":a||n?m.background:void 0,"--ti-color":a||n?m.color:void 0,"--ti-bd":a||n?m.border:void 0}}}),p=(0,s.d)((e,t)=>{let i=(0,a.w)("ThemeIcon",u,e),{classNames:l,className:r,style:s,styles:p,unstyled:h,vars:v,autoContrast:x,...T}=i,f=(0,o.y)({name:"ThemeIcon",classes:c,props:i,className:r,style:s,classNames:l,styles:p,unstyled:h,vars:v,varsResolver:d});return n.createElement(m.x,{ref:t,...f("root"),...T})});p.classes=c,p.displayName="@mantine/core/ThemeIcon"},92143:function(e,t,i){"use strict";i.d(t,{T:function(){return y}});var n=i(27378),l=i(71078),r=i(92082),a=i(83453),o=i(89738),m=i(34121),s=i(96739),c=i(6231),u=i(56589),d=i(20410),p=i(71656);let[h,v]=(0,p.R)("Timeline component was not found in tree");var x=i(2256),T={root:"m-43657ece",itemTitle:"m-2ebe8099",item:"m-436178ff",itemBullet:"m-8affcee1",itemBody:"m-540e8f41"};let f={},g=(0,d.d)((e,t)=>{let i=(0,s.w)("TimelineItem",f,e),{classNames:l,className:a,style:m,styles:c,vars:d,__active:p,__align:h,__lineActive:T,__vars:g,bullet:b,radius:I,color:y,lineVariant:E,children:z,title:w,mod:k,...C}=i,j=v(),M=(0,x.rZ)(),Z={classNames:l,styles:c};return n.createElement(u.x,{...j.getStyles("item",{...Z,className:a,style:m}),mod:[{"line-active":T,active:p},k],ref:t,__vars:{"--tli-radius":I?(0,r.H5)(I):void 0,"--tli-color":y?(0,o.p)(y,M):void 0,"--tli-border-style":E||void 0},...C},n.createElement(u.x,{...j.getStyles("itemBullet",Z),mod:{"with-child":!!b,align:h,active:p}},b),n.createElement("div",{...j.getStyles("itemBody",Z)},w&&n.createElement("div",{...j.getStyles("itemTitle",Z)},w),n.createElement("div",{...j.getStyles("itemContent",Z)},z)))});g.classes=T,g.displayName="@mantine/core/TimelineItem";let b={active:-1,align:"left",reverseActive:!1},I=(0,a.Z)((e,{bulletSize:t,lineWidth:i,radius:n,color:a,autoContrast:s})=>({root:{"--tl-bullet-size":(0,l.h)(t),"--tl-line-width":(0,l.h)(i),"--tl-radius":void 0===n?void 0:(0,r.H5)(n),"--tl-color":a?(0,o.p)(a,e):void 0,"--tl-icon-color":s?(0,m.R)({color:a,theme:e}):void 0}})),y=(0,d.d)((e,t)=>{let i=(0,s.w)("Timeline",b,e),{classNames:l,className:r,style:a,styles:o,unstyled:m,vars:d,children:p,active:v,color:x,radius:f,bulletSize:g,align:y,lineWidth:E,reverseActive:z,mod:w,...k}=i,C=(0,c.y)({name:"Timeline",classes:T,props:i,className:r,style:a,classNames:l,styles:o,unstyled:m,vars:d,varsResolver:I}),j=n.Children.toArray(p),M=j.map((e,t)=>(0,n.cloneElement)(e,{unstyled:m,__align:y,__active:e.props?.active||(z?v>=j.length-t-1:v>=t),__lineActive:e.props?.lineActive||(z?v>=j.length-t-1:v-1>=t)}));return n.createElement(h,{value:{getStyles:C}},n.createElement(u.x,{...C("root"),mod:[{align:y},w],ref:t,...k},M))});y.classes=T,y.displayName="@mantine/core/Timeline",y.Item=g}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=83944)}),_N_E=e.O()}]); \ No newline at end of file +`,o={type:"configurator",component:function(e){return n.createElement(l.x,{maw:320,mx:"auto"},n.createElement(r.i,{noIcon:!0,...e}))},code:a,controls:[{prop:"color",type:"color",initialValue:"blue",libraryValue:"blue"},{prop:"radius",type:"size",initialValue:"xl",libraryValue:"xl"},{prop:"active",type:"number",initialValue:1,libraryValue:null,min:-1,max:3},{prop:"reverseActive",type:"boolean",initialValue:!1,libraryValue:!1},{prop:"lineWidth",type:"number",initialValue:4,libraryValue:4,min:1,max:6},{prop:"bulletSize",type:"number",initialValue:25,libraryValue:20,min:18,max:40,step:1},{prop:"align",type:"segmented",data:[{label:"Left",value:"left"},{label:"Right",value:"right"}],initialValue:"left",libraryValue:"left"}]}},33892:function(e,t,i){"use strict";i.d(t,{i:function(){return c}});var n=i(27378),l=i(60069),r=i(40421),a=i(25026),o=i(6199),m=i(92143),s=i(26569);function c({noIcon:e,...t}){let i=!e;return n.createElement(m.T,{active:1,bulletSize:24,lineWidth:2,...t},n.createElement(m.T.Item,{bullet:i?n.createElement(l.Z,{size:"0.8rem"}):null,title:"New branch"},n.createElement(s.x,{c:"dimmed",size:"sm"},"You've created new branch"," ",n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"fix-notifications")," ","from master"),n.createElement(s.x,{size:"xs",mt:4},"2 hours ago")),n.createElement(m.T.Item,{bullet:i?n.createElement(r.Z,{size:"0.8rem"}):null,title:"Commits"},n.createElement(s.x,{c:"dimmed",size:"sm"},"You've pushed 23 commits to"," ",n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"fix-notifications")," ","branch"),n.createElement(s.x,{size:"xs",mt:4},"52 minutes ago")),n.createElement(m.T.Item,{title:"Pull request",bullet:i?n.createElement(a.Z,{size:"0.8rem"}):null,lineVariant:"dashed"},n.createElement(s.x,{c:"dimmed",size:"sm"},"You've submitted a pull request"," ",n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"Fix incorrect notification message (#187)")," "),n.createElement(s.x,{size:"xs",mt:4},"34 minutes ago")),n.createElement(m.T.Item,{title:"Code review",bullet:i?n.createElement(o.Z,{size:"0.8rem"}):null},n.createElement(s.x,{c:"dimmed",size:"sm"},n.createElement(s.x,{variant:"link",component:"span",inherit:!0},"Robert Gluesticker")," ","left a code review on your pull request"),n.createElement(s.x,{size:"xs",mt:4},"12 minutes ago")))}},30770:function(e,t,i){"use strict";i.d(t,{q:function(){return b}});var n=i(27378),l=i(92082),r=i(83453),a=i(96739),o=i(6231),m=i(56589),s=i(50332),c=i(20410);let u=(0,n.createContext)(null),d=u.Provider;var p={group:"m-11def92b",root:"m-f85678b6",image:"m-11f8ac07",placeholder:"m-104cd71f"};let h={},v=(0,r.Z)((e,{spacing:t})=>({group:{"--ag-spacing":(0,l.bG)(t)}})),x=(0,c.d)((e,t)=>{let i=(0,a.w)("AvatarGroup",h,e),{classNames:l,className:r,style:s,styles:c,unstyled:u,vars:x,spacing:T,...f}=i,g=(0,o.y)({name:"AvatarGroup",classes:p,props:i,className:r,style:s,classNames:l,styles:c,unstyled:u,vars:x,varsResolver:v,rootSelector:"group"});return n.createElement(d,{value:!0},n.createElement(m.x,{ref:t,...g("group"),...f}))});function T(e){return n.createElement("svg",{...e,"data-avatar-placeholder-icon":!0,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n.createElement("path",{d:"M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))}x.classes=p,x.displayName="@mantine/core/AvatarGroup";let f={},g=(0,r.Z)((e,{size:t,radius:i,variant:n,gradient:r,color:a,autoContrast:o})=>{let m=e.variantColorResolver({color:a||"gray",theme:e,gradient:r,variant:n||"light",autoContrast:o});return{root:{"--avatar-size":(0,l.ap)(t,"avatar-size"),"--avatar-radius":void 0===i?void 0:(0,l.H5)(i),"--avatar-bg":a||n?m.background:void 0,"--avatar-color":a||n?m.color:void 0,"--avatar-bd":a||n?m.border:void 0}}}),b=(0,s.b)((e,t)=>{let i=(0,a.w)("Avatar",f,e),{classNames:l,className:r,style:s,styles:c,unstyled:d,vars:h,src:v,alt:x,radius:b,color:I,gradient:y,imageProps:E,children:z,autoContrast:w,mod:k,...C}=i,j=function(){let e=(0,n.useContext)(u);return{withinGroup:!!e}}(),[M,Z]=(0,n.useState)(!v),_=(0,o.y)({name:"Avatar",props:i,classes:p,className:r,style:s,classNames:l,styles:c,unstyled:d,vars:h,varsResolver:g});return(0,n.useEffect)(()=>Z(!v),[v]),n.createElement(m.x,{..._("root"),mod:[{"within-group":j.withinGroup},k],ref:t,...C},M?n.createElement("span",{..._("placeholder"),title:x},z||n.createElement(T,null)):n.createElement("img",{...E,..._("image"),src:v,alt:x,onError:e=>{Z(!0),E?.onError?.(e)}}))});b.classes=p,b.displayName="@mantine/core/Avatar",b.Group=x},81036:function(e,t,i){"use strict";i.d(t,{k:function(){return p}});var n=i(27378),l=i(92082),r=i(83453),a=i(96739),o=i(6231),m=i(56589),s=i(20410),c={root:"m-7341320d"};let u={},d=(0,r.Z)((e,{size:t,radius:i,variant:n,gradient:r,color:a,autoContrast:o})=>{let m=e.variantColorResolver({color:a||e.primaryColor,theme:e,gradient:r,variant:n||"filled",autoContrast:o});return{root:{"--ti-size":(0,l.ap)(t,"ti-size"),"--ti-radius":void 0===i?void 0:(0,l.H5)(i),"--ti-bg":a||n?m.background:void 0,"--ti-color":a||n?m.color:void 0,"--ti-bd":a||n?m.border:void 0}}}),p=(0,s.d)((e,t)=>{let i=(0,a.w)("ThemeIcon",u,e),{classNames:l,className:r,style:s,styles:p,unstyled:h,vars:v,autoContrast:x,...T}=i,f=(0,o.y)({name:"ThemeIcon",classes:c,props:i,className:r,style:s,classNames:l,styles:p,unstyled:h,vars:v,varsResolver:d});return n.createElement(m.x,{ref:t,...f("root"),...T})});p.classes=c,p.displayName="@mantine/core/ThemeIcon"},92143:function(e,t,i){"use strict";i.d(t,{T:function(){return E}});var n=i(27378),l=i(71078),r=i(92082),a=i(83453),o=i(89738),m=i(34121),s=i(55357),c=i(96739),u=i(6231),d=i(56589),p=i(20410),h=i(71656);let[v,x]=(0,h.R)("Timeline component was not found in tree");var T=i(2256),f={root:"m-43657ece",itemTitle:"m-2ebe8099",item:"m-436178ff",itemBullet:"m-8affcee1",itemBody:"m-540e8f41"};let g={},b=(0,p.d)((e,t)=>{let i=(0,c.w)("TimelineItem",g,e),{classNames:l,className:a,style:m,styles:s,vars:u,__active:p,__align:h,__lineActive:v,__vars:f,bullet:b,radius:I,color:y,lineVariant:E,children:z,title:w,mod:k,...C}=i,j=x(),M=(0,T.rZ)(),Z={classNames:l,styles:s};return n.createElement(d.x,{...j.getStyles("item",{...Z,className:a,style:m}),mod:[{"line-active":v,active:p},k],ref:t,__vars:{"--tli-radius":I?(0,r.H5)(I):void 0,"--tli-color":y?(0,o.p)(y,M):void 0,"--tli-border-style":E||void 0},...C},n.createElement(d.x,{...j.getStyles("itemBullet",Z),mod:{"with-child":!!b,align:h,active:p}},b),n.createElement("div",{...j.getStyles("itemBody",Z)},w&&n.createElement("div",{...j.getStyles("itemTitle",Z)},w),n.createElement("div",{...j.getStyles("itemContent",Z)},z)))});b.classes=f,b.displayName="@mantine/core/TimelineItem";let I={active:-1,align:"left",reverseActive:!1},y=(0,a.Z)((e,{bulletSize:t,lineWidth:i,radius:n,color:a,autoContrast:c})=>({root:{"--tl-bullet-size":(0,l.h)(t),"--tl-line-width":(0,l.h)(i),"--tl-radius":void 0===n?void 0:(0,r.H5)(n),"--tl-color":a?(0,o.p)(a,e):void 0,"--tl-icon-color":(0,s.o)(c,e)?(0,m.R)({color:a,theme:e}):void 0}})),E=(0,p.d)((e,t)=>{let i=(0,c.w)("Timeline",I,e),{classNames:l,className:r,style:a,styles:o,unstyled:m,vars:s,children:p,active:h,color:x,radius:T,bulletSize:g,align:b,lineWidth:E,reverseActive:z,mod:w,...k}=i,C=(0,u.y)({name:"Timeline",classes:f,props:i,className:r,style:a,classNames:l,styles:o,unstyled:m,vars:s,varsResolver:y}),j=n.Children.toArray(p),M=j.map((e,t)=>(0,n.cloneElement)(e,{unstyled:m,__align:b,__active:e.props?.active||(z?h>=j.length-t-1:h>=t),__lineActive:e.props?.lineActive||(z?h>=j.length-t-1:h-1>=t)}));return n.createElement(v,{value:{getStyles:C}},n.createElement(d.x,{...C("root"),mod:[{align:b},w],ref:t,...k},M))});E.classes=f,E.displayName="@mantine/core/Timeline",E.Item=b}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=83944)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/dates/calendar-221312b8cbfd6c29.js b/_next/static/chunks/pages/dates/calendar-c0f3e4645e0bb402.js similarity index 89% rename from _next/static/chunks/pages/dates/calendar-221312b8cbfd6c29.js rename to _next/static/chunks/pages/dates/calendar-c0f3e4645e0bb402.js index a6c9125cd80..2791dcc9574 100644 --- a/_next/static/chunks/pages/dates/calendar-221312b8cbfd6c29.js +++ b/_next/static/chunks/pages/dates/calendar-c0f3e4645e0bb402.js @@ -98,4 +98,4 @@ function Demo() { /> ); } -`,v={type:"code",centered:!0,component:function(){return i.createElement(s.f,{static:!0,renderDay:t=>{let e=t.getDate();return i.createElement(p.z,{size:6,color:"red",offset:-2,disabled:16!==e},i.createElement("div",null,e))}})},code:g};var y=n(3916),D=n(54568);let S=(0,y.A)(D.us.Calendar);function M(t){let e={a:"a",code:"code",h2:"h2",p:"p",...(0,a.a)(),...t.components},{Demo:n}=e;return n||function(t,e){throw Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"Calendar"})," component to create custom date pickers if ",(0,r.jsx)(e.a,{href:"/dates/date-picker/",children:"DatePicker"}),"\ncomponent does not meet your requirements. ",(0,r.jsx)(e.code,{children:"Calendar"})," supports all ",(0,r.jsx)(e.a,{href:"/dates/date-picker/",children:"DatePicker"}),"\nprops and some other props that are listed in props table – check it out to learn about all component features."]}),"\n",(0,r.jsxs)(e.p,{children:["By default, ",(0,r.jsx)(e.code,{children:"Calendar"})," works the same way as ",(0,r.jsx)(e.a,{href:"/dates/date-picker/",children:"DatePicker"})," component but does not\ninclude any logic of dates selection:"]}),"\n",(0,r.jsx)(n,{data:u}),"\n",(0,r.jsx)(e.h2,{id:"custom-date-pickers",children:"Custom date pickers"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"Calendar"})," as a base for custom date pickers. For example, you can create a date picker\nthat allows user to pick three or less dates:"]}),"\n",(0,r.jsx)(n,{data:l}),"\n",(0,r.jsx)(e.p,{children:"Another custom date picker example – week picker:"}),"\n",(0,r.jsx)(n,{data:$}),"\n",(0,r.jsx)(e.h2,{id:"static-prop",children:"Static prop"}),"\n",(0,r.jsxs)(e.p,{children:["Set ",(0,r.jsx)(e.code,{children:"static"})," prop to display a calendar that user cannot interact with.\nIt is useful when you want to display data with in calendar view but do\nnot want it to be interactive."]}),"\n",(0,r.jsx)(n,{data:v})]})}function w(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(S,{...t,children:(0,r.jsx)(M,{...t})})}},87121:function(t,e,n){"use strict";n.d(e,{z:function(){return p}});var r=n(27378),a=n(71078),i=n(92082),s=n(83453),o=n(89738),u=n(34121),c=n(96739),d=n(6231),l=n(56589),f=n(20410),h={root:"m-e5262200",indicator:"m-760d1fb1",processing:"m-885901b1"};let m={position:"top-end",offset:0,inline:!1,withBorder:!1,disabled:!1,processing:!1},$=(0,s.Z)((t,{color:e,position:n,offset:r,size:s,radius:c,zIndex:d,autoContrast:l})=>({root:{"--indicator-color":e?(0,o.p)(e,t):void 0,"--indicator-text-color":l?(0,u.R)({color:e,theme:t}):void 0,"--indicator-size":(0,a.h)(s),"--indicator-radius":void 0===c?void 0:(0,i.H5)(c),"--indicator-z-index":d?.toString(),...function(t="top-end",e=0){let n={"--indicator-top":void 0,"--indicator-bottom":void 0,"--indicator-left":void 0,"--indicator-right":void 0,"--indicator-translate-x":void 0,"--indicator-translate-y":void 0},r=(0,a.h)(e),[i,s]=t.split("-");return"top"===i&&(n["--indicator-top"]=r,n["--indicator-translate-y"]="-50%"),"middle"===i&&(n["--indicator-top"]="50%",n["--indicator-translate-y"]="-50%"),"bottom"===i&&(n["--indicator-bottom"]=r,n["--indicator-translate-y"]="50%"),"start"===s&&(n["--indicator-left"]=r,n["--indicator-translate-x"]="-50%"),"center"===s&&(n["--indicator-left"]="50%",n["--indicator-translate-x"]="-50%"),"end"===s&&(n["--indicator-right"]=r,n["--indicator-translate-x"]="50%"),n}(n,r)}})),p=(0,f.d)((t,e)=>{let n=(0,c.w)("Indicator",m,t),{classNames:a,className:i,style:s,styles:o,unstyled:u,vars:f,children:p,position:g,offset:v,inline:y,label:D,radius:S,color:M,withBorder:w,disabled:x,processing:O,zIndex:k,autoContrast:C,mod:b,...j}=n,T=(0,d.y)({name:"Indicator",classes:h,props:n,className:i,style:s,classNames:a,styles:o,unstyled:u,vars:f,varsResolver:$});return r.createElement(l.x,{ref:e,...T("root"),mod:[{inline:y},b],...j},!x&&r.createElement(r.Fragment,null,r.createElement(l.x,{mod:{"with-label":!!D,"with-border":w,processing:O},...T("indicator")},D)),p)});p.classes=h,p.displayName="@mantine/core/Indicator"}},function(t){t.O(0,[30370,15819,2775,53993,49774,92888,40179],function(){return t(t.s=62650)}),_N_E=t.O()}]); \ No newline at end of file +`,v={type:"code",centered:!0,component:function(){return i.createElement(s.f,{static:!0,renderDay:t=>{let e=t.getDate();return i.createElement(p.z,{size:6,color:"red",offset:-2,disabled:16!==e},i.createElement("div",null,e))}})},code:g};var y=n(3916),D=n(54568);let S=(0,y.A)(D.us.Calendar);function M(t){let e={a:"a",code:"code",h2:"h2",p:"p",...(0,a.a)(),...t.components},{Demo:n}=e;return n||function(t,e){throw Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"Calendar"})," component to create custom date pickers if ",(0,r.jsx)(e.a,{href:"/dates/date-picker/",children:"DatePicker"}),"\ncomponent does not meet your requirements. ",(0,r.jsx)(e.code,{children:"Calendar"})," supports all ",(0,r.jsx)(e.a,{href:"/dates/date-picker/",children:"DatePicker"}),"\nprops and some other props that are listed in props table – check it out to learn about all component features."]}),"\n",(0,r.jsxs)(e.p,{children:["By default, ",(0,r.jsx)(e.code,{children:"Calendar"})," works the same way as ",(0,r.jsx)(e.a,{href:"/dates/date-picker/",children:"DatePicker"})," component but does not\ninclude any logic of dates selection:"]}),"\n",(0,r.jsx)(n,{data:u}),"\n",(0,r.jsx)(e.h2,{id:"custom-date-pickers",children:"Custom date pickers"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"Calendar"})," as a base for custom date pickers. For example, you can create a date picker\nthat allows user to pick three or less dates:"]}),"\n",(0,r.jsx)(n,{data:l}),"\n",(0,r.jsx)(e.p,{children:"Another custom date picker example – week picker:"}),"\n",(0,r.jsx)(n,{data:$}),"\n",(0,r.jsx)(e.h2,{id:"static-prop",children:"Static prop"}),"\n",(0,r.jsxs)(e.p,{children:["Set ",(0,r.jsx)(e.code,{children:"static"})," prop to display a calendar that user cannot interact with.\nIt is useful when you want to display data with in calendar view but do\nnot want it to be interactive."]}),"\n",(0,r.jsx)(n,{data:v})]})}function w(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(S,{...t,children:(0,r.jsx)(M,{...t})})}},87121:function(t,e,n){"use strict";n.d(e,{z:function(){return g}});var r=n(27378),a=n(71078),i=n(92082),s=n(83453),o=n(89738),u=n(34121),c=n(55357),d=n(96739),l=n(6231),f=n(56589),h=n(20410),m={root:"m-e5262200",indicator:"m-760d1fb1",processing:"m-885901b1"};let $={position:"top-end",offset:0,inline:!1,withBorder:!1,disabled:!1,processing:!1},p=(0,s.Z)((t,{color:e,position:n,offset:r,size:s,radius:d,zIndex:l,autoContrast:f})=>({root:{"--indicator-color":e?(0,o.p)(e,t):void 0,"--indicator-text-color":(0,c.o)(f,t)?(0,u.R)({color:e,theme:t}):void 0,"--indicator-size":(0,a.h)(s),"--indicator-radius":void 0===d?void 0:(0,i.H5)(d),"--indicator-z-index":l?.toString(),...function(t="top-end",e=0){let n={"--indicator-top":void 0,"--indicator-bottom":void 0,"--indicator-left":void 0,"--indicator-right":void 0,"--indicator-translate-x":void 0,"--indicator-translate-y":void 0},r=(0,a.h)(e),[i,s]=t.split("-");return"top"===i&&(n["--indicator-top"]=r,n["--indicator-translate-y"]="-50%"),"middle"===i&&(n["--indicator-top"]="50%",n["--indicator-translate-y"]="-50%"),"bottom"===i&&(n["--indicator-bottom"]=r,n["--indicator-translate-y"]="50%"),"start"===s&&(n["--indicator-left"]=r,n["--indicator-translate-x"]="-50%"),"center"===s&&(n["--indicator-left"]="50%",n["--indicator-translate-x"]="-50%"),"end"===s&&(n["--indicator-right"]=r,n["--indicator-translate-x"]="50%"),n}(n,r)}})),g=(0,h.d)((t,e)=>{let n=(0,d.w)("Indicator",$,t),{classNames:a,className:i,style:s,styles:o,unstyled:u,vars:c,children:h,position:g,offset:v,inline:y,label:D,radius:S,color:M,withBorder:w,disabled:x,processing:O,zIndex:k,autoContrast:C,mod:b,...j}=n,T=(0,l.y)({name:"Indicator",classes:m,props:n,className:i,style:s,classNames:a,styles:o,unstyled:u,vars:c,varsResolver:p});return r.createElement(f.x,{ref:e,...T("root"),mod:[{inline:y},b],...j},!x&&r.createElement(r.Fragment,null,r.createElement(f.x,{mod:{"with-label":!!D,"with-border":w,processing:O},...T("indicator")},D)),h)});g.classes=m,g.displayName="@mantine/core/Indicator"}},function(t){t.O(0,[30370,15819,2775,53993,49774,92888,40179],function(){return t(t.s=62650)}),_N_E=t.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/dates/date-picker-d5deedd78e567301.js b/_next/static/chunks/pages/dates/date-picker-f1900148cd779432.js similarity index 86% rename from _next/static/chunks/pages/dates/date-picker-d5deedd78e567301.js rename to _next/static/chunks/pages/dates/date-picker-f1900148cd779432.js index 92d45349cd3..bb5ece89a96 100644 --- a/_next/static/chunks/pages/dates/date-picker-d5deedd78e567301.js +++ b/_next/static/chunks/pages/dates/date-picker-f1900148cd779432.js @@ -213,4 +213,4 @@ import { DatePicker } from '@mantine/dates'; function Demo() { return ; } -`,B={type:"code",centered:!0,component:function(){return i.createElement(o.M,{locale:"ru"})},code:Z};var K=n(3916),X=n(54568);let q=(0,K.A)(X.us.DatePicker);function J(e){let t={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.a)(),...e.components},{Demo:n,KeyboardEventsTable:o}=t;return n||ee("Demo",!0),o||ee("KeyboardEventsTable",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n,{data:l}),"\n",(0,a.jsx)(t.h2,{id:"allow-deselect",children:"Allow deselect"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"allowDeselect"})," to allow user to deselect current selected date by clicking on it.\n",(0,a.jsx)(t.code,{children:"allowDeselect"})," is disregarded when ",(0,a.jsx)(t.code,{children:"type"})," prop is ",(0,a.jsx)(t.code,{children:"range"})," or ",(0,a.jsx)(t.code,{children:"multiple"}),". When date is\ndeselected ",(0,a.jsx)(t.code,{children:"onChange"})," is called with ",(0,a.jsx)(t.code,{children:"null"}),"."]}),"\n",(0,a.jsx)(n,{data:c}),"\n",(0,a.jsx)(t.h2,{id:"multiple-dates",children:"Multiple dates"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:'type="multiple"'})," to allow user to pick multiple dates:"]}),"\n",(0,a.jsx)(n,{data:s}),"\n",(0,a.jsx)(t.h2,{id:"dates-range",children:"Dates range"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:'type="range"'})," to allow user to pick dates range:"]}),"\n",(0,a.jsx)(n,{data:u}),"\n",(0,a.jsx)(t.h2,{id:"single-date-in-range",children:"Single date in range"}),"\n",(0,a.jsxs)(t.p,{children:["By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.\nTo change this behavior set ",(0,a.jsx)(t.code,{children:"allowSingleDateInRange"})," prop. ",(0,a.jsx)(t.code,{children:"allowSingleDateInRange"})," is ignored when\n",(0,a.jsx)(t.code,{children:"type"})," prop is not ",(0,a.jsx)(t.code,{children:"range"}),"."]}),"\n",(0,a.jsx)(n,{data:h}),"\n",(0,a.jsx)(t.h2,{id:"default-date",children:"Default date"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"defaultDate"})," prop to set date value that will be used to determine which year should be displayed initially.\nFor example to display ",(0,a.jsx)(t.code,{children:"2015 February"})," month set ",(0,a.jsx)(t.code,{children:"defaultDate={new Date(2015, 1)}"}),". If value is not specified,\nthen ",(0,a.jsx)(t.code,{children:"defaultDate"})," will use ",(0,a.jsx)(t.code,{children:"new Date()"}),". Day, minutes and seconds are ignored in provided date object, only year and month data is used –\nyou can specify any date value."]}),"\n",(0,a.jsxs)(t.p,{children:["Note that if you set ",(0,a.jsx)(t.code,{children:"date"})," prop, then ",(0,a.jsx)(t.code,{children:"defaultDate"})," value will be ignored."]}),"\n",(0,a.jsx)(n,{data:y}),"\n",(0,a.jsx)(t.h2,{id:"controlled-date",children:"Controlled date"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"date"}),", and ",(0,a.jsx)(t.code,{children:"onDateChange"})," props to make currently displayed month, year and decade controlled.\nBy doing so, you can customize date picking experience, for example, when user selects first date in range,\nyou can add one month to the current date value:"]}),"\n",(0,a.jsx)(n,{data:x}),"\n",(0,a.jsx)(t.h2,{id:"default-level",children:"Default level"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"defaultLevel"})," prop to configure initial level that will be displayed:"]}),"\n",(0,a.jsx)(n,{data:v}),"\n",(0,a.jsx)(t.h2,{id:"hide-outside-dates",children:"Hide outside dates"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"hideOutsideDates"})," prop to remove all dates that do not belong to the current month:"]}),"\n",(0,a.jsx)(n,{data:k}),"\n",(0,a.jsx)(t.h2,{id:"first-day-of-week",children:"First day of week"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"firstDayOfWeek"})," prop to configure first day of week. The prop accepts number from 0 to 6,\nwhere 0 is Sunday and 6 is Saturday. Default value is 1 – Monday. You can also configure this option\nfor all components with ",(0,a.jsx)(t.a,{href:"/dates/dates-provider/",children:"DatesProvider"}),"."]}),"\n",(0,a.jsx)(n,{data:b}),"\n",(0,a.jsx)(t.h2,{id:"hide-weekdays",children:"Hide weekdays"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"hideWeekdays"})," prop to hide weekdays names:"]}),"\n",(0,a.jsx)(n,{data:M}),"\n",(0,a.jsx)(t.h2,{id:"weekend-days",children:"Weekend days"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"weekendDays"})," prop to configure weekend days. The prop accepts an array of numbers from 0 to 6,\nwhere 0 is Sunday and 6 is Saturday. Default value is ",(0,a.jsx)(t.code,{children:"[0, 6]"})," – Saturday and Sunday. You can also configure this option\nfor all components with ",(0,a.jsx)(t.a,{href:"/dates/dates-provider/",children:"DatesProvider"}),"."]}),"\n",(0,a.jsx)(n,{data:S}),"\n",(0,a.jsx)(t.h2,{id:"render-day-function",children:"Render day function"}),"\n",(0,a.jsxs)(t.p,{children:["You can customize day rendering with ",(0,a.jsx)(t.code,{children:"renderDay"})," prop. For example, it can be used to add\n",(0,a.jsx)(t.a,{href:"/core/indicator/",children:"Indicator"})," to certain days."]}),"\n",(0,a.jsx)(n,{data:E}),"\n",(0,a.jsx)(t.h2,{id:"min-and-max-date",children:"Min and max date"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"minDate"})," and ",(0,a.jsx)(t.code,{children:"maxDate"})," props to define min and max dates. If previous/next page is not available\nthen corresponding control will be disabled."]}),"\n",(0,a.jsx)(n,{data:N}),"\n",(0,a.jsx)(t.h2,{id:"add-props-to-year-and-month-control",children:"Add props to year and month control"}),"\n",(0,a.jsxs)(t.p,{children:["You can add props to year, month and day controls with ",(0,a.jsx)(t.code,{children:"getYearControlProps"}),", ",(0,a.jsx)(t.code,{children:"getMonthControlProps"})," and ",(0,a.jsx)(t.code,{children:"getDayProps"})," functions. All functions accept date as single argument,\nprops returned from the function will be added to year/month/day control. For example, it can be used to disable specific\ncontrol or add styles:"]}),"\n",(0,a.jsx)(n,{data:T}),"\n",(0,a.jsx)(t.h2,{id:"number-of-columns",children:"Number of columns"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"numberOfColumns"})," prop to define number of pickers that will be rendered side by side:"]}),"\n",(0,a.jsx)(n,{data:m}),"\n",(0,a.jsx)(t.h2,{id:"max-level",children:"Max level"}),"\n",(0,a.jsx)(n,{data:G}),"\n",(0,a.jsx)(t.h2,{id:"size",children:"Size"}),"\n",(0,a.jsx)(n,{data:p}),"\n",(0,a.jsx)(t.h2,{id:"change-year-and-months-controls-format",children:"Change year and months controls format"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"yearsListFormat"})," and ",(0,a.jsx)(t.code,{children:"monthsListFormat"})," props to change ",(0,a.jsx)(t.a,{href:"https://day.js.org/docs/en/display/format",children:"dayjs format"})," of year/month controls:"]}),"\n",(0,a.jsx)(n,{data:H}),"\n",(0,a.jsx)(t.h2,{id:"change-label-format",children:"Change label format"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"decadeLabelFormat"}),", ",(0,a.jsx)(t.code,{children:"yearLabelFormat"})," and ",(0,a.jsx)(t.code,{children:"monthLabelFormat"})," props to change ",(0,a.jsx)(t.a,{href:"https://day.js.org/docs/en/display/format",children:"dayjs format"})," of decade/year label:"]}),"\n",(0,a.jsx)(n,{data:$}),"\n",(0,a.jsx)(t.h2,{id:"localization",children:"Localization"}),"\n",(0,a.jsxs)(t.p,{children:["Usually it is better to specify ",(0,a.jsx)(t.code,{children:"@mantine/dates"})," package locale in ",(0,a.jsx)(t.a,{href:"/dates/dates-provider/",children:"DatesProvider"}),",\nbut you can also override locale per component:"]}),"\n",(0,a.jsx)(n,{data:B}),"\n",(0,a.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,a.jsx)(t.h3,{id:"aria-labels",children:"Aria labels"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"ariaLabels"})," prop to specify ",(0,a.jsx)(t.code,{children:"aria-label"})," attributes for next/previous controls:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { DatePicker } from '@mantine/dates';\n\nfunction Demo() {\n return (\n \n );\n}\n"})}),"\n",(0,a.jsx)(t.h3,{id:"yearmonth-control-aria-label",children:"Year/month control aria-label"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"getYearControlProps"}),"/",(0,a.jsx)(t.code,{children:"getMonthControlProps"}),"/",(0,a.jsx)(t.code,{children:"getDayProps"})," to customize ",(0,a.jsx)(t.code,{children:"aria-label"})," attribute:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { DatePicker } from '@mantine/dates';\n\nfunction Demo() {\n return (\n ({\n 'aria-label': `Select date ${\n date.getMonth() + 1\n }/${date.getDate()}/${date.getFullYear()}`,\n })}\n getYearControlProps={(date) => ({\n 'aria-label': `Select year ${date.getFullYear()}`,\n })}\n getMonthControlProps={(date) => ({\n 'aria-label': `Select month ${date.getFullYear()}/${date.getMonth()}`,\n })}\n />\n );\n}\n"})}),"\n",(0,a.jsx)(t.h3,{id:"keyboard-interactions",children:"Keyboard interactions"}),"\n",(0,a.jsx)(t.p,{children:"Note that the following events will only trigger if focus is on date control."}),"\n",(0,a.jsx)(o,{data:[{key:"ArrowRight",description:"Focuses next non-disabled date"},{key:"ArrowLeft",description:"Focuses previous non-disabled date"},{key:"ArrowDown",description:"Focuses next non-disabled date in the same column"},{key:"ArrowUp",description:"Focuses previous non-disabled date in the same column"}]})]})}function Q(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(q,{...e,children:(0,a.jsx)(J,{...e})})}function ee(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},87121:function(e,t,n){"use strict";n.d(t,{z:function(){return y}});var a=n(27378),r=n(71078),o=n(92082),d=n(83453),i=n(89738),l=n(34121),s=n(96739),c=n(6231),u=n(56589),h=n(20410),m={root:"m-e5262200",indicator:"m-760d1fb1",processing:"m-885901b1"};let p={position:"top-end",offset:0,inline:!1,withBorder:!1,disabled:!1,processing:!1},f=(0,d.Z)((e,{color:t,position:n,offset:a,size:d,radius:s,zIndex:c,autoContrast:u})=>({root:{"--indicator-color":t?(0,i.p)(t,e):void 0,"--indicator-text-color":u?(0,l.R)({color:t,theme:e}):void 0,"--indicator-size":(0,r.h)(d),"--indicator-radius":void 0===s?void 0:(0,o.H5)(s),"--indicator-z-index":c?.toString(),...function(e="top-end",t=0){let n={"--indicator-top":void 0,"--indicator-bottom":void 0,"--indicator-left":void 0,"--indicator-right":void 0,"--indicator-translate-x":void 0,"--indicator-translate-y":void 0},a=(0,r.h)(t),[o,d]=e.split("-");return"top"===o&&(n["--indicator-top"]=a,n["--indicator-translate-y"]="-50%"),"middle"===o&&(n["--indicator-top"]="50%",n["--indicator-translate-y"]="-50%"),"bottom"===o&&(n["--indicator-bottom"]=a,n["--indicator-translate-y"]="50%"),"start"===d&&(n["--indicator-left"]=a,n["--indicator-translate-x"]="-50%"),"center"===d&&(n["--indicator-left"]="50%",n["--indicator-translate-x"]="-50%"),"end"===d&&(n["--indicator-right"]=a,n["--indicator-translate-x"]="50%"),n}(n,a)}})),y=(0,h.d)((e,t)=>{let n=(0,s.w)("Indicator",p,e),{classNames:r,className:o,style:d,styles:i,unstyled:l,vars:h,children:y,position:D,offset:x,inline:j,label:g,radius:v,color:_,withBorder:k,disabled:w,processing:b,zIndex:P,autoContrast:M,mod:Y,...S}=n,L=(0,c.y)({name:"Indicator",classes:m,props:n,className:o,style:d,classNames:r,styles:i,unstyled:l,vars:h,varsResolver:f});return a.createElement(u.x,{ref:t,...L("root"),mod:[{inline:j},Y],...S},!w&&a.createElement(a.Fragment,null,a.createElement(u.x,{mod:{"with-label":!!g,"with-border":k,processing:b},...L("indicator")},g)),y)});y.classes=m,y.displayName="@mantine/core/Indicator"},68959:function(e,t,n){"use strict";n.d(t,{M:function(){return h}});var a=n(27378),r=n(20410),o=n(96739),d=n(5564),i=n(65434),l=n(84677);n(27693);var s=n(95008),c=n(53993);let u={type:"default",defaultLevel:"month",numberOfColumns:1},h=(0,r.d)((e,t)=>{let n=(0,o.w)("DatePicker",u,e),{classNames:r,styles:h,vars:m,type:p,defaultValue:f,value:y,onChange:D,__staticSelector:x,getDayProps:j,allowSingleDateInRange:g,allowDeselect:v,onMouseLeave:_,numberOfColumns:k,hideOutsideDates:w,__onDayMouseEnter:b,__onDayClick:P,__timezoneApplied:M,...Y}=n,{onDateChange:S,onRootMouseLeave:L,onHoveredDateChange:C,getControlProps:F}=(0,i.D)({type:p,level:"day",allowDeselect:v,allowSingleDateInRange:g,value:y,defaultValue:f,onChange:D,onMouseLeave:_,applyTimezone:!M}),{resolvedClassNames:E,resolvedStyles:z}=(0,d.h)({classNames:r,styles:h,props:n}),N=(0,l.e)();return a.createElement(c.f,{ref:t,minLevel:"month",classNames:E,styles:z,__staticSelector:x||"DatePicker",onMouseLeave:L,numberOfColumns:k,hideOutsideDates:w??1!==k,__onDayMouseEnter:(e,t)=>{C(t),b?.(e,t)},__onDayClick:(e,t)=>{S(t),P?.(e,t)},getDayProps:e=>({...F(e),...j?.(e)}),...Y,date:(0,s.w)("add",Y.date,N.getTimezone(),M),__timezoneApplied:!0})});h.classes=c.f.classes,h.displayName="@mantine/dates/DatePicker"}},function(e){e.O(0,[30370,15819,2775,53993,88656,49774,92888,40179],function(){return e(e.s=5295)}),_N_E=e.O()}]); \ No newline at end of file +`,B={type:"code",centered:!0,component:function(){return i.createElement(o.M,{locale:"ru"})},code:Z};var K=n(3916),X=n(54568);let q=(0,K.A)(X.us.DatePicker);function J(e){let t={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,r.a)(),...e.components},{Demo:n,KeyboardEventsTable:o}=t;return n||ee("Demo",!0),o||ee("KeyboardEventsTable",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n,{data:l}),"\n",(0,a.jsx)(t.h2,{id:"allow-deselect",children:"Allow deselect"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"allowDeselect"})," to allow user to deselect current selected date by clicking on it.\n",(0,a.jsx)(t.code,{children:"allowDeselect"})," is disregarded when ",(0,a.jsx)(t.code,{children:"type"})," prop is ",(0,a.jsx)(t.code,{children:"range"})," or ",(0,a.jsx)(t.code,{children:"multiple"}),". When date is\ndeselected ",(0,a.jsx)(t.code,{children:"onChange"})," is called with ",(0,a.jsx)(t.code,{children:"null"}),"."]}),"\n",(0,a.jsx)(n,{data:c}),"\n",(0,a.jsx)(t.h2,{id:"multiple-dates",children:"Multiple dates"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:'type="multiple"'})," to allow user to pick multiple dates:"]}),"\n",(0,a.jsx)(n,{data:s}),"\n",(0,a.jsx)(t.h2,{id:"dates-range",children:"Dates range"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:'type="range"'})," to allow user to pick dates range:"]}),"\n",(0,a.jsx)(n,{data:u}),"\n",(0,a.jsx)(t.h2,{id:"single-date-in-range",children:"Single date in range"}),"\n",(0,a.jsxs)(t.p,{children:["By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.\nTo change this behavior set ",(0,a.jsx)(t.code,{children:"allowSingleDateInRange"})," prop. ",(0,a.jsx)(t.code,{children:"allowSingleDateInRange"})," is ignored when\n",(0,a.jsx)(t.code,{children:"type"})," prop is not ",(0,a.jsx)(t.code,{children:"range"}),"."]}),"\n",(0,a.jsx)(n,{data:h}),"\n",(0,a.jsx)(t.h2,{id:"default-date",children:"Default date"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"defaultDate"})," prop to set date value that will be used to determine which year should be displayed initially.\nFor example to display ",(0,a.jsx)(t.code,{children:"2015 February"})," month set ",(0,a.jsx)(t.code,{children:"defaultDate={new Date(2015, 1)}"}),". If value is not specified,\nthen ",(0,a.jsx)(t.code,{children:"defaultDate"})," will use ",(0,a.jsx)(t.code,{children:"new Date()"}),". Day, minutes and seconds are ignored in provided date object, only year and month data is used –\nyou can specify any date value."]}),"\n",(0,a.jsxs)(t.p,{children:["Note that if you set ",(0,a.jsx)(t.code,{children:"date"})," prop, then ",(0,a.jsx)(t.code,{children:"defaultDate"})," value will be ignored."]}),"\n",(0,a.jsx)(n,{data:y}),"\n",(0,a.jsx)(t.h2,{id:"controlled-date",children:"Controlled date"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"date"}),", and ",(0,a.jsx)(t.code,{children:"onDateChange"})," props to make currently displayed month, year and decade controlled.\nBy doing so, you can customize date picking experience, for example, when user selects first date in range,\nyou can add one month to the current date value:"]}),"\n",(0,a.jsx)(n,{data:x}),"\n",(0,a.jsx)(t.h2,{id:"default-level",children:"Default level"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"defaultLevel"})," prop to configure initial level that will be displayed:"]}),"\n",(0,a.jsx)(n,{data:v}),"\n",(0,a.jsx)(t.h2,{id:"hide-outside-dates",children:"Hide outside dates"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"hideOutsideDates"})," prop to remove all dates that do not belong to the current month:"]}),"\n",(0,a.jsx)(n,{data:k}),"\n",(0,a.jsx)(t.h2,{id:"first-day-of-week",children:"First day of week"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"firstDayOfWeek"})," prop to configure first day of week. The prop accepts number from 0 to 6,\nwhere 0 is Sunday and 6 is Saturday. Default value is 1 – Monday. You can also configure this option\nfor all components with ",(0,a.jsx)(t.a,{href:"/dates/dates-provider/",children:"DatesProvider"}),"."]}),"\n",(0,a.jsx)(n,{data:b}),"\n",(0,a.jsx)(t.h2,{id:"hide-weekdays",children:"Hide weekdays"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"hideWeekdays"})," prop to hide weekdays names:"]}),"\n",(0,a.jsx)(n,{data:M}),"\n",(0,a.jsx)(t.h2,{id:"weekend-days",children:"Weekend days"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"weekendDays"})," prop to configure weekend days. The prop accepts an array of numbers from 0 to 6,\nwhere 0 is Sunday and 6 is Saturday. Default value is ",(0,a.jsx)(t.code,{children:"[0, 6]"})," – Saturday and Sunday. You can also configure this option\nfor all components with ",(0,a.jsx)(t.a,{href:"/dates/dates-provider/",children:"DatesProvider"}),"."]}),"\n",(0,a.jsx)(n,{data:S}),"\n",(0,a.jsx)(t.h2,{id:"render-day-function",children:"Render day function"}),"\n",(0,a.jsxs)(t.p,{children:["You can customize day rendering with ",(0,a.jsx)(t.code,{children:"renderDay"})," prop. For example, it can be used to add\n",(0,a.jsx)(t.a,{href:"/core/indicator/",children:"Indicator"})," to certain days."]}),"\n",(0,a.jsx)(n,{data:E}),"\n",(0,a.jsx)(t.h2,{id:"min-and-max-date",children:"Min and max date"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"minDate"})," and ",(0,a.jsx)(t.code,{children:"maxDate"})," props to define min and max dates. If previous/next page is not available\nthen corresponding control will be disabled."]}),"\n",(0,a.jsx)(n,{data:N}),"\n",(0,a.jsx)(t.h2,{id:"add-props-to-year-and-month-control",children:"Add props to year and month control"}),"\n",(0,a.jsxs)(t.p,{children:["You can add props to year, month and day controls with ",(0,a.jsx)(t.code,{children:"getYearControlProps"}),", ",(0,a.jsx)(t.code,{children:"getMonthControlProps"})," and ",(0,a.jsx)(t.code,{children:"getDayProps"})," functions. All functions accept date as single argument,\nprops returned from the function will be added to year/month/day control. For example, it can be used to disable specific\ncontrol or add styles:"]}),"\n",(0,a.jsx)(n,{data:T}),"\n",(0,a.jsx)(t.h2,{id:"number-of-columns",children:"Number of columns"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"numberOfColumns"})," prop to define number of pickers that will be rendered side by side:"]}),"\n",(0,a.jsx)(n,{data:m}),"\n",(0,a.jsx)(t.h2,{id:"max-level",children:"Max level"}),"\n",(0,a.jsx)(n,{data:G}),"\n",(0,a.jsx)(t.h2,{id:"size",children:"Size"}),"\n",(0,a.jsx)(n,{data:p}),"\n",(0,a.jsx)(t.h2,{id:"change-year-and-months-controls-format",children:"Change year and months controls format"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"yearsListFormat"})," and ",(0,a.jsx)(t.code,{children:"monthsListFormat"})," props to change ",(0,a.jsx)(t.a,{href:"https://day.js.org/docs/en/display/format",children:"dayjs format"})," of year/month controls:"]}),"\n",(0,a.jsx)(n,{data:H}),"\n",(0,a.jsx)(t.h2,{id:"change-label-format",children:"Change label format"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"decadeLabelFormat"}),", ",(0,a.jsx)(t.code,{children:"yearLabelFormat"})," and ",(0,a.jsx)(t.code,{children:"monthLabelFormat"})," props to change ",(0,a.jsx)(t.a,{href:"https://day.js.org/docs/en/display/format",children:"dayjs format"})," of decade/year label:"]}),"\n",(0,a.jsx)(n,{data:$}),"\n",(0,a.jsx)(t.h2,{id:"localization",children:"Localization"}),"\n",(0,a.jsxs)(t.p,{children:["Usually it is better to specify ",(0,a.jsx)(t.code,{children:"@mantine/dates"})," package locale in ",(0,a.jsx)(t.a,{href:"/dates/dates-provider/",children:"DatesProvider"}),",\nbut you can also override locale per component:"]}),"\n",(0,a.jsx)(n,{data:B}),"\n",(0,a.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,a.jsx)(t.h3,{id:"aria-labels",children:"Aria labels"}),"\n",(0,a.jsxs)(t.p,{children:["Set ",(0,a.jsx)(t.code,{children:"ariaLabels"})," prop to specify ",(0,a.jsx)(t.code,{children:"aria-label"})," attributes for next/previous controls:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { DatePicker } from '@mantine/dates';\n\nfunction Demo() {\n return (\n \n );\n}\n"})}),"\n",(0,a.jsx)(t.h3,{id:"yearmonth-control-aria-label",children:"Year/month control aria-label"}),"\n",(0,a.jsxs)(t.p,{children:["Use ",(0,a.jsx)(t.code,{children:"getYearControlProps"}),"/",(0,a.jsx)(t.code,{children:"getMonthControlProps"}),"/",(0,a.jsx)(t.code,{children:"getDayProps"})," to customize ",(0,a.jsx)(t.code,{children:"aria-label"})," attribute:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { DatePicker } from '@mantine/dates';\n\nfunction Demo() {\n return (\n ({\n 'aria-label': `Select date ${\n date.getMonth() + 1\n }/${date.getDate()}/${date.getFullYear()}`,\n })}\n getYearControlProps={(date) => ({\n 'aria-label': `Select year ${date.getFullYear()}`,\n })}\n getMonthControlProps={(date) => ({\n 'aria-label': `Select month ${date.getFullYear()}/${date.getMonth()}`,\n })}\n />\n );\n}\n"})}),"\n",(0,a.jsx)(t.h3,{id:"keyboard-interactions",children:"Keyboard interactions"}),"\n",(0,a.jsx)(t.p,{children:"Note that the following events will only trigger if focus is on date control."}),"\n",(0,a.jsx)(o,{data:[{key:"ArrowRight",description:"Focuses next non-disabled date"},{key:"ArrowLeft",description:"Focuses previous non-disabled date"},{key:"ArrowDown",description:"Focuses next non-disabled date in the same column"},{key:"ArrowUp",description:"Focuses previous non-disabled date in the same column"}]})]})}function Q(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(q,{...e,children:(0,a.jsx)(J,{...e})})}function ee(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},87121:function(e,t,n){"use strict";n.d(t,{z:function(){return D}});var a=n(27378),r=n(71078),o=n(92082),d=n(83453),i=n(89738),l=n(34121),s=n(55357),c=n(96739),u=n(6231),h=n(56589),m=n(20410),p={root:"m-e5262200",indicator:"m-760d1fb1",processing:"m-885901b1"};let f={position:"top-end",offset:0,inline:!1,withBorder:!1,disabled:!1,processing:!1},y=(0,d.Z)((e,{color:t,position:n,offset:a,size:d,radius:c,zIndex:u,autoContrast:h})=>({root:{"--indicator-color":t?(0,i.p)(t,e):void 0,"--indicator-text-color":(0,s.o)(h,e)?(0,l.R)({color:t,theme:e}):void 0,"--indicator-size":(0,r.h)(d),"--indicator-radius":void 0===c?void 0:(0,o.H5)(c),"--indicator-z-index":u?.toString(),...function(e="top-end",t=0){let n={"--indicator-top":void 0,"--indicator-bottom":void 0,"--indicator-left":void 0,"--indicator-right":void 0,"--indicator-translate-x":void 0,"--indicator-translate-y":void 0},a=(0,r.h)(t),[o,d]=e.split("-");return"top"===o&&(n["--indicator-top"]=a,n["--indicator-translate-y"]="-50%"),"middle"===o&&(n["--indicator-top"]="50%",n["--indicator-translate-y"]="-50%"),"bottom"===o&&(n["--indicator-bottom"]=a,n["--indicator-translate-y"]="50%"),"start"===d&&(n["--indicator-left"]=a,n["--indicator-translate-x"]="-50%"),"center"===d&&(n["--indicator-left"]="50%",n["--indicator-translate-x"]="-50%"),"end"===d&&(n["--indicator-right"]=a,n["--indicator-translate-x"]="50%"),n}(n,a)}})),D=(0,m.d)((e,t)=>{let n=(0,c.w)("Indicator",f,e),{classNames:r,className:o,style:d,styles:i,unstyled:l,vars:s,children:m,position:D,offset:x,inline:j,label:g,radius:v,color:_,withBorder:k,disabled:w,processing:b,zIndex:P,autoContrast:M,mod:Y,...S}=n,L=(0,u.y)({name:"Indicator",classes:p,props:n,className:o,style:d,classNames:r,styles:i,unstyled:l,vars:s,varsResolver:y});return a.createElement(h.x,{ref:t,...L("root"),mod:[{inline:j},Y],...S},!w&&a.createElement(a.Fragment,null,a.createElement(h.x,{mod:{"with-label":!!g,"with-border":k,processing:b},...L("indicator")},g)),m)});D.classes=p,D.displayName="@mantine/core/Indicator"},68959:function(e,t,n){"use strict";n.d(t,{M:function(){return h}});var a=n(27378),r=n(20410),o=n(96739),d=n(5564),i=n(65434),l=n(84677);n(27693);var s=n(95008),c=n(53993);let u={type:"default",defaultLevel:"month",numberOfColumns:1},h=(0,r.d)((e,t)=>{let n=(0,o.w)("DatePicker",u,e),{classNames:r,styles:h,vars:m,type:p,defaultValue:f,value:y,onChange:D,__staticSelector:x,getDayProps:j,allowSingleDateInRange:g,allowDeselect:v,onMouseLeave:_,numberOfColumns:k,hideOutsideDates:w,__onDayMouseEnter:b,__onDayClick:P,__timezoneApplied:M,...Y}=n,{onDateChange:S,onRootMouseLeave:L,onHoveredDateChange:C,getControlProps:F}=(0,i.D)({type:p,level:"day",allowDeselect:v,allowSingleDateInRange:g,value:y,defaultValue:f,onChange:D,onMouseLeave:_,applyTimezone:!M}),{resolvedClassNames:E,resolvedStyles:z}=(0,d.h)({classNames:r,styles:h,props:n}),N=(0,l.e)();return a.createElement(c.f,{ref:t,minLevel:"month",classNames:E,styles:z,__staticSelector:x||"DatePicker",onMouseLeave:L,numberOfColumns:k,hideOutsideDates:w??1!==k,__onDayMouseEnter:(e,t)=>{C(t),b?.(e,t)},__onDayClick:(e,t)=>{S(t),P?.(e,t)},getDayProps:e=>({...F(e),...j?.(e)}),...Y,date:(0,s.w)("add",Y.date,N.getTimezone(),M),__timezoneApplied:!0})});h.classes=c.f.classes,h.displayName="@mantine/dates/DatePicker"}},function(e){e.O(0,[30370,15819,2775,53993,88656,49774,92888,40179],function(){return e(e.s=5295)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/form/recipes-13f347df41c7223a.js b/_next/static/chunks/pages/form/recipes-35ebf370f505c76f.js similarity index 78% rename from _next/static/chunks/pages/form/recipes-13f347df41c7223a.js rename to _next/static/chunks/pages/form/recipes-35ebf370f505c76f.js index 5faf940fc3f..d3f754d41b5 100644 --- a/_next/static/chunks/pages/form/recipes-13f347df41c7223a.js +++ b/_next/static/chunks/pages/form/recipes-35ebf370f505c76f.js @@ -233,4 +233,4 @@ function Demo() { ); } -`,C={type:"code",component:function(){let[e,t]=(0,n.useState)(0),o=(0,m.c)({initialValues:{username:"",password:"",name:"",email:"",website:"",github:""},validate:t=>0===e?{username:t.username.trim().length<6?"Username must include at least 6 characters":null,password:t.password.length<6?"Password must include at least 6 characters":null}:1===e?{name:t.name.trim().length<2?"Name must include at least 2 characters":null,email:/^\S+@\S+$/.test(t.email)?null:"Invalid email"}:{}});return n.createElement(n.Fragment,null,n.createElement(w.v,{active:e},n.createElement(w.v.Step,{label:"First step",description:"Profile settings"},n.createElement(s.o,{label:"Username",placeholder:"Username",...o.getInputProps("username")}),n.createElement(y.W,{mt:"md",label:"Password",placeholder:"Password",...o.getInputProps("password")})),n.createElement(w.v.Step,{label:"Second step",description:"Personal information"},n.createElement(s.o,{label:"Name",placeholder:"Name",...o.getInputProps("name")}),n.createElement(s.o,{mt:"md",label:"Email",placeholder:"Email",...o.getInputProps("email")})),n.createElement(w.v.Step,{label:"Final step",description:"Social media"},n.createElement(s.o,{label:"Website",placeholder:"Website",...o.getInputProps("website")}),n.createElement(s.o,{mt:"md",label:"GitHub",placeholder:"GitHub",...o.getInputProps("github")})),n.createElement(w.v.Completed,null,"Completed! Form values:",n.createElement(E.E,{block:!0,mt:"xl"},JSON.stringify(o.values,null,2)))),n.createElement(g.Z,{justify:"flex-end",mt:"xl"},0!==e&&n.createElement(b.z,{variant:"default",onClick:()=>t(e=>e>0?e-1:e)},"Back"),3!==e&&n.createElement(b.z,{onClick:()=>t(e=>o.validate().hasErrors?e:e<3?e+1:e)},"Next step")))},code:I};var P=o(3916),N=o(54568);let D=(0,P.A)(N.us.formRecipes);function k(e){let t={h2:"h2",...(0,a.a)(),...e.components},{Demo:o}=t;return o||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"set-initial-values-with-async-request",children:"Set initial values with async request"}),"\n",(0,r.jsx)(o,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"save-form-values-to-local-storage",children:"Save form values to local storage"}),"\n",(0,r.jsx)(o,{data:u}),"\n",(0,r.jsx)(t.h2,{id:"list-items-reordering",children:"List items reordering"}),"\n",(0,r.jsx)(o,{data:S}),"\n",(0,r.jsx)(t.h2,{id:"form-with-multiple-steps",children:"Form with multiple steps"}),"\n",(0,r.jsx)(o,{data:C})]})}function F(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(D,{...e,children:(0,r.jsx)(k,{...e})})}},62150:function(e,t,o){"use strict";o.d(t,{M:function(){return p}});var r=o(27378),a=o(96739),n=o(6231),l=o(56589),s=o(50332),i={root:"m-4451eb3a"};let m={},p=(0,s.b)((e,t)=>{let o=(0,a.w)("Center",m,e),{classNames:s,className:p,style:c,styles:d,unstyled:u,vars:f,inline:v,mod:g,...h}=o,b=(0,n.y)({name:"Center",props:o,classes:i,className:p,style:c,classNames:s,styles:d,unstyled:u,vars:f});return r.createElement(l.x,{ref:t,mod:[{inline:v},g],...b("root"),...h})});p.classes=i,p.displayName="@mantine/core/Center"},25916:function(e,t,o){"use strict";o.d(t,{W:function(){return x}});var r=o(27378),a=o(40624),n=o(31002),l=o(58675),s=o(92082),i=o(83453),m=o(5564),p=o(6231),c=o(96739),d=o(55934),u=o(20410),f=o(84246),v=o(42487),g=o(23163),h={root:"m-f61ca620",input:"m-ccf8da4c",innerInput:"m-f2d85dd2",visibilityToggle:"m-b1072d44"};let b={visibilityToggleIcon:({reveal:e})=>r.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"}},r.createElement("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},E=(0,i.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,s.ap)(t,"psi-icon-size"),"--psi-button-size":(0,s.ap)(t,"psi-button-size")}})),x=(0,u.d)((e,t)=>{let o=(0,c.w)("PasswordInput",b,e),{classNames:s,className:i,style:u,styles:g,unstyled:x,vars:S,required:w,error:y,leftSection:I,disabled:C,id:P,variant:N,inputContainer:D,description:k,label:F,size:z,errorProps:B,descriptionProps:T,labelProps:V,withAsterisk:_,inputWrapperOrder:L,wrapperProps:j,radius:G,rightSection:Z,rightSectionWidth:O,rightSectionPointerEvents:J,leftSectionWidth:M,visible:A,defaultVisible:R,onVisibilityChange:W,visibilityToggleIcon:H,visibilityToggleButtonProps:$,rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,mod:q,...Q}=o,Y=(0,n.M)(P),[ee,et]=(0,l.C)({value:A,defaultValue:R,finalValue:!1,onChange:W}),eo=()=>et(!ee),er=(0,p.y)({name:"PasswordInput",classes:h,props:o,className:i,style:u,classNames:s,styles:g,unstyled:x,vars:S,varsResolver:E}),{resolvedClassNames:ea,resolvedStyles:en}=(0,m.h)({classNames:s,styles:g,props:o}),{styleProps:el,rest:es}=(0,d.c)(Q),ei=r.createElement(f.A,{...er("visibilityToggle"),disabled:C,radius:G,"aria-hidden":!$,tabIndex:-1,...$,variant:"subtle",color:"gray",unstyled:x,onMouseDown:e=>{e.preventDefault(),$?.onMouseDown?.(e),eo()},onKeyDown:e=>{$?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())}},r.createElement(H,{reveal:ee}));return r.createElement(v.I.Wrapper,{required:w,id:Y,label:F,error:y,description:k,size:z,classNames:ea,styles:en,__staticSelector:"PasswordInput",errorProps:B,descriptionProps:T,unstyled:x,withAsterisk:_,inputWrapperOrder:L,inputContainer:D,variant:N,labelProps:{...V,htmlFor:Y},mod:q,...er("root"),...el,...j},r.createElement(v.I,{component:"div",error:y,leftSection:I,size:z,classNames:{...ea,input:(0,a.Z)(h.input,ea.input)},styles:en,radius:G,disabled:C,__staticSelector:"PasswordInput",rightSectionWidth:O,rightSection:Z??ei,variant:N,unstyled:x,leftSectionWidth:M,rightSectionPointerEvents:J||"all",rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,withAria:!1},r.createElement("input",{required:w,"data-invalid":!!y||void 0,"data-with-left-section":!!I||void 0,...er("innerInput"),disabled:C,id:Y,ref:t,...es,autoComplete:es.autoComplete||"off",type:ee?"text":"password"})))});x.classes={...g.M.classes,...h},x.displayName="@mantine/core/PasswordInput"},35292:function(e,t,o){"use strict";o.d(t,{v:function(){return D}});var r=o(27378),a=o(71078),n=o(92082),l=o(83453),s=o(89738),i=o(34121),m=o(96739),p=o(6231),c=o(56589),d=o(20410),u=o(71656);let[f,v]=(0,u.R)("Stepper component was not found in tree"),g=()=>null;g.displayName="@mantine/core/StepperCompleted";var h=o(2256),b=o(38765),E=o(42029),x=o(88101),S=o(19397),w={root:"m-cbb4ea7e",steps:"m-aaf89d0b",separator:"m-2a371ac9",content:"m-78da155d",step:"m-cbb57068","step--horizontal":"m-f56b1e2c","step--vertical":"m-833edb7e",verticalSeparator:"m-6496b3f3",stepWrapper:"m-818e70b",stepIcon:"m-1959ad01",stepCompletedIcon:"m-a79331dc",stepBody:"m-1956aa2a",stepLabel:"m-12051f6c",stepDescription:"m-164eea74"};let y=(e,t)=>"function"==typeof e?r.createElement(e,{step:t||0}):e,I={withIcon:!0,allowStepClick:!0,iconPosition:"left"},C=(0,d.d)((e,t)=>{let{classNames:o,className:a,style:n,styles:l,vars:i,step:p,state:c,color:d,icon:u,completedIcon:f,progressIcon:g,label:w,description:C,withIcon:P,iconSize:N,loading:D,allowStepClick:k,allowStepSelect:F,iconPosition:z,orientation:B,mod:T,...V}=(0,m.w)("StepperStep",I,e),_=v(),L=(0,h.rZ)(),j={classNames:o,styles:l},G="stepCompleted"===c?null:"stepProgress"===c?g:u,Z={"data-progress":"stepProgress"===c||void 0,"data-completed":"stepCompleted"===c||void 0};return r.createElement(S.k,{..._.getStyles("step",{className:a,style:n,variant:_.orientation,...j}),mod:[{"icon-position":z||_.iconPosition,"allow-click":k},T],ref:t,...Z,...V,__vars:{"--step-color":d?(0,s.p)(d,L):void 0},tabIndex:k?0:-1},P&&r.createElement("span",{..._.getStyles("stepWrapper",j)},r.createElement("span",{..._.getStyles("stepIcon",j),...Z},r.createElement(x.u,{mounted:"stepCompleted"===c,transition:"pop",duration:200},e=>r.createElement("span",{..._.getStyles("stepCompletedIcon",{style:e,...j})},D?r.createElement(E.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",..._.getStyles("stepLoader",j)}):y(f,p)||r.createElement(b.n,{size:"60%"}))),"stepCompleted"!==c?D?r.createElement(E.a,{..._.getStyles("stepLoader",j),size:"calc(var(--stepper-icon-size) / 2)",color:d}):y(G||u,p):null),"vertical"===B&&r.createElement("span",{..._.getStyles("verticalSeparator",j),"data-active":"stepCompleted"===c||void 0})),(w||C)&&r.createElement("span",{..._.getStyles("stepBody",j),"data-orientation":_.orientation,"data-icon-position":z||_.iconPosition},w&&r.createElement("span",{..._.getStyles("stepLabel",j)},y(w,p)),C&&r.createElement("span",{..._.getStyles("stepDescription",j)},y(C,p))))});C.classes=w,C.displayName="@mantine/core/StepperStep";let P={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},N=(0,l.Z)((e,{color:t,iconSize:o,size:r,contentPadding:l,radius:m,autoContrast:p})=>({root:{"--stepper-color":t?(0,s.p)(t,e):void 0,"--stepper-icon-color":p?(0,i.R)({color:t,theme:e}):void 0,"--stepper-icon-size":void 0===o?(0,n.ap)(r,"stepper-icon-size"):(0,a.h)(o),"--stepper-content-padding":(0,n.bG)(l),"--stepper-radius":void 0===m?void 0:(0,n.H5)(m),"--stepper-fz":(0,n.yv)(r),"--stepper-spacing":(0,n.bG)(r)}})),D=(0,d.d)((e,t)=>{let o=(0,m.w)("Stepper",P,e),{classNames:a,className:n,style:l,styles:s,unstyled:i,vars:d,children:u,onStepClick:v,active:h,icon:b,completedIcon:E,progressIcon:x,color:S,iconSize:y,contentPadding:I,orientation:C,iconPosition:D,size:k,radius:F,allowNextStepsSelect:z,wrap:B,...T}=o,V=(0,p.y)({name:"Stepper",classes:w,props:o,className:n,style:l,classNames:a,styles:s,unstyled:i,vars:d,varsResolver:N}),_=r.Children.toArray(u),L=_.filter(e=>e.type!==g),j=_.find(e=>e.type===g),G=L.reduce((e,t,o)=>{let a=h===o?"stepProgress":h>o?"stepCompleted":"stepInactive",n="function"==typeof v&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===a||z);return e.push((0,r.cloneElement)(t,{icon:t.props.icon||b||o+1,key:o,step:o,state:a,onClick:()=>n&&v?.(o),allowStepClick:n,completedIcon:t.props.completedIcon||E,progressIcon:t.props.progressIcon||x,color:t.props.color||S,iconSize:y,radius:F,iconPosition:t.props.iconPosition||D,orientation:C,unstyled:i})),"horizontal"===C&&o!==L.length-1&&e.push(r.createElement("div",{...V("separator"),"data-active":oL.length-1?O:Z;return r.createElement(f,{value:{getStyles:V,orientation:C,iconPosition:D}},r.createElement(c.x,{...V("root"),ref:t,size:k,...T},r.createElement(c.x,{...V("steps"),mod:{orientation:C,"icon-position":D,wrap:B&&"vertical"!==C}},G),J&&r.createElement("div",{...V("content")},J)))});D.classes=w,D.displayName="@mantine/core/Stepper",D.Completed=g,D.Step=C}},function(e){e.O(0,[70846,30370,4038,15819,2775,56926,49774,92888,40179],function(){return e(e.s=94258)}),_N_E=e.O()}]); \ No newline at end of file +`,C={type:"code",component:function(){let[e,t]=(0,n.useState)(0),o=(0,m.c)({initialValues:{username:"",password:"",name:"",email:"",website:"",github:""},validate:t=>0===e?{username:t.username.trim().length<6?"Username must include at least 6 characters":null,password:t.password.length<6?"Password must include at least 6 characters":null}:1===e?{name:t.name.trim().length<2?"Name must include at least 2 characters":null,email:/^\S+@\S+$/.test(t.email)?null:"Invalid email"}:{}});return n.createElement(n.Fragment,null,n.createElement(w.v,{active:e},n.createElement(w.v.Step,{label:"First step",description:"Profile settings"},n.createElement(s.o,{label:"Username",placeholder:"Username",...o.getInputProps("username")}),n.createElement(y.W,{mt:"md",label:"Password",placeholder:"Password",...o.getInputProps("password")})),n.createElement(w.v.Step,{label:"Second step",description:"Personal information"},n.createElement(s.o,{label:"Name",placeholder:"Name",...o.getInputProps("name")}),n.createElement(s.o,{mt:"md",label:"Email",placeholder:"Email",...o.getInputProps("email")})),n.createElement(w.v.Step,{label:"Final step",description:"Social media"},n.createElement(s.o,{label:"Website",placeholder:"Website",...o.getInputProps("website")}),n.createElement(s.o,{mt:"md",label:"GitHub",placeholder:"GitHub",...o.getInputProps("github")})),n.createElement(w.v.Completed,null,"Completed! Form values:",n.createElement(E.E,{block:!0,mt:"xl"},JSON.stringify(o.values,null,2)))),n.createElement(g.Z,{justify:"flex-end",mt:"xl"},0!==e&&n.createElement(b.z,{variant:"default",onClick:()=>t(e=>e>0?e-1:e)},"Back"),3!==e&&n.createElement(b.z,{onClick:()=>t(e=>o.validate().hasErrors?e:e<3?e+1:e)},"Next step")))},code:I};var P=o(3916),N=o(54568);let D=(0,P.A)(N.us.formRecipes);function k(e){let t={h2:"h2",...(0,a.a)(),...e.components},{Demo:o}=t;return o||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"set-initial-values-with-async-request",children:"Set initial values with async request"}),"\n",(0,r.jsx)(o,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"save-form-values-to-local-storage",children:"Save form values to local storage"}),"\n",(0,r.jsx)(o,{data:u}),"\n",(0,r.jsx)(t.h2,{id:"list-items-reordering",children:"List items reordering"}),"\n",(0,r.jsx)(o,{data:S}),"\n",(0,r.jsx)(t.h2,{id:"form-with-multiple-steps",children:"Form with multiple steps"}),"\n",(0,r.jsx)(o,{data:C})]})}function F(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(D,{...e,children:(0,r.jsx)(k,{...e})})}},62150:function(e,t,o){"use strict";o.d(t,{M:function(){return p}});var r=o(27378),a=o(96739),n=o(6231),l=o(56589),s=o(50332),i={root:"m-4451eb3a"};let m={},p=(0,s.b)((e,t)=>{let o=(0,a.w)("Center",m,e),{classNames:s,className:p,style:c,styles:d,unstyled:u,vars:f,inline:v,mod:g,...h}=o,b=(0,n.y)({name:"Center",props:o,classes:i,className:p,style:c,classNames:s,styles:d,unstyled:u,vars:f});return r.createElement(l.x,{ref:t,mod:[{inline:v},g],...b("root"),...h})});p.classes=i,p.displayName="@mantine/core/Center"},25916:function(e,t,o){"use strict";o.d(t,{W:function(){return x}});var r=o(27378),a=o(40624),n=o(31002),l=o(58675),s=o(92082),i=o(83453),m=o(5564),p=o(6231),c=o(96739),d=o(55934),u=o(20410),f=o(84246),v=o(42487),g=o(23163),h={root:"m-f61ca620",input:"m-ccf8da4c",innerInput:"m-f2d85dd2",visibilityToggle:"m-b1072d44"};let b={visibilityToggleIcon:({reveal:e})=>r.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"}},r.createElement("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},E=(0,i.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,s.ap)(t,"psi-icon-size"),"--psi-button-size":(0,s.ap)(t,"psi-button-size")}})),x=(0,u.d)((e,t)=>{let o=(0,c.w)("PasswordInput",b,e),{classNames:s,className:i,style:u,styles:g,unstyled:x,vars:S,required:w,error:y,leftSection:I,disabled:C,id:P,variant:N,inputContainer:D,description:k,label:F,size:z,errorProps:B,descriptionProps:T,labelProps:V,withAsterisk:_,inputWrapperOrder:L,wrapperProps:j,radius:G,rightSection:Z,rightSectionWidth:O,rightSectionPointerEvents:J,leftSectionWidth:M,visible:A,defaultVisible:R,onVisibilityChange:W,visibilityToggleIcon:H,visibilityToggleButtonProps:$,rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,mod:q,...Q}=o,Y=(0,n.M)(P),[ee,et]=(0,l.C)({value:A,defaultValue:R,finalValue:!1,onChange:W}),eo=()=>et(!ee),er=(0,p.y)({name:"PasswordInput",classes:h,props:o,className:i,style:u,classNames:s,styles:g,unstyled:x,vars:S,varsResolver:E}),{resolvedClassNames:ea,resolvedStyles:en}=(0,m.h)({classNames:s,styles:g,props:o}),{styleProps:el,rest:es}=(0,d.c)(Q),ei=r.createElement(f.A,{...er("visibilityToggle"),disabled:C,radius:G,"aria-hidden":!$,tabIndex:-1,...$,variant:"subtle",color:"gray",unstyled:x,onMouseDown:e=>{e.preventDefault(),$?.onMouseDown?.(e),eo()},onKeyDown:e=>{$?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())}},r.createElement(H,{reveal:ee}));return r.createElement(v.I.Wrapper,{required:w,id:Y,label:F,error:y,description:k,size:z,classNames:ea,styles:en,__staticSelector:"PasswordInput",errorProps:B,descriptionProps:T,unstyled:x,withAsterisk:_,inputWrapperOrder:L,inputContainer:D,variant:N,labelProps:{...V,htmlFor:Y},mod:q,...er("root"),...el,...j},r.createElement(v.I,{component:"div",error:y,leftSection:I,size:z,classNames:{...ea,input:(0,a.Z)(h.input,ea.input)},styles:en,radius:G,disabled:C,__staticSelector:"PasswordInput",rightSectionWidth:O,rightSection:Z??ei,variant:N,unstyled:x,leftSectionWidth:M,rightSectionPointerEvents:J||"all",rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,withAria:!1},r.createElement("input",{required:w,"data-invalid":!!y||void 0,"data-with-left-section":!!I||void 0,...er("innerInput"),disabled:C,id:Y,ref:t,...es,autoComplete:es.autoComplete||"off",type:ee?"text":"password"})))});x.classes={...g.M.classes,...h},x.displayName="@mantine/core/PasswordInput"},35292:function(e,t,o){"use strict";o.d(t,{v:function(){return k}});var r=o(27378),a=o(71078),n=o(92082),l=o(83453),s=o(89738),i=o(34121),m=o(55357),p=o(96739),c=o(6231),d=o(56589),u=o(20410),f=o(71656);let[v,g]=(0,f.R)("Stepper component was not found in tree"),h=()=>null;h.displayName="@mantine/core/StepperCompleted";var b=o(2256),E=o(38765),x=o(42029),S=o(88101),w=o(19397),y={root:"m-cbb4ea7e",steps:"m-aaf89d0b",separator:"m-2a371ac9",content:"m-78da155d",step:"m-cbb57068","step--horizontal":"m-f56b1e2c","step--vertical":"m-833edb7e",verticalSeparator:"m-6496b3f3",stepWrapper:"m-818e70b",stepIcon:"m-1959ad01",stepCompletedIcon:"m-a79331dc",stepBody:"m-1956aa2a",stepLabel:"m-12051f6c",stepDescription:"m-164eea74"};let I=(e,t)=>"function"==typeof e?r.createElement(e,{step:t||0}):e,C={withIcon:!0,allowStepClick:!0,iconPosition:"left"},P=(0,u.d)((e,t)=>{let{classNames:o,className:a,style:n,styles:l,vars:i,step:m,state:c,color:d,icon:u,completedIcon:f,progressIcon:v,label:h,description:y,withIcon:P,iconSize:N,loading:D,allowStepClick:k,allowStepSelect:F,iconPosition:z,orientation:B,mod:T,...V}=(0,p.w)("StepperStep",C,e),_=g(),L=(0,b.rZ)(),j={classNames:o,styles:l},G="stepCompleted"===c?null:"stepProgress"===c?v:u,Z={"data-progress":"stepProgress"===c||void 0,"data-completed":"stepCompleted"===c||void 0};return r.createElement(w.k,{..._.getStyles("step",{className:a,style:n,variant:_.orientation,...j}),mod:[{"icon-position":z||_.iconPosition,"allow-click":k},T],ref:t,...Z,...V,__vars:{"--step-color":d?(0,s.p)(d,L):void 0},tabIndex:k?0:-1},P&&r.createElement("span",{..._.getStyles("stepWrapper",j)},r.createElement("span",{..._.getStyles("stepIcon",j),...Z},r.createElement(S.u,{mounted:"stepCompleted"===c,transition:"pop",duration:200},e=>r.createElement("span",{..._.getStyles("stepCompletedIcon",{style:e,...j})},D?r.createElement(x.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",..._.getStyles("stepLoader",j)}):I(f,m)||r.createElement(E.n,{size:"60%"}))),"stepCompleted"!==c?D?r.createElement(x.a,{..._.getStyles("stepLoader",j),size:"calc(var(--stepper-icon-size) / 2)",color:d}):I(G||u,m):null),"vertical"===B&&r.createElement("span",{..._.getStyles("verticalSeparator",j),"data-active":"stepCompleted"===c||void 0})),(h||y)&&r.createElement("span",{..._.getStyles("stepBody",j),"data-orientation":_.orientation,"data-icon-position":z||_.iconPosition},h&&r.createElement("span",{..._.getStyles("stepLabel",j)},I(h,m)),y&&r.createElement("span",{..._.getStyles("stepDescription",j)},I(y,m))))});P.classes=y,P.displayName="@mantine/core/StepperStep";let N={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},D=(0,l.Z)((e,{color:t,iconSize:o,size:r,contentPadding:l,radius:p,autoContrast:c})=>({root:{"--stepper-color":t?(0,s.p)(t,e):void 0,"--stepper-icon-color":(0,m.o)(c,e)?(0,i.R)({color:t,theme:e}):void 0,"--stepper-icon-size":void 0===o?(0,n.ap)(r,"stepper-icon-size"):(0,a.h)(o),"--stepper-content-padding":(0,n.bG)(l),"--stepper-radius":void 0===p?void 0:(0,n.H5)(p),"--stepper-fz":(0,n.yv)(r),"--stepper-spacing":(0,n.bG)(r)}})),k=(0,u.d)((e,t)=>{let o=(0,p.w)("Stepper",N,e),{classNames:a,className:n,style:l,styles:s,unstyled:i,vars:m,children:u,onStepClick:f,active:g,icon:b,completedIcon:E,progressIcon:x,color:S,iconSize:w,contentPadding:I,orientation:C,iconPosition:P,size:k,radius:F,allowNextStepsSelect:z,wrap:B,...T}=o,V=(0,c.y)({name:"Stepper",classes:y,props:o,className:n,style:l,classNames:a,styles:s,unstyled:i,vars:m,varsResolver:D}),_=r.Children.toArray(u),L=_.filter(e=>e.type!==h),j=_.find(e=>e.type===h),G=L.reduce((e,t,o)=>{let a=g===o?"stepProgress":g>o?"stepCompleted":"stepInactive",n="function"==typeof f&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===a||z);return e.push((0,r.cloneElement)(t,{icon:t.props.icon||b||o+1,key:o,step:o,state:a,onClick:()=>n&&f?.(o),allowStepClick:n,completedIcon:t.props.completedIcon||E,progressIcon:t.props.progressIcon||x,color:t.props.color||S,iconSize:w,radius:F,iconPosition:t.props.iconPosition||P,orientation:C,unstyled:i})),"horizontal"===C&&o!==L.length-1&&e.push(r.createElement("div",{...V("separator"),"data-active":oL.length-1?O:Z;return r.createElement(v,{value:{getStyles:V,orientation:C,iconPosition:P}},r.createElement(d.x,{...V("root"),ref:t,size:k,...T},r.createElement(d.x,{...V("steps"),mod:{orientation:C,"icon-position":P,wrap:B&&"vertical"!==C}},G),J&&r.createElement("div",{...V("content")},J)))});k.classes=y,k.displayName="@mantine/core/Stepper",k.Completed=h,k.Step=P}},function(e){e.O(0,[70846,30370,4038,15819,2775,56926,49774,92888,40179],function(){return e(e.s=94258)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/index-0c3ee589731d329c.js b/_next/static/chunks/pages/index-e09e1ca5418f1f4e.js similarity index 80% rename from _next/static/chunks/pages/index-0c3ee589731d329c.js rename to _next/static/chunks/pages/index-e09e1ca5418f1f4e.js index d5a642ebf61..3eddbcbc531 100644 --- a/_next/static/chunks/pages/index-0c3ee589731d329c.js +++ b/_next/static/chunks/pages/index-e09e1ca5418f1f4e.js @@ -308,4 +308,4 @@ function Demo() { ); -}`,d={type:"code",code:c,component:function(){let[e,t]=(0,r.useState)({x:.2,y:.6}),{ref:n,active:c}=(0,s.r)(t);return r.createElement(r.Fragment,null,r.createElement(o.Z,{justify:"center"},r.createElement("div",{ref:n,style:{width:(0,a.h)(400),height:(0,a.h)(120),backgroundColor:"var(--mantine-color-blue-light)",position:"relative"}},r.createElement("div",{style:{position:"absolute",left:`calc(${100*e.x}% - ${(0,a.h)(8)})`,top:`calc(${100*e.y}% - ${(0,a.h)(8)})`,width:(0,a.h)(16),height:(0,a.h)(16),backgroundColor:c?"var(--mantine-color-teal-7)":"var(--mantine-color-blue-7)"}}))),r.createElement(i.x,{ta:"center",mt:"sm"},"Values ",r.createElement(l.E,null,`{ x: ${Math.round(100*e.x)}, y: ${Math.round(100*e.y)} }`)))}}},29866:function(e,t,n){"use strict";n.d(t,{_:function(){return v}});var r=n(27378),o=n(93693),a=n(38956),i=n(98477),l=n(77188),s=n(22971),c=n(7033),d=n(25916),m=n(94193),u=n(26569),p=n(9136),h=n(8671),f=n(56926);function v({noShadow:e,noPadding:t,noSubmit:n,style:v}){let[x,g]=(0,r.useState)("register"),[b,y]=(0,r.useState)(!1),[w,j]=(0,r.useState)(null),E=(0,f.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return r.createElement(i.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...v,position:"relative",backgroundColor:"var(--mantine-color-body)"}},r.createElement("form",{onSubmit:E.onSubmit(()=>{y(!0),j(null),setTimeout(()=>{y(!1),j("register"===x?"User with this email already exists":"User with this email does not exist")},3e3)})},r.createElement(l.f,{visible:b}),"register"===x&&r.createElement(s.Z,{grow:!0},r.createElement(c.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...E.getInputProps("firstName")}),r.createElement(c.o,{required:!0,placeholder:"Your last name",label:"Last name",...E.getInputProps("lastName")})),r.createElement(c.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:r.createElement(o.Z,{size:16,stroke:1.5}),...E.getInputProps("email")}),r.createElement(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:r.createElement(a.Z,{size:16,stroke:1.5}),...E.getInputProps("password")}),"register"===x&&r.createElement(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:r.createElement(a.Z,{size:16,stroke:1.5}),...E.getInputProps("confirmPassword")}),"register"===x&&r.createElement(m.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...E.getInputProps("termsOfService",{type:"checkbox"})}),w&&r.createElement(u.x,{c:"red",size:"sm",mt:"sm"},w),!n&&r.createElement(s.Z,{justify:"space-between",mt:"xl"},r.createElement(p.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{g(e=>"register"===e?"login":"register"),j(null)},size:"sm"},"register"===x?"Have an account? Login":"Don't have an account? Register"),r.createElement(h.z,{color:"blue",type:"submit"},"register"===x?"Register":"Login"))))}},61871:function(e,t,n){"use strict";n.d(t,{l:function(){return I}});var r=n(27378),o=n(60213),a=n(83453),i=n(71078),l=n(92082),s=n(20410),c=n(96739),d=n(6231),m=n(40593),u=n(49134),p=n(19397),h=n(56589),f=n(1189),v=n(28086),x=n(71656);let[g,b]=(0,x.R)("Carousel component was not found in tree");var y={root:"m-17884d0f",viewport:"m-a2dae653",container:"m-fcd81474",controls:"m-39bc3463",control:"m-64f58e10",indicators:"m-71ea3ab1",indicator:"m-eae68602",slide:"m-d98df724"};let w={},j=(0,s.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:i,vars:l,mod:s,...d}=(0,c.w)("CarouselSlide",w,e),m=b();return r.createElement(h.x,{ref:t,mod:[{orientation:m.orientation},s],...m.getStyles("slide",{className:o,style:a,classNames:n,styles:i}),...d})});j.classes=y,j.displayName="@mantine/core/CarouselSlide";var E=n(2256),C=n(86689),_=n(75001),z=n(53007),k=n(31582),S=n(9889);function D({slideGap:e,slideSize:t,selector:n}){let o=(0,E.rZ)(),a=(0,C.L)({"--carousel-slide-gap":(0,l.bG)((0,_.v)(e)),"--carousel-slide-size":(0,i.h)((0,_.v)(t))}),s=(0,z.X)(o.breakpoints).reduce((n,r)=>(n[r]||(n[r]={}),"object"==typeof e&&void 0!==e[r]&&(n[r]["--carousel-slide-gap"]=(0,l.bG)(e[r])),"object"==typeof t&&void 0!==t[r]&&(n[r]["--carousel-slide-size"]=(0,l.bG)(t[r])),n),{}),c=(0,k.I)((0,z.X)(s),o).filter(e=>(0,z.X)(s[e.value]).length>0),d=c.map(e=>({query:`(min-width: ${o.breakpoints[e.value]})`,styles:s[e.value]}));return r.createElement(S.f,{styles:a,media:d,selector:n})}function N({dir:e,orientation:t,direction:n}){return"previous"===n?"horizontal"===t?90*("ltr"===e?1:-1):-180:"horizontal"===t?90*("ltr"===e?-1:1):0}let M={controlSize:26,controlsOffset:"sm",slideSize:"100%",slideGap:0,orientation:"horizontal",align:"center",slidesToScroll:1,includeGapInSize:!0,draggable:!0,dragFree:!1,loop:!1,speed:10,initialSlide:0,inViewThreshold:0,withControls:!0,withIndicators:!1,skipSnaps:!1,containScroll:"",withKeyboardEvents:!0},T=(0,a.Z)((e,{height:t,controlSize:n,controlsOffset:r})=>({root:{"--carousel-height":(0,i.h)(t),"--carousel-control-size":(0,i.h)(n),"--carousel-controls-offset":(0,l.bG)(r)}})),I=(0,s.d)((e,t)=>{let n=(0,c.w)("Carousel",M,e),{classNames:a,className:i,style:l,styles:s,unstyled:x,vars:b,children:w,getEmblaApi:j,onNextSlide:E,onPreviousSlide:C,onSlideChange:_,nextControlProps:z,previousControlProps:k,controlSize:S,controlsOffset:I,slideSize:P,slideGap:B,orientation:H,height:F,align:V,slidesToScroll:G,includeGapInSize:A,draggable:Z,dragFree:L,loop:R,speed:O,initialSlide:W,inViewThreshold:q,withControls:$,withIndicators:U,plugins:Y,nextControlIcon:J,previousControlIcon:X,skipSnaps:K,containScroll:Q,withKeyboardEvents:ee,mod:et,...en}=n,er=(0,d.y)({name:"Carousel",classes:y,props:n,className:i,style:l,classNames:a,styles:s,unstyled:x,vars:b,varsResolver:T}),eo=(0,m.m)(),{dir:ea}=(0,u.gm)(),[ei,el]=(0,o.Z)({axis:"horizontal"===H?"x":"y",direction:"horizontal"===H?ea:void 0,startIndex:W,loop:R,align:V,slidesToScroll:G,draggable:Z,dragFree:L,speed:O,inViewThreshold:q,skipSnaps:K,containScroll:Q},Y),[es,ec]=(0,r.useState)(0),[ed,em]=(0,r.useState)(0),eu=(0,r.useCallback)(e=>el&&el.scrollTo(e),[el]),ep=(0,r.useCallback)(()=>{if(!el)return;let e=el.selectedScrollSnap();ec(e),_?.(e)},[el,ec]),eh=(0,r.useCallback)(()=>{el?.scrollPrev(),C?.()},[el]),ef=(0,r.useCallback)(()=>{el?.scrollNext(),E?.()},[el]),ev=(0,r.useCallback)(e=>{ee&&("ArrowRight"===e.key&&(e.preventDefault(),ef()),"ArrowLeft"===e.key&&(e.preventDefault(),eh()))},[el]);(0,r.useEffect)(()=>{if(el)return j?.(el),ep(),em(el.scrollSnapList().length),el.on("select",ep),()=>{el.off("select",ep)}},[el,G]),(0,r.useEffect)(()=>{el&&(el.reInit(),em(el.scrollSnapList().length),ec(e=>(0,v.u)(e,0,r.Children.toArray(w).length-1)))},[r.Children.toArray(w).length,G]);let ex=el?.canScrollPrev()||!1,eg=el?.canScrollNext()||!1,eb=Array(ed).fill(0).map((e,t)=>r.createElement(p.k,{...er("indicator"),key:t,"data-active":t===es||void 0,"aria-hidden":!0,tabIndex:-1,onClick:()=>eu(t)}));return r.createElement(g,{value:{getStyles:er,orientation:H}},r.createElement(D,{...n,selector:`.${eo}`}),r.createElement(h.x,{ref:t,...er("root",{className:eo}),...en,mod:[{orientation:H,"include-gap-in-size":A},et],onKeyDownCapture:ev},r.createElement("div",{...er("viewport"),ref:ei},r.createElement("div",{...er("container"),"data-orientation":H},w)),U&&r.createElement("div",{...er("indicators")},eb),$&&r.createElement("div",{...er("controls")},r.createElement(p.k,{...k,...er("control",{className:k?.className,style:k?.style}),onClick:e=>{eh(),k?.onClick?.(e)},"data-inactive":!ex||void 0,tabIndex:ex?0:-1},void 0!==X?X:r.createElement(f.Q,{style:{transform:`rotate(${N({dir:ea,orientation:H,direction:"previous"})}deg)`}})),r.createElement(p.k,{...er("control",{className:z?.className,style:z?.style}),...z,onClick:e=>{ef(),z?.onClick?.(e)},"data-inactive":!eg||void 0,tabIndex:eg?0:-1},void 0!==J?J:r.createElement(f.Q,{style:{transform:`rotate(${N({dir:ea,orientation:H,direction:"next"})}deg)`}})))))});I.classes=y,I.displayName="@mantine/core/Carousel",I.Slide=j},85702:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(27378);function o(e,t){(0,r.useEffect)(()=>{e&&window.setTimeout(()=>{e.reInit()},t)},[e,t])}},26720:function(e,t,n){"use strict";n.d(t,{F:function(){return v}});var r=n(27378),o=n(31002),a=n(58675),i=n(5564),l=n(96739),s=n(20410),c=n(2161),d=n(38099),m=n(45608),u=n(81097),p=n(54526),h=n(23163);let f={},v=(0,s.d)((e,t)=>{let n=(0,l.w)("Autocomplete",f,e),{classNames:s,styles:v,unstyled:x,vars:g,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:j,onFocus:E,onBlur:C,onClick:_,onChange:z,data:k,value:S,defaultValue:D,selectFirstOptionOnChange:N,onOptionSubmit:M,comboboxProps:T,readOnly:I,disabled:P,filter:B,limit:H,withScrollArea:F,maxDropdownHeight:V,size:G,id:A,...Z}=n,L=(0,o.M)(A),R=(0,c.R)(k),O=(0,d.g)(R),[W,q]=(0,a.C)({value:S,defaultValue:D,finalValue:"",onChange:z}),$=(0,p.K)({opened:b,defaultOpened:y,onDropdownOpen:j,onDropdownClose:()=>{w?.(),$.resetSelectedOption()}}),{resolvedClassNames:U,resolvedStyles:Y}=(0,i.h)({props:n,styles:v,classNames:s});return(0,r.useEffect)(()=>{N&&$.selectFirstOption()},[N,W]),r.createElement(m.h,{store:$,__staticSelector:"Autocomplete",classNames:U,styles:Y,unstyled:x,readOnly:I,onOptionSubmit:e=>{M?.(e),q(O[e].label),$.closeDropdown()},size:G,...T},r.createElement(m.h.Target,null,r.createElement(h.M,{ref:t,...Z,size:G,__staticSelector:"Autocomplete",disabled:P,readOnly:I,value:W,onChange:e=>{q(e.currentTarget.value),$.openDropdown(),N&&$.selectFirstOption()},onFocus:e=>{$.openDropdown(),E?.(e)},onBlur:e=>{$.closeDropdown(),C?.(e)},onClick:e=>{$.openDropdown(),_?.(e)},classNames:U,styles:Y,unstyled:x,id:L})),r.createElement(u.r,{data:R,hidden:I||P,filter:B,search:W,limit:H,hiddenWhenEmpty:!0,withScrollArea:F,maxDropdownHeight:V,unstyled:x,labelId:`${L}-label`}))});v.classes={...h.M.classes,...m.h.classes},v.displayName="@mantine/core/Autocomplete"},73988:function(e,t,n){"use strict";n.d(t,{C:function(){return h}});var r=n(27378),o=n(92082),a=n(83453),i=n(89738),l=n(96739),s=n(6231),c=n(56589),d=n(50332),m={root:"m-347db0ec","root--dot":"m-fbd81e3d",label:"m-5add502a",section:"m-91fdda9b"};let u={},p=(0,a.Z)((e,{radius:t,color:n,gradient:r,variant:a,size:l,autoContrast:s})=>{let c=e.variantColorResolver({color:n||e.primaryColor,theme:e,gradient:r,variant:a||"filled",autoContrast:s});return{root:{"--badge-height":(0,o.ap)(l,"badge-height"),"--badge-padding-x":(0,o.ap)(l,"badge-padding-x"),"--badge-fz":(0,o.ap)(l,"badge-fz"),"--badge-radius":void 0===t?void 0:(0,o.H5)(t),"--badge-bg":n||a?c.background:void 0,"--badge-color":n||a?c.color:void 0,"--badge-bd":n||a?c.border:void 0,"--badge-dot-color":"dot"===a?(0,i.p)(n,e):void 0}}}),h=(0,d.b)((e,t)=>{let n=(0,l.w)("Badge",u,e),{classNames:o,className:a,style:i,styles:d,unstyled:h,vars:f,radius:v,color:x,gradient:g,leftSection:b,rightSection:y,children:w,variant:j,fullWidth:E,autoContrast:C,circle:_,mod:z,...k}=n,S=(0,s.y)({name:"Badge",props:n,classes:m,className:a,style:i,classNames:o,styles:d,unstyled:h,vars:f,varsResolver:p});return r.createElement(c.x,{variant:j,mod:[{block:E,circle:_},z],...S("root",{variant:j}),ref:t,...k},b&&r.createElement("span",{...S("section"),"data-position":"left"},b),r.createElement("span",{...S("label")},w),y&&r.createElement("span",{...S("section"),"data-position":"right"},y))});h.classes=m,h.displayName="@mantine/core/Badge"},78415:function(e,t,n){"use strict";n.d(t,{T:function(){return z}});var r=n(27378),o=n(58675),a=n(37443),i=n(82591),l=n(92082),s=n(83453),c=n(5564),d=n(6231),m=n(96739),u=n(20410),p=n(84246),h=n(36227),f=n(45035),v=n(84668),x=n(16202),g=n(42487),b=n(69859),y=n(23163),w=n(63433);function j({style:e,...t}){return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--ci-eye-dropper-icon-size)",height:"var(--ci-eye-dropper-icon-size)",...e},viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t},r.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),r.createElement("path",{d:"M11 7l6 6"}),r.createElement("path",{d:"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z"}))}var E={eyeDropperIcon:"m-b077c2bc",colorPreview:"m-c5ccdcab",dropdown:"m-5ece2cd7"};let C={format:"hex",fixOnBlur:!0,withPreview:!0,swatchesPerRow:7,withPicker:!0,popoverProps:{transitionProps:{transition:"fade",duration:0}},withEyeDropper:!0},_=(0,s.Z)((e,{size:t})=>({eyeDropperIcon:{"--ci-eye-dropper-icon-size":(0,l.ap)(t,"ci-eye-dropper-icon-size")},colorPreview:{"--ci-preview-size":(0,l.ap)(t,"ci-preview-size")}})),z=(0,u.d)((e,t)=>{let n=(0,m.w)("ColorInput",C,e),{classNames:l,styles:s,unstyled:u,disallowInput:y,fixOnBlur:z,popoverProps:k,withPreview:S,withEyeDropper:D,eyeDropperIcon:N,closeOnColorSwatchClick:M,eyeDropperButtonProps:T,value:I,defaultValue:P,onChange:B,onChangeEnd:H,onClick:F,onFocus:V,onBlur:G,inputProps:A,format:Z,wrapperProps:L,readOnly:R,withPicker:O,swatches:W,disabled:q,leftSection:$,rightSection:U,swatchesPerRow:Y,...J}=(0,b.k)("ColorInput",C,e),X=(0,d.y)({name:"ColorInput",props:n,classes:E,classNames:l,styles:s,unstyled:u,rootSelector:"wrapper",vars:n.vars,varsResolver:_}),{resolvedClassNames:K,resolvedStyles:Q}=(0,c.h)({classNames:l,styles:s,props:n}),[ee,et]=(0,r.useState)(!1),[en,er]=(0,r.useState)(""),[eo,ea]=(0,o.C)({value:I,defaultValue:P,finalValue:"",onChange:B}),{supported:ei,open:el}=(0,a.s)(),es=r.createElement(p.A,{...T,...X("eyeDropperButton",{className:T?.className,style:T?.style}),variant:"subtle",color:"gray",size:A.size,unstyled:u,onClick:()=>el().then(e=>{if(e?.sRGBHex){let t=(0,f.Rt)(Z,(0,v.lu)(e.sRGBHex));ea(t),H?.(t)}}).catch(()=>{})},N||r.createElement(j,{...X("eyeDropperIcon")}));return(0,r.useEffect)(()=>{((0,v.fi)(eo)||""===eo.trim())&&er(eo)},[eo]),(0,i.l)(()=>{(0,v.fi)(eo)&&ea((0,f.Rt)(Z,(0,v.lu)(eo)))},[Z]),r.createElement(g.I.Wrapper,{...L,classNames:K,styles:Q,__staticSelector:"ColorInput"},r.createElement(w.J,{__staticSelector:"ColorInput",position:"bottom-start",offset:5,...k,opened:ee,classNames:K,styles:Q,unstyled:u,withRoles:!1,disabled:R||!1===O&&(!Array.isArray(W)||0===W.length)},r.createElement(w.J.Target,null,r.createElement(g.I,{autoComplete:"off",...J,...A,classNames:K,styles:Q,disabled:q,ref:t,__staticSelector:"ColorInput",onFocus:e=>{V?.(e),et(!0)},onBlur:e=>{z&&ea(en),G?.(e),et(!1)},onClick:e=>{F?.(e),et(!0)},spellCheck:!1,value:eo,onChange:e=>{let t=e.currentTarget.value;ea(t),(0,v.fi)(t)&&H?.(f.Rt(Z,v.lu(t)))},leftSection:$||(S?r.createElement(x.b,{color:(0,v.fi)(eo)?eo:"#fff",size:"var(--ci-preview-size)",...X("colorPreview")}):null),readOnly:y||R,pointer:y,unstyled:u,rightSection:U||(D&&!q&&!R&&ei?es:null)})),r.createElement(w.J.Dropdown,{onMouseDown:e=>e.preventDefault(),className:E.dropdown},r.createElement(h.z,{__staticSelector:"ColorInput",value:eo,onChange:ea,onChangeEnd:H,format:Z,swatches:W,swatchesPerRow:Y,withPicker:O,size:A.size,focusable:!1,unstyled:u,styles:Q,classNames:K,onColorSwatchClick:()=>M&&et(!1)}))))});z.classes=y.M.classes,z.displayName="@mantine/core/ColorInput"},67181:function(e,t,n){"use strict";n.d(t,{i:function(){return h}});var r=n(27378),o=n(92082),a=n(83453),i=n(89738),l=n(96739),s=n(6231),c=n(56589),d=n(20410),m={root:"m-3eebeb36",label:"m-9e365f20"};let u={orientation:"horizontal"},p=(0,a.Z)((e,{color:t,variant:n,size:r})=>({root:{"--divider-color":t?(0,i.p)(t,e):void 0,"--divider-border-style":n,"--divider-size":(0,o.ap)(r,"divider-size")}})),h=(0,d.d)((e,t)=>{let n=(0,l.w)("Divider",u,e),{classNames:o,className:a,style:i,styles:d,unstyled:h,vars:f,color:v,orientation:x,label:g,labelPosition:b,mod:y,...w}=n,j=(0,s.y)({name:"Divider",classes:m,props:n,className:a,style:i,classNames:o,styles:d,unstyled:h,vars:f,varsResolver:p});return r.createElement(c.x,{ref:t,mod:[{orientation:x,"with-label":!!g},y],...j("root"),...w,role:"separator"},g&&r.createElement(c.x,{component:"span",mod:{position:b},...j("label")},g))});h.classes=m,h.displayName="@mantine/core/Divider"},67968:function(e,t,n){"use strict";n.d(t,{d:function(){return L}});var r=n(27378),o=n(13041),a=n(96739),i=n(20410),l=n(65784),s=n(71656);let[c,d]=(0,s.R)("Drawer component was not found in tree");var m={root:"m-f11b401e",header:"m-5a7c2c9",content:"m-b8a05bbd",inner:"m-31cd769a"};let u={},p=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerBody",u,e),{classNames:o,className:i,style:s,styles:c,vars:m,...p}=n,h=d();return r.createElement(l.y,{ref:t,...h.getStyles("body",{classNames:o,style:s,styles:c,className:i}),...p})});p.classes=m,p.displayName="@mantine/core/DrawerBody";var h=n(76643);let f={},v=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerCloseButton",f,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(h._,{ref:t,...u.getStyles("close",{classNames:o,style:l,styles:s,className:i}),...m})});v.classes=m,v.displayName="@mantine/core/DrawerCloseButton";var x=n(22344),g=n(4588);let b={},y=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerContent",b,e),{classNames:o,className:i,style:l,styles:s,vars:c,children:m,radius:u,...p}=n,h=d(),f=h.scrollAreaComponent||g.Z;return r.createElement(x.G,{...h.getStyles("content",{className:i,style:l,styles:s,classNames:o}),innerProps:h.getStyles("inner",{className:i,style:l,styles:s,classNames:o}),ref:t,...p,radius:u||h.radius||0},r.createElement(f,{style:{height:"100vh"}},m))});y.classes=m,y.displayName="@mantine/core/DrawerContent";var w=n(71281);let j={},E=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerHeader",j,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(w.o,{ref:t,...u.getStyles("header",{classNames:o,style:l,styles:s,className:i}),...m})});E.classes=m,E.displayName="@mantine/core/DrawerHeader";var C=n(51382);let _={},z=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerOverlay",_,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(C.e,{ref:t,...u.getStyles("overlay",{classNames:o,style:l,styles:s,className:i}),...m})});z.classes=m,z.displayName="@mantine/core/DrawerOverlay";var k=n(71078),S=n(92082),D=n(83453),N=n(6231),M=n(49134),T=n(45058);let I={top:"slide-down",bottom:"slide-up",left:"slide-right",right:"slide-left"},P={top:"slide-down",bottom:"slide-up",right:"slide-right",left:"slide-left"},B={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),position:"left"},H=(0,D.Z)((e,{position:t,size:n,offset:r})=>({root:{"--drawer-size":(0,S.ap)(n,"drawer-size"),"--drawer-flex":function(e){if("top"===e||"bottom"===e)return"0 0 calc(100% - var(--drawer-offset, 0rem) * 2)"}(t),"--drawer-height":"left"===t||"right"===t?void 0:"var(--drawer-size)","--drawer-align":function(e){switch(e){case"top":return"flex-start";case"bottom":return"flex-end";default:return}}(t),"--drawer-justify":"right"===t?"flex-end":void 0,"--drawer-offset":(0,k.h)(r)}})),F=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerRoot",B,e),{classNames:o,className:i,style:l,styles:s,unstyled:d,vars:u,scrollAreaComponent:p,position:h,transitionProps:f,radius:v,...x}=n,{dir:g}=(0,M.gm)(),b=(0,N.y)({name:"Drawer",classes:m,props:n,className:i,style:l,classNames:o,styles:s,unstyled:d,vars:u,varsResolver:H}),y=("rtl"===g?P:I)[h];return r.createElement(c,{value:{scrollAreaComponent:p,getStyles:b,radius:v}},r.createElement(T.e,{ref:t,...b("root"),transitionProps:{transition:y,...f},unstyled:d,...x}))});F.classes=m,F.displayName="@mantine/core/DrawerRoot";var V=n(86053);let G={},A=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerTitle",G,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(V.q,{ref:t,...u.getStyles("title",{classNames:o,style:l,styles:s,className:i}),...m})});A.classes=m,A.displayName="@mantine/core/DrawerTitle";let Z={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),withOverlay:!0,withCloseButton:!0},L=(0,i.d)((e,t)=>{let{title:n,withOverlay:o,overlayProps:i,withCloseButton:l,closeButtonProps:s,children:c,...d}=(0,a.w)("Drawer",Z,e),m=!!n||l;return r.createElement(F,{ref:t,...d},o&&r.createElement(z,{...i}),r.createElement(y,null,m&&r.createElement(E,null,n&&r.createElement(A,null,n),l&&r.createElement(v,{...s})),r.createElement(p,null,c)))});L.classes=m,L.displayName="@mantine/core/Drawer",L.Root=F,L.Overlay=z,L.Content=y,L.Body=p,L.Header=E,L.Title=A,L.CloseButton=v},13110:function(e,t,n){"use strict";n.d(t,{r:function(){return T}});var r=n(27378),o=n(83453),a=n(96739),i=n(6231),l=n(40593),s=n(56589),c=n(20410),d=n(71656);let[m,u]=(0,d.R)("Grid component was not found in tree");var p=n(40624),h=n(53007),f=n(86689),v=n(31582),x=n(75001),g=n(2256),b=n(9889);let y=(e,t)=>"content"===e?"auto":"auto"===e?"0rem":e?`${100/(t/e)}%`:void 0,w=(e,t,n)=>n||"auto"===e?"100%":"content"===e?"unset":y(e,t),j=(e,t)=>{if(e)return"auto"===e||t?"1":"auto"},E=(e,t)=>0===e?"0":e?`${100/(t/e)}%`:void 0;function C({span:e,order:t,offset:n,selector:o}){let a=(0,g.rZ)(),i=u(),l=(0,x.v)(e),s=void 0===l?12:(0,x.v)(e),c=(0,f.L)({"--col-order":x.v(t)?.toString(),"--col-flex-grow":j(s,i.grow),"--col-flex-basis":y(s,i.columns),"--col-width":"content"===s?"auto":void 0,"--col-max-width":w(s,i.columns,i.grow),"--col-offset":E((0,x.v)(n),i.columns)}),d=(0,h.X)(a.breakpoints).reduce((r,o)=>(r[o]||(r[o]={}),"object"==typeof t&&void 0!==t[o]&&(r[o]["--col-order"]=t[o]?.toString()),"object"==typeof e&&void 0!==e[o]&&(r[o]["--col-flex-grow"]=j(e[o],i.grow),r[o]["--col-flex-basis"]=y(e[o],i.columns),r[o]["--col-width"]="content"===e[o]?"auto":void 0,r[o]["--col-max-width"]=w(e[o],i.columns,i.grow)),"object"==typeof n&&void 0!==n[o]&&(r[o]["--col-offset"]=E(n[o],i.columns)),r),{}),m=(0,v.I)((0,h.X)(d),a).filter(e=>(0,h.X)(d[e.value]).length>0),p=m.map(e=>({query:`(min-width: ${a.breakpoints[e.value]})`,styles:d[e.value]}));return r.createElement(b.f,{styles:c,media:p,selector:o})}var _={root:"m-410352e9",inner:"m-dee7bd2f",col:"m-96bdd299"};let z={span:12},k=(0,c.d)((e,t)=>{let n=(0,a.w)("GridCol",z,e),{classNames:o,className:i,style:c,styles:d,vars:m,span:h,order:f,offset:v,...x}=n,g=u(),b=(0,l.m)();return r.createElement(r.Fragment,null,r.createElement(C,{selector:`.${b}`,span:h,order:f,offset:v}),r.createElement(s.x,{ref:t,...g.getStyles("col",{className:(0,p.Z)(i,b),style:c,classNames:o,styles:d}),...x}))});k.classes=_,k.displayName="@mantine/core/GridCol";var S=n(92082);function D({gutter:e,selector:t}){let n=(0,g.rZ)(),o=(0,f.L)({"--grid-gutter":(0,S.bG)((0,x.v)(e))}),a=(0,h.X)(n.breakpoints).reduce((t,n)=>(t[n]||(t[n]={}),"object"==typeof e&&void 0!==e[n]&&(t[n]["--grid-gutter"]=(0,S.bG)(e[n])),t),{}),i=(0,v.I)((0,h.X)(a),n).filter(e=>(0,h.X)(a[e.value]).length>0),l=i.map(e=>({query:`(min-width: ${n.breakpoints[e.value]})`,styles:a[e.value]}));return r.createElement(b.f,{styles:o,media:l,selector:t})}let N={gutter:"md",grow:!1,columns:12},M=(0,o.Z)((e,{justify:t,align:n,overflow:r})=>({root:{"--grid-justify":t,"--grid-align":n,"--grid-overflow":r}})),T=(0,c.d)((e,t)=>{let n=(0,a.w)("Grid",N,e),{classNames:o,className:c,style:d,styles:u,unstyled:p,vars:h,grow:f,gutter:v,columns:x,align:g,justify:b,children:y,...w}=n,j=(0,i.y)({name:"Grid",classes:_,props:n,className:c,style:d,classNames:o,styles:u,unstyled:p,vars:h,varsResolver:M}),E=(0,l.m)();return r.createElement(m,{value:{getStyles:j,grow:f,columns:x}},r.createElement(D,{selector:`.${E}`,...n}),r.createElement(s.x,{ref:t,...j("root",{className:E}),...w},r.createElement("div",{...j("inner")},y)))});T.classes=_,T.displayName="@mantine/core/Grid",T.Col=k},38266:function(e,t,n){"use strict";n.d(t,{z:function(){return g}});var r=n(27378),o=n(87921),a=n(96739),i=n(91531),l=n(63433),s=n(71656);let[c,d]=(0,s.R)("HoverCard component was not found in the tree");var m=n(41664);let u={};function p(e){let{children:t,onMouseEnter:n,onMouseLeave:o,...i}=(0,a.w)("HoverCardDropdown",u,e),s=d(),c=(0,m.x)(n,s.openDropdown),p=(0,m.x)(o,s.closeDropdown);return r.createElement(l.J.Dropdown,{onMouseEnter:c,onMouseLeave:p,...i},t)}p.displayName="@mantine/core/HoverCardDropdown";var h=n(513);let f={refProp:"ref"},v=(0,r.forwardRef)((e,t)=>{let{children:n,refProp:o,eventPropsWrapperName:i,...s}=(0,a.w)("HoverCardTarget",f,e);if(!(0,h.k)(n))throw Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let c=d(),u=(0,m.x)(n.props.onMouseEnter,c.openDropdown),p=(0,m.x)(n.props.onMouseLeave,c.closeDropdown),v={onMouseEnter:u,onMouseLeave:p};return r.createElement(l.J.Target,{refProp:o,ref:t,...s},(0,r.cloneElement)(n,i?{[i]:v}:v))});v.displayName="@mantine/core/HoverCardTarget";let x={openDelay:0,closeDelay:150,initiallyOpened:!1};function g(e){let{children:t,onOpen:n,onClose:s,openDelay:d,closeDelay:m,initiallyOpened:u,...p}=(0,a.w)("HoverCard",x,e),[h,{open:f,close:v}]=(0,o.q)(u,{onClose:s,onOpen:n}),{openDropdown:g,closeDropdown:b}=(0,i.U)({open:f,close:v,openDelay:d,closeDelay:m});return r.createElement(c,{value:{openDropdown:g,closeDropdown:b}},r.createElement(l.J,{...p,opened:h,__staticSelector:"HoverCard"},t))}g.displayName="@mantine/core/HoverCard",g.Target=v,g.Dropdown=p,g.extend=e=>e},58818:function(e,t,n){"use strict";n.d(t,{E:function(){return Image}});var r=n(27378),o=n(92082),a=n(83453),i=n(96739),l=n(6231),s=n(56589),c=n(50332),d={root:"m-9e117634"};let m={},u=(0,a.Z)((e,{radius:t,fit:n})=>({root:{"--image-radius":void 0===t?void 0:(0,o.H5)(t),"--image-object-fit":n}})),Image=(0,c.b)((e,t)=>{let n=(0,i.w)("Image",m,e),{classNames:o,className:a,style:c,styles:p,unstyled:h,vars:f,onError:v,src:x,radius:g,fit:b,fallbackSrc:y,mod:w,...j}=n,[E,C]=(0,r.useState)(!x);(0,r.useEffect)(()=>C(!x),[x]);let _=(0,l.y)({name:"Image",classes:d,props:n,className:a,style:c,classNames:o,styles:p,unstyled:h,vars:f,varsResolver:u});return E&&y?r.createElement(s.x,{component:"img",src:y,..._("root"),onError:v,mod:["fallback",w],...j}):r.createElement(s.x,{component:"img",ref:t,..._("root"),src:x,onError:e=>{v?.(e),C(!0)},mod:w,...j})});Image.classes=d,Image.displayName="@mantine/core/Image"},77188:function(e,t,n){"use strict";n.d(t,{f:function(){return x}});var r=n(27378),o=n(13041),a=n(83453),i=n(2256),l=n(96739),s=n(6231),c=n(56589),d=n(20410),m=n(42029),u=n(7118),p=n(88101),h={root:"m-6e45937b",loader:"m-e8eb006c",overlay:"m-df587f17"};let f={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,o.w)("overlay")},v=(0,a.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),x=(0,d.d)((e,t)=>{let n=(0,l.w)("LoadingOverlay",f,e),{classNames:o,className:a,style:d,styles:x,unstyled:g,vars:b,transitionProps:y,loaderProps:w,overlayProps:j,visible:E,zIndex:C,..._}=n,z=(0,i.rZ)(),k=(0,s.y)({name:"LoadingOverlay",classes:h,props:n,className:a,style:d,classNames:o,styles:x,unstyled:g,vars:b,varsResolver:v}),S={...f.overlayProps,...j};return r.createElement(p.u,{transition:"fade",...y,mounted:!!E},e=>r.createElement(c.x,{...k("root",{style:e}),ref:t,..._},r.createElement(m.a,{...k("loader"),unstyled:g,...w}),r.createElement(u.a,{...S,...k("overlay"),"data-light":!0,unstyled:g,color:j?.color||z.white}),r.createElement(u.a,{...S,...k("overlay"),"data-dark":!0,unstyled:g,color:j?.color||z.colors.dark[5]})))});x.classes=h,x.displayName="@mantine/core/LoadingOverlay"},41307:function(e,t,n){"use strict";n.d(t,{t:function(){return V}});var r=n(27378),o=n(96739),a=n(20410),i=n(22971),l=n(19397),s=n(71656);let[c,d]=(0,s.R)("Pagination.Root component was not found in tree");var m={root:"m-4addd315",control:"m-326d024a",dots:"m-4ad7767d"};let u={withPadding:!0},p=(0,a.d)((e,t)=>{let n=(0,o.w)("PaginationControl",u,e),{classNames:a,className:i,style:s,styles:c,vars:m,active:p,disabled:h,withPadding:f,mod:v,...x}=n,g=d(),b=h||g.disabled;return r.createElement(l.k,{ref:t,disabled:b,mod:[{active:p,disabled:b,"with-padding":f},v],...g.getStyles("control",{className:i,style:s,classNames:a,styles:c,active:!b}),...x})});p.classes=m,p.displayName="@mantine/core/PaginationControl";var h=n(56589);function f({style:e,children:t,path:n,...o}){return r.createElement("svg",{viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)",...e},...o},r.createElement("path",{d:n,fill:"currentColor"}))}let v={icon:e=>r.createElement(f,{...e,path:"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"})},x=(0,a.d)((e,t)=>{let n=(0,o.w)("PaginationDots",v,e),{classNames:a,className:i,style:l,styles:s,vars:c,icon:m,...u}=n,p=d();return r.createElement(h.x,{ref:t,...p.getStyles("dots",{className:i,style:l,styles:s,classNames:a}),...u},r.createElement(m,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});x.classes=m,x.displayName="@mantine/core/PaginationDots";var g=n(31788);function b({icon:e,name:t,action:n,type:a}){let i={icon:e},l=(0,r.forwardRef)((e,l)=>{let{icon:s,...c}=(0,o.w)(t,i,e),m=d(),u="next"===a?m.active===m.total:1===m.active;return r.createElement(p,{disabled:m.disabled||u,ref:l,onClick:m[n],withPadding:!1,...c},r.createElement(s,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});return l.displayName=`@mantine/core/${t}`,(0,g.F)(l)}let y=b({icon:e=>r.createElement(f,{...e,path:"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"}),name:"PaginationNext",action:"onNext",type:"next"}),w=b({icon:e=>r.createElement(f,{...e,path:"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"}),name:"PaginationPrevious",action:"onPrevious",type:"previous"}),j=b({icon:e=>r.createElement(f,{...e,path:"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"}),name:"PaginationFirst",action:"onFirst",type:"previous"}),E=b({icon:e=>r.createElement(f,{...e,path:"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"}),name:"PaginationLast",action:"onLast",type:"next"});function C({dotsIcon:e}){let t=d(),n=t.range.map((n,o)=>"dots"===n?r.createElement(x,{icon:e,key:o}):r.createElement(p,{key:o,active:n===t.active,"aria-current":n===t.active?"page":void 0,onClick:()=>t.onChange(n),disabled:t.disabled,...t.getItemProps?.(n)},n));return r.createElement(r.Fragment,null,n)}C.displayName="@mantine/core/PaginationItems";var _=n(58675);function z(e,t){return Array.from({length:t-e+1},(t,n)=>n+e)}let k="dots";var S=n(92082),D=n(41664),N=n(83453),M=n(89738),T=n(34121),I=n(6231);let P={siblings:1,boundaries:1},B=(0,N.Z)((e,{size:t,radius:n,color:r,autoContrast:o})=>({root:{"--pagination-control-radius":void 0===n?void 0:(0,S.H5)(n),"--pagination-control-size":(0,S.ap)(t,"pagination-control-size"),"--pagination-control-fz":(0,S.yv)(t),"--pagination-active-bg":r?(0,M.p)(r,e):void 0,"--pagination-active-color":o?(0,T.R)({color:r,theme:e}):void 0}})),H=(0,a.d)((e,t)=>{let n=(0,o.w)("PaginationRoot",P,e),{classNames:a,className:i,style:l,styles:s,unstyled:d,vars:u,total:p,value:f,defaultValue:v,onChange:x,disabled:g,siblings:b,boundaries:y,color:w,radius:j,onNextPage:E,onPreviousPage:C,onFirstPage:S,onLastPage:N,getItemProps:M,autoContrast:T,...H}=n,F=(0,I.y)({name:"Pagination",classes:m,props:n,className:i,style:l,classNames:a,styles:s,unstyled:d,vars:u,varsResolver:B}),{range:V,setPage:G,next:A,previous:Z,active:L,first:R,last:O}=function({total:e,siblings:t=1,boundaries:n=1,page:o,initialPage:a=1,onChange:i}){let l=Math.max(Math.trunc(e),0),[s,c]=(0,_.C)({value:o,onChange:i,defaultValue:a,finalValue:a}),d=e=>{e<=0?c(1):e>l?c(l):c(e)},m=(0,r.useMemo)(()=>{let e=2*t+3+2*n;if(e>=l)return z(1,l);let r=Math.max(s-t,n),o=Math.min(s+t,l-n),a=r>n+2,i=od(s+1),previous:()=>d(s-1),first:()=>d(1),last:()=>d(l)}}({page:f,initialPage:v,onChange:x,total:p,siblings:b,boundaries:y}),W=(0,D.x)(E,A),q=(0,D.x)(C,Z),$=(0,D.x)(S,R),U=(0,D.x)(N,O);return r.createElement(c,{value:{total:p,range:V,active:L,disabled:g,getItemProps:M,onChange:G,onNext:W,onPrevious:q,onFirst:$,onLast:U,getStyles:F}},r.createElement(h.x,{ref:t,...F("root"),...H}))});H.classes=m,H.displayName="@mantine/core/PaginationRoot";let F={withControls:!0,siblings:1,boundaries:1,gap:8},V=(0,a.d)((e,t)=>{let n=(0,o.w)("Pagination",F,e),{withEdges:a,withControls:l,getControlProps:s,nextIcon:c,previousIcon:d,lastIcon:m,firstIcon:u,dotsIcon:p,total:h,gap:f,...v}=n;return h<=0?null:r.createElement(H,{ref:t,total:h,...v},r.createElement(i.Z,{gap:f},a&&r.createElement(j,{icon:u,...s?.("first")}),l&&r.createElement(w,{icon:d,...s?.("previous")}),r.createElement(C,{dotsIcon:p}),l&&r.createElement(y,{icon:c,...s?.("next")}),a&&r.createElement(E,{icon:m,...s?.("last")})))});V.classes=m,V.displayName="@mantine/core/Pagination",V.Root=H,V.Control=p,V.Dots=x,V.First=j,V.Last=E,V.Next=y,V.Previous=w,V.Items=C},25916:function(e,t,n){"use strict";n.d(t,{W:function(){return y}});var r=n(27378),o=n(40624),a=n(31002),i=n(58675),l=n(92082),s=n(83453),c=n(5564),d=n(6231),m=n(96739),u=n(55934),p=n(20410),h=n(84246),f=n(42487),v=n(23163),x={root:"m-f61ca620",input:"m-ccf8da4c",innerInput:"m-f2d85dd2",visibilityToggle:"m-b1072d44"};let g={visibilityToggleIcon:({reveal:e})=>r.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"}},r.createElement("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},b=(0,s.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),y=(0,p.d)((e,t)=>{let n=(0,m.w)("PasswordInput",g,e),{classNames:l,className:s,style:p,styles:v,unstyled:y,vars:w,required:j,error:E,leftSection:C,disabled:_,id:z,variant:k,inputContainer:S,description:D,label:N,size:M,errorProps:T,descriptionProps:I,labelProps:P,withAsterisk:B,inputWrapperOrder:H,wrapperProps:F,radius:V,rightSection:G,rightSectionWidth:A,rightSectionPointerEvents:Z,leftSectionWidth:L,visible:R,defaultVisible:O,onVisibilityChange:W,visibilityToggleIcon:q,visibilityToggleButtonProps:$,rightSectionProps:U,leftSectionProps:Y,leftSectionPointerEvents:J,mod:X,...K}=n,Q=(0,a.M)(z),[ee,et]=(0,i.C)({value:R,defaultValue:O,finalValue:!1,onChange:W}),en=()=>et(!ee),er=(0,d.y)({name:"PasswordInput",classes:x,props:n,className:s,style:p,classNames:l,styles:v,unstyled:y,vars:w,varsResolver:b}),{resolvedClassNames:eo,resolvedStyles:ea}=(0,c.h)({classNames:l,styles:v,props:n}),{styleProps:ei,rest:el}=(0,u.c)(K),es=r.createElement(h.A,{...er("visibilityToggle"),disabled:_,radius:V,"aria-hidden":!$,tabIndex:-1,...$,variant:"subtle",color:"gray",unstyled:y,onMouseDown:e=>{e.preventDefault(),$?.onMouseDown?.(e),en()},onKeyDown:e=>{$?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),en())}},r.createElement(q,{reveal:ee}));return r.createElement(f.I.Wrapper,{required:j,id:Q,label:N,error:E,description:D,size:M,classNames:eo,styles:ea,__staticSelector:"PasswordInput",errorProps:T,descriptionProps:I,unstyled:y,withAsterisk:B,inputWrapperOrder:H,inputContainer:S,variant:k,labelProps:{...P,htmlFor:Q},mod:X,...er("root"),...ei,...F},r.createElement(f.I,{component:"div",error:E,leftSection:C,size:M,classNames:{...eo,input:(0,o.Z)(x.input,eo.input)},styles:ea,radius:V,disabled:_,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:G??es,variant:k,unstyled:y,leftSectionWidth:L,rightSectionPointerEvents:Z||"all",rightSectionProps:U,leftSectionProps:Y,leftSectionPointerEvents:J,withAria:!1},r.createElement("input",{required:j,"data-invalid":!!E||void 0,"data-with-left-section":!!C||void 0,...er("innerInput"),disabled:_,id:Q,ref:t,...el,autoComplete:el.autoComplete||"off",type:ee?"text":"password"})))});y.classes={...v.M.classes,...x},y.displayName="@mantine/core/PasswordInput"},2570:function(e,t,n){"use strict";n.d(t,{P:function(){return v}});var r=n(27378),o=n(31002),a=n(58675),i=n(5564),l=n(96739),s=n(20410),c=n(2161),d=n(38099),m=n(45608),u=n(81097),p=n(54526),h=n(23163);let f={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},v=(0,s.d)((e,t)=>{let n=(0,l.w)("Select",f,e),{classNames:s,styles:v,unstyled:x,vars:g,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:j,onFocus:E,onBlur:C,onClick:_,onChange:z,data:k,value:S,defaultValue:D,selectFirstOptionOnChange:N,onOptionSubmit:M,comboboxProps:T,readOnly:I,disabled:P,filter:B,limit:H,withScrollArea:F,maxDropdownHeight:V,size:G,searchable:A,rightSection:Z,checkIconPosition:L,withCheckIcon:R,nothingFoundMessage:O,name:W,form:q,searchValue:$,defaultSearchValue:U,onSearchChange:Y,allowDeselect:J,error:X,rightSectionPointerEvents:K,id:Q,clearable:ee,clearButtonProps:et,hiddenInputProps:en,...er}=n,eo=(0,r.useMemo)(()=>(0,c.R)(k),[k]),ea=(0,r.useMemo)(()=>(0,d.g)(eo),[eo]),ei=(0,o.M)(Q),[el,es]=(0,a.C)({value:S,defaultValue:D,finalValue:null,onChange:z}),ec="string"==typeof el?ea[el]:void 0,[ed,em]=(0,a.C)({value:$,defaultValue:U,finalValue:ec?ec.label:"",onChange:Y}),eu=(0,p.K)({opened:b,defaultOpened:y,onDropdownOpen:j,onDropdownClose:()=>{w?.(),eu.resetSelectedOption()}}),{resolvedClassNames:ep,resolvedStyles:eh}=(0,i.h)({props:n,styles:v,classNames:s});(0,r.useEffect)(()=>{N&&eu.selectFirstOption()},[N,el]),(0,r.useEffect)(()=>{null===S&&em(""),"string"==typeof S&&ec&&em(ec.label)},[S,ec]);let ef=ee&&!!el&&!P&&!I&&r.createElement(m.h.ClearButton,{size:G,...et,onClear:()=>{es(null,null),em("")}});return r.createElement(r.Fragment,null,r.createElement(m.h,{store:eu,__staticSelector:"Select",classNames:ep,styles:eh,unstyled:x,readOnly:I,onOptionSubmit:e=>{M?.(e);let t=J&&ea[e].value===el?null:ea[e],n=t?t.value:null;es(n,t),em("string"==typeof n&&t?.label||""),eu.closeDropdown()},size:G,...T},r.createElement(m.h.Target,{targetType:A?"input":"button"},r.createElement(h.M,{id:ei,ref:t,rightSection:Z||ef||r.createElement(m.h.Chevron,{size:G,error:X,unstyled:x}),rightSectionPointerEvents:K||(ef?"all":"none"),...er,size:G,__staticSelector:"Select",disabled:P,readOnly:I||!A,value:ed,onChange:e=>{em(e.currentTarget.value),eu.openDropdown(),N&&eu.selectFirstOption()},onFocus:e=>{A&&eu.openDropdown(),E?.(e)},onBlur:e=>{A&&eu.closeDropdown(),em(null!=el&&ea[el]?.label||""),C?.(e)},onClick:e=>{A?eu.openDropdown():eu.toggleDropdown(),_?.(e)},classNames:ep,styles:eh,unstyled:x,pointer:!A,error:X})),r.createElement(u.r,{data:eo,hidden:I||P,filter:B,search:ed,limit:H,hiddenWhenEmpty:!A||!O,withScrollArea:F,maxDropdownHeight:V,filterOptions:A&&ec?.label!==ed,value:el,checkIconPosition:L,withCheckIcon:R,nothingFoundMessage:O,unstyled:x,labelId:`${ei}-label`})),r.createElement("input",{type:"hidden",name:W,value:el||"",form:q,disabled:P,...en}))});v.classes={...h.M.classes,...m.h.classes},v.displayName="@mantine/core/Select"},10904:function(e,t,n){"use strict";n.d(t,{T:function(){return s}});var r=n(27378),o=n(96739),a=n(56589),i=n(20410);let l={},s=(0,i.d)((e,t)=>{let{w:n,h:i,miw:s,mih:c,...d}=(0,o.w)("Space",l,e);return r.createElement(a.x,{ref:t,...d,w:n,miw:s??n,h:i,mih:c??i})});s.displayName="@mantine/core/Space"},35292:function(e,t,n){"use strict";n.d(t,{v:function(){return S}});var r=n(27378),o=n(71078),a=n(92082),i=n(83453),l=n(89738),s=n(34121),c=n(96739),d=n(6231),m=n(56589),u=n(20410),p=n(71656);let[h,f]=(0,p.R)("Stepper component was not found in tree"),v=()=>null;v.displayName="@mantine/core/StepperCompleted";var x=n(2256),g=n(38765),b=n(42029),y=n(88101),w=n(19397),j={root:"m-cbb4ea7e",steps:"m-aaf89d0b",separator:"m-2a371ac9",content:"m-78da155d",step:"m-cbb57068","step--horizontal":"m-f56b1e2c","step--vertical":"m-833edb7e",verticalSeparator:"m-6496b3f3",stepWrapper:"m-818e70b",stepIcon:"m-1959ad01",stepCompletedIcon:"m-a79331dc",stepBody:"m-1956aa2a",stepLabel:"m-12051f6c",stepDescription:"m-164eea74"};let E=(e,t)=>"function"==typeof e?r.createElement(e,{step:t||0}):e,C={withIcon:!0,allowStepClick:!0,iconPosition:"left"},_=(0,u.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:i,vars:s,step:d,state:m,color:u,icon:p,completedIcon:h,progressIcon:v,label:j,description:_,withIcon:z,iconSize:k,loading:S,allowStepClick:D,allowStepSelect:N,iconPosition:M,orientation:T,mod:I,...P}=(0,c.w)("StepperStep",C,e),B=f(),H=(0,x.rZ)(),F={classNames:n,styles:i},V="stepCompleted"===m?null:"stepProgress"===m?v:p,G={"data-progress":"stepProgress"===m||void 0,"data-completed":"stepCompleted"===m||void 0};return r.createElement(w.k,{...B.getStyles("step",{className:o,style:a,variant:B.orientation,...F}),mod:[{"icon-position":M||B.iconPosition,"allow-click":D},I],ref:t,...G,...P,__vars:{"--step-color":u?(0,l.p)(u,H):void 0},tabIndex:D?0:-1},z&&r.createElement("span",{...B.getStyles("stepWrapper",F)},r.createElement("span",{...B.getStyles("stepIcon",F),...G},r.createElement(y.u,{mounted:"stepCompleted"===m,transition:"pop",duration:200},e=>r.createElement("span",{...B.getStyles("stepCompletedIcon",{style:e,...F})},S?r.createElement(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...B.getStyles("stepLoader",F)}):E(h,d)||r.createElement(g.n,{size:"60%"}))),"stepCompleted"!==m?S?r.createElement(b.a,{...B.getStyles("stepLoader",F),size:"calc(var(--stepper-icon-size) / 2)",color:u}):E(V||p,d):null),"vertical"===T&&r.createElement("span",{...B.getStyles("verticalSeparator",F),"data-active":"stepCompleted"===m||void 0})),(j||_)&&r.createElement("span",{...B.getStyles("stepBody",F),"data-orientation":B.orientation,"data-icon-position":M||B.iconPosition},j&&r.createElement("span",{...B.getStyles("stepLabel",F)},E(j,d)),_&&r.createElement("span",{...B.getStyles("stepDescription",F)},E(_,d))))});_.classes=j,_.displayName="@mantine/core/StepperStep";let z={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},k=(0,i.Z)((e,{color:t,iconSize:n,size:r,contentPadding:i,radius:c,autoContrast:d})=>({root:{"--stepper-color":t?(0,l.p)(t,e):void 0,"--stepper-icon-color":d?(0,s.R)({color:t,theme:e}):void 0,"--stepper-icon-size":void 0===n?(0,a.ap)(r,"stepper-icon-size"):(0,o.h)(n),"--stepper-content-padding":(0,a.bG)(i),"--stepper-radius":void 0===c?void 0:(0,a.H5)(c),"--stepper-fz":(0,a.yv)(r),"--stepper-spacing":(0,a.bG)(r)}})),S=(0,u.d)((e,t)=>{let n=(0,c.w)("Stepper",z,e),{classNames:o,className:a,style:i,styles:l,unstyled:s,vars:u,children:p,onStepClick:f,active:x,icon:g,completedIcon:b,progressIcon:y,color:w,iconSize:E,contentPadding:C,orientation:_,iconPosition:S,size:D,radius:N,allowNextStepsSelect:M,wrap:T,...I}=n,P=(0,d.y)({name:"Stepper",classes:j,props:n,className:a,style:i,classNames:o,styles:l,unstyled:s,vars:u,varsResolver:k}),B=r.Children.toArray(p),H=B.filter(e=>e.type!==v),F=B.find(e=>e.type===v),V=H.reduce((e,t,n)=>{let o=x===n?"stepProgress":x>n?"stepCompleted":"stepInactive",a="function"==typeof f&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===o||M);return e.push((0,r.cloneElement)(t,{icon:t.props.icon||g||n+1,key:n,step:n,state:o,onClick:()=>a&&f?.(n),allowStepClick:a,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||y,color:t.props.color||w,iconSize:E,radius:N,iconPosition:t.props.iconPosition||S,orientation:_,unstyled:s})),"horizontal"===_&&n!==H.length-1&&e.push(r.createElement("div",{...P("separator"),"data-active":nH.length-1?A:G;return r.createElement(h,{value:{getStyles:P,orientation:_,iconPosition:S}},r.createElement(m.x,{...P("root"),ref:t,size:D,...I},r.createElement(m.x,{...P("steps"),mod:{orientation:_,"icon-position":S,wrap:T&&"vertical"!==_}},V),Z&&r.createElement("div",{...P("content")},Z)))});S.classes=j,S.displayName="@mantine/core/Stepper",S.Completed=v,S.Step=_},92143:function(e,t,n){"use strict";n.d(t,{T:function(){return j}});var r=n(27378),o=n(71078),a=n(92082),i=n(83453),l=n(89738),s=n(34121),c=n(96739),d=n(6231),m=n(56589),u=n(20410),p=n(71656);let[h,f]=(0,p.R)("Timeline component was not found in tree");var v=n(2256),x={root:"m-43657ece",itemTitle:"m-2ebe8099",item:"m-436178ff",itemBullet:"m-8affcee1",itemBody:"m-540e8f41"};let g={},b=(0,u.d)((e,t)=>{let n=(0,c.w)("TimelineItem",g,e),{classNames:o,className:i,style:s,styles:d,vars:u,__active:p,__align:h,__lineActive:x,__vars:b,bullet:y,radius:w,color:j,lineVariant:E,children:C,title:_,mod:z,...k}=n,S=f(),D=(0,v.rZ)(),N={classNames:o,styles:d};return r.createElement(m.x,{...S.getStyles("item",{...N,className:i,style:s}),mod:[{"line-active":x,active:p},z],ref:t,__vars:{"--tli-radius":w?(0,a.H5)(w):void 0,"--tli-color":j?(0,l.p)(j,D):void 0,"--tli-border-style":E||void 0},...k},r.createElement(m.x,{...S.getStyles("itemBullet",N),mod:{"with-child":!!y,align:h,active:p}},y),r.createElement("div",{...S.getStyles("itemBody",N)},_&&r.createElement("div",{...S.getStyles("itemTitle",N)},_),r.createElement("div",{...S.getStyles("itemContent",N)},C)))});b.classes=x,b.displayName="@mantine/core/TimelineItem";let y={active:-1,align:"left",reverseActive:!1},w=(0,i.Z)((e,{bulletSize:t,lineWidth:n,radius:r,color:i,autoContrast:c})=>({root:{"--tl-bullet-size":(0,o.h)(t),"--tl-line-width":(0,o.h)(n),"--tl-radius":void 0===r?void 0:(0,a.H5)(r),"--tl-color":i?(0,l.p)(i,e):void 0,"--tl-icon-color":c?(0,s.R)({color:i,theme:e}):void 0}})),j=(0,u.d)((e,t)=>{let n=(0,c.w)("Timeline",y,e),{classNames:o,className:a,style:i,styles:l,unstyled:s,vars:u,children:p,active:f,color:v,radius:g,bulletSize:b,align:j,lineWidth:E,reverseActive:C,mod:_,...z}=n,k=(0,d.y)({name:"Timeline",classes:x,props:n,className:a,style:i,classNames:o,styles:l,unstyled:s,vars:u,varsResolver:w}),S=r.Children.toArray(p),D=S.map((e,t)=>(0,r.cloneElement)(e,{unstyled:s,__align:j,__active:e.props?.active||(C?f>=S.length-t-1:f>=t),__lineActive:e.props?.lineActive||(C?f>=S.length-t-1:f-1>=t)}));return r.createElement(h,{value:{getStyles:k}},r.createElement(m.x,{...k("root"),mod:[{align:j},_],ref:t,...z},D))});j.classes=x,j.displayName="@mantine/core/Timeline",j.Item=b},98602:function(e,t,n){"use strict";n.d(t,{x:function(){return C}});var r=n(27693),o=n(27378),a=n(20410),i=n(96739),l=n(6231),s=n(5564),c=n(84246),d=n(38765),m=n(72840),u=n(87921),p=n(82591),h=n(60757),f=n(84677),v=n(73107),x=n(95008),g=n(90100),b=n(68959),y=n(68112),w=n(67789),j={timeWrapper:"m-208d2562",timeInput:"m-62ee059"};let E={dropdownType:"popover"},C=(0,a.d)((e,t)=>{let n=(0,i.w)("DateTimePicker",E,e),{value:a,defaultValue:C,onChange:_,valueFormat:z,locale:k,classNames:S,styles:D,unstyled:N,timeInputProps:M,submitButtonProps:T,withSeconds:I,level:P,defaultLevel:B,size:H,variant:F,dropdownType:V,vars:G,...A}=n,Z=(0,l.y)({name:"DateTimePicker",classes:j,props:n,classNames:S,styles:D,unstyled:N,vars:G}),{resolvedClassNames:L,resolvedStyles:R}=(0,s.h)({classNames:S,styles:D,props:n}),O=(0,o.useRef)(),W=(0,m.Yx)(O,M?.ref),{calendarProps:{allowSingleDateInRange:q,...$},others:U}=(0,g.M)(A),Y=(0,f.e)(),[J,X]=(0,h.l)({type:"default",value:a,defaultValue:C,onChange:_}),K=e=>e?r(e).format(I?"HH:mm:ss":"HH:mm"):"",[Q,ee]=(0,o.useState)(K(J)),[et,en]=(0,o.useState)(P||B||"month"),[er,eo]=(0,u.q)(!1),ea=J?r(J).locale(Y.getLocale(k)).format(z||(I?"DD/MM/YYYY HH:mm:ss":"DD/MM/YYYY HH:mm")):"";(0,p.l)(()=>{er||ee(K(J))},[J,er]),(0,p.l)(()=>{er&&en("month")},[er]);let ei="popover"===V;return o.createElement(y.i,{formattedValue:ea,dropdownOpened:er,dropdownHandlers:eo,classNames:L,styles:R,unstyled:N,ref:t,onClear:()=>X(null),shouldClear:!!J,value:J,size:H,variant:F,dropdownType:V,...U,type:"default",__staticSelector:"DateTimePicker"},o.createElement(b.M,{...$,size:H,variant:F,type:"default",value:J,defaultDate:J,onChange:e=>{e&&X((0,v.o)(J,e)),O.current?.focus()},locale:k,classNames:L,styles:R,unstyled:N,__staticSelector:"DateTimePicker",__stopPropagation:ei,level:P,defaultLevel:B,onLevelChange:e=>{en(e),$.onLevelChange?.(e)},__timezoneApplied:!0}),"month"===et&&o.createElement("div",{...Z("timeWrapper")},o.createElement(w.M,{value:Q,withSeconds:I,ref:W,unstyled:N,...M,...Z("timeInput",{className:M?.className,style:M?.style}),onChange:e=>{M?.onChange?.(e);let t=e.currentTarget.value;if(ee(t),t){let[e,n,r]=t.split(":").map(Number),o=(0,x.w)("add",new Date,Y.getTimezone());o.setHours(e),o.setMinutes(n),o.setSeconds(r||0),X((0,v.o)(o,J||(0,x.w)("add",new Date,Y.getTimezone())))}},onKeyDown:e=>{M?.onKeyDown?.(e),"Enter"===e.key&&(e.preventDefault(),eo.close())},size:H,"data-mantine-stop-propagation":ei||void 0}),o.createElement(c.A,{variant:"default",size:`input-${H||"sm"}`,...Z("submitButton",{className:T?.className,style:T?.style}),unstyled:N,"data-mantine-stop-propagation":ei||void 0,children:o.createElement(d.n,{size:"30%"}),...T,onClick:e=>{T?.onClick?.(e),eo.close()}})))});C.classes={...j,...y.i.classes,...b.M.classes},C.displayName="@mantine/dates/DateTimePicker"},67789:function(e,t,n){"use strict";n.d(t,{M:function(){return d}});var r=n(27378),o=n(40624),a=n(20410),i=n(96739),l=n(5564),s=n(23163);let c={},d=(0,a.d)((e,t)=>{let n=(0,i.w)("TimeInput",c,e),{classNames:a,styles:d,unstyled:m,vars:u,withSeconds:p,...h}=n,{resolvedClassNames:f,resolvedStyles:v}=(0,l.h)({classNames:a,styles:d,props:n});return r.createElement(s.M,{classNames:{...f,input:(0,o.Z)("m-468e7eda",f?.input)},styles:v,unstyled:m,ref:t,...h,step:p?1:60,type:"time",__staticSelector:"TimeInput"})});d.classes=s.M.classes,d.displayName="@mantine/dates/TimeInput"},73107:function(e,t,n){"use strict";function r(e,t){if(!e||!t)return t;let n=e.getHours(),r=e.getMinutes(),o=e.getSeconds(),a=e.getMilliseconds(),i=new Date(t);return i.setHours(n),i.setMinutes(r),i.setSeconds(o),i.setMilliseconds(a),i}n.d(t,{o:function(){return r}})},77717:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(27378);function o(e,t,n={leading:!1}){let[o,a]=(0,r.useState)(e),i=(0,r.useRef)(!1),l=(0,r.useRef)(null),s=(0,r.useRef)(!1),c=()=>window.clearTimeout(l.current);return(0,r.useEffect)(()=>{i.current&&(!s.current&&n.leading?(s.current=!0,a(e)):(c(),l.current=window.setTimeout(()=>{s.current=!1,a(e)},t)))},[e,n.leading,t]),(0,r.useEffect)(()=>(i.current=!0,c),[]),[o,c]}},37443:function(e,t,n){"use strict";n.d(t,{s:function(){return a}});var r=n(27378),o=n(62849);function a(){let[e,t]=(0,r.useState)(!1);(0,o.Y)(()=>{t("undefined"!=typeof window&&"EyeDropper"in window)},[]);let n=(0,r.useCallback)((t={})=>{if(e){let e=new window.EyeDropper;return e.open(t)}return Promise.resolve(void 0)},[e]);return{supported:e,open:n}}},61386:function(e,t,n){"use strict";n.d(t,{O:function(){return c}});var r=n(27378);function o(){let e=window.document,t=e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement;return t}async function a(){let e=window.document;return"function"==typeof e.exitFullscreen?e.exitFullscreen():"function"==typeof e.msExitFullscreen?e.msExitFullscreen():"function"==typeof e.webkitExitFullscreen?e.webkitExitFullscreen():"function"==typeof e.mozCancelFullScreen?e.mozCancelFullScreen():null}async function i(e){return e.requestFullscreen?.()||e.msRequestFullscreen?.()||e.webkitEnterFullscreen?.()||e.webkitRequestFullscreen?.()||e.mozRequestFullscreen?.()}let l=["","webkit","moz","ms"];function s(e,{onFullScreen:t,onError:n}){return l.forEach(r=>{e.addEventListener(`${r}fullscreenchange`,t),e.addEventListener(`${r}fullscreenerror`,n)}),()=>{l.forEach(r=>{e.removeEventListener(`${r}fullscreenchange`,t),e.removeEventListener(`${r}fullscreenerror`,n)})}}function c(){let[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(),l=(0,r.useCallback)(e=>{t(e.target===o())},[t]),c=(0,r.useCallback)(e=>{t(!1),console.error(`[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${e} (${e.target})`)},[t]),d=(0,r.useCallback)(async()=>{o()?await a():await i(n.current)},[]),m=(0,r.useCallback)(e=>{null===e?n.current=window.document.documentElement:n.current=e},[]);return(0,r.useEffect)(()=>!n.current&&window.document?(n.current=window.document.documentElement,s(n.current,{onFullScreen:l,onError:c})):n.current?s(n.current,{onFullScreen:l,onError:c}):void 0,[]),{ref:m,toggle:d,fullscreen:e}}},81439:function(e,t,n){"use strict";n.d(t,{c:function(){return a}});var r=n(27378);let o={events:["keypress","mousemove","touchmove","click","scroll"],initialState:!0};function a(e,t){let{events:n,initialState:a}={...o,...t},[i,l]=(0,r.useState)(a),s=(0,r.useRef)();return(0,r.useEffect)(()=>{let t=()=>{l(!1),s.current&&window.clearTimeout(s.current),s.current=window.setTimeout(()=>{l(!0)},e)};return n.forEach(e=>document.addEventListener(e,t)),()=>{n.forEach(e=>document.removeEventListener(e,t))}},[e]),i}}},function(e){e.O(0,[38345,60213,89038,86778,15819,56926,53993,45608,83014,53456,67415,18337,49774,92888,40179],function(){return e(e.s=49536)}),_N_E=e.O()}]); \ No newline at end of file +}`,d={type:"code",code:c,component:function(){let[e,t]=(0,r.useState)({x:.2,y:.6}),{ref:n,active:c}=(0,s.r)(t);return r.createElement(r.Fragment,null,r.createElement(o.Z,{justify:"center"},r.createElement("div",{ref:n,style:{width:(0,a.h)(400),height:(0,a.h)(120),backgroundColor:"var(--mantine-color-blue-light)",position:"relative"}},r.createElement("div",{style:{position:"absolute",left:`calc(${100*e.x}% - ${(0,a.h)(8)})`,top:`calc(${100*e.y}% - ${(0,a.h)(8)})`,width:(0,a.h)(16),height:(0,a.h)(16),backgroundColor:c?"var(--mantine-color-teal-7)":"var(--mantine-color-blue-7)"}}))),r.createElement(i.x,{ta:"center",mt:"sm"},"Values ",r.createElement(l.E,null,`{ x: ${Math.round(100*e.x)}, y: ${Math.round(100*e.y)} }`)))}}},29866:function(e,t,n){"use strict";n.d(t,{_:function(){return v}});var r=n(27378),o=n(93693),a=n(38956),i=n(98477),l=n(77188),s=n(22971),c=n(7033),d=n(25916),m=n(94193),u=n(26569),p=n(9136),h=n(8671),f=n(56926);function v({noShadow:e,noPadding:t,noSubmit:n,style:v}){let[x,g]=(0,r.useState)("register"),[b,y]=(0,r.useState)(!1),[w,j]=(0,r.useState)(null),E=(0,f.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return r.createElement(i.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...v,position:"relative",backgroundColor:"var(--mantine-color-body)"}},r.createElement("form",{onSubmit:E.onSubmit(()=>{y(!0),j(null),setTimeout(()=>{y(!1),j("register"===x?"User with this email already exists":"User with this email does not exist")},3e3)})},r.createElement(l.f,{visible:b}),"register"===x&&r.createElement(s.Z,{grow:!0},r.createElement(c.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...E.getInputProps("firstName")}),r.createElement(c.o,{required:!0,placeholder:"Your last name",label:"Last name",...E.getInputProps("lastName")})),r.createElement(c.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:r.createElement(o.Z,{size:16,stroke:1.5}),...E.getInputProps("email")}),r.createElement(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:r.createElement(a.Z,{size:16,stroke:1.5}),...E.getInputProps("password")}),"register"===x&&r.createElement(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:r.createElement(a.Z,{size:16,stroke:1.5}),...E.getInputProps("confirmPassword")}),"register"===x&&r.createElement(m.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...E.getInputProps("termsOfService",{type:"checkbox"})}),w&&r.createElement(u.x,{c:"red",size:"sm",mt:"sm"},w),!n&&r.createElement(s.Z,{justify:"space-between",mt:"xl"},r.createElement(p.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{g(e=>"register"===e?"login":"register"),j(null)},size:"sm"},"register"===x?"Have an account? Login":"Don't have an account? Register"),r.createElement(h.z,{color:"blue",type:"submit"},"register"===x?"Register":"Login"))))}},61871:function(e,t,n){"use strict";n.d(t,{l:function(){return I}});var r=n(27378),o=n(60213),a=n(83453),i=n(71078),l=n(92082),s=n(20410),c=n(96739),d=n(6231),m=n(40593),u=n(49134),p=n(19397),h=n(56589),f=n(1189),v=n(28086),x=n(71656);let[g,b]=(0,x.R)("Carousel component was not found in tree");var y={root:"m-17884d0f",viewport:"m-a2dae653",container:"m-fcd81474",controls:"m-39bc3463",control:"m-64f58e10",indicators:"m-71ea3ab1",indicator:"m-eae68602",slide:"m-d98df724"};let w={},j=(0,s.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:i,vars:l,mod:s,...d}=(0,c.w)("CarouselSlide",w,e),m=b();return r.createElement(h.x,{ref:t,mod:[{orientation:m.orientation},s],...m.getStyles("slide",{className:o,style:a,classNames:n,styles:i}),...d})});j.classes=y,j.displayName="@mantine/core/CarouselSlide";var E=n(2256),C=n(86689),_=n(75001),z=n(53007),k=n(31582),S=n(9889);function D({slideGap:e,slideSize:t,selector:n}){let o=(0,E.rZ)(),a=(0,C.L)({"--carousel-slide-gap":(0,l.bG)((0,_.v)(e)),"--carousel-slide-size":(0,i.h)((0,_.v)(t))}),s=(0,z.X)(o.breakpoints).reduce((n,r)=>(n[r]||(n[r]={}),"object"==typeof e&&void 0!==e[r]&&(n[r]["--carousel-slide-gap"]=(0,l.bG)(e[r])),"object"==typeof t&&void 0!==t[r]&&(n[r]["--carousel-slide-size"]=(0,l.bG)(t[r])),n),{}),c=(0,k.I)((0,z.X)(s),o).filter(e=>(0,z.X)(s[e.value]).length>0),d=c.map(e=>({query:`(min-width: ${o.breakpoints[e.value]})`,styles:s[e.value]}));return r.createElement(S.f,{styles:a,media:d,selector:n})}function N({dir:e,orientation:t,direction:n}){return"previous"===n?"horizontal"===t?90*("ltr"===e?1:-1):-180:"horizontal"===t?90*("ltr"===e?-1:1):0}let M={controlSize:26,controlsOffset:"sm",slideSize:"100%",slideGap:0,orientation:"horizontal",align:"center",slidesToScroll:1,includeGapInSize:!0,draggable:!0,dragFree:!1,loop:!1,speed:10,initialSlide:0,inViewThreshold:0,withControls:!0,withIndicators:!1,skipSnaps:!1,containScroll:"",withKeyboardEvents:!0},T=(0,a.Z)((e,{height:t,controlSize:n,controlsOffset:r})=>({root:{"--carousel-height":(0,i.h)(t),"--carousel-control-size":(0,i.h)(n),"--carousel-controls-offset":(0,l.bG)(r)}})),I=(0,s.d)((e,t)=>{let n=(0,c.w)("Carousel",M,e),{classNames:a,className:i,style:l,styles:s,unstyled:x,vars:b,children:w,getEmblaApi:j,onNextSlide:E,onPreviousSlide:C,onSlideChange:_,nextControlProps:z,previousControlProps:k,controlSize:S,controlsOffset:I,slideSize:P,slideGap:B,orientation:H,height:F,align:V,slidesToScroll:G,includeGapInSize:A,draggable:Z,dragFree:L,loop:R,speed:O,initialSlide:W,inViewThreshold:q,withControls:$,withIndicators:U,plugins:Y,nextControlIcon:J,previousControlIcon:X,skipSnaps:K,containScroll:Q,withKeyboardEvents:ee,mod:et,...en}=n,er=(0,d.y)({name:"Carousel",classes:y,props:n,className:i,style:l,classNames:a,styles:s,unstyled:x,vars:b,varsResolver:T}),eo=(0,m.m)(),{dir:ea}=(0,u.gm)(),[ei,el]=(0,o.Z)({axis:"horizontal"===H?"x":"y",direction:"horizontal"===H?ea:void 0,startIndex:W,loop:R,align:V,slidesToScroll:G,draggable:Z,dragFree:L,speed:O,inViewThreshold:q,skipSnaps:K,containScroll:Q},Y),[es,ec]=(0,r.useState)(0),[ed,em]=(0,r.useState)(0),eu=(0,r.useCallback)(e=>el&&el.scrollTo(e),[el]),ep=(0,r.useCallback)(()=>{if(!el)return;let e=el.selectedScrollSnap();ec(e),_?.(e)},[el,ec]),eh=(0,r.useCallback)(()=>{el?.scrollPrev(),C?.()},[el]),ef=(0,r.useCallback)(()=>{el?.scrollNext(),E?.()},[el]),ev=(0,r.useCallback)(e=>{ee&&("ArrowRight"===e.key&&(e.preventDefault(),ef()),"ArrowLeft"===e.key&&(e.preventDefault(),eh()))},[el]);(0,r.useEffect)(()=>{if(el)return j?.(el),ep(),em(el.scrollSnapList().length),el.on("select",ep),()=>{el.off("select",ep)}},[el,G]),(0,r.useEffect)(()=>{el&&(el.reInit(),em(el.scrollSnapList().length),ec(e=>(0,v.u)(e,0,r.Children.toArray(w).length-1)))},[r.Children.toArray(w).length,G]);let ex=el?.canScrollPrev()||!1,eg=el?.canScrollNext()||!1,eb=Array(ed).fill(0).map((e,t)=>r.createElement(p.k,{...er("indicator"),key:t,"data-active":t===es||void 0,"aria-hidden":!0,tabIndex:-1,onClick:()=>eu(t)}));return r.createElement(g,{value:{getStyles:er,orientation:H}},r.createElement(D,{...n,selector:`.${eo}`}),r.createElement(h.x,{ref:t,...er("root",{className:eo}),...en,mod:[{orientation:H,"include-gap-in-size":A},et],onKeyDownCapture:ev},r.createElement("div",{...er("viewport"),ref:ei},r.createElement("div",{...er("container"),"data-orientation":H},w)),U&&r.createElement("div",{...er("indicators")},eb),$&&r.createElement("div",{...er("controls")},r.createElement(p.k,{...k,...er("control",{className:k?.className,style:k?.style}),onClick:e=>{eh(),k?.onClick?.(e)},"data-inactive":!ex||void 0,tabIndex:ex?0:-1},void 0!==X?X:r.createElement(f.Q,{style:{transform:`rotate(${N({dir:ea,orientation:H,direction:"previous"})}deg)`}})),r.createElement(p.k,{...er("control",{className:z?.className,style:z?.style}),...z,onClick:e=>{ef(),z?.onClick?.(e)},"data-inactive":!eg||void 0,tabIndex:eg?0:-1},void 0!==J?J:r.createElement(f.Q,{style:{transform:`rotate(${N({dir:ea,orientation:H,direction:"next"})}deg)`}})))))});I.classes=y,I.displayName="@mantine/core/Carousel",I.Slide=j},85702:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(27378);function o(e,t){(0,r.useEffect)(()=>{e&&window.setTimeout(()=>{e.reInit()},t)},[e,t])}},26720:function(e,t,n){"use strict";n.d(t,{F:function(){return v}});var r=n(27378),o=n(31002),a=n(58675),i=n(5564),l=n(96739),s=n(20410),c=n(2161),d=n(38099),m=n(45608),u=n(81097),p=n(54526),h=n(23163);let f={},v=(0,s.d)((e,t)=>{let n=(0,l.w)("Autocomplete",f,e),{classNames:s,styles:v,unstyled:x,vars:g,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:j,onFocus:E,onBlur:C,onClick:_,onChange:z,data:k,value:S,defaultValue:D,selectFirstOptionOnChange:N,onOptionSubmit:M,comboboxProps:T,readOnly:I,disabled:P,filter:B,limit:H,withScrollArea:F,maxDropdownHeight:V,size:G,id:A,...Z}=n,L=(0,o.M)(A),R=(0,c.R)(k),O=(0,d.g)(R),[W,q]=(0,a.C)({value:S,defaultValue:D,finalValue:"",onChange:z}),$=(0,p.K)({opened:b,defaultOpened:y,onDropdownOpen:j,onDropdownClose:()=>{w?.(),$.resetSelectedOption()}}),{resolvedClassNames:U,resolvedStyles:Y}=(0,i.h)({props:n,styles:v,classNames:s});return(0,r.useEffect)(()=>{N&&$.selectFirstOption()},[N,W]),r.createElement(m.h,{store:$,__staticSelector:"Autocomplete",classNames:U,styles:Y,unstyled:x,readOnly:I,onOptionSubmit:e=>{M?.(e),q(O[e].label),$.closeDropdown()},size:G,...T},r.createElement(m.h.Target,null,r.createElement(h.M,{ref:t,...Z,size:G,__staticSelector:"Autocomplete",disabled:P,readOnly:I,value:W,onChange:e=>{q(e.currentTarget.value),$.openDropdown(),N&&$.selectFirstOption()},onFocus:e=>{$.openDropdown(),E?.(e)},onBlur:e=>{$.closeDropdown(),C?.(e)},onClick:e=>{$.openDropdown(),_?.(e)},classNames:U,styles:Y,unstyled:x,id:L})),r.createElement(u.r,{data:R,hidden:I||P,filter:B,search:W,limit:H,hiddenWhenEmpty:!0,withScrollArea:F,maxDropdownHeight:V,unstyled:x,labelId:`${L}-label`}))});v.classes={...h.M.classes,...m.h.classes},v.displayName="@mantine/core/Autocomplete"},73988:function(e,t,n){"use strict";n.d(t,{C:function(){return h}});var r=n(27378),o=n(92082),a=n(83453),i=n(89738),l=n(96739),s=n(6231),c=n(56589),d=n(50332),m={root:"m-347db0ec","root--dot":"m-fbd81e3d",label:"m-5add502a",section:"m-91fdda9b"};let u={},p=(0,a.Z)((e,{radius:t,color:n,gradient:r,variant:a,size:l,autoContrast:s})=>{let c=e.variantColorResolver({color:n||e.primaryColor,theme:e,gradient:r,variant:a||"filled",autoContrast:s});return{root:{"--badge-height":(0,o.ap)(l,"badge-height"),"--badge-padding-x":(0,o.ap)(l,"badge-padding-x"),"--badge-fz":(0,o.ap)(l,"badge-fz"),"--badge-radius":void 0===t?void 0:(0,o.H5)(t),"--badge-bg":n||a?c.background:void 0,"--badge-color":n||a?c.color:void 0,"--badge-bd":n||a?c.border:void 0,"--badge-dot-color":"dot"===a?(0,i.p)(n,e):void 0}}}),h=(0,d.b)((e,t)=>{let n=(0,l.w)("Badge",u,e),{classNames:o,className:a,style:i,styles:d,unstyled:h,vars:f,radius:v,color:x,gradient:g,leftSection:b,rightSection:y,children:w,variant:j,fullWidth:E,autoContrast:C,circle:_,mod:z,...k}=n,S=(0,s.y)({name:"Badge",props:n,classes:m,className:a,style:i,classNames:o,styles:d,unstyled:h,vars:f,varsResolver:p});return r.createElement(c.x,{variant:j,mod:[{block:E,circle:_},z],...S("root",{variant:j}),ref:t,...k},b&&r.createElement("span",{...S("section"),"data-position":"left"},b),r.createElement("span",{...S("label")},w),y&&r.createElement("span",{...S("section"),"data-position":"right"},y))});h.classes=m,h.displayName="@mantine/core/Badge"},78415:function(e,t,n){"use strict";n.d(t,{T:function(){return z}});var r=n(27378),o=n(58675),a=n(37443),i=n(82591),l=n(92082),s=n(83453),c=n(5564),d=n(6231),m=n(96739),u=n(20410),p=n(84246),h=n(36227),f=n(45035),v=n(84668),x=n(16202),g=n(42487),b=n(69859),y=n(23163),w=n(63433);function j({style:e,...t}){return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--ci-eye-dropper-icon-size)",height:"var(--ci-eye-dropper-icon-size)",...e},viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t},r.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),r.createElement("path",{d:"M11 7l6 6"}),r.createElement("path",{d:"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z"}))}var E={eyeDropperIcon:"m-b077c2bc",colorPreview:"m-c5ccdcab",dropdown:"m-5ece2cd7"};let C={format:"hex",fixOnBlur:!0,withPreview:!0,swatchesPerRow:7,withPicker:!0,popoverProps:{transitionProps:{transition:"fade",duration:0}},withEyeDropper:!0},_=(0,s.Z)((e,{size:t})=>({eyeDropperIcon:{"--ci-eye-dropper-icon-size":(0,l.ap)(t,"ci-eye-dropper-icon-size")},colorPreview:{"--ci-preview-size":(0,l.ap)(t,"ci-preview-size")}})),z=(0,u.d)((e,t)=>{let n=(0,m.w)("ColorInput",C,e),{classNames:l,styles:s,unstyled:u,disallowInput:y,fixOnBlur:z,popoverProps:k,withPreview:S,withEyeDropper:D,eyeDropperIcon:N,closeOnColorSwatchClick:M,eyeDropperButtonProps:T,value:I,defaultValue:P,onChange:B,onChangeEnd:H,onClick:F,onFocus:V,onBlur:G,inputProps:A,format:Z,wrapperProps:L,readOnly:R,withPicker:O,swatches:W,disabled:q,leftSection:$,rightSection:U,swatchesPerRow:Y,...J}=(0,b.k)("ColorInput",C,e),X=(0,d.y)({name:"ColorInput",props:n,classes:E,classNames:l,styles:s,unstyled:u,rootSelector:"wrapper",vars:n.vars,varsResolver:_}),{resolvedClassNames:K,resolvedStyles:Q}=(0,c.h)({classNames:l,styles:s,props:n}),[ee,et]=(0,r.useState)(!1),[en,er]=(0,r.useState)(""),[eo,ea]=(0,o.C)({value:I,defaultValue:P,finalValue:"",onChange:B}),{supported:ei,open:el}=(0,a.s)(),es=r.createElement(p.A,{...T,...X("eyeDropperButton",{className:T?.className,style:T?.style}),variant:"subtle",color:"gray",size:A.size,unstyled:u,onClick:()=>el().then(e=>{if(e?.sRGBHex){let t=(0,f.Rt)(Z,(0,v.lu)(e.sRGBHex));ea(t),H?.(t)}}).catch(()=>{})},N||r.createElement(j,{...X("eyeDropperIcon")}));return(0,r.useEffect)(()=>{((0,v.fi)(eo)||""===eo.trim())&&er(eo)},[eo]),(0,i.l)(()=>{(0,v.fi)(eo)&&ea((0,f.Rt)(Z,(0,v.lu)(eo)))},[Z]),r.createElement(g.I.Wrapper,{...L,classNames:K,styles:Q,__staticSelector:"ColorInput"},r.createElement(w.J,{__staticSelector:"ColorInput",position:"bottom-start",offset:5,...k,opened:ee,classNames:K,styles:Q,unstyled:u,withRoles:!1,disabled:R||!1===O&&(!Array.isArray(W)||0===W.length)},r.createElement(w.J.Target,null,r.createElement(g.I,{autoComplete:"off",...J,...A,classNames:K,styles:Q,disabled:q,ref:t,__staticSelector:"ColorInput",onFocus:e=>{V?.(e),et(!0)},onBlur:e=>{z&&ea(en),G?.(e),et(!1)},onClick:e=>{F?.(e),et(!0)},spellCheck:!1,value:eo,onChange:e=>{let t=e.currentTarget.value;ea(t),(0,v.fi)(t)&&H?.(f.Rt(Z,v.lu(t)))},leftSection:$||(S?r.createElement(x.b,{color:(0,v.fi)(eo)?eo:"#fff",size:"var(--ci-preview-size)",...X("colorPreview")}):null),readOnly:y||R,pointer:y,unstyled:u,rightSection:U||(D&&!q&&!R&&ei?es:null)})),r.createElement(w.J.Dropdown,{onMouseDown:e=>e.preventDefault(),className:E.dropdown},r.createElement(h.z,{__staticSelector:"ColorInput",value:eo,onChange:ea,onChangeEnd:H,format:Z,swatches:W,swatchesPerRow:Y,withPicker:O,size:A.size,focusable:!1,unstyled:u,styles:Q,classNames:K,onColorSwatchClick:()=>M&&et(!1)}))))});z.classes=y.M.classes,z.displayName="@mantine/core/ColorInput"},67181:function(e,t,n){"use strict";n.d(t,{i:function(){return h}});var r=n(27378),o=n(92082),a=n(83453),i=n(89738),l=n(96739),s=n(6231),c=n(56589),d=n(20410),m={root:"m-3eebeb36",label:"m-9e365f20"};let u={orientation:"horizontal"},p=(0,a.Z)((e,{color:t,variant:n,size:r})=>({root:{"--divider-color":t?(0,i.p)(t,e):void 0,"--divider-border-style":n,"--divider-size":(0,o.ap)(r,"divider-size")}})),h=(0,d.d)((e,t)=>{let n=(0,l.w)("Divider",u,e),{classNames:o,className:a,style:i,styles:d,unstyled:h,vars:f,color:v,orientation:x,label:g,labelPosition:b,mod:y,...w}=n,j=(0,s.y)({name:"Divider",classes:m,props:n,className:a,style:i,classNames:o,styles:d,unstyled:h,vars:f,varsResolver:p});return r.createElement(c.x,{ref:t,mod:[{orientation:x,"with-label":!!g},y],...j("root"),...w,role:"separator"},g&&r.createElement(c.x,{component:"span",mod:{position:b},...j("label")},g))});h.classes=m,h.displayName="@mantine/core/Divider"},67968:function(e,t,n){"use strict";n.d(t,{d:function(){return L}});var r=n(27378),o=n(13041),a=n(96739),i=n(20410),l=n(65784),s=n(71656);let[c,d]=(0,s.R)("Drawer component was not found in tree");var m={root:"m-f11b401e",header:"m-5a7c2c9",content:"m-b8a05bbd",inner:"m-31cd769a"};let u={},p=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerBody",u,e),{classNames:o,className:i,style:s,styles:c,vars:m,...p}=n,h=d();return r.createElement(l.y,{ref:t,...h.getStyles("body",{classNames:o,style:s,styles:c,className:i}),...p})});p.classes=m,p.displayName="@mantine/core/DrawerBody";var h=n(76643);let f={},v=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerCloseButton",f,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(h._,{ref:t,...u.getStyles("close",{classNames:o,style:l,styles:s,className:i}),...m})});v.classes=m,v.displayName="@mantine/core/DrawerCloseButton";var x=n(22344),g=n(4588);let b={},y=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerContent",b,e),{classNames:o,className:i,style:l,styles:s,vars:c,children:m,radius:u,...p}=n,h=d(),f=h.scrollAreaComponent||g.Z;return r.createElement(x.G,{...h.getStyles("content",{className:i,style:l,styles:s,classNames:o}),innerProps:h.getStyles("inner",{className:i,style:l,styles:s,classNames:o}),ref:t,...p,radius:u||h.radius||0},r.createElement(f,{style:{height:"100vh"}},m))});y.classes=m,y.displayName="@mantine/core/DrawerContent";var w=n(71281);let j={},E=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerHeader",j,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(w.o,{ref:t,...u.getStyles("header",{classNames:o,style:l,styles:s,className:i}),...m})});E.classes=m,E.displayName="@mantine/core/DrawerHeader";var C=n(51382);let _={},z=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerOverlay",_,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(C.e,{ref:t,...u.getStyles("overlay",{classNames:o,style:l,styles:s,className:i}),...m})});z.classes=m,z.displayName="@mantine/core/DrawerOverlay";var k=n(71078),S=n(92082),D=n(83453),N=n(6231),M=n(49134),T=n(45058);let I={top:"slide-down",bottom:"slide-up",left:"slide-right",right:"slide-left"},P={top:"slide-down",bottom:"slide-up",right:"slide-right",left:"slide-left"},B={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),position:"left"},H=(0,D.Z)((e,{position:t,size:n,offset:r})=>({root:{"--drawer-size":(0,S.ap)(n,"drawer-size"),"--drawer-flex":function(e){if("top"===e||"bottom"===e)return"0 0 calc(100% - var(--drawer-offset, 0rem) * 2)"}(t),"--drawer-height":"left"===t||"right"===t?void 0:"var(--drawer-size)","--drawer-align":function(e){switch(e){case"top":return"flex-start";case"bottom":return"flex-end";default:return}}(t),"--drawer-justify":"right"===t?"flex-end":void 0,"--drawer-offset":(0,k.h)(r)}})),F=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerRoot",B,e),{classNames:o,className:i,style:l,styles:s,unstyled:d,vars:u,scrollAreaComponent:p,position:h,transitionProps:f,radius:v,...x}=n,{dir:g}=(0,M.gm)(),b=(0,N.y)({name:"Drawer",classes:m,props:n,className:i,style:l,classNames:o,styles:s,unstyled:d,vars:u,varsResolver:H}),y=("rtl"===g?P:I)[h];return r.createElement(c,{value:{scrollAreaComponent:p,getStyles:b,radius:v}},r.createElement(T.e,{ref:t,...b("root"),transitionProps:{transition:y,...f},unstyled:d,...x}))});F.classes=m,F.displayName="@mantine/core/DrawerRoot";var V=n(86053);let G={},A=(0,i.d)((e,t)=>{let n=(0,a.w)("DrawerTitle",G,e),{classNames:o,className:i,style:l,styles:s,vars:c,...m}=n,u=d();return r.createElement(V.q,{ref:t,...u.getStyles("title",{classNames:o,style:l,styles:s,className:i}),...m})});A.classes=m,A.displayName="@mantine/core/DrawerTitle";let Z={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),withOverlay:!0,withCloseButton:!0},L=(0,i.d)((e,t)=>{let{title:n,withOverlay:o,overlayProps:i,withCloseButton:l,closeButtonProps:s,children:c,...d}=(0,a.w)("Drawer",Z,e),m=!!n||l;return r.createElement(F,{ref:t,...d},o&&r.createElement(z,{...i}),r.createElement(y,null,m&&r.createElement(E,null,n&&r.createElement(A,null,n),l&&r.createElement(v,{...s})),r.createElement(p,null,c)))});L.classes=m,L.displayName="@mantine/core/Drawer",L.Root=F,L.Overlay=z,L.Content=y,L.Body=p,L.Header=E,L.Title=A,L.CloseButton=v},13110:function(e,t,n){"use strict";n.d(t,{r:function(){return T}});var r=n(27378),o=n(83453),a=n(96739),i=n(6231),l=n(40593),s=n(56589),c=n(20410),d=n(71656);let[m,u]=(0,d.R)("Grid component was not found in tree");var p=n(40624),h=n(53007),f=n(86689),v=n(31582),x=n(75001),g=n(2256),b=n(9889);let y=(e,t)=>"content"===e?"auto":"auto"===e?"0rem":e?`${100/(t/e)}%`:void 0,w=(e,t,n)=>n||"auto"===e?"100%":"content"===e?"unset":y(e,t),j=(e,t)=>{if(e)return"auto"===e||t?"1":"auto"},E=(e,t)=>0===e?"0":e?`${100/(t/e)}%`:void 0;function C({span:e,order:t,offset:n,selector:o}){let a=(0,g.rZ)(),i=u(),l=(0,x.v)(e),s=void 0===l?12:(0,x.v)(e),c=(0,f.L)({"--col-order":x.v(t)?.toString(),"--col-flex-grow":j(s,i.grow),"--col-flex-basis":y(s,i.columns),"--col-width":"content"===s?"auto":void 0,"--col-max-width":w(s,i.columns,i.grow),"--col-offset":E((0,x.v)(n),i.columns)}),d=(0,h.X)(a.breakpoints).reduce((r,o)=>(r[o]||(r[o]={}),"object"==typeof t&&void 0!==t[o]&&(r[o]["--col-order"]=t[o]?.toString()),"object"==typeof e&&void 0!==e[o]&&(r[o]["--col-flex-grow"]=j(e[o],i.grow),r[o]["--col-flex-basis"]=y(e[o],i.columns),r[o]["--col-width"]="content"===e[o]?"auto":void 0,r[o]["--col-max-width"]=w(e[o],i.columns,i.grow)),"object"==typeof n&&void 0!==n[o]&&(r[o]["--col-offset"]=E(n[o],i.columns)),r),{}),m=(0,v.I)((0,h.X)(d),a).filter(e=>(0,h.X)(d[e.value]).length>0),p=m.map(e=>({query:`(min-width: ${a.breakpoints[e.value]})`,styles:d[e.value]}));return r.createElement(b.f,{styles:c,media:p,selector:o})}var _={root:"m-410352e9",inner:"m-dee7bd2f",col:"m-96bdd299"};let z={span:12},k=(0,c.d)((e,t)=>{let n=(0,a.w)("GridCol",z,e),{classNames:o,className:i,style:c,styles:d,vars:m,span:h,order:f,offset:v,...x}=n,g=u(),b=(0,l.m)();return r.createElement(r.Fragment,null,r.createElement(C,{selector:`.${b}`,span:h,order:f,offset:v}),r.createElement(s.x,{ref:t,...g.getStyles("col",{className:(0,p.Z)(i,b),style:c,classNames:o,styles:d}),...x}))});k.classes=_,k.displayName="@mantine/core/GridCol";var S=n(92082);function D({gutter:e,selector:t}){let n=(0,g.rZ)(),o=(0,f.L)({"--grid-gutter":(0,S.bG)((0,x.v)(e))}),a=(0,h.X)(n.breakpoints).reduce((t,n)=>(t[n]||(t[n]={}),"object"==typeof e&&void 0!==e[n]&&(t[n]["--grid-gutter"]=(0,S.bG)(e[n])),t),{}),i=(0,v.I)((0,h.X)(a),n).filter(e=>(0,h.X)(a[e.value]).length>0),l=i.map(e=>({query:`(min-width: ${n.breakpoints[e.value]})`,styles:a[e.value]}));return r.createElement(b.f,{styles:o,media:l,selector:t})}let N={gutter:"md",grow:!1,columns:12},M=(0,o.Z)((e,{justify:t,align:n,overflow:r})=>({root:{"--grid-justify":t,"--grid-align":n,"--grid-overflow":r}})),T=(0,c.d)((e,t)=>{let n=(0,a.w)("Grid",N,e),{classNames:o,className:c,style:d,styles:u,unstyled:p,vars:h,grow:f,gutter:v,columns:x,align:g,justify:b,children:y,...w}=n,j=(0,i.y)({name:"Grid",classes:_,props:n,className:c,style:d,classNames:o,styles:u,unstyled:p,vars:h,varsResolver:M}),E=(0,l.m)();return r.createElement(m,{value:{getStyles:j,grow:f,columns:x}},r.createElement(D,{selector:`.${E}`,...n}),r.createElement(s.x,{ref:t,...j("root",{className:E}),...w},r.createElement("div",{...j("inner")},y)))});T.classes=_,T.displayName="@mantine/core/Grid",T.Col=k},38266:function(e,t,n){"use strict";n.d(t,{z:function(){return g}});var r=n(27378),o=n(87921),a=n(96739),i=n(91531),l=n(63433),s=n(71656);let[c,d]=(0,s.R)("HoverCard component was not found in the tree");var m=n(41664);let u={};function p(e){let{children:t,onMouseEnter:n,onMouseLeave:o,...i}=(0,a.w)("HoverCardDropdown",u,e),s=d(),c=(0,m.x)(n,s.openDropdown),p=(0,m.x)(o,s.closeDropdown);return r.createElement(l.J.Dropdown,{onMouseEnter:c,onMouseLeave:p,...i},t)}p.displayName="@mantine/core/HoverCardDropdown";var h=n(513);let f={refProp:"ref"},v=(0,r.forwardRef)((e,t)=>{let{children:n,refProp:o,eventPropsWrapperName:i,...s}=(0,a.w)("HoverCardTarget",f,e);if(!(0,h.k)(n))throw Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let c=d(),u=(0,m.x)(n.props.onMouseEnter,c.openDropdown),p=(0,m.x)(n.props.onMouseLeave,c.closeDropdown),v={onMouseEnter:u,onMouseLeave:p};return r.createElement(l.J.Target,{refProp:o,ref:t,...s},(0,r.cloneElement)(n,i?{[i]:v}:v))});v.displayName="@mantine/core/HoverCardTarget";let x={openDelay:0,closeDelay:150,initiallyOpened:!1};function g(e){let{children:t,onOpen:n,onClose:s,openDelay:d,closeDelay:m,initiallyOpened:u,...p}=(0,a.w)("HoverCard",x,e),[h,{open:f,close:v}]=(0,o.q)(u,{onClose:s,onOpen:n}),{openDropdown:g,closeDropdown:b}=(0,i.U)({open:f,close:v,openDelay:d,closeDelay:m});return r.createElement(c,{value:{openDropdown:g,closeDropdown:b}},r.createElement(l.J,{...p,opened:h,__staticSelector:"HoverCard"},t))}g.displayName="@mantine/core/HoverCard",g.Target=v,g.Dropdown=p,g.extend=e=>e},58818:function(e,t,n){"use strict";n.d(t,{E:function(){return Image}});var r=n(27378),o=n(92082),a=n(83453),i=n(96739),l=n(6231),s=n(56589),c=n(50332),d={root:"m-9e117634"};let m={},u=(0,a.Z)((e,{radius:t,fit:n})=>({root:{"--image-radius":void 0===t?void 0:(0,o.H5)(t),"--image-object-fit":n}})),Image=(0,c.b)((e,t)=>{let n=(0,i.w)("Image",m,e),{classNames:o,className:a,style:c,styles:p,unstyled:h,vars:f,onError:v,src:x,radius:g,fit:b,fallbackSrc:y,mod:w,...j}=n,[E,C]=(0,r.useState)(!x);(0,r.useEffect)(()=>C(!x),[x]);let _=(0,l.y)({name:"Image",classes:d,props:n,className:a,style:c,classNames:o,styles:p,unstyled:h,vars:f,varsResolver:u});return E&&y?r.createElement(s.x,{component:"img",src:y,..._("root"),onError:v,mod:["fallback",w],...j}):r.createElement(s.x,{component:"img",ref:t,..._("root"),src:x,onError:e=>{v?.(e),C(!0)},mod:w,...j})});Image.classes=d,Image.displayName="@mantine/core/Image"},77188:function(e,t,n){"use strict";n.d(t,{f:function(){return x}});var r=n(27378),o=n(13041),a=n(83453),i=n(2256),l=n(96739),s=n(6231),c=n(56589),d=n(20410),m=n(42029),u=n(7118),p=n(88101),h={root:"m-6e45937b",loader:"m-e8eb006c",overlay:"m-df587f17"};let f={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,o.w)("overlay")},v=(0,a.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),x=(0,d.d)((e,t)=>{let n=(0,l.w)("LoadingOverlay",f,e),{classNames:o,className:a,style:d,styles:x,unstyled:g,vars:b,transitionProps:y,loaderProps:w,overlayProps:j,visible:E,zIndex:C,..._}=n,z=(0,i.rZ)(),k=(0,s.y)({name:"LoadingOverlay",classes:h,props:n,className:a,style:d,classNames:o,styles:x,unstyled:g,vars:b,varsResolver:v}),S={...f.overlayProps,...j};return r.createElement(p.u,{transition:"fade",...y,mounted:!!E},e=>r.createElement(c.x,{...k("root",{style:e}),ref:t,..._},r.createElement(m.a,{...k("loader"),unstyled:g,...w}),r.createElement(u.a,{...S,...k("overlay"),"data-light":!0,unstyled:g,color:j?.color||z.white}),r.createElement(u.a,{...S,...k("overlay"),"data-dark":!0,unstyled:g,color:j?.color||z.colors.dark[5]})))});x.classes=h,x.displayName="@mantine/core/LoadingOverlay"},41307:function(e,t,n){"use strict";n.d(t,{t:function(){return G}});var r=n(27378),o=n(96739),a=n(20410),i=n(22971),l=n(19397),s=n(71656);let[c,d]=(0,s.R)("Pagination.Root component was not found in tree");var m={root:"m-4addd315",control:"m-326d024a",dots:"m-4ad7767d"};let u={withPadding:!0},p=(0,a.d)((e,t)=>{let n=(0,o.w)("PaginationControl",u,e),{classNames:a,className:i,style:s,styles:c,vars:m,active:p,disabled:h,withPadding:f,mod:v,...x}=n,g=d(),b=h||g.disabled;return r.createElement(l.k,{ref:t,disabled:b,mod:[{active:p,disabled:b,"with-padding":f},v],...g.getStyles("control",{className:i,style:s,classNames:a,styles:c,active:!b}),...x})});p.classes=m,p.displayName="@mantine/core/PaginationControl";var h=n(56589);function f({style:e,children:t,path:n,...o}){return r.createElement("svg",{viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)",...e},...o},r.createElement("path",{d:n,fill:"currentColor"}))}let v={icon:e=>r.createElement(f,{...e,path:"M2 8c0-.733.6-1.333 1.333-1.333.734 0 1.334.6 1.334 1.333s-.6 1.333-1.334 1.333C2.6 9.333 2 8.733 2 8zm9.333 0c0-.733.6-1.333 1.334-1.333C13.4 6.667 14 7.267 14 8s-.6 1.333-1.333 1.333c-.734 0-1.334-.6-1.334-1.333zM6.667 8c0-.733.6-1.333 1.333-1.333s1.333.6 1.333 1.333S8.733 9.333 8 9.333 6.667 8.733 6.667 8z"})},x=(0,a.d)((e,t)=>{let n=(0,o.w)("PaginationDots",v,e),{classNames:a,className:i,style:l,styles:s,vars:c,icon:m,...u}=n,p=d();return r.createElement(h.x,{ref:t,...p.getStyles("dots",{className:i,style:l,styles:s,classNames:a}),...u},r.createElement(m,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});x.classes=m,x.displayName="@mantine/core/PaginationDots";var g=n(31788);function b({icon:e,name:t,action:n,type:a}){let i={icon:e},l=(0,r.forwardRef)((e,l)=>{let{icon:s,...c}=(0,o.w)(t,i,e),m=d(),u="next"===a?m.active===m.total:1===m.active;return r.createElement(p,{disabled:m.disabled||u,ref:l,onClick:m[n],withPadding:!1,...c},r.createElement(s,{style:{width:"calc(var(--pagination-control-size) / 1.8)",height:"calc(var(--pagination-control-size) / 1.8)"}}))});return l.displayName=`@mantine/core/${t}`,(0,g.F)(l)}let y=b({icon:e=>r.createElement(f,{...e,path:"M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z"}),name:"PaginationNext",action:"onNext",type:"next"}),w=b({icon:e=>r.createElement(f,{...e,path:"M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z"}),name:"PaginationPrevious",action:"onPrevious",type:"previous"}),j=b({icon:e=>r.createElement(f,{...e,path:"M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z"}),name:"PaginationFirst",action:"onFirst",type:"previous"}),E=b({icon:e=>r.createElement(f,{...e,path:"M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z"}),name:"PaginationLast",action:"onLast",type:"next"});function C({dotsIcon:e}){let t=d(),n=t.range.map((n,o)=>"dots"===n?r.createElement(x,{icon:e,key:o}):r.createElement(p,{key:o,active:n===t.active,"aria-current":n===t.active?"page":void 0,onClick:()=>t.onChange(n),disabled:t.disabled,...t.getItemProps?.(n)},n));return r.createElement(r.Fragment,null,n)}C.displayName="@mantine/core/PaginationItems";var _=n(58675);function z(e,t){return Array.from({length:t-e+1},(t,n)=>n+e)}let k="dots";var S=n(92082),D=n(41664),N=n(83453),M=n(89738),T=n(34121),I=n(55357),P=n(6231);let B={siblings:1,boundaries:1},H=(0,N.Z)((e,{size:t,radius:n,color:r,autoContrast:o})=>({root:{"--pagination-control-radius":void 0===n?void 0:(0,S.H5)(n),"--pagination-control-size":(0,S.ap)(t,"pagination-control-size"),"--pagination-control-fz":(0,S.yv)(t),"--pagination-active-bg":r?(0,M.p)(r,e):void 0,"--pagination-active-color":(0,I.o)(o,e)?(0,T.R)({color:r,theme:e}):void 0}})),F=(0,a.d)((e,t)=>{let n=(0,o.w)("PaginationRoot",B,e),{classNames:a,className:i,style:l,styles:s,unstyled:d,vars:u,total:p,value:f,defaultValue:v,onChange:x,disabled:g,siblings:b,boundaries:y,color:w,radius:j,onNextPage:E,onPreviousPage:C,onFirstPage:S,onLastPage:N,getItemProps:M,autoContrast:T,...I}=n,F=(0,P.y)({name:"Pagination",classes:m,props:n,className:i,style:l,classNames:a,styles:s,unstyled:d,vars:u,varsResolver:H}),{range:V,setPage:G,next:A,previous:Z,active:L,first:R,last:O}=function({total:e,siblings:t=1,boundaries:n=1,page:o,initialPage:a=1,onChange:i}){let l=Math.max(Math.trunc(e),0),[s,c]=(0,_.C)({value:o,onChange:i,defaultValue:a,finalValue:a}),d=e=>{e<=0?c(1):e>l?c(l):c(e)},m=(0,r.useMemo)(()=>{let e=2*t+3+2*n;if(e>=l)return z(1,l);let r=Math.max(s-t,n),o=Math.min(s+t,l-n),a=r>n+2,i=od(s+1),previous:()=>d(s-1),first:()=>d(1),last:()=>d(l)}}({page:f,initialPage:v,onChange:x,total:p,siblings:b,boundaries:y}),W=(0,D.x)(E,A),q=(0,D.x)(C,Z),$=(0,D.x)(S,R),U=(0,D.x)(N,O);return r.createElement(c,{value:{total:p,range:V,active:L,disabled:g,getItemProps:M,onChange:G,onNext:W,onPrevious:q,onFirst:$,onLast:U,getStyles:F}},r.createElement(h.x,{ref:t,...F("root"),...I}))});F.classes=m,F.displayName="@mantine/core/PaginationRoot";let V={withControls:!0,siblings:1,boundaries:1,gap:8},G=(0,a.d)((e,t)=>{let n=(0,o.w)("Pagination",V,e),{withEdges:a,withControls:l,getControlProps:s,nextIcon:c,previousIcon:d,lastIcon:m,firstIcon:u,dotsIcon:p,total:h,gap:f,...v}=n;return h<=0?null:r.createElement(F,{ref:t,total:h,...v},r.createElement(i.Z,{gap:f},a&&r.createElement(j,{icon:u,...s?.("first")}),l&&r.createElement(w,{icon:d,...s?.("previous")}),r.createElement(C,{dotsIcon:p}),l&&r.createElement(y,{icon:c,...s?.("next")}),a&&r.createElement(E,{icon:m,...s?.("last")})))});G.classes=m,G.displayName="@mantine/core/Pagination",G.Root=F,G.Control=p,G.Dots=x,G.First=j,G.Last=E,G.Next=y,G.Previous=w,G.Items=C},25916:function(e,t,n){"use strict";n.d(t,{W:function(){return y}});var r=n(27378),o=n(40624),a=n(31002),i=n(58675),l=n(92082),s=n(83453),c=n(5564),d=n(6231),m=n(96739),u=n(55934),p=n(20410),h=n(84246),f=n(42487),v=n(23163),x={root:"m-f61ca620",input:"m-ccf8da4c",innerInput:"m-f2d85dd2",visibilityToggle:"m-b1072d44"};let g={visibilityToggleIcon:({reveal:e})=>r.createElement("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"}},r.createElement("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"}))},b=(0,s.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),y=(0,p.d)((e,t)=>{let n=(0,m.w)("PasswordInput",g,e),{classNames:l,className:s,style:p,styles:v,unstyled:y,vars:w,required:j,error:E,leftSection:C,disabled:_,id:z,variant:k,inputContainer:S,description:D,label:N,size:M,errorProps:T,descriptionProps:I,labelProps:P,withAsterisk:B,inputWrapperOrder:H,wrapperProps:F,radius:V,rightSection:G,rightSectionWidth:A,rightSectionPointerEvents:Z,leftSectionWidth:L,visible:R,defaultVisible:O,onVisibilityChange:W,visibilityToggleIcon:q,visibilityToggleButtonProps:$,rightSectionProps:U,leftSectionProps:Y,leftSectionPointerEvents:J,mod:X,...K}=n,Q=(0,a.M)(z),[ee,et]=(0,i.C)({value:R,defaultValue:O,finalValue:!1,onChange:W}),en=()=>et(!ee),er=(0,d.y)({name:"PasswordInput",classes:x,props:n,className:s,style:p,classNames:l,styles:v,unstyled:y,vars:w,varsResolver:b}),{resolvedClassNames:eo,resolvedStyles:ea}=(0,c.h)({classNames:l,styles:v,props:n}),{styleProps:ei,rest:el}=(0,u.c)(K),es=r.createElement(h.A,{...er("visibilityToggle"),disabled:_,radius:V,"aria-hidden":!$,tabIndex:-1,...$,variant:"subtle",color:"gray",unstyled:y,onMouseDown:e=>{e.preventDefault(),$?.onMouseDown?.(e),en()},onKeyDown:e=>{$?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),en())}},r.createElement(q,{reveal:ee}));return r.createElement(f.I.Wrapper,{required:j,id:Q,label:N,error:E,description:D,size:M,classNames:eo,styles:ea,__staticSelector:"PasswordInput",errorProps:T,descriptionProps:I,unstyled:y,withAsterisk:B,inputWrapperOrder:H,inputContainer:S,variant:k,labelProps:{...P,htmlFor:Q},mod:X,...er("root"),...ei,...F},r.createElement(f.I,{component:"div",error:E,leftSection:C,size:M,classNames:{...eo,input:(0,o.Z)(x.input,eo.input)},styles:ea,radius:V,disabled:_,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:G??es,variant:k,unstyled:y,leftSectionWidth:L,rightSectionPointerEvents:Z||"all",rightSectionProps:U,leftSectionProps:Y,leftSectionPointerEvents:J,withAria:!1},r.createElement("input",{required:j,"data-invalid":!!E||void 0,"data-with-left-section":!!C||void 0,...er("innerInput"),disabled:_,id:Q,ref:t,...el,autoComplete:el.autoComplete||"off",type:ee?"text":"password"})))});y.classes={...v.M.classes,...x},y.displayName="@mantine/core/PasswordInput"},2570:function(e,t,n){"use strict";n.d(t,{P:function(){return v}});var r=n(27378),o=n(31002),a=n(58675),i=n(5564),l=n(96739),s=n(20410),c=n(2161),d=n(38099),m=n(45608),u=n(81097),p=n(54526),h=n(23163);let f={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},v=(0,s.d)((e,t)=>{let n=(0,l.w)("Select",f,e),{classNames:s,styles:v,unstyled:x,vars:g,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:j,onFocus:E,onBlur:C,onClick:_,onChange:z,data:k,value:S,defaultValue:D,selectFirstOptionOnChange:N,onOptionSubmit:M,comboboxProps:T,readOnly:I,disabled:P,filter:B,limit:H,withScrollArea:F,maxDropdownHeight:V,size:G,searchable:A,rightSection:Z,checkIconPosition:L,withCheckIcon:R,nothingFoundMessage:O,name:W,form:q,searchValue:$,defaultSearchValue:U,onSearchChange:Y,allowDeselect:J,error:X,rightSectionPointerEvents:K,id:Q,clearable:ee,clearButtonProps:et,hiddenInputProps:en,...er}=n,eo=(0,r.useMemo)(()=>(0,c.R)(k),[k]),ea=(0,r.useMemo)(()=>(0,d.g)(eo),[eo]),ei=(0,o.M)(Q),[el,es]=(0,a.C)({value:S,defaultValue:D,finalValue:null,onChange:z}),ec="string"==typeof el?ea[el]:void 0,[ed,em]=(0,a.C)({value:$,defaultValue:U,finalValue:ec?ec.label:"",onChange:Y}),eu=(0,p.K)({opened:b,defaultOpened:y,onDropdownOpen:j,onDropdownClose:()=>{w?.(),eu.resetSelectedOption()}}),{resolvedClassNames:ep,resolvedStyles:eh}=(0,i.h)({props:n,styles:v,classNames:s});(0,r.useEffect)(()=>{N&&eu.selectFirstOption()},[N,el]),(0,r.useEffect)(()=>{null===S&&em(""),"string"==typeof S&&ec&&em(ec.label)},[S,ec]);let ef=ee&&!!el&&!P&&!I&&r.createElement(m.h.ClearButton,{size:G,...et,onClear:()=>{es(null,null),em("")}});return r.createElement(r.Fragment,null,r.createElement(m.h,{store:eu,__staticSelector:"Select",classNames:ep,styles:eh,unstyled:x,readOnly:I,onOptionSubmit:e=>{M?.(e);let t=J&&ea[e].value===el?null:ea[e],n=t?t.value:null;es(n,t),em("string"==typeof n&&t?.label||""),eu.closeDropdown()},size:G,...T},r.createElement(m.h.Target,{targetType:A?"input":"button"},r.createElement(h.M,{id:ei,ref:t,rightSection:Z||ef||r.createElement(m.h.Chevron,{size:G,error:X,unstyled:x}),rightSectionPointerEvents:K||(ef?"all":"none"),...er,size:G,__staticSelector:"Select",disabled:P,readOnly:I||!A,value:ed,onChange:e=>{em(e.currentTarget.value),eu.openDropdown(),N&&eu.selectFirstOption()},onFocus:e=>{A&&eu.openDropdown(),E?.(e)},onBlur:e=>{A&&eu.closeDropdown(),em(null!=el&&ea[el]?.label||""),C?.(e)},onClick:e=>{A?eu.openDropdown():eu.toggleDropdown(),_?.(e)},classNames:ep,styles:eh,unstyled:x,pointer:!A,error:X})),r.createElement(u.r,{data:eo,hidden:I||P,filter:B,search:ed,limit:H,hiddenWhenEmpty:!A||!O,withScrollArea:F,maxDropdownHeight:V,filterOptions:A&&ec?.label!==ed,value:el,checkIconPosition:L,withCheckIcon:R,nothingFoundMessage:O,unstyled:x,labelId:`${ei}-label`})),r.createElement("input",{type:"hidden",name:W,value:el||"",form:q,disabled:P,...en}))});v.classes={...h.M.classes,...m.h.classes},v.displayName="@mantine/core/Select"},10904:function(e,t,n){"use strict";n.d(t,{T:function(){return s}});var r=n(27378),o=n(96739),a=n(56589),i=n(20410);let l={},s=(0,i.d)((e,t)=>{let{w:n,h:i,miw:s,mih:c,...d}=(0,o.w)("Space",l,e);return r.createElement(a.x,{ref:t,...d,w:n,miw:s??n,h:i,mih:c??i})});s.displayName="@mantine/core/Space"},35292:function(e,t,n){"use strict";n.d(t,{v:function(){return D}});var r=n(27378),o=n(71078),a=n(92082),i=n(83453),l=n(89738),s=n(34121),c=n(55357),d=n(96739),m=n(6231),u=n(56589),p=n(20410),h=n(71656);let[f,v]=(0,h.R)("Stepper component was not found in tree"),x=()=>null;x.displayName="@mantine/core/StepperCompleted";var g=n(2256),b=n(38765),y=n(42029),w=n(88101),j=n(19397),E={root:"m-cbb4ea7e",steps:"m-aaf89d0b",separator:"m-2a371ac9",content:"m-78da155d",step:"m-cbb57068","step--horizontal":"m-f56b1e2c","step--vertical":"m-833edb7e",verticalSeparator:"m-6496b3f3",stepWrapper:"m-818e70b",stepIcon:"m-1959ad01",stepCompletedIcon:"m-a79331dc",stepBody:"m-1956aa2a",stepLabel:"m-12051f6c",stepDescription:"m-164eea74"};let C=(e,t)=>"function"==typeof e?r.createElement(e,{step:t||0}):e,_={withIcon:!0,allowStepClick:!0,iconPosition:"left"},z=(0,p.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:i,vars:s,step:c,state:m,color:u,icon:p,completedIcon:h,progressIcon:f,label:x,description:E,withIcon:z,iconSize:k,loading:S,allowStepClick:D,allowStepSelect:N,iconPosition:M,orientation:T,mod:I,...P}=(0,d.w)("StepperStep",_,e),B=v(),H=(0,g.rZ)(),F={classNames:n,styles:i},V="stepCompleted"===m?null:"stepProgress"===m?f:p,G={"data-progress":"stepProgress"===m||void 0,"data-completed":"stepCompleted"===m||void 0};return r.createElement(j.k,{...B.getStyles("step",{className:o,style:a,variant:B.orientation,...F}),mod:[{"icon-position":M||B.iconPosition,"allow-click":D},I],ref:t,...G,...P,__vars:{"--step-color":u?(0,l.p)(u,H):void 0},tabIndex:D?0:-1},z&&r.createElement("span",{...B.getStyles("stepWrapper",F)},r.createElement("span",{...B.getStyles("stepIcon",F),...G},r.createElement(w.u,{mounted:"stepCompleted"===m,transition:"pop",duration:200},e=>r.createElement("span",{...B.getStyles("stepCompletedIcon",{style:e,...F})},S?r.createElement(y.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...B.getStyles("stepLoader",F)}):C(h,c)||r.createElement(b.n,{size:"60%"}))),"stepCompleted"!==m?S?r.createElement(y.a,{...B.getStyles("stepLoader",F),size:"calc(var(--stepper-icon-size) / 2)",color:u}):C(V||p,c):null),"vertical"===T&&r.createElement("span",{...B.getStyles("verticalSeparator",F),"data-active":"stepCompleted"===m||void 0})),(x||E)&&r.createElement("span",{...B.getStyles("stepBody",F),"data-orientation":B.orientation,"data-icon-position":M||B.iconPosition},x&&r.createElement("span",{...B.getStyles("stepLabel",F)},C(x,c)),E&&r.createElement("span",{...B.getStyles("stepDescription",F)},C(E,c))))});z.classes=E,z.displayName="@mantine/core/StepperStep";let k={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},S=(0,i.Z)((e,{color:t,iconSize:n,size:r,contentPadding:i,radius:d,autoContrast:m})=>({root:{"--stepper-color":t?(0,l.p)(t,e):void 0,"--stepper-icon-color":(0,c.o)(m,e)?(0,s.R)({color:t,theme:e}):void 0,"--stepper-icon-size":void 0===n?(0,a.ap)(r,"stepper-icon-size"):(0,o.h)(n),"--stepper-content-padding":(0,a.bG)(i),"--stepper-radius":void 0===d?void 0:(0,a.H5)(d),"--stepper-fz":(0,a.yv)(r),"--stepper-spacing":(0,a.bG)(r)}})),D=(0,p.d)((e,t)=>{let n=(0,d.w)("Stepper",k,e),{classNames:o,className:a,style:i,styles:l,unstyled:s,vars:c,children:p,onStepClick:h,active:v,icon:g,completedIcon:b,progressIcon:y,color:w,iconSize:j,contentPadding:C,orientation:_,iconPosition:z,size:D,radius:N,allowNextStepsSelect:M,wrap:T,...I}=n,P=(0,m.y)({name:"Stepper",classes:E,props:n,className:a,style:i,classNames:o,styles:l,unstyled:s,vars:c,varsResolver:S}),B=r.Children.toArray(p),H=B.filter(e=>e.type!==x),F=B.find(e=>e.type===x),V=H.reduce((e,t,n)=>{let o=v===n?"stepProgress":v>n?"stepCompleted":"stepInactive",a="function"==typeof h&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===o||M);return e.push((0,r.cloneElement)(t,{icon:t.props.icon||g||n+1,key:n,step:n,state:o,onClick:()=>a&&h?.(n),allowStepClick:a,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||y,color:t.props.color||w,iconSize:j,radius:N,iconPosition:t.props.iconPosition||z,orientation:_,unstyled:s})),"horizontal"===_&&n!==H.length-1&&e.push(r.createElement("div",{...P("separator"),"data-active":nH.length-1?A:G;return r.createElement(f,{value:{getStyles:P,orientation:_,iconPosition:z}},r.createElement(u.x,{...P("root"),ref:t,size:D,...I},r.createElement(u.x,{...P("steps"),mod:{orientation:_,"icon-position":z,wrap:T&&"vertical"!==_}},V),Z&&r.createElement("div",{...P("content")},Z)))});D.classes=E,D.displayName="@mantine/core/Stepper",D.Completed=x,D.Step=z},92143:function(e,t,n){"use strict";n.d(t,{T:function(){return E}});var r=n(27378),o=n(71078),a=n(92082),i=n(83453),l=n(89738),s=n(34121),c=n(55357),d=n(96739),m=n(6231),u=n(56589),p=n(20410),h=n(71656);let[f,v]=(0,h.R)("Timeline component was not found in tree");var x=n(2256),g={root:"m-43657ece",itemTitle:"m-2ebe8099",item:"m-436178ff",itemBullet:"m-8affcee1",itemBody:"m-540e8f41"};let b={},y=(0,p.d)((e,t)=>{let n=(0,d.w)("TimelineItem",b,e),{classNames:o,className:i,style:s,styles:c,vars:m,__active:p,__align:h,__lineActive:f,__vars:g,bullet:y,radius:w,color:j,lineVariant:E,children:C,title:_,mod:z,...k}=n,S=v(),D=(0,x.rZ)(),N={classNames:o,styles:c};return r.createElement(u.x,{...S.getStyles("item",{...N,className:i,style:s}),mod:[{"line-active":f,active:p},z],ref:t,__vars:{"--tli-radius":w?(0,a.H5)(w):void 0,"--tli-color":j?(0,l.p)(j,D):void 0,"--tli-border-style":E||void 0},...k},r.createElement(u.x,{...S.getStyles("itemBullet",N),mod:{"with-child":!!y,align:h,active:p}},y),r.createElement("div",{...S.getStyles("itemBody",N)},_&&r.createElement("div",{...S.getStyles("itemTitle",N)},_),r.createElement("div",{...S.getStyles("itemContent",N)},C)))});y.classes=g,y.displayName="@mantine/core/TimelineItem";let w={active:-1,align:"left",reverseActive:!1},j=(0,i.Z)((e,{bulletSize:t,lineWidth:n,radius:r,color:i,autoContrast:d})=>({root:{"--tl-bullet-size":(0,o.h)(t),"--tl-line-width":(0,o.h)(n),"--tl-radius":void 0===r?void 0:(0,a.H5)(r),"--tl-color":i?(0,l.p)(i,e):void 0,"--tl-icon-color":(0,c.o)(d,e)?(0,s.R)({color:i,theme:e}):void 0}})),E=(0,p.d)((e,t)=>{let n=(0,d.w)("Timeline",w,e),{classNames:o,className:a,style:i,styles:l,unstyled:s,vars:c,children:p,active:h,color:v,radius:x,bulletSize:b,align:y,lineWidth:E,reverseActive:C,mod:_,...z}=n,k=(0,m.y)({name:"Timeline",classes:g,props:n,className:a,style:i,classNames:o,styles:l,unstyled:s,vars:c,varsResolver:j}),S=r.Children.toArray(p),D=S.map((e,t)=>(0,r.cloneElement)(e,{unstyled:s,__align:y,__active:e.props?.active||(C?h>=S.length-t-1:h>=t),__lineActive:e.props?.lineActive||(C?h>=S.length-t-1:h-1>=t)}));return r.createElement(f,{value:{getStyles:k}},r.createElement(u.x,{...k("root"),mod:[{align:y},_],ref:t,...z},D))});E.classes=g,E.displayName="@mantine/core/Timeline",E.Item=y},98602:function(e,t,n){"use strict";n.d(t,{x:function(){return C}});var r=n(27693),o=n(27378),a=n(20410),i=n(96739),l=n(6231),s=n(5564),c=n(84246),d=n(38765),m=n(72840),u=n(87921),p=n(82591),h=n(60757),f=n(84677),v=n(73107),x=n(95008),g=n(90100),b=n(68959),y=n(68112),w=n(67789),j={timeWrapper:"m-208d2562",timeInput:"m-62ee059"};let E={dropdownType:"popover"},C=(0,a.d)((e,t)=>{let n=(0,i.w)("DateTimePicker",E,e),{value:a,defaultValue:C,onChange:_,valueFormat:z,locale:k,classNames:S,styles:D,unstyled:N,timeInputProps:M,submitButtonProps:T,withSeconds:I,level:P,defaultLevel:B,size:H,variant:F,dropdownType:V,vars:G,...A}=n,Z=(0,l.y)({name:"DateTimePicker",classes:j,props:n,classNames:S,styles:D,unstyled:N,vars:G}),{resolvedClassNames:L,resolvedStyles:R}=(0,s.h)({classNames:S,styles:D,props:n}),O=(0,o.useRef)(),W=(0,m.Yx)(O,M?.ref),{calendarProps:{allowSingleDateInRange:q,...$},others:U}=(0,g.M)(A),Y=(0,f.e)(),[J,X]=(0,h.l)({type:"default",value:a,defaultValue:C,onChange:_}),K=e=>e?r(e).format(I?"HH:mm:ss":"HH:mm"):"",[Q,ee]=(0,o.useState)(K(J)),[et,en]=(0,o.useState)(P||B||"month"),[er,eo]=(0,u.q)(!1),ea=J?r(J).locale(Y.getLocale(k)).format(z||(I?"DD/MM/YYYY HH:mm:ss":"DD/MM/YYYY HH:mm")):"";(0,p.l)(()=>{er||ee(K(J))},[J,er]),(0,p.l)(()=>{er&&en("month")},[er]);let ei="popover"===V;return o.createElement(y.i,{formattedValue:ea,dropdownOpened:er,dropdownHandlers:eo,classNames:L,styles:R,unstyled:N,ref:t,onClear:()=>X(null),shouldClear:!!J,value:J,size:H,variant:F,dropdownType:V,...U,type:"default",__staticSelector:"DateTimePicker"},o.createElement(b.M,{...$,size:H,variant:F,type:"default",value:J,defaultDate:J,onChange:e=>{e&&X((0,v.o)(J,e)),O.current?.focus()},locale:k,classNames:L,styles:R,unstyled:N,__staticSelector:"DateTimePicker",__stopPropagation:ei,level:P,defaultLevel:B,onLevelChange:e=>{en(e),$.onLevelChange?.(e)},__timezoneApplied:!0}),"month"===et&&o.createElement("div",{...Z("timeWrapper")},o.createElement(w.M,{value:Q,withSeconds:I,ref:W,unstyled:N,...M,...Z("timeInput",{className:M?.className,style:M?.style}),onChange:e=>{M?.onChange?.(e);let t=e.currentTarget.value;if(ee(t),t){let[e,n,r]=t.split(":").map(Number),o=(0,x.w)("add",new Date,Y.getTimezone());o.setHours(e),o.setMinutes(n),o.setSeconds(r||0),X((0,v.o)(o,J||(0,x.w)("add",new Date,Y.getTimezone())))}},onKeyDown:e=>{M?.onKeyDown?.(e),"Enter"===e.key&&(e.preventDefault(),eo.close())},size:H,"data-mantine-stop-propagation":ei||void 0}),o.createElement(c.A,{variant:"default",size:`input-${H||"sm"}`,...Z("submitButton",{className:T?.className,style:T?.style}),unstyled:N,"data-mantine-stop-propagation":ei||void 0,children:o.createElement(d.n,{size:"30%"}),...T,onClick:e=>{T?.onClick?.(e),eo.close()}})))});C.classes={...j,...y.i.classes,...b.M.classes},C.displayName="@mantine/dates/DateTimePicker"},67789:function(e,t,n){"use strict";n.d(t,{M:function(){return d}});var r=n(27378),o=n(40624),a=n(20410),i=n(96739),l=n(5564),s=n(23163);let c={},d=(0,a.d)((e,t)=>{let n=(0,i.w)("TimeInput",c,e),{classNames:a,styles:d,unstyled:m,vars:u,withSeconds:p,...h}=n,{resolvedClassNames:f,resolvedStyles:v}=(0,l.h)({classNames:a,styles:d,props:n});return r.createElement(s.M,{classNames:{...f,input:(0,o.Z)("m-468e7eda",f?.input)},styles:v,unstyled:m,ref:t,...h,step:p?1:60,type:"time",__staticSelector:"TimeInput"})});d.classes=s.M.classes,d.displayName="@mantine/dates/TimeInput"},73107:function(e,t,n){"use strict";function r(e,t){if(!e||!t)return t;let n=e.getHours(),r=e.getMinutes(),o=e.getSeconds(),a=e.getMilliseconds(),i=new Date(t);return i.setHours(n),i.setMinutes(r),i.setSeconds(o),i.setMilliseconds(a),i}n.d(t,{o:function(){return r}})},77717:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(27378);function o(e,t,n={leading:!1}){let[o,a]=(0,r.useState)(e),i=(0,r.useRef)(!1),l=(0,r.useRef)(null),s=(0,r.useRef)(!1),c=()=>window.clearTimeout(l.current);return(0,r.useEffect)(()=>{i.current&&(!s.current&&n.leading?(s.current=!0,a(e)):(c(),l.current=window.setTimeout(()=>{s.current=!1,a(e)},t)))},[e,n.leading,t]),(0,r.useEffect)(()=>(i.current=!0,c),[]),[o,c]}},37443:function(e,t,n){"use strict";n.d(t,{s:function(){return a}});var r=n(27378),o=n(62849);function a(){let[e,t]=(0,r.useState)(!1);(0,o.Y)(()=>{t("undefined"!=typeof window&&"EyeDropper"in window)},[]);let n=(0,r.useCallback)((t={})=>{if(e){let e=new window.EyeDropper;return e.open(t)}return Promise.resolve(void 0)},[e]);return{supported:e,open:n}}},61386:function(e,t,n){"use strict";n.d(t,{O:function(){return c}});var r=n(27378);function o(){let e=window.document,t=e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement;return t}async function a(){let e=window.document;return"function"==typeof e.exitFullscreen?e.exitFullscreen():"function"==typeof e.msExitFullscreen?e.msExitFullscreen():"function"==typeof e.webkitExitFullscreen?e.webkitExitFullscreen():"function"==typeof e.mozCancelFullScreen?e.mozCancelFullScreen():null}async function i(e){return e.requestFullscreen?.()||e.msRequestFullscreen?.()||e.webkitEnterFullscreen?.()||e.webkitRequestFullscreen?.()||e.mozRequestFullscreen?.()}let l=["","webkit","moz","ms"];function s(e,{onFullScreen:t,onError:n}){return l.forEach(r=>{e.addEventListener(`${r}fullscreenchange`,t),e.addEventListener(`${r}fullscreenerror`,n)}),()=>{l.forEach(r=>{e.removeEventListener(`${r}fullscreenchange`,t),e.removeEventListener(`${r}fullscreenerror`,n)})}}function c(){let[e,t]=(0,r.useState)(!1),n=(0,r.useRef)(),l=(0,r.useCallback)(e=>{t(e.target===o())},[t]),c=(0,r.useCallback)(e=>{t(!1),console.error(`[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${e} (${e.target})`)},[t]),d=(0,r.useCallback)(async()=>{o()?await a():await i(n.current)},[]),m=(0,r.useCallback)(e=>{null===e?n.current=window.document.documentElement:n.current=e},[]);return(0,r.useEffect)(()=>!n.current&&window.document?(n.current=window.document.documentElement,s(n.current,{onFullScreen:l,onError:c})):n.current?s(n.current,{onFullScreen:l,onError:c}):void 0,[]),{ref:m,toggle:d,fullscreen:e}}},81439:function(e,t,n){"use strict";n.d(t,{c:function(){return a}});var r=n(27378);let o={events:["keypress","mousemove","touchmove","click","scroll"],initialState:!0};function a(e,t){let{events:n,initialState:a}={...o,...t},[i,l]=(0,r.useState)(a),s=(0,r.useRef)();return(0,r.useEffect)(()=>{let t=()=>{l(!1),s.current&&window.clearTimeout(s.current),s.current=window.setTimeout(()=>{l(!0)},e)};return n.forEach(e=>document.addEventListener(e,t)),()=>{n.forEach(e=>document.removeEventListener(e,t))}},[e]),i}}},function(e){e.O(0,[38345,60213,89038,86778,15819,56926,53993,45608,83014,53456,67415,18337,49774,92888,40179],function(){return e(e.s=49536)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/styles/css-files-list-d5de90713b6c3f43.js b/_next/static/chunks/pages/styles/css-files-list-42a64287493de104.js similarity index 94% rename from _next/static/chunks/pages/styles/css-files-list-d5de90713b6c3f43.js rename to _next/static/chunks/pages/styles/css-files-list-42a64287493de104.js index 242179e45a6..399ef688ff4 100644 --- a/_next/static/chunks/pages/styles/css-files-list-d5de90713b6c3f43.js +++ b/_next/static/chunks/pages/styles/css-files-list-42a64287493de104.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[26337],{51979:function(s,e,n){"use strict";n.d(e,{Z:function(){return t}});var t=(0,n(54764).Z)("copy","IconCopy",[["path",{d:"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2",key:"svg-1"}]])},81469:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styles/css-files-list",function(){return n(31731)}])},31731:function(s,e,n){"use strict";n.r(e),n.d(e,{default:function(){return j}});var t=n(24246),o=n(71670);n(27378);var c=n(16659),r=n(51979),l=n(22971),i=n(94998),a=n(78131),d=n(84246),p=JSON.parse('{"q":["Accordion.css","ActionIcon.css","Affix.css","Alert.css","Anchor.css","AspectRatio.css","AppShell.css","Avatar.css","Badge.css","BackgroundImage.css","Blockquote.css","Breadcrumbs.css","Button.css","Burger.css","Card.css","Center.css","Checkbox.css","Chip.css","CloseButton.css","Code.css","ColorInput.css","ColorPicker.css","ColorSwatch.css","Combobox.css","Container.css","Dialog.css","Divider.css","Drawer.css","Fieldset.css","Flex.css","Grid.css","Group.css","Image.css","Indicator.css","InlineInput.css","Input.css","Kbd.css","List.css","Loader.css","LoadingOverlay.css","Mark.css","Menu.css","Modal.css","ModalBase.css","NavLink.css","Notification.css","NumberInput.css","Overlay.css","Pagination.css","Paper.css","Pill.css","PasswordInput.css","PillsInput.css","PinInput.css","Popover.css","Progress.css","Radio.css","Rating.css","RingProgress.css","ScrollArea.css","SegmentedControl.css","SimpleGrid.css","Skeleton.css","Slider.css","Spoiler.css","Stack.css","Stepper.css","Switch.css","Table.css","Tabs.css","Text.css","ThemeIcon.css","Timeline.css","Title.css","Tooltip.css","TypographyStylesProvider.css","UnstyledButton.css","VisuallyHidden.css"]}'),u=n(79388);function m(){let s=["global.css",...p.q].map(s=>[s.replace(".css",""),(0,t.jsxs)(l.Z,{children:[(0,t.jsx)(i.E,{style:{whiteSpace:"nowrap"},children:"import '@mantine/core/styles/".concat(s,"';")}),(0,t.jsx)(a.q,{value:"import '@mantine/core/styles/".concat(s,"';"),children:s=>{let{copy:e,copied:n}=s;return(0,t.jsx)(d.A,{variant:n?"filled":"default",color:n?"teal":void 0,onClick:e,size:"sm",children:n?(0,t.jsx)(c.Z,{size:12}):(0,t.jsx)(r.Z,{size:12})})}})]})]);return(0,t.jsx)(u.gw,{data:s,head:["Component","Import"]})}var h=n(3916),y=n(54568);let x=(0,h.A)(y.us.CSSFilesList);function f(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...s.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{id:"css-files-list",children:"CSS files list"}),"\n",(0,t.jsxs)(e.p,{children:["This page contains a list of CSS files that you can import from ",(0,t.jsx)(e.code,{children:"@mantine/core"})," package\nas a replacement for ",(0,t.jsx)(e.code,{children:"@mantine/core/styles.css"}),"."]}),"\n",(0,t.jsx)(e.h2,{id:"components-dependencies",children:"Components dependencies"}),"\n",(0,t.jsxs)(e.p,{children:["Some components require additional styles to work properly. For example, ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"\ncomponent is based on ",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"}),". If you want to use ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),",\nyou need to import styles for ",(0,t.jsx)(e.code,{children:"UnstyledButton"})," as well."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsxs)(e.p,{children:["Some components like ",(0,t.jsx)(e.a,{href:"/core/select/",children:"Select"})," do not have any styles on their own – they are built\non top of other components. To find out which components are used in a particular component, check\nthe component source code."]}),"\n",(0,t.jsx)(e.p,{children:"If you are not sure which components are used in a particular component, you can import\nall styles for components that are reused in other components:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/ScrollArea.css';\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/VisuallyHidden.css';\nimport '@mantine/core/styles/Paper.css';\nimport '@mantine/core/styles/Popover.css';\nimport '@mantine/core/styles/CloseButton.css';\nimport '@mantine/core/styles/Group.css';\nimport '@mantine/core/styles/Loader.css';\nimport '@mantine/core/styles/Overlay.css';\nimport '@mantine/core/styles/ModalBase.css';\nimport '@mantine/core/styles/Input.css';\nimport '@mantine/core/styles/Flex.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"global-styles",children:"Global styles"}),"\n",(0,t.jsx)(e.p,{children:"All Mantine components depend on global styles, you need to import them before\nall other styles:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/global.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"import-order",children:"Import order"}),"\n",(0,t.jsxs)(e.p,{children:["It is important to keep correct styles import order. For example, if you want to use\n",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"})," component, you need to import styles for\n",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"})," first and then import styles for ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ✅ Correct order – Button styles will override UnstyledButton styles\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ❌ Incorrect order – UnstyledButton styles will override Button styles\nimport '@mantine/core/styles/Button.css';\nimport '@mantine/core/styles/UnstyledButton.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"files-list",children:"Files list"}),"\n",(0,t.jsx)(m,{})]})}function j(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(x,{...s,children:(0,t.jsx)(f,{...s})})}}},function(s){s.O(0,[30370,15819,2775,49774,92888,40179],function(){return s(s.s=81469)}),_N_E=s.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[26337],{51979:function(s,e,n){"use strict";n.d(e,{Z:function(){return t}});var t=(0,n(54764).Z)("copy","IconCopy",[["path",{d:"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z",key:"svg-0"}],["path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2",key:"svg-1"}]])},81469:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styles/css-files-list",function(){return n(31731)}])},31731:function(s,e,n){"use strict";n.r(e),n.d(e,{default:function(){return j}});var t=n(24246),o=n(71670);n(27378);var c=n(16659),r=n(51979),l=n(22971),i=n(94998),a=n(78131),d=n(84246),p=JSON.parse('{"q":["Accordion.css","ActionIcon.css","Affix.css","Alert.css","Anchor.css","AppShell.css","AspectRatio.css","Avatar.css","BackgroundImage.css","Badge.css","Blockquote.css","Breadcrumbs.css","Button.css","Burger.css","Center.css","Card.css","Checkbox.css","Chip.css","CloseButton.css","Code.css","ColorInput.css","ColorPicker.css","ColorSwatch.css","Combobox.css","Container.css","Dialog.css","Divider.css","Drawer.css","Fieldset.css","Flex.css","Grid.css","Group.css","Image.css","Indicator.css","InlineInput.css","Input.css","Kbd.css","List.css","Loader.css","LoadingOverlay.css","Mark.css","Menu.css","Modal.css","ModalBase.css","NavLink.css","Notification.css","NumberInput.css","Overlay.css","Pagination.css","Paper.css","PasswordInput.css","PillsInput.css","Pill.css","PinInput.css","Popover.css","Progress.css","Radio.css","Rating.css","RingProgress.css","ScrollArea.css","SegmentedControl.css","SimpleGrid.css","Skeleton.css","Slider.css","Spoiler.css","Stack.css","Stepper.css","Switch.css","Table.css","Tabs.css","Text.css","ThemeIcon.css","Timeline.css","Title.css","Tooltip.css","TypographyStylesProvider.css","UnstyledButton.css","VisuallyHidden.css"]}'),u=n(79388);function m(){let s=["global.css",...p.q].map(s=>[s.replace(".css",""),(0,t.jsxs)(l.Z,{children:[(0,t.jsx)(i.E,{style:{whiteSpace:"nowrap"},children:"import '@mantine/core/styles/".concat(s,"';")}),(0,t.jsx)(a.q,{value:"import '@mantine/core/styles/".concat(s,"';"),children:s=>{let{copy:e,copied:n}=s;return(0,t.jsx)(d.A,{variant:n?"filled":"default",color:n?"teal":void 0,onClick:e,size:"sm",children:n?(0,t.jsx)(c.Z,{size:12}):(0,t.jsx)(r.Z,{size:12})})}})]})]);return(0,t.jsx)(u.gw,{data:s,head:["Component","Import"]})}var h=n(3916),y=n(54568);let x=(0,h.A)(y.us.CSSFilesList);function f(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...s.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{id:"css-files-list",children:"CSS files list"}),"\n",(0,t.jsxs)(e.p,{children:["This page contains a list of CSS files that you can import from ",(0,t.jsx)(e.code,{children:"@mantine/core"})," package\nas a replacement for ",(0,t.jsx)(e.code,{children:"@mantine/core/styles.css"}),"."]}),"\n",(0,t.jsx)(e.h2,{id:"components-dependencies",children:"Components dependencies"}),"\n",(0,t.jsxs)(e.p,{children:["Some components require additional styles to work properly. For example, ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"\ncomponent is based on ",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"}),". If you want to use ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),",\nyou need to import styles for ",(0,t.jsx)(e.code,{children:"UnstyledButton"})," as well."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsxs)(e.p,{children:["Some components like ",(0,t.jsx)(e.a,{href:"/core/select/",children:"Select"})," do not have any styles on their own – they are built\non top of other components. To find out which components are used in a particular component, check\nthe component source code."]}),"\n",(0,t.jsx)(e.p,{children:"If you are not sure which components are used in a particular component, you can import\nall styles for components that are reused in other components:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/ScrollArea.css';\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/VisuallyHidden.css';\nimport '@mantine/core/styles/Paper.css';\nimport '@mantine/core/styles/Popover.css';\nimport '@mantine/core/styles/CloseButton.css';\nimport '@mantine/core/styles/Group.css';\nimport '@mantine/core/styles/Loader.css';\nimport '@mantine/core/styles/Overlay.css';\nimport '@mantine/core/styles/ModalBase.css';\nimport '@mantine/core/styles/Input.css';\nimport '@mantine/core/styles/Flex.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"global-styles",children:"Global styles"}),"\n",(0,t.jsx)(e.p,{children:"All Mantine components depend on global styles, you need to import them before\nall other styles:"}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"import '@mantine/core/styles/global.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"import-order",children:"Import order"}),"\n",(0,t.jsxs)(e.p,{children:["It is important to keep correct styles import order. For example, if you want to use\n",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"})," component, you need to import styles for\n",(0,t.jsx)(e.a,{href:"/core/unstyled-button/",children:"UnstyledButton"})," first and then import styles for ",(0,t.jsx)(e.a,{href:"/core/button/",children:"Button"}),"."]}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ✅ Correct order – Button styles will override UnstyledButton styles\nimport '@mantine/core/styles/UnstyledButton.css';\nimport '@mantine/core/styles/Button.css';\n"})}),"\n",(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-tsx",children:"// ❌ Incorrect order – UnstyledButton styles will override Button styles\nimport '@mantine/core/styles/Button.css';\nimport '@mantine/core/styles/UnstyledButton.css';\n"})}),"\n",(0,t.jsx)(e.h2,{id:"files-list",children:"Files list"}),"\n",(0,t.jsx)(m,{})]})}function j(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(x,{...s,children:(0,t.jsx)(f,{...s})})}}},function(s){s.O(0,[30370,15819,2775,49774,92888,40179],function(){return s(s.s=81469)}),_N_E=s.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/x/code-highlight-45e08bc9830d0016.js b/_next/static/chunks/pages/x/code-highlight-3367d2f597cfbd2c.js similarity index 77% rename from _next/static/chunks/pages/x/code-highlight-45e08bc9830d0016.js rename to _next/static/chunks/pages/x/code-highlight-3367d2f597cfbd2c.js index e8aa73f818b..b9bb00a7f80 100644 --- a/_next/static/chunks/pages/x/code-highlight-45e08bc9830d0016.js +++ b/_next/static/chunks/pages/x/code-highlight-3367d2f597cfbd2c.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[62851],{72266:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/x/code-highlight",function(){return n(74568)}])},74568:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return X}});var o=n(24246),a=n(71670),l=n(27378),i=n(40624),r=n(20410),c=n(96739),s=n(6231),d=n(56589),m=n(78131),u=n(99684),h=n(84246),p=n(49849),g=n(77199),f=n(2688),x=n(42595),y=n(17441);let b={...x.Z,root:(0,i.Z)(x.Z.root,y.Z.theme)},C={copyLabel:"Copy code",copiedLabel:"Copied",language:"tsx",withCopyButton:!0},E=(0,r.d)((e,t)=>{let n=(0,c.w)("CodeHighlight",C,e),{classNames:o,className:a,style:i,styles:r,unstyled:x,vars:y,children:E,code:v,copiedLabel:j,copyLabel:H,language:w,withCopyButton:N,highlightOnClient:k,...B}=n,T=(0,s.y)({name:"CodeHighlight",props:n,classes:b,className:a,style:i,classNames:o,styles:r,unstyled:x}),I=function({code:e,language:t,highlightOnClient:n}){let o=f.Z.getLanguage(t)?t:"plaintext",a=()=>f.Z.highlight(e.trim(),{language:o}).value,[i,r]=(0,l.useState)(!n),[c,s]=(0,l.useState)(n?e:a());return(0,l.useEffect)(()=>{n&&(s(a()),r(!0))},[]),(0,l.useEffect)(()=>{s(a())},[e]),()=>i?{dangerouslySetInnerHTML:{__html:c}}:{children:e.trim()}}({code:v,language:w,highlightOnClient:k});return l.createElement(d.x,{...T("root"),ref:t,...B,dir:"ltr"},N&&l.createElement(m.q,{value:v.trim()},({copied:e,copy:t})=>l.createElement(u.u,{label:e?j:H,fz:"sm",position:"left"},l.createElement(h.A,{onClick:t,variant:"none",...T("copy")},l.createElement(g.T,{copied:e})))),l.createElement(p.x,{type:"hover",dir:"ltr",offsetScrollbars:!1},l.createElement("pre",{...T("pre")},l.createElement("code",{...T("code"),...I()}))))});E.displayName="@mantine/core/CodeHighlight",E.classes=b;let v=` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[62851],{72266:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/x/code-highlight",function(){return n(74568)}])},74568:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return X}});var o=n(24246),a=n(71670),l=n(27378),i=n(40624),r=n(20410),c=n(96739),s=n(6231),d=n(56589),m=n(78131),u=n(99684),h=n(84246),p=n(49849),g=n(77199),f=n(2688),x=n(42595),y=n(17441);let C={...x.Z,root:(0,i.Z)(x.Z.root,y.Z.theme)},b={copyLabel:"Copy code",copiedLabel:"Copied",language:"tsx",withCopyButton:!0},E=(0,r.d)((e,t)=>{let n=(0,c.w)("CodeHighlight",b,e),{classNames:o,className:a,style:i,styles:r,unstyled:x,vars:y,children:E,code:v,copiedLabel:j,copyLabel:H,language:w,withCopyButton:N,highlightOnClient:B,...k}=n,T=(0,s.y)({name:"CodeHighlight",props:n,classes:C,className:a,style:i,classNames:o,styles:r,unstyled:x}),I=function({code:e,language:t,highlightOnClient:n}){let o=f.Z.getLanguage(t)?t:"plaintext",a=()=>f.Z.highlight(e.trim(),{language:o}).value,[i,r]=(0,l.useState)(!n),[c,s]=(0,l.useState)(n?e:a());return(0,l.useEffect)(()=>{n&&(s(a()),r(!0))},[]),(0,l.useEffect)(()=>{s(a())},[e]),()=>i?{dangerouslySetInnerHTML:{__html:c}}:{children:e.trim()}}({code:v,language:w,highlightOnClient:B});return l.createElement(d.x,{...T("root"),ref:t,...k,dir:"ltr"},N&&l.createElement(m.q,{value:v.trim()},({copied:e,copy:t})=>l.createElement(u.u,{label:e?j:H,fz:"sm",position:"left"},l.createElement(h.A,{onClick:t,variant:"none",...T("copy")},l.createElement(g.T,{copied:e})))),l.createElement(p.x,{type:"hover",dir:"ltr",offsetScrollbars:!1},l.createElement("pre",{...T("pre")},l.createElement("code",{...T("code"),...I()}))))});E.displayName="@mantine/core/CodeHighlight",E.classes=C;let v=` // VisuallyHidden component source code import React from 'react'; import { @@ -83,7 +83,7 @@ function Demo() { ); } -`,k={type:"code",component:function(){return l.createElement(l.Fragment,null,l.createElement(E,{code:`// Custom copy label${w}`,language:"tsx",copyLabel:"Copy button code",copiedLabel:"Copied!"}),l.createElement(E,{code:`// Without copy button${w}`,language:"tsx",withCopyButton:!1,mt:"md"}))},code:N};var B=n(61209);let T=` +`,B={type:"code",component:function(){return l.createElement(l.Fragment,null,l.createElement(E,{code:`// Custom copy label${w}`,language:"tsx",copyLabel:"Copy button code",copiedLabel:"Copied!"}),l.createElement(E,{code:`// Without copy button${w}`,language:"tsx",withCopyButton:!1,mt:"md"}))},code:N};var k=n(61209);let T=` import { Group, Button, MantineProvider, createTheme } from '@mantine/core'; import classes from './Demo.module.css'; @@ -134,7 +134,7 @@ function Demo() { /> ); } -`,S={type:"code",component:function(){return l.createElement(B.Q,{code:[{fileName:"Demo.tsx",code:T,language:"tsx"},{fileName:"Demo.module.css",code:I,language:"scss"}]})},code:L};var M=n(8858),P=n(96850);let D=` +`,S={type:"code",component:function(){return l.createElement(k.Q,{code:[{fileName:"Demo.tsx",code:T,language:"tsx"},{fileName:"Demo.module.css",code:I,language:"scss"}]})},code:L};var M=n(8858),P=n(96850);let D=` function Button() { return ; } @@ -174,7 +174,7 @@ function Demo() { /> ); } -`,z={type:"code",component:function(){return l.createElement(B.Q,{code:[{fileName:"Button.tsx",code:D,language:"tsx",icon:l.createElement(M.K,{size:18})},{fileName:"Button.module.css",code:V,language:"scss",icon:l.createElement(P.L,{size:18})}]})},code:_};var F=n(110);let $=` +`,z={type:"code",component:function(){return l.createElement(k.Q,{code:[{fileName:"Button.tsx",code:D,language:"tsx",icon:l.createElement(M.K,{size:18})},{fileName:"Button.module.css",code:V,language:"scss",icon:l.createElement(P.L,{size:18})}]})},code:_};var F=n(110);let $=` import { Group, Button, MantineProvider, createTheme } from '@mantine/core'; import classes from './Demo.module.css'; @@ -229,7 +229,7 @@ function Demo() { /> ); } -`,A={type:"code",component:function(){return l.createElement(B.Q,{withExpandButton:!0,defaultExpanded:!1,expandCodeLabel:"Show full code",collapseCodeLabel:"Show less",code:[{fileName:"Demo.tsx",code:$,language:"tsx"},{fileName:"Demo.module.css",code:W,language:"scss"}]})},code:Z};var G=n(37127),Text=n(26569);let Q=` +`,A={type:"code",component:function(){return l.createElement(k.Q,{withExpandButton:!0,defaultExpanded:!1,expandCodeLabel:"Show full code",collapseCodeLabel:"Show less",code:[{fileName:"Demo.tsx",code:$,language:"tsx"},{fileName:"Demo.module.css",code:W,language:"scss"}]})},code:Z};var G=n(37127),Text=n(26569);let Q=` import { Text } from '@mantine/core'; import { InlineCodeHighlight } from '@mantine/code-highlight'; @@ -241,7 +241,7 @@ function Demo() { ); } -`,R={type:"code",component:function(){return l.createElement(Text.x,null,"You can highlight code inline:"," ",l.createElement(G._,{code:"import React from 'react';",language:"tsx"}),". Is not that cool?")},code:Q};var Y=n(3916),q=n(54568);let K=(0,Y.A)(q.us.CodeHighlight);function O(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...e.components},{Demo:n,InstallScript:l}=t;return n||U("Demo",!0),l||U("InstallScript",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsx)(l,{packages:"@mantine/code-highlight"}),"\n",(0,o.jsx)(t.p,{children:"After installation import package styles at the root of your application:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"import '@mantine/code-highlight/styles.css';\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"CodeHighlight"})," highlight given code with ",(0,o.jsx)(t.a,{href:"https://highlightjs.org/",children:"highlight.js"}),", it accepts\n",(0,o.jsx)(t.code,{children:"code"})," prop with string of code to highlight and ",(0,o.jsx)(t.code,{children:"language"})," prop with language name.\nIf ",(0,o.jsx)(t.code,{children:"language"})," is not provided, ",(0,o.jsx)(t.code,{children:"CodeHighlight"})," will assume that the code language is ",(0,o.jsx)(t.code,{children:"tsx"})," (TypeScript)."]}),"\n",(0,o.jsx)(n,{data:H}),"\n",(0,o.jsx)(t.h2,{id:"copy-button",children:"Copy button"}),"\n",(0,o.jsxs)(t.p,{children:["You can customize copy button labels with ",(0,o.jsx)(t.code,{children:"copyLabel"})," and ",(0,o.jsx)(t.code,{children:"copiedLabel"})," props.\nIn case you need to remove the copy button, set ",(0,o.jsx)(t.code,{children:"withCopyButton={false}"}),"."]}),"\n",(0,o.jsx)(n,{data:k}),"\n",(0,o.jsx)(t.h2,{id:"with-tabs",children:"With tabs"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"CodeHighlightTabs"})," component allows organizing multiple code blocks into tabs:"]}),"\n",(0,o.jsx)(n,{data:S}),"\n",(0,o.jsx)(t.h2,{id:"tabs-with-icons",children:"Tabs with icons"}),"\n",(0,o.jsxs)(t.p,{children:["You can use any React node as tab icon. The example below uses TypeScript and CSS\nicons from the ",(0,o.jsx)(t.code,{children:"@mantinex/dev-icons"})," package, but you can use any other icons library or custom\nicons:"]}),"\n",(0,o.jsx)(n,{data:z}),"\n",(0,o.jsx)(t.h2,{id:"tabs-icons-based-on-file-name",children:"Tabs icons based on file name"}),"\n",(0,o.jsxs)(t.p,{children:["As an alternative to providing icons manually for each tab, you can use ",(0,o.jsx)(t.code,{children:"getFileIcon"})," prop\nto assign icons based on file name. ",(0,o.jsx)(t.code,{children:"getFileIcon"})," accepts file name and must React node\nor ",(0,o.jsx)(t.code,{children:"null"}),"."]}),"\n",(0,o.jsx)(n,{data:F.H}),"\n",(0,o.jsx)(t.h2,{id:"expandable-code",children:"Expandable code"}),"\n",(0,o.jsxs)(t.p,{children:["If the code snippet is too long, you can make it expandable with ",(0,o.jsx)(t.code,{children:"withExpandButton"}),"\nand ",(0,o.jsx)(t.code,{children:"defaultExpanded={false}"})," props. To change label of the expand/collapse control\ntooltip, use ",(0,o.jsx)(t.code,{children:"expandCodeLabel"})," and ",(0,o.jsx)(t.code,{children:"collapseCodeLabel"}),"."]}),"\n",(0,o.jsx)(n,{data:A}),"\n",(0,o.jsx)(t.h2,{id:"inline-code",children:"Inline code"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"InlineCodeHighlight"})," component allows highlighting inline code snippets:"]}),"\n",(0,o.jsx)(n,{data:R})]})}function X(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,o.jsx)(K,{...e,children:(0,o.jsx)(O,{...e})})}function U(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},110:function(e,t,n){"use strict";n.d(t,{H:function(){return m}});var o=n(27378),a=n(61209),l=n(8858),i=n(96850);let r=` +`,R={type:"code",component:function(){return l.createElement(Text.x,null,"You can highlight code inline:"," ",l.createElement(G._,{code:"import React from 'react';",language:"tsx"}),". Is not that cool?")},code:Q};var Y=n(3916),q=n(54568);let K=(0,Y.A)(q.us.CodeHighlight);function O(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...e.components},{Demo:n,InstallScript:l}=t;return n||U("Demo",!0),l||U("InstallScript",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,o.jsx)(l,{packages:"@mantine/code-highlight"}),"\n",(0,o.jsx)(t.p,{children:"After installation import package styles at the root of your application:"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:"import '@mantine/code-highlight/styles.css';\n"})}),"\n",(0,o.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"CodeHighlight"})," highlight given code with ",(0,o.jsx)(t.a,{href:"https://highlightjs.org/",children:"highlight.js"}),", it accepts\n",(0,o.jsx)(t.code,{children:"code"})," prop with string of code to highlight and ",(0,o.jsx)(t.code,{children:"language"})," prop with language name.\nIf ",(0,o.jsx)(t.code,{children:"language"})," is not provided, ",(0,o.jsx)(t.code,{children:"CodeHighlight"})," will assume that the code language is ",(0,o.jsx)(t.code,{children:"tsx"})," (TypeScript)."]}),"\n",(0,o.jsx)(n,{data:H}),"\n",(0,o.jsx)(t.h2,{id:"copy-button",children:"Copy button"}),"\n",(0,o.jsxs)(t.p,{children:["You can customize copy button labels with ",(0,o.jsx)(t.code,{children:"copyLabel"})," and ",(0,o.jsx)(t.code,{children:"copiedLabel"})," props.\nIn case you need to remove the copy button, set ",(0,o.jsx)(t.code,{children:"withCopyButton={false}"}),"."]}),"\n",(0,o.jsx)(n,{data:B}),"\n",(0,o.jsx)(t.h2,{id:"with-tabs",children:"With tabs"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"CodeHighlightTabs"})," component allows organizing multiple code blocks into tabs:"]}),"\n",(0,o.jsx)(n,{data:S}),"\n",(0,o.jsx)(t.h2,{id:"tabs-with-icons",children:"Tabs with icons"}),"\n",(0,o.jsxs)(t.p,{children:["You can use any React node as tab icon. The example below uses TypeScript and CSS\nicons from the ",(0,o.jsx)(t.code,{children:"@mantinex/dev-icons"})," package, but you can use any other icons library or custom\nicons:"]}),"\n",(0,o.jsx)(n,{data:z}),"\n",(0,o.jsx)(t.h2,{id:"tabs-icons-based-on-file-name",children:"Tabs icons based on file name"}),"\n",(0,o.jsxs)(t.p,{children:["As an alternative to providing icons manually for each tab, you can use ",(0,o.jsx)(t.code,{children:"getFileIcon"})," prop\nto assign icons based on file name. ",(0,o.jsx)(t.code,{children:"getFileIcon"})," accepts file name and must React node\nor ",(0,o.jsx)(t.code,{children:"null"}),"."]}),"\n",(0,o.jsx)(n,{data:F.H}),"\n",(0,o.jsx)(t.h2,{id:"expandable-code",children:"Expandable code"}),"\n",(0,o.jsxs)(t.p,{children:["If the code snippet is too long, you can make it expandable with ",(0,o.jsx)(t.code,{children:"withExpandButton"}),"\nand ",(0,o.jsx)(t.code,{children:"defaultExpanded={false}"})," props. To change label of the expand/collapse control\ntooltip, use ",(0,o.jsx)(t.code,{children:"expandCodeLabel"})," and ",(0,o.jsx)(t.code,{children:"collapseCodeLabel"}),"."]}),"\n",(0,o.jsx)(n,{data:A}),"\n",(0,o.jsx)(t.h2,{id:"inline-code",children:"Inline code"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.code,{children:"InlineCodeHighlight"})," component allows highlighting inline code snippets:"]}),"\n",(0,o.jsx)(n,{data:R})]})}function X(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,o.jsx)(K,{...e,children:(0,o.jsx)(O,{...e})})}function U(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},110:function(e,t,n){"use strict";n.d(t,{H:function(){return m}});var o=n(27378),a=n(61209),l=n(8858),i=n(96850);let r=` function Button() { return ; } @@ -289,4 +289,4 @@ function Demo() { /> ); } -`;function d(e){return e.endsWith(".ts")||e.endsWith(".tsx")?o.createElement(l.K,{size:18}):e.endsWith(".css")?o.createElement(i.L,{size:18}):null}let m={type:"code",component:function(){return o.createElement(a.Q,{getFileIcon:d,code:[{fileName:"Button.tsx",code:r,language:"tsx"},{fileName:"Button.module.css",code:c,language:"scss"}]})},code:s}},61209:function(e,t,n){"use strict";n.d(t,{Q:function(){return N}});var o=n(27378),a=n(40624),l=n(2688),i=n(71078),r=n(83453),c=n(20410),s=n(96739),d=n(6231),m=n(19397),u=n(56589),h=n(49849),p=n(99684),g=n(84246),f=n(78131),x=n(58675),y=n(77199);function b({expanded:e,style:t,...n}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,i.h)(18),height:(0,i.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 13v-8l-3 3m6 0l-3 -3"}),o.createElement("path",{d:"M9 17l1 0"}),o.createElement("path",{d:"M14 17l1 0"}),o.createElement("path",{d:"M19 17l1 0"}),o.createElement("path",{d:"M4 17l1 0"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 11v8l3 -3m-6 0l3 3"}),o.createElement("path",{d:"M9 7l1 0"}),o.createElement("path",{d:"M14 7l1 0"}),o.createElement("path",{d:"M19 7l1 0"}),o.createElement("path",{d:"M4 7l1 0"})))}function C({fileIcon:e,fileName:t,getFileIcon:n,className:a,style:l}){return e?o.createElement("span",{className:a,style:l},e):n&&t?o.createElement("span",{className:a,style:l},n(t)):null}var E=n(42595),v=n(17441);let j={...E.Z,root:(0,a.Z)(E.Z.root,v.Z.theme)},H={withHeader:!0,copyLabel:"Copy code",copiedLabel:"Copied",maxCollapsedHeight:(0,i.h)("8rem"),expandCodeLabel:"Expand code",collapseCodeLabel:"Collapse code"},w=(0,r.Z)((e,{maxCollapsedHeight:t})=>({root:{"--ch-max-collapsed-height":(0,i.h)(t)}})),N=(0,c.d)((e,t)=>{let n=(0,s.w)("CodeHighlightTabs",H,e),{classNames:a,className:i,style:r,styles:c,unstyled:E,vars:v,children:N,code:k,defaultActiveTab:B,activeTab:T,onTabChange:I,withHeader:L,copiedLabel:S,copyLabel:M,getFileIcon:P,maxCollapsedHeight:D,expanded:V,defaultExpanded:_,onExpandedChange:z,expandCodeLabel:F,collapseCodeLabel:$,withExpandButton:W,mod:Z,...A}=n,G=(0,d.y)({name:"CodeHighlightTabs",props:n,classes:j,className:i,style:r,classNames:a,styles:c,unstyled:E,vars:v,varsResolver:w}),[Q,R]=(0,x.C)({defaultValue:B,value:T,finalValue:0,onChange:I}),[Y,q]=(0,x.C)({defaultValue:_,value:V,finalValue:!0,onChange:z}),K=Array.isArray(k)?k:[k],O=K[Q],X=l.Z.highlight(O.code.trim(),{language:O.language||"plaintext"}).value,U=K.map((e,t)=>o.createElement(m.k,{...G("file"),key:e.fileName,mod:{active:t===Q},onClick:()=>R(t)},o.createElement(C,{fileIcon:e.icon,getFileIcon:P,fileName:e.fileName,...G("fileIcon")}),o.createElement("span",null,e.fileName)));return o.createElement(u.x,{...G("root"),mod:[{collapsed:!Y},Z],ref:t,...A,dir:"ltr"},L&&o.createElement("div",{...G("header")},o.createElement(h.x,{type:"never",dir:"ltr",offsetScrollbars:!1},o.createElement("div",{...G("files")},U)),o.createElement("div",{...G("controls")},W&&o.createElement(p.u,{label:Y?$:F,fz:"sm",position:"left"},o.createElement(g.A,{onClick:()=>q(!Y),variant:"none","aria-label":Y?$:F,...G("control")},o.createElement(b,{expanded:Y}))),o.createElement(f.q,{value:O.code.trim()},({copied:e,copy:t})=>o.createElement(p.u,{label:e?S:M,fz:"sm",position:"left"},o.createElement(g.A,{onClick:t,variant:"none",...G("control"),"aria-label":e?S:M},o.createElement(y.T,{copied:e})))))),o.createElement(h.x,{type:"auto",dir:"ltr",offsetScrollbars:!1},o.createElement(u.x,{...G("codeWrapper"),mod:{expanded:Y}},o.createElement("pre",{...G("pre")},o.createElement("code",{...G("code"),dangerouslySetInnerHTML:{__html:X}})))),o.createElement(m.k,{...G("showCodeButton"),mod:{hidden:Y},onClick:()=>q(!0)},F))});N.displayName="@mantine/core/CodeHighlightTabs",N.classes=j},77199:function(e,t,n){"use strict";n.d(t,{T:function(){return l}});var o=n(27378),a=n(71078);function l({copied:e,style:t,...n}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,a.h)(18),height:(0,a.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M5 12l5 5l10 -10"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"}),o.createElement("path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"})))}l.displayName="@mantine/code-highlight/CopyIcon"}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=72266)}),_N_E=e.O()}]); \ No newline at end of file +`;function d(e){return e.endsWith(".ts")||e.endsWith(".tsx")?o.createElement(l.K,{size:18}):e.endsWith(".css")?o.createElement(i.L,{size:18}):null}let m={type:"code",component:function(){return o.createElement(a.Q,{getFileIcon:d,code:[{fileName:"Button.tsx",code:r,language:"tsx"},{fileName:"Button.module.css",code:c,language:"scss"}]})},code:s}},61209:function(e,t,n){"use strict";n.d(t,{Q:function(){return N}});var o=n(27378),a=n(40624),l=n(2688),i=n(71078),r=n(83453),c=n(20410),s=n(96739),d=n(6231),m=n(19397),u=n(56589),h=n(49849),p=n(99684),g=n(84246),f=n(78131),x=n(58675),y=n(77199);function C({expanded:e,style:t,...n}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,i.h)(18),height:(0,i.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 13v-8l-3 3m6 0l-3 -3"}),o.createElement("path",{d:"M9 17l1 0"}),o.createElement("path",{d:"M14 17l1 0"}),o.createElement("path",{d:"M19 17l1 0"}),o.createElement("path",{d:"M4 17l1 0"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M12 11v8l3 -3m-6 0l3 3"}),o.createElement("path",{d:"M9 7l1 0"}),o.createElement("path",{d:"M14 7l1 0"}),o.createElement("path",{d:"M19 7l1 0"}),o.createElement("path",{d:"M4 7l1 0"})))}function b({fileIcon:e,fileName:t,getFileIcon:n,className:a,style:l}){return e?o.createElement("span",{className:a,style:l},e):n&&t?o.createElement("span",{className:a,style:l},n(t)):null}var E=n(42595),v=n(17441);let j={...E.Z,root:(0,a.Z)(E.Z.root,v.Z.theme)},H={withHeader:!0,copyLabel:"Copy code",copiedLabel:"Copied",maxCollapsedHeight:(0,i.h)("8rem"),expandCodeLabel:"Expand code",collapseCodeLabel:"Collapse code",withCopyButton:!0},w=(0,r.Z)((e,{maxCollapsedHeight:t})=>({root:{"--ch-max-collapsed-height":(0,i.h)(t)}})),N=(0,c.d)((e,t)=>{let n=(0,s.w)("CodeHighlightTabs",H,e),{classNames:a,className:i,style:r,styles:c,unstyled:E,vars:v,children:N,code:B,defaultActiveTab:k,activeTab:T,onTabChange:I,withHeader:L,copiedLabel:S,copyLabel:M,getFileIcon:P,maxCollapsedHeight:D,expanded:V,defaultExpanded:_,onExpandedChange:z,expandCodeLabel:F,collapseCodeLabel:$,withExpandButton:W,withCopyButton:Z,mod:A,...G}=n,Q=(0,d.y)({name:"CodeHighlightTabs",props:n,classes:j,className:i,style:r,classNames:a,styles:c,unstyled:E,vars:v,varsResolver:w}),[R,Y]=(0,x.C)({defaultValue:k,value:T,finalValue:0,onChange:I}),[q,K]=(0,x.C)({defaultValue:_,value:V,finalValue:!0,onChange:z}),O=Array.isArray(B)?B:[B],X=O[R],U=l.Z.highlight(X.code.trim(),{language:X.language||"plaintext"}).value,J=O.map((e,t)=>o.createElement(m.k,{...Q("file"),key:e.fileName,mod:{active:t===R},onClick:()=>Y(t)},o.createElement(b,{fileIcon:e.icon,getFileIcon:P,fileName:e.fileName,...Q("fileIcon")}),o.createElement("span",null,e.fileName)));return o.createElement(u.x,{...Q("root"),mod:[{collapsed:!q},A],ref:t,...G,dir:"ltr"},L&&o.createElement("div",{...Q("header")},o.createElement(h.x,{type:"never",dir:"ltr",offsetScrollbars:!1},o.createElement("div",{...Q("files")},J)),o.createElement("div",{...Q("controls")},W&&o.createElement(p.u,{label:q?$:F,fz:"sm",position:"left"},o.createElement(g.A,{onClick:()=>K(!q),variant:"none","aria-label":q?$:F,...Q("control")},o.createElement(C,{expanded:q}))),Z&&o.createElement(f.q,{value:X.code.trim()},({copied:e,copy:t})=>o.createElement(p.u,{label:e?S:M,fz:"sm",position:"left"},o.createElement(g.A,{onClick:t,variant:"none",...Q("control"),"aria-label":e?S:M},o.createElement(y.T,{copied:e})))))),o.createElement(h.x,{type:"auto",dir:"ltr",offsetScrollbars:!1},o.createElement(u.x,{...Q("codeWrapper"),mod:{expanded:q}},o.createElement("pre",{...Q("pre")},o.createElement("code",{...Q("code"),dangerouslySetInnerHTML:{__html:U}})))),o.createElement(m.k,{...Q("showCodeButton"),mod:{hidden:q},onClick:()=>K(!0)},F))});N.displayName="@mantine/core/CodeHighlightTabs",N.classes=j},77199:function(e,t,n){"use strict";n.d(t,{T:function(){return l}});var o=n(27378),a=n(71078);function l({copied:e,style:t,...n}){return o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,a.h)(18),height:(0,a.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n},e?o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M5 12l5 5l10 -10"})):o.createElement(o.Fragment,null,o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o.createElement("path",{d:"M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"}),o.createElement("path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"})))}l.displayName="@mantine/code-highlight/CopyIcon"}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=72266)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/x/nprogress-8f1a56b6b3c7fcb5.js b/_next/static/chunks/pages/x/nprogress-2cebdb3a941d12df.js similarity index 83% rename from _next/static/chunks/pages/x/nprogress-8f1a56b6b3c7fcb5.js rename to _next/static/chunks/pages/x/nprogress-2cebdb3a941d12df.js index 02cde8f2af7..05d02300c29 100644 --- a/_next/static/chunks/pages/x/nprogress-8f1a56b6b3c7fcb5.js +++ b/_next/static/chunks/pages/x/nprogress-2cebdb3a941d12df.js @@ -18,4 +18,4 @@ function Demo() { ); } -`,R={type:"code",component:function(){return s.createElement(s.Fragment,null,s.createElement(I,null),s.createElement(a.Z,{justify:"center"},s.createElement(i.z,{onClick:()=>P.start(),variant:"default"},"Start"),s.createElement(i.z,{onClick:()=>P.stop(),variant:"default"},"Stop"),s.createElement(i.z,{onClick:()=>P.increment(),variant:"default"},"Increment"),s.createElement(i.z,{onClick:()=>P.decrement(),variant:"default"},"Decrement"),s.createElement(i.z,{onClick:()=>P.set(50),variant:"default"},"Set 50%"),s.createElement(i.z,{onClick:()=>P.reset(),variant:"default"},"Reset"),s.createElement(i.z,{onClick:()=>P.complete(),variant:"default"},"Complete")))},code:z};var M=r(3916),T=r(54568);let D=(0,M.A)(T.us.Nprogress);function A(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components},{Demo:r,InstallScript:s}=t;return r||L("Demo",!0),s||L("InstallScript",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,n.jsx)(s,{packages:"@mantine/nprogress"}),"\n",(0,n.jsx)(t.p,{children:"After installation import package styles at the root of your application:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import '@mantine/nprogress/styles.css';\n"})}),"\n",(0,n.jsx)(t.h2,{id:"setup-navigationprogress",children:"Setup NavigationProgress"}),"\n",(0,n.jsxs)(t.p,{children:["Render ",(0,n.jsx)(t.code,{children:"NavigationProgress"})," anywhere in your app within ",(0,n.jsx)(t.a,{href:"/theming/mantine-provider/",children:"MantineProvider"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\nimport { NavigationProgress } from '@mantine/nprogress';\n\nfunction Demo() {\n return (\n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(r,{data:R})]})}function G(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(D,{...e,children:(0,n.jsx)(A,{...e})})}function L(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},30454:function(e,t,r){"use strict";r.d(t,{E:function(){return C}});var n=r(27378),o=r(5564),s=r(96739),a=r(20410),i=r(56589),l=r(71656);let[c,u]=(0,l.R)("Progress.Root component was not found in tree");var m={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let p={},d=(0,a.d)((e,t)=>{let{classNames:r,className:o,style:a,styles:l,vars:c,...m}=(0,s.w)("ProgressLabel",p,e),d=u();return n.createElement(i.x,{ref:t,...d.getStyles("label",{className:o,style:a,classNames:r,styles:l}),...m})});d.classes=m,d.displayName="@mantine/core/ProgressLabel";var g=r(92082),v=r(83453),f=r(6231);let h={},w=(0,v.Z)((e,{size:t,radius:r,transitionDuration:n})=>({root:{"--progress-size":(0,g.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,g.H5)(r),"--progress-transition-duration":"number"==typeof n?`${n}ms`:void 0}})),E=(0,a.d)((e,t)=>{let r=(0,s.w)("ProgressRoot",h,e),{classNames:o,className:a,style:l,styles:u,unstyled:p,vars:d,autoContrast:g,transitionDuration:v,...E}=r,x=(0,f.y)({name:"Progress",classes:m,props:r,className:a,style:l,classNames:o,styles:u,unstyled:p,vars:d,varsResolver:w});return n.createElement(c,{value:{getStyles:x,autoContrast:g}},n.createElement(i.x,{ref:t,...x("root"),...E}))});E.classes=m,E.displayName="@mantine/core/ProgressRoot";var x=r(89738),P=r(34121),N=r(2256);let k={withAria:!0},y=(0,a.d)((e,t)=>{let{classNames:r,className:o,style:a,styles:l,vars:c,value:m,withAria:p,color:d,striped:g,animated:v,mod:f,...h}=(0,s.w)("ProgressSection",k,e),w=u(),E=(0,N.rZ)(),y=p?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":m,"aria-valuetext":`${m}%`}:{};return n.createElement(i.x,{ref:t,...w.getStyles("section",{className:o,classNames:r,styles:l,style:a}),...h,...y,mod:[{striped:g||v,animated:v},f],__vars:{"--progress-section-width":`${m}%`,"--progress-section-color":(0,x.p)(d,E),"--progress-label-color":w.autoContrast?(0,P.R)({color:d,theme:E}):void 0}})});y.classes=m,y.displayName="@mantine/core/ProgressSection";let j={},C=(0,a.d)((e,t)=>{let r=(0,s.w)("Progress",j,e),{value:a,classNames:i,styles:l,vars:c,color:u,striped:m,animated:p,"aria-label":d,...g}=r,{resolvedClassNames:v,resolvedStyles:f}=(0,o.h)({classNames:i,styles:l,props:r});return n.createElement(E,{ref:t,classNames:v,styles:f,vars:c,...g},n.createElement(y,{value:a,color:u,striped:m,animated:p,"aria-label":d}))});C.classes=m,C.displayName="@mantine/core/Progress",C.Section=y,C.Root=E,C.Label=d}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=91911)}),_N_E=e.O()}]); \ No newline at end of file +`,R={type:"code",component:function(){return s.createElement(s.Fragment,null,s.createElement(I,null),s.createElement(a.Z,{justify:"center"},s.createElement(i.z,{onClick:()=>P.start(),variant:"default"},"Start"),s.createElement(i.z,{onClick:()=>P.stop(),variant:"default"},"Stop"),s.createElement(i.z,{onClick:()=>P.increment(),variant:"default"},"Increment"),s.createElement(i.z,{onClick:()=>P.decrement(),variant:"default"},"Decrement"),s.createElement(i.z,{onClick:()=>P.set(50),variant:"default"},"Set 50%"),s.createElement(i.z,{onClick:()=>P.reset(),variant:"default"},"Reset"),s.createElement(i.z,{onClick:()=>P.complete(),variant:"default"},"Complete")))},code:z};var M=r(3916),T=r(54568);let D=(0,M.A)(T.us.Nprogress);function A(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,o.a)(),...e.components},{Demo:r,InstallScript:s}=t;return r||L("Demo",!0),s||L("InstallScript",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"installation",children:"Installation"}),"\n",(0,n.jsx)(s,{packages:"@mantine/nprogress"}),"\n",(0,n.jsx)(t.p,{children:"After installation import package styles at the root of your application:"}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import '@mantine/nprogress/styles.css';\n"})}),"\n",(0,n.jsx)(t.h2,{id:"setup-navigationprogress",children:"Setup NavigationProgress"}),"\n",(0,n.jsxs)(t.p,{children:["Render ",(0,n.jsx)(t.code,{children:"NavigationProgress"})," anywhere in your app within ",(0,n.jsx)(t.a,{href:"/theming/mantine-provider/",children:"MantineProvider"}),":"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { MantineProvider } from '@mantine/core';\nimport { NavigationProgress } from '@mantine/nprogress';\n\nfunction Demo() {\n return (\n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(r,{data:R})]})}function G(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(D,{...e,children:(0,n.jsx)(A,{...e})})}function L(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},30454:function(e,t,r){"use strict";r.d(t,{E:function(){return b}});var n=r(27378),o=r(5564),s=r(96739),a=r(20410),i=r(56589),l=r(71656);let[c,u]=(0,l.R)("Progress.Root component was not found in tree");var m={root:"m-db6d6462",section:"m-2242eb65","stripes-animation":"m-81a374bd",label:"m-91e40b74"};let p={},d=(0,a.d)((e,t)=>{let{classNames:r,className:o,style:a,styles:l,vars:c,...m}=(0,s.w)("ProgressLabel",p,e),d=u();return n.createElement(i.x,{ref:t,...d.getStyles("label",{className:o,style:a,classNames:r,styles:l}),...m})});d.classes=m,d.displayName="@mantine/core/ProgressLabel";var g=r(92082),v=r(83453),f=r(6231);let h={},w=(0,v.Z)((e,{size:t,radius:r,transitionDuration:n})=>({root:{"--progress-size":(0,g.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,g.H5)(r),"--progress-transition-duration":"number"==typeof n?`${n}ms`:void 0}})),E=(0,a.d)((e,t)=>{let r=(0,s.w)("ProgressRoot",h,e),{classNames:o,className:a,style:l,styles:u,unstyled:p,vars:d,autoContrast:g,transitionDuration:v,...E}=r,x=(0,f.y)({name:"Progress",classes:m,props:r,className:a,style:l,classNames:o,styles:u,unstyled:p,vars:d,varsResolver:w});return n.createElement(c,{value:{getStyles:x,autoContrast:g}},n.createElement(i.x,{ref:t,...x("root"),...E}))});E.classes=m,E.displayName="@mantine/core/ProgressRoot";var x=r(89738),P=r(34121),N=r(55357),k=r(2256);let y={withAria:!0},j=(0,a.d)((e,t)=>{let{classNames:r,className:o,style:a,styles:l,vars:c,value:m,withAria:p,color:d,striped:g,animated:v,mod:f,...h}=(0,s.w)("ProgressSection",y,e),w=u(),E=(0,k.rZ)(),j=p?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":m,"aria-valuetext":`${m}%`}:{};return n.createElement(i.x,{ref:t,...w.getStyles("section",{className:o,classNames:r,styles:l,style:a}),...h,...j,mod:[{striped:g||v,animated:v},f],__vars:{"--progress-section-width":`${m}%`,"--progress-section-color":(0,x.p)(d,E),"--progress-label-color":(0,N.o)(w.autoContrast,E)?(0,P.R)({color:d,theme:E}):void 0}})});j.classes=m,j.displayName="@mantine/core/ProgressSection";let C={},b=(0,a.d)((e,t)=>{let r=(0,s.w)("Progress",C,e),{value:a,classNames:i,styles:l,vars:c,color:u,striped:m,animated:p,"aria-label":d,...g}=r,{resolvedClassNames:v,resolvedStyles:f}=(0,o.h)({classNames:i,styles:l,props:r});return n.createElement(E,{ref:t,classNames:v,styles:f,vars:c,...g},n.createElement(j,{value:a,color:u,striped:m,animated:p,"aria-label":d}))});b.classes=m,b.displayName="@mantine/core/Progress",b.Section=j,b.Root=E,b.Label=d}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=91911)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/webpack-f105a8207db4b1bc.js b/_next/static/chunks/webpack-d0667652204570c3.js similarity index 99% rename from _next/static/chunks/webpack-f105a8207db4b1bc.js rename to _next/static/chunks/webpack-d0667652204570c3.js index c5dfa9b4c7a..8d44495fd02 100644 --- a/_next/static/chunks/webpack-f105a8207db4b1bc.js +++ b/_next/static/chunks/webpack-d0667652204570c3.js @@ -1 +1 @@ -!function(){"use strict";var e,a,f,d,c,b,t,n,r,o={},u={};function i(e){var a=u[e];if(void 0!==a)return a.exports;var f=u[e]={id:e,loaded:!1,exports:{}},d=!0;try{o[e].call(f.exports,f,f.exports,i),d=!1}finally{d&&delete u[e]}return f.loaded=!0,f.exports}i.m=o,e=[],i.O=function(a,f,d,c){if(f){c=c||0;for(var b=e.length;b>0&&e[b-1][2]>c;b--)e[b]=e[b-1];e[b]=[f,d,c];return}for(var t=1/0,b=0;b=c&&Object.keys(i.O).every(function(e){return i.O[e](f[r])})?f.splice(r--,1):(n=!1,c0&&e[b-1][2]>c;b--)e[b]=e[b-1];e[b]=[f,d,c];return}for(var t=1/0,b=0;b=c&&Object.keys(i.O).every(function(e){return i.O[e](f[r])})?f.splice(r--,1):(n=!1,c.m-d8b5e363{background-color:rgba(0,0,0,.5)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:hover{background-color:var(--mantine-color-dark-8)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:hover>.m-d8b5e363{background-color:hsla(0,0%,100%,.5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-c44ba933:active{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=light]) .m-c44ba933:active>.m-d8b5e363{background-color:rgba(0,0,0,.5)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:active{background-color:var(--mantine-color-dark-8)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:active>.m-d8b5e363{background-color:hsla(0,0%,100%,.5)}}.m-c44ba933:where([data-hidden],[data-state=hidden]){display:none}.m-c44ba933:where([data-orientation=vertical]){bottom:var(--sa-corner-width);right:0;top:0;width:var(--scrollarea-scrollbar-size)}[dir=rtl] .m-c44ba933:where([data-orientation=vertical]){left:0;right:unset}.m-c44ba933:where([data-orientation=horizontal]){bottom:0;flex-direction:column;height:var(--scrollarea-scrollbar-size);left:0;right:var(--sa-corner-height)}[dir=rtl] .m-c44ba933:where([data-orientation=horizontal]){left:var(--sa-corner-height);right:0}.m-d8b5e363{border-radius:var(--scrollarea-scrollbar-size);flex:1;overflow:hidden;position:relative;transition:background-color .15s ease}.m-d8b5e363:before{content:'""';height:100%;left:50%;min-height:calc(2.75rem*var(--mantine-scale));min-width:calc(2.75rem*var(--mantine-scale));position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}[data-mantine-color-scheme=light] .m-d8b5e363{background-color:rgba(0,0,0,.4)}[data-mantine-color-scheme=dark] .m-d8b5e363{background-color:hsla(0,0%,100%,.4)}.m-21657268{bottom:0;display:block;opacity:0;position:absolute;right:0;transition:opacity .15s ease}[dir=rtl] .m-21657268{bottom:0;left:0;right:unset}:where([data-mantine-color-scheme=light]) .m-21657268{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-21657268{background-color:var(--mantine-color-dark-8)}.m-21657268:where([data-hovered]){opacity:1}.m-21657268:where([data-hidden]){display:none}.m-87cf2631{-webkit-tap-highlight-color:transparent;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:var(--mantine-font-size-md);padding:0;text-align:left;text-decoration:none;touch-action:manipulation}:where([dir=rtl]) .m-87cf2631{text-align:right}.m-515a97f8{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.m-1b7284a3{--paper-radius:var(--mantine-radius-default);-webkit-tap-highlight-color:transparent;background-color:var(--mantine-color-body);border-radius:var(--paper-radius);box-shadow:var(--paper-shadow);display:block;outline:0;text-decoration:none;touch-action:manipulation}:where([data-mantine-color-scheme=light]) .m-1b7284a3:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-1b7284a3:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-38a85659{border:calc(.0625rem*var(--mantine-scale)) solid var(--popover-border-color);border-radius:var(--popover-radius,var(--mantine-radius-default));box-shadow:var(--popover-shadow,none);padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);position:absolute}.m-38a85659:focus{outline:none}[data-mantine-color-scheme=light] .m-38a85659{--popover-border-color:var(--mantine-color-gray-2);background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-38a85659{--popover-border-color:var(--mantine-color-dark-4);background-color:var(--mantine-color-dark-6)}.m-a31dc6c1{background-color:inherit;border:calc(.0625rem*var(--mantine-scale)) solid var(--popover-border-color);z-index:1}.m-5ae2e3c{--loader-size-xs:calc(1.125rem*var(--mantine-scale));--loader-size-sm:calc(1.375rem*var(--mantine-scale));--loader-size-md:calc(2.25rem*var(--mantine-scale));--loader-size-lg:calc(2.75rem*var(--mantine-scale));--loader-size-xl:calc(3.625rem*var(--mantine-scale));--loader-size:var(--loader-size-md);--loader-color:var(--mantine-primary-color-filled)}@keyframes m-5d2b3b9d{0%{opacity:0;transform:scale(.6)}50%,to{transform:scale(1)}}.m-7a2bd4cd{display:flex;gap:calc(var(--loader-size)/5);height:var(--loader-size);position:relative;width:var(--loader-size)}.m-870bb79{animation:m-5d2b3b9d 1.2s cubic-bezier(0,.5,.5,1) infinite;background:var(--loader-color);border-radius:calc(.125rem*var(--mantine-scale));flex:1}.m-870bb79:first-of-type{animation-delay:-.24s}.m-870bb79:nth-of-type(2){animation-delay:-.12s}.m-870bb79:nth-of-type(3){animation-delay:0}@keyframes m-aac34a1{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.6)}}.m-4e3f22d7{align-items:center;display:flex;gap:calc(var(--loader-size)/10);height:var(--loader-size);justify-content:center;position:relative;width:var(--loader-size)}.m-870c4af{animation:m-aac34a1 .8s linear infinite;background:var(--loader-color);border-radius:50%;height:calc(var(--loader-size)/3 - var(--loader-size)/15);width:calc(var(--loader-size)/3 - var(--loader-size)/15)}.m-870c4af:nth-child(2){animation-delay:.4s}@keyframes m-f8e89c4b{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.m-b34414df{display:inline-block}.m-b34414df,.m-b34414df:after{height:var(--loader-size);width:var(--loader-size)}.m-b34414df:after{animation:m-f8e89c4b 1.2s linear infinite;border-color:var(--loader-color) var(--loader-color) var(--loader-color) transparent;border-radius:calc(625rem*var(--mantine-scale));border-style:solid;border-width:calc(var(--loader-size)/8);content:"";display:block}.m-8d3f4000{--ai-size-xs:calc(1.125rem*var(--mantine-scale));--ai-size-sm:calc(1.375rem*var(--mantine-scale));--ai-size-md:calc(1.75rem*var(--mantine-scale));--ai-size-lg:calc(2.125rem*var(--mantine-scale));--ai-size-xl:calc(2.75rem*var(--mantine-scale));--ai-size-input-xs:calc(1.875rem*var(--mantine-scale));--ai-size-input-sm:calc(2.25rem*var(--mantine-scale));--ai-size-input-md:calc(2.625rem*var(--mantine-scale));--ai-size-input-lg:calc(3.125rem*var(--mantine-scale));--ai-size-input-xl:calc(3.75rem*var(--mantine-scale));--ai-size:var(--ai-size-md);--ai-color:var(--mantine-color-white);align-items:center;background:var(--_ai-bg,var(--ai-bg,var(--mantine-primary-color-filled)));border:var(--ai-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ai-radius,var(--mantine-radius-default));color:var(--_ai-color,var(--ai-color,var(--mantine-color-white)));cursor:var(--_ai-cursor,pointer);display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;position:relative;user-select:none;width:var(--ai-size)}@media (hover:hover){.m-8d3f4000:hover:not([data-loading]):not(:disabled):not([data-disabled]){--_ai-bg:var(--ai-hover,var(--mantine-primary-color-filled-hover));--_ai-color:var(--ai-hover-color)}}@media (hover:none){.m-8d3f4000:active:not([data-loading]):not(:disabled):not([data-disabled]){--_ai-bg:var(--ai-hover,var(--mantine-primary-color-filled-hover));--_ai-color:var(--ai-hover-color)}}[data-mantine-color-scheme=light] .m-8d3f4000{--_ai-loading-overlay-bg:hsla(0,0%,100%,.35);--_ai-disabled-bg:var(--mantine-color-gray-1);--_ai-disabled-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-8d3f4000{--_ai-loading-overlay-bg:rgba(0,0,0,.35);--_ai-disabled-bg:var(--mantine-color-dark-6);--_ai-disabled-color:var(--mantine-color-dark-3)}.m-8d3f4000[data-loading]{--_ai-cursor:not-allowed}.m-8d3f4000[data-loading] .m-302b9fb1{opacity:1;transform:none}.m-8d3f4000[data-loading] .m-8d3afb97{opacity:0;transform:translateY(100%)}.m-8d3f4000:disabled:not([data-loading]),.m-8d3f4000[data-disabled]:not([data-loading]){--_ai-cursor:not-allowed;--_ai-bg:var(--_ai-disabled-bg);--_ai-color:var(--_ai-disabled-color);--ai-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent!important}.m-8d3f4000:disabled:not([data-loading]):active,.m-8d3f4000[data-disabled]:not([data-loading]):active{transform:none}.m-302b9fb1{align-items:center;background-color:var(--_ai-loading-overlay-bg);border-radius:var(--ai-radius,var(--mantine-radius-default));display:flex;inset:calc(-.0625rem*var(--mantine-scale));justify-content:center;opacity:0;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease}.m-1a0f1b21{--ai-border-width:calc(0.0625rem*var(--mantine-scale));display:flex}.m-1a0f1b21[data-orientation=horizontal]{flex-direction:row}.m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):first-child{border-bottom-right-radius:0;border-right-width:calc(var(--ai-border-width)/2);border-top-right-radius:0}.m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):last-child{border-bottom-left-radius:0;border-left-width:calc(var(--ai-border-width)/2);border-top-left-radius:0}.m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):not(:first-child):not(:last-child){border-left-width:calc(var(--ai-border-width)/2);border-radius:0;border-right-width:calc(var(--ai-border-width)/2)}[dir=rtl] .m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):first-child{border:var(--ai-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ai-radius,var(--mantine-radius-default));border-bottom-left-radius:0;border-left-width:calc(var(--ai-border-width)/2);border-top-left-radius:0}[dir=rtl] .m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):last-child{border:var(--ai-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ai-radius,var(--mantine-radius-default));border-bottom-right-radius:0;border-right-width:calc(var(--ai-border-width)/2);border-top-right-radius:0}.m-1a0f1b21[data-orientation=vertical]{flex-direction:column}.m-1a0f1b21[data-orientation=vertical] .m-8d3f4000:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:calc(var(--ai-border-width)/2)}.m-1a0f1b21[data-orientation=vertical] .m-8d3f4000:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.m-1a0f1b21[data-orientation=vertical] .m-8d3f4000:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.m-8d3afb97{display:flex;transition:transform .15s ease,opacity .1s ease}.m-86a44da5,.m-8d3afb97{align-items:center;justify-content:center}.m-86a44da5{--cb-size-xs:calc(1.125rem*var(--mantine-scale));--cb-size-sm:calc(1.375rem*var(--mantine-scale));--cb-size-md:calc(1.75rem*var(--mantine-scale));--cb-size-lg:calc(2.125rem*var(--mantine-scale));--cb-size-xl:calc(2.75rem*var(--mantine-scale));--cb-size:var(--cb-size-md);--cb-icon-size:70%;--cb-radius:var(--mantine-radius-default);border-radius:var(--cb-radius);color:var(--_cb-color);display:inline-flex;height:var(--cb-size);line-height:1;min-height:var(--cb-size);min-width:var(--cb-size);position:relative;user-select:none;width:var(--cb-size)}:where([data-mantine-color-scheme=light]) .m-86a44da5{color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-86a44da5{color:var(--mantine-color-dark-1)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-220c80f2:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-220c80f2:hover{background-color:var(--mantine-color-dark-6)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-220c80f2:active{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-220c80f2:active{background-color:var(--mantine-color-dark-6)}}.m-4081bf90{align-items:var(--group-align,center);display:flex;flex-direction:row;flex-wrap:var(--group-wrap,wrap);gap:var(--group-gap,var(--mantine-spacing-md));justify-content:var(--group-justify,flex-start)}.m-4081bf90:where([data-grow])>*{flex-grow:1;max-width:var(--group-child-width)}.m-9814e45f{backdrop-filter:var(--overlay-filter);-webkit-backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));border-radius:var(--overlay-radius,0);inset:0;position:absolute;z-index:var(--overlay-z-index)}.m-9814e45f:where([data-fixed]){position:fixed}.m-9814e45f:where([data-center]){align-items:center;display:flex;justify-content:center}.m-615af6c9{font-size:var(--mantine-font-size-md);font-weight:400;line-height:1;margin:0;padding:0}.m-b5489c3c{align-items:center;background-color:var(--mantine-color-body);display:flex;justify-content:space-between;min-height:calc(3.75rem*var(--mantine-scale));padding:var(--mb-padding,var(--mantine-spacing-md));padding-left:var(--_pl,var(--mb-padding,var(--mantine-spacing-md)));padding-right:var(--_pr,calc(var(--mb-padding, var(--mantine-spacing-md)) - .3125rem*var(--mantine-scale)));position:sticky;top:0;z-index:1000}[dir=rtl] .m-b5489c3c{--_pr:var(--mb-padding,var(--mantine-spacing-md));--_pl:calc(var(--mb-padding, var(--mantine-spacing-md)) - 0.3125rem*var(--mantine-scale))}.m-60c222c7{bottom:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:var(--mb-z-index)}.m-fd1ab0aa{box-shadow:var(--mb-shadow,var(--mantine-shadow-xl));pointer-events:all}.m-606cb269{margin-left:var(--_close-ml,auto);margin-right:var(--_close-mr,0)}[dir=rtl] .m-606cb269{--_close-ml:0;--_close-mr:auto}.m-5df29311{padding:var(--mb-padding,var(--mantine-spacing-md));padding-top:var(--_pt,var(--mb-padding,var(--mantine-spacing-md)))}.m-5df29311:not(:only-child){--_pt:0}.m-6c018570{--input-height-xs:calc(1.875rem*var(--mantine-scale));--input-height-sm:calc(2.25rem*var(--mantine-scale));--input-height-md:calc(2.625rem*var(--mantine-scale));--input-height-lg:calc(3.125rem*var(--mantine-scale));--input-height-xl:calc(3.75rem*var(--mantine-scale));--input-padding-y-xs:calc(0.3125rem*var(--mantine-scale));--input-padding-y-sm:calc(0.375rem*var(--mantine-scale));--input-padding-y-md:calc(0.5rem*var(--mantine-scale));--input-padding-y-lg:calc(0.625rem*var(--mantine-scale));--input-padding-y-xl:calc(0.8125rem*var(--mantine-scale));--_input-height:var(--input-height,var(--input-height-sm));--_input-radius:var(--input-radius,var(--mantine-radius-default));--_input-cursor:text;--_input-text-align:left;--_input-line-height:calc(var(--_input-height) - 0.125rem*var(--mantine-scale));--_input-padding:calc(var(--_input-height)/3);--_input-padding-left:var(--_input-padding);--_input-padding-right:var(--_input-padding);--_input-placeholder-color:var(--mantine-color-placeholder);--_input-color:var(--mantine-color-text);--_input-left-section-size:var( - --input-left-section-width,calc(var(--_input-height) - 0.125rem*var(--mantine-scale)) - );--_input-right-section-size:var( - --input-right-section-width,calc(var(--_input-height) - 0.125rem*var(--mantine-scale)) - );--_input-size:var(--_input-height);--_section-y:calc(0.0625rem*var(--mantine-scale));--_left-section-left:calc(0.0625rem*var(--mantine-scale));--_left-section-right:unset;--_left-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius);--_right-section-left:unset;--_right-section-right:calc(0.0625rem*var(--mantine-scale));--_right-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;margin-bottom:var(--input-margin-bottom,0);margin-top:var(--input-margin-top,0);position:relative}.m-6c018570[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--_input-padding-left:0;--_input-padding-right:0}.m-6c018570[data-pointer]{--_input-cursor:pointer}.m-6c018570[data-multiline]{--input-padding-y-xs:calc(0.28125rem*var(--mantine-scale));--input-padding-y-sm:calc(0.34375rem*var(--mantine-scale));--input-padding-y-md:calc(0.4375rem*var(--mantine-scale));--input-padding-y-lg:calc(0.59375rem*var(--mantine-scale));--input-padding-y-xl:calc(0.8125rem*var(--mantine-scale));--_input-size:auto;--_input-line-height:var(--mantine-line-height);--input-padding-y:var(--input-padding-y-sm)}.m-6c018570[data-with-left-section]{--_input-padding-left:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]{--_input-padding-right:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]:not([data-with-right-section]){--_input-padding-left:var(--_input-padding)}.m-6c018570[data-with-right-section]{--_input-padding-right:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]{--_input-padding-left:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]:not([data-with-left-section]){--_input-padding-right:var(--_input-padding)}[data-mantine-color-scheme=light] .m-6c018570{--_input-disabled-bg:var(--mantine-color-gray-1);--_input-disabled-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-gray-4);--_input-bg:var(--mantine-color-white);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-gray-1);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme=dark] .m-6c018570{--_input-disabled-bg:var(--mantine-color-dark-6);--_input-disabled-color:var(--mantine-color-dark-2)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-dark-4);--_input-bg:var(--mantine-color-dark-6);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-dark-5);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme] .m-6c018570[data-error]:not([data-variant=unstyled]){--_input-bd:var(--mantine-color-error)}[data-mantine-color-scheme] .m-6c018570[data-error]{--_input-color:var(--mantine-color-error);--_input-placeholder-color:var(--mantine-color-error);--_input-section-color:var(--mantine-color-error)}[dir=rtl] .m-6c018570{--_input-text-align:right;--_left-section-left:unset;--_left-section-right:calc(0.0625rem*var(--mantine-scale));--_left-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;--_right-section-left:calc(0.0625rem*var(--mantine-scale));--_right-section-right:unset;--_right-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius)}.m-8fb7ebe7{-webkit-tap-highlight-color:transparent;appearance:none;background-color:var(--_input-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_input-bd);border-radius:var(--_input-radius);color:var(--_input-color);cursor:var(--_input-cursor);display:block;font-family:var(--_input-font-family,var(--mantine-font-family));font-size:var(--_input-fz,var(--input-fz,var(--mantine-font-size-sm)));height:var(--_input-size);line-height:var(--_input-line-height);min-height:var(--_input-height);overflow:var(--_input-overflow);padding:var(--input-padding-y,0) var(--_input-padding-right) var(--input-padding-y,0) var(--_input-padding-left);resize:var(--input-resize,none);text-align:var(--_input-text-align);transition:border-color .1s ease;width:100%}.m-8fb7ebe7[data-no-overflow]{--_input-overflow:hidden}.m-8fb7ebe7[data-monospace]{--_input-font-family:var(--mantine-font-family-monospace);--_input-fz:calc(var(--input-fz, var(--mantine-font-size-sm)) - 0.125rem*var(--mantine-scale))}.m-8fb7ebe7:focus,.m-8fb7ebe7:focus-within{--_input-bd:var(--_input-bd-focus);outline:none}[data-error] .m-8fb7ebe7:focus,[data-error] .m-8fb7ebe7:focus-within{--_input-bd:var(--mantine-color-error)}.m-8fb7ebe7::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-8fb7ebe7::-webkit-inner-spin-button,.m-8fb7ebe7::-webkit-outer-spin-button,.m-8fb7ebe7::-webkit-search-cancel-button,.m-8fb7ebe7::-webkit-search-decoration,.m-8fb7ebe7::-webkit-search-results-button,.m-8fb7ebe7::-webkit-search-results-decoration{appearance:none}.m-8fb7ebe7[type=number]{-moz-appearance:textfield}.m-8fb7ebe7:disabled,.m-8fb7ebe7[data-disabled]{background-color:var(--_input-disabled-bg);color:var(--_input-disabled-color);cursor:not-allowed;opacity:.6}.m-8fb7ebe7:has(input:disabled){background-color:var(--_input-disabled-bg);color:var(--_input-disabled-color);cursor:not-allowed;opacity:.6}.m-82577fc2{align-items:center;border-radius:var(--_section-border-radius);bottom:var(--_section-y);color:var(--_input-section-color,var(--mantine-color-dimmed));display:flex;justify-content:center;left:var(--_section-left);pointer-events:var(--_section-pointer-events);position:absolute;right:var(--_section-right);top:var(--_section-y);width:var(--_section-size);z-index:1}.m-82577fc2[data-position=right]{--_section-pointer-events:var(--input-right-section-pointer-events);--_section-left:var(--_right-section-left);--_section-right:var(--_right-section-right);--_section-size:var(--_input-right-section-size);--_section-border-radius:var(--_right-section-border-radius)}.m-82577fc2[data-position=left]{--_section-pointer-events:var(--input-left-section-pointer-events);--_section-left:var(--_left-section-left);--_section-right:var(--_left-section-right);--_section-size:var(--_input-left-section-size);--_section-border-radius:var(--_left-section-border-radius)}.m-88bacfd0{color:var(--_input-placeholder-color,var(--mantine-color-placeholder))}[data-error] .m-88bacfd0{--_input-placeholder-color:var(--_input-color,var(--mantine-color-placeholder))}.m-46b77525{line-height:var(--mantine-line-height)}.m-8fdc1311{-webkit-tap-highlight-color:transparent;cursor:default;display:inline-block;font-size:var(--input-label-size,var(--mantine-font-size-sm));font-weight:500;word-break:break-word}.m-78a94662{color:var(--input-asterisk-color,var(--mantine-color-error))}.m-8f816625,.m-fe47ce59{word-wrap:break-word;display:block;line-height:1.2;margin:0;padding:0}.m-8f816625{color:var(--mantine-color-error);font-size:var(--input-error-size,calc(var(--mantine-font-size-sm) - .125rem*var(--mantine-scale)))}.m-fe47ce59{color:var(--mantine-color-dimmed);font-size:var(--input-description-size,calc(var(--mantine-font-size-sm) - .125rem*var(--mantine-scale)))}.m-8bffd616{display:flex}.m-9bdbb667{--_accordion-radius:var(--accordion-radius,var(--mantine-radius-default))}.m-df78851f{word-break:break-word}.m-4ba554d4{padding:var(--mantine-spacing-md);padding-top:calc(var(--mantine-spacing-xs)/2)}.m-8fa820a0{margin:0;padding:0}.m-4ba585b8{align-items:center;background-color:var(--_control-background-color,transparent);color:var(--_control-color);cursor:var(--_control-cursor,pointer);display:flex;flex-direction:var(--_control-flex-direction,row-reverse);opacity:var(--_control-opacity,1);padding-left:var(--_control-padding-left,var(--mantine-spacing-md));padding-right:var(--_control-padding-right,var(--mantine-spacing-md));text-align:left;width:100%}.m-4ba585b8[data-chevron-position=left]{--_control-flex-direction:row;--_control-padding-left:0}[dir=rtl] .m-4ba585b8[data-chevron-position=left]{--_control-padding-left:var(--mantine-spacing-md)}[data-mantine-color-scheme=light] .m-4ba585b8{--_control-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-4ba585b8{--_control-color:var(--mantine-color-dark-0)}.m-4ba585b8:disabled,.m-4ba585b8[data-disabled]{--_control-opacity:0.4;--_control-cursor:not-allowed}@media (hover:hover){[data-mantine-color-scheme=light] .m-4271d21b:not(:disabled,[data-disabled]):hover,[data-mantine-color-scheme=light] .m-6939a5e9:not(:disabled,[data-disabled]):hover{--_control-background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-4271d21b:not(:disabled,[data-disabled]):hover,[data-mantine-color-scheme=dark] .m-6939a5e9:not(:disabled,[data-disabled]):hover{--_control-background-color:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-4271d21b:not(:disabled,[data-disabled]):active,[data-mantine-color-scheme=light] .m-6939a5e9:not(:disabled,[data-disabled]):active{--_control-background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-4271d21b:not(:disabled,[data-disabled]):active,[data-mantine-color-scheme=dark] .m-6939a5e9:not(:disabled,[data-disabled]):active{--_control-background-color:var(--mantine-color-dark-6)}}.m-df3ffa0f{color:inherit;flex:1;font-weight:400;overflow:hidden;padding-bottom:var(--mantine-spacing-sm);padding-top:var(--mantine-spacing-sm);text-overflow:ellipsis}[dir=rtl] .m-df3ffa0f{text-align:right}.m-3f35ae96{align-items:center;display:flex;justify-content:flex-start;margin-left:var(--_chevron-margin-left);margin-right:var(--_chevron-margin-right);min-width:var(--accordion-chevron-size,calc(.9375rem*var(--mantine-scale)));transform:var(--_chevron-transform,rotate(0deg));transition:transform var(--accordion-transition-duration,.2s) ease;width:var(--accordion-chevron-size,calc(.9375rem*var(--mantine-scale)))}.m-3f35ae96[data-rotate]{--_chevron-transform:rotate(180deg)}.m-3f35ae96[data-position=left]{--_chevron-margin-right:var(--mantine-spacing-md);--_chevron-margin-left:var(--mantine-spacing-md)}.m-3f35ae96[data-position=right]{--_chevron-margin-left:0}[dir=rtl] .m-3f35ae96[data-position=left]{--_chevron-margin-right:0;--_chevron-margin-left:var(--mantine-spacing-md)}[dir=rtl] .m-3f35ae96[data-position=right]{--_chevron-margin-right:var(--mantine-spacing-md);--_chevron-margin-left:0}.m-9bd771fe{align-items:center;display:flex;justify-content:center;margin-left:var(--_icon-margin-left,0);margin-right:var(--_icon-margin-right,var(--mantine-spacing-sm))}.m-9bd771fe[data-chevron-position=left]{--_icon-margin-right:0;--_icon-margin-left:var(--mantine-spacing-lg)}[dir=rtl] .m-9bd771fe[data-chevron-position=left]{--_icon-margin-right:var(--mantine-spacing-lg);--_icon-margin-left:0}[dir=rtl] .m-9bd771fe[data-chevron-position=right]{--_icon-margin-right:0;--_icon-margin-left:var(--mantine-spacing-sm)}.m-9bd7b098{background-color:var(--_item-bg)}[data-mantine-color-scheme=light] .m-9bd7b098{--_item-border-color:var(--mantine-color-gray-3);--_item-filled-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-9bd7b098{--_item-border-color:var(--mantine-color-dark-4);--_item-filled-color:var(--mantine-color-dark-6)}.m-fe19b709{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_item-border-color)}.m-1f921b3b{border:calc(.0625rem*var(--mantine-scale)) solid var(--_item-border-color);transition:background-color .15s ease}.m-1f921b3b[data-active]{--_item-bg:var(--_item-filled-color)}.m-1f921b3b:first-of-type,.m-1f921b3b:first-of-type>[data-accordion-control]{border-top-left-radius:var(--_accordion-radius);border-top-right-radius:var(--_accordion-radius)}.m-1f921b3b:last-of-type,.m-1f921b3b:last-of-type>[data-accordion-control]{border-bottom-left-radius:var(--_accordion-radius);border-bottom-right-radius:var(--_accordion-radius)}.m-1f921b3b+.m-1f921b3b{border-top:0}.m-2cdf939a{border-radius:var(--_accordion-radius)}.m-2cdf939a[data-active],.m-9f59b069{--_item-bg:var(--_item-filled-color)}.m-9f59b069{border:calc(.0625rem*var(--mantine-scale)) solid var(--__item-border-color,transparent);border-radius:var(--_accordion-radius);transition:background-color .15s ease}.m-9f59b069[data-active]{--__item-border-color:var(--_item-border-color)}[data-mantine-color-scheme=light] .m-9f59b069[data-active]{--_item-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-9f59b069[data-active]{--_item-bg:var(--mantine-color-dark-7)}.m-9f59b069+.m-9f59b069{margin-top:var(--mantine-spacing-md)}.m-7f854edf{bottom:var(--affix-bottom);left:var(--affix-left);position:fixed;right:var(--affix-right);top:var(--affix-top);z-index:var(--affix-z-index)}.m-66836ed3{--alert-radius:var(--mantine-radius-default);--alert-bg:var(--mantine-primary-color-light);--alert-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;--alert-color:var(--mantine-primary-color-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);overflow:hidden;padding:var(--mantine-spacing-md) var(--mantine-spacing-md);position:relative}.m-667c2793,.m-a5d60502{display:flex}.m-667c2793{flex:1;flex-direction:column;gap:var(--mantine-spacing-xs)}.m-6a03f287{align-items:center;display:flex;font-size:var(--mantine-font-size-sm);font-weight:700;justify-content:space-between}.m-6a03f287:where([data-with-close-button]){padding-right:var(--mantine-spacing-md)}:where([dir=rtl]) .m-6a03f287:where([data-with-close-button]){padding-left:var(--mantine-spacing-md);padding-right:0}.m-698f4f23{display:block;overflow:hidden;text-overflow:ellipsis}.m-667f2a6a{align-items:center;display:flex;height:calc(1.25rem*var(--mantine-scale));justify-content:flex-start;line-height:1;margin-right:var(--mantine-spacing-md);margin-top:calc(.0625rem*var(--mantine-scale));width:calc(1.25rem*var(--mantine-scale))}:where([dir=rtl]) .m-667f2a6a{margin-left:var(--mantine-spacing-md);margin-right:0}.m-7fa78076{font-size:var(--mantine-font-size-sm);overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .m-7fa78076{color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-7fa78076{color:var(--mantine-color-white)}.m-7fa78076:where([data-variant=filled]){color:var(--alert-color)}.m-7fa78076:where([data-variant=white]){color:var(--mantine-color-black)}.m-87f54839{color:var(--alert-color);height:calc(1.25rem*var(--mantine-scale));width:calc(1.25rem*var(--mantine-scale))}.m-b6d8b162{-webkit-tap-highlight-color:transparent;color:var(--text-color);font-size:var(--text-fz,var(--mantine-font-size-md));font-weight:400;line-height:var(--_text-line-height,var(--text-lh,var(--mantine-line-height-md)));margin:0;padding:0;text-decoration:none}.m-b6d8b162[data-truncate]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-b6d8b162[data-truncate=start]{direction:rtl;text-align:right}[dir=rtl] .m-b6d8b162[data-truncate=start]{direction:ltr;text-align:left}.m-b6d8b162[data-variant=gradient]{-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;background-image:var(--text-gradient)}.m-b6d8b162[data-line-clamp]{-webkit-line-clamp:var(--text-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.m-b6d8b162[data-inherit]{font-size:inherit;font-weight:inherit;line-height:inherit}.m-b6d8b162[data-inline]{--_text-line-height:1}.m-849cf0da{appearance:none;background-color:transparent;border:none;color:var(--mantine-color-anchor);cursor:pointer;display:inline;margin:0;padding:0;text-decoration:none}@media (hover:hover){.m-849cf0da:where([data-underline=hover]):hover{text-decoration:underline}}@media (hover:none){.m-849cf0da:where([data-underline=hover]):active{text-decoration:underline}}.m-849cf0da:where([data-underline=always]){text-decoration:underline}.m-89ab340[data-resizing]{--app-shell-transition-duration:0ms!important}.m-89ab340[data-disabled]{--app-shell-header-offset:0px!important;--app-shell-navbar-offset:0px!important}[data-mantine-color-scheme=light] .m-89ab340{--_app-shell-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-89ab340{--_app-shell-border-color:var(--mantine-color-dark-4)}.m-3840c879,.m-3b16f56b,.m-45252eee,.m-8983817,.m-9cdde9a{transition-duration:var(--app-shell-transition-duration);transition-timing-function:var(--app-shell-transition-timing-function)}.m-45252eee,.m-9cdde9a{background-color:var(--mantine-color-body);display:flex;flex-direction:column;height:var( - --_section-height,calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px)) - );position:fixed;top:var(--_section-top,var(--app-shell-header-offset,0));transition-property:transform,top,height}[data-layout=alt] .m-45252eee,[data-layout=alt] .m-9cdde9a{--_section-top:0px;--_section-height:100dvh}.m-45252eee{border-left:var(--_navbar-border-left);border-right:var(--_navbar-border-right);left:var(--_navbar-left,0);right:var(--_navbar-right);transform:var(--_navbar-transform,var(--app-shell-navbar-transform));transition-property:transform,top,height;width:var(--app-shell-navbar-width);z-index:var(--app-shell-navbar-z-index)}.m-45252eee[data-with-border]{--_navbar-border-right:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-45252eee[data-with-border]{--_navbar-border-right:none;--_navbar-border-left:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-45252eee{--_navbar-left:auto;--_navbar-right:0px;--_navbar-transform:var(--app-shell-navbar-transform-rtl)}.m-9cdde9a{border-left:var(--_aside-border-left);border-right:var(--_aside-border-right);left:var(--_aside-left);right:var(--_aside-right,0);transform:var(--_aside-transform,var(--app-shell-aside-transform));width:var(--app-shell-aside-width);z-index:var(--app-shell-aside-z-index)}.m-9cdde9a[data-with-border]{--_aside-border-left:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-9cdde9a[data-with-border]{--_aside-border-left:none;--_aside-border-right:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-9cdde9a{--_aside-left:0px;--_aside-right:auto;--_aside-transform:var(--app-shell-aside-transform-rtl)}.m-8983817{min-height:100dvh;padding:calc(var(--app-shell-header-offset, 0px) + var(--app-shell-padding)) var( - --_main-padding-right,calc(var(--app-shell-aside-offset, 0px) + var(--app-shell-padding)) - ) calc(var(--app-shell-footer-offset, 0px) + var(--app-shell-padding)) var( - --_main-padding-left,calc(var(--app-shell-navbar-offset, 0px) + var(--app-shell-padding)) - );transition-property:padding}[dir=rtl] .m-8983817{--_main-padding-left:calc(var(--app-shell-aside-offset, 0px) + var(--app-shell-padding));--_main-padding-right:calc(var(--app-shell-navbar-offset, 0px) + var(--app-shell-padding))}.m-3840c879,.m-3b16f56b{background-color:var(--mantine-color-body);left:var(--_section-left,0);position:fixed;right:var(--_section-right,0);transition-property:transform,left,right}[data-layout=alt] .m-3840c879,[data-layout=alt] .m-3b16f56b{--_section-left:var(--app-shell-navbar-offset,0px)}[dir=rtl] [data-layout=alt] .m-3840c879,[dir=rtl] [data-layout=alt] .m-3b16f56b{--_section-right:var(--app-shell-navbar-offset,0px);--_section-left:0px}.m-3b16f56b{background-color:var(--mantine-color-body);border-bottom:var(--_header-border-bottom);height:var(--app-shell-header-height);top:0;transform:var(--app-shell-header-transform);z-index:var(--app-shell-header-z-index)}.m-3b16f56b[data-with-border]{--_header-border-bottom:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}.m-3840c879{border-top:var(--_footer-border-top);bottom:0;height:var(--app-shell-footer-height);transform:var(--app-shell-footer-transform);z-index:var(--app-shell-footer-z-index)}.m-3840c879[data-with-border]{--_footer-border-top:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}.m-6dcfc7c7{flex-grow:var(--_section-grow,0)}.m-6dcfc7c7[data-grow]{--_section-grow:1}.m-71ac47fc{--ar-ratio:1;max-width:100%;position:relative}.m-71ac47fc:before{content:"";display:block;height:0;padding-bottom:calc((1/var(--ar-ratio))*100%)}.m-71ac47fc:after{clear:both;content:"";display:table}.m-71ac47fc>:where(:not(style)){align-items:center;display:flex;height:100%;inset:0;justify-content:center;position:absolute;width:100%}.m-71ac47fc>:where(img,video){object-fit:cover}.m-88b62a41{--_combobox-padding:var(--combobox-padding,calc(0.25rem*var(--mantine-scale)));padding:var(--_combobox-padding)}.m-88b62a41[data-hidden]{display:none}.m-88b62a41,.m-b2821a6e{--combobox-option-padding-xs:calc(0.25rem*var(--mantine-scale)) calc(0.5rem*var(--mantine-scale));--combobox-option-padding-sm:calc(0.375rem*var(--mantine-scale)) calc(0.625rem*var(--mantine-scale));--combobox-option-padding-md:calc(0.5rem*var(--mantine-scale)) calc(0.75rem*var(--mantine-scale));--combobox-option-padding-lg:calc(0.625rem*var(--mantine-scale)) calc(1rem*var(--mantine-scale));--combobox-option-padding-xl:calc(0.875rem*var(--mantine-scale)) calc(1.25rem*var(--mantine-scale));--_combobox-option-padding:var(--combobox-option-padding,var(--combobox-option-padding-sm))}.m-92253aa5{background-color:var(--_option-bg,transparent);border-radius:var(--mantine-radius-default);color:var(--_option-color,inherit);cursor:var(--_option-cursor,pointer);font-size:var(--combobox-option-fz,var(--mantine-font-size-sm));opacity:var(--_option-opacity,1);padding:var(--_combobox-option-padding);word-break:break-word}.m-92253aa5[data-combobox-selected]{--_option-bg:var(--mantine-primary-color-filled);--_option-color:var(--mantine-color-white)}.m-92253aa5[data-combobox-disabled]{--_option-cursor:not-allowed;--_option-opacity:0.35}@media (hover:hover){[data-mantine-color-scheme=light] .m-92253aa5:hover:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-92253aa5:hover:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-dark-7)}}@media (hover:none){[data-mantine-color-scheme=light] .m-92253aa5:active:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-92253aa5:active:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-dark-7)}}.m-985517d8{background-color:var(--_search_background);border-bottom-left-radius:0;border-bottom-right-radius:0;border-left-width:0;border-right-width:0;border-top-width:0;margin:calc(var(--_combobox-padding)*-1) calc(var(--_combobox-padding)*-1) var(--_combobox-padding);position:relative;width:calc(100% + var(--_combobox-padding)*2)}.m-985517d8,.m-985517d8:focus{border-color:var(--_search-border-color)}[data-mantine-color-scheme=light] .m-985517d8{--_search-border-color:var(--mantine-color-gray-2);--_search_background:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-985517d8{--_search-border-color:var(--mantine-color-dark-4);--_search_background:var(--mantine-color-dark-7)}.m-2530cd1d{color:var(--mantine-color-dimmed);text-align:center}.m-2530cd1d,.m-82b967cb,.m-858f94bd{font-size:var(--combobox-option-fz,var(--mantine-font-size-sm));padding:var(--_combobox-option-padding)}.m-82b967cb,.m-858f94bd{border:0 solid var(--_footer-border-color);margin-left:calc(var(--_combobox-padding)*-1);margin-right:calc(var(--_combobox-padding)*-1)}[data-mantine-color-scheme=light] .m-82b967cb,[data-mantine-color-scheme=light] .m-858f94bd{--_footer-border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-82b967cb,[data-mantine-color-scheme=dark] .m-858f94bd{--_footer-border-color:var(--mantine-color-dark-4)}.m-82b967cb{border-top-width:calc(.0625rem*var(--mantine-scale));margin-bottom:calc(var(--_combobox-padding)*-1);margin-top:var(--_combobox-padding)}.m-858f94bd{border-bottom-width:calc(.0625rem*var(--mantine-scale));margin-bottom:var(--_combobox-padding);margin-top:calc(var(--_combobox-padding)*-1)}.m-254f3e4f:has(.m-2bb2e9e5:only-child){display:none}.m-2bb2e9e5{align-items:center;color:var(--mantine-color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--mantine-font-size-sm))*.85);font-weight:500;padding:var(--_combobox-option-padding);position:relative}.m-2bb2e9e5:after{background-color:var(--_divider-bg);content:"";flex:1;height:calc(.0625rem*var(--mantine-scale));left:0;margin-left:var(--mantine-spacing-xs);right:0}[data-mantine-color-scheme=light] .m-2bb2e9e5:after{--_divider-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2bb2e9e5:after{--_divider-bg:var(--mantine-color-dark-4)}[dir=rtl] .m-2bb2e9e5:after{margin-left:unset;margin-right:var(--mantine-spacing-xs)}.m-2bb2e9e5:only-child{display:none}.m-2943220b{--combobox-chevron-size-xs:calc(0.875rem*var(--mantine-scale));--combobox-chevron-size-sm:calc(1.125rem*var(--mantine-scale));--combobox-chevron-size-md:calc(1.25rem*var(--mantine-scale));--combobox-chevron-size-lg:calc(1.5rem*var(--mantine-scale));--combobox-chevron-size-xl:calc(1.75rem*var(--mantine-scale));--combobox-chevron-size:var(--combobox-chevron-size-sm);color:var(--_color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}[data-mantine-color-scheme=light] .m-2943220b{--_color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-2943220b{--_color:var(--mantine-color-dark-3)}.m-2943220b[data-error]{--_color:var(--mantine-color-error)}.m-71d052f9{margin-right:calc(var(--_combobox-padding)*-1)}[dir=rtl] .m-71d052f9{margin-left:calc(var(--_combobox-padding)*-1);margin-right:0}.m-390b5f4{align-items:center;display:flex;flex-direction:var(--_flex-direction,row);gap:calc(.5rem*var(--mantine-scale))}.m-390b5f4[data-reverse]{justify-content:space-between}.m-8ee53fc2{height:.8em;min-width:.8em;opacity:.4;width:.8em}[data-combobox-selected] .m-8ee53fc2{opacity:1}.m-5f75b09e{--label-lh-xs:calc(1rem*var(--mantine-scale));--label-lh-sm:calc(1.25rem*var(--mantine-scale));--label-lh-md:calc(1.5rem*var(--mantine-scale));--label-lh-lg:calc(1.875rem*var(--mantine-scale));--label-lh-xl:calc(2.25rem*var(--mantine-scale));--label-lh:var(--label-lh-sm)}.m-5f75b09e[data-label-position=left]{--label-order:1;--label-offset-right:var(--mantine-spacing-sm);--label-offset-left:0}[dir=rtl] .m-5f75b09e[data-label-position=left]{--label-offset-right:0;--label-offset-left:var(--mantine-spacing-sm)}.m-5f75b09e[data-label-position=right]{--label-order:2;--label-offset-right:0;--label-offset-left:var(--mantine-spacing-sm)}[dir=rtl] .m-5f75b09e[data-label-position=right]{--label-offset-right:var(--mantine-spacing-sm);--label-offset-left:0}.m-5f6e695e{display:flex}.m-d3ea56bb{--label-cursor:var(--mantine-cursor-type);-webkit-tap-highlight-color:transparent;cursor:var(--label-cursor);display:inline-flex;flex-direction:column;font-size:var(--label-fz,var(--mantine-font-size-sm));line-height:var(--label-lh);order:var(--label-order)}.m-d3ea56bb[data-disabled],fieldset:disabled .m-d3ea56bb{--label-cursor:not-allowed}.m-8ee546b8{color:inherit;cursor:var(--label-cursor);padding-left:var(--label-offset-left);padding-right:var(--label-offset-right)}:where([data-mantine-color-scheme=light]) .m-8ee546b8:where([data-disabled]),:where([data-mantine-color-scheme=light]) fieldset:disabled .m-8ee546b8{color:var(--mantine-color-gray-5)}:where([data-mantine-color-scheme=dark]) .m-8ee546b8:where([data-disabled]),:where([data-mantine-color-scheme=dark]) fieldset:disabled .m-8ee546b8{color:var(--mantine-color-dark-3)}.m-328f68c0,.m-8e8a99cc{margin-top:calc(var(--mantine-spacing-xs)/2);padding-left:var(--label-offset-left);padding-right:var(--label-offset-right)}.m-bf2d988c{--checkbox-size-xs:calc(1rem*var(--mantine-scale));--checkbox-size-sm:calc(1.25rem*var(--mantine-scale));--checkbox-size-md:calc(1.5rem*var(--mantine-scale));--checkbox-size-lg:calc(1.875rem*var(--mantine-scale));--checkbox-size-xl:calc(2.25rem*var(--mantine-scale));--checkbox-size:var(--checkbox-size-sm);--checkbox-color:var(--mantine-primary-color-filled);--checkbox-icon-color:var(--mantine-color-white)}.m-26062bec{height:var(--checkbox-size);order:var(--_checkbox-inner-order,1);position:relative;width:var(--checkbox-size)}.m-26062bec[data-label-position=left]{--_checkbox-inner-order:2}.m-26063560{-webkit-tap-highlight-color:transparent;appearance:none;background-color:var(--_checkbox-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_checkbox-bd-color);border-radius:var(--checkbox-radius,var(--mantine-radius-default));cursor:var(--_checkbox-cursor,var(--mantine-cursor-type));display:block;height:var(--checkbox-size);margin:0;padding:0;transition:border-color .1s ease,background-color .1s ease;width:var(--checkbox-size)}[data-mantine-color-scheme=light] .m-26063560{--_checkbox-bg:var(--mantine-color-white);--_checkbox-bd-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-26063560{--_checkbox-bg:var(--mantine-color-dark-6);--_checkbox-bd-color:var(--mantine-color-dark-4)}.m-26063560[data-error]{--_checkbox-bd-color:var(--mantine-color-error)}[data-mantine-color-scheme] .m-26063560:checked,[data-mantine-color-scheme] .m-26063560[data-indeterminate]{--_checkbox-bg:var(--checkbox-color);--_checkbox-bd-color:var(--checkbox-color)}[data-mantine-color-scheme] .m-26063560:checked+.m-bf295423,[data-mantine-color-scheme] .m-26063560[data-indeterminate]+.m-bf295423{--_checkbox-icon-opacity:1;--_checkbox-icon-transform:none}.m-26063560:disabled{--_checkbox-cursor:not-allowed}[data-mantine-color-scheme=light] .m-26063560:disabled{--_checkbox-bg:var(--mantine-color-gray-2);--_checkbox-bd-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-26063560:disabled{--_checkbox-bg:var(--mantine-color-dark-6);--_checkbox-bd-color:var(--mantine-color-dark-6)}[data-mantine-color-scheme=light] .m-26063560:disabled+.m-bf295423{--_checkbox-icon-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-26063560:disabled+.m-bf295423{--_checkbox-icon-color:var(--mantine-color-dark-3)}.m-215c4542+.m-bf295423{--_checkbox-icon-color:var(--checkbox-color)}[data-mantine-color-scheme] .m-215c4542:checked:not(:disabled),[data-mantine-color-scheme] .m-215c4542[data-indeterminate]{--_checkbox-bg:transparent;--_checkbox-bd-color:var(--checkbox-color)}[data-mantine-color-scheme] .m-215c4542:checked:not(:disabled)+.m-bf295423,[data-mantine-color-scheme] .m-215c4542[data-indeterminate]+.m-bf295423{--_checkbox-icon-color:var(--checkbox-color);--_checkbox-icon-opacity:1;--_checkbox-icon-transform:none}.m-bf295423{bottom:0;color:var(--_checkbox-icon-color,var(--checkbox-icon-color));left:0;margin:auto;opacity:var(--_checkbox-icon-opacity,0);pointer-events:none;position:absolute;right:0;top:0;transform:var(--_checkbox-icon-transform,translateY(calc(.3125rem*var(--mantine-scale))) scale(.5));transition:transform .1s ease,opacity .1s ease;width:60%}.m-11def92b{--ag-spacing:var(--mantine-spacing-sm);--ag-offset:calc(var(--ag-spacing)*-1);display:flex;padding-left:var(--ag-spacing)}:where([dir=rtl]) .m-11def92b{padding-left:0;padding-right:var(--ag-spacing)}.m-f85678b6{--avatar-size-xs:calc(1rem*var(--mantine-scale));--avatar-size-sm:calc(1.625rem*var(--mantine-scale));--avatar-size-md:calc(2.375rem*var(--mantine-scale));--avatar-size-lg:calc(3.5rem*var(--mantine-scale));--avatar-size-xl:calc(5.25rem*var(--mantine-scale));--avatar-size:var(--avatar-size-md);--avatar-radius:calc(62.5rem*var(--mantine-scale));--avatar-bg:var(--mantine-color-gray-light);--avatar-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;--avatar-color:var(--mantine-color-gray-light-color);--avatar-placeholder-fz:calc(var(--avatar-size)/2.5);-webkit-tap-highlight-color:transparent;border-radius:var(--avatar-radius);display:block;height:var(--avatar-size);min-width:var(--avatar-size);overflow:hidden;padding:0;position:relative;text-decoration:none;user-select:none;width:var(--avatar-size)}.m-f85678b6:where([data-within-group]){background:var(--mantine-color-body);border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-body);margin-left:var(--ag-offset)}:where([dir=rtl]) .m-f85678b6:where([data-within-group]){margin-left:unset;margin-right:var(--ag-offset)}.m-11f8ac07{display:block;height:100%;object-fit:cover;width:100%}.m-104cd71f{align-items:center;background:var(--avatar-bg);border:var(--avatar-bd);border-radius:var(--avatar-radius);color:var(--avatar-color);display:flex;font-size:var(--avatar-placeholder-fz);font-weight:700;height:100%;justify-content:center;user-select:none;width:100%}.m-104cd71f>[data-avatar-placeholder-icon]{height:70%;width:70%}.m-2ce0de02{background-position:50%;background-size:cover;border:0;border-radius:var(--bi-radius,0);display:block;text-decoration:none;width:100%}.m-347db0ec{--badge-height-xs:calc(1rem*var(--mantine-scale));--badge-height-sm:calc(1.125rem*var(--mantine-scale));--badge-height-md:calc(1.25rem*var(--mantine-scale));--badge-height-lg:calc(1.625rem*var(--mantine-scale));--badge-height-xl:calc(2rem*var(--mantine-scale));--badge-fz-xs:calc(0.5625rem*var(--mantine-scale));--badge-fz-sm:calc(0.625rem*var(--mantine-scale));--badge-fz-md:calc(0.6875rem*var(--mantine-scale));--badge-fz-lg:calc(0.8125rem*var(--mantine-scale));--badge-fz-xl:calc(1rem*var(--mantine-scale));--badge-padding-x-xs:calc(0.375rem*var(--mantine-scale));--badge-padding-x-sm:calc(0.5rem*var(--mantine-scale));--badge-padding-x-md:calc(0.625rem*var(--mantine-scale));--badge-padding-x-lg:calc(0.75rem*var(--mantine-scale));--badge-padding-x-xl:calc(1rem*var(--mantine-scale));--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:calc(62.5rem*var(--mantine-scale));--badge-lh:calc(var(--badge-height) - 0.125rem*var(--mantine-scale));--badge-color:var(--mantine-color-white);--badge-bg:var(--mantine-primary-color-filled);--badge-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;-webkit-tap-highlight-color:transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:inherit;display:inline-flex;font-size:var(--badge-fz);font-weight:700;height:var(--badge-height);justify-content:center;letter-spacing:calc(.01563rem*var(--mantine-scale));line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:fit-content}.m-347db0ec:where([data-block]){display:flex;width:100%}.m-347db0ec:where([data-circle]){padding-left:calc(.125rem*var(--mantine-scale));padding-right:calc(.125rem*var(--mantine-scale));width:var(--badge-height)}.m-fbd81e3d{--badge-dot-size:calc(var(--badge-height)/3.4)}:where([data-mantine-color-scheme=light]) .m-fbd81e3d{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-4);color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-fbd81e3d{background-color:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)}.m-fbd81e3d:before{background-color:var(--badge-dot-color);border-radius:var(--badge-dot-size);content:"";display:block;height:var(--badge-dot-size);margin-right:var(--badge-dot-size);width:var(--badge-dot-size)}:where([dir=rtl]) .m-fbd81e3d:before{margin-left:var(--badge-dot-size);margin-right:0}.m-5add502a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-91fdda9b{--badge-section-margin:calc(var(--mantine-spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center}.m-91fdda9b:where([data-position=left]){margin-left:0;margin-right:var(--badge-section-margin)}:where([dir=rtl]) .m-91fdda9b:where([data-position=left]){margin-left:var(--badge-section-margin);margin-right:0}.m-91fdda9b:where([data-position=right]){margin-left:var(--badge-section-margin);margin-right:0}[dir=rtl] .m-91fdda9b:where([data-position=right]){margin-left:0;margin-right:var(--badge-section-margin)}.m-ddec01c0{--blockquote-border:calc(0.1875rem*var(--mantine-scale)) solid var(--bq-bd);border-bottom-right-radius:var(--bq-radius);border-left:var(--blockquote-border);border-top-right-radius:var(--bq-radius);margin:0;padding:var(--mantine-spacing-xl) calc(2.375rem*var(--mantine-scale));position:relative}:where([dir=rtl]) .m-ddec01c0{border-bottom-left-radius:var(--bq-radius);border-bottom-right-radius:0;border-left:none;border-right:var(--blockquote-border);border-top-left-radius:var(--bq-radius);border-top-right-radius:0}:where([data-mantine-color-scheme=light]) .m-ddec01c0{background-color:var(--bq-bg-light)}:where([data-mantine-color-scheme=dark]) .m-ddec01c0{background-color:var(--bq-bg-dark)}.m-dde7bd57{--blockquote-icon-offset:calc(var(--bq-icon-size)/-2);align-items:center;background-color:var(--mantine-color-body);border-radius:var(--bq-icon-size);color:var(--bq-bd);display:flex;height:var(--bq-icon-size);justify-content:center;left:var(--blockquote-icon-offset);position:absolute;top:var(--blockquote-icon-offset);width:var(--bq-icon-size)}:where([dir=rtl]) .m-dde7bd57{left:0;right:var(--blockquote-icon-offset)}.m-dde51a35{display:block;font-size:85%;margin-top:var(--mantine-spacing-md);opacity:.6}.m-8b3717df{align-items:center;display:flex}.m-f678d540{-webkit-tap-highlight-color:transparent;line-height:1;white-space:nowrap}.m-3b8f2208{align-items:center;display:flex;justify-content:center;line-height:1;margin-left:var(--bc-separator-margin,var(--mantine-spacing-xs));margin-right:var(--bc-separator-margin,var(--mantine-spacing-xs))}:where([data-mantine-color-scheme=light]) .m-3b8f2208{color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-3b8f2208{color:var(--mantine-color-dark-2)}.m-fea6bf1a{--burger-size-xs:calc(0.75rem*var(--mantine-scale));--burger-size-sm:calc(1.125rem*var(--mantine-scale));--burger-size-md:calc(1.5rem*var(--mantine-scale));--burger-size-lg:calc(2.125rem*var(--mantine-scale));--burger-size-xl:calc(2.625rem*var(--mantine-scale));--burger-size:var(--burger-size-md);cursor:pointer;height:calc(var(--burger-size) + var(--mantine-spacing-xs));padding:calc(var(--mantine-spacing-xs)/2);width:calc(var(--burger-size) + var(--mantine-spacing-xs))}:where([data-mantine-color-scheme=light]) .m-fea6bf1a{--burger-color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-fea6bf1a{--burger-color:var(--mantine-color-white)}.m-d4fb9cad{position:relative;user-select:none}.m-d4fb9cad,.m-d4fb9cad:after,.m-d4fb9cad:before{background-color:var(--burger-color);display:block;height:calc(var(--burger-size)/12);outline:calc(.0625rem*var(--mantine-scale)) solid transparent;transition-duration:var(--burger-transition-duration,.3s);transition-property:background-color,transform;transition-timing-function:var(--burger-transition-timing-function,ease);width:var(--burger-size)}.m-d4fb9cad:after,.m-d4fb9cad:before{content:"";left:0;position:absolute}.m-d4fb9cad:before{top:calc(var(--burger-size)/-3)}.m-d4fb9cad:after{top:calc(var(--burger-size)/3)}.m-d4fb9cad[data-opened]{background-color:transparent}.m-d4fb9cad[data-opened]:before{transform:translateY(calc(var(--burger-size)/3)) rotate(45deg)}.m-d4fb9cad[data-opened]:after{transform:translateY(calc(var(--burger-size)/-3)) rotate(-45deg)}.m-77c9d27d{--button-height-xs:calc(1.875rem*var(--mantine-scale));--button-height-sm:calc(2.25rem*var(--mantine-scale));--button-height-md:calc(2.625rem*var(--mantine-scale));--button-height-lg:calc(3.125rem*var(--mantine-scale));--button-height-xl:calc(3.75rem*var(--mantine-scale));--button-height-compact-xs:calc(1.375rem*var(--mantine-scale));--button-height-compact-sm:calc(1.625rem*var(--mantine-scale));--button-height-compact-md:calc(1.875rem*var(--mantine-scale));--button-height-compact-lg:calc(2.125rem*var(--mantine-scale));--button-height-compact-xl:calc(2.5rem*var(--mantine-scale));--button-padding-x-xs:calc(0.875rem*var(--mantine-scale));--button-padding-x-sm:calc(1.125rem*var(--mantine-scale));--button-padding-x-md:calc(1.375rem*var(--mantine-scale));--button-padding-x-lg:calc(1.625rem*var(--mantine-scale));--button-padding-x-xl:calc(2rem*var(--mantine-scale));--button-padding-x-compact-xs:calc(0.4375rem*var(--mantine-scale));--button-padding-x-compact-sm:calc(0.5rem*var(--mantine-scale));--button-padding-x-compact-md:calc(0.625rem*var(--mantine-scale));--button-padding-x-compact-lg:calc(0.75rem*var(--mantine-scale));--button-padding-x-compact-xl:calc(0.875rem*var(--mantine-scale));--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--mantine-color-white);background:var(--_button-bg,var(--button-bg,var(--mantine-primary-color-filled)));border:var(--_button-bd,var(--button-bd,calc(.0625rem*var(--mantine-scale)) solid transparent));border-radius:var(--button-radius,var(--mantine-radius-default));color:var(--_button-color,var(--button-color,var(--mantine-color-white)));cursor:var(--_button-cursor,pointer);display:var(--_button-display,inline-block);font-size:var(--button-fz,var(--mantine-font-size-sm));font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-left:var(--_button-padding-left,var(--button-padding-x,var(--button-padding-x-sm)));padding-right:var(--_button-padding-right,var(--button-padding-x,var(--button-padding-x-sm)));position:relative;text-align:center;user-select:none;vertical-align:middle;width:var(--_button-width,auto)}.m-77c9d27d[data-block]{--_button-display:block;--_button-width:100%}.m-77c9d27d[data-with-left-section]{--_button-padding-left:calc(var(--button-padding-x)/1.5)}[dir=rtl] .m-77c9d27d[data-with-left-section]{--_button-padding-left:var(--button-padding-x)}.m-77c9d27d[data-with-right-section],[dir=rtl] .m-77c9d27d[data-with-left-section]{--_button-padding-right:calc(var(--button-padding-x)/1.5)}[dir=rtl] .m-77c9d27d[data-with-right-section]{--_button-padding-right:var(--button-padding-x);--_button-padding-left:calc(var(--button-padding-x)/1.5)}.m-77c9d27d:disabled:not([data-loading]),.m-77c9d27d[data-disabled]:not([data-loading]){--_button-cursor:not-allowed;--_button-bg:var(--_disabled-bg);--_button-color:var(--_disabled-color);--_button-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;transform:none}.m-77c9d27d:before{background-color:var(--_button-loading-overlay-bg);border-radius:var(--button-radius,var(--mantine-radius-default));content:"";filter:blur(12px);inset:calc(-.0625rem*var(--mantine-scale));opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease}.m-77c9d27d[data-loading]{--_button-cursor:not-allowed;transform:none}.m-77c9d27d[data-loading]:before{opacity:1;transform:translateY(0)}.m-77c9d27d[data-loading] .m-80f1301b{opacity:0;transform:translateY(100%)}.m-77c9d27d[data-loading] .m-a25b86ee{opacity:1;transform:translate(-50%,calc(-50% + .0625rem*var(--mantine-scale)))}@media (hover:hover){.m-77c9d27d:hover:not([data-loading]):not(:disabled):not([data-disabled]){--_button-bg:var(--button-hover,var(--mantine-primary-color-filled-hover));--_button-color:var(--button-hover-color)}}@media (hover:none){.m-77c9d27d:active:not([data-loading]):not(:disabled):not([data-disabled]){--_button-bg:var(--button-hover,var(--mantine-primary-color-filled-hover));--_button-color:var(--button-hover-color)}}[data-mantine-color-scheme=light] .m-77c9d27d{--_disabled-color:var(--mantine-color-gray-5);--_disabled-bg:var(--mantine-color-gray-1);--_button-loading-overlay-bg:hsla(0,0%,100%,.15)}[data-mantine-color-scheme=dark] .m-77c9d27d{--_disabled-color:var(--mantine-color-dark-3);--_disabled-bg:var(--mantine-color-dark-6);--_button-loading-overlay-bg:rgba(0,0,0,.15)}.m-80f1301b{justify-content:var(--button-justify,center);overflow:visible;transition:transform .15s ease,opacity .1s ease}.m-80f1301b,.m-811560b9{align-items:center;display:flex;height:100%}.m-811560b9{opacity:var(--_button-label-opacity,1);overflow:hidden;white-space:nowrap}.m-811560b9[data-loading]{--_button-label-opacity:0.2}.m-a74036a{align-items:center;display:flex;margin-left:var(--_button-section-margin-left);margin-right:var(--_button-section-margin-right)}.m-a74036a[data-position=left]{--_button-section-margin-right:var(--mantine-spacing-xs)}[dir=rtl] .m-a74036a[data-position=left]{--_button-section-margin-right:0}.m-a74036a[data-position=right],[dir=rtl] .m-a74036a[data-position=left]{--_button-section-margin-left:var(--mantine-spacing-xs)}[dir=rtl] .m-a74036a[data-position=right]{--_button-section-margin-left:0;--_button-section-margin-right:var(--mantine-spacing-xs)}.m-a25b86ee{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-200%);transition:transform .15s ease,opacity .1s ease}.m-80d6d844{--button-border-width:calc(0.0625rem*var(--mantine-scale));display:flex}.m-80d6d844[data-orientation=horizontal]{flex-direction:row}.m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):first-child{border-bottom-right-radius:0;border-right-width:calc(var(--button-border-width)/2);border-top-right-radius:0}.m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):last-child{border-bottom-left-radius:0;border-left-width:calc(var(--button-border-width)/2);border-top-left-radius:0}.m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):not(:first-child):not(:last-child){border-left-width:calc(var(--button-border-width)/2);border-radius:0;border-right-width:calc(var(--button-border-width)/2)}[dir=rtl] .m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):first-child{border:var(--_button-bd,var(--button-bd,calc(.0625rem*var(--mantine-scale)) solid transparent));border-radius:var(--button-radius,var(--mantine-radius-default));border-bottom-left-radius:0;border-left-width:calc(var(--button-border-width)/2);border-top-left-radius:0}[dir=rtl] .m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):last-child{border:var(--_button-bd,var(--button-bd,calc(.0625rem*var(--mantine-scale)) solid transparent));border-radius:var(--button-radius,var(--mantine-radius-default));border-bottom-right-radius:0;border-right-width:calc(var(--button-border-width)/2);border-top-right-radius:0}.m-80d6d844[data-orientation=vertical]{flex-direction:column}.m-80d6d844[data-orientation=vertical] .m-77c9d27d:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:calc(var(--button-border-width)/2)}.m-80d6d844[data-orientation=vertical] .m-77c9d27d:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;border-top-width:calc(var(--button-border-width)/2)}.m-80d6d844[data-orientation=vertical] .m-77c9d27d:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}.m-e615b15f{--card-padding:var(--mantine-spacing-md);color:var(--mantine-color-text);display:flex;flex-direction:column;overflow:hidden;padding:var(--card-padding);position:relative}:where([data-mantine-color-scheme=light]) .m-e615b15f{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=dark]) .m-e615b15f{background-color:var(--mantine-color-dark-6)}.m-599a2148{display:block;margin-left:calc(var(--card-padding)*-1);margin-right:calc(var(--card-padding)*-1)}.m-599a2148:where([data-first-section]){border-top:none!important;margin-top:calc(var(--card-padding)*-1)}.m-599a2148:where([data-last-section]){border-bottom:none!important;margin-bottom:calc(var(--card-padding)*-1)}.m-599a2148:where([data-inherit-padding]){padding-left:var(--card-padding);padding-right:var(--card-padding)}.m-599a2148:where([data-with-border]){border-bottom:calc(.0625rem*var(--mantine-scale)) solid;border-top:calc(.0625rem*var(--mantine-scale)) solid}:where([data-mantine-color-scheme=light]) .m-599a2148{border-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-599a2148{border-color:var(--mantine-color-dark-4)}.m-599a2148+.m-599a2148{border-top:none!important}.m-4451eb3a{align-items:center;display:flex;justify-content:center}.m-4451eb3a:where([data-inline]){display:inline-flex}.m-f59ffda3{--chip-size-xs:calc(1.4375rem*var(--mantine-scale));--chip-size-sm:calc(1.75rem*var(--mantine-scale));--chip-size-md:calc(2rem*var(--mantine-scale));--chip-size-lg:calc(2.25rem*var(--mantine-scale));--chip-size-xl:calc(2.5rem*var(--mantine-scale));--chip-icon-size-xs:calc(0.625rem*var(--mantine-scale));--chip-icon-size-sm:calc(0.75rem*var(--mantine-scale));--chip-icon-size-md:calc(0.875rem*var(--mantine-scale));--chip-icon-size-lg:calc(1rem*var(--mantine-scale));--chip-icon-size-xl:calc(1.125rem*var(--mantine-scale));--chip-padding-xs:calc(1rem*var(--mantine-scale));--chip-padding-sm:calc(1.25rem*var(--mantine-scale));--chip-padding-md:calc(1.5rem*var(--mantine-scale));--chip-padding-lg:calc(1.75rem*var(--mantine-scale));--chip-padding-xl:calc(2rem*var(--mantine-scale));--chip-checked-padding-xs:calc(0.46875rem*var(--mantine-scale));--chip-checked-padding-sm:calc(0.625rem*var(--mantine-scale));--chip-checked-padding-md:calc(0.73125rem*var(--mantine-scale));--chip-checked-padding-lg:calc(0.84375rem*var(--mantine-scale));--chip-checked-padding-xl:calc(0.78125rem*var(--mantine-scale));--chip-spacing-xs:calc(0.625rem*var(--mantine-scale));--chip-spacing-sm:calc(0.75rem*var(--mantine-scale));--chip-spacing-md:calc(1rem*var(--mantine-scale));--chip-spacing-lg:calc(1.25rem*var(--mantine-scale));--chip-spacing-xl:calc(1.375rem*var(--mantine-scale));--chip-size:var(--chip-size-sm);--chip-icon-size:var(--chip-icon-size-sm);--chip-padding:var(--chip-padding-sm);--chip-spacing:var(--chip-spacing-sm);--chip-checked-padding:var(--chip-checked-padding-sm);--chip-bg:var(--mantine-primary-color-filled);--chip-hover:var(--mantine-primary-color-filled-hover);--chip-color:var(--mantine-color-white);--chip-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent}.m-be049a53{-webkit-tap-highlight-color:transparent;align-items:center;background-color:var(--_chip-bg);border:calc(.0625rem*var(--mantine-scale)) solid transparent;border-radius:var(--chip-radius,calc(62.5rem*var(--mantine-scale)));color:var(--_chip-color,var(--mantine-color-text));cursor:var(--_chip-cursor,pointer);display:inline-flex;font-size:var(--chip-fz,var(--mantine-font-size-sm));height:var(--chip-size);line-height:calc(var(--chip-size) - .125rem*var(--mantine-scale));padding-left:var(--_chip-padding,var(--chip-padding));padding-right:var(--_chip-padding,var(--chip-padding));user-select:none;white-space:nowrap}.m-be049a53[data-checked]{--_chip-padding:var(--chip-checked-padding)}[data-mantine-color-scheme=light] .m-be049a53[data-disabled]{--_chip-bg:var(--mantine-color-gray-2);--_chip-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-be049a53[data-disabled]{--_chip-bg:var(--mantine-color-dark-6);--_chip-color:var(--mantine-color-dark-3)}.m-be049a53[data-disabled]{--_chip-cursor:not-allowed}.m-3904c1af:not([data-disabled]){background-color:var(--_chip-bg);border:var(--_chip-bd)}@media (hover:hover){[data-mantine-color-scheme=light] .m-3904c1af:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3904c1af:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-3904c1af:not([data-disabled]):active{--_chip-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3904c1af:not([data-disabled]):active{--_chip-bg:var(--mantine-color-dark-5)}}[data-mantine-color-scheme=light] .m-3904c1af:not([data-disabled]){--_chip-bg:var(--mantine-color-white);--_chip-bd:calc(0.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-3904c1af:not([data-disabled]){--_chip-bg:var(--mantine-color-dark-6);--_chip-bd:calc(0.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}[data-mantine-color-scheme] .m-3904c1af:not([data-disabled])[data-checked]{--_chip-bd:var(--chip-bd);--_chip-icon-color:var(--chip-color)}@media (hover:hover){[data-mantine-color-scheme] .m-3904c1af:not([data-disabled])[data-checked]:hover{--_chip-bg:var(--chip-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-3904c1af:not([data-disabled])[data-checked]:active{--_chip-bg:var(--chip-hover)}}.m-f7e165c3:not([data-disabled]),.m-fa109255:not([data-disabled]){background-color:var(--_chip-bg);border:calc(.0625rem*var(--mantine-scale)) solid transparent;color:var(--_chip-color,var(--mantine-color-text))}@media (hover:hover){[data-mantine-color-scheme=light] .m-f7e165c3:not([data-disabled]):hover,[data-mantine-color-scheme=light] .m-fa109255:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-f7e165c3:not([data-disabled]):hover,[data-mantine-color-scheme=dark] .m-fa109255:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-dark-4)}}@media (hover:none){[data-mantine-color-scheme=light] .m-f7e165c3:not([data-disabled]):active,[data-mantine-color-scheme=light] .m-fa109255:not([data-disabled]):active{--_chip-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-f7e165c3:not([data-disabled]):active,[data-mantine-color-scheme=dark] .m-fa109255:not([data-disabled]):active{--_chip-bg:var(--mantine-color-dark-4)}}[data-mantine-color-scheme=light] .m-f7e165c3:not([data-disabled]),[data-mantine-color-scheme=light] .m-fa109255:not([data-disabled]){--_chip-bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-f7e165c3:not([data-disabled]),[data-mantine-color-scheme=dark] .m-fa109255:not([data-disabled]){--_chip-bg:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-f7e165c3:not([data-disabled])[data-checked],[data-mantine-color-scheme] .m-fa109255:not([data-disabled])[data-checked]{--_chip-icon-color:var(--chip-color);--_chip-color:var(--chip-color);--_chip-bg:var(--chip-bg)}@media (hover:hover){[data-mantine-color-scheme] .m-f7e165c3:not([data-disabled])[data-checked]:hover,[data-mantine-color-scheme] .m-fa109255:not([data-disabled])[data-checked]:hover{--_chip-bg:var(--chip-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-f7e165c3:not([data-disabled])[data-checked]:active,[data-mantine-color-scheme] .m-fa109255:not([data-disabled])[data-checked]:active{--_chip-bg:var(--chip-hover)}}.m-9ac86df9{align-items:center;display:flex;max-width:calc(var(--chip-icon-size) + var(--chip-spacing)/1.5);overflow:hidden;width:calc(var(--chip-icon-size) + var(--chip-spacing)/1.5)}.m-9ac86df9,.m-d6d72580{height:var(--chip-icon-size)}.m-d6d72580{color:var(--_chip-icon-color,inherit);display:block;width:var(--chip-icon-size)}.m-bde07329{height:0;margin:0;opacity:0;padding:0;width:0}.m-bde07329:focus-visible+.m-be049a53{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-b183c0a2{border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);line-height:var(--mantine-line-height);margin:0;overflow:auto;padding:calc(.125rem*var(--mantine-scale)) calc(var(--mantine-spacing-xs)/2)}[data-mantine-color-scheme=light] .m-b183c0a2{background-color:var(--code-bg,var(--mantine-color-gray-1));color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-b183c0a2{background-color:var(--code-bg,var(--mantine-color-dark-5));color:var(--mantine-color-white)}.m-b183c0a2[data-block]{padding:var(--mantine-spacing-xs)}.m-de3d2490{--cs-size:calc(1.75rem*var(--mantine-scale));--cs-radius:calc(62.5rem*var(--mantine-scale));-webkit-tap-highlight-color:transparent;appearance:none;border:none;border-radius:var(--cs-radius);color:inherit;display:block;height:var(--cs-size);line-height:1;min-height:var(--cs-size);min-width:var(--cs-size);position:relative;text-decoration:none;width:var(--cs-size)}[data-mantine-color-scheme=light] .m-de3d2490{--alpha-overlay-color:var(--mantine-color-gray-3);--alpha-overlay-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-de3d2490{--alpha-overlay-color:var(--mantine-color-dark-4);--alpha-overlay-bg:var(--mantine-color-dark-7)}.m-862f3d1b,.m-98ae7f22{border-radius:var(--cs-radius);inset:0;position:absolute}.m-98ae7f22{box-shadow:rgba(0,0,0,.1) 0 0 0 calc(.0625rem*var(--mantine-scale)) inset,rgba(0,0,0,.15) 0 0 calc(.25rem*var(--mantine-scale)) inset;z-index:1}.m-95709ac0{background-image:linear-gradient(45deg,var(--alpha-overlay-color) 25%,transparent 25%),linear-gradient(-45deg,var(--alpha-overlay-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--alpha-overlay-color) 75%),linear-gradient(-45deg,var(--alpha-overlay-bg) 75%,var(--alpha-overlay-color) 75%);background-position:0 0,0 calc(.25rem*var(--mantine-scale)),calc(.25rem*var(--mantine-scale)) calc(-.25rem*var(--mantine-scale)),calc(-.25rem*var(--mantine-scale)) 0;background-size:calc(.5rem*var(--mantine-scale)) calc(.5rem*var(--mantine-scale))}.m-93e74e3,.m-95709ac0{border-radius:var(--cs-radius);inset:0;position:absolute}.m-93e74e3{align-items:center;display:flex;justify-content:center;z-index:2}.m-fee9c77{--cp-width-xs:calc(11.25rem*var(--mantine-scale));--cp-width-sm:calc(12.5rem*var(--mantine-scale));--cp-width-md:calc(15rem*var(--mantine-scale));--cp-width-lg:calc(17.5rem*var(--mantine-scale));--cp-width-xl:calc(20rem*var(--mantine-scale));--cp-preview-size-xs:calc(1.625rem*var(--mantine-scale));--cp-preview-size-sm:calc(2.125rem*var(--mantine-scale));--cp-preview-size-md:calc(2.625rem*var(--mantine-scale));--cp-preview-size-lg:calc(3.125rem*var(--mantine-scale));--cp-preview-size-xl:calc(3.375rem*var(--mantine-scale));--cp-thumb-size-xs:calc(0.5rem*var(--mantine-scale));--cp-thumb-size-sm:calc(0.75rem*var(--mantine-scale));--cp-thumb-size-md:calc(1rem*var(--mantine-scale));--cp-thumb-size-lg:calc(1.25rem*var(--mantine-scale));--cp-thumb-size-xl:calc(1.375rem*var(--mantine-scale));--cp-saturation-height-xs:calc(6.25rem*var(--mantine-scale));--cp-saturation-height-sm:calc(6.875rem*var(--mantine-scale));--cp-saturation-height-md:calc(7.5rem*var(--mantine-scale));--cp-saturation-height-lg:calc(8.75rem*var(--mantine-scale));--cp-saturation-height-xl:calc(10rem*var(--mantine-scale));--cp-preview-size:var(--cp-preview-size-sm);--cp-thumb-size:var(--cp-thumb-size-sm);--cp-saturation-height:var(--cp-saturation-height-sm);--cp-width:var(--cp-width-sm);--cp-body-spacing:var(--mantine-spacing-sm);padding:calc(.0625rem*var(--mantine-scale));width:var(--_cp-width,var(--cp-width))}.m-fee9c77[data-full-width]{--_cp-width:100%}.m-9dddfbac{height:var(--cp-preview-size);width:var(--cp-preview-size)}.m-bffecc3e{display:flex;padding-top:calc(var(--cp-body-spacing)/2)}.m-3283bb96{flex:1}.m-3283bb96:not(:only-child){margin-right:var(--mantine-spacing-xs)}.m-40d572ba{border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-white);border-radius:var(--_cp-thumb-size);box-shadow:0 0 calc(.0625rem*var(--mantine-scale)) rgba(0,0,0,.6);height:var(--_cp-thumb-size);left:calc(var(--_thumb-x-offset) - var(--_cp-thumb-size)/2);outline:var(--_outline);overflow:hidden;position:absolute;top:calc(var(--_thumb-y-offset) - var(--_cp-thumb-size)/2);width:var(--_cp-thumb-size)}.m-d8ee6fd8{cursor:pointer;flex:0 0 calc(var(--cp-swatch-size) - 0.25rem*var(--mantine-scale));height:unset!important;margin:calc(.125rem*var(--mantine-scale));min-height:0!important;min-width:0!important;padding-bottom:calc(var(--cp-swatch-size) - .25rem*var(--mantine-scale));width:unset!important}.m-5711e686{display:flex;flex-wrap:wrap;margin-left:calc(-.125rem*var(--mantine-scale));margin-right:calc(-.125rem*var(--mantine-scale));margin-top:calc(.3125rem*var(--mantine-scale))}.m-202a296e{--cp-thumb-size-xs:calc(0.5rem*var(--mantine-scale));--cp-thumb-size-sm:calc(0.75rem*var(--mantine-scale));--cp-thumb-size-md:calc(1rem*var(--mantine-scale));--cp-thumb-size-lg:calc(1.25rem*var(--mantine-scale));--cp-thumb-size-xl:calc(1.375rem*var(--mantine-scale));--_cp-thumb-size:var(--cp-thumb-size,calc(0.75rem*var(--mantine-scale)));-webkit-tap-highlight-color:transparent;border-radius:var(--mantine-radius-sm);height:var(--cp-saturation-height);margin:calc(var(--cp-thumb-size)/2);position:relative}.m-202a296e[data-focus-ring=auto]:focus:focus-visible .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-202a296e[data-focus-ring=always]:focus .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-11b3db02{border-radius:var(--mantine-radius-sm);inset:calc(var(--cp-thumb-size)*-1/2 - .0625rem*var(--mantine-scale));position:absolute}.m-d856d47d{--cp-thumb-size-xs:calc(0.5rem*var(--mantine-scale));--cp-thumb-size-sm:calc(0.75rem*var(--mantine-scale));--cp-thumb-size-md:calc(1rem*var(--mantine-scale));--cp-thumb-size-lg:calc(1.25rem*var(--mantine-scale));--cp-thumb-size-xl:calc(1.375rem*var(--mantine-scale));--_cp-thumb-size:var(--cp-thumb-size,calc(0.75rem*var(--mantine-scale)));height:calc(var(--_cp-thumb-size) + .125rem*var(--mantine-scale));margin-left:calc(var(--_cp-thumb-size)/2);margin-right:calc(var(--_cp-thumb-size)/2);outline:none;position:relative}.m-d856d47d+.m-d856d47d{margin-top:calc(.375rem*var(--mantine-scale))}.m-d856d47d[data-focus-ring=auto]:focus:focus-visible .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-d856d47d[data-focus-ring=always]:focus .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}[data-mantine-color-scheme=light] .m-d856d47d{--_slider-checkers:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-d856d47d{--_slider-checkers:var(--mantine-color-dark-4)}.m-8f327113{border-radius:10000rem;bottom:0;left:calc(var(--_cp-thumb-size)*-1/2 - .0625rem*var(--mantine-scale));position:absolute;right:calc(var(--_cp-thumb-size)*-1/2 - .0625rem*var(--mantine-scale));top:0}.m-b077c2bc{--ci-eye-dropper-icon-size-xs:calc(0.875rem*var(--mantine-scale));--ci-eye-dropper-icon-size-sm:calc(1rem*var(--mantine-scale));--ci-eye-dropper-icon-size-md:calc(1.125rem*var(--mantine-scale));--ci-eye-dropper-icon-size-lg:calc(1.25rem*var(--mantine-scale));--ci-eye-dropper-icon-size-xl:calc(1.375rem*var(--mantine-scale));--ci-eye-dropper-icon-size:var(--ci-eye-dropper-icon-size-sm)}.m-c5ccdcab{--ci-preview-size-xs:calc(1rem*var(--mantine-scale));--ci-preview-size-sm:calc(1.125rem*var(--mantine-scale));--ci-preview-size-md:calc(1.375rem*var(--mantine-scale));--ci-preview-size-lg:calc(1.75rem*var(--mantine-scale));--ci-preview-size-xl:calc(2.25rem*var(--mantine-scale));--ci-preview-size:var(--ci-preview-size-sm)}.m-5ece2cd7{padding:calc(.5rem*var(--mantine-scale))}.m-7485cace{--container-size-xs:calc(33.75rem*var(--mantine-scale));--container-size-sm:calc(45rem*var(--mantine-scale));--container-size-md:calc(60rem*var(--mantine-scale));--container-size-lg:calc(71.25rem*var(--mantine-scale));--container-size-xl:calc(82.5rem*var(--mantine-scale));--container-size:var(--container-size-md);margin-left:auto;margin-right:auto;max-width:var(--container-size);padding-left:var(--mantine-spacing-md);padding-right:var(--mantine-spacing-md)}.m-7485cace:where([data-fluid]){max-width:100%}.m-e2125a27{--dialog-size-xs:calc(10rem*var(--mantine-scale));--dialog-size-sm:calc(12.5rem*var(--mantine-scale));--dialog-size-md:calc(21.25rem*var(--mantine-scale));--dialog-size-lg:calc(25rem*var(--mantine-scale));--dialog-size-xl:calc(31.25rem*var(--mantine-scale));--dialog-size:var(--dialog-size-md);max-width:calc(100vw - var(--mantine-spacing-xl)*2);min-height:calc(3.125rem*var(--mantine-scale));position:relative;width:var(--dialog-size)}.m-5abab665{left:auto;position:absolute;right:calc(var(--mantine-spacing-md)/2);top:calc(var(--mantine-spacing-md)/2)}:where([dir=rtl]) .m-5abab665{left:calc(var(--mantine-spacing-md)/2);right:auto}.m-3eebeb36{--divider-size-xs:calc(0.0625rem*var(--mantine-scale));--divider-size-sm:calc(0.125rem*var(--mantine-scale));--divider-size-md:calc(0.1875rem*var(--mantine-scale));--divider-size-lg:calc(0.25rem*var(--mantine-scale));--divider-size-xl:calc(0.3125rem*var(--mantine-scale));--divider-size:var(--divider-size-xs)}:where([data-mantine-color-scheme=light]) .m-3eebeb36{--divider-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-3eebeb36{--divider-color:var(--mantine-color-dark-4)}.m-3eebeb36:where([data-orientation=horizontal]){border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color)}.m-3eebeb36:where([data-orientation=vertical]){align-self:stretch;border-left:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);height:auto}.m-3eebeb36:where([data-with-label]){border:0}.m-9e365f20{align-items:center;color:var(--divider-color,var(--mantine-color-dimmed));display:flex;font-size:var(--mantine-font-size-xs);white-space:nowrap}.m-9e365f20:where([data-position=left]):before{display:none}.m-9e365f20:where([data-position=right]):after{display:none}.m-9e365f20:before{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color,var(--_divider-color));content:"";flex:1;height:calc(.0625rem*var(--mantine-scale));margin-right:var(--mantine-spacing-xs)}[dir=rtl] .m-9e365f20:before{margin-left:var(--mantine-spacing-xs);margin-right:0}.m-9e365f20:after{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color,var(--_divider-color));content:"";flex:1;height:calc(.0625rem*var(--mantine-scale));margin-left:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-9e365f20:after{margin-left:0;margin-right:var(--mantine-spacing-xs)}.m-f11b401e{--drawer-size-xs:calc(20rem*var(--mantine-scale));--drawer-size-sm:calc(23.75rem*var(--mantine-scale));--drawer-size-md:calc(27.5rem*var(--mantine-scale));--drawer-size-lg:calc(38.75rem*var(--mantine-scale));--drawer-size-xl:calc(48.75rem*var(--mantine-scale));--drawer-size:var(--drawer-size-md);--drawer-offset:0rem}.m-5a7c2c9{z-index:1000}.m-b8a05bbd{flex:var(--drawer-flex,0 0 var(--drawer-size));height:var(--drawer-height,calc(100% - var(--drawer-offset)*2));margin:var(--drawer-offset);max-height:100%;max-width:100%;overflow-y:auto}.m-31cd769a{align-items:var(--drawer-align,flex-start);display:flex;justify-content:var(--drawer-justify,flex-start)}.m-e9408a47{border-radius:var(--fieldset-radius,var(--mantine-radius-default));min-inline-size:auto;padding:var(--mantine-spacing-lg);padding-top:var(--mantine-spacing-xs)}.m-84c9523a{border:calc(.0625rem*var(--mantine-scale)) solid}:where([data-mantine-color-scheme=light]) .m-84c9523a{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-84c9523a{background-color:var(--mantine-color-dark-7);border-color:var(--mantine-color-dark-4)}.m-ef274e49{border:calc(.0625rem*var(--mantine-scale)) solid}:where([data-mantine-color-scheme=light]) .m-ef274e49{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-ef274e49{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4)}.m-eda993d3{border:0;border-radius:0;padding:0}.m-90794832{font-size:var(--mantine-font-size-sm)}.m-74ca27fe{margin-bottom:var(--mantine-spacing-sm);padding:0}.m-410352e9{--grid-overflow:visible;--grid-margin:calc(var(--grid-gutter)/-2);--grid-col-padding:calc(var(--grid-gutter)/2);overflow:var(--grid-overflow)}.m-dee7bd2f{align-items:var(--grid-align);display:flex;flex-wrap:wrap;justify-content:var(--grid-justify);margin:var(--grid-margin);width:calc(100% + var(--grid-gutter))}.m-96bdd299{--col-flex-grow:0;--col-offset:0rem;flex-basis:var(--col-flex-basis);flex-grow:var(--col-flex-grow);flex-shrink:0;margin-left:var(--col-offset);margin-right:0;max-width:var(--col-max-width);order:var(--col-order);padding:var(--grid-col-padding);width:var(--col-width)}:where([dir=rtl]) .m-96bdd299{margin-left:0;margin-right:var(--col-offset)}.m-bcb3f3c2{color:var(--mantine-color-black)}:where([data-mantine-color-scheme=light]) .m-bcb3f3c2{background-color:var(--mark-bg-light)}:where([data-mantine-color-scheme=dark]) .m-bcb3f3c2{background-color:var(--mark-bg-dark)}.m-9e117634{border-radius:var(--image-radius,0);display:block;flex:0;object-fit:var(--image-object-fit,cover);width:100%}@keyframes m-885901b1{0%{box-shadow:0 0 calc(.03125rem*var(--mantine-scale)) 0 var(--indicator-color);opacity:.6}to{box-shadow:0 0 calc(.03125rem*var(--mantine-scale)) calc(.275rem*var(--mantine-scale)) var(--indicator-color);opacity:0}}.m-e5262200{--indicator-size:calc(0.625rem*var(--mantine-scale));--indicator-color:var(--mantine-primary-color-filled);display:block;position:relative}.m-e5262200:where([data-inline]){display:inline-block}.m-760d1fb1{align-items:center;bottom:var(--indicator-bottom);color:var(--indicator-text-color,var(--mantine-color-white));display:flex;font-size:var(--mantine-font-size-xs);height:var(--indicator-size);justify-content:center;left:var(--indicator-left);min-width:var(--indicator-size);right:var(--indicator-right);top:var(--indicator-top);transform:translate(var(--indicator-translate-x),var(--indicator-translate-y));white-space:nowrap;z-index:var(--indicator-z-index,200)}.m-760d1fb1,.m-760d1fb1:before{background-color:var(--indicator-color);border-radius:var(--indicator-radius,calc(62.5rem*var(--mantine-scale)));position:absolute}.m-760d1fb1:before{content:"";inset:0;z-index:-1}.m-760d1fb1:where([data-with-label]){padding-left:calc(var(--mantine-spacing-xs)/2);padding-right:calc(var(--mantine-spacing-xs)/2)}.m-760d1fb1:where([data-with-border]){border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-body)}.m-760d1fb1[data-processing]:before{animation:m-885901b1 1s linear infinite}.m-dc6f14e2{--kbd-fz-xs:calc(0.625rem*var(--mantine-scale));--kbd-fz-sm:calc(0.75rem*var(--mantine-scale));--kbd-fz-md:calc(0.875rem*var(--mantine-scale));--kbd-fz-lg:calc(1rem*var(--mantine-scale));--kbd-fz-xl:calc(1.25rem*var(--mantine-scale));--kbd-fz:var(--kbd-fz-sm);--kbd-padding-xs:calc(0.125rem*var(--mantine-scale)) calc(0.25rem*var(--mantine-scale));--kbd-padding-sm:calc(0.1875rem*var(--mantine-scale)) calc(0.3125rem*var(--mantine-scale));--kbd-padding-md:calc(0.25rem*var(--mantine-scale)) calc(0.4375rem*var(--mantine-scale));--kbd-padding-lg:calc(0.3125rem*var(--mantine-scale)) calc(0.5625rem*var(--mantine-scale));--kbd-padding-xl:calc(0.5rem*var(--mantine-scale)) calc(0.875rem*var(--mantine-scale));--kbd-padding:var(--kbd-padding-sm);border:calc(.0625rem*var(--mantine-scale)) solid;border-bottom-width:calc(.1875rem*var(--mantine-scale));border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--kbd-fz);font-weight:700;line-height:var(--mantine-line-height);padding:var(--kbd-padding);unicode-bidi:embed}:where([data-mantine-color-scheme=light]) .m-dc6f14e2{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3);color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-dc6f14e2{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4);color:var(--mantine-color-dark-0)}.m-abbac491{--list-fz:var(--mantine-font-size-md);--list-lh:var(--mantine-line-height-md);font-size:var(--list-fz);line-height:var(--list-lh);list-style-position:inside;margin:0;padding:0}.m-abbac491:where([data-with-padding]){padding-left:var(--mantine-spacing-md)}[dir=rtl] .m-abbac491:where([data-with-padding]){padding-left:0;padding-right:var(--mantine-spacing-md)}.m-abb6bec2{line-height:var(--list-lh);white-space:nowrap}.m-abb6bec2:where([data-with-icon]){list-style:none}.m-abb6bec2:where([data-with-icon]) .m-75cd9f71{--li-direction:row;--li-align:center}.m-abb6bec2:where(:not(:first-of-type)){margin-top:var(--list-spacing,0)}.m-abb6bec2:where([data-centered]){line-height:1}.m-75cd9f71{align-items:var(--li-align,flex-start);display:inline-flex;flex-direction:var(--li-direction,column);white-space:normal}.m-60f83e5b{display:inline-block;margin-left:0;margin-right:var(--mantine-spacing-sm);vertical-align:middle}[dir=rtl] .m-60f83e5b{margin-left:var(--mantine-spacing-sm);margin-right:0}.m-6e45937b{align-items:center;display:flex;inset:0;justify-content:center;overflow:hidden;position:absolute;z-index:var(--lo-z-index)}.m-e8eb006c{position:relative;z-index:calc(var(--lo-z-index) + 1)}.m-df587f17{z-index:var(--lo-z-index)}[data-mantine-color-scheme=dark] .m-df587f17[data-light],[data-mantine-color-scheme=light] .m-df587f17[data-dark]{display:none}.m-dc9b7c9f{padding:calc(.25rem*var(--mantine-scale))}.m-9bfac126{color:var(--mantine-color-dimmed);cursor:default;font-size:var(--mantine-font-size-xs);font-weight:500;padding:calc(var(--mantine-spacing-xs)/2) var(--mantine-spacing-sm)}.m-efdf90cb{border-top:calc(.0625rem*var(--mantine-scale)) solid;margin-bottom:calc(.25rem*var(--mantine-scale));margin-top:calc(.25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-efdf90cb{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-efdf90cb{border-color:var(--mantine-color-dark-4)}.m-99ac2aa1{align-items:center;background-color:var(--_item-bg,transparent);border-radius:var(--popover-radius,var(--mantine-radius-default));color:var(--menu-item-color,var(--mantine-color-text));display:flex;font-size:var(--mantine-font-size-sm);padding:calc(var(--mantine-spacing-xs)/1.5) var(--mantine-spacing-sm);user-select:none;width:100%}.m-99ac2aa1:where([data-disabled],:disabled){color:var(--mantine-color-dimmed);opacity:.6;pointer-events:none}:where([data-mantine-color-scheme=light]) .m-99ac2aa1:where([data-hovered]){background-color:var(--menu-item-hover,var(--mantine-color-gray-1))}:where([data-mantine-color-scheme=dark]) .m-99ac2aa1:where([data-hovered]){background-color:var(--menu-item-hover,var(--mantine-color-dark-4))}.m-5476e0d3{flex:1}[dir=rtl] .m-5476e0d3{text-align:right}.m-8b75e504{align-items:center;display:flex;justify-content:center}.m-8b75e504:where([data-position=left]){margin-left:0;margin-right:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-8b75e504:where([data-position=left]){margin-left:var(--mantine-spacing-xs);margin-right:0}.m-8b75e504:where([data-position=right]){margin-left:var(--mantine-spacing-xs);margin-right:0}:where([dir=rtl]) .m-8b75e504:where([data-position=right]){margin-left:0;margin-right:var(--mantine-spacing-xs)}.m-9df02822{--modal-size-xs:calc(20rem*var(--mantine-scale));--modal-size-sm:calc(23.75rem*var(--mantine-scale));--modal-size-md:calc(27.5rem*var(--mantine-scale));--modal-size-lg:calc(38.75rem*var(--mantine-scale));--modal-size-xl:calc(48.75rem*var(--mantine-scale));--modal-size:var(--modal-size-md);--modal-y-offset:5dvh;--modal-x-offset:5vw}.m-9df02822[data-full-screen]{--modal-border-radius:0!important}.m-9df02822[data-full-screen] .m-54c44539{--_content-flex:0 0 100%;--_content-max-height:auto;--_content-height:100dvh}.m-9df02822[data-full-screen] .m-1f958f16{--_inner-y-offset:0;--_inner-x-offset:0}.m-9df02822[data-centered] .m-1f958f16{--_inner-align:center}.m-d0e2b9cd{border-top-left-radius:var(--modal-radius,var(--mantine-radius-default));border-top-right-radius:var(--modal-radius,var(--mantine-radius-default))}.m-54c44539{flex:var(--_content-flex,0 0 var(--modal-size));height:var(--_content-height,auto);max-height:var(--_content-max-height,calc(100dvh - var(--modal-y-offset)*2));max-width:100%;overflow-y:auto}.m-1f958f16{align-items:var(--_inner-align,flex-start);display:flex;justify-content:center;padding:var(--_inner-y-offset,var(--modal-y-offset)) var(--_inner-x-offset,var(--modal-x-offset))}.m-7cda1cd6{--pill-fz-xs:calc(0.625rem*var(--mantine-scale));--pill-fz-sm:calc(0.75rem*var(--mantine-scale));--pill-fz-md:calc(0.875rem*var(--mantine-scale));--pill-fz-lg:calc(1rem*var(--mantine-scale));--pill-fz-xl:calc(1.125rem*var(--mantine-scale));--pill-height-xs:calc(1.125rem*var(--mantine-scale));--pill-height-sm:calc(1.375rem*var(--mantine-scale));--pill-height-md:calc(1.5625rem*var(--mantine-scale));--pill-height-lg:calc(1.75rem*var(--mantine-scale));--pill-height-xl:calc(2rem*var(--mantine-scale));--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm);align-items:center;border-radius:var(--pill-radius,calc(62.5rem*var(--mantine-scale)));display:inline-flex;flex:0;font-size:var(--pill-fz);height:var(--pill-height);line-height:1;max-width:100%;padding-left:.8em;padding-right:.8em;user-select:none;-webkit-user-select:none;white-space:nowrap}:where([data-mantine-color-scheme=dark]) .m-7cda1cd6{background-color:var(--mantine-color-dark-7);color:var(--mantine-color-dark-0)}:where([data-mantine-color-scheme=light]) .m-7cda1cd6{color:var(--mantine-color-black)}:where([dir=rtl]) .m-7cda1cd6{padding-left:.8em;padding-right:.8em}.m-7cda1cd6:where([data-with-remove]){padding-right:0}.m-7cda1cd6:where([data-disabled],:has(button:disabled)){cursor:not-allowed}:where([data-mantine-color-scheme=light]) .m-44da308b{background-color:var(--mantine-color-gray-1)}:where([data-mantine-color-scheme=light]) .m-44da308b:where([data-disabled],:has(button:disabled)){background-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=light]) .m-e3a01f8{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=light]) .m-e3a01f8:where([data-disabled],:has(button:disabled)){background-color:var(--mantine-color-gray-3)}.m-1e0e6180{cursor:inherit;height:100%;line-height:var(--pill-height);overflow:hidden;text-overflow:ellipsis}.m-ae386778{border-radius:0;color:inherit;flex:0;font-size:inherit;height:100%;min-height:unset;min-width:2em;padding-left:.1em;padding-right:.3em;width:unset}.m-7cda1cd6[data-disabled]>.m-ae386778,.m-ae386778:disabled{background-color:transparent;cursor:not-allowed;min-width:.8em;padding:0;width:.8em}.m-7cda1cd6[data-disabled]>.m-ae386778>svg,.m-ae386778:disabled>svg{display:none}.m-ae386778>svg{pointer-events:none}.m-1dcfd90b{--pg-gap-xs:calc(0.375rem*var(--mantine-scale));--pg-gap-sm:calc(0.5rem*var(--mantine-scale));--pg-gap-md:calc(0.625rem*var(--mantine-scale));--pg-gap-lg:calc(0.75rem*var(--mantine-scale));--pg-gap-xl:calc(0.75rem*var(--mantine-scale));--pg-gap:var(--pg-gap-sm);align-items:center;display:flex;flex-wrap:wrap;gap:var(--pg-gap)}.m-45c4369d{appearance:none;background-color:transparent;border:0;color:inherit;flex:1;font-size:inherit;height:1.6em;min-width:calc(6.25rem*var(--mantine-scale));padding:0}.m-45c4369d::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-45c4369d:where([data-type=hidden],[data-type=auto]){height:calc(.0625rem*var(--mantine-scale));left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:calc(.0625rem*var(--mantine-scale))}.m-45c4369d:focus{outline:none}.m-45c4369d:where([data-type=auto]:focus){height:1.6em;opacity:1;position:static;visibility:visible}.m-45c4369d:where([data-pointer]:not([data-disabled],:disabled)){cursor:pointer}.m-45c4369d:where([data-disabled],:disabled){cursor:not-allowed}.m-f0824112{--nl-bg:var(--mantine-primary-color-light);--nl-hover:var(--mantine-primary-color-light-hover);--nl-color:var(--mantine-primary-color-light-color);align-items:center;background:var(--_nav-link-bg);color:var(--_nav-link-color);display:flex;opacity:var(--_nav-link-opacity,1);padding:calc(.5rem*var(--mantine-scale)) var(--mantine-spacing-sm);pointer-events:var(--_nav-link-pointer-events,auto);user-select:none;width:100%}@media (hover:hover){[data-mantine-color-scheme=light] .m-f0824112:hover{--_nav-link-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-f0824112:hover{--_nav-link-bg:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-f0824112:active{--_nav-link-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-f0824112:active{--_nav-link-bg:var(--mantine-color-dark-6)}}.m-f0824112[data-disabled]{--_nav-link-opacity:0.4;--_nav-link-pointer-events:none}.m-f0824112[data-active]{--_nav-link-bg:var(--nl-bg);--_nav-link-color:var(--nl-color)}@media (hover:hover){.m-f0824112[data-active]:hover{--_nav-link-bg:var(--nl-hover)}}@media (hover:none){.m-f0824112[data-active]:active{--_nav-link-bg:var(--nl-hover)}}.m-f0824112[data-active] .m-57492dcc{--_description-opacity:0.9;--_description-color:var(--nl-color)}.m-690090b5{align-items:center;display:flex;justify-content:center;margin-left:var(--_section-ml);margin-right:var(--_section-mr);transform:var(--_section-transform,none);transition:transform .15s ease}.m-690090b5>svg{display:block}.m-690090b5[data-position=left]{--_section-ml:0;--_section-mr:var(--mantine-spacing-sm)}.m-690090b5[data-position=right],[dir=rtl] .m-690090b5[data-position=left]{--_section-ml:var(--mantine-spacing-sm);--_section-mr:0}[dir=rtl] .m-690090b5[data-position=right]{--_section-ml:0;--_section-mr:var(--mantine-spacing-sm)}.m-690090b5[data-rotate]{--_section-transform:rotate(90deg)}.m-1f6ac4c4{font-size:var(--mantine-font-size-sm)}.m-f07af9d2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:var(--_body-white-space,auto)}.m-f07af9d2[data-no-wrap]{--_body-white-space:nowrap}.m-57492dcc{color:var(--_description-color,var(--mantine-color-dimmed));display:block;font-size:var(--mantine-font-size-xs);opacity:var(--_description-opacity,1);overflow:hidden;text-overflow:ellipsis;white-space:var(--_body-white-space,auto)}.m-e17b862f{padding-left:var(--_children-pl,var(--nl-offset,var(--mantine-spacing-lg)));padding-right:var(--_children-pr,0)}[dir=rtl] .m-e17b862f{--_children-pl:0;--_children-pr:var(--nl-offset,var(--mantine-spacing-lg))}.m-1fd8a00b{transform:rotate(-90deg)}.m-a513464{--notification-radius:var(--mantine-radius-default);--notification-color:var(--mantine-primary-color-filled);align-items:center;box-shadow:var(--mantine-shadow-lg);box-sizing:border-box;display:flex;overflow:hidden;padding:var(--mantine-spacing-xs) var(--mantine-spacing-xs) var(--mantine-spacing-xs) calc(1.375rem*var(--mantine-scale));position:relative}.m-a513464,.m-a513464:before{border-radius:var(--notification-radius)}.m-a513464:before{background-color:var(--notification-color);bottom:var(--notification-radius);content:"";display:block;left:calc(.25rem*var(--mantine-scale));position:absolute;top:var(--notification-radius);width:calc(.375rem*var(--mantine-scale))}:where([dir=rtl]) .m-a513464:before{left:auto;right:calc(.25rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-a513464{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=dark]) .m-a513464{background-color:var(--mantine-color-dark-6)}.m-a513464:where([data-with-icon]){padding-left:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-a513464:where([data-with-icon]){padding-right:var(--mantine-spacing-xs)}.m-a513464:where([data-with-icon]):before{display:none}:where([data-mantine-color-scheme=light]) .m-a513464:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-a513464:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}:where([dir=rtl]) .m-a513464{padding-left:var(--mantine-spacing-xs);padding-right:calc(1.375rem*var(--mantine-scale))}.m-a4ceffb{align-items:center;background-color:var(--notification-color);border-radius:calc(1.75rem*var(--mantine-scale));box-sizing:border-box;color:var(--mantine-color-white);display:flex;height:calc(1.75rem*var(--mantine-scale));justify-content:center;margin-right:var(--mantine-spacing-md);width:calc(1.75rem*var(--mantine-scale))}:where([dir=rtl]) .m-a4ceffb{margin-left:var(--mantine-spacing-md);margin-right:0}.m-b0920b15{margin-right:var(--mantine-spacing-md)}:where([dir=rtl]) .m-b0920b15{margin-left:var(--mantine-spacing-md);margin-right:0}.m-a49ed24{flex:1;margin-right:var(--mantine-spacing-xs);overflow:hidden}:where([dir=rtl]) .m-a49ed24{margin-left:var(--mantine-spacing-xs);margin-right:0}.m-3feedf16{font-size:var(--mantine-font-size-sm);font-weight:500;line-height:var(--mantine-line-height-sm);margin-bottom:calc(.125rem*var(--mantine-scale));overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .m-3feedf16{color:var(--mantine-color-gray-9)}:where([data-mantine-color-scheme=dark]) .m-3feedf16{color:var(--mantine-color-white)}.m-3d733a3a{color:var(--_description-color);font-size:var(--mantine-font-size-sm);line-height:var(--mantine-line-height-sm);overflow:hidden;text-overflow:ellipsis}[data-mantine-color-scheme=light] .m-3d733a3a{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-3d733a3a{color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-3d733a3a:where([data-with-title]){color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-3d733a3a:where([data-with-title]){color:var(--mantine-color-dark-2)}@media (hover:hover){[data-mantine-color-scheme=light] .m-919a4d88:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-919a4d88:hover{background-color:var(--mantine-color-dark-8)}}@media (hover:none){[data-mantine-color-scheme=light] .m-919a4d88:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-919a4d88:active{background-color:var(--mantine-color-dark-8)}}.m-e2f5cd4e{--ni-right-section-width-xs:calc(1.0625rem*var(--mantine-scale));--ni-right-section-width-sm:calc(1.5rem*var(--mantine-scale));--ni-right-section-width-md:calc(1.6875rem*var(--mantine-scale));--ni-right-section-width-lg:calc(1.9375rem*var(--mantine-scale));--ni-right-section-width-xl:calc(2.125rem*var(--mantine-scale))}.m-95e17d22{--ni-chevron-size-xs:calc(0.625rem*var(--mantine-scale));--ni-chevron-size-sm:calc(0.875rem*var(--mantine-scale));--ni-chevron-size-md:calc(1rem*var(--mantine-scale));--ni-chevron-size-lg:calc(1.125rem*var(--mantine-scale));--ni-chevron-size-xl:calc(1.25rem*var(--mantine-scale));--ni-chevron-size:var(--ni-chevron-size-sm);display:flex;flex-direction:column;height:calc(var(--_input-height) - .125rem*var(--mantine-scale));margin-left:auto;margin-right:0;max-width:calc(var(--ni-chevron-size)*1.7);width:100%}:where([dir=rtl]) .m-95e17d22{margin-left:0;margin-right:auto}.m-80b4b171{--control-border:calc(0.0625rem*var(--mantine-scale)) solid var(--_input-bd);--control-radius:calc(var(--_input-radius) - 0.0625rem*var(--mantine-scale));align-items:center;background-color:transparent;border-left:var(--control-border);color:var(--mantine-color-text);cursor:pointer;display:flex;flex:0 0 50%;height:calc(var(--_input-height)/2 - .0625rem*var(--mantine-scale));justify-content:center;padding:0;width:100%}.m-80b4b171:where(:disabled){background-color:transparent;cursor:not-allowed;opacity:.6}:where([data-mantine-color-scheme=light]) .m-80b4b171:where(:disabled){color:var(--mantine-color-gray-4)}:where([data-mantine-color-scheme=dark]) .m-80b4b171:where(:disabled){color:var(--mantine-color-dark-3)}.m-e2f5cd4e[data-error] :where(.m-80b4b171){color:var(--mantine-color-error)}:where([dir=rtl]) .m-80b4b171{border-left:none;border-right:var(--control-border)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-80b4b171:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-80b4b171:hover{background-color:var(--mantine-color-dark-4)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-80b4b171:active{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-80b4b171:active{background-color:var(--mantine-color-dark-4)}}.m-80b4b171:where(:first-of-type){border-bottom:calc(.03125rem*var(--mantine-scale)) solid var(--_input-bd);border-radius:0 var(--control-radius) 0 0}:where([dir=rtl]) .m-80b4b171:where(:first-of-type){border-radius:var(--control-radius) 0 0 0}.m-80b4b171:last-of-type{border-radius:0 0 var(--control-radius) 0;border-top:calc(.03125rem*var(--mantine-scale)) solid var(--_input-bd)}[dir=rtl] .m-80b4b171:last-of-type{border-radius:0 0 0 var(--control-radius)}.m-4addd315{--pagination-control-size-xs:calc(1.375rem*var(--mantine-scale));--pagination-control-size-sm:calc(1.625rem*var(--mantine-scale));--pagination-control-size-md:calc(2rem*var(--mantine-scale));--pagination-control-size-lg:calc(2.375rem*var(--mantine-scale));--pagination-control-size-xl:calc(2.75rem*var(--mantine-scale));--pagination-control-size:var(--pagination-control-size-md);--pagination-control-fz:var(--mantine-font-size-md);--pagination-active-bg:var(--mantine-primary-color-filled)}.m-326d024a{align-items:center;border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--pagination-control-radius,var(--mantine-radius-default));color:var(--mantine-color-text);cursor:pointer;display:flex;font-size:var(--pagination-control-fz);height:var(--pagination-control-size);justify-content:center;line-height:1;min-width:var(--pagination-control-size)}.m-326d024a:where([data-with-padding]){padding:calc(var(--pagination-control-size)/4)}.m-326d024a:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.4}:where([data-mantine-color-scheme=light]) .m-326d024a{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-4)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-326d024a:hover:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-gray-0)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-326d024a:active:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-gray-0)}}:where([data-mantine-color-scheme=dark]) .m-326d024a{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4)}@media (hover:hover){:where([data-mantine-color-scheme=dark]) .m-326d024a:hover:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=dark]) .m-326d024a:active:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-dark-5)}}.m-326d024a:where([data-active]){background-color:var(--pagination-active-bg);border-color:var(--pagination-active-bg);color:var(--pagination-active-color,var(--mantine-color-white))}@media (hover:hover){.m-326d024a:where([data-active]):hover{background-color:var(--pagination-active-bg)}}@media (hover:none){.m-326d024a:where([data-active]):active{background-color:var(--pagination-active-bg)}}[dir=rtl] .m-326d024a>svg{transform:rotate(180deg)}.m-4ad7767d{align-items:center;display:flex;height:var(--pagination-control-size);justify-content:center;min-width:var(--pagination-control-size);pointer-events:none}.m-f61ca620{--psi-button-size-xs:calc(1.375rem*var(--mantine-scale));--psi-button-size-sm:calc(1.625rem*var(--mantine-scale));--psi-button-size-md:calc(1.75rem*var(--mantine-scale));--psi-button-size-lg:calc(2rem*var(--mantine-scale));--psi-button-size-xl:calc(2.5rem*var(--mantine-scale));--psi-icon-size-xs:calc(0.75rem*var(--mantine-scale));--psi-icon-size-sm:calc(0.9375rem*var(--mantine-scale));--psi-icon-size-md:calc(1.0625rem*var(--mantine-scale));--psi-icon-size-lg:calc(1.1875rem*var(--mantine-scale));--psi-icon-size-xl:calc(1.3125rem*var(--mantine-scale));--psi-button-size:var(--psi-button-size-sm);--psi-icon-size:var(--psi-icon-size-sm)}.m-ccf8da4c{overflow:hidden;position:relative}.m-f2d85dd2{background-color:transparent;border:0;color:inherit;font-family:var(--mantine-font-family);font-size:inherit;height:100%;inset:0;line-height:var(--mantine-line-height);outline:0;padding-left:var(--_input-padding-left);padding-right:var(--_input-padding-right);position:absolute;width:100%}.m-ccf8da4c[data-disabled] .m-f2d85dd2,.m-f2d85dd2:disabled{cursor:not-allowed}.m-f2d85dd2::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-b1072d44{height:var(--psi-button-size);min-height:var(--psi-button-size);min-width:var(--psi-button-size);width:var(--psi-button-size)}.m-b1072d44:disabled{display:none}.m-f1cb205a{--pin-input-size-xs:calc(1.875rem*var(--mantine-scale));--pin-input-size-sm:calc(2.25rem*var(--mantine-scale));--pin-input-size-md:calc(2.625rem*var(--mantine-scale));--pin-input-size-lg:calc(3.125rem*var(--mantine-scale));--pin-input-size-xl:calc(3.75rem*var(--mantine-scale));--pin-input-size:var(--pin-input-size-sm)}.m-cb288ead{height:var(--pin-input-size);width:var(--pin-input-size)}@keyframes m-81a374bd{0%{background-position:0 0}to{background-position:calc(2.5rem*var(--mantine-scale)) 0}}.m-db6d6462{--progress-radius:var(--mantine-radius-default);--progress-size:var(--progress-size-md);--progress-size-xs:calc(0.1875rem*var(--mantine-scale));--progress-size-sm:calc(0.3125rem*var(--mantine-scale));--progress-size-md:calc(0.5rem*var(--mantine-scale));--progress-size-lg:calc(0.75rem*var(--mantine-scale));--progress-size-xl:calc(1rem*var(--mantine-scale));border-radius:var(--progress-radius);display:flex;height:var(--progress-size);overflow:hidden;position:relative}:where([data-mantine-color-scheme=light]) .m-db6d6462{background-color:var(--mantine-color-gray-2)}:where([data-mantine-color-scheme=dark]) .m-db6d6462{background-color:var(--mantine-color-dark-4)}.m-2242eb65{align-items:center;background-color:var(--progress-section-color);background-size:calc(1.25rem*var(--mantine-scale)) calc(1.25rem*var(--mantine-scale));display:flex;height:100%;justify-content:center;overflow:hidden;transition:width var(--progress-transition-duration,.1s) ease;width:var(--progress-section-width)}.m-2242eb65:where([data-striped]){background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.m-2242eb65:where([data-animated]){animation:m-81a374bd 1s linear infinite}.m-2242eb65:where(:last-of-type){border-radius:0 var(--progress-radius) var(--progress-radius) 0}:where([dir=rtl]) .m-2242eb65:where(:last-of-type){border-radius:var(--progress-radius) 0 0 var(--progress-radius)}.m-2242eb65:where(:first-of-type){border-radius:var(--progress-radius) 0 0 var(--progress-radius)}:where([dir=rtl]) .m-2242eb65:where(:first-of-type){border-radius:0 var(--progress-radius) var(--progress-radius) 0}.m-91e40b74{color:var(--progress-label-color,var(--mantine-color-white));font-size:min(calc(var(--progress-size)*.65),calc(1.125rem*var(--mantine-scale)));font-weight:700;line-height:1;overflow:hidden;padding-left:calc(.25rem*var(--mantine-scale));padding-right:calc(.25rem*var(--mantine-scale));text-overflow:ellipsis;user-select:none;white-space:nowrap}.m-f3f1af94{--radio-size-xs:calc(1rem*var(--mantine-scale));--radio-size-sm:calc(1.25rem*var(--mantine-scale));--radio-size-md:calc(1.5rem*var(--mantine-scale));--radio-size-lg:calc(1.875rem*var(--mantine-scale));--radio-size-xl:calc(2.25rem*var(--mantine-scale));--radio-size:var(--radio-size-sm);--radio-icon-size-xs:calc(0.375rem*var(--mantine-scale));--radio-icon-size-sm:calc(0.5rem*var(--mantine-scale));--radio-icon-size-md:calc(0.625rem*var(--mantine-scale));--radio-icon-size-lg:calc(0.875rem*var(--mantine-scale));--radio-icon-size-xl:calc(1rem*var(--mantine-scale));--radio-icon-size:var(--radio-icon-size-sm);--radio-icon-color:var(--mantine-color-white)}.m-89c4f5e4{height:var(--radio-size);order:var(--_radio-order,1);position:relative;width:var(--radio-size)}.m-89c4f5e4[data-label-position=left]{--_radio-order:2}.m-f3ed6b2b{color:var(--_radio-icon-color,var(--radio-icon-color));height:var(--radio-icon-size);left:calc(50% - var(--radio-icon-size)/2);opacity:var(--_radio-icon-opacity,0);pointer-events:none;position:absolute;top:calc(50% - var(--radio-icon-size)/2);transform:var(--_radio-icon-transform,scale(.2) translateY(calc(.625rem*var(--mantine-scale))));transition:opacity .1s ease,transform .2s ease;width:var(--radio-icon-size)}.m-8a3dbb89{-webkit-tap-highlight-color:transparent;align-items:center;appearance:none;background-color:var(--_radio-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_radio-bd-color);border-radius:var(--radio-radius,var(--radio-size));cursor:var(--_cursor,var(--mantine-cursor-type));display:flex;height:var(--radio-size);justify-content:center;margin:0;position:relative;transition-duration:.1s;transition-property:background-color,border-color;transition-timing-function:ease;width:var(--radio-size)}[data-mantine-color-scheme=light] .m-8a3dbb89{--_radio-bg:var(--mantine-color-white);--_radio-bd-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-8a3dbb89{--_radio-bg:var(--mantine-color-dark-6);--_radio-bd-color:var(--mantine-color-dark-4)}.m-8a3dbb89:checked{--_radio-bg:var(--radio-color,var(--mantine-primary-color-filled));--_radio-bd-color:var(--radio-color,var(--mantine-primary-color-filled))}.m-8a3dbb89:checked+.m-f3ed6b2b{--_radio-icon-opacity:1;--_radio-icon-transform:scale(1)}.m-8a3dbb89:disabled{--_cursor:not-allowed}[data-mantine-color-scheme=light] .m-8a3dbb89:disabled{--_radio-bg:var(--mantine-color-gray-1);--_radio-bd-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=light] .m-8a3dbb89:disabled+.m-f3ed6b2b{--_radio-icon-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-8a3dbb89:disabled{--_radio-bg:var(--mantine-color-dark-5);--_radio-bd-color:var(--mantine-color-dark-4)}[data-mantine-color-scheme=dark] .m-8a3dbb89:disabled+.m-f3ed6b2b{--_radio-icon-color:var(--mantine-color-dark-7)}.m-8a3dbb89[data-error]{--_radio-bd-color:var(--mantine-color-error)}.m-1bfe9d39+.m-f3ed6b2b{--_radio-icon-color:var(--radio-color)}[data-mantine-color-scheme] .m-1bfe9d39:checked:not(:disabled){--_radio-bg:transparent;--_radio-bd-color:var(--radio-color)}[data-mantine-color-scheme] .m-1bfe9d39:checked:not(:disabled)+.m-f3ed6b2b{--_radio-icon-color:var(--radio-color);--_radio-icon-opacity:1;--_radio-icon-transform:none}.m-f8d312f2{--rating-size-xs:calc(0.875rem*var(--mantine-scale));--rating-size-sm:calc(1.125rem*var(--mantine-scale));--rating-size-md:calc(1.25rem*var(--mantine-scale));--rating-size-lg:calc(1.75rem*var(--mantine-scale));--rating-size-xl:calc(2rem*var(--mantine-scale));display:flex;width:max-content}.m-f8d312f2:where(:has(input:disabled)){pointer-events:none}.m-61734bb7{position:relative;transition:transform .1s ease}.m-61734bb7:where([data-active]){transform:scale(1.1);z-index:1}.m-5662a89a{display:block;height:var(--rating-size);width:var(--rating-size)}:where([data-mantine-color-scheme=light]) .m-5662a89a{fill:var(--mantine-color-gray-3);stroke:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-5662a89a{fill:var(--mantine-color-dark-3);stroke:var(--mantine-color-dark-3)}.m-5662a89a:where([data-filled]){fill:var(--rating-color);stroke:var(--rating-color)}.m-211007ba{-webkit-tap-highlight-color:transparent;height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.m-211007ba:focus-visible+label{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-21342ee4{-webkit-tap-highlight-color:transparent;cursor:pointer;display:block;left:0;position:absolute;top:0;z-index:var(--rating-item-z-index,0)}.m-21342ee4:where([data-read-only]){cursor:default}.m-21342ee4:where(:last-of-type){position:relative}.m-fae05d6a{clip-path:var(--rating-symbol-clip-path)}.m-1b3c8819{--tooltip-radius:var(--mantine-radius-default);border-radius:var(--tooltip-radius);font-size:var(--mantine-font-size-sm);padding:calc(var(--mantine-spacing-xs)/2) var(--mantine-spacing-xs);pointer-events:none;position:absolute;white-space:nowrap}:where([data-mantine-color-scheme=light]) .m-1b3c8819{background-color:var(--tooltip-bg,var(--mantine-color-gray-9));color:var(--tooltip-color,var(--mantine-color-white))}:where([data-mantine-color-scheme=dark]) .m-1b3c8819{background-color:var(--tooltip-bg,var(--mantine-color-gray-2));color:var(--tooltip-color,var(--mantine-color-black))}.m-1b3c8819:where([data-multiline]){white-space:normal}.m-f898399f{background-color:inherit;border:0;z-index:1}.m-b32e4812{position:relative}.m-b32e4812,.m-d43b5134{height:var(--rp-size);min-height:var(--rp-size);min-width:var(--rp-size);width:var(--rp-size)}.m-d43b5134{transform:rotate(-90deg)}.m-b1ca1fbf{stroke:var(--curve-color,var(--rp-curve-root-color))}[data-mantine-color-scheme=light] .m-b1ca1fbf{--rp-curve-root-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-b1ca1fbf{--rp-curve-root-color:var(--mantine-color-dark-4)}.m-b23f9dc4{left:var(--rp-label-offset);position:absolute;right:var(--rp-label-offset);top:50%;transform:translateY(-50%)}.m-cf365364{--sc-padding-xs:calc(0.1875rem*var(--mantine-scale)) calc(0.375rem*var(--mantine-scale));--sc-padding-sm:calc(0.3125rem*var(--mantine-scale)) calc(0.625rem*var(--mantine-scale));--sc-padding-md:calc(0.4375rem*var(--mantine-scale)) calc(0.875rem*var(--mantine-scale));--sc-padding-lg:calc(0.5625rem*var(--mantine-scale)) calc(1rem*var(--mantine-scale));--sc-padding-xl:calc(0.75rem*var(--mantine-scale)) calc(1.25rem*var(--mantine-scale));--sc-transition-duration:200ms;--sc-padding:var(--sc-padding-sm);--sc-transition-timing-function:ease;--sc-font-size:var(--mantine-font-size-sm);background-color:var(--_bg);border-radius:var(--sc-radius,var(--mantine-radius-default));display:var(--_display,inline-flex);flex-direction:var(--_flex-direction,row);overflow:hidden;padding:4px;position:relative;width:var(--_width,auto)}.m-cf365364[data-initialization]{--sc-transition-duration:0ms!important}.m-cf365364[data-full-width]{--_display:flex}.m-cf365364[data-orientation=vertical]{--_display:flex;--_flex-direction:column;--_width:max-content}.m-cf365364[data-orientation=vertical][data-full-width]{--_width:auto}[data-mantine-color-scheme=light] .m-cf365364{--_bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-cf365364{--_bg:var(--mantine-color-dark-8)}.m-9e182ccd{background-color:var(--_bg);border-radius:var(--sc-radius,var(--mantine-radius-default));box-shadow:var(--_box-shadow);display:block;height:var(--sc-indicator-height);position:absolute;transform:var(--sc-indicator-transform);transition:transform var(--sc-transition-duration) var(--sc-transition-timing-function),width var(--sc-transition-duration) var(--sc-transition-timing-function);width:var(--sc-indicator-width);z-index:1}[data-mantine-color-scheme=light] .m-9e182ccd{--_box-shadow:var(--sc-shadow,none);--_bg:var(--sc-color,var(--mantine-color-white))}[data-mantine-color-scheme=dark] .m-9e182ccd{--_box-shadow:none;--_bg:var(--sc-color,var(--mantine-color-dark-5))}.m-1738fcb2{-webkit-tap-highlight-color:transparent;border-radius:var(--sc-radius,var(--mantine-radius-default));color:var(--_color);cursor:var(--_cursor,pointer);display:block;font-size:var(--sc-font-size);font-weight:500;outline:var(--_outline,none);overflow:hidden;padding:var(--sc-padding);text-align:center;text-overflow:ellipsis;transition:color var(--sc-transition-duration) var(--sc-transition-timing-function);user-select:none;white-space:nowrap}.m-1738fcb2[data-read-only]{--_cursor:default}.m-1738fcb2[data-disabled],fieldset:disabled .m-1738fcb2{--_cursor:not-allowed}[data-mantine-color-scheme=light] .m-1738fcb2[data-disabled],[data-mantine-color-scheme=light] fieldset:disabled .m-1738fcb2{--_color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-1738fcb2[data-disabled],[data-mantine-color-scheme=dark] fieldset:disabled .m-1738fcb2{--_color:var(--mantine-color-dark-3)}[data-mantine-color-scheme=light] .m-1738fcb2[data-active]{--_color:var(--sc-label-color,var(--mantine-color-black))}[data-mantine-color-scheme=dark] .m-1738fcb2[data-active]{--_color:var(--sc-label-color,var(--mantine-color-white))}@media (hover:hover){[data-mantine-color-scheme=light] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):hover{--_color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):hover{--_color:var(--mantine-color-white)}}@media (hover:none){[data-mantine-color-scheme=light] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):active{--_color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):active{--_color:var(--mantine-color-white)}}@media (hover:hover){[data-mantine-color-scheme=light] fieldset:disabled .m-1738fcb2:hover{--_color:var(--mantine-color-gray-5)!important}[data-mantine-color-scheme=dark] fieldset:disabled .m-1738fcb2:hover{--_color:var(--mantine-color-dark-3)!important}}@media (hover:none){[data-mantine-color-scheme=light] fieldset:disabled .m-1738fcb2:active{--_color:var(--mantine-color-gray-5)!important}[data-mantine-color-scheme=dark] fieldset:disabled .m-1738fcb2:active{--_color:var(--mantine-color-dark-3)!important}}[data-mantine-color-scheme=light] .m-1738fcb2{--_color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1738fcb2{--_color:var(--mantine-color-dark-1)}.m-1714d588{height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.m-1714d588[data-focus-ring=auto]:focus:focus-visible+.m-1738fcb2{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-1714d588[data-focus-ring=always]:focus+.m-1738fcb2{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-69686b9b{flex:1;position:relative;transition:border-color var(--sc-transition-duration) var(--sc-transition-timing-function);z-index:2}.m-cf365364[data-with-items-borders] :where(.m-69686b9b):before{background-color:var(--_separator-color);bottom:0;content:"";left:0;position:absolute;top:0;transition:background-color var(--sc-transition-duration) var(--sc-transition-timing-function);width:calc(.0625rem*var(--mantine-scale))}[dir=rtl] .m-cf365364[data-with-items-borders] :where(.m-69686b9b):before{left:auto;right:0}.m-69686b9b[data-orientation=vertical]:before{bottom:auto;height:calc(.0625rem*var(--mantine-scale));left:0;right:0;top:0;width:auto}[data-mantine-color-scheme=light] .m-69686b9b{--_separator-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-69686b9b{--_separator-color:var(--mantine-color-dark-4)}.m-69686b9b:first-of-type:before,[data-mantine-color-scheme] .m-69686b9b[data-active]+.m-69686b9b:before,[data-mantine-color-scheme] .m-69686b9b[data-active]:before{--_separator-color:transparent}.m-2415a157{display:grid;gap:var(--sg-spacing-y) var(--sg-spacing-x);grid-template-columns:repeat(var(--sg-cols),minmax(0,1fr))}@keyframes m-299c329c{0%,to{opacity:.4}50%{opacity:1}}.m-18320242{border-radius:var(--skeleton-radius,var(--mantine-radius-default));height:var(--skeleton-height,auto);position:relative;transform:translateZ(0);-webkit-transform:translateZ(0);width:var(--skeleton-width,100%)}.m-18320242:where([data-animate]):after{animation:m-299c329c 1.5s linear infinite}.m-18320242:where([data-visible]){overflow:hidden}.m-18320242:where([data-visible]):before{background-color:var(--mantine-color-body);content:"";inset:0;position:absolute;z-index:10}.m-18320242:where([data-visible]):after{content:"";inset:0;position:absolute;z-index:11}:where([data-mantine-color-scheme=light]) .m-18320242:where([data-visible]):after{background-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-18320242:where([data-visible]):after{background-color:var(--mantine-color-dark-4)}.m-dd36362e{--slider-size-xs:calc(0.25rem*var(--mantine-scale));--slider-size-sm:calc(0.375rem*var(--mantine-scale));--slider-size-md:calc(0.5rem*var(--mantine-scale));--slider-size-lg:calc(0.625rem*var(--mantine-scale));--slider-size-xl:calc(0.75rem*var(--mantine-scale));--slider-size:var(--slider-size-md);--slider-radius:calc(62.5rem*var(--mantine-scale));--slider-color:var(--mantine-primary-color-filled);-webkit-tap-highlight-color:transparent;align-items:center;display:flex;flex-direction:column;height:calc(var(--slider-size)*2);outline:none;padding-left:var(--slider-size);padding-right:var(--slider-size);position:relative;touch-action:none}[data-mantine-color-scheme=light] .m-dd36362e{--slider-track-bg:var(--mantine-color-gray-2);--slider-track-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd36362e{--slider-track-bg:var(--mantine-color-dark-4);--slider-track-disabled-bg:var(--mantine-color-dark-3)}.m-c9357328{background-color:var(--_label-bg);border-radius:var(--mantine-radius-sm);color:var(--mantine-color-white);font-size:var(--mantine-font-size-xs);padding:calc(var(--mantine-spacing-xs)/2);pointer-events:none;position:absolute;top:calc(-2.25rem*var(--mantine-scale));touch-action:none;user-select:none;white-space:nowrap}[data-mantine-color-scheme=light] .m-c9357328{--_label-bg:var(--mantine-color-gray-9)}[data-mantine-color-scheme=dark] .m-c9357328{--_label-bg:var(--mantine-color-dark-4)}.m-c9a9a60a{align-items:center;background-color:var(--_thumb-bg);border:calc(.25rem*var(--mantine-scale)) solid var(--_thumb-bd);border-radius:var(--slider-radius);box-shadow:var(--_thumb-box-shadow,none);color:var(--_thumb-bd);cursor:pointer;display:var(--_thumb-display,flex);height:var(--slider-thumb-size);justify-content:center;left:var(--slider-thumb-offset);outline-offset:calc(.125rem*var(--mantine-scale));position:absolute;top:50%;touch-action:none;transform:var(--_thumb-transform,translate(-50%,-50%));transition:box-shadow .1s ease,transform .1s ease;user-select:none;width:var(--slider-thumb-size);z-index:3}[dir=rtl] .m-c9a9a60a{left:auto;right:calc(var(--slider-thumb-offset) - var(--slider-thumb-size))}.m-c9a9a60a[data-disabled],fieldset:disabled .m-c9a9a60a{--_thumb-display:none}.m-c9a9a60a[data-dragging]{--_thumb-transform:translate(-50%,-50%) scale(1.05);--_thumb-box-shadow:var(--mantine-shadow-sm)}[data-mantine-color-scheme=light] .m-c9a9a60a{--_thumb-bd:var(--slider-color);--_thumb-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-c9a9a60a{--_thumb-bd:var(--mantine-color-white);--_thumb-bg:var(--slider-color)}.m-a8645c2{align-items:center;cursor:var(--_track-cursor,pointer);display:flex;height:calc(var(--slider-size)*2);width:100%}.m-a8645c2[data-disabled],fieldset:disabled .m-a8645c2{--_track-cursor:not-allowed}.m-c9ade57f{height:var(--slider-size);position:relative;width:100%}.m-c9ade57f[data-inverted]:not([data-disabled]){--_track-bg:var(--slider-color)}.m-c9ade57f[data-inverted][data-disabled],fieldset:disabled .m-c9ade57f[data-inverted]{--_track-bg:var(--slider-track-disabled-bg)}.m-c9ade57f:before{background-color:var(--_track-bg,var(--slider-track-bg));content:"";left:calc(var(--slider-size)*-1);right:calc(var(--slider-size)*-1);z-index:0}.m-38aeed47,.m-c9ade57f:before{border-radius:var(--slider-radius);bottom:0;position:absolute;top:0}.m-38aeed47{background-color:var(--_bar-bg,var(--slider-color));left:var(--slider-bar-offset);width:var(--slider-bar-width);z-index:1}[dir=rtl] .m-38aeed47{left:auto;right:var(--slider-bar-offset)}.m-38aeed47[data-inverted]{--_bar-bg:var(--slider-track-bg)}.m-38aeed47[data-disabled]:not([data-inverted]),fieldset:disabled .m-38aeed47:not([data-inverted]){--_bar-bg:var(--_bar-disabled-bg)}[data-mantine-color-scheme=light] .m-38aeed47{--_bar-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-38aeed47{--_bar-disabled-bg:var(--mantine-color-dark-3)}.m-b7b0423a{height:0;left:calc(var(--mark-offset) - var(--slider-size)/2);pointer-events:none;position:absolute;top:0;z-index:2}[dir=rtl] .m-b7b0423a{left:unset;right:calc(var(--mark-offset) - var(--slider-size)/2)}.m-dd33bc19{background-color:var(--_mark-bg,var(--mantine-color-white));border:calc(.125rem*var(--mantine-scale)) solid var(--_mark-bd);border-radius:calc(62.5rem*var(--mantine-scale));height:var(--slider-size);pointer-events:none;transform:translateX((calc(var(--slider-size)/-2)));width:var(--slider-size)}[data-mantine-color-scheme] .m-dd33bc19[data-filled]{--_mark-bd:var(--slider-color)}[data-mantine-color-scheme=light] .m-dd33bc19[data-filled][data-disabled]{--_mark-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd33bc19[data-filled][data-disabled]{--_mark-bd:var(--mantine-color-dark-3)}[data-mantine-color-scheme=light] .m-dd33bc19{--_mark-bd:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-dd33bc19{--_mark-bd:var(--mantine-color-dark-4)}.m-68c77a5b{color:var(--_mark-label-color);cursor:pointer;font-size:var(--mantine-font-size-sm);transform:translate(calc(-50% + var(--slider-size)/2),calc(var(--mantine-spacing-xs)/2));user-select:none;white-space:nowrap}[data-mantine-color-scheme=light] .m-68c77a5b{--_mark-label-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-68c77a5b{--_mark-label-color:var(--mantine-color-dark-2)}.m-559cce2d{margin-bottom:var(--_spoiler-margin-bottom);position:relative}.m-559cce2d[data-has-spoiler]{--_spoiler-margin-bottom:calc(1.5rem*var(--mantine-scale))}.m-b912df4e{display:flex;flex-direction:column;overflow:hidden;transition:max-height var(--spoiler-transition-duration,.2s) ease}.m-b9131032{height:calc(1.5rem*var(--mantine-scale));left:0;position:absolute;top:100%}[dir=rtl] .m-b9131032{left:auto;right:0}.m-6d731127{align-items:var(--stack-align,stretch);display:flex;flex-direction:column;gap:var(--stack-gap,var(--mantine-spacing-md));justify-content:var(--stack-justify,flex-start)}.m-cbb4ea7e{--stepper-icon-size-xs:calc(2.125rem*var(--mantine-scale));--stepper-icon-size-sm:calc(2.25rem*var(--mantine-scale));--stepper-icon-size-md:calc(2.625rem*var(--mantine-scale));--stepper-icon-size-lg:calc(3rem*var(--mantine-scale));--stepper-icon-size-xl:calc(3.25rem*var(--mantine-scale));--stepper-icon-size:var(--stepper-icon-size-md);--stepper-color:var(--mantine-primary-color-filled);--stepper-content-padding:var(--mantine-spacing-md);--stepper-spacing:var(--mantine-spacing-md);--stepper-radius:calc(62.5rem*var(--mantine-scale));--stepper-fz:var(--mantine-font-size-md)}.m-aaf89d0b{align-items:var(--_steps-align-items,center);display:flex;flex-direction:var(--_steps-direction);flex-wrap:var(--_steps-wrap,nowrap);gap:var(--_steps-gap)}.m-aaf89d0b[data-wrap]{--_steps-wrap:wrap;--_steps-gap:var(--mantine-spacing-md) 0}.m-aaf89d0b[data-orientation=vertical]{--_steps-direction:column}.m-aaf89d0b[data-orientation=vertical][data-icon-position=left]{--_steps-align-items:flex-start}.m-aaf89d0b[data-orientation=vertical][data-icon-position=right]{--_steps-align-items:flex-end}.m-aaf89d0b[data-orientation=horizontal]{--_steps-direction:row}.m-2a371ac9{--_separator-offset:calc(var(--stepper-icon-size)/2 - 0.0625rem*var(--mantine-scale));background-color:var(--_separator-bg);flex:1;height:var(--_separator-height);margin:var(--_separator-mt) var(--_separator-mr) var(--_separator-mb) var(--_separator-ml);transition:background-color .15s ease;width:var(--_separator-width)}[data-mantine-color-scheme=light] .m-2a371ac9{--_separator-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2a371ac9{--_separator-bg:var(--mantine-color-dark-2)}.m-2a371ac9[data-active]{--_separator-bg:var(--stepper-color)}.m-2a371ac9[data-orientation=horizontal]{--_separator-height:calc(0.125rem*var(--mantine-scale));--_separator-ml:var(--mantine-spacing-md);--_separator-mr:var(--mantine-spacing-md);--_separator-mt:0;--_separator-mb:0}.m-2a371ac9[data-orientation=vertical]{--_separator-width:calc(0.125rem*var(--mantine-scale));--_separator-mt:calc(var(--mantine-spacing-xs)/2);--_separator-mb:calc(var(--mantine-spacing-xs) - 0.125rem*var(--mantine-scale))}.m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-2a371ac9[data-orientation=vertical][data-icon-position=right],[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:0;--_separator-mr:var(--_separator-offset)}[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=right]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-78da155d{padding-top:var(--stepper-content-padding)}.m-cbb57068{--_step-color:var(--step-color,var(--stepper-color));cursor:var(--_step-cursor,default);display:flex;flex-direction:var(--_step-direction)}.m-cbb57068[data-allow-click]{--_step-cursor:pointer}.m-cbb57068[data-icon-position=left]{--_step-direction:row}.m-cbb57068[data-icon-position=right]{--_step-direction:row-reverse}.m-f56b1e2c{align-items:center;flex-direction:var(--_step-direction)}.m-833edb7e{--_separator-spacing:calc(var(--mantine-spacing-xs)/2);justify-content:flex-start;margin-top:var(--_step-mt,var(--_separator-spacing));min-height:calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--_separator-spacing));overflow:hidden}.m-833edb7e:first-of-type{--_step-mt:0}.m-833edb7e:last-of-type .m-6496b3f3{display:none}.m-818e70b{position:relative}.m-6496b3f3{border-left:calc(.125rem*var(--mantine-scale)) solid var(--_separator-border-color);height:100vh;left:calc(var(--stepper-icon-size)/2);position:absolute;top:calc(var(--stepper-icon-size) + var(--_separator-spacing))}[data-mantine-color-scheme=light] .m-6496b3f3{--_separator-border-color:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-6496b3f3{--_separator-border-color:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-6496b3f3[data-active]{--_separator-border-color:var(--stepper-color)}.m-1959ad01{align-items:center;background-color:var(--_step-icon-bg);border:calc(.125rem*var(--mantine-scale)) solid var(--_step-icon-border-color);border-radius:var(--stepper-radius);color:var(--_step-icon-color);display:flex;font-size:var(--stepper-fz);font-weight:700;height:var(--stepper-icon-size);justify-content:center;min-height:var(--stepper-icon-size);min-width:var(--stepper-icon-size);position:relative;transition:background-color .15s ease,border-color .15s ease;width:var(--stepper-icon-size)}[data-mantine-color-scheme=light] .m-1959ad01{--_step-icon-bg:var(--mantine-color-gray-1);--_step-icon-border-color:var(--mantine-color-gray-1);--_step-icon-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1959ad01{--_step-icon-bg:var(--mantine-color-dark-5);--_step-icon-border-color:var(--mantine-color-dark-5);--_step-icon-color:var(--mantine-color-dark-1)}[data-mantine-color-scheme] .m-1959ad01[data-progress]{--_step-icon-border-color:var(--_step-color)}[data-mantine-color-scheme] .m-1959ad01[data-completed]{--_step-icon-color:var(--stepper-icon-color,var(--mantine-color-white));--_step-icon-bg:var(--_step-color);--_step-icon-border-color:var(--_step-color)}.m-a79331dc{align-items:center;color:var(--stepper-icon-color,var(--mantine-color-white));display:flex;inset:0;justify-content:center;position:absolute}.m-1956aa2a{display:flex;flex-direction:column;margin-left:var(--_step-body-ml);margin-right:var(--_step-body-mr);margin-top:var(--_step-body-mt);text-align:var(--_step-body-ta)}.m-1956aa2a[data-icon-position=left]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=left]{--_step-body-ta:right;--_step-body-ml:0;--_step-body-mr:var(--mantine-spacing-sm)}.m-1956aa2a[data-icon-position=right]{--_step-body-ta:right;--_step-body-mr:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=right]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm);--_step-body-mr:0}.m-12051f6c{font-size:var(--stepper-fz);font-weight:500;line-height:1}.m-164eea74{color:var(--mantine-color-dimmed);font-size:calc(var(--stepper-fz) - .125rem*var(--mantine-scale));line-height:1;margin-bottom:calc(var(--stepper-spacing)/3);margin-top:calc(var(--stepper-spacing)/3)}.m-5f93f3bb{--switch-height-xs:calc(1rem*var(--mantine-scale));--switch-height-sm:calc(1.25rem*var(--mantine-scale));--switch-height-md:calc(1.5rem*var(--mantine-scale));--switch-height-lg:calc(1.875rem*var(--mantine-scale));--switch-height-xl:calc(2.25rem*var(--mantine-scale));--switch-width-xs:calc(2rem*var(--mantine-scale));--switch-width-sm:calc(2.375rem*var(--mantine-scale));--switch-width-md:calc(2.875rem*var(--mantine-scale));--switch-width-lg:calc(3.5rem*var(--mantine-scale));--switch-width-xl:calc(4.5rem*var(--mantine-scale));--switch-thumb-size-xs:calc(0.75rem*var(--mantine-scale));--switch-thumb-size-sm:calc(0.875rem*var(--mantine-scale));--switch-thumb-size-md:calc(1.125rem*var(--mantine-scale));--switch-thumb-size-lg:calc(1.375rem*var(--mantine-scale));--switch-thumb-size-xl:calc(1.75rem*var(--mantine-scale));--switch-label-font-size-xs:calc(0.3125rem*var(--mantine-scale));--switch-label-font-size-sm:calc(0.375rem*var(--mantine-scale));--switch-label-font-size-md:calc(0.4375rem*var(--mantine-scale));--switch-label-font-size-lg:calc(0.5625rem*var(--mantine-scale));--switch-label-font-size-xl:calc(0.6875rem*var(--mantine-scale));--switch-track-label-padding-xs:calc(0.0625rem*var(--mantine-scale));--switch-track-label-padding-sm:calc(0.125rem*var(--mantine-scale));--switch-track-label-padding-md:calc(0.125rem*var(--mantine-scale));--switch-track-label-padding-lg:calc(0.1875rem*var(--mantine-scale));--switch-track-label-padding-xl:calc(0.1875rem*var(--mantine-scale));--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-radius:calc(62.5rem*var(--mantine-scale));--switch-color:var(--mantine-primary-color-filled);position:relative}.m-926b4011{height:0;opacity:0;padding:0;position:absolute;white-space:nowrap;width:0}.m-926b4011,.m-9307d992{margin:0;overflow:hidden}.m-9307d992{-webkit-tap-highlight-color:transparent;align-items:center;appearance:none;background-color:var(--_switch-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_switch-bd);border-radius:var(--switch-radius);color:var(--_switch-color);cursor:var(--_switch-cursor,var(--mantine-cursor-type));display:flex;font-size:var(--switch-label-font-size);font-weight:600;height:var(--switch-height);line-height:0;min-width:var(--switch-width);order:var(--_switch-order,1);position:relative;transition:background-color .15s ease,border-color .15s ease;user-select:none;z-index:0}.m-926b4011:focus-visible+.m-9307d992{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-926b4011:checked+.m-9307d992{--_switch-bg:var(--switch-color);--_switch-bd:var(--switch-color);--_switch-color:var(--mantine-color-white)}.m-926b4011:disabled+.m-9307d992,.m-926b4011[data-disabled]+.m-9307d992{--_switch-bg:var(--_switch-disabled-color);--_switch-bd:var(--_switch-disabled-color);--_switch-cursor:not-allowed}[data-mantine-color-scheme=light] .m-9307d992{--_switch-bg:var(--mantine-color-gray-2);--_switch-bd:var(--mantine-color-gray-3);--_switch-color:var(--mantine-color-gray-6);--_switch-disabled-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-9307d992{--_switch-bg:var(--mantine-color-dark-6);--_switch-bd:var(--mantine-color-dark-4);--_switch-color:var(--mantine-color-dark-1);--_switch-disabled-color:var(--mantine-color-dark-4)}.m-9307d992[data-error]{--_switch-bd:var(--mantine-color-error)}.m-9307d992[data-label-position=left]{--_switch-order:2}.m-93039a1d{background-color:var(--_switch-thumb-bg,var(--mantine-color-white));border:calc(.0625rem*var(--mantine-scale)) solid var(--_switch-thumb-bd);border-radius:var(--switch-radius);display:flex;height:var(--switch-thumb-size);left:var(--_switch-thumb-left,var(--switch-track-label-padding));position:absolute;transition:left .15s ease;width:var(--switch-thumb-size);z-index:1}[dir=rtl] .m-93039a1d{left:unset;right:var(--_switch-thumb-left,var(--switch-track-label-padding));transition:right .15s ease}.m-93039a1d>*{margin:auto}.m-926b4011:checked+*>.m-93039a1d{--_switch-thumb-left:calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));--_switch-thumb-bd:var(--mantine-color-white)}.m-926b4011:disabled+*>.m-93039a1d,.m-926b4011[data-disabled]+*>.m-93039a1d{--_switch-thumb-bd:var(--_switch-thumb-bg-disabled);--_switch-thumb-bg:var(--_switch-thumb-bg-disabled)}[data-mantine-color-scheme=light] .m-93039a1d{--_switch-thumb-bd:var(--mantine-color-gray-3);--_switch-thumb-bg-disabled:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-93039a1d{--_switch-thumb-bd:var(--mantine-color-white);--_switch-thumb-bg-disabled:var(--mantine-color-dark-3)}.m-8277e082{display:grid;height:100%;margin:0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding));min-width:calc(var(--switch-width) - var(--switch-thumb-size));padding-inline:var(--switch-track-label-padding);place-content:center;transition:margin .15s ease}.m-926b4011:checked+*>.m-8277e082,[dir=rtl] .m-8277e082{margin:0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding)) 0 0}[dir=rtl] .m-926b4011:checked+*>.m-8277e082{margin:0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding))}.m-b23fa0ef{border:var(--_table-border,none);border-collapse:collapse;caption-side:var(--table-caption-side,bottom);font-size:var(--mantine-font-size-sm);line-height:var(--mantine-line-height);table-layout:var(--table-layout,auto);width:100%}[data-mantine-color-scheme=light] .m-b23fa0ef{--_table-hover-color:var(--table-highlight-on-hover-color,var(--mantine-color-gray-1));--_table-striped-color:var(--table-striped-color,var(--mantine-color-gray-0));--_table-border-color:var(--table-border-color,var(--mantine-color-gray-3))}[data-mantine-color-scheme=dark] .m-b23fa0ef{--_table-hover-color:var(--table-highlight-on-hover-color,var(--mantine-color-dark-5));--_table-striped-color:var(--table-striped-color,var(--mantine-color-dark-6));--_table-border-color:var(--table-border-color,var(--mantine-color-dark-4))}.m-b23fa0ef[data-with-table-border]{--_table-border:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color)}.m-4e7aa4f3{text-align:var(--_th-text-align,left)}[dir=rtl] .m-4e7aa4f3{--_th-text-align:right}.m-4e7aa4fd{background-color:var(--_tr-bg,transparent);border-bottom:var(--_tr-border-bottom,none)}@media (hover:hover){[data-mantine-color-scheme] .m-4e7aa4fd:hover[data-hover]{--_tr-bg:var(--_tr-hover-bg)!important}}@media (hover:none){[data-mantine-color-scheme] .m-4e7aa4fd:active[data-hover]{--_tr-bg:var(--_tr-hover-bg)!important}}.m-4e7aa4fd[data-with-row-border]{--_tr-border-bottom:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color)}.m-4e7aa4ef,.m-4e7aa4f3{--_border-right:none;--_border-left:none;border-left:var(--_border-left);border-right:var(--_border-right);padding:var(--table-vertical-spacing) var(--table-horizontal-spacing,var(--mantine-spacing-xs))}.m-4e7aa4ef[data-with-column-border]:not(:last-child),.m-4e7aa4f3[data-with-column-border]:not(:last-child){--_border-right:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color)}[dir=rtl] .m-4e7aa4ef[data-with-column-border]:not(:last-child),[dir=rtl] .m-4e7aa4f3[data-with-column-border]:not(:last-child){--_border-left:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color);--_border-right:none}.m-b2404537>.m-4e7aa4fd:last-of-type[data-with-row-border]{--_tr-border-bottom:none}.m-b2404537>.m-4e7aa4fd[data-striped=even]:nth-of-type(2n),.m-b2404537>.m-4e7aa4fd[data-striped=odd]:nth-of-type(odd){--_tr-bg:var(--_table-striped-color)}.m-b2404537>.m-4e7aa4fd[data-hover]{--_tr-hover-bg:var(--_table-hover-color)}.m-b242d975{background-color:var(--_thead-bg,transparent);position:var(--_thead-position,static);top:var(--table-sticky-header-offset,0);z-index:1}.m-b242d975[data-sticky]{--_thead-position:sticky;--_thead-bg:var(--mantine-color-body)}.m-9e5a3ac7{color:var(--mantine-color-dimmed);margin-bottom:var(--_margin-bottom,0);margin-top:var(--_margin-top,0)}.m-9e5a3ac7[data-side=top]{--_margin-bottom:var(--mantine-spacing-xs)}.m-9e5a3ac7[data-side=bottom]{--_margin-top:var(--mantine-spacing-xs)}.m-a100c15{overflow-x:var(--table-overflow)}.m-62259741{min-width:var(--table-min-width)}.m-89d60db1{--_tab-justify:flex-start;--_list-direction:row;--_panel-grow:unset;--_tabs-display:block;--_tabs-flex-direction:row;--_list-border-width:0;--_list-border-size:0 0 var(--_list-border-width) 0;--_list-gap:unset;--_list-line-bottom:0;--_list-line-top:unset;--_list-line-left:0;--_list-line-right:0;--_tab-radius:var(--tabs-radius) var(--tabs-radius) 0 0;--_tab-border-width:0 0 var(--_list-border-width) 0;display:var(--_tabs-display);flex-direction:var(--_tabs-flex-direction)}.m-89d60db1[data-inverted]{--_list-line-bottom:unset;--_list-line-top:0;--_tab-radius:0 0 var(--tabs-radius) var(--tabs-radius);--_tab-border-width:var(--_list-border-width) 0 0 0}.m-89d60db1[data-inverted] .m-576c9d4:before{bottom:unset;top:0}.m-89d60db1[data-orientation=vertical]{--_list-line-left:unset;--_list-line-right:0;--_list-line-top:0;--_list-line-bottom:0;--_list-border-size:0 var(--_list-border-width) 0 0;--_tab-border-width:0 var(--_list-border-width) 0 0;--_tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius);--_list-direction:column;--_panel-grow:1;--_tabs-display:flex}[dir=rtl] .m-89d60db1[data-orientation=vertical]{--_list-line-left:0;--_list-line-right:unset;--_list-border-size:0 0 0 var(--_list-border-width);--_tab-border-width:0 0 0 var(--_list-border-width);--_tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}.m-89d60db1[data-orientation=vertical][data-placement=right]{--_tabs-flex-direction:row-reverse;--_list-line-left:0;--_list-line-right:unset;--_list-border-size:0 0 0 var(--_list-border-width);--_tab-border-width:0 0 0 var(--_list-border-width);--_tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}[dir=rtl] .m-89d60db1[data-orientation=vertical][data-placement=right]{--_list-line-left:unset;--_list-line-right:0;--_list-border-size:0 var(--_list-border-width) 0 0;--_tab-border-width:0 var(--_list-border-width) 0 0;--_tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius)}[data-mantine-color-scheme=light] .m-89d60db1{--_tab-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-89d60db1{--_tab-border-color:var(--mantine-color-dark-4)}.m-89d60db1[data-orientation=horizontal]{--_tab-justify:center}.m-89d60db1[data-variant=default]{--_list-border-width:calc(0.125rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-89d60db1[data-variant=default]{--_tab-hover-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-89d60db1[data-variant=default]{--_tab-hover-color:var(--mantine-color-dark-6)}.m-89d60db1[data-variant=outline]{--_list-border-width:calc(0.0625rem*var(--mantine-scale))}.m-89d60db1[data-variant=pills]{--_list-gap:calc(var(--mantine-spacing-sm)/2)}[data-mantine-color-scheme=light] .m-89d60db1[data-variant=pills]{--_tab-hover-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-89d60db1[data-variant=pills]{--_tab-hover-color:var(--mantine-color-dark-6)}.m-89d33d6d{--_tab-grow:unset;display:flex;flex-direction:var(--_list-direction);flex-wrap:wrap;gap:var(--_list-gap);justify-content:var(--tabs-justify,flex-start)}.m-89d33d6d[data-grow]{--_tab-grow:1}.m-b0c91715{flex-grow:var(--_panel-grow)}.m-4ec4dce6{align-items:center;display:flex;flex-grow:var(--_tab-grow);font-size:var(--mantine-font-size-sm);justify-content:var(--_tab-justify);line-height:1;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);position:relative;user-select:none;white-space:nowrap;z-index:0}.m-4ec4dce6:disabled,.m-4ec4dce6[data-disabled]{cursor:not-allowed;opacity:.5}.m-4ec4dce6:focus{z-index:1}.m-fc420b1f{align-items:center;display:flex;justify-content:center;margin-left:var(--_tab-section-margin-left,0);margin-right:var(--_tab-section-margin-right,0)}.m-fc420b1f[data-position=left]:not(:only-child){--_tab-section-margin-right:var(--mantine-spacing-xs)}[dir=rtl] .m-fc420b1f[data-position=left]:not(:only-child){--_tab-section-margin-right:0rem;--_tab-section-margin-left:var(--mantine-spacing-xs)}.m-fc420b1f[data-position=right]:not(:only-child){--_tab-section-margin-left:var(--mantine-spacing-xs)}[dir=rtl] .m-fc420b1f[data-position=right]:not(:only-child){--_tab-section-margin-left:0rem;--_tab-section-margin-right:var(--mantine-spacing-xs)}.m-576c9d4{position:relative}.m-576c9d4:before{border-color:var(--_tab-border-color);border-style:solid;border-width:var(--_list-border-size);bottom:var(--_list-line-bottom);content:"";left:var(--_list-line-left);position:absolute;right:var(--_list-line-right);top:var(--_list-line-top)}.m-539e827b{--__tab-border-color:transparent;--_tab-bg:transparent;background-color:var(--_tab-bg);border-color:var(--__tab-border-color);border-radius:var(--_tab-radius);border-style:solid;border-width:var(--_tab-border-width)}.m-539e827b[data-active]{--__tab-border-color:var(--tabs-color)}@media (hover:hover){.m-539e827b:hover{--_tab-bg:var(--_tab-hover-color)}.m-539e827b:hover:not([data-active]){--__tab-border-color:var(--_tab-border-color)}}@media (hover:none){.m-539e827b:active{--_tab-bg:var(--_tab-hover-color)}.m-539e827b:active:not([data-active]){--__tab-border-color:var(--_tab-border-color)}}@media (hover:hover){.m-539e827b:disabled:hover,.m-539e827b[data-disabled]:hover{--_tab-bg:transparent}}@media (hover:none){.m-539e827b:disabled:active,.m-539e827b[data-disabled]:active{--_tab-bg:transparent}}.m-6772fbd5{position:relative}.m-6772fbd5:before{border-color:var(--_tab-border-color);border-style:solid;border-width:var(--_list-border-size);bottom:var(--_list-line-bottom);content:"";left:var(--_list-line-left);position:absolute;right:var(--_list-line-right);top:var(--_list-line-top)}.m-b59ab47c{--_tab-border-bottom-color:transparent;--_tab-border-top-color:transparent;--_tab-border-right-color:transparent;--_tab-border-left-color:transparent;border-color:transparent;border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-bottom-color);border-left:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-left-color);border-radius:var(--_tab-radius);border-right:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-right-color);border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-top-color);position:relative}.m-b59ab47c[data-active]:before{bottom:var(--_tab-before-bottom,calc(-.0625rem*var(--mantine-scale)));left:var(--_tab-before-left,calc(-.0625rem*var(--mantine-scale)));right:var(--_tab-before-right,auto);top:var(--_tab-before-top,auto)}.m-b59ab47c[data-active]:after,.m-b59ab47c[data-active]:before{background-color:var(--_tab-border-color);content:"";height:calc(.0625rem*var(--mantine-scale));position:absolute;width:calc(.0625rem*var(--mantine-scale))}.m-b59ab47c[data-active]:after{bottom:var(--_tab-after-bottom,calc(-.0625rem*var(--mantine-scale)));left:var(--_tab-after-left,auto);right:var(--_tab-after-right,calc(-.0625rem*var(--mantine-scale)));top:var(--_tab-after-top,auto)}.m-b59ab47c[data-active]{--_tab-border-top-color:var(--_tab-border-color);--_tab-border-left-color:var(--_tab-border-color);--_tab-border-right-color:var(--_tab-border-color);--_tab-border-bottom-color:var(--mantine-color-body)}.m-b59ab47c[data-active][data-inverted]{--_tab-border-bottom-color:var(--_tab-border-color);--_tab-border-top-color:var(--mantine-color-body);--_tab-before-bottom:auto;--_tab-before-top:calc(-0.0625rem*var(--mantine-scale));--_tab-after-bottom:auto;--_tab-after-top:calc(-0.0625rem*var(--mantine-scale))}.m-b59ab47c[data-active][data-orientation=vertical][data-placement=left]{--_tab-border-right-color:var(--mantine-color-body);--_tab-border-left-color:var(--_tab-border-color);--_tab-border-bottom-color:var(--_tab-border-color);--_tab-before-right:calc(-0.0625rem*var(--mantine-scale));--_tab-before-left:auto;--_tab-before-bottom:auto;--_tab-before-top:calc(-0.0625rem*var(--mantine-scale));--_tab-after-left:auto;--_tab-after-right:calc(-0.0625rem*var(--mantine-scale))}[dir=rtl] .m-b59ab47c[data-active][data-orientation=vertical][data-placement=left]{--_tab-border-right-color:var(--_tab-border-color);--_tab-border-left-color:var(--mantine-color-body);--_tab-before-right:auto;--_tab-before-left:calc(-0.0625rem*var(--mantine-scale));--_tab-after-left:calc(-0.0625rem*var(--mantine-scale));--_tab-after-right:auto}.m-b59ab47c[data-active][data-orientation=vertical][data-placement=right]{--_tab-border-left-color:var(--mantine-color-body);--_tab-border-right-color:var(--_tab-border-color);--_tab-border-bottom-color:var(--_tab-border-color);--_tab-before-left:calc(-0.0625rem*var(--mantine-scale));--_tab-before-right:auto;--_tab-before-bottom:auto;--_tab-before-top:calc(-0.0625rem*var(--mantine-scale));--_tab-after-right:auto;--_tab-after-left:calc(-0.0625rem*var(--mantine-scale))}[dir=rtl] .m-b59ab47c[data-active][data-orientation=vertical][data-placement=right]{--_tab-border-left-color:var(--_tab-border-color);--_tab-border-right-color:var(--mantine-color-body);--_tab-before-left:auto;--_tab-before-right:calc(-0.0625rem*var(--mantine-scale));--_tab-after-right:calc(-0.0625rem*var(--mantine-scale));--_tab-after-left:auto}.m-c3381914{--_tab-bg:transparent;--_tab-color:inherit;background-color:var(--_tab-bg);border-radius:var(--tabs-radius);color:var(--_tab-color)}@media (hover:hover){.m-c3381914:not([data-disabled]):hover{--_tab-bg:var(--_tab-hover-color)}}@media (hover:none){.m-c3381914:not([data-disabled]):active{--_tab-bg:var(--_tab-hover-color)}}.m-c3381914[data-active][data-active]{--_tab-bg:var(--tabs-color);--_tab-color:var(--tabs-text-color,var(--mantine-color-white))}@media (hover:hover){.m-c3381914[data-active][data-active]:hover{--_tab-bg:var(--tabs-color)}}@media (hover:none){.m-c3381914[data-active][data-active]:active{--_tab-bg:var(--tabs-color)}}.m-7341320d{--ti-size-xs:calc(1.125rem*var(--mantine-scale));--ti-size-sm:calc(1.375rem*var(--mantine-scale));--ti-size-md:calc(1.75rem*var(--mantine-scale));--ti-size-lg:calc(2.125rem*var(--mantine-scale));--ti-size-xl:calc(2.75rem*var(--mantine-scale));--ti-size:var(--ti-size-md);align-items:center;background:var(--ti-bg,var(--mantine-primary-color-filled));border:var(--ti-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ti-radius,var(--mantine-radius-default));color:var(--ti-color,var(--mantine-color-white));display:inline-flex;height:var(--ti-size);justify-content:center;line-height:1;min-height:var(--ti-size);min-width:var(--ti-size);position:relative;user-select:none;width:var(--ti-size)}.m-43657ece{--offset:calc(var(--tl-bullet-size)/2 + var(--tl-line-width)/2);--tl-bullet-size:calc(1.25rem*var(--mantine-scale));--tl-line-width:calc(0.25rem*var(--mantine-scale));--tl-radius:calc(62.5rem*var(--mantine-scale));--tl-color:var(--mantine-primary-color-filled);padding-left:var(--_tl-pl,0);padding-right:var(--_tl-pr,0)}.m-43657ece[data-align=left]{--_tl-pl:var(--offset)}[dir=rtl] .m-43657ece[data-align=left]{--_tl-pl:0;--_tl-pr:var(--offset)}.m-43657ece[data-align=right]{--_tl-pr:var(--offset)}[dir=rtl] .m-43657ece[data-align=right]{--_tl-pl:var(--offset);--_tl-pr:0}.m-2ebe8099{font-weight:500;line-height:1;margin-bottom:calc(var(--mantine-spacing-xs)/2)}.m-436178ff{--item-border:var(--tl-line-width) var(--tli-border-style,solid) var(--_item-border-color);color:var(--mantine-color-text);margin-top:var(--_item-mt);padding-left:var(--_item-pl,0);padding-right:var(--_item-pr,0);position:relative;text-align:var(--_item-ta)}.m-436178ff:before{border-left:var(--_line-border-left,var(--item-border));border-right:var(--_line-border-right,0);bottom:calc(var(--mantine-spacing-xl)*-1);content:"";display:var(--_line-display,none);left:var(--_line-left,0);pointer-events:none;position:absolute;right:var(--_line-right,0);top:0}[dir=rtl] .m-436178ff:before{--_line-border-left:0;--_line-border-right:var(--item-border)}.m-43657ece[data-align=left] .m-436178ff:before{--_line-left:calc(var(--tl-line-width)*-1);--_line-right:auto}.m-43657ece[data-align=right] .m-436178ff:before,[dir=rtl] .m-43657ece[data-align=left] .m-436178ff:before{--_line-left:auto;--_line-right:calc(var(--tl-line-width)*-1)}[dir=rtl] .m-43657ece[data-align=right] .m-436178ff:before{--_line-left:calc(var(--tl-line-width)*-1);--_line-right:auto}.m-43657ece[data-align=left] .m-436178ff{--_item-pl:var(--offset);--_item-ta:left}[dir=rtl] .m-43657ece[data-align=left] .m-436178ff{--_item-pl:0;--_item-pr:var(--offset)}.m-43657ece[data-align=right] .m-436178ff{--_item-pr:var(--offset);--_item-ta:right}[dir=rtl] .m-43657ece[data-align=right] .m-436178ff{--_item-pl:var(--offset);--_item-pr:0}[data-mantine-color-scheme=light] .m-436178ff{--_item-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-436178ff{--_item-border-color:var(--mantine-color-dark-4)}[data-mantine-color-scheme] .m-436178ff[data-line-active]:before{border-color:var(--tli-color,var(--tl-color))}.m-436178ff:not(:last-of-type){--_line-display:block}.m-436178ff:not(:first-of-type){--_item-mt:var(--mantine-spacing-xl)}.m-8affcee1{align-items:center;background-color:var(--_bullet-bg-color,var(--mantine-color-body));border:var(--_bullet-border-width,var(--tl-line-width)) solid var(--_bullet-border-color);border-radius:var(--tli-radius,var(--tl-radius));color:var(--_bullet-color,var(--mantine-color-text));display:flex;height:var(--tl-bullet-size);justify-content:center;left:var(--_bullet-left,0);position:absolute;right:var(--_bullet-right,0);top:0;width:var(--tl-bullet-size)}[data-mantine-color-scheme=light] .m-8affcee1{--_bullet-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-8affcee1{--_bullet-border-color:var(--mantine-color-dark-4)}.m-43657ece[data-align=left] .m-8affcee1{--_bullet-left:calc(var(--tl-bullet-size)/2*-1 + var(--tl-line-width)/2*-1);--_bullet-right:auto}.m-43657ece[data-align=right] .m-8affcee1,[dir=rtl] .m-43657ece[data-align=left] .m-8affcee1{--_bullet-left:auto;--_bullet-right:calc(var(--tl-bullet-size)/2*-1 + var(--tl-line-width)/2*-1)}[dir=rtl] .m-43657ece[data-align=right] .m-8affcee1{--_bullet-left:calc(var(--tl-bullet-size)/2*-1 + var(--tl-line-width)/2*-1);--_bullet-right:auto}.m-8affcee1[data-with-child]{--_bullet-border-width:var(--tl-line-width)}[data-mantine-color-scheme=light] .m-8affcee1[data-with-child]{--_bullet-bg-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-8affcee1[data-with-child]{--_bullet-bg-color:var(--mantine-color-dark-4)}.m-8affcee1[data-active]{--_bullet-border-color:var(--tli-color,var(--tl-color));--_bullet-bg-color:var(--mantine-color-white);--_bullet-color:var(--tl-icon-color,var(--mantine-color-white))}.m-8affcee1[data-active][data-with-child]{--_bullet-bg-color:var(--tli-color,var(--tl-color));--_bullet-color:var(--tl-icon-color,var(--mantine-color-white))}.m-540e8f41{padding-left:var(--_body-pl,0);padding-right:var(--_body-pr,0);text-align:var(--_body-ta)}.m-43657ece[data-align=left] .m-540e8f41{--_body-pl:var(--offset);--_body-ta:left}[dir=rtl] .m-43657ece[data-align=left] .m-540e8f41{--_body-pl:0;--_body-pr:var(--offset);--_body-ta:right}.m-43657ece[data-align=right] .m-540e8f41{--_body-pr:var(--offset);--_body-ta:right}[dir=rtl] .m-43657ece[data-align=right] .m-540e8f41{--_body-pl:var(--offset);--_body-pr:0;--_body-ta:left}.m-8a5d1357{text-wrap:var(--title-text-wrap,var(--mantine-heading-text-wrap));font-family:var(--mantine-font-family-headings);font-size:var(--title-fz);font-weight:var(--title-fw);line-height:var(--title-lh);margin:0}.m-8a5d1357:where([data-line-clamp]){-webkit-line-clamp:var(--title-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.m-d6493fad :first-child{margin-top:0}.m-d6493fad :last-child{margin-bottom:0}.m-d6493fad :where(h1,h2,h3,h4,h5,h6){text-wrap:var(--mantine-heading-text-wrap);margin-bottom:var(--mantine-spacing-xs)}.m-d6493fad :where(h1){font-size:var(--mantine-h1-font-size);font-weight:var(--mantine-h1-font-weight);line-height:var(--mantine-h1-line-height);margin-top:calc(var(--mantine-spacing-xl)*1.5)}.m-d6493fad :where(h2){font-size:var(--mantine-h2-font-size);font-weight:var(--mantine-h2-font-weight);line-height:var(--mantine-h2-line-height);margin-top:var(--mantine-spacing-xl)}.m-d6493fad :where(h3){font-size:var(--mantine-h3-font-size);font-weight:var(--mantine-h3-font-weight);line-height:var(--mantine-h3-line-height);margin-top:calc(var(--mantine-spacing-xl)*.8)}.m-d6493fad :where(h4){font-size:var(--mantine-h4-font-size);font-weight:var(--mantine-h4-font-weight);line-height:var(--mantine-h4-line-height);margin-top:calc(var(--mantine-spacing-xl)*.8)}.m-d6493fad :where(h5){font-size:var(--mantine-h5-font-size);font-weight:var(--mantine-h5-font-weight);line-height:var(--mantine-h5-line-height);margin-top:calc(var(--mantine-spacing-xl)*.5)}.m-d6493fad :where(h6){font-size:var(--mantine-h6-font-size);font-weight:var(--mantine-h6-font-weight);line-height:var(--mantine-h6-line-height);margin-top:calc(var(--mantine-spacing-xl)*.5)}.m-d6493fad :where(img){margin-bottom:var(--mantine-spacing-xs);max-width:100%}.m-d6493fad :where(p){margin-bottom:var(--mantine-spacing-lg);margin-top:0}[data-mantine-color-scheme=light] .m-d6493fad :where(mark){background-color:var(--mantine-color-yellow-2);color:inherit}[data-mantine-color-scheme=dark] .m-d6493fad :where(mark){background-color:var(--mantine-color-yellow-5);color:var(--mantine-color-black)}.m-d6493fad :where(a){color:var(--mantine-color-anchor);text-decoration:none}@media (hover:hover){.m-d6493fad :where(a):hover{text-decoration:underline}}@media (hover:none){.m-d6493fad :where(a):active{text-decoration:underline}}.m-d6493fad :where(hr){border:0;border-top:calc(.0625rem*var(--mantine-scale)) solid;margin-bottom:var(--mantine-spacing-md);margin-top:var(--mantine-spacing-md)}[data-mantine-color-scheme=light] .m-d6493fad :where(hr){border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-d6493fad :where(hr){border-color:var(--mantine-color-dark-3)}.m-d6493fad :where(pre){border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);line-height:var(--mantine-line-height);margin:0;margin-bottom:var(--mantine-spacing-md);margin-top:var(--mantine-spacing-md);overflow-x:auto;padding:var(--mantine-spacing-xs)}[data-mantine-color-scheme=light] .m-d6493fad :where(pre){background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d6493fad :where(pre){background-color:var(--mantine-color-dark-8)}.m-d6493fad :where(pre) :where(code){background-color:transparent;border:0;border-radius:0;color:inherit;padding:0}.m-d6493fad :where(kbd){--kbd-fz:calc(0.75rem*var(--mantine-scale));--kbd-padding:calc(0.1875rem*var(--mantine-scale)) calc(0.3125rem*var(--mantine-scale));border:calc(.0625rem*var(--mantine-scale)) solid;border-bottom-width:calc(.1875rem*var(--mantine-scale));border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--kbd-fz);font-weight:700;line-height:var(--mantine-line-height);padding:var(--kbd-padding)}:where([data-mantine-color-scheme=light]) .m-d6493fad :where(kbd){background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3);color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-d6493fad :where(kbd){background-color:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-3);color:var(--mantine-color-dark-0)}.m-d6493fad :where(code){border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);line-height:var(--mantine-line-height);padding:calc(.0625rem*var(--mantine-scale)) calc(.3125rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-d6493fad :where(code){background-color:var(--mantine-color-gray-0);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-d6493fad :where(code){background-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)}.m-d6493fad :where(ul,ol){margin-bottom:var(--mantine-spacing-md);padding-left:calc(2.375rem*var(--mantine-scale))}.m-d6493fad :where(ul,ol) :where(li){margin-bottom:var(--mantine-spacing-xs)}.m-d6493fad :where(table){border-collapse:collapse;caption-side:bottom;margin-bottom:var(--mantine-spacing-md);width:100%}.m-d6493fad :where(table) :where(caption){color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);margin-top:var(--mantine-spacing-xs)}.m-d6493fad :where(table) :where(th){color:var(--mantine-color-gray-7);font-size:var(--mantine-font-size-sm);font-weight:700;padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm);text-align:left}.m-d6493fad :where(table) :where(thead th){border-bottom:calc(.0625rem*var(--mantine-scale)) solid;border-color:var(--mantine-color-gray-3)}.m-d6493fad :where(table) :where(tfoot th){border-top:calc(.0625rem*var(--mantine-scale)) solid;border-color:var(--mantine-color-gray-3)}.m-d6493fad :where(table) :where(td){border-bottom:calc(.0625rem*var(--mantine-scale)) solid;border-color:var(--mantine-color-gray-3);font-size:var(--mantine-font-size-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm)}.m-d6493fad :where(table) :where(tr:last-of-type td){border-bottom:0}.m-d6493fad :where(blockquote){border-radius:var(--mantine-radius-sm);font-size:var(--mantine-font-size-lg);line-height:var(--mantine-line-height);margin:var(--mantine-spacing-md) 0;padding:var(--mantine-spacing-md) var(--mantine-spacing-lg)}:where([data-mantine-color-scheme=light]) .m-d6493fad :where(blockquote){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-d6493fad :where(blockquote){background-color:var(--mantine-color-dark-8)}.m-468e7eda{appearance:none;padding-bottom:0;padding-top:0}.m-468e7eda::-webkit-calendar-picker-indicator,.m-468e7eda::-webkit-clear-button{display:none}.m-468e7eda::-webkit-datetime-edit-hour-field,.m-468e7eda::-webkit-datetime-edit-minute-field,.m-468e7eda::-webkit-datetime-edit-second-field{display:inline;max-height:calc(1.875rem*var(--mantine-scale));padding-top:0}.m-468e7eda::-webkit-datetime-edit-hour-field:focus,.m-468e7eda::-webkit-datetime-edit-minute-field:focus,.m-468e7eda::-webkit-datetime-edit-second-field:focus{background-color:var(--mantine-primary-color-filled);color:var(--mantine-color-white)}.m-396ce5cb{--day-size-xs:calc(1.875rem*var(--mantine-scale));--day-size-sm:calc(2.25rem*var(--mantine-scale));--day-size-md:calc(2.625rem*var(--mantine-scale));--day-size-lg:calc(3rem*var(--mantine-scale));--day-size-xl:calc(3.375rem*var(--mantine-scale));--day-size:var(--day-size-sm);align-items:center;background-color:var(--_day-bg,transparent);border-radius:var(--_day-radius,var(--mantine-radius-default));color:var(--_day-color,var(--mantine-color-text));cursor:var(--_day-cursor,pointer);display:var(--_day-display,inline-flex);font-size:calc(var(--day-size)/2.8);height:var(--day-size,calc(2.25rem*var(--mantine-scale)));justify-content:center;opacity:var(--_day-opacity,1);user-select:var(--_day-user-select,none);width:var(--day-size,calc(2.25rem*var(--mantine-scale)))}@media (hover:hover){[data-mantine-color-scheme=light] .m-396ce5cb:hover:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-396ce5cb:hover:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-396ce5cb:active:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-396ce5cb:active:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-dark-5)}}.m-396ce5cb[data-static]{--_day-user-select:auto;--_day-cursor:default}.m-396ce5cb[data-weekend]{--_day-color:var(--mantine-color-red-6)}.m-396ce5cb[data-outside]{--_day-color:var(--mantine-color-dimmed);--_day-opacity:0.5}.m-396ce5cb:disabled,.m-396ce5cb[data-disabled]{--_day-color:var(--mantine-color-dimmed);--_day-cursor:not-allowed;--_day-opacity:0.5}.m-396ce5cb[data-hidden]{--_day-display:none}.m-396ce5cb[data-in-range]{--_day-bg:var(--mantine-primary-color-light-hover);--_day-radius:0}@media (hover:hover){[data-mantine-color-scheme] .m-396ce5cb[data-in-range]:hover:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-light)}}@media (hover:none){[data-mantine-color-scheme] .m-396ce5cb[data-in-range]:active:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-light)}}.m-396ce5cb[data-first-in-range]{--_day-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-396ce5cb[data-last-in-range],[dir=rtl] .m-396ce5cb[data-first-in-range]{--_day-radius:0 var(--mantine-radius-default) var(--mantine-radius-default) 0}[dir=rtl] .m-396ce5cb[data-last-in-range]{--_day-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-396ce5cb[data-last-in-range][data-first-in-range]{--_day-radius:var(--mantine-radius-default)}.m-396ce5cb[data-selected]{--_day-bg:var(--mantine-primary-color-filled);--_day-color:var(--mantine-primary-color-contrast)}@media (hover:hover){[data-mantine-color-scheme] .m-396ce5cb[data-selected]:hover:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-filled-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-396ce5cb[data-selected]:active:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-filled-hover)}}.m-18a3eca{color:var(--mantine-color-dimmed);font-size:var(--wr-fz,var(--mantine-font-size-sm));font-weight:400;padding-bottom:calc(var(--wr-spacing, var(--mantine-spacing-sm))/2);text-transform:capitalize}.m-cc9820d3{border-collapse:collapse;table-layout:fixed}.m-8f457cd5{padding:var(--_month-cell-padding,0)}.m-8f457cd5[data-with-spacing]{--_month-cell-padding:calc(0.03125rem*var(--mantine-scale))}.m-dc6a3c71{--dpc-size-xs:calc(1.875rem*var(--mantine-scale));--dpc-size-sm:calc(2.25rem*var(--mantine-scale));--dpc-size-md:calc(2.625rem*var(--mantine-scale));--dpc-size-lg:calc(3rem*var(--mantine-scale));--dpc-size-xl:calc(3.375rem*var(--mantine-scale));--dpc-size:var(--dpc-size-sm);align-items:center;background-color:var(--_control-bg,transparent);border-radius:var(--_control-radius,var(--mantine-radius-default));color:var(--_control-color,var(--mantine-color-text));cursor:var(--_control-cursor,pointer);display:flex;font-size:var(--dpc-fz,var(--mantine-font-size-sm));height:var(--dpc-size);justify-content:center;opacity:var(--_control-opacity,1);user-select:none;width:calc((var(--dpc-size)*7)/3 + .09375rem*var(--mantine-scale))}@media (hover:hover){[data-mantine-color-scheme=light] .m-dc6a3c71:hover:not([data-disabled]){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-dc6a3c71:hover:not([data-disabled]){--_control-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-dc6a3c71:active:not([data-disabled]){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-dc6a3c71:active:not([data-disabled]){--_control-bg:var(--mantine-color-dark-5)}}.m-dc6a3c71:disabled,.m-dc6a3c71[data-disabled]{--_control-color:var(--mantine-color-dimmed);--_control-cursor:not-allowed;--_control-opacity:0.5}.m-dc6a3c71[data-selected]{--_control-bg:var(--mantine-primary-color-filled);--_control-color:var(--mantine-primary-color-contrast,var(--mantine-color-white))}@media (hover:hover){[data-mantine-color-scheme] .m-dc6a3c71[data-selected]:hover{--_control-bg:var(--mantine-primary-color-filled-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-dc6a3c71[data-selected]:active{--_control-bg:var(--mantine-primary-color-filled-hover)}}.m-dc6a3c71[data-in-range]{--_control-bg:var(--mantine-primary-color-light-hover);--_control-radius:0}@media (hover:hover){[data-mantine-color-scheme] .m-dc6a3c71[data-in-range]:hover{--_control-bg:var(--mantine-primary-color-light)}}@media (hover:none){[data-mantine-color-scheme] .m-dc6a3c71[data-in-range]:active{--_control-bg:var(--mantine-primary-color-light)}}.m-dc6a3c71[data-first-in-range]{--_control-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-dc6a3c71[data-last-in-range],[dir=rtl] .m-dc6a3c71[data-first-in-range]{--_control-radius:0 var(--mantine-radius-default) var(--mantine-radius-default) 0}[dir=rtl] .m-dc6a3c71[data-last-in-range]{--_control-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-dc6a3c71[data-first-in-range][data-last-in-range]{--_control-radius:var(--mantine-radius-default)}.m-9206547b{border-collapse:collapse;border-width:0}.m-c5a19c7d{padding:var(--_cell-padding,0)}.m-c5a19c7d[data-with-spacing]{--_cell-padding:calc(0.03125rem*var(--mantine-scale))}.m-2a6c32d{border-collapse:collapse;border-width:0;cursor:pointer}.m-fe27622f{padding:var(--_cell-padding,0)}.m-fe27622f[data-with-spacing]{--_cell-padding:calc(0.03125rem*var(--mantine-scale))}.m-730a79ed{--dch-control-size-xs:calc(1.875rem*var(--mantine-scale));--dch-control-size-sm:calc(2.25rem*var(--mantine-scale));--dch-control-size-md:calc(2.625rem*var(--mantine-scale));--dch-control-size-lg:calc(3rem*var(--mantine-scale));--dch-control-size-xl:calc(3.375rem*var(--mantine-scale));--dch-control-size:var(--dch-control-size-sm);display:flex;margin-bottom:var(--mantine-spacing-xs);max-width:calc(var(--dch-control-size)*7 + .4375rem*var(--mantine-scale))}.m-2351eeb0,.m-f6645d97{align-items:center;background-color:var(--_control-bg);border-radius:var(--mantine-radius-default);cursor:var(--_control-cursor,pointer);display:flex;height:var(--dch-control-size);justify-content:center;opacity:var(--_control-opacity,1);user-select:none}@media (hover:hover){[data-mantine-color-scheme=light] .m-2351eeb0:hover:not([data-disabled],:disabled),[data-mantine-color-scheme=light] .m-f6645d97:hover:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-2351eeb0:hover:not([data-disabled],:disabled),[data-mantine-color-scheme=dark] .m-f6645d97:hover:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-2351eeb0:active:not([data-disabled],:disabled),[data-mantine-color-scheme=light] .m-f6645d97:active:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-2351eeb0:active:not([data-disabled],:disabled),[data-mantine-color-scheme=dark] .m-f6645d97:active:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-dark-5)}}.m-2351eeb0:disabled,.m-2351eeb0[data-disabled],.m-f6645d97:disabled,.m-f6645d97[data-disabled]{--_control-opacity:0.2;--_control-cursor:not-allowed}.m-2351eeb0{width:var(--dch-control-size)}.m-f6645d97{flex:1;font-size:var(--dch-fz,var(--mantine-font-size-sm));font-weight:500;text-transform:capitalize}.m-367dc749{height:60%;transform:var(--_chevron-transform);width:60%}.m-367dc749[data-direction=next]{--_chevron-transform:rotate(270deg)}.m-367dc749[data-direction=previous],[dir=rtl] .m-367dc749[data-direction=next]{--_chevron-transform:rotate(90deg)}[dir=rtl] .m-367dc749[data-direction=previous]{--_chevron-transform:rotate(270deg)}.m-30b26e33{display:flex;gap:var(--mantine-spacing-md)}.m-6fa5e2aa{cursor:var(--_cursor,pointer);line-height:unset}.m-6fa5e2aa[data-read-only]{--_cursor:default}.m-208d2562{align-items:stretch;display:flex;margin-top:var(--mantine-spacing-md)}.m-62ee059{flex:1;margin-left:var(--_ml,0);margin-right:var(--_mr,var(--mantine-spacing-md))}[dir=rtl] .m-62ee059{--_mr:0;--_ml:var(--mantine-spacing-md)}.m-b37d9ac7{bottom:var(--notifications-bottom);left:var(--notifications-left);max-width:var(--notifications-container-width);position:fixed;right:var(--notifications-right);top:var(--notifications-top);transform:var(--notifications-transform);width:calc(100% - var(--mantine-spacing-md)*2);z-index:var(--notifications-z-index)}.m-5ed0edd0+.m-5ed0edd0{margin-top:var(--mantine-spacing-md)}.m-5caae6d3{border-radius:var(--mantine-radius-xs);display:inline-block;font-family:var(--mantine-font-family-monospace);font-size:calc(.8125rem*var(--mantine-scale));line-height:var(--_code-line-height,var(--mantine-line-height));padding:calc(.0625rem*var(--mantine-scale)) calc(.1875rem*var(--mantine-scale))}.m-2c47c4fd{--_code-line-height:1.7;display:block;margin:0;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-e58679f3{align-items:flex-start;display:flex;justify-content:space-between}.m-be7e9c9c{display:flex;margin-right:calc(.4375rem*var(--mantine-scale));margin-top:calc(.4375rem*var(--mantine-scale))}.m-5caae85b,.m-d498bab7{background-color:transparent;color:var(--mantine-color-dimmed);margin:0;opacity:.8}@media (hover:hover){.m-5caae85b:hover,.m-d498bab7:hover{opacity:1}}@media (hover:none){.m-5caae85b:active,.m-d498bab7:active{opacity:1}}@media (max-width:40em){.m-5caae85b,.m-d498bab7{display:none}}.m-5caae85b{position:absolute;right:calc(.3125rem*var(--mantine-scale));top:calc(.3125rem*var(--mantine-scale));z-index:1}.m-5cac2e62{align-items:center;background-color:var(--_file-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_file-bd);border-left:0;border-top:0;color:var(--_file-color);cursor:var(--_file-cursor);display:flex;font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);font-weight:700;gap:calc(.4375rem*var(--mantine-scale));justify-content:center;line-height:1;margin:0;opacity:var(--_file-opacity);padding:calc(.4375rem*var(--mantine-scale)) calc(.75rem*var(--mantine-scale));user-select:none;white-space:nowrap}@media (hover:hover){.m-5cac2e62:hover{--_file-opacity:1}}@media (hover:none){.m-5cac2e62:active{--_file-opacity:1}}.m-5cac2e62:last-of-type{border-bottom-right-radius:var(--mantine-radius-sm)}.m-5cac2e62:only-child{--_file-cursor:default}.m-5cac2e62[data-active]{--_file-opacity:1;--_file-color:var(--_file-active-color)!important;--_file-bg:var(--_file-active-bg)}.m-5cac2e62{--_file-opacity:0.8;--_file-cursor:pointer}[data-mantine-color-scheme=light] .m-5cac2e62{--_file-color:var(--mantine-color-gray-8);--_file-bd:var(--mantine-color-gray-2);--_file-active-bg:var(--mantine-color-white);--_file-active-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-5cac2e62{--_file-color:var(--mantine-color-dark-0);--_file-bd:var(--mantine-color-dark-4);--_file-active-bg:var(--mantine-color-dark-6);--_file-active-color:var(--mantine-color-white)}.m-38d99e51{display:flex}.m-9f507240{max-height:var(--ch-max-collapsed-height);overflow:hidden;position:relative}.m-9f507240:before{background-image:linear-gradient(0deg,var(--_background) 16%,transparent 100%);border-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));content:"";inset:0;pointer-events:none;position:absolute;z-index:100}.m-9f507240[data-expanded]{max-height:none}.m-9f507240[data-expanded]:before{display:none}.m-c9378bc2{bottom:0;color:var(--mantine-color-anchor);font-size:var(--mantine-font-size-sm);left:50%;padding-bottom:var(--mantine-spacing-xs);padding-top:var(--mantine-spacing-xs);position:absolute;text-align:center;transform:translateX(-50%);width:100%;z-index:101}.m-c9378bc2[data-hidden]{display:none}.m-5cb1b9c8{margin-top:0;position:relative}.m-5cb1b9c8[data-collapsed] .mantine-ScrollArea-viewport>div{display:block!important}.m-b46cddfb{align-items:center;display:flex;flex:0;justify-content:center}.m-b46cddfb>svg{display:block}.m-1f5e827e{background:var(--_background);color:var(--_color)}[data-mantine-color-scheme=light] .m-1f5e827e{--_color:var(--mantine-color-gray-7);--_background:var(--mantine-color-gray-0);--code-comment-color:var(--mantine-color-gray-6);--code-keyword-color:var(--mantine-color-violet-8);--code-tag-color:var(--mantine-color-red-9);--code-literal-color:var(--mantine-color-blue-6);--code-string-color:var(--mantine-color-blue-9);--code-variable-color:var(--mantine-color-lime-9);--code-class-color:var(--mantine-color-orange-9)}[data-mantine-color-scheme=dark] .m-1f5e827e{--_color:var(--mantine-color-dark-1);--_background:var(--mantine-color-dark-8);--code-comment-color:var(--mantine-color-dark-3);--code-keyword-color:var(--mantine-color-violet-3);--code-tag-color:var(--mantine-color-yellow-4);--code-literal-color:var(--mantine-color-blue-4);--code-string-color:var(--mantine-color-green-6);--code-variable-color:var(--mantine-color-blue-2);--code-class-color:var(--mantine-color-orange-5)}.m-1f5e827e .hljs-comment,.m-1f5e827e .hljs-quote{color:var(--code-comment-color);font-style:italic}.m-1f5e827e .hljs-doctag,.m-1f5e827e .hljs-formula,.m-1f5e827e .hljs-keyword{color:var(--code-keyword-color)}.m-1f5e827e .hljs-deletion,.m-1f5e827e .hljs-name,.m-1f5e827e .hljs-section,.m-1f5e827e .hljs-selector-tag,.m-1f5e827e .hljs-subst{color:var(--code-tag-color)}.m-1f5e827e .hljs-literal{color:var(--code-literal-color)}.m-1f5e827e .hljs-addition,.m-1f5e827e .hljs-attribute,.m-1f5e827e .hljs-meta .hljs-string,.m-1f5e827e .hljs-regexp,.m-1f5e827e .hljs-string{color:var(--code-string-color)}.m-1f5e827e .hljs-attr,.m-1f5e827e .hljs-number,.m-1f5e827e .hljs-selector-attr,.m-1f5e827e .hljs-selector-class,.m-1f5e827e .hljs-selector-pseudo,.m-1f5e827e .hljs-template-variable,.m-1f5e827e .hljs-type,.m-1f5e827e .hljs-variable{color:var(--code-variable-color)}.m-1f5e827e .hljs-built_in,.m-1f5e827e .hljs-bullet,.m-1f5e827e .hljs-class .hljs-title,.m-1f5e827e .hljs-link,.m-1f5e827e .hljs-meta,.m-1f5e827e .hljs-selector-id,.m-1f5e827e .hljs-symbol,.m-1f5e827e .hljs-title,.m-1f5e827e .hljs-title.class_{color:var(--code-class-color)}.m-1f5e827e .hljs-emphasis{font-style:italic}.m-1f5e827e .hljs-strong{font-weight:700}.m-1f5e827e .hljs-link{text-decoration:underline}.m-d46a4834{background-color:var(--_dropzone-bg);border:calc(.0625rem*var(--mantine-scale)) dashed var(--_dropzone-border-color);border-radius:var(--dropzone-radius);color:var(--_dropzone-color,var(--mantine-color-text));cursor:var(--_dropzone-cursor,pointer);padding:var(--mantine-spacing-md);position:relative;transition:background-color .1s ease,border-color .1s ease;user-select:none}.m-d46a4834:not([data-activate-on-click]),.m-d46a4834[data-loading]{--_dropzone-cursor:default}[data-mantine-color-scheme=light] .m-d46a4834{--_dropzone-bg:var(--mantine-color-white);--_dropzone-border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-d46a4834{--_dropzone-bg:var(--mantine-color-dark-6);--_dropzone-border-color:var(--mantine-color-dark-4)}@media (hover:hover){[data-mantine-color-scheme=light] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}.m-d46a4834[data-accept]{--_dropzone-bg:var(--dropzone-accept-bg);--_dropzone-border-color:var(--dropzone-accept-bg);--_dropzone-color:var(--dropzone-accept-color)}.m-d46a4834[data-reject]{--_dropzone-bg:var(--dropzone-reject-bg);--_dropzone-border-color:var(--dropzone-reject-bg);--_dropzone-color:var(--dropzone-reject-color)}.m-b85f7144{pointer-events:var(--_dropzone-inner-pointer-events,none);user-select:none}.m-b85f7144[data-enable-pointer-events]{--_dropzone-inner-pointer-events:all}.m-96f6e9ad{background-color:var(--mantine-color-body);display:flex;flex-direction:column;inset:0;padding:var(--mantine-spacing-xs);position:fixed;transition:opacity .1s ease}.m-96f6e9ad .m-7946116d{flex:1}.m-8f2832ae{background-color:transparent;left:0;opacity:var(--_nprogress-opacity,0);overflow:visible;position:fixed;right:0;top:0;transition:opacity .15s ease;transition-delay:50ms;z-index:var(--nprogress-z-index)}.m-8f2832ae[data-mounted]{--_nprogress-opacity:1}.m-7a0fe999{overflow:visible;position:relative;transition:width .15s ease}.m-7a0fe999:before{box-shadow:0 0 10px var(--progress-section-color),0 0 5px var(--progress-section-color);content:"";height:var(--progress-size);position:absolute;right:1px;top:0;transform:rotate(4deg) translateY(-4px);width:calc(6.25rem*var(--mantine-scale))}.m-d2b315db[data-scrollable]{--_spotlight-content-height:100%}.m-3cd250e0{max-height:var(--spotlight-max-height);overflow:hidden}.m-3cd250e0,.m-d2abce9b{height:var(--_spotlight-content-height,auto)}.m-d2abce9b{display:flex;flex-direction:column}.m-f366a061{background-color:transparent;border:0}.m-6e463822{--spotlight-actions-list-padding:calc(0.25rem*var(--mantine-scale));border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_actions-list-border);flex:1;margin-left:var(--_actions-list-ml,0);margin-right:var(--_actions-list-mr,calc(var(--spotlight-actions-list-padding)*-1));max-height:calc(100% - 3.125rem*var(--mantine-scale));padding:var(--spotlight-actions-list-padding)}[dir=rtl] .m-6e463822{--_actions-list-mr:0;--_actions-list-ml:calc(var(--spotlight-actions-list-padding)*-1)}[data-mantine-color-scheme=light] .m-6e463822{--_actions-list-border:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-6e463822{--_actions-list-border:var(--mantine-color-dark-4)}.m-d49bb8ef{align-items:center;background-color:var(--_action-bg,transparent);border-radius:var(--mantine-radius-default);color:var(--_action-color,inherit);display:flex;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-md);text-align:var(--_action-text-align,left);width:100%}[dir=rtl] .m-d49bb8ef{--_action-text-align:right}@media (hover:hover){[data-mantine-color-scheme=light] .m-d49bb8ef:not([data-selected]):hover{--_action-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d49bb8ef:not([data-selected]):hover{--_action-bg:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d49bb8ef:not([data-selected]):active{--_action-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d49bb8ef:not([data-selected]):active{--_action-bg:var(--mantine-color-dark-6)}}.m-d49bb8ef[data-selected]{--_action-bg:var(--mantine-primary-color-filled);--_action-color:var(--mantine-primary-color-contrast,var(--mantine-color-white));--_action-description-color:var(--mantine-primary-color-contrast,var(--mantine-color-white));--_action-description-opacity:0.7}.m-3d475731{flex:1}.m-832642f6{color:var(--_action-section-color,inherit);margin-left:var(--_action-section-ml);margin-right:var(--_action-section-mr);opacity:var(--_action-section-opacity,1)}.m-832642f6[data-dimmed]{--_action-section-opacity:var(--_action-description-opacity,1);--_action-section-color:var(--_action-description-color,var(--mantine-color-dimmed))}.m-832642f6[data-position=left]{--_action-section-mr:var(--mantine-spacing-md)}.m-832642f6[data-position=right]{--_action-section-ml:var(--mantine-spacing-md)}[dir=rtl] .m-832642f6[data-position=left]{--_action-section-mr:unset;--_action-section-ml:var(--mantine-spacing-md)}[dir=rtl] .m-832642f6[data-position=right]{--_action-section-ml:unset;--_action-section-mr:var(--mantine-spacing-md)}.m-6c2a1345,.m-832642f6>svg,.m-a6d9d78d{display:block}.m-a6d9d78d{color:var(--_action-description-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);opacity:var(--_action-description-opacity,1)}.m-82f78f74{color:var(--mantine-color-dimmed);padding:var(--mantine-spacing-md);text-align:center}.m-ddcaf054{border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_footer-border);padding:var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + .25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-ddcaf054{--_footer-border:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-ddcaf054{--_footer-border:var(--mantine-color-dark-4)}.m-5a3e5f7b{display:var(--_display,flex);flex-direction:column;margin-top:var(--mantine-spacing-md)}.m-5a3e5f7b:before{color:var(--mantine-color-dimmed);content:var(--spotlight-label);font-size:var(--mantine-font-size-xs);font-weight:700;padding-left:var(--_actions-group-pl,var(--mantine-spacing-md));padding-right:var(--_actions-group-pr,0);text-transform:uppercase}[dir=rtl] .m-5a3e5f7b{--_actions-group-pl:0;--_actions-group-pr:var(--mantine-spacing-md)}.m-5a3e5f7b:empty{--_display:none}.m-17884d0f{position:relative}.m-a2dae653{overflow:hidden}.m-a2dae653,.m-fcd81474{height:var(--carousel-height,auto)}.m-fcd81474{display:flex;flex-direction:var(--_container-direction,row);margin-bottom:var(--_container-mb);margin-left:var(--_container-ml);margin-right:var(--_container-mr)}[data-include-gap-in-size] .m-fcd81474[data-orientation=vertical]{--_container-mb:calc(var(--carousel-slide-gap)*-1)}[data-include-gap-in-size] .m-fcd81474[data-orientation=horizontal]{--_container-mr:calc(var(--carousel-slide-gap)*-1)}[dir=rtl] [data-include-gap-in-size] .m-fcd81474[data-orientation=horizontal]{--_container-ml:calc(var(--carousel-slide-gap)*-1);--_container-mr:0}.m-fcd81474[data-orientation=vertical]{--_container-direction:column}.m-39bc3463{align-items:center;bottom:var(--_controls-bottom);display:flex;flex-direction:var(--_controls-direction);justify-content:space-between;left:var(--_controls-left);padding:var(--_controls-padding);pointer-events:none;position:absolute;right:var(--_controls-right);top:var(--_controls-top);z-index:1}.m-17884d0f[data-orientation=vertical] .m-39bc3463{--_controls-left:calc(50% - var(--carousel-control-size)/2);--_controls-top:0;--_controls-bottom:0;--_controls-direction:column;--_controls-padding:var(--carousel-controls-offset) 0}.m-17884d0f[data-orientation=horizontal] .m-39bc3463{--_controls-left:0;--_controls-right:0;--_controls-top:calc(50% - var(--carousel-control-size)/2);--_controls-direction:row;--_controls-padding:0 var(--carousel-controls-offset)}.m-64f58e10{align-items:center;background-color:var(--mantine-color-white);border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3);border-radius:var(--carousel-control-size);box-shadow:var(--mantine-shadow-md);color:var(--mantine-color-black);display:flex;justify-content:center;min-height:var(--carousel-control-size);min-width:var(--carousel-control-size);opacity:var(--_control-opacity);pointer-events:all;transition:opacity .1s ease}[data-mantine-color-scheme=light] .m-64f58e10{--_control-opacity:0.85}[data-mantine-color-scheme=dark] .m-64f58e10{--_control-opacity:0.65}@media (hover:hover){.m-64f58e10:hover{--_control-opacity:1}}@media (hover:none){.m-64f58e10:active{--_control-opacity:1}}.m-71ea3ab1{bottom:var(--_indicators-bottom);display:flex;flex-direction:var(--_indicators-direction);gap:calc(.5rem*var(--mantine-scale));justify-content:center;left:var(--_indicators-left);pointer-events:none;position:absolute;right:var(--_indicators-right);top:var(--_indicators-top)}.m-17884d0f[data-orientation=vertical] .m-71ea3ab1{--_indicators-bottom:0;--_indicators-top:0;--_indicators-right:var(--mantine-spacing-md);--_indicators-direction:column}.m-17884d0f[data-orientation=horizontal] .m-71ea3ab1{--_indicators-bottom:var(--mantine-spacing-md);--_indicators-left:0;--_indicators-right:0;--_indicators-direction:row}.m-eae68602{background-color:var(--mantine-color-white);border-radius:var(--mantine-radius-xl);box-shadow:var(--mantine-shadow-sm);height:var(--_indicator-height);opacity:var(--_indicator-opacity,.6);pointer-events:all;width:var(--_indicator-width)}@media (hover:hover){.m-eae68602:hover{--_indicator-opacity:1}}@media (hover:none){.m-eae68602:active{--_indicator-opacity:1}}.m-eae68602[data-active]{--_indicator-opacity:1}.m-17884d0f[data-orientation=vertical] .m-eae68602{--_indicator-width:calc(0.3125rem*var(--mantine-scale));--_indicator-height:calc(1.5625rem*var(--mantine-scale))}.m-17884d0f[data-orientation=horizontal] .m-eae68602{--_indicator-width:calc(1.5625rem*var(--mantine-scale));--_indicator-height:calc(0.3125rem*var(--mantine-scale))}.m-d98df724{flex:0 0 var(--carousel-slide-size);margin-bottom:var(--_slide-mb,0);margin-left:var(--_slide-ml,0);margin-right:var(--_slide-mr,0);padding-bottom:var(--_slide-pb,0);padding-left:var(--_slide-pl,0);padding-right:var(--_slide-pr,0);position:relative}.m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation=vertical]{--_slide-pb:var(--carousel-slide-gap)}.m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation=horizontal]{--_slide-pr:var(--carousel-slide-gap)}[dir=rtl] .m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation=horizontal]{--_slide-pl:var(--carousel-slide-gap);--_slide-pr:0}.m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation=vertical]{--_slide-mb:var(--carousel-slide-gap)}.m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation=horizontal]{--_slide-mr:var(--carousel-slide-gap)}[dir=rtl] .m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation=horizontal]{--_slide-ml:var(--carousel-slide-gap);--_slide-mr:0}.m-dd3f7539{border:calc(.0625rem*var(--mantine-scale)) solid var(--_root-bd);border-radius:var(--mantine-radius-default);position:relative}[data-mantine-color-scheme=light] .m-dd3f7539{--_root-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd3f7539{--_root-bd:var(--mantine-color-dark-4)}.m-d37966d9{margin:0;padding:0}.m-d37966d9 li>p{margin:0}.m-d37966d9 ol li,.m-d37966d9 ul li{margin-top:calc(.125rem*var(--mantine-scale))}.m-d37966d9 p{margin-bottom:calc(.4375rem*var(--mantine-scale))}.m-d37966d9 h1,.m-d37966d9 h2,.m-d37966d9 h3,.m-d37966d9 h4,.m-d37966d9 h5,.m-d37966d9 h6,.m-d37966d9 p{margin-top:0}.m-c2204cc2{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default)}.m-c2204cc2 .ProseMirror{outline:0;padding:var(--mantine-spacing-md)}.m-c2204cc2 .ProseMirror>:last-child{margin-bottom:0}.m-c2204cc2 .ProseMirror p.is-editor-empty:first-of-type:before{color:var(--mantine-color-placeholder);content:attr(data-placeholder);float:left;height:0;pointer-events:none;user-select:none}.m-c2204cc2 pre{background-color:var(--_code-bg);border-radius:var(--mantine-radius-default);color:var(--_code-color);font-family:var(--mantine-font-family-monospace);padding:var(--mantine-spacing-md) var(--mantine-spacing-xl)}.m-c2204cc2 pre code{background:none!important;color:inherit;font-size:var(--mantine-font-size-sm);padding:0}.m-c2204cc2 pre .hljs-comment,.m-c2204cc2 pre .hljs-quote{color:var(--_code-color-comment)}.m-c2204cc2 pre .hljs-attribute,.m-c2204cc2 pre .hljs-link,.m-c2204cc2 pre .hljs-name,.m-c2204cc2 pre .hljs-regexp,.m-c2204cc2 pre .hljs-selector-class,.m-c2204cc2 pre .hljs-selector-id,.m-c2204cc2 pre .hljs-tag,.m-c2204cc2 pre .hljs-template-variable,.m-c2204cc2 pre .hljs-variable{color:var(--_code-color-var)}.m-c2204cc2 pre .hljs-built_in,.m-c2204cc2 pre .hljs-builtin-name,.m-c2204cc2 pre .hljs-literal,.m-c2204cc2 pre .hljs-meta,.m-c2204cc2 pre .hljs-number,.m-c2204cc2 pre .hljs-params,.m-c2204cc2 pre .hljs-type{color:var(--_code-color-number)}.m-c2204cc2 pre .hljs-bullet,.m-c2204cc2 pre .hljs-string,.m-c2204cc2 pre .hljs-symbol{color:var(--_code-color-var)}.m-c2204cc2 pre .hljs-section,.m-c2204cc2 pre .hljs-title{color:var(--_code-color-title)}.m-c2204cc2 pre .hljs-keyword,.m-c2204cc2 pre .hljs-selector-tag{color:var(--_code-color-keyword)}.m-c2204cc2 pre .hljs-emphasis{font-style:italic}.m-c2204cc2 pre .hljs-strong{font-weight:700}[data-mantine-color-scheme=light] .m-c2204cc2{--_code-bg:var(--mantine-color-gray-0);--_code-color:var(--mantine-color-gray-9);--_code-color-comment:var(--mantine-color-gray-5);--_code-color-var:var(--mantine-color-red-7);--_code-color-number:var(--mantine-color-blue-7);--_code-color-title:var(--mantine-color-pink-7);--_code-color-keyword:var(--mantine-color-violet-7)}[data-mantine-color-scheme=dark] .m-c2204cc2{--_code-bg:var(--mantine-color-dark-8);--_code-color:var(--mantine-color-dark-1);--_code-color-comment:var(--mantine-color-dark-2);--_code-color-var:var(--mantine-color-red-5);--_code-color-number:var(--mantine-color-cyan-5);--_code-color-title:var(--mantine-color-yellow-5);--_code-color-keyword:var(--mantine-color-violet-3)}.m-8a991b4f{background-color:var(--mantine-color-body)}.m-c2207da6{align-items:center;background-color:var(--_control-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_control-bd);border-radius:var(--mantine-radius-default);color:var(--_control-color);cursor:var(--_control-cursor,default);display:flex;height:calc(1.625rem*var(--mantine-scale));justify-content:center;min-width:calc(1.625rem*var(--mantine-scale))}.m-c2207da6:where([data-disabled]){cursor:not-allowed}:where([data-mantine-color-scheme=light]) .m-c2207da6:where([data-disabled]){background-color:var(--mantine-color-gray-1);color:var(--mantine-color-gray-5)}:where([data-mantine-color-scheme=dark]) .m-c2207da6:where([data-disabled]){background-color:var(--mantine-color-dark-5);color:var(--mantine-color-dark-3)}.m-c2207da6[data-interactive]{--_control-cursor:pointer}@media (hover:hover){[data-mantine-color-scheme=light] .m-c2207da6[data-interactive]:hover{--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-c2207da6[data-interactive]:hover{--_control-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-c2207da6[data-interactive]:active{--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-c2207da6[data-interactive]:active{--_control-bg:var(--mantine-color-dark-5)}}[data-mantine-color-scheme] .m-c2207da6[data-active]{--_control-bg:var(--mantine-primary-color-light);--_control-color:var(--mantine-primary-color-light-color)}@media (hover:hover){[data-mantine-color-scheme] .m-c2207da6[data-active]:hover{--_control-bg:var(--mantine-primary-color-light-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-c2207da6[data-active]:active{--_control-bg:var(--mantine-primary-color-light-hover)}}[data-mantine-color-scheme=light] .m-c2207da6{--_control-bg:var(--mantine-color-white);--_control-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-c2207da6{--_control-bg:var(--mantine-color-dark-6);--_control-bd:var(--mantine-color-dark-4)}.m-2ab47ef2{background-color:var(--mantine-color-body);display:flex}.m-2ab47ef2 [data-rich-text-editor-control]{border-radius:0}.m-2ab47ef2 [data-rich-text-editor-control]:not(:last-of-type){border-right-width:0}[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:not(:last-of-type){border-left-width:0;border-right-width:calc(.0625rem*var(--mantine-scale))}.m-2ab47ef2 [data-rich-text-editor-control]:last-of-type{border-bottom-right-radius:var(--mantine-radius-default);border-top-right-radius:var(--mantine-radius-default)}[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:last-of-type{border-bottom-right-radius:0;border-top-right-radius:0}.m-2ab47ef2 [data-rich-text-editor-control]:first-of-type,[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:last-of-type{border-bottom-left-radius:var(--mantine-radius-default);border-top-left-radius:var(--mantine-radius-default)}[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:first-of-type{border-bottom-left-radius:0;border-bottom-right-radius:var(--mantine-radius-default);border-top-left-radius:0;border-top-right-radius:var(--mantine-radius-default)}.m-b67b711e{display:flex}.m-296cf94c{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.m-cfef614{align-items:center;background-color:var(--_control-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_control-bd);border-radius:var(--mantine-radius-default);color:var(--_control-color,var(--mantine-color-text));display:flex;height:calc(1.5rem*var(--mantine-scale));justify-content:center;width:calc(1.5rem*var(--mantine-scale))}[data-mantine-color-scheme] .m-cfef614[data-active]{--_control-bg:var(--mantine-primary-color-light);--_control-color:var(--mantine-primary-color-filled)}@media (hover:hover){[data-mantine-color-scheme] .m-cfef614[data-active]:hover{--_control-bg:var(--mantine-primary-color-light-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-cfef614[data-active]:active{--_control-bg:var(--mantine-primary-color-light-hover)}}[data-mantine-color-scheme=light] .m-cfef614{--_control-bg:var(--mantine-color-white);--_control-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-cfef614{--_control-bg:var(--mantine-color-dark-7);--_control-bd:var(--mantine-color-dark-4)}.m-3b28e7bb{border-bottom-left-radius:0;border-top-left-radius:0}.m-4574a3c4{background-color:var(--mantine-color-body);border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_toolbar-bd);border-top-left-radius:var(--mantine-radius-default);border-top-right-radius:var(--mantine-radius-default);display:flex;flex-wrap:wrap;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);position:var(--_toolbar-position,static);top:var(--rte-sticky-offset,0);z-index:1}[data-mantine-color-scheme=light] .m-4574a3c4{--_toolbar-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-4574a3c4{--_toolbar-bd:var(--mantine-color-dark-4)}.m-4574a3c4[data-sticky]{--_toolbar-position:sticky}.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}.m-a3c6e060{border-top-left-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));border-top-right-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));flex:1;padding:var(--_demo-spacing,0)}.m-a3c6e060[data-with-padding]{--_demo-spacing:var(--mantine-spacing-md)}.m-a3c6e060[data-dimmed]{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-a3c6e060[data-dimmed]{background-color:var(--mantine-color-dark-8)}.m-a3c6e060[data-centered]{align-items:center;display:flex;justify-content:center}.m-a3c6e060[data-striped]{background:repeating-linear-gradient(45deg,transparent 0,transparent calc(.625rem*var(--mantine-scale)),var(--stripe-color) calc(.625rem*var(--mantine-scale)),var(--stripe-color) 12px),repeating-linear-gradient(135deg,transparent 0,transparent calc(.625rem*var(--mantine-scale)),var(--stripe-color) calc(.625rem*var(--mantine-scale)),var(--stripe-color) calc(.75rem*var(--mantine-scale)));border-top-left-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale))}[dir=rtl] .m-a3c6e060[data-striped]{border-top-left-radius:0;border-top-right-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-a3c6e060[data-striped]{--stripe-color:rgba(0,0,0,.03)}[data-mantine-color-scheme=dark] .m-a3c6e060[data-striped]{--stripe-color:hsla(0,0%,100%,.03)}.m-ad8eb9d6{flex:var(--demo-flex);margin-left:var(--demo-margin-y,unset);margin-right:var(--demo-margin-y,unset);max-width:var(--demo-max-width,100%);min-height:var(--demo-min-height,unset)}.m-66990f0a{border-bottom-left-radius:var(--mantine-radius-md);border-bottom-right-radius:var(--mantine-radius-md);border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);overflow:hidden}.m-761fa02a{border:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);border-radius:var(--mantine-radius-md)}[data-mantine-color-scheme=light] .m-761fa02a{--_demo-border:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-761fa02a{--_demo-border:var(--mantine-color-dark-5)}.m-df4e856a{display:flex}@media (max-width:55em){.m-df4e856a{flex-direction:column}}.m-de00ac9{border-left:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);flex:0 0 calc(15.625rem*var(--mantine-scale));padding:calc(.25rem*var(--mantine-scale));padding-bottom:var(--mantine-spacing-xs)}[dir=rtl] .m-de00ac9{border-left:none;border-right:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border)}@media (max-width:55em){.m-de00ac9{border-left:none;border-right:none!important;border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);flex:unset}}.m-c4d78f60{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);margin-bottom:var(--mantine-spacing-xs);margin-left:calc(-.25rem*var(--mantine-scale));margin-right:calc(-.25rem*var(--mantine-scale));padding:calc(var(--mantine-spacing-md) - .25rem*var(--mantine-scale)) var(--mantine-spacing-md) var(--mantine-spacing-xs)}.m-5e1a038c{align-items:center;color:var(--mantine-color-white);cursor:pointer;display:flex;flex:1 0 calc(15% - 0.25rem*var(--mantine-scale));justify-content:center}.m-f9decbb8{height:calc(.75rem*var(--mantine-scale));width:calc(.75rem*var(--mantine-scale))}.m-2f5f7bca{align-items:center;border:calc(.0625rem*var(--mantine-scale)) solid var(--_control-border-color);border-radius:var(--mantine-radius-sm);cursor:pointer;display:flex;flex:1 0 calc(15% - 0.25rem*var(--mantine-scale));height:calc(1.75rem*var(--mantine-scale));justify-content:center}[data-mantine-color-scheme=light] .m-2f5f7bca{--_control-border-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-2f5f7bca{--_control-border-color:var(--mantine-color-dark-3)}.m-b14e0e0b{padding:calc(var(--mantine-spacing-md) - .25rem*var(--mantine-scale))}.m-22105db1{border-radius:var(--mantine-radius-sm);cursor:help;display:block;font-size:var(--mantine-font-size-sm);padding:calc(.375rem*var(--mantine-scale)) var(--mantine-spacing-sm);width:100%}@media (hover:hover){[data-mantine-color-scheme=light] .m-22105db1:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-22105db1:hover{background-color:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-22105db1:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-22105db1:active{background-color:var(--mantine-color-dark-6)}}.m-2075ec07{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-2075ec07{color:var(--mantine-color-white)}[data-mantine-color-scheme=light] .m-36ceca49{--mantine-logo-fill:var(--mantine-color-cyan-6);--mantine-logo-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-36ceca49{--mantine-logo-fill:var(--mantine-color-yellow-4);--mantine-logo-color:var(--mantine-color-dark-8)}.m-18a11a80{align-items:center;border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--mantine-radius-md);display:flex;height:calc(2.125rem*var(--mantine-scale));justify-content:center;width:calc(2.125rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-18a11a80{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-3);color:var(--mantine-color-gray-7)}@media (hover:hover){[data-mantine-color-scheme=light] .m-18a11a80:hover{background-color:var(--mantine-color-gray-0)}}@media (hover:none){[data-mantine-color-scheme=light] .m-18a11a80:active{background-color:var(--mantine-color-gray-0)}}[data-mantine-color-scheme=dark] .m-18a11a80{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4);color:var(--mantine-color-white)}@media (hover:hover){[data-mantine-color-scheme=dark] .m-18a11a80:hover{background-color:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=dark] .m-18a11a80:active{background-color:var(--mantine-color-dark-5)}}.m-83c3d5d1{height:calc(1.375rem*var(--mantine-scale));width:calc(1.375rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-83c188ce{display:none}[data-mantine-color-scheme=light] .m-83c188ce{display:block}[data-mantine-color-scheme=light] .m-f4e3c6be{display:none}[data-mantine-color-scheme=dark] .m-f4e3c6be{display:block}.m-19df8210{--discord-color:#5865f2;--discord-color-hover:#4f5bd5}[data-mantine-color-scheme] .m-19df8210{background-color:var(--discord-color);border-color:var(--discord-color);color:var(--mantine-color-white)}@media (hover:hover){[data-mantine-color-scheme] .m-19df8210:hover{background-color:var(--discord-color-hover);border-color:var(--discord-color-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-19df8210:active{background-color:var(--discord-color-hover);border-color:var(--discord-color-hover)}}.m-6e98493a{border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--mantine-radius-md);color:var(--mantine-color-placeholder);height:calc(2.125rem*var(--mantine-scale));padding-left:var(--mantine-spacing-sm);padding-right:calc(.25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-6e98493a{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-6e98493a{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4)}[dir=rtl] .m-6e98493a{padding-left:calc(.25rem*var(--mantine-scale));padding-right:var(--mantine-spacing-sm)}.m-602cb89e{border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--mantine-radius-sm);font-size:calc(.6875rem*var(--mantine-scale));font-weight:700;line-height:1;padding:calc(.25rem*var(--mantine-scale)) calc(.4375rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-602cb89e{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-2);color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-602cb89e{background-color:var(--mantine-color-dark-7);border-color:var(--mantine-color-dark-7);color:var(--mantine-color-dark-0)}.m-5d0899e8{border-radius:var(--mantine-radius-xs);display:inline-block;font-family:var(--mantine-font-family-monospace);font-size:calc(.8125rem*var(--mantine-scale));line-height:var(--_code-line-height,var(--mantine-line-height));padding:calc(.0625rem*var(--mantine-scale)) calc(.1875rem*var(--mantine-scale))}.m-348cdb48{--_code-line-height:1.7;display:block;margin:0;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-348cdb48,.m-4543bbc8{background:var(--_background)}.m-4543bbc8{align-items:flex-start;display:flex;justify-content:space-between}[data-mantine-color-scheme=light] .m-4543bbc8{--_background:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-4543bbc8{--_background:var(--mantine-color-dark-8)}.m-23f2bd31{display:flex;margin-right:calc(.4375rem*var(--mantine-scale));margin-top:calc(.4375rem*var(--mantine-scale))}.m-5d089b70,.m-6c83b382{background-color:transparent;color:var(--mantine-color-dimmed);margin:0;opacity:.8}@media (hover:hover){.m-5d089b70:hover,.m-6c83b382:hover{opacity:1}}@media (hover:none){.m-5d089b70:active,.m-6c83b382:active{opacity:1}}@media (max-width:40em){.m-5d089b70,.m-6c83b382{display:none}}.m-5d089b70{position:absolute;right:calc(.3125rem*var(--mantine-scale));top:calc(.3125rem*var(--mantine-scale));z-index:1}.m-5d09e177{align-items:center;background-color:var(--_file-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_file-bd);border-left:0;border-top:0;color:var(--_file-color);cursor:var(--_file-cursor);display:flex;font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);font-weight:700;gap:calc(.4375rem*var(--mantine-scale));justify-content:center;line-height:1;margin:0;opacity:var(--_file-opacity);padding:calc(.4375rem*var(--mantine-scale)) calc(.75rem*var(--mantine-scale));user-select:none;white-space:nowrap}@media (hover:hover){.m-5d09e177:hover{--_file-opacity:1}}@media (hover:none){.m-5d09e177:active{--_file-opacity:1}}.m-5d09e177:last-of-type{border-bottom-right-radius:var(--mantine-radius-sm)}.m-5d09e177:only-child{--_file-cursor:default}.m-5d09e177[data-active]{--_file-opacity:1;--_file-color:var(--_file-active-color)!important;--_file-bg:var(--_file-active-bg)}.m-5d09e177{--_file-opacity:0.8;--_file-cursor:pointer}[data-mantine-color-scheme=light] .m-5d09e177{--_file-color:var(--mantine-color-gray-8);--_file-bd:var(--mantine-color-gray-2);--_file-active-bg:var(--mantine-color-white);--_file-active-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-5d09e177{--_file-color:var(--mantine-color-dark-0);--_file-bd:var(--mantine-color-dark-5);--_file-active-bg:var(--mantine-color-dark-7);--_file-active-color:var(--mantine-color-white)}.m-44324ddc{display:flex}.m-e42c0d8b{max-height:var(--ch-max-collapsed-height);overflow:hidden;position:relative}.m-e42c0d8b:before{background-image:linear-gradient(0deg,var(--_background) 16%,transparent 100%);border-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));content:"";inset:0;pointer-events:none;position:absolute;z-index:100}.m-e42c0d8b[data-expanded]{max-height:none}.m-e42c0d8b[data-expanded]:before{display:none}.m-d9142897{bottom:0;color:var(--mantine-color-anchor);font-size:var(--mantine-font-size-sm);left:50%;padding-bottom:var(--mantine-spacing-xs);padding-top:var(--mantine-spacing-xs);position:absolute;text-align:center;transform:translateX(-50%);width:100%;z-index:101}.m-d9142897[data-hidden]{display:none}.m-5d0f6cdd{margin-top:0;position:relative}.m-5d0f6cdd[data-collapsed] .mantine-ScrollArea-viewport>div{display:block!important}[data-mantine-color-scheme=light] .m-5d0f6cdd{--_background:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-5d0f6cdd{--_background:var(--mantine-color-dark-8)}.m-19e0fe90{align-items:center;display:flex;flex:0;justify-content:center}.m-19e0fe90>svg{display:block}.m-819023b7{align-items:flex-start;background-position:50%;background-size:cover;display:flex;flex-direction:column;height:calc(27.5rem*var(--mantine-scale));justify-content:space-between}.m-b1678e91{font-size:calc(2rem*var(--mantine-scale));font-weight:900;line-height:1.2;margin-top:var(--mantine-spacing-xs)}.m-3481ba25,.m-b1678e91{color:var(--mantine-color-white);cursor:default}.m-3481ba25{font-weight:700;opacity:.7;text-transform:uppercase}.m-f1cdba19:focus{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-red-filled);outline-offset:calc(.1875rem*var(--mantine-scale))}.m-b907ace3:focus-visible{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-red-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-32801db9{transition:transform 50ms ease-in-out}.m-32801db9:active{transform:scale(.97)}.m-9cc5ffb6:is(h1){font-family:var(--docs-font-primary),sans-serif;font-weight:900}.m-9cc5ffb6:is(h5,h6){color:var(--mantine-color-dimmed)}.m-42f1bae{height:calc(1.375rem*var(--mantine-scale));width:calc(1.375rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-42cceab{display:none}[data-mantine-color-scheme=light] .m-42cceab{display:block}[data-mantine-color-scheme=light] .m-81e13c81{display:none}[data-mantine-color-scheme=dark] .m-81e13c81{display:block}.m-3b7b8cc2{font-size:var(--mantine-font-size-xl);font-weight:600;text-align:center}.m-b0c0466b{background:var(--mantine-color-blue-light);border-radius:var(--mantine-radius-md);color:var(--mantine-color-blue-light-color);display:inline-block;padding:.1rem .7rem}.m-f2874dbd{background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);padding:var(--mantine-spacing-md);text-align:center}@media (min-width:46.875em){.m-f2874dbd{background-color:var(--mantine-color-red-filled)}.m-1ed461e1{display:none}}.m-cf7fe6bd{display:none}@media (min-width:46.875em){.m-cf7fe6bd{display:block}}.m-bf550b40{margin-top:calc(.3125rem*var(--mantine-scale));position:relative}.m-2acd192c{background-color:var(--mantine-color-body);border-bottom-width:calc(.125rem*var(--mantine-scale));border-left:none;border-radius:0;border-right:none;border-top:none;padding-left:0}.m-2af14056{color:var(--mantine-color-placeholder);font-size:var(--mantine-font-size-sm);font-weight:400;pointer-events:none;position:absolute;top:calc(.4375rem*var(--mantine-scale));transition:color .1s ease,transform .1s ease,font-size .1s ease;z-index:1}.m-2af14056[data-floating]{color:var(--mantine-color-text);font-size:var(--mantine-font-size-xs);transform:translateY(calc(-1.25rem*var(--mantine-scale)))}.m-7bd29d5a{background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);padding:var(--mantine-spacing-md);text-align:center}[dir=rtl] .m-7bd29d5a{background-color:var(--mantine-color-red-filled)}.m-8b35c16f{border-bottom-left-radius:var(--mantine-radius-xl);border-top-left-radius:var(--mantine-radius-xl);padding-left:calc(.25rem*var(--mantine-scale))}[dir=rtl] .m-8b35c16f{border-bottom-left-radius:var(--mantine-radius-md);border-bottom-right-radius:var(--mantine-radius-xl);border-top-left-radius:var(--mantine-radius-md);border-top-right-radius:var(--mantine-radius-xl);padding-left:calc(var(--button-padding-x)/1.5);padding-right:calc(.25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-8b35c16f[data-disabled]{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-8b35c16f[data-disabled]{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-8b35c16f[data-disabled] .m-27c75738[data-position=left]{opacity:.6}.m-27c75738[data-position=left]{--section-size:calc(var(--button-height) - 0.5rem*var(--mantine-scale));align-items:center;background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-xl);color:var(--mantine-color-text);display:flex;height:var(--section-size);justify-content:center;width:var(--section-size)}[dir=rtl] .m-27c75738[data-position=right]{transform:rotate(180deg)}.m-93131372[data-variant=underline]{border-bottom:calc(.125rem*var(--mantine-scale)) solid;border-radius:0;padding-left:0;padding-right:0}[data-mantine-color-scheme=light] .m-93131372[data-variant=underline]{border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-93131372[data-variant=underline]{border-color:var(--mantine-color-dark-3)}.m-93131372[data-variant=underline]:focus{border-color:var(--mantine-color-blue-filled)}.m-b4c95450[data-size=xxl] .m-2be5f2c7{font-size:calc(1.75rem*var(--mantine-scale));height:calc(4.25rem*var(--mantine-scale));padding-left:calc(1.75rem*var(--mantine-scale));padding-right:calc(1.75rem*var(--mantine-scale))}.m-b4c95450[data-size=xxs] .m-2be5f2c7{font-size:calc(.625rem*var(--mantine-scale));height:calc(1.75rem*var(--mantine-scale));padding-left:calc(.625rem*var(--mantine-scale));padding-right:calc(.625rem*var(--mantine-scale))}.m-686577e7{color:var(--mantine-color-red-filled)}.m-933d67aa{background-color:var(--mantine-color-red-light)}.m-85bcba4[data-rotate]{transform:rotate(45deg)}.m-b7471fb0{height:calc(1rem*var(--mantine-scale));width:calc(1rem*var(--mantine-scale))}.m-333cc5d1{background-color:var(--mantine-color-gray-0);border-radius:var(--mantine-radius-sm)}[data-mantine-color-scheme=dark] .m-333cc5d1{background-color:var(--mantine-color-dark-6)}.m-3338c002{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3338c002{background-color:var(--mantine-color-dark-6)}.m-3338c002{border:calc(.0625rem*var(--mantine-scale)) solid transparent;position:relative;transition:transform .15s ease;z-index:0}.m-3338c002[data-active]{background-color:var(--mantine-color-body);border-color:var(--mantine-color-gray-2);transform:scale(1.03);z-index:1}[data-mantine-color-scheme=dark] .m-3338c002[data-active]{border-color:var(--mantine-color-dark-4)}.m-3338c002[data-active]{border-radius:var(--mantine-radius-md);box-shadow:var(--mantine-shadow-md)}.m-67366eec[data-rotate]{transform:rotate(-90deg)}.m-892ca4f5:disabled,.m-892ca4f5[data-disabled]{border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-892ca4f5:disabled,[data-mantine-color-scheme=dark] .m-892ca4f5[data-disabled]{border-color:var(--mantine-color-dark-4)}.m-892ca4f5:disabled,.m-892ca4f5[data-disabled]{background-color:transparent}.m-6f3d7427[data-variant=danger]{background-color:var(--mantine-color-red-9);color:var(--mantine-color-red-0)}.m-6f3d7427[data-variant=primary]{background:linear-gradient(45deg,#4b6cb7 10%,#253b67 90%);color:var(--mantine-color-white)}.m-2be4ed51{--ai-size-xxs:calc(1rem*var(--mantine-scale));--ai-size-xxl:calc(3.125rem*var(--mantine-scale))}.m-13d58bb2:disabled,.m-13d58bb2[data-disabled]{border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-13d58bb2:disabled,[data-mantine-color-scheme=dark] .m-13d58bb2[data-disabled]{border-color:var(--mantine-color-dark-4)}.m-13d58bb2:disabled,.m-13d58bb2[data-disabled]{background-color:transparent}.m-3abb4e8a[data-variant=danger]{background-color:var(--mantine-color-red-9);color:var(--mantine-color-red-0)}.m-3abb4e8a[data-variant=primary]{background:linear-gradient(45deg,#4b6cb7 10%,#253b67 90%);border-width:0;color:var(--mantine-color-white)}.m-2cb8989f{position:relative}.m-241ed880{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-241ed880{background-color:var(--mantine-color-dark-7)}.m-241ed880{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-241ed880{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-241ed880{border-radius:var(--mantine-radius-md);padding:var(--mantine-spacing-md);padding-left:calc(3.75rem*var(--mantine-scale));transition:border-color .1s ease}.m-241ed880[data-checked]{border-color:var(--mantine-color-blue-filled)}.m-aa376f73{left:var(--mantine-spacing-md);pointer-events:none;position:absolute;top:var(--mantine-spacing-md)}.m-dd220d00:not(:checked){background-color:var(--mantine-color-body)}.m-69ff5ed7{color:var(--mantine-color-bright);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-md);font-weight:700;line-height:1.3}.m-cf98ad9f{color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs);margin-top:calc(.5rem*var(--mantine-scale))}.m-43bfb50c{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-43bfb50c{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-43bfb50c{border-radius:var(--mantine-radius-md);cursor:pointer;font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm);transition:color .1s ease,background-color .1s ease,border-color .1s ease}.m-43bfb50c[data-checked]{background-color:var(--mantine-color-blue-filled);border-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white)}.m-43bfb50c *{pointer-events:none;user-select:none}.m-4308addd{--checkbox-size-xxl:calc(2.625rem*var(--mantine-scale));--checkbox-size-xxs:calc(0.875rem*var(--mantine-scale))}.m-4308addd[data-size=xxl] .m-1db1f159{font-size:calc(1.375rem*var(--mantine-scale));line-height:calc(2.5rem*var(--mantine-scale))}.m-4308addd[data-size=xxs] .m-1db1f159{font-size:calc(.625rem*var(--mantine-scale));line-height:calc(.875rem*var(--mantine-scale))}.m-fcba15f2{max-width:calc(18.75rem*var(--mantine-scale))}@media (min-width:25em){.m-fcba15f2{max-width:calc(25rem*var(--mantine-scale))}}@media (min-width:37.5em){.m-fcba15f2{max-width:calc(37.5rem*var(--mantine-scale))}}.m-548ba23a{background-color:var(--mantine-color-blue-0);height:100%}[data-mantine-color-scheme=dark] .m-548ba23a{background-color:var(--mantine-color-dark-4)}.m-548ba23a{padding:var(--mantine-spacing-md)}.m-60a4592e{color:var(--mantine-color-blue-6)}[data-mantine-color-scheme=dark] .m-60a4592e{color:var(--mantine-color-dimmed)}.m-60a4592e{font-size:var(--mantine-font-size-xl);font-weight:700;text-align:center}.m-8ccacaf5{background-color:var(--mantine-color-blue-light)}.m-8ca6a3cb{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-violet-filled)}.m-4ba3a790{transition:none}.m-4ba3a790:focus-within{border-color:transparent;outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}@keyframes m-739a6f61{0%{animation-timing-function:cubic-bezier(.5,0,1,.5);transform:rotateY(0deg)}50%{animation-timing-function:cubic-bezier(0,.5,.5,1);transform:rotateY(5turn)}to{animation-timing-function:cubic-bezier(.5,0,1,.5);transform:rotateY(10turn)}}.m-25f74dea{animation:m-739a6f61 2.4s cubic-bezier(0,.2,.8,1) infinite;background:var(--loader-color);border-radius:var(--loader-size);display:inline-block;height:var(--loader-size);width:var(--loader-size)}.m-a9824888{border-color:var(--mantine-color-gray-4);border-top-left-radius:0;border-top-right-radius:0}[data-mantine-color-scheme=dark] .m-a9824888{border-color:var(--mantine-color-dark-4)}.m-a9824888{border-top:0}.m-f5487eb3{transition:none}.m-f5487eb3[data-expanded]{border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-f5487eb3[data-expanded]{border-color:var(--mantine-color-dark-4)}.m-f5487eb3[data-expanded]{border-bottom-left-radius:0;border-bottom-right-radius:0}.m-6874fea5{align-items:center;background-color:var(--mantine-color-white);display:flex;justify-content:center;padding:calc(.625rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-6874fea5{background-color:var(--mantine-color-dark-5)}.m-3dc2e23a,.m-3dc2e23a:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3dc2e23a,[data-mantine-color-scheme=dark] .m-3dc2e23a:hover{background-color:var(--mantine-color-dark-6)}.m-3dc2e23a[data-orientation=vertical] .m-b848b7ea{background-color:var(--mantine-color-red-6)}.m-3dc2e23a[data-orientation=horizontal] .m-b848b7ea{background-color:var(--mantine-color-blue-6)}.m-342d2ec1{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-342d2ec1{background-color:var(--mantine-color-dark-6)}.m-342d2ec1{opacity:1}.m-f33bcc41{border-color:var(--mantine-color-gray-4);border-top-left-radius:0;border-top-right-radius:0}[data-mantine-color-scheme=dark] .m-f33bcc41{border-color:var(--mantine-color-dark-4)}.m-f33bcc41{border-top:0}.m-37973d9a{transition:none}.m-37973d9a[data-expanded]{border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-37973d9a[data-expanded]{border-color:var(--mantine-color-dark-4)}.m-37973d9a[data-expanded]{border-bottom-left-radius:0;border-bottom-right-radius:0}.m-a4dc100e{background-color:var(--mantine-color-blue-0)}[data-mantine-color-scheme=dark] .m-a4dc100e{background-color:var(--mantine-color-dark-4)}.m-a4dc100e{padding:var(--mantine-spacing-md)}.m-f6c78959{color:var(--mantine-color-blue-6)}[data-mantine-color-scheme=dark] .m-f6c78959{color:var(--mantine-color-dimmed)}.m-f6c78959{font-size:var(--mantine-font-size-xl);font-weight:700;text-align:center}.m-7b015c03:before{background-color:var(--mantine-color-blue-1)}[data-mantine-color-scheme=dark] .m-7b015c03:before{background-color:var(--mantine-color-dark-3)}.m-88156515{border-color:var(--mantine-color-blue-1);border-radius:calc(.375rem*var(--mantine-scale));height:calc(.375rem*var(--mantine-scale));transform:translateX(calc(-.1875rem*var(--mantine-scale))) translateY(calc(-.125rem*var(--mantine-scale)));width:calc(.375rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-88156515{border-color:var(--mantine-color-dark-3)}.m-88156515[data-filled]{border-color:var(--mantine-color-blue-6)}.m-beb40edf{font-size:var(--mantine-font-size-xs);margin-bottom:calc(.3125rem*var(--mantine-scale));margin-top:0}.m-7afd1c8e{background-color:var(--mantine-color-white);border-width:calc(.0625rem*var(--mantine-scale));box-shadow:var(--mantine-shadow-sm);height:calc(1rem*var(--mantine-scale));width:calc(1rem*var(--mantine-scale))}.m-24b8a321{border-top:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-gray-4);height:calc(.125rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-24b8a321{border-top:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-dark-3)}.m-24b8a321{background-color:transparent;border-radius:var(--mantine-radius-xl)}.m-24b8a321[data-active]{background-image:linear-gradient(45deg,var(--mantine-color-blue-6),var(--mantine-color-cyan-6));border-width:0}.m-ced9b9a9{background-color:var(--mantine-color-gray-0);border-color:transparent}[data-mantine-color-scheme=dark] .m-ced9b9a9{background-color:var(--mantine-color-dark-4)}.m-ced9b9a9{border-width:0}.m-ced9b9a9[data-completed]{background-color:transparent;background-image:linear-gradient(45deg,var(--mantine-color-blue-6),var(--mantine-color-cyan-6));border-width:0}.m-f1461110{transition:transform .15s ease}.m-f1461110[data-progress]{transform:scale(1.05)}.m-3a996e90{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-2);position:relative}[data-mantine-color-scheme=dark] .m-3a996e90{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-3a996e90{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-3a996e90{background-color:var(--mantine-color-dark-6)}.m-3a996e90:first-of-type{border-radius:calc(.25rem*var(--mantine-scale)) 0 0 calc(.25rem*var(--mantine-scale))}.m-3a996e90:last-of-type,[dir=rtl] .m-3a996e90:first-of-type{border-radius:0 calc(.25rem*var(--mantine-scale)) calc(.25rem*var(--mantine-scale)) 0}[dir=rtl] .m-3a996e90:last-of-type{border-radius:calc(.25rem*var(--mantine-scale)) 0 0 calc(.25rem*var(--mantine-scale))}.m-3a996e90+.m-3a996e90{border-left-width:0}[dir=rtl] .m-3a996e90+.m-3a996e90{border-left-width:calc(.0625rem*var(--mantine-scale));border-right-width:0}@media (hover:hover){.m-3a996e90:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3a996e90:hover{background-color:var(--mantine-color-dark-5)}}@media (hover:none){.m-3a996e90:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3a996e90:active{background-color:var(--mantine-color-dark-5)}}.m-3a996e90[data-active]{background-color:var(--mantine-color-blue-filled);border-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);z-index:1}@media (hover:hover){.m-3a996e90[data-active]:hover{background-color:var(--mantine-color-blue-filled-hover)}}@media (hover:none){.m-3a996e90[data-active]:active{background-color:var(--mantine-color-blue-filled-hover)}}[data-mantine-color-scheme=light] .m-13521d26{--area-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-13521d26{--area-color:var(--mantine-color-lime-4)}[data-mantine-color-scheme=light] .m-3587e220{--chart-grid-color:color-mix(in srgb,var(--mantine-color-black),transparent 85%);--chart-text-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-3587e220{--chart-grid-color:color-mix(in srgb,var(--mantine-color-white),transparent 85%);--chart-text-color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-ad75446c{--bar-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-ad75446c{--bar-color:var(--mantine-color-lime-4)}[data-mantine-color-scheme=light] .m-cb37bd9a{--chart-grid-color:color-mix(in srgb,var(--mantine-color-black),transparent 85%);--chart-text-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-cb37bd9a{--chart-grid-color:color-mix(in srgb,var(--mantine-color-white),transparent 85%);--chart-text-color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-91e7a08d{--line-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-91e7a08d{--line-color:var(--mantine-color-lime-4)}[data-mantine-color-scheme=light] .m-8fdc5499{--chart-grid-color:color-mix(in srgb,var(--mantine-color-black),transparent 85%);--chart-text-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-8fdc5499{--chart-grid-color:color-mix(in srgb,var(--mantine-color-white),transparent 85%);--chart-text-color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-b7fa7826{--chart-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-b7fa7826{--chart-color:var(--mantine-color-lime-4)}.m-3e09cb9d{--card-bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-3e09cb9d{--card-bg:var(--mantine-color-dark-5)}.m-3e09cb9d{background-color:var(--card-bg);border-radius:var(--mantine-radius-md);padding:var(--mantine-spacing-md)}.m-e00fbef3{--card-bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-e00fbef3{--card-bg:var(--mantine-color-dark-5)}.m-e00fbef3{background-color:var(--card-bg);border-radius:var(--mantine-radius-md);padding:var(--mantine-spacing-md)}.m-45c99571{background-color:var(--notification-color,var(--mantine-primary-color-filled))}.m-45c99571:before{background-color:var(--mantine-color-white)}.m-436b008d,.m-73829fa9,.m-979213db{color:var(--mantine-color-white)}@media (hover:hover){.m-979213db:hover{background-color:rgba(0,0,0,.1)}}@media (hover:none){.m-979213db:active{background-color:rgba(0,0,0,.1)}}.m-4fe518f6{height:calc(.25rem*var(--mantine-scale));transition:width .25s ease;width:calc(.75rem*var(--mantine-scale))}.m-4fe518f6[data-active]{width:calc(2.5rem*var(--mantine-scale))}.m-bf2c70c5[data-inactive]{cursor:default;opacity:0}.m-78ad357a{opacity:0;transition:opacity .15s ease}.m-f45b71a6:hover .m-78ad357a{opacity:1}.m-f79e9eba{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-f79e9eba{background-color:var(--mantine-color-dark-6)}.m-f79e9eba{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-f79e9eba{border-color:var(--mantine-color-dark-5)}.m-f79e9eba{cursor:not-allowed}.m-f79e9eba *{color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-f79e9eba *{color:var(--mantine-color-dark-3)}.m-ad28dbef{align-items:center;background-color:var(--mantine-color-gray-0);border:0;display:flex;justify-content:center;min-height:calc(7.5rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-ad28dbef{background-color:var(--mantine-color-dark-6)}.m-ad28dbef[data-accept]{background-color:var(--mantine-color-blue-6);color:var(--mantine-color-white)}.m-ad28dbef[data-reject]{background-color:var(--mantine-color-red-6);color:var(--mantine-color-white)}.MdxPre_code__tSup0{border:calc(.0625rem * var(--mantine-scale)) solid;margin-top:var(--mantine-spacing-md);margin-bottom:var(--mantine-spacing-md)}.MdxPre_code__tSup0,.MdxPre_code__tSup0 pre{border-radius:var(--mantine-radius-md)}[data-mantine-color-scheme=light] .MdxPre_code__tSup0{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .MdxPre_code__tSup0{border-color:var(--mantine-color-dark-5)}.MdxTitle_title__lm_03{margin-top:calc(var(--mantine-spacing-xl) * 1.2);margin-bottom:var(--mantine-spacing-md);word-break:break-word;font-family:var(--docs-font-primary);font-weight:700;position:relative}[data-mantine-color-scheme=light] .MdxTitle_title__lm_03{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .MdxTitle_title__lm_03{color:var(--mantine-color-white)}@media (hover:hover){.MdxTitle_title__lm_03:hover .MdxTitle_copyButton__Rk3tQ{opacity:1}}@media (hover:none){.MdxTitle_title__lm_03:active .MdxTitle_copyButton__Rk3tQ{opacity:1}}.MdxTitle_title__lm_03[data-h1]{font-weight:900;font-size:calc(2.5rem * var(--mantine-scale));margin-top:0}.MdxTitle_link__O_5hL{text-decoration:none;color:inherit}.MdxTitle_offset__NkEGi{position:relative;top:calc(-3.875rem * var(--mantine-scale))}.MdxTitle_copyButton__Rk3tQ{display:flex;align-items:flex-start;justify-content:flex-start;min-width:calc(1.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);border-radius:var(--mantine-radius-sm);opacity:.2;transition:opacity .1s ease;position:absolute;top:0;bottom:0;left:calc(-1.75rem * var(--mantine-scale));padding-right:calc(.625rem * var(--mantine-scale));padding-top:calc(.5rem * var(--mantine-scale));padding-bottom:calc(.25rem * var(--mantine-scale))}@media (hover:hover){.MdxTitle_copyButton__Rk3tQ:hover{color:var(--mantine-color-blue-5)}}@media (hover:none){.MdxTitle_copyButton__Rk3tQ:active{color:var(--mantine-color-blue-5)}}@media (max-width:74.99375em){.MdxTitle_copyButton__Rk3tQ{display:none}}.MdxTitle_copyIcon__LScnY{width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))}.MdxInfo_root__KVEKQ{margin-top:calc(var(--mantine-spacing-xl) * 1.5);margin-bottom:var(--mantine-spacing-lg)}.MdxInfo_root__KVEKQ>p{line-height:1.65;font-size:calc(.9375rem * var(--mantine-scale))}.MdxInfo_root__KVEKQ>p>strong:only-child{font-family:var(--docs-font-primary);font-size:var(--mantine-font-size-lg)}[data-mantine-color-scheme=light] .MdxInfo_root__KVEKQ>p>strong:only-child{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .MdxInfo_root__KVEKQ>p>strong:only-child{color:var(--mantine-color-white)}.MdxInfo_root__KVEKQ>p>strong:only-child>code{font-size:80%}.MdxInfo_root__KVEKQ>p:first-of-type{margin-top:0}.MdxInfo_root__KVEKQ>p:last-of-type{margin-bottom:0}[data-mantine-color-scheme=light] .MdxInfo_root__KVEKQ .mantine-Code-root{background-color:var(--docs-bq-code-bg-light)}[data-mantine-color-scheme=dark] .MdxInfo_root__KVEKQ .mantine-Code-root{background-color:var(--docs-bq-code-bg-dark)}.MdxInfo_root__KVEKQ .mantine-CodeHighlight-root{margin-top:var(--mantine-spacing-md)}[data-mantine-color-scheme=light] .MdxInfo_root__KVEKQ .mantine-CodeHighlight-root{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .MdxInfo_root__KVEKQ .mantine-CodeHighlight-root{background-color:var(--mantine-color-dark-7)}.MdxInfo_icon__cOv9p{width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))}.MdxLink_link__DWoQo{font-size:calc(.9375rem * var(--mantine-scale))}.MdxTypography_paragraph__XriB5,.MdxTypography_ul__gGDJt{line-height:1.65;font-size:calc(.9375rem * var(--mantine-scale))}.MdxTypography_ul__gGDJt{margin-bottom:calc(1.25rem * var(--mantine-scale));margin-top:calc(.625rem * var(--mantine-scale));padding-left:var(--mantine-spacing-xl)}.MdxTypography_li__gO4GM{margin-top:calc(.25rem * var(--mantine-scale));font-size:calc(.9375rem * var(--mantine-scale))}.icons_nextIcon__ZCrZ1{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .icons_nextIcon__ZCrZ1{color:var(--mantine-color-white)}.icons_icon__yq4dY,.icons_nextIcon__ZCrZ1{width:var(--icon-size)}.icons_icon__yq4dY{height:var(--icon-size)}.MdxTemplatesList_externalLinkIcon___In9x{width:calc(.875rem * var(--mantine-scale));height:calc(.875rem * var(--mantine-scale))}.MdxTemplatesList_icon__759wE{display:flex;align-items:center;justify-content:center;width:calc(2.75rem * var(--mantine-scale));color:var(--mantine-color-dimmed)}@media (max-width:31.25em){.MdxTemplatesList_iconCell__t22nh{display:none}}.DocsSection_section__o2plc{margin-bottom:calc(var(--mantine-spacing-xl) * 1.5);margin-top:var(--mantine-spacing-sm)}.MdxNpmScript_root__wk_w9{border:calc(.0625rem * var(--mantine-scale)) solid;border-radius:var(--mantine-radius-md);overflow:hidden;margin-bottom:var(--mantine-spacing-xl)}[data-mantine-color-scheme=light] .MdxNpmScript_root__wk_w9{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .MdxNpmScript_root__wk_w9{border-color:var(--mantine-color-dark-5)}.MdxNpmScript_icon___9BYF{margin-right:calc(.3125rem * var(--mantine-scale))}[dir=rtl] .MdxNpmScript_icon___9BYF{margin-right:0;margin-left:calc(.3125rem * var(--mantine-scale))}.MdxPackagesInstallation_row__4jECZ{cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover:hover){.MdxPackagesInstallation_row__4jECZ:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .MdxPackagesInstallation_row__4jECZ:hover{background-color:var(--mantine-color-dark-6)}}@media (hover:none){.MdxPackagesInstallation_row__4jECZ:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .MdxPackagesInstallation_row__4jECZ:active{background-color:var(--mantine-color-dark-6)}}.MdxPackagesInstallation_checkbox__jBi9e{pointer-events:none;display:flex}@media (max-width:46.875em){.MdxPackagesInstallation_hiddenMobile__VJhVH{display:none}}.Logo_logo__c5nVK{text-decoration:none;user-select:none;display:flex;align-items:center}[data-mantine-color-scheme=light] .Logo_logo__c5nVK{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .Logo_logo__c5nVK{color:var(--mantine-color-white)}.Header_header__KDGDv{background-color:var(--mantine-color-body);height:var(--docs-header-height);position:fixed;top:0;left:0;right:0;padding-left:var(--mantine-spacing-md);padding-right:var(--mantine-spacing-md);display:flex;align-items:center;justify-content:space-between;z-index:101}[data-mantine-color-scheme=light] .Header_header__KDGDv{border-bottom:calc(.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .Header_header__KDGDv{border-bottom:calc(.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-8)}@media (max-width:47.5em){.Header_header__KDGDv[data-desktop]{display:none}}@media (min-width:47.5625em){.Header_header__KDGDv[data-mobile]{display:none}}.Header_logo__DqpNC,.Header_version__jVWmz{display:flex;align-items:center}.Header_version__jVWmz{margin-top:calc(.25rem * var(--mantine-scale));margin-left:var(--mantine-spacing-md);font-weight:700;justify-content:center;line-height:1;padding:calc(.25rem * var(--mantine-scale)) calc(.625rem * var(--mantine-scale));padding-right:calc(.5rem * var(--mantine-scale));border-radius:var(--mantine-radius-xl)}[dir=rtl] .Header_version__jVWmz{margin-left:0;margin-right:var(--mantine-spacing-md)}@media (max-width:50em){.Header_version__jVWmz{display:none}}.Header_versionChevron__t4WMy{display:block;margin-left:calc(.3125rem * var(--mantine-scale))}.Header_versionChevron__t4WMy,.Header_versionExternalIcon___plOU{width:calc(.875rem * var(--mantine-scale));height:calc(.875rem * var(--mantine-scale))}.Header_versionExternalIcon___plOU{color:var(--mantine-color-dimmed)}.NavbarLinksGroup_group__Xgv_M{margin-bottom:0;padding-left:var(--mantine-spacing-md);padding-right:var(--mantine-spacing-md)}.NavbarLinksGroup_group__Xgv_M[data-opened]{margin-bottom:calc(var(--mantine-spacing-xl) * 1.2)}.NavbarLinksGroup_header__yNIL7{display:flex;align-items:center;width:calc(100% + var(--mantine-spacing-md));height:calc(2rem * var(--mantine-scale));cursor:pointer}[data-mantine-color-scheme=light] .NavbarLinksGroup_header__yNIL7{color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_header__yNIL7{color:var(--mantine-color-white)}.NavbarLinksGroup_chevron__x5W5G{width:calc(.9375rem * var(--mantine-scale));height:calc(.9375rem * var(--mantine-scale));margin-right:var(--mantine-spacing-md);transition:transform .15s ease}[dir=rtl] .NavbarLinksGroup_chevron__x5W5G{margin-right:0;margin-left:var(--mantine-spacing-md)}.NavbarLinksGroup_chevron__x5W5G[data-collapsed]{transform:rotate(-90deg)}.NavbarLinksGroup_title__sFCQR{user-select:none;font-weight:700;font-family:var(--docs-font-primary);line-height:1;padding-top:calc(.25rem * var(--mantine-scale));letter-spacing:calc(.03125rem * var(--mantine-scale));word-spacing:calc(.0625rem * var(--mantine-scale));text-transform:uppercase;font-size:var(--mantine-font-size-xs)}.NavbarLinksGroup_category__nrDId{padding-top:calc(.75rem * var(--mantine-scale))}.NavbarLinksGroup_categoryTitle__GUTGd{position:relative;padding-left:calc(1.4375rem * var(--mantine-scale));margin-left:calc(.4375rem * var(--mantine-scale));margin-bottom:calc(.3125rem * var(--mantine-scale));border-left:calc(.0625rem * var(--mantine-scale)) solid;height:calc(2.125rem * var(--mantine-scale));display:flex;align-items:center;font-size:var(--mantine-font-size-xs);border-top-right-radius:var(--mantine-radius-sm);border-bottom-right-radius:var(--mantine-radius-sm);text-transform:capitalize}[data-mantine-color-scheme=light] .NavbarLinksGroup_categoryTitle__GUTGd{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3)!important;color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_categoryTitle__GUTGd{background-color:var(--mantine-color-dark-7);border-color:var(--mantine-color-dark-6)!important;color:var(--mantine-color-dark-2)}[dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd{padding-left:0;padding-right:calc(1.4375rem * var(--mantine-scale));border-left:0;border-right:calc(.0625rem * var(--mantine-scale)) solid;margin-left:0;margin-right:calc(.4375rem * var(--mantine-scale));border-radius:0;border-top-left-radius:var(--mantine-radius-sm);border-bottom-left-radius:var(--mantine-radius-sm)}[data-mantine-color-scheme=light] [dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd{border-color:var(--mantine-color-gray-3)!important}[data-mantine-color-scheme=dark] [dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd{border-color:var(--mantine-color-dark-6)!important}.NavbarLinksGroup_categoryTitle__GUTGd:before{content:"";position:absolute;bottom:calc(-.3125rem * var(--mantine-scale));left:calc(-.0625rem * var(--mantine-scale));height:calc(.3125rem * var(--mantine-scale));width:calc(.0625rem * var(--mantine-scale))}[data-mantine-color-scheme=light] .NavbarLinksGroup_categoryTitle__GUTGd:before{background-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_categoryTitle__GUTGd:before{background-color:var(--mantine-color-dark-6)}[dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd:before{left:unset;right:calc(-.0625rem * var(--mantine-scale))}.NavbarLinksGroup_categoryIcon__qE5p8{margin-right:var(--mantine-spacing-xs);width:calc(.875rem * var(--mantine-scale));height:calc(.875rem * var(--mantine-scale))}[dir=rtl] .NavbarLinksGroup_categoryIcon__qE5p8{margin-right:0;margin-left:var(--mantine-spacing-xs)}.NavbarLinksGroup_link__jLgZu{display:block;border-left:calc(.0625rem * var(--mantine-scale)) solid;padding-left:calc(1.4375rem * var(--mantine-scale));padding-right:var(--mantine-spacing-md);margin-left:calc(.4375rem * var(--mantine-scale));height:calc(2.125rem * var(--mantine-scale));line-height:calc(2.125rem * var(--mantine-scale));border-top-right-radius:var(--mantine-radius-sm);border-bottom-right-radius:var(--mantine-radius-sm);font-size:var(--mantine-font-size-sm);user-select:none}[data-mantine-color-scheme=light] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-gray-3)!important;color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-dark-6)!important;color:var(--mantine-color-dark-1)}[dir=rtl] .NavbarLinksGroup_link__jLgZu{text-align:right;padding-left:var(--mantine-spacing-md);padding-right:calc(1.4375rem * var(--mantine-scale));border-left:0;border-right:calc(.0625rem * var(--mantine-scale)) solid;margin-left:0;margin-right:calc(.4375rem * var(--mantine-scale));border-radius:0;border-top-left-radius:var(--mantine-radius-sm);border-bottom-left-radius:var(--mantine-radius-sm)}[data-mantine-color-scheme=light] [dir=rtl] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-gray-3)!important}[data-mantine-color-scheme=dark] [dir=rtl] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-dark-6)!important}.NavbarLinksGroup_link__jLgZu[data-active]{border-color:var(--mantine-color-blue-5)!important;font-weight:500}[data-mantine-color-scheme=light] .NavbarLinksGroup_link__jLgZu[data-active]{color:var(--mantine-color-blue-8);background-color:var(--mantine-color-blue-0)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_link__jLgZu[data-active]{color:var(--mantine-color-blue-1);background-color:rgba(24,100,171,.45)}.NavbarMainLink_link__eG_24{--offset:calc(0.375rem * var(--mantine-scale));height:calc(3rem * var(--mantine-scale));display:flex;align-items:center;padding-left:calc(var(--mantine-spacing-md) - var(--offset));padding-right:calc(var(--mantine-spacing-md) - var(--offset));margin-left:var(--offset);margin-right:var(--offset);border-radius:var(--mantine-radius-md);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .NavbarMainLink_link__eG_24{color:var(--mantine-color-white)}.NavbarMainLink_link__eG_24[data-active]{background-color:var(--mantine-color-blue-light-hover)}.NavbarMainLink_link__eG_24[data-active]>.NavbarMainLink_icon__ePqig{background:transparent}@media (hover:hover){.NavbarMainLink_link__eG_24:hover .NavbarMainLink_external__Ko9pq{opacity:1}}@media (hover:none){.NavbarMainLink_link__eG_24:active .NavbarMainLink_external__Ko9pq{opacity:1}}.NavbarMainLink_icon__ePqig{display:flex;align-items:center;justify-content:center;padding:calc(.25rem * var(--mantine-scale));border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-blue-light-hover);color:var(--mantine-color-blue-light-color);width:calc(2.125rem * var(--mantine-scale));height:calc(2.125rem * var(--mantine-scale))}.NavbarMainLink_label__gBi5w{font-size:var(--mantine-font-size-sm);margin-left:var(--mantine-spacing-sm);font-weight:500}[dir=rtl] .NavbarMainLink_label__gBi5w{margin-left:0;margin-right:var(--mantine-spacing-sm)}.NavbarMainLink_external__Ko9pq{margin-left:auto;display:flex;align-items:center;justify-content:center;width:calc(2.125rem * var(--mantine-scale));height:calc(2.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);border-radius:var(--mantine-radius-md);opacity:0;transition:opacity .1s ease}.Navbar_navbar__LAEds{border-right:calc(.0625rem * var(--mantine-scale)) solid var(--navbar-border-color);position:fixed;top:var(--docs-header-height);bottom:0;left:0;z-index:100;width:var(--docs-navbar-width);display:flex;flex-direction:column}[data-mantine-color-scheme=light] .Navbar_navbar__LAEds{--navbar-border-color:var(--mantine-color-gray-2);background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .Navbar_navbar__LAEds{--navbar-border-color:var(--mantine-color-dark-7);background-color:var(--mantine-color-dark-8)}[dir=rtl] .Navbar_navbar__LAEds{border-left:calc(.0625rem * var(--mantine-scale)) solid var(--navbar-border-color);border-right:0;left:unset;right:0}@media (max-width:47.5em){.Navbar_navbar__LAEds[data-hidden]{display:none!important}}.Navbar_navbar__LAEds[data-mobile-only]{display:none}@media (max-width:47.5em){.Navbar_navbar__LAEds[data-mobile-only]{display:flex}.Navbar_navbar__LAEds{width:unset;left:0;right:0}}.Navbar_scrollarea__sbhtk{flex:1}.Navbar_body__8M1M_{padding-top:var(--mantine-spacing-md);padding-bottom:calc(6.25rem * var(--mantine-scale))}.Navbar_groups__4j6NE{padding-top:var(--mantine-spacing-xl)}.Shell_main__o5vhe{padding-top:var(--docs-header-height);padding-left:var(--docs-navbar-width)}@media (max-width:47.5em){.Shell_main__o5vhe{padding-left:0}}[dir=rtl] .Shell_main__o5vhe{padding-left:0;padding-right:var(--docs-navbar-width)}@media (max-width:47.5em){[dir=rtl] .Shell_main__o5vhe{padding-right:0}}[data-mantine-color-scheme=light] .Shell_main__o5vhe{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .Shell_main__o5vhe{background-color:var(--mantine-color-dark-7)}@font-face{font-family:__greycliffCF_0e41f6;src:url(/_next/static/media/e0ad2ceaf794b823-s.p.woff2) format("woff2");font-display:swap;font-weight:700;font-style:normal}@font-face{font-family:__greycliffCF_0e41f6;src:url(/_next/static/media/fe465dc4c64aad70-s.p.woff2) format("woff2");font-display:swap;font-weight:900;font-style:normal}@font-face{font-family:__greycliffCF_Fallback_0e41f6;src:local("Arial");ascent-override:74.42%;descent-override:20.87%;line-gap-override:24.87%;size-adjust:104.94%}.__className_0e41f6{font-family:__greycliffCF_0e41f6,__greycliffCF_Fallback_0e41f6}body{--docs-header-height:calc(3.75rem * var(--mantine-scale));--docs-navbar-width:calc(16.25rem * var(--mantine-scale));--docs-table-of-contents-width:calc(16.25rem * var(--mantine-scale));--docs-mdx-content-width:calc(51.25rem * var(--mantine-scale))}[data-docs-inline-code] code{font-family:var(--mantine-font-family-monospace);line-height:var(--mantine-line-height);padding:calc(.125rem * var(--mantine-scale)) calc(var(--mantine-spacing-xs) / 2);border-radius:var(--mantine-radius-sm);font-size:var(--mantine-font-size-xs);margin:0}[data-mantine-color-scheme=light] [data-docs-inline-code] code{background-color:var(--mantine-color-gray-1);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] [data-docs-inline-code] code{background-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)} \ No newline at end of file diff --git a/_next/static/css/b33ab5c810578c12.css b/_next/static/css/b33ab5c810578c12.css new file mode 100644 index 00000000000..ff7a1f40438 --- /dev/null +++ b/_next/static/css/b33ab5c810578c12.css @@ -0,0 +1,11 @@ +*,:after,:before{box-sizing:border-box}button,input,select,textarea{font:inherit}button,select{text-transform:none}body{-webkit-font-smoothing:var(--mantine-webkit-font-smoothing);-moz-osx-font-smoothing:var(--mantine-moz-font-smoothing);background-color:var(--mantine-color-body);color:var(--mantine-color-text);font-family:var(--mantine-font-family);font-size:var(--mantine-font-size-md);line-height:var(--mantine-line-height);margin:0}@media screen and (max-device-width:500px){body{-webkit-text-size-adjust:100%}}@media (prefers-reduced-motion:reduce){[data-respect-reduced-motion] [data-reduce-motion]{animation:none;transition:none}}[data-mantine-color-scheme=dark] .mantine-dark-hidden,[data-mantine-color-scheme=light] .mantine-light-hidden{display:none}.mantine-focus-auto:focus-visible{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.mantine-focus-always:focus{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.mantine-focus-never:focus{outline:none}.mantine-active:active{transform:translateY(calc(.0625rem*var(--mantine-scale)))}[dir=rtl] .mantine-rotate-rtl{transform:rotate(180deg)}:root{--mantine-z-index-app:100;--mantine-z-index-modal:200;--mantine-z-index-popover:300;--mantine-z-index-overlay:400;--mantine-z-index-max:9999;--mantine-scale:1;--mantine-cursor-type:default;--mantine-webkit-font-smoothing:antialiased;--mantine-color-scheme:light dark;--mantine-moz-font-smoothing:grayscale;--mantine-color-white:#fff;--mantine-color-black:#000;--mantine-line-height:1.55;--mantine-font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;--mantine-font-family-monospace:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--mantine-font-family-headings:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;--mantine-heading-font-weight:700;--mantine-radius-default:calc(0.25rem*var(--mantine-scale));--mantine-primary-color-0:var(--mantine-color-blue-0);--mantine-primary-color-1:var(--mantine-color-blue-1);--mantine-primary-color-2:var(--mantine-color-blue-2);--mantine-primary-color-3:var(--mantine-color-blue-3);--mantine-primary-color-4:var(--mantine-color-blue-4);--mantine-primary-color-5:var(--mantine-color-blue-5);--mantine-primary-color-6:var(--mantine-color-blue-6);--mantine-primary-color-7:var(--mantine-color-blue-7);--mantine-primary-color-8:var(--mantine-color-blue-8);--mantine-primary-color-9:var(--mantine-color-blue-9);--mantine-primary-color-filled:var(--mantine-color-blue-filled);--mantine-primary-color-filled-hover:var(--mantine-color-blue-filled-hover);--mantine-primary-color-light:var(--mantine-color-blue-light);--mantine-primary-color-light-hover:var(--mantine-color-blue-light-hover);--mantine-primary-color-light-color:var(--mantine-color-blue-light-color);--mantine-breakpoint-xs:36em;--mantine-breakpoint-sm:48em;--mantine-breakpoint-md:62em;--mantine-breakpoint-lg:75em;--mantine-breakpoint-xl:88em;--mantine-spacing-xs:calc(0.625rem*var(--mantine-scale));--mantine-spacing-sm:calc(0.75rem*var(--mantine-scale));--mantine-spacing-md:calc(1rem*var(--mantine-scale));--mantine-spacing-lg:calc(1.25rem*var(--mantine-scale));--mantine-spacing-xl:calc(2rem*var(--mantine-scale));--mantine-font-size-xs:calc(0.75rem*var(--mantine-scale));--mantine-font-size-sm:calc(0.875rem*var(--mantine-scale));--mantine-font-size-md:calc(1rem*var(--mantine-scale));--mantine-font-size-lg:calc(1.125rem*var(--mantine-scale));--mantine-font-size-xl:calc(1.25rem*var(--mantine-scale));--mantine-line-height-xs:1.4;--mantine-line-height-sm:1.45;--mantine-line-height-md:1.55;--mantine-line-height-lg:1.6;--mantine-line-height-xl:1.65;--mantine-shadow-xs:0 calc(0.0625rem*var(--mantine-scale)) calc(0.1875rem*var(--mantine-scale)) rgba(0,0,0,.05),0 calc(0.0625rem*var(--mantine-scale)) calc(0.125rem*var(--mantine-scale)) rgba(0,0,0,.1);--mantine-shadow-sm:0 calc(0.0625rem*var(--mantine-scale)) calc(0.1875rem*var(--mantine-scale)) rgba(0,0,0,.05),rgba(0,0,0,.05) 0 calc(0.625rem*var(--mantine-scale)) calc(0.9375rem*var(--mantine-scale)) calc(-0.3125rem*var(--mantine-scale)),rgba(0,0,0,.04) 0 calc(0.4375rem*var(--mantine-scale)) calc(0.4375rem*var(--mantine-scale)) calc(-0.3125rem*var(--mantine-scale));--mantine-shadow-md:0 calc(0.0625rem*var(--mantine-scale)) calc(0.1875rem*var(--mantine-scale)) rgba(0,0,0,.05),rgba(0,0,0,.05) 0 calc(1.25rem*var(--mantine-scale)) calc(1.5625rem*var(--mantine-scale)) calc(-0.3125rem*var(--mantine-scale)),rgba(0,0,0,.04) 0 calc(0.625rem*var(--mantine-scale)) calc(0.625rem*var(--mantine-scale)) calc(-0.3125rem*var(--mantine-scale));--mantine-shadow-lg:0 calc(0.0625rem*var(--mantine-scale)) calc(0.1875rem*var(--mantine-scale)) rgba(0,0,0,.05),rgba(0,0,0,.05) 0 calc(1.75rem*var(--mantine-scale)) calc(1.4375rem*var(--mantine-scale)) calc(-0.4375rem*var(--mantine-scale)),rgba(0,0,0,.04) 0 calc(0.75rem*var(--mantine-scale)) calc(0.75rem*var(--mantine-scale)) calc(-0.4375rem*var(--mantine-scale));--mantine-shadow-xl:0 calc(0.0625rem*var(--mantine-scale)) calc(0.1875rem*var(--mantine-scale)) rgba(0,0,0,.05),rgba(0,0,0,.05) 0 calc(2.25rem*var(--mantine-scale)) calc(1.75rem*var(--mantine-scale)) calc(-0.4375rem*var(--mantine-scale)),rgba(0,0,0,.04) 0 calc(1.0625rem*var(--mantine-scale)) calc(1.0625rem*var(--mantine-scale)) calc(-0.4375rem*var(--mantine-scale));--mantine-radius-xs:calc(0.125rem*var(--mantine-scale));--mantine-radius-sm:calc(0.25rem*var(--mantine-scale));--mantine-radius-md:calc(0.5rem*var(--mantine-scale));--mantine-radius-lg:calc(1rem*var(--mantine-scale));--mantine-radius-xl:calc(2rem*var(--mantine-scale));--mantine-color-dark-0:#c9c9c9;--mantine-color-dark-1:#b8b8b8;--mantine-color-dark-2:#828282;--mantine-color-dark-3:#696969;--mantine-color-dark-4:#424242;--mantine-color-dark-5:#3b3b3b;--mantine-color-dark-6:#2e2e2e;--mantine-color-dark-7:#242424;--mantine-color-dark-8:#1f1f1f;--mantine-color-dark-9:#141414;--mantine-color-gray-0:#f8f9fa;--mantine-color-gray-1:#f1f3f5;--mantine-color-gray-2:#e9ecef;--mantine-color-gray-3:#dee2e6;--mantine-color-gray-4:#ced4da;--mantine-color-gray-5:#adb5bd;--mantine-color-gray-6:#868e96;--mantine-color-gray-7:#495057;--mantine-color-gray-8:#343a40;--mantine-color-gray-9:#212529;--mantine-color-red-0:#fff5f5;--mantine-color-red-1:#ffe3e3;--mantine-color-red-2:#ffc9c9;--mantine-color-red-3:#ffa8a8;--mantine-color-red-4:#ff8787;--mantine-color-red-5:#ff6b6b;--mantine-color-red-6:#fa5252;--mantine-color-red-7:#f03e3e;--mantine-color-red-8:#e03131;--mantine-color-red-9:#c92a2a;--mantine-color-pink-0:#fff0f6;--mantine-color-pink-1:#ffdeeb;--mantine-color-pink-2:#fcc2d7;--mantine-color-pink-3:#faa2c1;--mantine-color-pink-4:#f783ac;--mantine-color-pink-5:#f06595;--mantine-color-pink-6:#e64980;--mantine-color-pink-7:#d6336c;--mantine-color-pink-8:#c2255c;--mantine-color-pink-9:#a61e4d;--mantine-color-grape-0:#f8f0fc;--mantine-color-grape-1:#f3d9fa;--mantine-color-grape-2:#eebefa;--mantine-color-grape-3:#e599f7;--mantine-color-grape-4:#da77f2;--mantine-color-grape-5:#cc5de8;--mantine-color-grape-6:#be4bdb;--mantine-color-grape-7:#ae3ec9;--mantine-color-grape-8:#9c36b5;--mantine-color-grape-9:#862e9c;--mantine-color-violet-0:#f3f0ff;--mantine-color-violet-1:#e5dbff;--mantine-color-violet-2:#d0bfff;--mantine-color-violet-3:#b197fc;--mantine-color-violet-4:#9775fa;--mantine-color-violet-5:#845ef7;--mantine-color-violet-6:#7950f2;--mantine-color-violet-7:#7048e8;--mantine-color-violet-8:#6741d9;--mantine-color-violet-9:#5f3dc4;--mantine-color-indigo-0:#edf2ff;--mantine-color-indigo-1:#dbe4ff;--mantine-color-indigo-2:#bac8ff;--mantine-color-indigo-3:#91a7ff;--mantine-color-indigo-4:#748ffc;--mantine-color-indigo-5:#5c7cfa;--mantine-color-indigo-6:#4c6ef5;--mantine-color-indigo-7:#4263eb;--mantine-color-indigo-8:#3b5bdb;--mantine-color-indigo-9:#364fc7;--mantine-color-blue-0:#e7f5ff;--mantine-color-blue-1:#d0ebff;--mantine-color-blue-2:#a5d8ff;--mantine-color-blue-3:#74c0fc;--mantine-color-blue-4:#4dabf7;--mantine-color-blue-5:#339af0;--mantine-color-blue-6:#228be6;--mantine-color-blue-7:#1c7ed6;--mantine-color-blue-8:#1971c2;--mantine-color-blue-9:#1864ab;--mantine-color-cyan-0:#e3fafc;--mantine-color-cyan-1:#c5f6fa;--mantine-color-cyan-2:#99e9f2;--mantine-color-cyan-3:#66d9e8;--mantine-color-cyan-4:#3bc9db;--mantine-color-cyan-5:#22b8cf;--mantine-color-cyan-6:#15aabf;--mantine-color-cyan-7:#1098ad;--mantine-color-cyan-8:#0c8599;--mantine-color-cyan-9:#0b7285;--mantine-color-teal-0:#e6fcf5;--mantine-color-teal-1:#c3fae8;--mantine-color-teal-2:#96f2d7;--mantine-color-teal-3:#63e6be;--mantine-color-teal-4:#38d9a9;--mantine-color-teal-5:#20c997;--mantine-color-teal-6:#12b886;--mantine-color-teal-7:#0ca678;--mantine-color-teal-8:#099268;--mantine-color-teal-9:#087f5b;--mantine-color-green-0:#ebfbee;--mantine-color-green-1:#d3f9d8;--mantine-color-green-2:#b2f2bb;--mantine-color-green-3:#8ce99a;--mantine-color-green-4:#69db7c;--mantine-color-green-5:#51cf66;--mantine-color-green-6:#40c057;--mantine-color-green-7:#37b24d;--mantine-color-green-8:#2f9e44;--mantine-color-green-9:#2b8a3e;--mantine-color-lime-0:#f4fce3;--mantine-color-lime-1:#e9fac8;--mantine-color-lime-2:#d8f5a2;--mantine-color-lime-3:#c0eb75;--mantine-color-lime-4:#a9e34b;--mantine-color-lime-5:#94d82d;--mantine-color-lime-6:#82c91e;--mantine-color-lime-7:#74b816;--mantine-color-lime-8:#66a80f;--mantine-color-lime-9:#5c940d;--mantine-color-yellow-0:#fff9db;--mantine-color-yellow-1:#fff3bf;--mantine-color-yellow-2:#ffec99;--mantine-color-yellow-3:#ffe066;--mantine-color-yellow-4:#ffd43b;--mantine-color-yellow-5:#fcc419;--mantine-color-yellow-6:#fab005;--mantine-color-yellow-7:#f59f00;--mantine-color-yellow-8:#f08c00;--mantine-color-yellow-9:#e67700;--mantine-color-orange-0:#fff4e6;--mantine-color-orange-1:#ffe8cc;--mantine-color-orange-2:#ffd8a8;--mantine-color-orange-3:#ffc078;--mantine-color-orange-4:#ffa94d;--mantine-color-orange-5:#ff922b;--mantine-color-orange-6:#fd7e14;--mantine-color-orange-7:#f76707;--mantine-color-orange-8:#e8590c;--mantine-color-orange-9:#d9480f;--mantine-h1-font-size:calc(2.125rem*var(--mantine-scale));--mantine-h1-line-height:1.3;--mantine-h1-font-weight:700;--mantine-h2-font-size:calc(1.625rem*var(--mantine-scale));--mantine-h2-line-height:1.35;--mantine-h2-font-weight:700;--mantine-h3-font-size:calc(1.375rem*var(--mantine-scale));--mantine-h3-line-height:1.4;--mantine-h3-font-weight:700;--mantine-h4-font-size:calc(1.125rem*var(--mantine-scale));--mantine-h4-line-height:1.45;--mantine-h4-font-weight:700;--mantine-h5-font-size:calc(1rem*var(--mantine-scale));--mantine-h5-line-height:1.5;--mantine-h5-font-weight:700;--mantine-h6-font-size:calc(0.875rem*var(--mantine-scale));--mantine-h6-line-height:1.5;--mantine-h6-font-weight:700;color-scheme:var(--mantine-color-scheme)}:root[data-mantine-color-scheme=dark]{--mantine-color-scheme:dark;--mantine-primary-color-contrast:var(--mantine-color-white);--mantine-color-bright:var(--mantine-color-white);--mantine-color-text:var(--mantine-color-dark-0);--mantine-color-body:var(--mantine-color-dark-7);--mantine-color-error:var(--mantine-color-red-8);--mantine-color-placeholder:var(--mantine-color-dark-3);--mantine-color-anchor:var(--mantine-color-blue-4);--mantine-color-default:var(--mantine-color-dark-6);--mantine-color-default-hover:var(--mantine-color-dark-5);--mantine-color-default-color:var(--mantine-color-white);--mantine-color-default-border:var(--mantine-color-dark-4);--mantine-color-dimmed:var(--mantine-color-dark-2);--mantine-color-dark-text:var(--mantine-color-dark-4);--mantine-color-dark-filled:var(--mantine-color-dark-8);--mantine-color-dark-filled-hover:var(--mantine-color-dark-7);--mantine-color-dark-light:rgba(36,36,36,.15);--mantine-color-dark-light-hover:rgba(36,36,36,.2);--mantine-color-dark-light-color:var(--mantine-color-dark-3);--mantine-color-dark-outline:var(--mantine-color-dark-4);--mantine-color-dark-outline-hover:rgba(36,36,36,.05);--mantine-color-gray-text:var(--mantine-color-gray-4);--mantine-color-gray-filled:var(--mantine-color-gray-8);--mantine-color-gray-filled-hover:var(--mantine-color-gray-9);--mantine-color-gray-light:hsla(210,7%,56%,.15);--mantine-color-gray-light-hover:hsla(210,7%,56%,.2);--mantine-color-gray-light-color:var(--mantine-color-gray-3);--mantine-color-gray-outline:var(--mantine-color-gray-4);--mantine-color-gray-outline-hover:rgba(206,212,218,.05);--mantine-color-red-text:var(--mantine-color-red-4);--mantine-color-red-filled:var(--mantine-color-red-8);--mantine-color-red-filled-hover:var(--mantine-color-red-9);--mantine-color-red-light:rgba(250,82,82,.15);--mantine-color-red-light-hover:rgba(250,82,82,.2);--mantine-color-red-light-color:var(--mantine-color-red-3);--mantine-color-red-outline:var(--mantine-color-red-4);--mantine-color-red-outline-hover:hsla(0,100%,76%,.05);--mantine-color-pink-text:var(--mantine-color-pink-4);--mantine-color-pink-filled:var(--mantine-color-pink-8);--mantine-color-pink-filled-hover:var(--mantine-color-pink-9);--mantine-color-pink-light:rgba(230,73,128,.15);--mantine-color-pink-light-hover:rgba(230,73,128,.2);--mantine-color-pink-light-color:var(--mantine-color-pink-3);--mantine-color-pink-outline:var(--mantine-color-pink-4);--mantine-color-pink-outline-hover:rgba(247,131,172,.05);--mantine-color-grape-text:var(--mantine-color-grape-4);--mantine-color-grape-filled:var(--mantine-color-grape-8);--mantine-color-grape-filled-hover:var(--mantine-color-grape-9);--mantine-color-grape-light:rgba(190,75,219,.15);--mantine-color-grape-light-hover:rgba(190,75,219,.2);--mantine-color-grape-light-color:var(--mantine-color-grape-3);--mantine-color-grape-outline:var(--mantine-color-grape-4);--mantine-color-grape-outline-hover:rgba(218,119,242,.05);--mantine-color-violet-text:var(--mantine-color-violet-4);--mantine-color-violet-filled:var(--mantine-color-violet-8);--mantine-color-violet-filled-hover:var(--mantine-color-violet-9);--mantine-color-violet-light:rgba(121,80,242,.15);--mantine-color-violet-light-hover:rgba(121,80,242,.2);--mantine-color-violet-light-color:var(--mantine-color-violet-3);--mantine-color-violet-outline:var(--mantine-color-violet-4);--mantine-color-violet-outline-hover:rgba(151,117,250,.05);--mantine-color-indigo-text:var(--mantine-color-indigo-4);--mantine-color-indigo-filled:var(--mantine-color-indigo-8);--mantine-color-indigo-filled-hover:var(--mantine-color-indigo-9);--mantine-color-indigo-light:rgba(76,110,245,.15);--mantine-color-indigo-light-hover:rgba(76,110,245,.2);--mantine-color-indigo-light-color:var(--mantine-color-indigo-3);--mantine-color-indigo-outline:var(--mantine-color-indigo-4);--mantine-color-indigo-outline-hover:rgba(116,143,252,.05);--mantine-color-blue-text:var(--mantine-color-blue-4);--mantine-color-blue-filled:var(--mantine-color-blue-8);--mantine-color-blue-filled-hover:var(--mantine-color-blue-9);--mantine-color-blue-light:rgba(34,139,230,.15);--mantine-color-blue-light-hover:rgba(34,139,230,.2);--mantine-color-blue-light-color:var(--mantine-color-blue-3);--mantine-color-blue-outline:var(--mantine-color-blue-4);--mantine-color-blue-outline-hover:rgba(77,171,247,.05);--mantine-color-cyan-text:var(--mantine-color-cyan-4);--mantine-color-cyan-filled:var(--mantine-color-cyan-8);--mantine-color-cyan-filled-hover:var(--mantine-color-cyan-9);--mantine-color-cyan-light:rgba(21,170,191,.15);--mantine-color-cyan-light-hover:rgba(21,170,191,.2);--mantine-color-cyan-light-color:var(--mantine-color-cyan-3);--mantine-color-cyan-outline:var(--mantine-color-cyan-4);--mantine-color-cyan-outline-hover:rgba(59,201,219,.05);--mantine-color-teal-text:var(--mantine-color-teal-4);--mantine-color-teal-filled:var(--mantine-color-teal-8);--mantine-color-teal-filled-hover:var(--mantine-color-teal-9);--mantine-color-teal-light:rgba(18,184,134,.15);--mantine-color-teal-light-hover:rgba(18,184,134,.2);--mantine-color-teal-light-color:var(--mantine-color-teal-3);--mantine-color-teal-outline:var(--mantine-color-teal-4);--mantine-color-teal-outline-hover:rgba(56,217,169,.05);--mantine-color-green-text:var(--mantine-color-green-4);--mantine-color-green-filled:var(--mantine-color-green-8);--mantine-color-green-filled-hover:var(--mantine-color-green-9);--mantine-color-green-light:rgba(64,192,87,.15);--mantine-color-green-light-hover:rgba(64,192,87,.2);--mantine-color-green-light-color:var(--mantine-color-green-3);--mantine-color-green-outline:var(--mantine-color-green-4);--mantine-color-green-outline-hover:rgba(105,219,124,.05);--mantine-color-lime-text:var(--mantine-color-lime-4);--mantine-color-lime-filled:var(--mantine-color-lime-8);--mantine-color-lime-filled-hover:var(--mantine-color-lime-9);--mantine-color-lime-light:rgba(130,201,30,.15);--mantine-color-lime-light-hover:rgba(130,201,30,.2);--mantine-color-lime-light-color:var(--mantine-color-lime-3);--mantine-color-lime-outline:var(--mantine-color-lime-4);--mantine-color-lime-outline-hover:rgba(169,227,75,.05);--mantine-color-yellow-text:var(--mantine-color-yellow-4);--mantine-color-yellow-filled:var(--mantine-color-yellow-8);--mantine-color-yellow-filled-hover:var(--mantine-color-yellow-9);--mantine-color-yellow-light:rgba(250,176,5,.15);--mantine-color-yellow-light-hover:rgba(250,176,5,.2);--mantine-color-yellow-light-color:var(--mantine-color-yellow-3);--mantine-color-yellow-outline:var(--mantine-color-yellow-4);--mantine-color-yellow-outline-hover:rgba(255,212,59,.05);--mantine-color-orange-text:var(--mantine-color-orange-4);--mantine-color-orange-filled:var(--mantine-color-orange-8);--mantine-color-orange-filled-hover:var(--mantine-color-orange-9);--mantine-color-orange-light:rgba(253,126,20,.15);--mantine-color-orange-light-hover:rgba(253,126,20,.2);--mantine-color-orange-light-color:var(--mantine-color-orange-3);--mantine-color-orange-outline:var(--mantine-color-orange-4);--mantine-color-orange-outline-hover:rgba(255,169,77,.05)}:root[data-mantine-color-scheme=light]{--mantine-color-scheme:light;--mantine-color-bright:var(--mantine-color-black);--mantine-color-text:var(--mantine-color-black);--mantine-color-body:var(--mantine-color-white);--mantine-primary-color-contrast:var(--mantine-color-white);--mantine-color-error:var(--mantine-color-red-6);--mantine-color-placeholder:var(--mantine-color-gray-5);--mantine-color-anchor:var(--mantine-primary-color-filled);--mantine-color-default:var(--mantine-color-white);--mantine-color-default-hover:var(--mantine-color-gray-0);--mantine-color-default-color:var(--mantine-color-gray-9);--mantine-color-default-border:var(--mantine-color-gray-4);--mantine-color-dimmed:var(--mantine-color-gray-6);--mantine-color-dark-text:var(--mantine-color-dark-filled);--mantine-color-dark-filled:var(--mantine-color-dark-6);--mantine-color-dark-filled-hover:var(--mantine-color-dark-7);--mantine-color-dark-light:rgba(56,56,56,.1);--mantine-color-dark-light-hover:rgba(56,56,56,.12);--mantine-color-dark-light-color:var(--mantine-color-dark-6);--mantine-color-dark-outline:var(--mantine-color-dark-6);--mantine-color-dark-outline-hover:rgba(56,56,56,.05);--mantine-color-gray-text:var(--mantine-color-gray-filled);--mantine-color-gray-filled:var(--mantine-color-gray-6);--mantine-color-gray-filled-hover:var(--mantine-color-gray-7);--mantine-color-gray-light:hsla(210,7%,56%,.1);--mantine-color-gray-light-hover:hsla(210,7%,56%,.12);--mantine-color-gray-light-color:var(--mantine-color-gray-6);--mantine-color-gray-outline:var(--mantine-color-gray-6);--mantine-color-gray-outline-hover:hsla(210,7%,56%,.05);--mantine-color-red-text:var(--mantine-color-red-filled);--mantine-color-red-filled:var(--mantine-color-red-6);--mantine-color-red-filled-hover:var(--mantine-color-red-7);--mantine-color-red-light:rgba(250,82,82,.1);--mantine-color-red-light-hover:rgba(250,82,82,.12);--mantine-color-red-light-color:var(--mantine-color-red-6);--mantine-color-red-outline:var(--mantine-color-red-6);--mantine-color-red-outline-hover:rgba(250,82,82,.05);--mantine-color-pink-text:var(--mantine-color-pink-filled);--mantine-color-pink-filled:var(--mantine-color-pink-6);--mantine-color-pink-filled-hover:var(--mantine-color-pink-7);--mantine-color-pink-light:rgba(230,73,128,.1);--mantine-color-pink-light-hover:rgba(230,73,128,.12);--mantine-color-pink-light-color:var(--mantine-color-pink-6);--mantine-color-pink-outline:var(--mantine-color-pink-6);--mantine-color-pink-outline-hover:rgba(230,73,128,.05);--mantine-color-grape-text:var(--mantine-color-grape-filled);--mantine-color-grape-filled:var(--mantine-color-grape-6);--mantine-color-grape-filled-hover:var(--mantine-color-grape-7);--mantine-color-grape-light:rgba(190,75,219,.1);--mantine-color-grape-light-hover:rgba(190,75,219,.12);--mantine-color-grape-light-color:var(--mantine-color-grape-6);--mantine-color-grape-outline:var(--mantine-color-grape-6);--mantine-color-grape-outline-hover:rgba(190,75,219,.05);--mantine-color-violet-text:var(--mantine-color-violet-filled);--mantine-color-violet-filled:var(--mantine-color-violet-6);--mantine-color-violet-filled-hover:var(--mantine-color-violet-7);--mantine-color-violet-light:rgba(121,80,242,.1);--mantine-color-violet-light-hover:rgba(121,80,242,.12);--mantine-color-violet-light-color:var(--mantine-color-violet-6);--mantine-color-violet-outline:var(--mantine-color-violet-6);--mantine-color-violet-outline-hover:rgba(121,80,242,.05);--mantine-color-indigo-text:var(--mantine-color-indigo-filled);--mantine-color-indigo-filled:var(--mantine-color-indigo-6);--mantine-color-indigo-filled-hover:var(--mantine-color-indigo-7);--mantine-color-indigo-light:rgba(76,110,245,.1);--mantine-color-indigo-light-hover:rgba(76,110,245,.12);--mantine-color-indigo-light-color:var(--mantine-color-indigo-6);--mantine-color-indigo-outline:var(--mantine-color-indigo-6);--mantine-color-indigo-outline-hover:rgba(76,110,245,.05);--mantine-color-blue-text:var(--mantine-color-blue-filled);--mantine-color-blue-filled:var(--mantine-color-blue-6);--mantine-color-blue-filled-hover:var(--mantine-color-blue-7);--mantine-color-blue-light:rgba(34,139,230,.1);--mantine-color-blue-light-hover:rgba(34,139,230,.12);--mantine-color-blue-light-color:var(--mantine-color-blue-6);--mantine-color-blue-outline:var(--mantine-color-blue-6);--mantine-color-blue-outline-hover:rgba(34,139,230,.05);--mantine-color-cyan-text:var(--mantine-color-cyan-filled);--mantine-color-cyan-filled:var(--mantine-color-cyan-6);--mantine-color-cyan-filled-hover:var(--mantine-color-cyan-7);--mantine-color-cyan-light:rgba(21,170,191,.1);--mantine-color-cyan-light-hover:rgba(21,170,191,.12);--mantine-color-cyan-light-color:var(--mantine-color-cyan-6);--mantine-color-cyan-outline:var(--mantine-color-cyan-6);--mantine-color-cyan-outline-hover:rgba(21,170,191,.05);--mantine-color-teal-text:var(--mantine-color-teal-filled);--mantine-color-teal-filled:var(--mantine-color-teal-6);--mantine-color-teal-filled-hover:var(--mantine-color-teal-7);--mantine-color-teal-light:rgba(18,184,134,.1);--mantine-color-teal-light-hover:rgba(18,184,134,.12);--mantine-color-teal-light-color:var(--mantine-color-teal-6);--mantine-color-teal-outline:var(--mantine-color-teal-6);--mantine-color-teal-outline-hover:rgba(18,184,134,.05);--mantine-color-green-text:var(--mantine-color-green-filled);--mantine-color-green-filled:var(--mantine-color-green-6);--mantine-color-green-filled-hover:var(--mantine-color-green-7);--mantine-color-green-light:rgba(64,192,87,.1);--mantine-color-green-light-hover:rgba(64,192,87,.12);--mantine-color-green-light-color:var(--mantine-color-green-6);--mantine-color-green-outline:var(--mantine-color-green-6);--mantine-color-green-outline-hover:rgba(64,192,87,.05);--mantine-color-lime-text:var(--mantine-color-lime-filled);--mantine-color-lime-filled:var(--mantine-color-lime-6);--mantine-color-lime-filled-hover:var(--mantine-color-lime-7);--mantine-color-lime-light:rgba(130,201,30,.1);--mantine-color-lime-light-hover:rgba(130,201,30,.12);--mantine-color-lime-light-color:var(--mantine-color-lime-6);--mantine-color-lime-outline:var(--mantine-color-lime-6);--mantine-color-lime-outline-hover:rgba(130,201,30,.05);--mantine-color-yellow-text:var(--mantine-color-yellow-filled);--mantine-color-yellow-filled:var(--mantine-color-yellow-6);--mantine-color-yellow-filled-hover:var(--mantine-color-yellow-7);--mantine-color-yellow-light:rgba(250,176,5,.1);--mantine-color-yellow-light-hover:rgba(250,176,5,.12);--mantine-color-yellow-light-color:var(--mantine-color-yellow-6);--mantine-color-yellow-outline:var(--mantine-color-yellow-6);--mantine-color-yellow-outline-hover:rgba(250,176,5,.05);--mantine-color-orange-text:var(--mantine-color-orange-filled);--mantine-color-orange-filled:var(--mantine-color-orange-6);--mantine-color-orange-filled-hover:var(--mantine-color-orange-7);--mantine-color-orange-light:rgba(253,126,20,.1);--mantine-color-orange-light-hover:rgba(253,126,20,.12);--mantine-color-orange-light-color:var(--mantine-color-orange-6);--mantine-color-orange-outline:var(--mantine-color-orange-6);--mantine-color-orange-outline-hover:rgba(253,126,20,.05)}.m-d57069b5{--scrollarea-scrollbar-size:calc(0.75rem*var(--mantine-scale));overflow:hidden;position:relative}.m-c0783ff9{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;height:100%;scrollbar-width:none;width:100%}.m-c0783ff9::-webkit-scrollbar{display:none}.m-c0783ff9:where([data-scrollbars=xy] [data-scrollbars=y]):where([data-offset-scrollbars=xy],[data-offset-scrollbars=y]){padding-left:unset;padding-right:var(--scrollarea-scrollbar-size)}:where([dir=rtl]) .m-c0783ff9:where([data-scrollbars=xy] [data-scrollbars=y]):where([data-offset-scrollbars=xy],[data-offset-scrollbars=y]){padding-left:var(--scrollarea-scrollbar-size);padding-right:unset}.m-c0783ff9:where([data-scrollbars=xy],[data-scrollbars=x]):where([data-offset-scrollbars=xy] [data-offset-scrollbars=x]){padding-bottom:var(--scrollarea-scrollbar-size)}.m-f8f631dd{display:table;min-width:100%}.m-c44ba933{background-color:transparent;box-sizing:border-box;display:flex;flex-direction:row;padding:calc(var(--scrollarea-scrollbar-size)/5);touch-action:none;transition:background-color .15s ease,opacity .15s ease;user-select:none}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-c44ba933:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=light]) .m-c44ba933:hover>.m-d8b5e363{background-color:rgba(0,0,0,.5)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:hover{background-color:var(--mantine-color-dark-8)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:hover>.m-d8b5e363{background-color:hsla(0,0%,100%,.5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-c44ba933:active{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=light]) .m-c44ba933:active>.m-d8b5e363{background-color:rgba(0,0,0,.5)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:active{background-color:var(--mantine-color-dark-8)}:where([data-mantine-color-scheme=dark]) .m-c44ba933:active>.m-d8b5e363{background-color:hsla(0,0%,100%,.5)}}.m-c44ba933:where([data-hidden],[data-state=hidden]){display:none}.m-c44ba933:where([data-orientation=vertical]){bottom:var(--sa-corner-width);right:0;top:0;width:var(--scrollarea-scrollbar-size)}[dir=rtl] .m-c44ba933:where([data-orientation=vertical]){left:0;right:unset}.m-c44ba933:where([data-orientation=horizontal]){bottom:0;flex-direction:column;height:var(--scrollarea-scrollbar-size);left:0;right:var(--sa-corner-height)}[dir=rtl] .m-c44ba933:where([data-orientation=horizontal]){left:var(--sa-corner-height);right:0}.m-d8b5e363{border-radius:var(--scrollarea-scrollbar-size);flex:1;overflow:hidden;position:relative;transition:background-color .15s ease}.m-d8b5e363:before{content:'""';height:100%;left:50%;min-height:calc(2.75rem*var(--mantine-scale));min-width:calc(2.75rem*var(--mantine-scale));position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}[data-mantine-color-scheme=light] .m-d8b5e363{background-color:rgba(0,0,0,.4)}[data-mantine-color-scheme=dark] .m-d8b5e363{background-color:hsla(0,0%,100%,.4)}.m-21657268{bottom:0;display:block;opacity:0;position:absolute;right:0;transition:opacity .15s ease}[dir=rtl] .m-21657268{bottom:0;left:0;right:unset}:where([data-mantine-color-scheme=light]) .m-21657268{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-21657268{background-color:var(--mantine-color-dark-8)}.m-21657268:where([data-hovered]){opacity:1}.m-21657268:where([data-hidden]){display:none}.m-87cf2631{-webkit-tap-highlight-color:transparent;appearance:none;background-color:transparent;border:0;color:inherit;cursor:pointer;font-size:var(--mantine-font-size-md);padding:0;text-align:left;text-decoration:none;touch-action:manipulation}:where([dir=rtl]) .m-87cf2631{text-align:right}.m-515a97f8{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.m-1b7284a3{--paper-radius:var(--mantine-radius-default);-webkit-tap-highlight-color:transparent;background-color:var(--mantine-color-body);border-radius:var(--paper-radius);box-shadow:var(--paper-shadow);display:block;outline:0;text-decoration:none;touch-action:manipulation}:where([data-mantine-color-scheme=light]) .m-1b7284a3:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-1b7284a3:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-38a85659{border:calc(.0625rem*var(--mantine-scale)) solid var(--popover-border-color);border-radius:var(--popover-radius,var(--mantine-radius-default));box-shadow:var(--popover-shadow,none);padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);position:absolute}.m-38a85659:focus{outline:none}[data-mantine-color-scheme=light] .m-38a85659{--popover-border-color:var(--mantine-color-gray-2);background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-38a85659{--popover-border-color:var(--mantine-color-dark-4);background-color:var(--mantine-color-dark-6)}.m-a31dc6c1{background-color:inherit;border:calc(.0625rem*var(--mantine-scale)) solid var(--popover-border-color);z-index:1}.m-5ae2e3c{--loader-size-xs:calc(1.125rem*var(--mantine-scale));--loader-size-sm:calc(1.375rem*var(--mantine-scale));--loader-size-md:calc(2.25rem*var(--mantine-scale));--loader-size-lg:calc(2.75rem*var(--mantine-scale));--loader-size-xl:calc(3.625rem*var(--mantine-scale));--loader-size:var(--loader-size-md);--loader-color:var(--mantine-primary-color-filled)}@keyframes m-5d2b3b9d{0%{opacity:0;transform:scale(.6)}50%,to{transform:scale(1)}}.m-7a2bd4cd{display:flex;gap:calc(var(--loader-size)/5);height:var(--loader-size);position:relative;width:var(--loader-size)}.m-870bb79{animation:m-5d2b3b9d 1.2s cubic-bezier(0,.5,.5,1) infinite;background:var(--loader-color);border-radius:calc(.125rem*var(--mantine-scale));flex:1}.m-870bb79:first-of-type{animation-delay:-.24s}.m-870bb79:nth-of-type(2){animation-delay:-.12s}.m-870bb79:nth-of-type(3){animation-delay:0}@keyframes m-aac34a1{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.6)}}.m-4e3f22d7{align-items:center;display:flex;gap:calc(var(--loader-size)/10);height:var(--loader-size);justify-content:center;position:relative;width:var(--loader-size)}.m-870c4af{animation:m-aac34a1 .8s linear infinite;background:var(--loader-color);border-radius:50%;height:calc(var(--loader-size)/3 - var(--loader-size)/15);width:calc(var(--loader-size)/3 - var(--loader-size)/15)}.m-870c4af:nth-child(2){animation-delay:.4s}@keyframes m-f8e89c4b{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.m-b34414df{display:inline-block}.m-b34414df,.m-b34414df:after{height:var(--loader-size);width:var(--loader-size)}.m-b34414df:after{animation:m-f8e89c4b 1.2s linear infinite;border-color:var(--loader-color) var(--loader-color) var(--loader-color) transparent;border-radius:calc(625rem*var(--mantine-scale));border-style:solid;border-width:calc(var(--loader-size)/8);content:"";display:block}.m-8d3f4000{--ai-size-xs:calc(1.125rem*var(--mantine-scale));--ai-size-sm:calc(1.375rem*var(--mantine-scale));--ai-size-md:calc(1.75rem*var(--mantine-scale));--ai-size-lg:calc(2.125rem*var(--mantine-scale));--ai-size-xl:calc(2.75rem*var(--mantine-scale));--ai-size-input-xs:calc(1.875rem*var(--mantine-scale));--ai-size-input-sm:calc(2.25rem*var(--mantine-scale));--ai-size-input-md:calc(2.625rem*var(--mantine-scale));--ai-size-input-lg:calc(3.125rem*var(--mantine-scale));--ai-size-input-xl:calc(3.75rem*var(--mantine-scale));--ai-size:var(--ai-size-md);--ai-color:var(--mantine-color-white);align-items:center;background:var(--_ai-bg,var(--ai-bg,var(--mantine-primary-color-filled)));border:var(--ai-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ai-radius,var(--mantine-radius-default));color:var(--_ai-color,var(--ai-color,var(--mantine-color-white)));cursor:var(--_ai-cursor,pointer);display:inline-flex;height:var(--ai-size);justify-content:center;line-height:1;min-height:var(--ai-size);min-width:var(--ai-size);overflow:hidden;position:relative;user-select:none;width:var(--ai-size)}@media (hover:hover){.m-8d3f4000:hover:not([data-loading]):not(:disabled):not([data-disabled]){--_ai-bg:var(--ai-hover,var(--mantine-primary-color-filled-hover));--_ai-color:var(--ai-hover-color)}}@media (hover:none){.m-8d3f4000:active:not([data-loading]):not(:disabled):not([data-disabled]){--_ai-bg:var(--ai-hover,var(--mantine-primary-color-filled-hover));--_ai-color:var(--ai-hover-color)}}[data-mantine-color-scheme=light] .m-8d3f4000{--_ai-loading-overlay-bg:hsla(0,0%,100%,.35);--_ai-disabled-bg:var(--mantine-color-gray-1);--_ai-disabled-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-8d3f4000{--_ai-loading-overlay-bg:rgba(0,0,0,.35);--_ai-disabled-bg:var(--mantine-color-dark-6);--_ai-disabled-color:var(--mantine-color-dark-3)}.m-8d3f4000[data-loading]{--_ai-cursor:not-allowed}.m-8d3f4000[data-loading] .m-302b9fb1{opacity:1;transform:none}.m-8d3f4000[data-loading] .m-8d3afb97{opacity:0;transform:translateY(100%)}.m-8d3f4000:disabled:not([data-loading]),.m-8d3f4000[data-disabled]:not([data-loading]){--_ai-cursor:not-allowed;--_ai-bg:var(--_ai-disabled-bg);--_ai-color:var(--_ai-disabled-color);--ai-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent!important}.m-8d3f4000:disabled:not([data-loading]):active,.m-8d3f4000[data-disabled]:not([data-loading]):active{transform:none}.m-302b9fb1{align-items:center;background-color:var(--_ai-loading-overlay-bg);border-radius:var(--ai-radius,var(--mantine-radius-default));display:flex;inset:calc(-.0625rem*var(--mantine-scale));justify-content:center;opacity:0;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease}.m-1a0f1b21{--ai-border-width:calc(0.0625rem*var(--mantine-scale));display:flex}.m-1a0f1b21[data-orientation=horizontal]{flex-direction:row}.m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):first-child{border-bottom-right-radius:0;border-right-width:calc(var(--ai-border-width)/2);border-top-right-radius:0}.m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):last-child{border-bottom-left-radius:0;border-left-width:calc(var(--ai-border-width)/2);border-top-left-radius:0}.m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):not(:first-child):not(:last-child){border-left-width:calc(var(--ai-border-width)/2);border-radius:0;border-right-width:calc(var(--ai-border-width)/2)}[dir=rtl] .m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):first-child{border:var(--ai-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ai-radius,var(--mantine-radius-default));border-bottom-left-radius:0;border-left-width:calc(var(--ai-border-width)/2);border-top-left-radius:0}[dir=rtl] .m-1a0f1b21[data-orientation=horizontal] .m-8d3f4000:not(:only-child):last-child{border:var(--ai-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ai-radius,var(--mantine-radius-default));border-bottom-right-radius:0;border-right-width:calc(var(--ai-border-width)/2);border-top-right-radius:0}.m-1a0f1b21[data-orientation=vertical]{flex-direction:column}.m-1a0f1b21[data-orientation=vertical] .m-8d3f4000:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:calc(var(--ai-border-width)/2)}.m-1a0f1b21[data-orientation=vertical] .m-8d3f4000:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.m-1a0f1b21[data-orientation=vertical] .m-8d3f4000:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--ai-border-width)/2);border-radius:0;border-top-width:calc(var(--ai-border-width)/2)}.m-8d3afb97{display:flex;transition:transform .15s ease,opacity .1s ease}.m-86a44da5,.m-8d3afb97{align-items:center;justify-content:center}.m-86a44da5{--cb-size-xs:calc(1.125rem*var(--mantine-scale));--cb-size-sm:calc(1.375rem*var(--mantine-scale));--cb-size-md:calc(1.75rem*var(--mantine-scale));--cb-size-lg:calc(2.125rem*var(--mantine-scale));--cb-size-xl:calc(2.75rem*var(--mantine-scale));--cb-size:var(--cb-size-md);--cb-icon-size:70%;--cb-radius:var(--mantine-radius-default);border-radius:var(--cb-radius);color:var(--_cb-color);display:inline-flex;height:var(--cb-size);line-height:1;min-height:var(--cb-size);min-width:var(--cb-size);position:relative;user-select:none;width:var(--cb-size)}:where([data-mantine-color-scheme=light]) .m-86a44da5{color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-86a44da5{color:var(--mantine-color-dark-1)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-220c80f2:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-220c80f2:hover{background-color:var(--mantine-color-dark-6)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-220c80f2:active{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-220c80f2:active{background-color:var(--mantine-color-dark-6)}}.m-4081bf90{align-items:var(--group-align,center);display:flex;flex-direction:row;flex-wrap:var(--group-wrap,wrap);gap:var(--group-gap,var(--mantine-spacing-md));justify-content:var(--group-justify,flex-start)}.m-4081bf90:where([data-grow])>*{flex-grow:1;max-width:var(--group-child-width)}.m-9814e45f{backdrop-filter:var(--overlay-filter);-webkit-backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));border-radius:var(--overlay-radius,0);inset:0;position:absolute;z-index:var(--overlay-z-index)}.m-9814e45f:where([data-fixed]){position:fixed}.m-9814e45f:where([data-center]){align-items:center;display:flex;justify-content:center}.m-615af6c9{font-size:var(--mantine-font-size-md);font-weight:400;line-height:1;margin:0;padding:0}.m-b5489c3c{align-items:center;background-color:var(--mantine-color-body);display:flex;justify-content:space-between;min-height:calc(3.75rem*var(--mantine-scale));padding:var(--mb-padding,var(--mantine-spacing-md));padding-left:var(--_pl,var(--mb-padding,var(--mantine-spacing-md)));padding-right:var(--_pr,calc(var(--mb-padding, var(--mantine-spacing-md)) - .3125rem*var(--mantine-scale)));position:sticky;top:0;z-index:1000}[dir=rtl] .m-b5489c3c{--_pr:var(--mb-padding,var(--mantine-spacing-md));--_pl:calc(var(--mb-padding, var(--mantine-spacing-md)) - 0.3125rem*var(--mantine-scale))}.m-60c222c7{bottom:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:var(--mb-z-index)}.m-fd1ab0aa{box-shadow:var(--mb-shadow,var(--mantine-shadow-xl));pointer-events:all}.m-606cb269{margin-left:var(--_close-ml,auto);margin-right:var(--_close-mr,0)}[dir=rtl] .m-606cb269{--_close-ml:0;--_close-mr:auto}.m-5df29311{padding:var(--mb-padding,var(--mantine-spacing-md));padding-top:var(--_pt,var(--mb-padding,var(--mantine-spacing-md)))}.m-5df29311:not(:only-child){--_pt:0}.m-6c018570{--input-height-xs:calc(1.875rem*var(--mantine-scale));--input-height-sm:calc(2.25rem*var(--mantine-scale));--input-height-md:calc(2.625rem*var(--mantine-scale));--input-height-lg:calc(3.125rem*var(--mantine-scale));--input-height-xl:calc(3.75rem*var(--mantine-scale));--input-padding-y-xs:calc(0.3125rem*var(--mantine-scale));--input-padding-y-sm:calc(0.375rem*var(--mantine-scale));--input-padding-y-md:calc(0.5rem*var(--mantine-scale));--input-padding-y-lg:calc(0.625rem*var(--mantine-scale));--input-padding-y-xl:calc(0.8125rem*var(--mantine-scale));--_input-height:var(--input-height,var(--input-height-sm));--_input-radius:var(--input-radius,var(--mantine-radius-default));--_input-cursor:text;--_input-text-align:left;--_input-line-height:calc(var(--_input-height) - 0.125rem*var(--mantine-scale));--_input-padding:calc(var(--_input-height)/3);--_input-padding-left:var(--_input-padding);--_input-padding-right:var(--_input-padding);--_input-placeholder-color:var(--mantine-color-placeholder);--_input-color:var(--mantine-color-text);--_input-left-section-size:var( + --input-left-section-width,calc(var(--_input-height) - 0.125rem*var(--mantine-scale)) + );--_input-right-section-size:var( + --input-right-section-width,calc(var(--_input-height) - 0.125rem*var(--mantine-scale)) + );--_input-size:var(--_input-height);--_section-y:calc(0.0625rem*var(--mantine-scale));--_left-section-left:calc(0.0625rem*var(--mantine-scale));--_left-section-right:unset;--_left-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius);--_right-section-left:unset;--_right-section-right:calc(0.0625rem*var(--mantine-scale));--_right-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;margin-bottom:var(--input-margin-bottom,0);margin-top:var(--input-margin-top,0);position:relative}.m-6c018570[data-variant=unstyled]{--input-padding:0;--input-padding-y:0;--_input-padding-left:0;--_input-padding-right:0}.m-6c018570[data-pointer]{--_input-cursor:pointer}.m-6c018570[data-multiline]{--input-padding-y-xs:calc(0.28125rem*var(--mantine-scale));--input-padding-y-sm:calc(0.34375rem*var(--mantine-scale));--input-padding-y-md:calc(0.4375rem*var(--mantine-scale));--input-padding-y-lg:calc(0.59375rem*var(--mantine-scale));--input-padding-y-xl:calc(0.8125rem*var(--mantine-scale));--_input-size:auto;--_input-line-height:var(--mantine-line-height);--input-padding-y:var(--input-padding-y-sm)}.m-6c018570[data-with-left-section]{--_input-padding-left:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]{--_input-padding-right:var(--_input-left-section-size)}[dir=rtl] .m-6c018570[data-with-left-section]:not([data-with-right-section]){--_input-padding-left:var(--_input-padding)}.m-6c018570[data-with-right-section]{--_input-padding-right:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]{--_input-padding-left:var(--_input-right-section-size)}[dir=rtl] .m-6c018570[data-with-right-section]:not([data-with-left-section]){--_input-padding-right:var(--_input-padding)}[data-mantine-color-scheme=light] .m-6c018570{--_input-disabled-bg:var(--mantine-color-gray-1);--_input-disabled-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-gray-4);--_input-bg:var(--mantine-color-white);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-gray-1);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=light] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme=dark] .m-6c018570{--_input-disabled-bg:var(--mantine-color-dark-6);--_input-disabled-color:var(--mantine-color-dark-2)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=default]{--_input-bd:var(--mantine-color-dark-4);--_input-bg:var(--mantine-color-dark-6);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=filled]{--_input-bd:transparent;--_input-bg:var(--mantine-color-dark-5);--_input-bd-focus:var(--mantine-primary-color-filled)}[data-mantine-color-scheme=dark] .m-6c018570[data-variant=unstyled]{--_input-bd:transparent;--_input-bg:transparent;--_input-bd-focus:transparent}[data-mantine-color-scheme] .m-6c018570[data-error]:not([data-variant=unstyled]){--_input-bd:var(--mantine-color-error)}[data-mantine-color-scheme] .m-6c018570[data-error]{--_input-color:var(--mantine-color-error);--_input-placeholder-color:var(--mantine-color-error);--_input-section-color:var(--mantine-color-error)}[dir=rtl] .m-6c018570{--_input-text-align:right;--_left-section-left:unset;--_left-section-right:calc(0.0625rem*var(--mantine-scale));--_left-section-border-radius:0 var(--_input-radius) var(--_input-radius) 0;--_right-section-left:calc(0.0625rem*var(--mantine-scale));--_right-section-right:unset;--_right-section-border-radius:var(--_input-radius) 0 0 var(--_input-radius)}.m-8fb7ebe7{-webkit-tap-highlight-color:transparent;appearance:none;background-color:var(--_input-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_input-bd);border-radius:var(--_input-radius);color:var(--_input-color);cursor:var(--_input-cursor);display:block;font-family:var(--_input-font-family,var(--mantine-font-family));font-size:var(--_input-fz,var(--input-fz,var(--mantine-font-size-sm)));height:var(--_input-size);line-height:var(--_input-line-height);min-height:var(--_input-height);overflow:var(--_input-overflow);padding:var(--input-padding-y,0) var(--_input-padding-right) var(--input-padding-y,0) var(--_input-padding-left);resize:var(--input-resize,none);text-align:var(--_input-text-align);transition:border-color .1s ease;width:100%}.m-8fb7ebe7[data-no-overflow]{--_input-overflow:hidden}.m-8fb7ebe7[data-monospace]{--_input-font-family:var(--mantine-font-family-monospace);--_input-fz:calc(var(--input-fz, var(--mantine-font-size-sm)) - 0.125rem*var(--mantine-scale))}.m-8fb7ebe7:focus,.m-8fb7ebe7:focus-within{--_input-bd:var(--_input-bd-focus);outline:none}[data-error] .m-8fb7ebe7:focus,[data-error] .m-8fb7ebe7:focus-within{--_input-bd:var(--mantine-color-error)}.m-8fb7ebe7::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-8fb7ebe7::-webkit-inner-spin-button,.m-8fb7ebe7::-webkit-outer-spin-button,.m-8fb7ebe7::-webkit-search-cancel-button,.m-8fb7ebe7::-webkit-search-decoration,.m-8fb7ebe7::-webkit-search-results-button,.m-8fb7ebe7::-webkit-search-results-decoration{appearance:none}.m-8fb7ebe7[type=number]{-moz-appearance:textfield}.m-8fb7ebe7:disabled,.m-8fb7ebe7[data-disabled]{background-color:var(--_input-disabled-bg);color:var(--_input-disabled-color);cursor:not-allowed;opacity:.6}.m-8fb7ebe7:has(input:disabled){background-color:var(--_input-disabled-bg);color:var(--_input-disabled-color);cursor:not-allowed;opacity:.6}.m-82577fc2{align-items:center;border-radius:var(--_section-border-radius);bottom:var(--_section-y);color:var(--_input-section-color,var(--mantine-color-dimmed));display:flex;justify-content:center;left:var(--_section-left);pointer-events:var(--_section-pointer-events);position:absolute;right:var(--_section-right);top:var(--_section-y);width:var(--_section-size);z-index:1}.m-82577fc2[data-position=right]{--_section-pointer-events:var(--input-right-section-pointer-events);--_section-left:var(--_right-section-left);--_section-right:var(--_right-section-right);--_section-size:var(--_input-right-section-size);--_section-border-radius:var(--_right-section-border-radius)}.m-82577fc2[data-position=left]{--_section-pointer-events:var(--input-left-section-pointer-events);--_section-left:var(--_left-section-left);--_section-right:var(--_left-section-right);--_section-size:var(--_input-left-section-size);--_section-border-radius:var(--_left-section-border-radius)}.m-88bacfd0{color:var(--_input-placeholder-color,var(--mantine-color-placeholder))}[data-error] .m-88bacfd0{--_input-placeholder-color:var(--_input-color,var(--mantine-color-placeholder))}.m-46b77525{line-height:var(--mantine-line-height)}.m-8fdc1311{-webkit-tap-highlight-color:transparent;cursor:default;display:inline-block;font-size:var(--input-label-size,var(--mantine-font-size-sm));font-weight:500;word-break:break-word}.m-78a94662{color:var(--input-asterisk-color,var(--mantine-color-error))}.m-8f816625,.m-fe47ce59{word-wrap:break-word;display:block;line-height:1.2;margin:0;padding:0}.m-8f816625{color:var(--mantine-color-error);font-size:var(--input-error-size,calc(var(--mantine-font-size-sm) - .125rem*var(--mantine-scale)))}.m-fe47ce59{color:var(--mantine-color-dimmed);font-size:var(--input-description-size,calc(var(--mantine-font-size-sm) - .125rem*var(--mantine-scale)))}.m-8bffd616{display:flex}.m-9bdbb667{--_accordion-radius:var(--accordion-radius,var(--mantine-radius-default))}.m-df78851f{word-break:break-word}.m-4ba554d4{padding:var(--mantine-spacing-md);padding-top:calc(var(--mantine-spacing-xs)/2)}.m-8fa820a0{margin:0;padding:0}.m-4ba585b8{align-items:center;background-color:var(--_control-background-color,transparent);color:var(--_control-color);cursor:var(--_control-cursor,pointer);display:flex;flex-direction:var(--_control-flex-direction,row-reverse);opacity:var(--_control-opacity,1);padding-left:var(--_control-padding-left,var(--mantine-spacing-md));padding-right:var(--_control-padding-right,var(--mantine-spacing-md));text-align:left;width:100%}.m-4ba585b8[data-chevron-position=left]{--_control-flex-direction:row;--_control-padding-left:0}[dir=rtl] .m-4ba585b8[data-chevron-position=left]{--_control-padding-left:var(--mantine-spacing-md)}[data-mantine-color-scheme=light] .m-4ba585b8{--_control-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-4ba585b8{--_control-color:var(--mantine-color-dark-0)}.m-4ba585b8:disabled,.m-4ba585b8[data-disabled]{--_control-opacity:0.4;--_control-cursor:not-allowed}@media (hover:hover){[data-mantine-color-scheme=light] .m-4271d21b:not(:disabled,[data-disabled]):hover,[data-mantine-color-scheme=light] .m-6939a5e9:not(:disabled,[data-disabled]):hover{--_control-background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-4271d21b:not(:disabled,[data-disabled]):hover,[data-mantine-color-scheme=dark] .m-6939a5e9:not(:disabled,[data-disabled]):hover{--_control-background-color:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-4271d21b:not(:disabled,[data-disabled]):active,[data-mantine-color-scheme=light] .m-6939a5e9:not(:disabled,[data-disabled]):active{--_control-background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-4271d21b:not(:disabled,[data-disabled]):active,[data-mantine-color-scheme=dark] .m-6939a5e9:not(:disabled,[data-disabled]):active{--_control-background-color:var(--mantine-color-dark-6)}}.m-df3ffa0f{color:inherit;flex:1;font-weight:400;overflow:hidden;padding-bottom:var(--mantine-spacing-sm);padding-top:var(--mantine-spacing-sm);text-overflow:ellipsis}[dir=rtl] .m-df3ffa0f{text-align:right}.m-3f35ae96{align-items:center;display:flex;justify-content:flex-start;margin-left:var(--_chevron-margin-left);margin-right:var(--_chevron-margin-right);min-width:var(--accordion-chevron-size,calc(.9375rem*var(--mantine-scale)));transform:var(--_chevron-transform,rotate(0deg));transition:transform var(--accordion-transition-duration,.2s) ease;width:var(--accordion-chevron-size,calc(.9375rem*var(--mantine-scale)))}.m-3f35ae96[data-rotate]{--_chevron-transform:rotate(180deg)}.m-3f35ae96[data-position=left]{--_chevron-margin-right:var(--mantine-spacing-md);--_chevron-margin-left:var(--mantine-spacing-md)}.m-3f35ae96[data-position=right]{--_chevron-margin-left:0}[dir=rtl] .m-3f35ae96[data-position=left]{--_chevron-margin-right:0;--_chevron-margin-left:var(--mantine-spacing-md)}[dir=rtl] .m-3f35ae96[data-position=right]{--_chevron-margin-right:var(--mantine-spacing-md);--_chevron-margin-left:0}.m-9bd771fe{align-items:center;display:flex;justify-content:center;margin-left:var(--_icon-margin-left,0);margin-right:var(--_icon-margin-right,var(--mantine-spacing-sm))}.m-9bd771fe[data-chevron-position=left]{--_icon-margin-right:0;--_icon-margin-left:var(--mantine-spacing-lg)}[dir=rtl] .m-9bd771fe[data-chevron-position=left]{--_icon-margin-right:var(--mantine-spacing-lg);--_icon-margin-left:0}[dir=rtl] .m-9bd771fe[data-chevron-position=right]{--_icon-margin-right:0;--_icon-margin-left:var(--mantine-spacing-sm)}.m-9bd7b098{background-color:var(--_item-bg)}[data-mantine-color-scheme=light] .m-9bd7b098{--_item-border-color:var(--mantine-color-gray-3);--_item-filled-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-9bd7b098{--_item-border-color:var(--mantine-color-dark-4);--_item-filled-color:var(--mantine-color-dark-6)}.m-fe19b709{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_item-border-color)}.m-1f921b3b{border:calc(.0625rem*var(--mantine-scale)) solid var(--_item-border-color);transition:background-color .15s ease}.m-1f921b3b[data-active]{--_item-bg:var(--_item-filled-color)}.m-1f921b3b:first-of-type,.m-1f921b3b:first-of-type>[data-accordion-control]{border-top-left-radius:var(--_accordion-radius);border-top-right-radius:var(--_accordion-radius)}.m-1f921b3b:last-of-type,.m-1f921b3b:last-of-type>[data-accordion-control]{border-bottom-left-radius:var(--_accordion-radius);border-bottom-right-radius:var(--_accordion-radius)}.m-1f921b3b+.m-1f921b3b{border-top:0}.m-2cdf939a{border-radius:var(--_accordion-radius)}.m-2cdf939a[data-active],.m-9f59b069{--_item-bg:var(--_item-filled-color)}.m-9f59b069{border:calc(.0625rem*var(--mantine-scale)) solid var(--__item-border-color,transparent);border-radius:var(--_accordion-radius);transition:background-color .15s ease}.m-9f59b069[data-active]{--__item-border-color:var(--_item-border-color)}[data-mantine-color-scheme=light] .m-9f59b069[data-active]{--_item-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-9f59b069[data-active]{--_item-bg:var(--mantine-color-dark-7)}.m-9f59b069+.m-9f59b069{margin-top:var(--mantine-spacing-md)}.m-7f854edf{bottom:var(--affix-bottom);left:var(--affix-left);position:fixed;right:var(--affix-right);top:var(--affix-top);z-index:var(--affix-z-index)}.m-66836ed3{--alert-radius:var(--mantine-radius-default);--alert-bg:var(--mantine-primary-color-light);--alert-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;--alert-color:var(--mantine-primary-color-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);overflow:hidden;padding:var(--mantine-spacing-md) var(--mantine-spacing-md);position:relative}.m-667c2793,.m-a5d60502{display:flex}.m-667c2793{flex:1;flex-direction:column;gap:var(--mantine-spacing-xs)}.m-6a03f287{align-items:center;display:flex;font-size:var(--mantine-font-size-sm);font-weight:700;justify-content:space-between}.m-6a03f287:where([data-with-close-button]){padding-right:var(--mantine-spacing-md)}:where([dir=rtl]) .m-6a03f287:where([data-with-close-button]){padding-left:var(--mantine-spacing-md);padding-right:0}.m-698f4f23{display:block;overflow:hidden;text-overflow:ellipsis}.m-667f2a6a{align-items:center;display:flex;height:calc(1.25rem*var(--mantine-scale));justify-content:flex-start;line-height:1;margin-right:var(--mantine-spacing-md);margin-top:calc(.0625rem*var(--mantine-scale));width:calc(1.25rem*var(--mantine-scale))}:where([dir=rtl]) .m-667f2a6a{margin-left:var(--mantine-spacing-md);margin-right:0}.m-7fa78076{font-size:var(--mantine-font-size-sm);overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .m-7fa78076{color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-7fa78076{color:var(--mantine-color-white)}.m-7fa78076:where([data-variant=filled]){color:var(--alert-color)}.m-7fa78076:where([data-variant=white]){color:var(--mantine-color-black)}.m-87f54839{color:var(--alert-color);height:calc(1.25rem*var(--mantine-scale));width:calc(1.25rem*var(--mantine-scale))}.m-b6d8b162{-webkit-tap-highlight-color:transparent;color:var(--text-color);font-size:var(--text-fz,var(--mantine-font-size-md));font-weight:400;line-height:var(--_text-line-height,var(--text-lh,var(--mantine-line-height-md)));margin:0;padding:0;text-decoration:none}.m-b6d8b162[data-truncate]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-b6d8b162[data-truncate=start]{direction:rtl;text-align:right}[dir=rtl] .m-b6d8b162[data-truncate=start]{direction:ltr;text-align:left}.m-b6d8b162[data-variant=gradient]{-webkit-text-fill-color:transparent;background-clip:text;-webkit-background-clip:text;background-image:var(--text-gradient)}.m-b6d8b162[data-line-clamp]{-webkit-line-clamp:var(--text-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.m-b6d8b162[data-inherit]{font-size:inherit;font-weight:inherit;line-height:inherit}.m-b6d8b162[data-inline]{--_text-line-height:1}.m-849cf0da{appearance:none;background-color:transparent;border:none;color:var(--mantine-color-anchor);cursor:pointer;display:inline;margin:0;padding:0;text-decoration:none}@media (hover:hover){.m-849cf0da:where([data-underline=hover]):hover{text-decoration:underline}}@media (hover:none){.m-849cf0da:where([data-underline=hover]):active{text-decoration:underline}}.m-849cf0da:where([data-underline=always]){text-decoration:underline}.m-89ab340[data-resizing]{--app-shell-transition-duration:0ms!important}.m-89ab340[data-disabled]{--app-shell-header-offset:0px!important;--app-shell-navbar-offset:0px!important}[data-mantine-color-scheme=light] .m-89ab340{--_app-shell-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-89ab340{--_app-shell-border-color:var(--mantine-color-dark-4)}.m-3840c879,.m-3b16f56b,.m-45252eee,.m-8983817,.m-9cdde9a{transition-duration:var(--app-shell-transition-duration);transition-timing-function:var(--app-shell-transition-timing-function)}.m-45252eee,.m-9cdde9a{background-color:var(--mantine-color-body);display:flex;flex-direction:column;height:var( + --_section-height,calc(100dvh - var(--app-shell-header-offset, 0px) - var(--app-shell-footer-offset, 0px)) + );position:fixed;top:var(--_section-top,var(--app-shell-header-offset,0));transition-property:transform,top,height}[data-layout=alt] .m-45252eee,[data-layout=alt] .m-9cdde9a{--_section-top:0px;--_section-height:100dvh}.m-45252eee{border-left:var(--_navbar-border-left);border-right:var(--_navbar-border-right);left:var(--_navbar-left,0);right:var(--_navbar-right);transform:var(--_navbar-transform,var(--app-shell-navbar-transform));transition-property:transform,top,height;width:var(--app-shell-navbar-width);z-index:var(--app-shell-navbar-z-index)}.m-45252eee[data-with-border]{--_navbar-border-right:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-45252eee[data-with-border]{--_navbar-border-right:none;--_navbar-border-left:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-45252eee{--_navbar-left:auto;--_navbar-right:0px;--_navbar-transform:var(--app-shell-navbar-transform-rtl)}.m-9cdde9a{border-left:var(--_aside-border-left);border-right:var(--_aside-border-right);left:var(--_aside-left);right:var(--_aside-right,0);transform:var(--_aside-transform,var(--app-shell-aside-transform));width:var(--app-shell-aside-width);z-index:var(--app-shell-aside-z-index)}.m-9cdde9a[data-with-border]{--_aside-border-left:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-9cdde9a[data-with-border]{--_aside-border-left:none;--_aside-border-right:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}[dir=rtl] .m-9cdde9a{--_aside-left:0px;--_aside-right:auto;--_aside-transform:var(--app-shell-aside-transform-rtl)}.m-8983817{min-height:100dvh;padding:calc(var(--app-shell-header-offset, 0px) + var(--app-shell-padding)) var( + --_main-padding-right,calc(var(--app-shell-aside-offset, 0px) + var(--app-shell-padding)) + ) calc(var(--app-shell-footer-offset, 0px) + var(--app-shell-padding)) var( + --_main-padding-left,calc(var(--app-shell-navbar-offset, 0px) + var(--app-shell-padding)) + );transition-property:padding}[dir=rtl] .m-8983817{--_main-padding-left:calc(var(--app-shell-aside-offset, 0px) + var(--app-shell-padding));--_main-padding-right:calc(var(--app-shell-navbar-offset, 0px) + var(--app-shell-padding))}.m-3840c879,.m-3b16f56b{background-color:var(--mantine-color-body);left:var(--_section-left,0);position:fixed;right:var(--_section-right,0);transition-property:transform,left,right}[data-layout=alt] .m-3840c879,[data-layout=alt] .m-3b16f56b{--_section-left:var(--app-shell-navbar-offset,0px)}[dir=rtl] [data-layout=alt] .m-3840c879,[dir=rtl] [data-layout=alt] .m-3b16f56b{--_section-right:var(--app-shell-navbar-offset,0px);--_section-left:0px}.m-3b16f56b{background-color:var(--mantine-color-body);border-bottom:var(--_header-border-bottom);height:var(--app-shell-header-height);top:0;transform:var(--app-shell-header-transform);z-index:var(--app-shell-header-z-index)}.m-3b16f56b[data-with-border]{--_header-border-bottom:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}.m-3840c879{border-top:var(--_footer-border-top);bottom:0;height:var(--app-shell-footer-height);transform:var(--app-shell-footer-transform);z-index:var(--app-shell-footer-z-index)}.m-3840c879[data-with-border]{--_footer-border-top:calc(0.0625rem*var(--mantine-scale)) solid var(--_app-shell-border-color)}.m-6dcfc7c7{flex-grow:var(--_section-grow,0)}.m-6dcfc7c7[data-grow]{--_section-grow:1}.m-71ac47fc{--ar-ratio:1;max-width:100%;position:relative}.m-71ac47fc:before{content:"";display:block;height:0;padding-bottom:calc((1/var(--ar-ratio))*100%)}.m-71ac47fc:after{clear:both;content:"";display:table}.m-71ac47fc>:where(:not(style)){align-items:center;display:flex;height:100%;inset:0;justify-content:center;position:absolute;width:100%}.m-71ac47fc>:where(img,video){object-fit:cover}.m-88b62a41{--_combobox-padding:var(--combobox-padding,calc(0.25rem*var(--mantine-scale)));padding:var(--_combobox-padding)}.m-88b62a41[data-hidden]{display:none}.m-88b62a41,.m-b2821a6e{--combobox-option-padding-xs:calc(0.25rem*var(--mantine-scale)) calc(0.5rem*var(--mantine-scale));--combobox-option-padding-sm:calc(0.375rem*var(--mantine-scale)) calc(0.625rem*var(--mantine-scale));--combobox-option-padding-md:calc(0.5rem*var(--mantine-scale)) calc(0.75rem*var(--mantine-scale));--combobox-option-padding-lg:calc(0.625rem*var(--mantine-scale)) calc(1rem*var(--mantine-scale));--combobox-option-padding-xl:calc(0.875rem*var(--mantine-scale)) calc(1.25rem*var(--mantine-scale));--_combobox-option-padding:var(--combobox-option-padding,var(--combobox-option-padding-sm))}.m-92253aa5{background-color:var(--_option-bg,transparent);border-radius:var(--mantine-radius-default);color:var(--_option-color,inherit);cursor:var(--_option-cursor,pointer);font-size:var(--combobox-option-fz,var(--mantine-font-size-sm));opacity:var(--_option-opacity,1);padding:var(--_combobox-option-padding);word-break:break-word}.m-92253aa5[data-combobox-selected]{--_option-bg:var(--mantine-primary-color-filled);--_option-color:var(--mantine-color-white)}.m-92253aa5[data-combobox-disabled]{--_option-cursor:not-allowed;--_option-opacity:0.35}@media (hover:hover){[data-mantine-color-scheme=light] .m-92253aa5:hover:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-92253aa5:hover:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-dark-7)}}@media (hover:none){[data-mantine-color-scheme=light] .m-92253aa5:active:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-92253aa5:active:not([data-combobox-selected],[data-combobox-disabled]){--_option-bg:var(--mantine-color-dark-7)}}.m-985517d8{background-color:var(--_search_background);border-bottom-left-radius:0;border-bottom-right-radius:0;border-left-width:0;border-right-width:0;border-top-width:0;margin:calc(var(--_combobox-padding)*-1) calc(var(--_combobox-padding)*-1) var(--_combobox-padding);position:relative;width:calc(100% + var(--_combobox-padding)*2)}.m-985517d8,.m-985517d8:focus{border-color:var(--_search-border-color)}[data-mantine-color-scheme=light] .m-985517d8{--_search-border-color:var(--mantine-color-gray-2);--_search_background:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-985517d8{--_search-border-color:var(--mantine-color-dark-4);--_search_background:var(--mantine-color-dark-7)}.m-2530cd1d{color:var(--mantine-color-dimmed);text-align:center}.m-2530cd1d,.m-82b967cb,.m-858f94bd{font-size:var(--combobox-option-fz,var(--mantine-font-size-sm));padding:var(--_combobox-option-padding)}.m-82b967cb,.m-858f94bd{border:0 solid var(--_footer-border-color);margin-left:calc(var(--_combobox-padding)*-1);margin-right:calc(var(--_combobox-padding)*-1)}[data-mantine-color-scheme=light] .m-82b967cb,[data-mantine-color-scheme=light] .m-858f94bd{--_footer-border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-82b967cb,[data-mantine-color-scheme=dark] .m-858f94bd{--_footer-border-color:var(--mantine-color-dark-4)}.m-82b967cb{border-top-width:calc(.0625rem*var(--mantine-scale));margin-bottom:calc(var(--_combobox-padding)*-1);margin-top:var(--_combobox-padding)}.m-858f94bd{border-bottom-width:calc(.0625rem*var(--mantine-scale));margin-bottom:var(--_combobox-padding);margin-top:calc(var(--_combobox-padding)*-1)}.m-254f3e4f:has(.m-2bb2e9e5:only-child){display:none}.m-2bb2e9e5{align-items:center;color:var(--mantine-color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--mantine-font-size-sm))*.85);font-weight:500;padding:var(--_combobox-option-padding);position:relative}.m-2bb2e9e5:after{background-color:var(--_divider-bg);content:"";flex:1;height:calc(.0625rem*var(--mantine-scale));left:0;margin-left:var(--mantine-spacing-xs);right:0}[data-mantine-color-scheme=light] .m-2bb2e9e5:after{--_divider-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2bb2e9e5:after{--_divider-bg:var(--mantine-color-dark-4)}[dir=rtl] .m-2bb2e9e5:after{margin-left:unset;margin-right:var(--mantine-spacing-xs)}.m-2bb2e9e5:only-child{display:none}.m-2943220b{--combobox-chevron-size-xs:calc(0.875rem*var(--mantine-scale));--combobox-chevron-size-sm:calc(1.125rem*var(--mantine-scale));--combobox-chevron-size-md:calc(1.25rem*var(--mantine-scale));--combobox-chevron-size-lg:calc(1.5rem*var(--mantine-scale));--combobox-chevron-size-xl:calc(1.75rem*var(--mantine-scale));--combobox-chevron-size:var(--combobox-chevron-size-sm);color:var(--_color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}[data-mantine-color-scheme=light] .m-2943220b{--_color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-2943220b{--_color:var(--mantine-color-dark-3)}.m-2943220b[data-error]{--_color:var(--mantine-color-error)}.m-390b5f4{align-items:center;display:flex;flex-direction:var(--_flex-direction,row);gap:calc(.5rem*var(--mantine-scale))}.m-390b5f4[data-reverse]{justify-content:space-between}.m-8ee53fc2{height:.8em;min-width:.8em;opacity:.4;width:.8em}[data-combobox-selected] .m-8ee53fc2{opacity:1}.m-5f75b09e{--label-lh-xs:calc(1rem*var(--mantine-scale));--label-lh-sm:calc(1.25rem*var(--mantine-scale));--label-lh-md:calc(1.5rem*var(--mantine-scale));--label-lh-lg:calc(1.875rem*var(--mantine-scale));--label-lh-xl:calc(2.25rem*var(--mantine-scale));--label-lh:var(--label-lh-sm)}.m-5f75b09e[data-label-position=left]{--label-order:1;--label-offset-right:var(--mantine-spacing-sm);--label-offset-left:0}[dir=rtl] .m-5f75b09e[data-label-position=left]{--label-offset-right:0;--label-offset-left:var(--mantine-spacing-sm)}.m-5f75b09e[data-label-position=right]{--label-order:2;--label-offset-right:0;--label-offset-left:var(--mantine-spacing-sm)}[dir=rtl] .m-5f75b09e[data-label-position=right]{--label-offset-right:var(--mantine-spacing-sm);--label-offset-left:0}.m-5f6e695e{display:flex}.m-d3ea56bb{--label-cursor:var(--mantine-cursor-type);-webkit-tap-highlight-color:transparent;cursor:var(--label-cursor);display:inline-flex;flex-direction:column;font-size:var(--label-fz,var(--mantine-font-size-sm));line-height:var(--label-lh);order:var(--label-order)}.m-d3ea56bb[data-disabled],fieldset:disabled .m-d3ea56bb{--label-cursor:not-allowed}.m-8ee546b8{color:inherit;cursor:var(--label-cursor);padding-left:var(--label-offset-left);padding-right:var(--label-offset-right)}:where([data-mantine-color-scheme=light]) .m-8ee546b8:where([data-disabled]),:where([data-mantine-color-scheme=light]) fieldset:disabled .m-8ee546b8{color:var(--mantine-color-gray-5)}:where([data-mantine-color-scheme=dark]) .m-8ee546b8:where([data-disabled]),:where([data-mantine-color-scheme=dark]) fieldset:disabled .m-8ee546b8{color:var(--mantine-color-dark-3)}.m-328f68c0,.m-8e8a99cc{margin-top:calc(var(--mantine-spacing-xs)/2);padding-left:var(--label-offset-left);padding-right:var(--label-offset-right)}.m-bf2d988c{--checkbox-size-xs:calc(1rem*var(--mantine-scale));--checkbox-size-sm:calc(1.25rem*var(--mantine-scale));--checkbox-size-md:calc(1.5rem*var(--mantine-scale));--checkbox-size-lg:calc(1.875rem*var(--mantine-scale));--checkbox-size-xl:calc(2.25rem*var(--mantine-scale));--checkbox-size:var(--checkbox-size-sm);--checkbox-color:var(--mantine-primary-color-filled);--checkbox-icon-color:var(--mantine-color-white)}.m-26062bec{height:var(--checkbox-size);order:var(--_checkbox-inner-order,1);position:relative;width:var(--checkbox-size)}.m-26062bec[data-label-position=left]{--_checkbox-inner-order:2}.m-26063560{-webkit-tap-highlight-color:transparent;appearance:none;background-color:var(--_checkbox-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_checkbox-bd-color);border-radius:var(--checkbox-radius,var(--mantine-radius-default));cursor:var(--_checkbox-cursor,var(--mantine-cursor-type));display:block;height:var(--checkbox-size);margin:0;padding:0;transition:border-color .1s ease,background-color .1s ease;width:var(--checkbox-size)}[data-mantine-color-scheme=light] .m-26063560{--_checkbox-bg:var(--mantine-color-white);--_checkbox-bd-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-26063560{--_checkbox-bg:var(--mantine-color-dark-6);--_checkbox-bd-color:var(--mantine-color-dark-4)}.m-26063560[data-error]{--_checkbox-bd-color:var(--mantine-color-error)}[data-mantine-color-scheme] .m-26063560:checked,[data-mantine-color-scheme] .m-26063560[data-indeterminate]{--_checkbox-bg:var(--checkbox-color);--_checkbox-bd-color:var(--checkbox-color)}[data-mantine-color-scheme] .m-26063560:checked+.m-bf295423,[data-mantine-color-scheme] .m-26063560[data-indeterminate]+.m-bf295423{--_checkbox-icon-opacity:1;--_checkbox-icon-transform:none}.m-26063560:disabled{--_checkbox-cursor:not-allowed}[data-mantine-color-scheme=light] .m-26063560:disabled{--_checkbox-bg:var(--mantine-color-gray-2);--_checkbox-bd-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-26063560:disabled{--_checkbox-bg:var(--mantine-color-dark-6);--_checkbox-bd-color:var(--mantine-color-dark-6)}[data-mantine-color-scheme=light] .m-26063560:disabled+.m-bf295423{--_checkbox-icon-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-26063560:disabled+.m-bf295423{--_checkbox-icon-color:var(--mantine-color-dark-3)}.m-215c4542+.m-bf295423{--_checkbox-icon-color:var(--checkbox-color)}[data-mantine-color-scheme] .m-215c4542:checked:not(:disabled),[data-mantine-color-scheme] .m-215c4542[data-indeterminate]{--_checkbox-bg:transparent;--_checkbox-bd-color:var(--checkbox-color)}[data-mantine-color-scheme] .m-215c4542:checked:not(:disabled)+.m-bf295423,[data-mantine-color-scheme] .m-215c4542[data-indeterminate]+.m-bf295423{--_checkbox-icon-color:var(--checkbox-color);--_checkbox-icon-opacity:1;--_checkbox-icon-transform:none}.m-bf295423{bottom:0;color:var(--_checkbox-icon-color,var(--checkbox-icon-color));left:0;margin:auto;opacity:var(--_checkbox-icon-opacity,0);pointer-events:none;position:absolute;right:0;top:0;transform:var(--_checkbox-icon-transform,translateY(calc(.3125rem*var(--mantine-scale))) scale(.5));transition:transform .1s ease,opacity .1s ease;width:60%}.m-11def92b{--ag-spacing:var(--mantine-spacing-sm);--ag-offset:calc(var(--ag-spacing)*-1);display:flex;padding-left:var(--ag-spacing)}:where([dir=rtl]) .m-11def92b{padding-left:0;padding-right:var(--ag-spacing)}.m-f85678b6{--avatar-size-xs:calc(1rem*var(--mantine-scale));--avatar-size-sm:calc(1.625rem*var(--mantine-scale));--avatar-size-md:calc(2.375rem*var(--mantine-scale));--avatar-size-lg:calc(3.5rem*var(--mantine-scale));--avatar-size-xl:calc(5.25rem*var(--mantine-scale));--avatar-size:var(--avatar-size-md);--avatar-radius:calc(62.5rem*var(--mantine-scale));--avatar-bg:var(--mantine-color-gray-light);--avatar-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;--avatar-color:var(--mantine-color-gray-light-color);--avatar-placeholder-fz:calc(var(--avatar-size)/2.5);-webkit-tap-highlight-color:transparent;border-radius:var(--avatar-radius);display:block;height:var(--avatar-size);min-width:var(--avatar-size);overflow:hidden;padding:0;position:relative;text-decoration:none;user-select:none;width:var(--avatar-size)}.m-f85678b6:where([data-within-group]){background:var(--mantine-color-body);border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-body);margin-left:var(--ag-offset)}:where([dir=rtl]) .m-f85678b6:where([data-within-group]){margin-left:unset;margin-right:var(--ag-offset)}.m-11f8ac07{display:block;height:100%;object-fit:cover;width:100%}.m-104cd71f{align-items:center;background:var(--avatar-bg);border:var(--avatar-bd);border-radius:var(--avatar-radius);color:var(--avatar-color);display:flex;font-size:var(--avatar-placeholder-fz);font-weight:700;height:100%;justify-content:center;user-select:none;width:100%}.m-104cd71f>[data-avatar-placeholder-icon]{height:70%;width:70%}.m-2ce0de02{background-position:50%;background-size:cover;border:0;border-radius:var(--bi-radius,0);display:block;text-decoration:none;width:100%}.m-347db0ec{--badge-height-xs:calc(1rem*var(--mantine-scale));--badge-height-sm:calc(1.125rem*var(--mantine-scale));--badge-height-md:calc(1.25rem*var(--mantine-scale));--badge-height-lg:calc(1.625rem*var(--mantine-scale));--badge-height-xl:calc(2rem*var(--mantine-scale));--badge-fz-xs:calc(0.5625rem*var(--mantine-scale));--badge-fz-sm:calc(0.625rem*var(--mantine-scale));--badge-fz-md:calc(0.6875rem*var(--mantine-scale));--badge-fz-lg:calc(0.8125rem*var(--mantine-scale));--badge-fz-xl:calc(1rem*var(--mantine-scale));--badge-padding-x-xs:calc(0.375rem*var(--mantine-scale));--badge-padding-x-sm:calc(0.5rem*var(--mantine-scale));--badge-padding-x-md:calc(0.625rem*var(--mantine-scale));--badge-padding-x-lg:calc(0.75rem*var(--mantine-scale));--badge-padding-x-xl:calc(1rem*var(--mantine-scale));--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:calc(62.5rem*var(--mantine-scale));--badge-lh:calc(var(--badge-height) - 0.125rem*var(--mantine-scale));--badge-color:var(--mantine-color-white);--badge-bg:var(--mantine-primary-color-filled);--badge-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;-webkit-tap-highlight-color:transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:inherit;display:inline-flex;font-size:var(--badge-fz);font-weight:700;height:var(--badge-height);justify-content:center;letter-spacing:calc(.01563rem*var(--mantine-scale));line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:fit-content}.m-347db0ec:where([data-block]){display:flex;width:100%}.m-347db0ec:where([data-circle]){padding-left:calc(.125rem*var(--mantine-scale));padding-right:calc(.125rem*var(--mantine-scale));width:var(--badge-height)}.m-fbd81e3d{--badge-dot-size:calc(var(--badge-height)/3.4)}:where([data-mantine-color-scheme=light]) .m-fbd81e3d{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-4);color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-fbd81e3d{background-color:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)}.m-fbd81e3d:before{background-color:var(--badge-dot-color);border-radius:var(--badge-dot-size);content:"";display:block;height:var(--badge-dot-size);margin-right:var(--badge-dot-size);width:var(--badge-dot-size)}:where([dir=rtl]) .m-fbd81e3d:before{margin-left:var(--badge-dot-size);margin-right:0}.m-5add502a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m-91fdda9b{--badge-section-margin:calc(var(--mantine-spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center}.m-91fdda9b:where([data-position=left]){margin-left:0;margin-right:var(--badge-section-margin)}:where([dir=rtl]) .m-91fdda9b:where([data-position=left]){margin-left:var(--badge-section-margin);margin-right:0}.m-91fdda9b:where([data-position=right]){margin-left:var(--badge-section-margin);margin-right:0}[dir=rtl] .m-91fdda9b:where([data-position=right]){margin-left:0;margin-right:var(--badge-section-margin)}.m-ddec01c0{--blockquote-border:calc(0.1875rem*var(--mantine-scale)) solid var(--bq-bd);border-bottom-right-radius:var(--bq-radius);border-left:var(--blockquote-border);border-top-right-radius:var(--bq-radius);margin:0;padding:var(--mantine-spacing-xl) calc(2.375rem*var(--mantine-scale));position:relative}:where([dir=rtl]) .m-ddec01c0{border-bottom-left-radius:var(--bq-radius);border-bottom-right-radius:0;border-left:none;border-right:var(--blockquote-border);border-top-left-radius:var(--bq-radius);border-top-right-radius:0}:where([data-mantine-color-scheme=light]) .m-ddec01c0{background-color:var(--bq-bg-light)}:where([data-mantine-color-scheme=dark]) .m-ddec01c0{background-color:var(--bq-bg-dark)}.m-dde7bd57{--blockquote-icon-offset:calc(var(--bq-icon-size)/-2);align-items:center;background-color:var(--mantine-color-body);border-radius:var(--bq-icon-size);color:var(--bq-bd);display:flex;height:var(--bq-icon-size);justify-content:center;left:var(--blockquote-icon-offset);position:absolute;top:var(--blockquote-icon-offset);width:var(--bq-icon-size)}:where([dir=rtl]) .m-dde7bd57{left:0;right:var(--blockquote-icon-offset)}.m-dde51a35{display:block;font-size:85%;margin-top:var(--mantine-spacing-md);opacity:.6}.m-8b3717df{align-items:center;display:flex}.m-f678d540{-webkit-tap-highlight-color:transparent;line-height:1;white-space:nowrap}.m-3b8f2208{align-items:center;display:flex;justify-content:center;line-height:1;margin-left:var(--bc-separator-margin,var(--mantine-spacing-xs));margin-right:var(--bc-separator-margin,var(--mantine-spacing-xs))}:where([data-mantine-color-scheme=light]) .m-3b8f2208{color:var(--mantine-color-gray-7)}:where([data-mantine-color-scheme=dark]) .m-3b8f2208{color:var(--mantine-color-dark-2)}.m-fea6bf1a{--burger-size-xs:calc(0.75rem*var(--mantine-scale));--burger-size-sm:calc(1.125rem*var(--mantine-scale));--burger-size-md:calc(1.5rem*var(--mantine-scale));--burger-size-lg:calc(2.125rem*var(--mantine-scale));--burger-size-xl:calc(2.625rem*var(--mantine-scale));--burger-size:var(--burger-size-md);cursor:pointer;height:calc(var(--burger-size) + var(--mantine-spacing-xs));padding:calc(var(--mantine-spacing-xs)/2);width:calc(var(--burger-size) + var(--mantine-spacing-xs))}:where([data-mantine-color-scheme=light]) .m-fea6bf1a{--burger-color:var(--mantine-color-black)}:where([data-mantine-color-scheme=dark]) .m-fea6bf1a{--burger-color:var(--mantine-color-white)}.m-d4fb9cad{position:relative;user-select:none}.m-d4fb9cad,.m-d4fb9cad:after,.m-d4fb9cad:before{background-color:var(--burger-color);display:block;height:calc(var(--burger-size)/12);outline:calc(.0625rem*var(--mantine-scale)) solid transparent;transition-duration:var(--burger-transition-duration,.3s);transition-property:background-color,transform;transition-timing-function:var(--burger-transition-timing-function,ease);width:var(--burger-size)}.m-d4fb9cad:after,.m-d4fb9cad:before{content:"";left:0;position:absolute}.m-d4fb9cad:before{top:calc(var(--burger-size)/-3)}.m-d4fb9cad:after{top:calc(var(--burger-size)/3)}.m-d4fb9cad[data-opened]{background-color:transparent}.m-d4fb9cad[data-opened]:before{transform:translateY(calc(var(--burger-size)/3)) rotate(45deg)}.m-d4fb9cad[data-opened]:after{transform:translateY(calc(var(--burger-size)/-3)) rotate(-45deg)}.m-77c9d27d{--button-height-xs:calc(1.875rem*var(--mantine-scale));--button-height-sm:calc(2.25rem*var(--mantine-scale));--button-height-md:calc(2.625rem*var(--mantine-scale));--button-height-lg:calc(3.125rem*var(--mantine-scale));--button-height-xl:calc(3.75rem*var(--mantine-scale));--button-height-compact-xs:calc(1.375rem*var(--mantine-scale));--button-height-compact-sm:calc(1.625rem*var(--mantine-scale));--button-height-compact-md:calc(1.875rem*var(--mantine-scale));--button-height-compact-lg:calc(2.125rem*var(--mantine-scale));--button-height-compact-xl:calc(2.5rem*var(--mantine-scale));--button-padding-x-xs:calc(0.875rem*var(--mantine-scale));--button-padding-x-sm:calc(1.125rem*var(--mantine-scale));--button-padding-x-md:calc(1.375rem*var(--mantine-scale));--button-padding-x-lg:calc(1.625rem*var(--mantine-scale));--button-padding-x-xl:calc(2rem*var(--mantine-scale));--button-padding-x-compact-xs:calc(0.4375rem*var(--mantine-scale));--button-padding-x-compact-sm:calc(0.5rem*var(--mantine-scale));--button-padding-x-compact-md:calc(0.625rem*var(--mantine-scale));--button-padding-x-compact-lg:calc(0.75rem*var(--mantine-scale));--button-padding-x-compact-xl:calc(0.875rem*var(--mantine-scale));--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--mantine-color-white);background:var(--_button-bg,var(--button-bg,var(--mantine-primary-color-filled)));border:var(--_button-bd,var(--button-bd,calc(.0625rem*var(--mantine-scale)) solid transparent));border-radius:var(--button-radius,var(--mantine-radius-default));color:var(--_button-color,var(--button-color,var(--mantine-color-white)));cursor:var(--_button-cursor,pointer);display:var(--_button-display,inline-block);font-size:var(--button-fz,var(--mantine-font-size-sm));font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-left:var(--_button-padding-left,var(--button-padding-x,var(--button-padding-x-sm)));padding-right:var(--_button-padding-right,var(--button-padding-x,var(--button-padding-x-sm)));position:relative;text-align:center;user-select:none;vertical-align:middle;width:var(--_button-width,auto)}.m-77c9d27d[data-block]{--_button-display:block;--_button-width:100%}.m-77c9d27d[data-with-left-section]{--_button-padding-left:calc(var(--button-padding-x)/1.5)}[dir=rtl] .m-77c9d27d[data-with-left-section]{--_button-padding-left:var(--button-padding-x)}.m-77c9d27d[data-with-right-section],[dir=rtl] .m-77c9d27d[data-with-left-section]{--_button-padding-right:calc(var(--button-padding-x)/1.5)}[dir=rtl] .m-77c9d27d[data-with-right-section]{--_button-padding-right:var(--button-padding-x);--_button-padding-left:calc(var(--button-padding-x)/1.5)}.m-77c9d27d:disabled:not([data-loading]),.m-77c9d27d[data-disabled]:not([data-loading]){--_button-cursor:not-allowed;--_button-bg:var(--_disabled-bg);--_button-color:var(--_disabled-color);--_button-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent;transform:none}.m-77c9d27d:before{background-color:var(--_button-loading-overlay-bg);border-radius:var(--button-radius,var(--mantine-radius-default));content:"";filter:blur(12px);inset:calc(-.0625rem*var(--mantine-scale));opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease}.m-77c9d27d[data-loading]{--_button-cursor:not-allowed;transform:none}.m-77c9d27d[data-loading]:before{opacity:1;transform:translateY(0)}.m-77c9d27d[data-loading] .m-80f1301b{opacity:0;transform:translateY(100%)}.m-77c9d27d[data-loading] .m-a25b86ee{opacity:1;transform:translate(-50%,calc(-50% + .0625rem*var(--mantine-scale)))}@media (hover:hover){.m-77c9d27d:hover:not([data-loading]):not(:disabled):not([data-disabled]){--_button-bg:var(--button-hover,var(--mantine-primary-color-filled-hover));--_button-color:var(--button-hover-color)}}@media (hover:none){.m-77c9d27d:active:not([data-loading]):not(:disabled):not([data-disabled]){--_button-bg:var(--button-hover,var(--mantine-primary-color-filled-hover));--_button-color:var(--button-hover-color)}}[data-mantine-color-scheme=light] .m-77c9d27d{--_disabled-color:var(--mantine-color-gray-5);--_disabled-bg:var(--mantine-color-gray-1);--_button-loading-overlay-bg:hsla(0,0%,100%,.15)}[data-mantine-color-scheme=dark] .m-77c9d27d{--_disabled-color:var(--mantine-color-dark-3);--_disabled-bg:var(--mantine-color-dark-6);--_button-loading-overlay-bg:rgba(0,0,0,.15)}.m-80f1301b{justify-content:var(--button-justify,center);overflow:visible;transition:transform .15s ease,opacity .1s ease}.m-80f1301b,.m-811560b9{align-items:center;display:flex;height:100%}.m-811560b9{opacity:var(--_button-label-opacity,1);overflow:hidden;white-space:nowrap}.m-811560b9[data-loading]{--_button-label-opacity:0.2}.m-a74036a{align-items:center;display:flex;margin-left:var(--_button-section-margin-left);margin-right:var(--_button-section-margin-right)}.m-a74036a[data-position=left]{--_button-section-margin-right:var(--mantine-spacing-xs)}[dir=rtl] .m-a74036a[data-position=left]{--_button-section-margin-right:0}.m-a74036a[data-position=right],[dir=rtl] .m-a74036a[data-position=left]{--_button-section-margin-left:var(--mantine-spacing-xs)}[dir=rtl] .m-a74036a[data-position=right]{--_button-section-margin-left:0;--_button-section-margin-right:var(--mantine-spacing-xs)}.m-a25b86ee{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-200%);transition:transform .15s ease,opacity .1s ease}.m-80d6d844{--button-border-width:calc(0.0625rem*var(--mantine-scale));display:flex}.m-80d6d844[data-orientation=horizontal]{flex-direction:row}.m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):first-child{border-bottom-right-radius:0;border-right-width:calc(var(--button-border-width)/2);border-top-right-radius:0}.m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):last-child{border-bottom-left-radius:0;border-left-width:calc(var(--button-border-width)/2);border-top-left-radius:0}.m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):not(:first-child):not(:last-child){border-left-width:calc(var(--button-border-width)/2);border-radius:0;border-right-width:calc(var(--button-border-width)/2)}[dir=rtl] .m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):first-child{border:var(--_button-bd,var(--button-bd,calc(.0625rem*var(--mantine-scale)) solid transparent));border-radius:var(--button-radius,var(--mantine-radius-default));border-bottom-left-radius:0;border-left-width:calc(var(--button-border-width)/2);border-top-left-radius:0}[dir=rtl] .m-80d6d844[data-orientation=horizontal] .m-77c9d27d:not(:only-child):last-child{border:var(--_button-bd,var(--button-bd,calc(.0625rem*var(--mantine-scale)) solid transparent));border-radius:var(--button-radius,var(--mantine-radius-default));border-bottom-right-radius:0;border-right-width:calc(var(--button-border-width)/2);border-top-right-radius:0}.m-80d6d844[data-orientation=vertical]{flex-direction:column}.m-80d6d844[data-orientation=vertical] .m-77c9d27d:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:calc(var(--button-border-width)/2)}.m-80d6d844[data-orientation=vertical] .m-77c9d27d:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;border-top-width:calc(var(--button-border-width)/2)}.m-80d6d844[data-orientation=vertical] .m-77c9d27d:not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--button-border-width)/2);border-radius:0;border-top-width:calc(var(--button-border-width)/2)}.m-e615b15f{--card-padding:var(--mantine-spacing-md);color:var(--mantine-color-text);display:flex;flex-direction:column;overflow:hidden;padding:var(--card-padding);position:relative}:where([data-mantine-color-scheme=light]) .m-e615b15f{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=dark]) .m-e615b15f{background-color:var(--mantine-color-dark-6)}.m-599a2148{display:block;margin-left:calc(var(--card-padding)*-1);margin-right:calc(var(--card-padding)*-1)}.m-599a2148:where([data-first-section]){border-top:none!important;margin-top:calc(var(--card-padding)*-1)}.m-599a2148:where([data-last-section]){border-bottom:none!important;margin-bottom:calc(var(--card-padding)*-1)}.m-599a2148:where([data-inherit-padding]){padding-left:var(--card-padding);padding-right:var(--card-padding)}.m-599a2148:where([data-with-border]){border-bottom:calc(.0625rem*var(--mantine-scale)) solid;border-top:calc(.0625rem*var(--mantine-scale)) solid}:where([data-mantine-color-scheme=light]) .m-599a2148{border-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-599a2148{border-color:var(--mantine-color-dark-4)}.m-599a2148+.m-599a2148{border-top:none!important}.m-4451eb3a{align-items:center;display:flex;justify-content:center}.m-4451eb3a:where([data-inline]){display:inline-flex}.m-f59ffda3{--chip-size-xs:calc(1.4375rem*var(--mantine-scale));--chip-size-sm:calc(1.75rem*var(--mantine-scale));--chip-size-md:calc(2rem*var(--mantine-scale));--chip-size-lg:calc(2.25rem*var(--mantine-scale));--chip-size-xl:calc(2.5rem*var(--mantine-scale));--chip-icon-size-xs:calc(0.625rem*var(--mantine-scale));--chip-icon-size-sm:calc(0.75rem*var(--mantine-scale));--chip-icon-size-md:calc(0.875rem*var(--mantine-scale));--chip-icon-size-lg:calc(1rem*var(--mantine-scale));--chip-icon-size-xl:calc(1.125rem*var(--mantine-scale));--chip-padding-xs:calc(1rem*var(--mantine-scale));--chip-padding-sm:calc(1.25rem*var(--mantine-scale));--chip-padding-md:calc(1.5rem*var(--mantine-scale));--chip-padding-lg:calc(1.75rem*var(--mantine-scale));--chip-padding-xl:calc(2rem*var(--mantine-scale));--chip-checked-padding-xs:calc(0.46875rem*var(--mantine-scale));--chip-checked-padding-sm:calc(0.625rem*var(--mantine-scale));--chip-checked-padding-md:calc(0.73125rem*var(--mantine-scale));--chip-checked-padding-lg:calc(0.84375rem*var(--mantine-scale));--chip-checked-padding-xl:calc(0.78125rem*var(--mantine-scale));--chip-spacing-xs:calc(0.625rem*var(--mantine-scale));--chip-spacing-sm:calc(0.75rem*var(--mantine-scale));--chip-spacing-md:calc(1rem*var(--mantine-scale));--chip-spacing-lg:calc(1.25rem*var(--mantine-scale));--chip-spacing-xl:calc(1.375rem*var(--mantine-scale));--chip-size:var(--chip-size-sm);--chip-icon-size:var(--chip-icon-size-sm);--chip-padding:var(--chip-padding-sm);--chip-spacing:var(--chip-spacing-sm);--chip-checked-padding:var(--chip-checked-padding-sm);--chip-bg:var(--mantine-primary-color-filled);--chip-hover:var(--mantine-primary-color-filled-hover);--chip-color:var(--mantine-color-white);--chip-bd:calc(0.0625rem*var(--mantine-scale)) solid transparent}.m-be049a53{-webkit-tap-highlight-color:transparent;align-items:center;background-color:var(--_chip-bg);border:calc(.0625rem*var(--mantine-scale)) solid transparent;border-radius:var(--chip-radius,calc(62.5rem*var(--mantine-scale)));color:var(--_chip-color,var(--mantine-color-text));cursor:var(--_chip-cursor,pointer);display:inline-flex;font-size:var(--chip-fz,var(--mantine-font-size-sm));height:var(--chip-size);line-height:calc(var(--chip-size) - .125rem*var(--mantine-scale));padding-left:var(--_chip-padding,var(--chip-padding));padding-right:var(--_chip-padding,var(--chip-padding));user-select:none;white-space:nowrap}.m-be049a53[data-checked]{--_chip-padding:var(--chip-checked-padding)}[data-mantine-color-scheme=light] .m-be049a53[data-disabled]{--_chip-bg:var(--mantine-color-gray-2);--_chip-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-be049a53[data-disabled]{--_chip-bg:var(--mantine-color-dark-6);--_chip-color:var(--mantine-color-dark-3)}.m-be049a53[data-disabled]{--_chip-cursor:not-allowed}.m-3904c1af:not([data-disabled]){background-color:var(--_chip-bg);border:var(--_chip-bd)}@media (hover:hover){[data-mantine-color-scheme=light] .m-3904c1af:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3904c1af:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-3904c1af:not([data-disabled]):active{--_chip-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3904c1af:not([data-disabled]):active{--_chip-bg:var(--mantine-color-dark-5)}}[data-mantine-color-scheme=light] .m-3904c1af:not([data-disabled]){--_chip-bg:var(--mantine-color-white);--_chip-bd:calc(0.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-3904c1af:not([data-disabled]){--_chip-bg:var(--mantine-color-dark-6);--_chip-bd:calc(0.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}[data-mantine-color-scheme] .m-3904c1af:not([data-disabled])[data-checked]{--_chip-bd:var(--chip-bd);--_chip-icon-color:var(--chip-color)}@media (hover:hover){[data-mantine-color-scheme] .m-3904c1af:not([data-disabled])[data-checked]:hover{--_chip-bg:var(--chip-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-3904c1af:not([data-disabled])[data-checked]:active{--_chip-bg:var(--chip-hover)}}.m-f7e165c3:not([data-disabled]),.m-fa109255:not([data-disabled]){background-color:var(--_chip-bg);border:calc(.0625rem*var(--mantine-scale)) solid transparent;color:var(--_chip-color,var(--mantine-color-text))}@media (hover:hover){[data-mantine-color-scheme=light] .m-f7e165c3:not([data-disabled]):hover,[data-mantine-color-scheme=light] .m-fa109255:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-f7e165c3:not([data-disabled]):hover,[data-mantine-color-scheme=dark] .m-fa109255:not([data-disabled]):hover{--_chip-bg:var(--mantine-color-dark-4)}}@media (hover:none){[data-mantine-color-scheme=light] .m-f7e165c3:not([data-disabled]):active,[data-mantine-color-scheme=light] .m-fa109255:not([data-disabled]):active{--_chip-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-f7e165c3:not([data-disabled]):active,[data-mantine-color-scheme=dark] .m-fa109255:not([data-disabled]):active{--_chip-bg:var(--mantine-color-dark-4)}}[data-mantine-color-scheme=light] .m-f7e165c3:not([data-disabled]),[data-mantine-color-scheme=light] .m-fa109255:not([data-disabled]){--_chip-bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-f7e165c3:not([data-disabled]),[data-mantine-color-scheme=dark] .m-fa109255:not([data-disabled]){--_chip-bg:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-f7e165c3:not([data-disabled])[data-checked],[data-mantine-color-scheme] .m-fa109255:not([data-disabled])[data-checked]{--_chip-icon-color:var(--chip-color);--_chip-color:var(--chip-color);--_chip-bg:var(--chip-bg)}@media (hover:hover){[data-mantine-color-scheme] .m-f7e165c3:not([data-disabled])[data-checked]:hover,[data-mantine-color-scheme] .m-fa109255:not([data-disabled])[data-checked]:hover{--_chip-bg:var(--chip-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-f7e165c3:not([data-disabled])[data-checked]:active,[data-mantine-color-scheme] .m-fa109255:not([data-disabled])[data-checked]:active{--_chip-bg:var(--chip-hover)}}.m-9ac86df9{align-items:center;display:flex;max-width:calc(var(--chip-icon-size) + var(--chip-spacing)/1.5);overflow:hidden;width:calc(var(--chip-icon-size) + var(--chip-spacing)/1.5)}.m-9ac86df9,.m-d6d72580{height:var(--chip-icon-size)}.m-d6d72580{color:var(--_chip-icon-color,inherit);display:block;width:var(--chip-icon-size)}.m-bde07329{height:0;margin:0;opacity:0;padding:0;width:0}.m-bde07329:focus-visible+.m-be049a53{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-b183c0a2{border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);line-height:var(--mantine-line-height);margin:0;overflow:auto;padding:calc(.125rem*var(--mantine-scale)) calc(var(--mantine-spacing-xs)/2)}[data-mantine-color-scheme=light] .m-b183c0a2{background-color:var(--code-bg,var(--mantine-color-gray-1));color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-b183c0a2{background-color:var(--code-bg,var(--mantine-color-dark-5));color:var(--mantine-color-white)}.m-b183c0a2[data-block]{padding:var(--mantine-spacing-xs)}.m-de3d2490{--cs-size:calc(1.75rem*var(--mantine-scale));--cs-radius:calc(62.5rem*var(--mantine-scale));-webkit-tap-highlight-color:transparent;appearance:none;border:none;border-radius:var(--cs-radius);color:inherit;display:block;height:var(--cs-size);line-height:1;min-height:var(--cs-size);min-width:var(--cs-size);position:relative;text-decoration:none;width:var(--cs-size)}[data-mantine-color-scheme=light] .m-de3d2490{--alpha-overlay-color:var(--mantine-color-gray-3);--alpha-overlay-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-de3d2490{--alpha-overlay-color:var(--mantine-color-dark-4);--alpha-overlay-bg:var(--mantine-color-dark-7)}.m-862f3d1b,.m-98ae7f22{border-radius:var(--cs-radius);inset:0;position:absolute}.m-98ae7f22{box-shadow:rgba(0,0,0,.1) 0 0 0 calc(.0625rem*var(--mantine-scale)) inset,rgba(0,0,0,.15) 0 0 calc(.25rem*var(--mantine-scale)) inset;z-index:1}.m-95709ac0{background-image:linear-gradient(45deg,var(--alpha-overlay-color) 25%,transparent 25%),linear-gradient(-45deg,var(--alpha-overlay-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--alpha-overlay-color) 75%),linear-gradient(-45deg,var(--alpha-overlay-bg) 75%,var(--alpha-overlay-color) 75%);background-position:0 0,0 calc(.25rem*var(--mantine-scale)),calc(.25rem*var(--mantine-scale)) calc(-.25rem*var(--mantine-scale)),calc(-.25rem*var(--mantine-scale)) 0;background-size:calc(.5rem*var(--mantine-scale)) calc(.5rem*var(--mantine-scale))}.m-93e74e3,.m-95709ac0{border-radius:var(--cs-radius);inset:0;position:absolute}.m-93e74e3{align-items:center;display:flex;justify-content:center;z-index:2}.m-fee9c77{--cp-width-xs:calc(11.25rem*var(--mantine-scale));--cp-width-sm:calc(12.5rem*var(--mantine-scale));--cp-width-md:calc(15rem*var(--mantine-scale));--cp-width-lg:calc(17.5rem*var(--mantine-scale));--cp-width-xl:calc(20rem*var(--mantine-scale));--cp-preview-size-xs:calc(1.625rem*var(--mantine-scale));--cp-preview-size-sm:calc(2.125rem*var(--mantine-scale));--cp-preview-size-md:calc(2.625rem*var(--mantine-scale));--cp-preview-size-lg:calc(3.125rem*var(--mantine-scale));--cp-preview-size-xl:calc(3.375rem*var(--mantine-scale));--cp-thumb-size-xs:calc(0.5rem*var(--mantine-scale));--cp-thumb-size-sm:calc(0.75rem*var(--mantine-scale));--cp-thumb-size-md:calc(1rem*var(--mantine-scale));--cp-thumb-size-lg:calc(1.25rem*var(--mantine-scale));--cp-thumb-size-xl:calc(1.375rem*var(--mantine-scale));--cp-saturation-height-xs:calc(6.25rem*var(--mantine-scale));--cp-saturation-height-sm:calc(6.875rem*var(--mantine-scale));--cp-saturation-height-md:calc(7.5rem*var(--mantine-scale));--cp-saturation-height-lg:calc(8.75rem*var(--mantine-scale));--cp-saturation-height-xl:calc(10rem*var(--mantine-scale));--cp-preview-size:var(--cp-preview-size-sm);--cp-thumb-size:var(--cp-thumb-size-sm);--cp-saturation-height:var(--cp-saturation-height-sm);--cp-width:var(--cp-width-sm);--cp-body-spacing:var(--mantine-spacing-sm);padding:calc(.0625rem*var(--mantine-scale));width:var(--_cp-width,var(--cp-width))}.m-fee9c77[data-full-width]{--_cp-width:100%}.m-9dddfbac{height:var(--cp-preview-size);width:var(--cp-preview-size)}.m-bffecc3e{display:flex;padding-top:calc(var(--cp-body-spacing)/2)}.m-3283bb96{flex:1}.m-3283bb96:not(:only-child){margin-right:var(--mantine-spacing-xs)}.m-40d572ba{border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-white);border-radius:var(--_cp-thumb-size);box-shadow:0 0 calc(.0625rem*var(--mantine-scale)) rgba(0,0,0,.6);height:var(--_cp-thumb-size);left:calc(var(--_thumb-x-offset) - var(--_cp-thumb-size)/2);outline:var(--_outline);overflow:hidden;position:absolute;top:calc(var(--_thumb-y-offset) - var(--_cp-thumb-size)/2);width:var(--_cp-thumb-size)}.m-d8ee6fd8{cursor:pointer;flex:0 0 calc(var(--cp-swatch-size) - 0.25rem*var(--mantine-scale));height:unset!important;margin:calc(.125rem*var(--mantine-scale));min-height:0!important;min-width:0!important;padding-bottom:calc(var(--cp-swatch-size) - .25rem*var(--mantine-scale));width:unset!important}.m-5711e686{display:flex;flex-wrap:wrap;margin-left:calc(-.125rem*var(--mantine-scale));margin-right:calc(-.125rem*var(--mantine-scale));margin-top:calc(.3125rem*var(--mantine-scale))}.m-202a296e{--cp-thumb-size-xs:calc(0.5rem*var(--mantine-scale));--cp-thumb-size-sm:calc(0.75rem*var(--mantine-scale));--cp-thumb-size-md:calc(1rem*var(--mantine-scale));--cp-thumb-size-lg:calc(1.25rem*var(--mantine-scale));--cp-thumb-size-xl:calc(1.375rem*var(--mantine-scale));--_cp-thumb-size:var(--cp-thumb-size,calc(0.75rem*var(--mantine-scale)));-webkit-tap-highlight-color:transparent;border-radius:var(--mantine-radius-sm);height:var(--cp-saturation-height);margin:calc(var(--cp-thumb-size)/2);position:relative}.m-202a296e[data-focus-ring=auto]:focus:focus-visible .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-202a296e[data-focus-ring=always]:focus .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-11b3db02{border-radius:var(--mantine-radius-sm);inset:calc(var(--cp-thumb-size)*-1/2 - .0625rem*var(--mantine-scale));position:absolute}.m-d856d47d{--cp-thumb-size-xs:calc(0.5rem*var(--mantine-scale));--cp-thumb-size-sm:calc(0.75rem*var(--mantine-scale));--cp-thumb-size-md:calc(1rem*var(--mantine-scale));--cp-thumb-size-lg:calc(1.25rem*var(--mantine-scale));--cp-thumb-size-xl:calc(1.375rem*var(--mantine-scale));--_cp-thumb-size:var(--cp-thumb-size,calc(0.75rem*var(--mantine-scale)));height:calc(var(--_cp-thumb-size) + .125rem*var(--mantine-scale));margin-left:calc(var(--_cp-thumb-size)/2);margin-right:calc(var(--_cp-thumb-size)/2);outline:none;position:relative}.m-d856d47d+.m-d856d47d{margin-top:calc(.375rem*var(--mantine-scale))}.m-d856d47d[data-focus-ring=auto]:focus:focus-visible .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-d856d47d[data-focus-ring=always]:focus .m-40d572ba{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}[data-mantine-color-scheme=light] .m-d856d47d{--_slider-checkers:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-d856d47d{--_slider-checkers:var(--mantine-color-dark-4)}.m-8f327113{border-radius:10000rem;bottom:0;left:calc(var(--_cp-thumb-size)*-1/2 - .0625rem*var(--mantine-scale));position:absolute;right:calc(var(--_cp-thumb-size)*-1/2 - .0625rem*var(--mantine-scale));top:0}.m-b077c2bc{--ci-eye-dropper-icon-size-xs:calc(0.875rem*var(--mantine-scale));--ci-eye-dropper-icon-size-sm:calc(1rem*var(--mantine-scale));--ci-eye-dropper-icon-size-md:calc(1.125rem*var(--mantine-scale));--ci-eye-dropper-icon-size-lg:calc(1.25rem*var(--mantine-scale));--ci-eye-dropper-icon-size-xl:calc(1.375rem*var(--mantine-scale));--ci-eye-dropper-icon-size:var(--ci-eye-dropper-icon-size-sm)}.m-c5ccdcab{--ci-preview-size-xs:calc(1rem*var(--mantine-scale));--ci-preview-size-sm:calc(1.125rem*var(--mantine-scale));--ci-preview-size-md:calc(1.375rem*var(--mantine-scale));--ci-preview-size-lg:calc(1.75rem*var(--mantine-scale));--ci-preview-size-xl:calc(2.25rem*var(--mantine-scale));--ci-preview-size:var(--ci-preview-size-sm)}.m-5ece2cd7{padding:calc(.5rem*var(--mantine-scale))}.m-7485cace{--container-size-xs:calc(33.75rem*var(--mantine-scale));--container-size-sm:calc(45rem*var(--mantine-scale));--container-size-md:calc(60rem*var(--mantine-scale));--container-size-lg:calc(71.25rem*var(--mantine-scale));--container-size-xl:calc(82.5rem*var(--mantine-scale));--container-size:var(--container-size-md);margin-left:auto;margin-right:auto;max-width:var(--container-size);padding-left:var(--mantine-spacing-md);padding-right:var(--mantine-spacing-md)}.m-7485cace:where([data-fluid]){max-width:100%}.m-e2125a27{--dialog-size-xs:calc(10rem*var(--mantine-scale));--dialog-size-sm:calc(12.5rem*var(--mantine-scale));--dialog-size-md:calc(21.25rem*var(--mantine-scale));--dialog-size-lg:calc(25rem*var(--mantine-scale));--dialog-size-xl:calc(31.25rem*var(--mantine-scale));--dialog-size:var(--dialog-size-md);max-width:calc(100vw - var(--mantine-spacing-xl)*2);min-height:calc(3.125rem*var(--mantine-scale));position:relative;width:var(--dialog-size)}.m-5abab665{left:auto;position:absolute;right:calc(var(--mantine-spacing-md)/2);top:calc(var(--mantine-spacing-md)/2)}:where([dir=rtl]) .m-5abab665{left:calc(var(--mantine-spacing-md)/2);right:auto}.m-3eebeb36{--divider-size-xs:calc(0.0625rem*var(--mantine-scale));--divider-size-sm:calc(0.125rem*var(--mantine-scale));--divider-size-md:calc(0.1875rem*var(--mantine-scale));--divider-size-lg:calc(0.25rem*var(--mantine-scale));--divider-size-xl:calc(0.3125rem*var(--mantine-scale));--divider-size:var(--divider-size-xs)}:where([data-mantine-color-scheme=light]) .m-3eebeb36{--divider-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-3eebeb36{--divider-color:var(--mantine-color-dark-4)}.m-3eebeb36:where([data-orientation=horizontal]){border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color)}.m-3eebeb36:where([data-orientation=vertical]){align-self:stretch;border-left:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);height:auto}.m-3eebeb36:where([data-with-label]){border:0}.m-9e365f20{align-items:center;color:var(--divider-color,var(--mantine-color-dimmed));display:flex;font-size:var(--mantine-font-size-xs);white-space:nowrap}.m-9e365f20:where([data-position=left]):before{display:none}.m-9e365f20:where([data-position=right]):after{display:none}.m-9e365f20:before{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color,var(--_divider-color));content:"";flex:1;height:calc(.0625rem*var(--mantine-scale));margin-right:var(--mantine-spacing-xs)}[dir=rtl] .m-9e365f20:before{margin-left:var(--mantine-spacing-xs);margin-right:0}.m-9e365f20:after{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color,var(--_divider-color));content:"";flex:1;height:calc(.0625rem*var(--mantine-scale));margin-left:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-9e365f20:after{margin-left:0;margin-right:var(--mantine-spacing-xs)}.m-f11b401e{--drawer-size-xs:calc(20rem*var(--mantine-scale));--drawer-size-sm:calc(23.75rem*var(--mantine-scale));--drawer-size-md:calc(27.5rem*var(--mantine-scale));--drawer-size-lg:calc(38.75rem*var(--mantine-scale));--drawer-size-xl:calc(48.75rem*var(--mantine-scale));--drawer-size:var(--drawer-size-md);--drawer-offset:0rem}.m-5a7c2c9{z-index:1000}.m-b8a05bbd{flex:var(--drawer-flex,0 0 var(--drawer-size));height:var(--drawer-height,calc(100% - var(--drawer-offset)*2));margin:var(--drawer-offset);max-height:100%;max-width:100%;overflow-y:auto}.m-31cd769a{align-items:var(--drawer-align,flex-start);display:flex;justify-content:var(--drawer-justify,flex-start)}.m-e9408a47{border-radius:var(--fieldset-radius,var(--mantine-radius-default));min-inline-size:auto;padding:var(--mantine-spacing-lg);padding-top:var(--mantine-spacing-xs)}.m-84c9523a{border:calc(.0625rem*var(--mantine-scale)) solid}:where([data-mantine-color-scheme=light]) .m-84c9523a{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-84c9523a{background-color:var(--mantine-color-dark-7);border-color:var(--mantine-color-dark-4)}.m-ef274e49{border:calc(.0625rem*var(--mantine-scale)) solid}:where([data-mantine-color-scheme=light]) .m-ef274e49{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-ef274e49{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4)}.m-eda993d3{border:0;border-radius:0;padding:0}.m-90794832{font-size:var(--mantine-font-size-sm)}.m-74ca27fe{margin-bottom:var(--mantine-spacing-sm);padding:0}.m-410352e9{--grid-overflow:visible;--grid-margin:calc(var(--grid-gutter)/-2);--grid-col-padding:calc(var(--grid-gutter)/2);overflow:var(--grid-overflow)}.m-dee7bd2f{align-items:var(--grid-align);display:flex;flex-wrap:wrap;justify-content:var(--grid-justify);margin:var(--grid-margin);width:calc(100% + var(--grid-gutter))}.m-96bdd299{--col-flex-grow:0;--col-offset:0rem;flex-basis:var(--col-flex-basis);flex-grow:var(--col-flex-grow);flex-shrink:0;margin-left:var(--col-offset);margin-right:0;max-width:var(--col-max-width);order:var(--col-order);padding:var(--grid-col-padding);width:var(--col-width)}:where([dir=rtl]) .m-96bdd299{margin-left:0;margin-right:var(--col-offset)}.m-bcb3f3c2{color:var(--mantine-color-black)}:where([data-mantine-color-scheme=light]) .m-bcb3f3c2{background-color:var(--mark-bg-light)}:where([data-mantine-color-scheme=dark]) .m-bcb3f3c2{background-color:var(--mark-bg-dark)}.m-9e117634{border-radius:var(--image-radius,0);display:block;flex:0;object-fit:var(--image-object-fit,cover);width:100%}@keyframes m-885901b1{0%{box-shadow:0 0 0 0 var(--indicator-color);opacity:.6}to{box-shadow:0 0 0 calc(.5rem*var(--mantine-scale)) var(--indicator-color);opacity:0}}.m-e5262200{--indicator-size:calc(0.625rem*var(--mantine-scale));--indicator-color:var(--mantine-primary-color-filled);display:block;position:relative}.m-e5262200:where([data-inline]){display:inline-block}.m-760d1fb1{align-items:center;bottom:var(--indicator-bottom);color:var(--indicator-text-color,var(--mantine-color-white));display:flex;font-size:var(--mantine-font-size-xs);height:var(--indicator-size);justify-content:center;left:var(--indicator-left);min-width:var(--indicator-size);right:var(--indicator-right);top:var(--indicator-top);transform:translate(var(--indicator-translate-x),var(--indicator-translate-y));white-space:nowrap;z-index:var(--indicator-z-index,200)}.m-760d1fb1,.m-760d1fb1:before{background-color:var(--indicator-color);border-radius:var(--indicator-radius,calc(62.5rem*var(--mantine-scale)));position:absolute}.m-760d1fb1:before{content:"";inset:0;z-index:-1}.m-760d1fb1:where([data-with-label]){padding-left:calc(var(--mantine-spacing-xs)/2);padding-right:calc(var(--mantine-spacing-xs)/2)}.m-760d1fb1:where([data-with-border]){border:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-body)}.m-760d1fb1[data-processing]:before{animation:m-885901b1 1s linear infinite}.m-dc6f14e2{--kbd-fz-xs:calc(0.625rem*var(--mantine-scale));--kbd-fz-sm:calc(0.75rem*var(--mantine-scale));--kbd-fz-md:calc(0.875rem*var(--mantine-scale));--kbd-fz-lg:calc(1rem*var(--mantine-scale));--kbd-fz-xl:calc(1.25rem*var(--mantine-scale));--kbd-fz:var(--kbd-fz-sm);--kbd-padding-xs:calc(0.125rem*var(--mantine-scale)) calc(0.25rem*var(--mantine-scale));--kbd-padding-sm:calc(0.1875rem*var(--mantine-scale)) calc(0.3125rem*var(--mantine-scale));--kbd-padding-md:calc(0.25rem*var(--mantine-scale)) calc(0.4375rem*var(--mantine-scale));--kbd-padding-lg:calc(0.3125rem*var(--mantine-scale)) calc(0.5625rem*var(--mantine-scale));--kbd-padding-xl:calc(0.5rem*var(--mantine-scale)) calc(0.875rem*var(--mantine-scale));--kbd-padding:var(--kbd-padding-sm);border:calc(.0625rem*var(--mantine-scale)) solid;border-bottom-width:calc(.1875rem*var(--mantine-scale));border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--kbd-fz);font-weight:700;line-height:var(--mantine-line-height);padding:var(--kbd-padding);unicode-bidi:embed}:where([data-mantine-color-scheme=light]) .m-dc6f14e2{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3);color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-dc6f14e2{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4);color:var(--mantine-color-dark-0)}.m-abbac491{--list-fz:var(--mantine-font-size-md);--list-lh:var(--mantine-line-height-md);font-size:var(--list-fz);line-height:var(--list-lh);list-style-position:inside;margin:0;padding:0}.m-abbac491:where([data-with-padding]){padding-left:var(--mantine-spacing-md)}[dir=rtl] .m-abbac491:where([data-with-padding]){padding-left:0;padding-right:var(--mantine-spacing-md)}.m-abb6bec2{line-height:var(--list-lh);white-space:nowrap}.m-abb6bec2:where([data-with-icon]){list-style:none}.m-abb6bec2:where([data-with-icon]) .m-75cd9f71{--li-direction:row;--li-align:center}.m-abb6bec2:where(:not(:first-of-type)){margin-top:var(--list-spacing,0)}.m-abb6bec2:where([data-centered]){line-height:1}.m-75cd9f71{align-items:var(--li-align,flex-start);display:inline-flex;flex-direction:var(--li-direction,column);white-space:normal}.m-60f83e5b{display:inline-block;margin-left:0;margin-right:var(--mantine-spacing-sm);vertical-align:middle}[dir=rtl] .m-60f83e5b{margin-left:var(--mantine-spacing-sm);margin-right:0}.m-6e45937b{align-items:center;display:flex;inset:0;justify-content:center;overflow:hidden;position:absolute;z-index:var(--lo-z-index)}.m-e8eb006c{position:relative;z-index:calc(var(--lo-z-index) + 1)}.m-df587f17{z-index:var(--lo-z-index)}[data-mantine-color-scheme=dark] .m-df587f17[data-light],[data-mantine-color-scheme=light] .m-df587f17[data-dark]{display:none}.m-dc9b7c9f{padding:calc(.25rem*var(--mantine-scale))}.m-9bfac126{color:var(--mantine-color-dimmed);cursor:default;font-size:var(--mantine-font-size-xs);font-weight:500;padding:calc(var(--mantine-spacing-xs)/2) var(--mantine-spacing-sm)}.m-efdf90cb{border-top:calc(.0625rem*var(--mantine-scale)) solid;margin-bottom:calc(.25rem*var(--mantine-scale));margin-top:calc(.25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-efdf90cb{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-efdf90cb{border-color:var(--mantine-color-dark-4)}.m-99ac2aa1{align-items:center;background-color:var(--_item-bg,transparent);border-radius:var(--popover-radius,var(--mantine-radius-default));color:var(--menu-item-color,var(--mantine-color-text));display:flex;font-size:var(--mantine-font-size-sm);padding:calc(var(--mantine-spacing-xs)/1.5) var(--mantine-spacing-sm);user-select:none;width:100%}.m-99ac2aa1:where([data-disabled],:disabled){color:var(--mantine-color-dimmed);opacity:.6;pointer-events:none}:where([data-mantine-color-scheme=light]) .m-99ac2aa1:where([data-hovered]){background-color:var(--menu-item-hover,var(--mantine-color-gray-1))}:where([data-mantine-color-scheme=dark]) .m-99ac2aa1:where([data-hovered]){background-color:var(--menu-item-hover,var(--mantine-color-dark-4))}.m-5476e0d3{flex:1}[dir=rtl] .m-5476e0d3{text-align:right}.m-8b75e504{align-items:center;display:flex;justify-content:center}.m-8b75e504:where([data-position=left]){margin-left:0;margin-right:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-8b75e504:where([data-position=left]){margin-left:var(--mantine-spacing-xs);margin-right:0}.m-8b75e504:where([data-position=right]){margin-left:var(--mantine-spacing-xs);margin-right:0}:where([dir=rtl]) .m-8b75e504:where([data-position=right]){margin-left:0;margin-right:var(--mantine-spacing-xs)}.m-9df02822{--modal-size-xs:calc(20rem*var(--mantine-scale));--modal-size-sm:calc(23.75rem*var(--mantine-scale));--modal-size-md:calc(27.5rem*var(--mantine-scale));--modal-size-lg:calc(38.75rem*var(--mantine-scale));--modal-size-xl:calc(48.75rem*var(--mantine-scale));--modal-size:var(--modal-size-md);--modal-y-offset:5dvh;--modal-x-offset:5vw}.m-9df02822[data-full-screen]{--modal-border-radius:0!important}.m-9df02822[data-full-screen] .m-54c44539{--_content-flex:0 0 100%;--_content-max-height:auto;--_content-height:100dvh}.m-9df02822[data-full-screen] .m-1f958f16{--_inner-y-offset:0;--_inner-x-offset:0}.m-9df02822[data-centered] .m-1f958f16{--_inner-align:center}.m-d0e2b9cd{border-top-left-radius:var(--modal-radius,var(--mantine-radius-default));border-top-right-radius:var(--modal-radius,var(--mantine-radius-default))}.m-54c44539{flex:var(--_content-flex,0 0 var(--modal-size));height:var(--_content-height,auto);max-height:var(--_content-max-height,calc(100dvh - var(--modal-y-offset)*2));max-width:100%;overflow-y:auto}.m-1f958f16{align-items:var(--_inner-align,flex-start);display:flex;justify-content:center;padding:var(--_inner-y-offset,var(--modal-y-offset)) var(--_inner-x-offset,var(--modal-x-offset))}.m-7cda1cd6{--pill-fz-xs:calc(0.625rem*var(--mantine-scale));--pill-fz-sm:calc(0.75rem*var(--mantine-scale));--pill-fz-md:calc(0.875rem*var(--mantine-scale));--pill-fz-lg:calc(1rem*var(--mantine-scale));--pill-fz-xl:calc(1.125rem*var(--mantine-scale));--pill-height-xs:calc(1.125rem*var(--mantine-scale));--pill-height-sm:calc(1.375rem*var(--mantine-scale));--pill-height-md:calc(1.5625rem*var(--mantine-scale));--pill-height-lg:calc(1.75rem*var(--mantine-scale));--pill-height-xl:calc(2rem*var(--mantine-scale));--pill-fz:var(--pill-fz-sm);--pill-height:var(--pill-height-sm);align-items:center;border-radius:var(--pill-radius,calc(62.5rem*var(--mantine-scale)));display:inline-flex;flex:0;font-size:var(--pill-fz);height:var(--pill-height);line-height:1;max-width:100%;padding-left:.8em;padding-right:.8em;user-select:none;-webkit-user-select:none;white-space:nowrap}:where([data-mantine-color-scheme=dark]) .m-7cda1cd6{background-color:var(--mantine-color-dark-7);color:var(--mantine-color-dark-0)}:where([data-mantine-color-scheme=light]) .m-7cda1cd6{color:var(--mantine-color-black)}:where([dir=rtl]) .m-7cda1cd6{padding-left:.8em;padding-right:.8em}.m-7cda1cd6:where([data-with-remove]){padding-right:0}.m-7cda1cd6:where([data-disabled],:has(button:disabled)){cursor:not-allowed}:where([data-mantine-color-scheme=light]) .m-44da308b{background-color:var(--mantine-color-gray-1)}:where([data-mantine-color-scheme=light]) .m-44da308b:where([data-disabled],:has(button:disabled)){background-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=light]) .m-e3a01f8{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=light]) .m-e3a01f8:where([data-disabled],:has(button:disabled)){background-color:var(--mantine-color-gray-3)}.m-1e0e6180{cursor:inherit;height:100%;line-height:var(--pill-height);overflow:hidden;text-overflow:ellipsis}.m-ae386778{border-radius:0;color:inherit;flex:0;font-size:inherit;height:100%;min-height:unset;min-width:2em;padding-left:.1em;padding-right:.3em;width:unset}.m-7cda1cd6[data-disabled]>.m-ae386778,.m-ae386778:disabled{background-color:transparent;cursor:not-allowed;min-width:.8em;padding:0;width:.8em}.m-7cda1cd6[data-disabled]>.m-ae386778>svg,.m-ae386778:disabled>svg{display:none}.m-ae386778>svg{pointer-events:none}.m-1dcfd90b{--pg-gap-xs:calc(0.375rem*var(--mantine-scale));--pg-gap-sm:calc(0.5rem*var(--mantine-scale));--pg-gap-md:calc(0.625rem*var(--mantine-scale));--pg-gap-lg:calc(0.75rem*var(--mantine-scale));--pg-gap-xl:calc(0.75rem*var(--mantine-scale));--pg-gap:var(--pg-gap-sm);align-items:center;display:flex;flex-wrap:wrap;gap:var(--pg-gap)}.m-45c4369d{appearance:none;background-color:transparent;border:0;color:inherit;flex:1;font-size:inherit;height:1.6em;min-width:calc(6.25rem*var(--mantine-scale));padding:0}.m-45c4369d::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-45c4369d:where([data-type=hidden],[data-type=auto]){height:calc(.0625rem*var(--mantine-scale));left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:calc(.0625rem*var(--mantine-scale))}.m-45c4369d:focus{outline:none}.m-45c4369d:where([data-type=auto]:focus){height:1.6em;opacity:1;position:static;visibility:visible}.m-45c4369d:where([data-pointer]:not([data-disabled],:disabled)){cursor:pointer}.m-45c4369d:where([data-disabled],:disabled){cursor:not-allowed}.m-f0824112{--nl-bg:var(--mantine-primary-color-light);--nl-hover:var(--mantine-primary-color-light-hover);--nl-color:var(--mantine-primary-color-light-color);align-items:center;background:var(--_nav-link-bg);color:var(--_nav-link-color);display:flex;opacity:var(--_nav-link-opacity,1);padding:calc(.5rem*var(--mantine-scale)) var(--mantine-spacing-sm);pointer-events:var(--_nav-link-pointer-events,auto);user-select:none;width:100%}@media (hover:hover){[data-mantine-color-scheme=light] .m-f0824112:hover{--_nav-link-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-f0824112:hover{--_nav-link-bg:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-f0824112:active{--_nav-link-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-f0824112:active{--_nav-link-bg:var(--mantine-color-dark-6)}}.m-f0824112[data-disabled]{--_nav-link-opacity:0.4;--_nav-link-pointer-events:none}.m-f0824112[data-active]{--_nav-link-bg:var(--nl-bg);--_nav-link-color:var(--nl-color)}@media (hover:hover){.m-f0824112[data-active]:hover{--_nav-link-bg:var(--nl-hover)}}@media (hover:none){.m-f0824112[data-active]:active{--_nav-link-bg:var(--nl-hover)}}.m-f0824112[data-active] .m-57492dcc{--_description-opacity:0.9;--_description-color:var(--nl-color)}.m-690090b5{align-items:center;display:flex;justify-content:center;margin-left:var(--_section-ml);margin-right:var(--_section-mr);transform:var(--_section-transform,none);transition:transform .15s ease}.m-690090b5>svg{display:block}.m-690090b5[data-position=left]{--_section-ml:0;--_section-mr:var(--mantine-spacing-sm)}.m-690090b5[data-position=right],[dir=rtl] .m-690090b5[data-position=left]{--_section-ml:var(--mantine-spacing-sm);--_section-mr:0}[dir=rtl] .m-690090b5[data-position=right]{--_section-ml:0;--_section-mr:var(--mantine-spacing-sm)}.m-690090b5[data-rotate]{--_section-transform:rotate(90deg)}.m-1f6ac4c4{font-size:var(--mantine-font-size-sm)}.m-f07af9d2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:var(--_body-white-space,auto)}.m-f07af9d2[data-no-wrap]{--_body-white-space:nowrap}.m-57492dcc{color:var(--_description-color,var(--mantine-color-dimmed));display:block;font-size:var(--mantine-font-size-xs);opacity:var(--_description-opacity,1);overflow:hidden;text-overflow:ellipsis;white-space:var(--_body-white-space,auto)}.m-e17b862f{padding-left:var(--_children-pl,var(--nl-offset,var(--mantine-spacing-lg)));padding-right:var(--_children-pr,0)}[dir=rtl] .m-e17b862f{--_children-pl:0;--_children-pr:var(--nl-offset,var(--mantine-spacing-lg))}.m-1fd8a00b{transform:rotate(-90deg)}.m-a513464{--notification-radius:var(--mantine-radius-default);--notification-color:var(--mantine-primary-color-filled);align-items:center;box-shadow:var(--mantine-shadow-lg);box-sizing:border-box;display:flex;overflow:hidden;padding:var(--mantine-spacing-xs) var(--mantine-spacing-xs) var(--mantine-spacing-xs) calc(1.375rem*var(--mantine-scale));position:relative}.m-a513464,.m-a513464:before{border-radius:var(--notification-radius)}.m-a513464:before{background-color:var(--notification-color);bottom:var(--notification-radius);content:"";display:block;left:calc(.25rem*var(--mantine-scale));position:absolute;top:var(--notification-radius);width:calc(.375rem*var(--mantine-scale))}:where([dir=rtl]) .m-a513464:before{left:auto;right:calc(.25rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-a513464{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=dark]) .m-a513464{background-color:var(--mantine-color-dark-6)}.m-a513464:where([data-with-icon]){padding-left:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-a513464:where([data-with-icon]){padding-right:var(--mantine-spacing-xs)}.m-a513464:where([data-with-icon]):before{display:none}:where([data-mantine-color-scheme=light]) .m-a513464:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-a513464:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}:where([dir=rtl]) .m-a513464{padding-left:var(--mantine-spacing-xs);padding-right:calc(1.375rem*var(--mantine-scale))}.m-a4ceffb{align-items:center;background-color:var(--notification-color);border-radius:calc(1.75rem*var(--mantine-scale));box-sizing:border-box;color:var(--mantine-color-white);display:flex;height:calc(1.75rem*var(--mantine-scale));justify-content:center;margin-right:var(--mantine-spacing-md);width:calc(1.75rem*var(--mantine-scale))}:where([dir=rtl]) .m-a4ceffb{margin-left:var(--mantine-spacing-md);margin-right:0}.m-b0920b15{margin-right:var(--mantine-spacing-md)}:where([dir=rtl]) .m-b0920b15{margin-left:var(--mantine-spacing-md);margin-right:0}.m-a49ed24{flex:1;margin-right:var(--mantine-spacing-xs);overflow:hidden}:where([dir=rtl]) .m-a49ed24{margin-left:var(--mantine-spacing-xs);margin-right:0}.m-3feedf16{font-size:var(--mantine-font-size-sm);font-weight:500;line-height:var(--mantine-line-height-sm);margin-bottom:calc(.125rem*var(--mantine-scale));overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .m-3feedf16{color:var(--mantine-color-gray-9)}:where([data-mantine-color-scheme=dark]) .m-3feedf16{color:var(--mantine-color-white)}.m-3d733a3a{color:var(--_description-color);font-size:var(--mantine-font-size-sm);line-height:var(--mantine-line-height-sm);overflow:hidden;text-overflow:ellipsis}[data-mantine-color-scheme=light] .m-3d733a3a{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-3d733a3a{color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-3d733a3a:where([data-with-title]){color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-3d733a3a:where([data-with-title]){color:var(--mantine-color-dark-2)}@media (hover:hover){[data-mantine-color-scheme=light] .m-919a4d88:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-919a4d88:hover{background-color:var(--mantine-color-dark-8)}}@media (hover:none){[data-mantine-color-scheme=light] .m-919a4d88:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-919a4d88:active{background-color:var(--mantine-color-dark-8)}}.m-e2f5cd4e{--ni-right-section-width-xs:calc(1.0625rem*var(--mantine-scale));--ni-right-section-width-sm:calc(1.5rem*var(--mantine-scale));--ni-right-section-width-md:calc(1.6875rem*var(--mantine-scale));--ni-right-section-width-lg:calc(1.9375rem*var(--mantine-scale));--ni-right-section-width-xl:calc(2.125rem*var(--mantine-scale))}.m-95e17d22{--ni-chevron-size-xs:calc(0.625rem*var(--mantine-scale));--ni-chevron-size-sm:calc(0.875rem*var(--mantine-scale));--ni-chevron-size-md:calc(1rem*var(--mantine-scale));--ni-chevron-size-lg:calc(1.125rem*var(--mantine-scale));--ni-chevron-size-xl:calc(1.25rem*var(--mantine-scale));--ni-chevron-size:var(--ni-chevron-size-sm);display:flex;flex-direction:column;height:calc(var(--_input-height) - .125rem*var(--mantine-scale));margin-left:auto;margin-right:0;max-width:calc(var(--ni-chevron-size)*1.7);width:100%}:where([dir=rtl]) .m-95e17d22{margin-left:0;margin-right:auto}.m-80b4b171{--control-border:calc(0.0625rem*var(--mantine-scale)) solid var(--_input-bd);--control-radius:calc(var(--_input-radius) - 0.0625rem*var(--mantine-scale));align-items:center;background-color:transparent;border-left:var(--control-border);color:var(--mantine-color-text);cursor:pointer;display:flex;flex:0 0 50%;height:calc(var(--_input-height)/2 - .0625rem*var(--mantine-scale));justify-content:center;padding:0;width:100%}.m-80b4b171:where(:disabled){background-color:transparent;cursor:not-allowed;opacity:.6}:where([data-mantine-color-scheme=light]) .m-80b4b171:where(:disabled){color:var(--mantine-color-gray-4)}:where([data-mantine-color-scheme=dark]) .m-80b4b171:where(:disabled){color:var(--mantine-color-dark-3)}.m-e2f5cd4e[data-error] :where(.m-80b4b171){color:var(--mantine-color-error)}:where([dir=rtl]) .m-80b4b171{border-left:none;border-right:var(--control-border)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-80b4b171:hover{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-80b4b171:hover{background-color:var(--mantine-color-dark-4)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-80b4b171:active{background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-80b4b171:active{background-color:var(--mantine-color-dark-4)}}.m-80b4b171:where(:first-of-type){border-bottom:calc(.03125rem*var(--mantine-scale)) solid var(--_input-bd);border-radius:0 var(--control-radius) 0 0}:where([dir=rtl]) .m-80b4b171:where(:first-of-type){border-radius:var(--control-radius) 0 0 0}.m-80b4b171:last-of-type{border-radius:0 0 var(--control-radius) 0;border-top:calc(.03125rem*var(--mantine-scale)) solid var(--_input-bd)}[dir=rtl] .m-80b4b171:last-of-type{border-radius:0 0 0 var(--control-radius)}.m-4addd315{--pagination-control-size-xs:calc(1.375rem*var(--mantine-scale));--pagination-control-size-sm:calc(1.625rem*var(--mantine-scale));--pagination-control-size-md:calc(2rem*var(--mantine-scale));--pagination-control-size-lg:calc(2.375rem*var(--mantine-scale));--pagination-control-size-xl:calc(2.75rem*var(--mantine-scale));--pagination-control-size:var(--pagination-control-size-md);--pagination-control-fz:var(--mantine-font-size-md);--pagination-active-bg:var(--mantine-primary-color-filled)}.m-326d024a{align-items:center;border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--pagination-control-radius,var(--mantine-radius-default));color:var(--mantine-color-text);cursor:pointer;display:flex;font-size:var(--pagination-control-fz);height:var(--pagination-control-size);justify-content:center;line-height:1;min-width:var(--pagination-control-size)}.m-326d024a:where([data-with-padding]){padding:calc(var(--pagination-control-size)/4)}.m-326d024a:where(:disabled,[data-disabled]){cursor:not-allowed;opacity:.4}:where([data-mantine-color-scheme=light]) .m-326d024a{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-4)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-326d024a:hover:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-gray-0)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-326d024a:active:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-gray-0)}}:where([data-mantine-color-scheme=dark]) .m-326d024a{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4)}@media (hover:hover){:where([data-mantine-color-scheme=dark]) .m-326d024a:hover:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=dark]) .m-326d024a:active:where(:not(:disabled,[data-disabled])){background-color:var(--mantine-color-dark-5)}}.m-326d024a:where([data-active]){background-color:var(--pagination-active-bg);border-color:var(--pagination-active-bg);color:var(--pagination-active-color,var(--mantine-color-white))}@media (hover:hover){.m-326d024a:where([data-active]):hover{background-color:var(--pagination-active-bg)}}@media (hover:none){.m-326d024a:where([data-active]):active{background-color:var(--pagination-active-bg)}}[dir=rtl] .m-326d024a>svg{transform:rotate(180deg)}.m-4ad7767d{align-items:center;display:flex;height:var(--pagination-control-size);justify-content:center;min-width:var(--pagination-control-size);pointer-events:none}.m-f61ca620{--psi-button-size-xs:calc(1.375rem*var(--mantine-scale));--psi-button-size-sm:calc(1.625rem*var(--mantine-scale));--psi-button-size-md:calc(1.75rem*var(--mantine-scale));--psi-button-size-lg:calc(2rem*var(--mantine-scale));--psi-button-size-xl:calc(2.5rem*var(--mantine-scale));--psi-icon-size-xs:calc(0.75rem*var(--mantine-scale));--psi-icon-size-sm:calc(0.9375rem*var(--mantine-scale));--psi-icon-size-md:calc(1.0625rem*var(--mantine-scale));--psi-icon-size-lg:calc(1.1875rem*var(--mantine-scale));--psi-icon-size-xl:calc(1.3125rem*var(--mantine-scale));--psi-button-size:var(--psi-button-size-sm);--psi-icon-size:var(--psi-icon-size-sm)}.m-ccf8da4c{overflow:hidden;position:relative}.m-f2d85dd2{background-color:transparent;border:0;color:inherit;font-family:var(--mantine-font-family);font-size:inherit;height:100%;inset:0;line-height:var(--mantine-line-height);outline:0;padding-left:var(--_input-padding-left);padding-right:var(--_input-padding-right);position:absolute;width:100%}.m-ccf8da4c[data-disabled] .m-f2d85dd2,.m-f2d85dd2:disabled{cursor:not-allowed}.m-f2d85dd2::placeholder{color:var(--_input-placeholder-color);opacity:1}.m-b1072d44{height:var(--psi-button-size);min-height:var(--psi-button-size);min-width:var(--psi-button-size);width:var(--psi-button-size)}.m-b1072d44:disabled{display:none}.m-f1cb205a{--pin-input-size-xs:calc(1.875rem*var(--mantine-scale));--pin-input-size-sm:calc(2.25rem*var(--mantine-scale));--pin-input-size-md:calc(2.625rem*var(--mantine-scale));--pin-input-size-lg:calc(3.125rem*var(--mantine-scale));--pin-input-size-xl:calc(3.75rem*var(--mantine-scale));--pin-input-size:var(--pin-input-size-sm)}.m-cb288ead{height:var(--pin-input-size);width:var(--pin-input-size)}@keyframes m-81a374bd{0%{background-position:0 0}to{background-position:calc(2.5rem*var(--mantine-scale)) 0}}.m-db6d6462{--progress-radius:var(--mantine-radius-default);--progress-size:var(--progress-size-md);--progress-size-xs:calc(0.1875rem*var(--mantine-scale));--progress-size-sm:calc(0.3125rem*var(--mantine-scale));--progress-size-md:calc(0.5rem*var(--mantine-scale));--progress-size-lg:calc(0.75rem*var(--mantine-scale));--progress-size-xl:calc(1rem*var(--mantine-scale));border-radius:var(--progress-radius);display:flex;height:var(--progress-size);overflow:hidden;position:relative}:where([data-mantine-color-scheme=light]) .m-db6d6462{background-color:var(--mantine-color-gray-2)}:where([data-mantine-color-scheme=dark]) .m-db6d6462{background-color:var(--mantine-color-dark-4)}.m-2242eb65{align-items:center;background-color:var(--progress-section-color);background-size:calc(1.25rem*var(--mantine-scale)) calc(1.25rem*var(--mantine-scale));display:flex;height:100%;justify-content:center;overflow:hidden;transition:width var(--progress-transition-duration,.1s) ease;width:var(--progress-section-width)}.m-2242eb65:where([data-striped]){background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent)}.m-2242eb65:where([data-animated]){animation:m-81a374bd 1s linear infinite}.m-2242eb65:where(:last-of-type){border-radius:0 var(--progress-radius) var(--progress-radius) 0}:where([dir=rtl]) .m-2242eb65:where(:last-of-type){border-radius:var(--progress-radius) 0 0 var(--progress-radius)}.m-2242eb65:where(:first-of-type){border-radius:var(--progress-radius) 0 0 var(--progress-radius)}:where([dir=rtl]) .m-2242eb65:where(:first-of-type){border-radius:0 var(--progress-radius) var(--progress-radius) 0}.m-91e40b74{color:var(--progress-label-color,var(--mantine-color-white));font-size:min(calc(var(--progress-size)*.65),calc(1.125rem*var(--mantine-scale)));font-weight:700;line-height:1;overflow:hidden;padding-left:calc(.25rem*var(--mantine-scale));padding-right:calc(.25rem*var(--mantine-scale));text-overflow:ellipsis;user-select:none;white-space:nowrap}.m-f3f1af94{--radio-size-xs:calc(1rem*var(--mantine-scale));--radio-size-sm:calc(1.25rem*var(--mantine-scale));--radio-size-md:calc(1.5rem*var(--mantine-scale));--radio-size-lg:calc(1.875rem*var(--mantine-scale));--radio-size-xl:calc(2.25rem*var(--mantine-scale));--radio-size:var(--radio-size-sm);--radio-icon-size-xs:calc(0.375rem*var(--mantine-scale));--radio-icon-size-sm:calc(0.5rem*var(--mantine-scale));--radio-icon-size-md:calc(0.625rem*var(--mantine-scale));--radio-icon-size-lg:calc(0.875rem*var(--mantine-scale));--radio-icon-size-xl:calc(1rem*var(--mantine-scale));--radio-icon-size:var(--radio-icon-size-sm);--radio-icon-color:var(--mantine-color-white)}.m-89c4f5e4{height:var(--radio-size);order:var(--_radio-order,1);position:relative;width:var(--radio-size)}.m-89c4f5e4[data-label-position=left]{--_radio-order:2}.m-f3ed6b2b{color:var(--_radio-icon-color,var(--radio-icon-color));height:var(--radio-icon-size);left:calc(50% - var(--radio-icon-size)/2);opacity:var(--_radio-icon-opacity,0);pointer-events:none;position:absolute;top:calc(50% - var(--radio-icon-size)/2);transform:var(--_radio-icon-transform,scale(.2) translateY(calc(.625rem*var(--mantine-scale))));transition:opacity .1s ease,transform .2s ease;width:var(--radio-icon-size)}.m-8a3dbb89{-webkit-tap-highlight-color:transparent;align-items:center;appearance:none;background-color:var(--_radio-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_radio-bd-color);border-radius:var(--radio-radius,var(--radio-size));cursor:var(--_cursor,var(--mantine-cursor-type));display:flex;height:var(--radio-size);justify-content:center;margin:0;position:relative;transition-duration:.1s;transition-property:background-color,border-color;transition-timing-function:ease;width:var(--radio-size)}[data-mantine-color-scheme=light] .m-8a3dbb89{--_radio-bg:var(--mantine-color-white);--_radio-bd-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-8a3dbb89{--_radio-bg:var(--mantine-color-dark-6);--_radio-bd-color:var(--mantine-color-dark-4)}.m-8a3dbb89:checked{--_radio-bg:var(--radio-color,var(--mantine-primary-color-filled));--_radio-bd-color:var(--radio-color,var(--mantine-primary-color-filled))}.m-8a3dbb89:checked+.m-f3ed6b2b{--_radio-icon-opacity:1;--_radio-icon-transform:scale(1)}.m-8a3dbb89:disabled{--_cursor:not-allowed}[data-mantine-color-scheme=light] .m-8a3dbb89:disabled{--_radio-bg:var(--mantine-color-gray-1);--_radio-bd-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=light] .m-8a3dbb89:disabled+.m-f3ed6b2b{--_radio-icon-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-8a3dbb89:disabled{--_radio-bg:var(--mantine-color-dark-5);--_radio-bd-color:var(--mantine-color-dark-4)}[data-mantine-color-scheme=dark] .m-8a3dbb89:disabled+.m-f3ed6b2b{--_radio-icon-color:var(--mantine-color-dark-7)}.m-8a3dbb89[data-error]{--_radio-bd-color:var(--mantine-color-error)}.m-1bfe9d39+.m-f3ed6b2b{--_radio-icon-color:var(--radio-color)}[data-mantine-color-scheme] .m-1bfe9d39:checked:not(:disabled){--_radio-bg:transparent;--_radio-bd-color:var(--radio-color)}[data-mantine-color-scheme] .m-1bfe9d39:checked:not(:disabled)+.m-f3ed6b2b{--_radio-icon-color:var(--radio-color);--_radio-icon-opacity:1;--_radio-icon-transform:none}.m-f8d312f2{--rating-size-xs:calc(0.875rem*var(--mantine-scale));--rating-size-sm:calc(1.125rem*var(--mantine-scale));--rating-size-md:calc(1.25rem*var(--mantine-scale));--rating-size-lg:calc(1.75rem*var(--mantine-scale));--rating-size-xl:calc(2rem*var(--mantine-scale));display:flex;width:max-content}.m-f8d312f2:where(:has(input:disabled)){pointer-events:none}.m-61734bb7{position:relative;transition:transform .1s ease}.m-61734bb7:where([data-active]){transform:scale(1.1);z-index:1}.m-5662a89a{display:block;height:var(--rating-size);width:var(--rating-size)}:where([data-mantine-color-scheme=light]) .m-5662a89a{fill:var(--mantine-color-gray-3);stroke:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-5662a89a{fill:var(--mantine-color-dark-3);stroke:var(--mantine-color-dark-3)}.m-5662a89a:where([data-filled]){fill:var(--rating-color);stroke:var(--rating-color)}.m-211007ba{-webkit-tap-highlight-color:transparent;height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.m-211007ba:focus-visible+label{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-21342ee4{-webkit-tap-highlight-color:transparent;cursor:pointer;display:block;left:0;position:absolute;top:0;z-index:var(--rating-item-z-index,0)}.m-21342ee4:where([data-read-only]){cursor:default}.m-21342ee4:where(:last-of-type){position:relative}.m-fae05d6a{clip-path:var(--rating-symbol-clip-path)}.m-1b3c8819{--tooltip-radius:var(--mantine-radius-default);border-radius:var(--tooltip-radius);font-size:var(--mantine-font-size-sm);padding:calc(var(--mantine-spacing-xs)/2) var(--mantine-spacing-xs);pointer-events:none;position:absolute;white-space:nowrap}:where([data-mantine-color-scheme=light]) .m-1b3c8819{background-color:var(--tooltip-bg,var(--mantine-color-gray-9));color:var(--tooltip-color,var(--mantine-color-white))}:where([data-mantine-color-scheme=dark]) .m-1b3c8819{background-color:var(--tooltip-bg,var(--mantine-color-gray-2));color:var(--tooltip-color,var(--mantine-color-black))}.m-1b3c8819:where([data-multiline]){white-space:normal}.m-f898399f{background-color:inherit;border:0;z-index:1}.m-b32e4812{position:relative}.m-b32e4812,.m-d43b5134{height:var(--rp-size);min-height:var(--rp-size);min-width:var(--rp-size);width:var(--rp-size)}.m-d43b5134{transform:rotate(-90deg)}.m-b1ca1fbf{stroke:var(--curve-color,var(--rp-curve-root-color))}[data-mantine-color-scheme=light] .m-b1ca1fbf{--rp-curve-root-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-b1ca1fbf{--rp-curve-root-color:var(--mantine-color-dark-4)}.m-b23f9dc4{left:var(--rp-label-offset);position:absolute;right:var(--rp-label-offset);top:50%;transform:translateY(-50%)}.m-cf365364{--sc-padding-xs:calc(0.1875rem*var(--mantine-scale)) calc(0.375rem*var(--mantine-scale));--sc-padding-sm:calc(0.3125rem*var(--mantine-scale)) calc(0.625rem*var(--mantine-scale));--sc-padding-md:calc(0.4375rem*var(--mantine-scale)) calc(0.875rem*var(--mantine-scale));--sc-padding-lg:calc(0.5625rem*var(--mantine-scale)) calc(1rem*var(--mantine-scale));--sc-padding-xl:calc(0.75rem*var(--mantine-scale)) calc(1.25rem*var(--mantine-scale));--sc-transition-duration:200ms;--sc-padding:var(--sc-padding-sm);--sc-transition-timing-function:ease;--sc-font-size:var(--mantine-font-size-sm);background-color:var(--_bg);border-radius:var(--sc-radius,var(--mantine-radius-default));display:var(--_display,inline-flex);flex-direction:var(--_flex-direction,row);overflow:hidden;padding:4px;position:relative;width:var(--_width,auto)}.m-cf365364[data-initialization]{--sc-transition-duration:0ms!important}.m-cf365364[data-full-width]{--_display:flex}.m-cf365364[data-orientation=vertical]{--_display:flex;--_flex-direction:column;--_width:max-content}.m-cf365364[data-orientation=vertical][data-full-width]{--_width:auto}[data-mantine-color-scheme=light] .m-cf365364{--_bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-cf365364{--_bg:var(--mantine-color-dark-8)}.m-9e182ccd{background-color:var(--_bg);border-radius:var(--sc-radius,var(--mantine-radius-default));box-shadow:var(--_box-shadow);display:block;height:var(--sc-indicator-height);position:absolute;transform:var(--sc-indicator-transform);transition:transform var(--sc-transition-duration) var(--sc-transition-timing-function),width var(--sc-transition-duration) var(--sc-transition-timing-function);width:var(--sc-indicator-width);z-index:1}[data-mantine-color-scheme=light] .m-9e182ccd{--_box-shadow:var(--sc-shadow,none);--_bg:var(--sc-color,var(--mantine-color-white))}[data-mantine-color-scheme=dark] .m-9e182ccd{--_box-shadow:none;--_bg:var(--sc-color,var(--mantine-color-dark-5))}.m-1738fcb2{-webkit-tap-highlight-color:transparent;border-radius:var(--sc-radius,var(--mantine-radius-default));color:var(--_color);cursor:var(--_cursor,pointer);display:block;font-size:var(--sc-font-size);font-weight:500;outline:var(--_outline,none);overflow:hidden;padding:var(--sc-padding);text-align:center;text-overflow:ellipsis;transition:color var(--sc-transition-duration) var(--sc-transition-timing-function);user-select:none;white-space:nowrap}.m-1738fcb2[data-read-only]{--_cursor:default}.m-1738fcb2[data-disabled],fieldset:disabled .m-1738fcb2{--_cursor:not-allowed}[data-mantine-color-scheme=light] .m-1738fcb2[data-disabled],[data-mantine-color-scheme=light] fieldset:disabled .m-1738fcb2{--_color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-1738fcb2[data-disabled],[data-mantine-color-scheme=dark] fieldset:disabled .m-1738fcb2{--_color:var(--mantine-color-dark-3)}[data-mantine-color-scheme=light] .m-1738fcb2[data-active]{--_color:var(--sc-label-color,var(--mantine-color-black))}[data-mantine-color-scheme=dark] .m-1738fcb2[data-active]{--_color:var(--sc-label-color,var(--mantine-color-white))}@media (hover:hover){[data-mantine-color-scheme=light] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):hover{--_color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):hover{--_color:var(--mantine-color-white)}}@media (hover:none){[data-mantine-color-scheme=light] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):active{--_color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-1738fcb2:not([data-disabled],[data-active],[data-read-only]):active{--_color:var(--mantine-color-white)}}@media (hover:hover){[data-mantine-color-scheme=light] fieldset:disabled .m-1738fcb2:hover{--_color:var(--mantine-color-gray-5)!important}[data-mantine-color-scheme=dark] fieldset:disabled .m-1738fcb2:hover{--_color:var(--mantine-color-dark-3)!important}}@media (hover:none){[data-mantine-color-scheme=light] fieldset:disabled .m-1738fcb2:active{--_color:var(--mantine-color-gray-5)!important}[data-mantine-color-scheme=dark] fieldset:disabled .m-1738fcb2:active{--_color:var(--mantine-color-dark-3)!important}}[data-mantine-color-scheme=light] .m-1738fcb2{--_color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1738fcb2{--_color:var(--mantine-color-dark-1)}.m-1714d588{height:0;opacity:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}.m-1714d588[data-focus-ring=auto]:focus:focus-visible+.m-1738fcb2{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-1714d588[data-focus-ring=always]:focus+.m-1738fcb2{--_outline:calc(0.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}.m-69686b9b{flex:1;position:relative;transition:border-color var(--sc-transition-duration) var(--sc-transition-timing-function);z-index:2}.m-cf365364[data-with-items-borders] :where(.m-69686b9b):before{background-color:var(--_separator-color);bottom:0;content:"";left:0;position:absolute;top:0;transition:background-color var(--sc-transition-duration) var(--sc-transition-timing-function);width:calc(.0625rem*var(--mantine-scale))}[dir=rtl] .m-cf365364[data-with-items-borders] :where(.m-69686b9b):before{left:auto;right:0}.m-69686b9b[data-orientation=vertical]:before{bottom:auto;height:calc(.0625rem*var(--mantine-scale));left:0;right:0;top:0;width:auto}[data-mantine-color-scheme=light] .m-69686b9b{--_separator-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-69686b9b{--_separator-color:var(--mantine-color-dark-4)}.m-69686b9b:first-of-type:before,[data-mantine-color-scheme] .m-69686b9b[data-active]+.m-69686b9b:before,[data-mantine-color-scheme] .m-69686b9b[data-active]:before{--_separator-color:transparent}.m-2415a157{display:grid;gap:var(--sg-spacing-y) var(--sg-spacing-x);grid-template-columns:repeat(var(--sg-cols),minmax(0,1fr))}@keyframes m-299c329c{0%,to{opacity:.4}50%{opacity:1}}.m-18320242{border-radius:var(--skeleton-radius,var(--mantine-radius-default));height:var(--skeleton-height,auto);position:relative;transform:translateZ(0);-webkit-transform:translateZ(0);width:var(--skeleton-width,100%)}.m-18320242:where([data-animate]):after{animation:m-299c329c 1.5s linear infinite}.m-18320242:where([data-visible]){overflow:hidden}.m-18320242:where([data-visible]):before{background-color:var(--mantine-color-body);content:"";inset:0;position:absolute;z-index:10}.m-18320242:where([data-visible]):after{content:"";inset:0;position:absolute;z-index:11}:where([data-mantine-color-scheme=light]) .m-18320242:where([data-visible]):after{background-color:var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-18320242:where([data-visible]):after{background-color:var(--mantine-color-dark-4)}.m-dd36362e{--slider-size-xs:calc(0.25rem*var(--mantine-scale));--slider-size-sm:calc(0.375rem*var(--mantine-scale));--slider-size-md:calc(0.5rem*var(--mantine-scale));--slider-size-lg:calc(0.625rem*var(--mantine-scale));--slider-size-xl:calc(0.75rem*var(--mantine-scale));--slider-size:var(--slider-size-md);--slider-radius:calc(62.5rem*var(--mantine-scale));--slider-color:var(--mantine-primary-color-filled);-webkit-tap-highlight-color:transparent;align-items:center;display:flex;flex-direction:column;height:calc(var(--slider-size)*2);outline:none;padding-left:var(--slider-size);padding-right:var(--slider-size);position:relative;touch-action:none}[data-mantine-color-scheme=light] .m-dd36362e{--slider-track-bg:var(--mantine-color-gray-2);--slider-track-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd36362e{--slider-track-bg:var(--mantine-color-dark-4);--slider-track-disabled-bg:var(--mantine-color-dark-3)}.m-c9357328{background-color:var(--_label-bg);border-radius:var(--mantine-radius-sm);color:var(--mantine-color-white);font-size:var(--mantine-font-size-xs);padding:calc(var(--mantine-spacing-xs)/2);pointer-events:none;position:absolute;top:calc(-2.25rem*var(--mantine-scale));touch-action:none;user-select:none;white-space:nowrap}[data-mantine-color-scheme=light] .m-c9357328{--_label-bg:var(--mantine-color-gray-9)}[data-mantine-color-scheme=dark] .m-c9357328{--_label-bg:var(--mantine-color-dark-4)}.m-c9a9a60a{align-items:center;background-color:var(--_thumb-bg);border:calc(.25rem*var(--mantine-scale)) solid var(--_thumb-bd);border-radius:var(--slider-radius);box-shadow:var(--_thumb-box-shadow,none);color:var(--_thumb-bd);cursor:pointer;display:var(--_thumb-display,flex);height:var(--slider-thumb-size);justify-content:center;left:var(--slider-thumb-offset);outline-offset:calc(.125rem*var(--mantine-scale));position:absolute;top:50%;touch-action:none;transform:var(--_thumb-transform,translate(-50%,-50%));transition:box-shadow .1s ease,transform .1s ease;user-select:none;width:var(--slider-thumb-size);z-index:3}[dir=rtl] .m-c9a9a60a{left:auto;right:calc(var(--slider-thumb-offset) - var(--slider-thumb-size))}.m-c9a9a60a[data-disabled],fieldset:disabled .m-c9a9a60a{--_thumb-display:none}.m-c9a9a60a[data-dragging]{--_thumb-transform:translate(-50%,-50%) scale(1.05);--_thumb-box-shadow:var(--mantine-shadow-sm)}[data-mantine-color-scheme=light] .m-c9a9a60a{--_thumb-bd:var(--slider-color);--_thumb-bg:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-c9a9a60a{--_thumb-bd:var(--mantine-color-white);--_thumb-bg:var(--slider-color)}.m-a8645c2{align-items:center;cursor:var(--_track-cursor,pointer);display:flex;height:calc(var(--slider-size)*2);width:100%}.m-a8645c2[data-disabled],fieldset:disabled .m-a8645c2{--_track-cursor:not-allowed}.m-c9ade57f{height:var(--slider-size);position:relative;width:100%}.m-c9ade57f[data-inverted]:not([data-disabled]){--_track-bg:var(--slider-color)}.m-c9ade57f[data-inverted][data-disabled],fieldset:disabled .m-c9ade57f[data-inverted]{--_track-bg:var(--slider-track-disabled-bg)}.m-c9ade57f:before{background-color:var(--_track-bg,var(--slider-track-bg));content:"";left:calc(var(--slider-size)*-1);right:calc(var(--slider-size)*-1);z-index:0}.m-38aeed47,.m-c9ade57f:before{border-radius:var(--slider-radius);bottom:0;position:absolute;top:0}.m-38aeed47{background-color:var(--_bar-bg,var(--slider-color));left:var(--slider-bar-offset);width:var(--slider-bar-width);z-index:1}[dir=rtl] .m-38aeed47{left:auto;right:var(--slider-bar-offset)}.m-38aeed47[data-inverted]{--_bar-bg:var(--slider-track-bg)}.m-38aeed47[data-disabled]:not([data-inverted]),fieldset:disabled .m-38aeed47:not([data-inverted]){--_bar-bg:var(--_bar-disabled-bg)}[data-mantine-color-scheme=light] .m-38aeed47{--_bar-disabled-bg:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-38aeed47{--_bar-disabled-bg:var(--mantine-color-dark-3)}.m-b7b0423a{height:0;left:calc(var(--mark-offset) - var(--slider-size)/2);pointer-events:none;position:absolute;top:0;z-index:2}[dir=rtl] .m-b7b0423a{left:unset;right:calc(var(--mark-offset) - var(--slider-size)/2)}.m-dd33bc19{background-color:var(--_mark-bg,var(--mantine-color-white));border:calc(.125rem*var(--mantine-scale)) solid var(--_mark-bd);border-radius:calc(62.5rem*var(--mantine-scale));height:var(--slider-size);pointer-events:none;transform:translateX((calc(var(--slider-size)/-2)));width:var(--slider-size)}[data-mantine-color-scheme] .m-dd33bc19[data-filled]{--_mark-bd:var(--slider-color)}[data-mantine-color-scheme=light] .m-dd33bc19[data-filled][data-disabled]{--_mark-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd33bc19[data-filled][data-disabled]{--_mark-bd:var(--mantine-color-dark-3)}[data-mantine-color-scheme=light] .m-dd33bc19{--_mark-bd:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-dd33bc19{--_mark-bd:var(--mantine-color-dark-4)}.m-68c77a5b{color:var(--_mark-label-color);cursor:pointer;font-size:var(--mantine-font-size-sm);transform:translate(calc(-50% + var(--slider-size)/2),calc(var(--mantine-spacing-xs)/2));user-select:none;white-space:nowrap}[data-mantine-color-scheme=light] .m-68c77a5b{--_mark-label-color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-68c77a5b{--_mark-label-color:var(--mantine-color-dark-2)}.m-559cce2d{margin-bottom:var(--_spoiler-margin-bottom);position:relative}.m-559cce2d[data-has-spoiler]{--_spoiler-margin-bottom:calc(1.5rem*var(--mantine-scale))}.m-b912df4e{display:flex;flex-direction:column;overflow:hidden;transition:max-height var(--spoiler-transition-duration,.2s) ease}.m-b9131032{height:calc(1.5rem*var(--mantine-scale));left:0;position:absolute;top:100%}[dir=rtl] .m-b9131032{left:auto;right:0}.m-6d731127{align-items:var(--stack-align,stretch);display:flex;flex-direction:column;gap:var(--stack-gap,var(--mantine-spacing-md));justify-content:var(--stack-justify,flex-start)}.m-cbb4ea7e{--stepper-icon-size-xs:calc(2.125rem*var(--mantine-scale));--stepper-icon-size-sm:calc(2.25rem*var(--mantine-scale));--stepper-icon-size-md:calc(2.625rem*var(--mantine-scale));--stepper-icon-size-lg:calc(3rem*var(--mantine-scale));--stepper-icon-size-xl:calc(3.25rem*var(--mantine-scale));--stepper-icon-size:var(--stepper-icon-size-md);--stepper-color:var(--mantine-primary-color-filled);--stepper-content-padding:var(--mantine-spacing-md);--stepper-spacing:var(--mantine-spacing-md);--stepper-radius:calc(62.5rem*var(--mantine-scale));--stepper-fz:var(--mantine-font-size-md)}.m-aaf89d0b{align-items:var(--_steps-align-items,center);display:flex;flex-direction:var(--_steps-direction);flex-wrap:var(--_steps-wrap,nowrap);gap:var(--_steps-gap)}.m-aaf89d0b[data-wrap]{--_steps-wrap:wrap;--_steps-gap:var(--mantine-spacing-md) 0}.m-aaf89d0b[data-orientation=vertical]{--_steps-direction:column}.m-aaf89d0b[data-orientation=vertical][data-icon-position=left]{--_steps-align-items:flex-start}.m-aaf89d0b[data-orientation=vertical][data-icon-position=right]{--_steps-align-items:flex-end}.m-aaf89d0b[data-orientation=horizontal]{--_steps-direction:row}.m-2a371ac9{--_separator-offset:calc(var(--stepper-icon-size)/2 - 0.0625rem*var(--mantine-scale));background-color:var(--_separator-bg);flex:1;height:var(--_separator-height);margin:var(--_separator-mt) var(--_separator-mr) var(--_separator-mb) var(--_separator-ml);transition:background-color .15s ease;width:var(--_separator-width)}[data-mantine-color-scheme=light] .m-2a371ac9{--_separator-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2a371ac9{--_separator-bg:var(--mantine-color-dark-2)}.m-2a371ac9[data-active]{--_separator-bg:var(--stepper-color)}.m-2a371ac9[data-orientation=horizontal]{--_separator-height:calc(0.125rem*var(--mantine-scale));--_separator-ml:var(--mantine-spacing-md);--_separator-mr:var(--mantine-spacing-md);--_separator-mt:0;--_separator-mb:0}.m-2a371ac9[data-orientation=vertical]{--_separator-width:calc(0.125rem*var(--mantine-scale));--_separator-mt:calc(var(--mantine-spacing-xs)/2);--_separator-mb:calc(var(--mantine-spacing-xs) - 0.125rem*var(--mantine-scale))}.m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-2a371ac9[data-orientation=vertical][data-icon-position=right],[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:0;--_separator-mr:var(--_separator-offset)}[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=right]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-78da155d{padding-top:var(--stepper-content-padding)}.m-cbb57068{--_step-color:var(--step-color,var(--stepper-color));cursor:var(--_step-cursor,default);display:flex;flex-direction:var(--_step-direction)}.m-cbb57068[data-allow-click]{--_step-cursor:pointer}.m-cbb57068[data-icon-position=left]{--_step-direction:row}.m-cbb57068[data-icon-position=right]{--_step-direction:row-reverse}.m-f56b1e2c{align-items:center;flex-direction:var(--_step-direction)}.m-833edb7e{--_separator-spacing:calc(var(--mantine-spacing-xs)/2);justify-content:flex-start;margin-top:var(--_step-mt,var(--_separator-spacing));min-height:calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--_separator-spacing));overflow:hidden}.m-833edb7e:first-of-type{--_step-mt:0}.m-833edb7e:last-of-type .m-6496b3f3{display:none}.m-818e70b{position:relative}.m-6496b3f3{border-left:calc(.125rem*var(--mantine-scale)) solid var(--_separator-border-color);height:100vh;left:calc(var(--stepper-icon-size)/2);position:absolute;top:calc(var(--stepper-icon-size) + var(--_separator-spacing))}[data-mantine-color-scheme=light] .m-6496b3f3{--_separator-border-color:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-6496b3f3{--_separator-border-color:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-6496b3f3[data-active]{--_separator-border-color:var(--stepper-color)}.m-1959ad01{align-items:center;background-color:var(--_step-icon-bg);border:calc(.125rem*var(--mantine-scale)) solid var(--_step-icon-border-color);border-radius:var(--stepper-radius);color:var(--_step-icon-color);display:flex;font-size:var(--stepper-fz);font-weight:700;height:var(--stepper-icon-size);justify-content:center;min-height:var(--stepper-icon-size);min-width:var(--stepper-icon-size);position:relative;transition:background-color .15s ease,border-color .15s ease;width:var(--stepper-icon-size)}[data-mantine-color-scheme=light] .m-1959ad01{--_step-icon-bg:var(--mantine-color-gray-1);--_step-icon-border-color:var(--mantine-color-gray-1);--_step-icon-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1959ad01{--_step-icon-bg:var(--mantine-color-dark-5);--_step-icon-border-color:var(--mantine-color-dark-5);--_step-icon-color:var(--mantine-color-dark-1)}[data-mantine-color-scheme] .m-1959ad01[data-progress]{--_step-icon-border-color:var(--_step-color)}[data-mantine-color-scheme] .m-1959ad01[data-completed]{--_step-icon-color:var(--stepper-icon-color,var(--mantine-color-white));--_step-icon-bg:var(--_step-color);--_step-icon-border-color:var(--_step-color)}.m-a79331dc{align-items:center;color:var(--stepper-icon-color,var(--mantine-color-white));display:flex;inset:0;justify-content:center;position:absolute}.m-1956aa2a{display:flex;flex-direction:column;margin-left:var(--_step-body-ml);margin-right:var(--_step-body-mr);margin-top:var(--_step-body-mt);text-align:var(--_step-body-ta)}.m-1956aa2a[data-icon-position=left]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=left]{--_step-body-ta:right;--_step-body-ml:0;--_step-body-mr:var(--mantine-spacing-sm)}.m-1956aa2a[data-icon-position=right]{--_step-body-ta:right;--_step-body-mr:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=right]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm);--_step-body-mr:0}.m-12051f6c{font-size:var(--stepper-fz);font-weight:500;line-height:1}.m-164eea74{color:var(--mantine-color-dimmed);font-size:calc(var(--stepper-fz) - .125rem*var(--mantine-scale));line-height:1;margin-bottom:calc(var(--stepper-spacing)/3);margin-top:calc(var(--stepper-spacing)/3)}.m-5f93f3bb{--switch-height-xs:calc(1rem*var(--mantine-scale));--switch-height-sm:calc(1.25rem*var(--mantine-scale));--switch-height-md:calc(1.5rem*var(--mantine-scale));--switch-height-lg:calc(1.875rem*var(--mantine-scale));--switch-height-xl:calc(2.25rem*var(--mantine-scale));--switch-width-xs:calc(2rem*var(--mantine-scale));--switch-width-sm:calc(2.375rem*var(--mantine-scale));--switch-width-md:calc(2.875rem*var(--mantine-scale));--switch-width-lg:calc(3.5rem*var(--mantine-scale));--switch-width-xl:calc(4.5rem*var(--mantine-scale));--switch-thumb-size-xs:calc(0.75rem*var(--mantine-scale));--switch-thumb-size-sm:calc(0.875rem*var(--mantine-scale));--switch-thumb-size-md:calc(1.125rem*var(--mantine-scale));--switch-thumb-size-lg:calc(1.375rem*var(--mantine-scale));--switch-thumb-size-xl:calc(1.75rem*var(--mantine-scale));--switch-label-font-size-xs:calc(0.3125rem*var(--mantine-scale));--switch-label-font-size-sm:calc(0.375rem*var(--mantine-scale));--switch-label-font-size-md:calc(0.4375rem*var(--mantine-scale));--switch-label-font-size-lg:calc(0.5625rem*var(--mantine-scale));--switch-label-font-size-xl:calc(0.6875rem*var(--mantine-scale));--switch-track-label-padding-xs:calc(0.0625rem*var(--mantine-scale));--switch-track-label-padding-sm:calc(0.125rem*var(--mantine-scale));--switch-track-label-padding-md:calc(0.125rem*var(--mantine-scale));--switch-track-label-padding-lg:calc(0.1875rem*var(--mantine-scale));--switch-track-label-padding-xl:calc(0.1875rem*var(--mantine-scale));--switch-height:var(--switch-height-sm);--switch-width:var(--switch-width-sm);--switch-thumb-size:var(--switch-thumb-size-sm);--switch-label-font-size:var(--switch-label-font-size-sm);--switch-track-label-padding:var(--switch-track-label-padding-sm);--switch-radius:calc(62.5rem*var(--mantine-scale));--switch-color:var(--mantine-primary-color-filled);position:relative}.m-926b4011{height:0;opacity:0;padding:0;position:absolute;white-space:nowrap;width:0}.m-926b4011,.m-9307d992{margin:0;overflow:hidden}.m-9307d992{-webkit-tap-highlight-color:transparent;align-items:center;appearance:none;background-color:var(--_switch-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_switch-bd);border-radius:var(--switch-radius);color:var(--_switch-color);cursor:var(--_switch-cursor,var(--mantine-cursor-type));display:flex;font-size:var(--switch-label-font-size);font-weight:600;height:var(--switch-height);line-height:0;min-width:var(--switch-width);order:var(--_switch-order,1);position:relative;transition:background-color .15s ease,border-color .15s ease;user-select:none;z-index:0}.m-926b4011:focus-visible+.m-9307d992{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-primary-color-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-926b4011:checked+.m-9307d992{--_switch-bg:var(--switch-color);--_switch-bd:var(--switch-color);--_switch-color:var(--mantine-color-white)}.m-926b4011:disabled+.m-9307d992,.m-926b4011[data-disabled]+.m-9307d992{--_switch-bg:var(--_switch-disabled-color);--_switch-bd:var(--_switch-disabled-color);--_switch-cursor:not-allowed}[data-mantine-color-scheme=light] .m-9307d992{--_switch-bg:var(--mantine-color-gray-2);--_switch-bd:var(--mantine-color-gray-3);--_switch-color:var(--mantine-color-gray-6);--_switch-disabled-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-9307d992{--_switch-bg:var(--mantine-color-dark-6);--_switch-bd:var(--mantine-color-dark-4);--_switch-color:var(--mantine-color-dark-1);--_switch-disabled-color:var(--mantine-color-dark-4)}.m-9307d992[data-error]{--_switch-bd:var(--mantine-color-error)}.m-9307d992[data-label-position=left]{--_switch-order:2}.m-93039a1d{background-color:var(--_switch-thumb-bg,var(--mantine-color-white));border:calc(.0625rem*var(--mantine-scale)) solid var(--_switch-thumb-bd);border-radius:var(--switch-radius);display:flex;height:var(--switch-thumb-size);left:var(--_switch-thumb-left,var(--switch-track-label-padding));position:absolute;transition:left .15s ease;width:var(--switch-thumb-size);z-index:1}[dir=rtl] .m-93039a1d{left:unset;right:var(--_switch-thumb-left,var(--switch-track-label-padding));transition:right .15s ease}.m-93039a1d>*{margin:auto}.m-926b4011:checked+*>.m-93039a1d{--_switch-thumb-left:calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));--_switch-thumb-bd:var(--mantine-color-white)}.m-926b4011:disabled+*>.m-93039a1d,.m-926b4011[data-disabled]+*>.m-93039a1d{--_switch-thumb-bd:var(--_switch-thumb-bg-disabled);--_switch-thumb-bg:var(--_switch-thumb-bg-disabled)}[data-mantine-color-scheme=light] .m-93039a1d{--_switch-thumb-bd:var(--mantine-color-gray-3);--_switch-thumb-bg-disabled:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-93039a1d{--_switch-thumb-bd:var(--mantine-color-white);--_switch-thumb-bg-disabled:var(--mantine-color-dark-3)}.m-8277e082{display:grid;height:100%;margin:0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding));min-width:calc(var(--switch-width) - var(--switch-thumb-size));padding-inline:var(--switch-track-label-padding);place-content:center;transition:margin .15s ease}.m-926b4011:checked+*>.m-8277e082,[dir=rtl] .m-8277e082{margin:0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding)) 0 0}[dir=rtl] .m-926b4011:checked+*>.m-8277e082{margin:0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding))}.m-b23fa0ef{border:var(--_table-border,none);border-collapse:collapse;caption-side:var(--table-caption-side,bottom);font-size:var(--mantine-font-size-sm);line-height:var(--mantine-line-height);table-layout:var(--table-layout,auto);width:100%}[data-mantine-color-scheme=light] .m-b23fa0ef{--_table-hover-color:var(--table-highlight-on-hover-color,var(--mantine-color-gray-1));--_table-striped-color:var(--table-striped-color,var(--mantine-color-gray-0));--_table-border-color:var(--table-border-color,var(--mantine-color-gray-3))}[data-mantine-color-scheme=dark] .m-b23fa0ef{--_table-hover-color:var(--table-highlight-on-hover-color,var(--mantine-color-dark-5));--_table-striped-color:var(--table-striped-color,var(--mantine-color-dark-6));--_table-border-color:var(--table-border-color,var(--mantine-color-dark-4))}.m-b23fa0ef[data-with-table-border]{--_table-border:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color)}.m-4e7aa4f3{text-align:var(--_th-text-align,left)}[dir=rtl] .m-4e7aa4f3{--_th-text-align:right}.m-4e7aa4fd{background-color:var(--_tr-bg,transparent);border-bottom:var(--_tr-border-bottom,none)}@media (hover:hover){[data-mantine-color-scheme] .m-4e7aa4fd:hover[data-hover]{--_tr-bg:var(--_tr-hover-bg)!important}}@media (hover:none){[data-mantine-color-scheme] .m-4e7aa4fd:active[data-hover]{--_tr-bg:var(--_tr-hover-bg)!important}}.m-4e7aa4fd[data-with-row-border]{--_tr-border-bottom:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color)}.m-4e7aa4ef,.m-4e7aa4f3{--_border-right:none;--_border-left:none;border-left:var(--_border-left);border-right:var(--_border-right);padding:var(--table-vertical-spacing) var(--table-horizontal-spacing,var(--mantine-spacing-xs))}.m-4e7aa4ef[data-with-column-border]:not(:last-child),.m-4e7aa4f3[data-with-column-border]:not(:last-child){--_border-right:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color)}[dir=rtl] .m-4e7aa4ef[data-with-column-border]:not(:last-child),[dir=rtl] .m-4e7aa4f3[data-with-column-border]:not(:last-child){--_border-left:calc(0.0625rem*var(--mantine-scale)) solid var(--_table-border-color);--_border-right:none}.m-b2404537>.m-4e7aa4fd:last-of-type[data-with-row-border]{--_tr-border-bottom:none}.m-b2404537>.m-4e7aa4fd[data-striped=even]:nth-of-type(2n),.m-b2404537>.m-4e7aa4fd[data-striped=odd]:nth-of-type(odd){--_tr-bg:var(--_table-striped-color)}.m-b2404537>.m-4e7aa4fd[data-hover]{--_tr-hover-bg:var(--_table-hover-color)}.m-b242d975{background-color:var(--_thead-bg,transparent);position:var(--_thead-position,static);top:var(--table-sticky-header-offset,0);z-index:1}.m-b242d975[data-sticky]{--_thead-position:sticky;--_thead-bg:var(--mantine-color-body)}.m-9e5a3ac7{color:var(--mantine-color-dimmed);margin-bottom:var(--_margin-bottom,0);margin-top:var(--_margin-top,0)}.m-9e5a3ac7[data-side=top]{--_margin-bottom:var(--mantine-spacing-xs)}.m-9e5a3ac7[data-side=bottom]{--_margin-top:var(--mantine-spacing-xs)}.m-a100c15{overflow-x:var(--table-overflow)}.m-62259741{min-width:var(--table-min-width)}.m-89d60db1{--_tab-justify:flex-start;--_list-direction:row;--_panel-grow:unset;--_tabs-display:block;--_tabs-flex-direction:row;--_list-border-width:0;--_list-border-size:0 0 var(--_list-border-width) 0;--_list-gap:unset;--_list-line-bottom:0;--_list-line-top:unset;--_list-line-left:0;--_list-line-right:0;--_tab-radius:var(--tabs-radius) var(--tabs-radius) 0 0;--_tab-border-width:0 0 var(--_list-border-width) 0;display:var(--_tabs-display);flex-direction:var(--_tabs-flex-direction)}.m-89d60db1[data-inverted]{--_list-line-bottom:unset;--_list-line-top:0;--_tab-radius:0 0 var(--tabs-radius) var(--tabs-radius);--_tab-border-width:var(--_list-border-width) 0 0 0}.m-89d60db1[data-inverted] .m-576c9d4:before{bottom:unset;top:0}.m-89d60db1[data-orientation=vertical]{--_list-line-left:unset;--_list-line-right:0;--_list-line-top:0;--_list-line-bottom:0;--_list-border-size:0 var(--_list-border-width) 0 0;--_tab-border-width:0 var(--_list-border-width) 0 0;--_tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius);--_list-direction:column;--_panel-grow:1;--_tabs-display:flex}[dir=rtl] .m-89d60db1[data-orientation=vertical]{--_list-line-left:0;--_list-line-right:unset;--_list-border-size:0 0 0 var(--_list-border-width);--_tab-border-width:0 0 0 var(--_list-border-width);--_tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}.m-89d60db1[data-orientation=vertical][data-placement=right]{--_tabs-flex-direction:row-reverse;--_list-line-left:0;--_list-line-right:unset;--_list-border-size:0 0 0 var(--_list-border-width);--_tab-border-width:0 0 0 var(--_list-border-width);--_tab-radius:0 var(--tabs-radius) var(--tabs-radius) 0}[dir=rtl] .m-89d60db1[data-orientation=vertical][data-placement=right]{--_list-line-left:unset;--_list-line-right:0;--_list-border-size:0 var(--_list-border-width) 0 0;--_tab-border-width:0 var(--_list-border-width) 0 0;--_tab-radius:var(--tabs-radius) 0 0 var(--tabs-radius)}[data-mantine-color-scheme=light] .m-89d60db1{--_tab-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-89d60db1{--_tab-border-color:var(--mantine-color-dark-4)}.m-89d60db1[data-orientation=horizontal]{--_tab-justify:center}.m-89d60db1[data-variant=default]{--_list-border-width:calc(0.125rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-89d60db1[data-variant=default]{--_tab-hover-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-89d60db1[data-variant=default]{--_tab-hover-color:var(--mantine-color-dark-6)}.m-89d60db1[data-variant=outline]{--_list-border-width:calc(0.0625rem*var(--mantine-scale))}.m-89d60db1[data-variant=pills]{--_list-gap:calc(var(--mantine-spacing-sm)/2)}[data-mantine-color-scheme=light] .m-89d60db1[data-variant=pills]{--_tab-hover-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-89d60db1[data-variant=pills]{--_tab-hover-color:var(--mantine-color-dark-6)}.m-89d33d6d{--_tab-grow:unset;display:flex;flex-direction:var(--_list-direction);flex-wrap:wrap;gap:var(--_list-gap);justify-content:var(--tabs-justify,flex-start)}.m-89d33d6d[data-grow]{--_tab-grow:1}.m-b0c91715{flex-grow:var(--_panel-grow)}.m-4ec4dce6{align-items:center;display:flex;flex-grow:var(--_tab-grow);font-size:var(--mantine-font-size-sm);justify-content:var(--_tab-justify);line-height:1;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);position:relative;user-select:none;white-space:nowrap;z-index:0}.m-4ec4dce6:disabled,.m-4ec4dce6[data-disabled]{cursor:not-allowed;opacity:.5}.m-4ec4dce6:focus{z-index:1}.m-fc420b1f{align-items:center;display:flex;justify-content:center;margin-left:var(--_tab-section-margin-left,0);margin-right:var(--_tab-section-margin-right,0)}.m-fc420b1f[data-position=left]:not(:only-child){--_tab-section-margin-right:var(--mantine-spacing-xs)}[dir=rtl] .m-fc420b1f[data-position=left]:not(:only-child){--_tab-section-margin-right:0rem;--_tab-section-margin-left:var(--mantine-spacing-xs)}.m-fc420b1f[data-position=right]:not(:only-child){--_tab-section-margin-left:var(--mantine-spacing-xs)}[dir=rtl] .m-fc420b1f[data-position=right]:not(:only-child){--_tab-section-margin-left:0rem;--_tab-section-margin-right:var(--mantine-spacing-xs)}.m-576c9d4{position:relative}.m-576c9d4:before{border-color:var(--_tab-border-color);border-style:solid;border-width:var(--_list-border-size);bottom:var(--_list-line-bottom);content:"";left:var(--_list-line-left);position:absolute;right:var(--_list-line-right);top:var(--_list-line-top)}.m-539e827b{--__tab-border-color:transparent;--_tab-bg:transparent;background-color:var(--_tab-bg);border-color:var(--__tab-border-color);border-radius:var(--_tab-radius);border-style:solid;border-width:var(--_tab-border-width)}.m-539e827b[data-active]{--__tab-border-color:var(--tabs-color)}@media (hover:hover){.m-539e827b:hover{--_tab-bg:var(--_tab-hover-color)}.m-539e827b:hover:not([data-active]){--__tab-border-color:var(--_tab-border-color)}}@media (hover:none){.m-539e827b:active{--_tab-bg:var(--_tab-hover-color)}.m-539e827b:active:not([data-active]){--__tab-border-color:var(--_tab-border-color)}}@media (hover:hover){.m-539e827b:disabled:hover,.m-539e827b[data-disabled]:hover{--_tab-bg:transparent}}@media (hover:none){.m-539e827b:disabled:active,.m-539e827b[data-disabled]:active{--_tab-bg:transparent}}.m-6772fbd5{position:relative}.m-6772fbd5:before{border-color:var(--_tab-border-color);border-style:solid;border-width:var(--_list-border-size);bottom:var(--_list-line-bottom);content:"";left:var(--_list-line-left);position:absolute;right:var(--_list-line-right);top:var(--_list-line-top)}.m-b59ab47c{--_tab-border-bottom-color:transparent;--_tab-border-top-color:transparent;--_tab-border-right-color:transparent;--_tab-border-left-color:transparent;border-color:transparent;border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-bottom-color);border-left:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-left-color);border-radius:var(--_tab-radius);border-right:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-right-color);border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_tab-border-top-color);position:relative}.m-b59ab47c[data-active]:before{bottom:var(--_tab-before-bottom,calc(-.0625rem*var(--mantine-scale)));left:var(--_tab-before-left,calc(-.0625rem*var(--mantine-scale)));right:var(--_tab-before-right,auto);top:var(--_tab-before-top,auto)}.m-b59ab47c[data-active]:after,.m-b59ab47c[data-active]:before{background-color:var(--_tab-border-color);content:"";height:calc(.0625rem*var(--mantine-scale));position:absolute;width:calc(.0625rem*var(--mantine-scale))}.m-b59ab47c[data-active]:after{bottom:var(--_tab-after-bottom,calc(-.0625rem*var(--mantine-scale)));left:var(--_tab-after-left,auto);right:var(--_tab-after-right,calc(-.0625rem*var(--mantine-scale)));top:var(--_tab-after-top,auto)}.m-b59ab47c[data-active]{--_tab-border-top-color:var(--_tab-border-color);--_tab-border-left-color:var(--_tab-border-color);--_tab-border-right-color:var(--_tab-border-color);--_tab-border-bottom-color:var(--mantine-color-body)}.m-b59ab47c[data-active][data-inverted]{--_tab-border-bottom-color:var(--_tab-border-color);--_tab-border-top-color:var(--mantine-color-body);--_tab-before-bottom:auto;--_tab-before-top:calc(-0.0625rem*var(--mantine-scale));--_tab-after-bottom:auto;--_tab-after-top:calc(-0.0625rem*var(--mantine-scale))}.m-b59ab47c[data-active][data-orientation=vertical][data-placement=left]{--_tab-border-right-color:var(--mantine-color-body);--_tab-border-left-color:var(--_tab-border-color);--_tab-border-bottom-color:var(--_tab-border-color);--_tab-before-right:calc(-0.0625rem*var(--mantine-scale));--_tab-before-left:auto;--_tab-before-bottom:auto;--_tab-before-top:calc(-0.0625rem*var(--mantine-scale));--_tab-after-left:auto;--_tab-after-right:calc(-0.0625rem*var(--mantine-scale))}[dir=rtl] .m-b59ab47c[data-active][data-orientation=vertical][data-placement=left]{--_tab-border-right-color:var(--_tab-border-color);--_tab-border-left-color:var(--mantine-color-body);--_tab-before-right:auto;--_tab-before-left:calc(-0.0625rem*var(--mantine-scale));--_tab-after-left:calc(-0.0625rem*var(--mantine-scale));--_tab-after-right:auto}.m-b59ab47c[data-active][data-orientation=vertical][data-placement=right]{--_tab-border-left-color:var(--mantine-color-body);--_tab-border-right-color:var(--_tab-border-color);--_tab-border-bottom-color:var(--_tab-border-color);--_tab-before-left:calc(-0.0625rem*var(--mantine-scale));--_tab-before-right:auto;--_tab-before-bottom:auto;--_tab-before-top:calc(-0.0625rem*var(--mantine-scale));--_tab-after-right:auto;--_tab-after-left:calc(-0.0625rem*var(--mantine-scale))}[dir=rtl] .m-b59ab47c[data-active][data-orientation=vertical][data-placement=right]{--_tab-border-left-color:var(--_tab-border-color);--_tab-border-right-color:var(--mantine-color-body);--_tab-before-left:auto;--_tab-before-right:calc(-0.0625rem*var(--mantine-scale));--_tab-after-right:calc(-0.0625rem*var(--mantine-scale));--_tab-after-left:auto}.m-c3381914{--_tab-bg:transparent;--_tab-color:inherit;background-color:var(--_tab-bg);border-radius:var(--tabs-radius);color:var(--_tab-color)}@media (hover:hover){.m-c3381914:not([data-disabled]):hover{--_tab-bg:var(--_tab-hover-color)}}@media (hover:none){.m-c3381914:not([data-disabled]):active{--_tab-bg:var(--_tab-hover-color)}}.m-c3381914[data-active][data-active]{--_tab-bg:var(--tabs-color);--_tab-color:var(--tabs-text-color,var(--mantine-color-white))}@media (hover:hover){.m-c3381914[data-active][data-active]:hover{--_tab-bg:var(--tabs-color)}}@media (hover:none){.m-c3381914[data-active][data-active]:active{--_tab-bg:var(--tabs-color)}}.m-7341320d{--ti-size-xs:calc(1.125rem*var(--mantine-scale));--ti-size-sm:calc(1.375rem*var(--mantine-scale));--ti-size-md:calc(1.75rem*var(--mantine-scale));--ti-size-lg:calc(2.125rem*var(--mantine-scale));--ti-size-xl:calc(2.75rem*var(--mantine-scale));--ti-size:var(--ti-size-md);align-items:center;background:var(--ti-bg,var(--mantine-primary-color-filled));border:var(--ti-bd,calc(.0625rem*var(--mantine-scale)) solid transparent);border-radius:var(--ti-radius,var(--mantine-radius-default));color:var(--ti-color,var(--mantine-color-white));display:inline-flex;height:var(--ti-size);justify-content:center;line-height:1;min-height:var(--ti-size);min-width:var(--ti-size);position:relative;user-select:none;width:var(--ti-size)}.m-43657ece{--offset:calc(var(--tl-bullet-size)/2 + var(--tl-line-width)/2);--tl-bullet-size:calc(1.25rem*var(--mantine-scale));--tl-line-width:calc(0.25rem*var(--mantine-scale));--tl-radius:calc(62.5rem*var(--mantine-scale));--tl-color:var(--mantine-primary-color-filled);padding-left:var(--_tl-pl,0);padding-right:var(--_tl-pr,0)}.m-43657ece[data-align=left]{--_tl-pl:var(--offset)}[dir=rtl] .m-43657ece[data-align=left]{--_tl-pl:0;--_tl-pr:var(--offset)}.m-43657ece[data-align=right]{--_tl-pr:var(--offset)}[dir=rtl] .m-43657ece[data-align=right]{--_tl-pl:var(--offset);--_tl-pr:0}.m-2ebe8099{font-weight:500;line-height:1;margin-bottom:calc(var(--mantine-spacing-xs)/2)}.m-436178ff{--item-border:var(--tl-line-width) var(--tli-border-style,solid) var(--_item-border-color);color:var(--mantine-color-text);margin-top:var(--_item-mt);padding-left:var(--_item-pl,0);padding-right:var(--_item-pr,0);position:relative;text-align:var(--_item-ta)}.m-436178ff:before{border-left:var(--_line-border-left,var(--item-border));border-right:var(--_line-border-right,0);bottom:calc(var(--mantine-spacing-xl)*-1);content:"";display:var(--_line-display,none);left:var(--_line-left,0);pointer-events:none;position:absolute;right:var(--_line-right,0);top:0}[dir=rtl] .m-436178ff:before{--_line-border-left:0;--_line-border-right:var(--item-border)}.m-43657ece[data-align=left] .m-436178ff:before{--_line-left:calc(var(--tl-line-width)*-1);--_line-right:auto}.m-43657ece[data-align=right] .m-436178ff:before,[dir=rtl] .m-43657ece[data-align=left] .m-436178ff:before{--_line-left:auto;--_line-right:calc(var(--tl-line-width)*-1)}[dir=rtl] .m-43657ece[data-align=right] .m-436178ff:before{--_line-left:calc(var(--tl-line-width)*-1);--_line-right:auto}.m-43657ece[data-align=left] .m-436178ff{--_item-pl:var(--offset);--_item-ta:left}[dir=rtl] .m-43657ece[data-align=left] .m-436178ff{--_item-pl:0;--_item-pr:var(--offset)}.m-43657ece[data-align=right] .m-436178ff{--_item-pr:var(--offset);--_item-ta:right}[dir=rtl] .m-43657ece[data-align=right] .m-436178ff{--_item-pl:var(--offset);--_item-pr:0}[data-mantine-color-scheme=light] .m-436178ff{--_item-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-436178ff{--_item-border-color:var(--mantine-color-dark-4)}[data-mantine-color-scheme] .m-436178ff[data-line-active]:before{border-color:var(--tli-color,var(--tl-color))}.m-436178ff:not(:last-of-type){--_line-display:block}.m-436178ff:not(:first-of-type){--_item-mt:var(--mantine-spacing-xl)}.m-8affcee1{align-items:center;background-color:var(--_bullet-bg-color,var(--mantine-color-body));border:var(--_bullet-border-width,var(--tl-line-width)) solid var(--_bullet-border-color);border-radius:var(--tli-radius,var(--tl-radius));color:var(--_bullet-color,var(--mantine-color-text));display:flex;height:var(--tl-bullet-size);justify-content:center;left:var(--_bullet-left,0);position:absolute;right:var(--_bullet-right,0);top:0;width:var(--tl-bullet-size)}[data-mantine-color-scheme=light] .m-8affcee1{--_bullet-border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-8affcee1{--_bullet-border-color:var(--mantine-color-dark-4)}.m-43657ece[data-align=left] .m-8affcee1{--_bullet-left:calc(var(--tl-bullet-size)/2*-1 + var(--tl-line-width)/2*-1);--_bullet-right:auto}.m-43657ece[data-align=right] .m-8affcee1,[dir=rtl] .m-43657ece[data-align=left] .m-8affcee1{--_bullet-left:auto;--_bullet-right:calc(var(--tl-bullet-size)/2*-1 + var(--tl-line-width)/2*-1)}[dir=rtl] .m-43657ece[data-align=right] .m-8affcee1{--_bullet-left:calc(var(--tl-bullet-size)/2*-1 + var(--tl-line-width)/2*-1);--_bullet-right:auto}.m-8affcee1[data-with-child]{--_bullet-border-width:var(--tl-line-width)}[data-mantine-color-scheme=light] .m-8affcee1[data-with-child]{--_bullet-bg-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-8affcee1[data-with-child]{--_bullet-bg-color:var(--mantine-color-dark-4)}.m-8affcee1[data-active]{--_bullet-border-color:var(--tli-color,var(--tl-color));--_bullet-bg-color:var(--mantine-color-white);--_bullet-color:var(--tl-icon-color,var(--mantine-color-white))}.m-8affcee1[data-active][data-with-child]{--_bullet-bg-color:var(--tli-color,var(--tl-color));--_bullet-color:var(--tl-icon-color,var(--mantine-color-white))}.m-540e8f41{padding-left:var(--_body-pl,0);padding-right:var(--_body-pr,0);text-align:var(--_body-ta)}.m-43657ece[data-align=left] .m-540e8f41{--_body-pl:var(--offset);--_body-ta:left}[dir=rtl] .m-43657ece[data-align=left] .m-540e8f41{--_body-pl:0;--_body-pr:var(--offset);--_body-ta:right}.m-43657ece[data-align=right] .m-540e8f41{--_body-pr:var(--offset);--_body-ta:right}[dir=rtl] .m-43657ece[data-align=right] .m-540e8f41{--_body-pl:var(--offset);--_body-pr:0;--_body-ta:left}.m-8a5d1357{text-wrap:var(--title-text-wrap,var(--mantine-heading-text-wrap));font-family:var(--mantine-font-family-headings);font-size:var(--title-fz);font-weight:var(--title-fw);line-height:var(--title-lh);margin:0}.m-8a5d1357:where([data-line-clamp]){-webkit-line-clamp:var(--title-line-clamp);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.m-d6493fad :first-child{margin-top:0}.m-d6493fad :last-child{margin-bottom:0}.m-d6493fad :where(h1,h2,h3,h4,h5,h6){text-wrap:var(--mantine-heading-text-wrap);margin-bottom:var(--mantine-spacing-xs)}.m-d6493fad :where(h1){font-size:var(--mantine-h1-font-size);font-weight:var(--mantine-h1-font-weight);line-height:var(--mantine-h1-line-height);margin-top:calc(var(--mantine-spacing-xl)*1.5)}.m-d6493fad :where(h2){font-size:var(--mantine-h2-font-size);font-weight:var(--mantine-h2-font-weight);line-height:var(--mantine-h2-line-height);margin-top:var(--mantine-spacing-xl)}.m-d6493fad :where(h3){font-size:var(--mantine-h3-font-size);font-weight:var(--mantine-h3-font-weight);line-height:var(--mantine-h3-line-height);margin-top:calc(var(--mantine-spacing-xl)*.8)}.m-d6493fad :where(h4){font-size:var(--mantine-h4-font-size);font-weight:var(--mantine-h4-font-weight);line-height:var(--mantine-h4-line-height);margin-top:calc(var(--mantine-spacing-xl)*.8)}.m-d6493fad :where(h5){font-size:var(--mantine-h5-font-size);font-weight:var(--mantine-h5-font-weight);line-height:var(--mantine-h5-line-height);margin-top:calc(var(--mantine-spacing-xl)*.5)}.m-d6493fad :where(h6){font-size:var(--mantine-h6-font-size);font-weight:var(--mantine-h6-font-weight);line-height:var(--mantine-h6-line-height);margin-top:calc(var(--mantine-spacing-xl)*.5)}.m-d6493fad :where(img){margin-bottom:var(--mantine-spacing-xs);max-width:100%}.m-d6493fad :where(p){margin-bottom:var(--mantine-spacing-lg);margin-top:0}[data-mantine-color-scheme=light] .m-d6493fad :where(mark){background-color:var(--mantine-color-yellow-2);color:inherit}[data-mantine-color-scheme=dark] .m-d6493fad :where(mark){background-color:var(--mantine-color-yellow-5);color:var(--mantine-color-black)}.m-d6493fad :where(a){color:var(--mantine-color-anchor);text-decoration:none}@media (hover:hover){.m-d6493fad :where(a):hover{text-decoration:underline}}@media (hover:none){.m-d6493fad :where(a):active{text-decoration:underline}}.m-d6493fad :where(hr){border:0;border-top:calc(.0625rem*var(--mantine-scale)) solid;margin-bottom:var(--mantine-spacing-md);margin-top:var(--mantine-spacing-md)}[data-mantine-color-scheme=light] .m-d6493fad :where(hr){border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-d6493fad :where(hr){border-color:var(--mantine-color-dark-3)}.m-d6493fad :where(pre){border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);line-height:var(--mantine-line-height);margin:0;margin-bottom:var(--mantine-spacing-md);margin-top:var(--mantine-spacing-md);overflow-x:auto;padding:var(--mantine-spacing-xs)}[data-mantine-color-scheme=light] .m-d6493fad :where(pre){background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d6493fad :where(pre){background-color:var(--mantine-color-dark-8)}.m-d6493fad :where(pre) :where(code){background-color:transparent;border:0;border-radius:0;color:inherit;padding:0}.m-d6493fad :where(kbd){--kbd-fz:calc(0.75rem*var(--mantine-scale));--kbd-padding:calc(0.1875rem*var(--mantine-scale)) calc(0.3125rem*var(--mantine-scale));border:calc(.0625rem*var(--mantine-scale)) solid;border-bottom-width:calc(.1875rem*var(--mantine-scale));border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--kbd-fz);font-weight:700;line-height:var(--mantine-line-height);padding:var(--kbd-padding)}:where([data-mantine-color-scheme=light]) .m-d6493fad :where(kbd){background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3);color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-d6493fad :where(kbd){background-color:var(--mantine-color-dark-5);border-color:var(--mantine-color-dark-3);color:var(--mantine-color-dark-0)}.m-d6493fad :where(code){border-radius:var(--mantine-radius-sm);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);line-height:var(--mantine-line-height);padding:calc(.0625rem*var(--mantine-scale)) calc(.3125rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-d6493fad :where(code){background-color:var(--mantine-color-gray-0);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-d6493fad :where(code){background-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)}.m-d6493fad :where(ul,ol){margin-bottom:var(--mantine-spacing-md);padding-left:calc(2.375rem*var(--mantine-scale))}.m-d6493fad :where(ul,ol) :where(li){margin-bottom:var(--mantine-spacing-xs)}.m-d6493fad :where(table){border-collapse:collapse;caption-side:bottom;margin-bottom:var(--mantine-spacing-md);width:100%}.m-d6493fad :where(table) :where(caption){color:var(--mantine-color-gray-6);font-size:var(--mantine-font-size-sm);margin-top:var(--mantine-spacing-xs)}.m-d6493fad :where(table) :where(th){color:var(--mantine-color-gray-7);font-size:var(--mantine-font-size-sm);font-weight:700;padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm);text-align:left}.m-d6493fad :where(table) :where(thead th){border-bottom:calc(.0625rem*var(--mantine-scale)) solid;border-color:var(--mantine-color-gray-3)}.m-d6493fad :where(table) :where(tfoot th){border-top:calc(.0625rem*var(--mantine-scale)) solid;border-color:var(--mantine-color-gray-3)}.m-d6493fad :where(table) :where(td){border-bottom:calc(.0625rem*var(--mantine-scale)) solid;border-color:var(--mantine-color-gray-3);font-size:var(--mantine-font-size-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm)}.m-d6493fad :where(table) :where(tr:last-of-type td){border-bottom:0}.m-d6493fad :where(blockquote){border-radius:var(--mantine-radius-sm);font-size:var(--mantine-font-size-lg);line-height:var(--mantine-line-height);margin:var(--mantine-spacing-md) 0;padding:var(--mantine-spacing-md) var(--mantine-spacing-lg)}:where([data-mantine-color-scheme=light]) .m-d6493fad :where(blockquote){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-d6493fad :where(blockquote){background-color:var(--mantine-color-dark-8)}.m-468e7eda{appearance:none;padding-bottom:0;padding-top:0}.m-468e7eda::-webkit-calendar-picker-indicator,.m-468e7eda::-webkit-clear-button{display:none}.m-468e7eda::-webkit-datetime-edit-hour-field,.m-468e7eda::-webkit-datetime-edit-minute-field,.m-468e7eda::-webkit-datetime-edit-second-field{display:inline;max-height:calc(1.875rem*var(--mantine-scale));padding-top:0}.m-468e7eda::-webkit-datetime-edit-hour-field:focus,.m-468e7eda::-webkit-datetime-edit-minute-field:focus,.m-468e7eda::-webkit-datetime-edit-second-field:focus{background-color:var(--mantine-primary-color-filled);color:var(--mantine-color-white)}.m-396ce5cb{--day-size-xs:calc(1.875rem*var(--mantine-scale));--day-size-sm:calc(2.25rem*var(--mantine-scale));--day-size-md:calc(2.625rem*var(--mantine-scale));--day-size-lg:calc(3rem*var(--mantine-scale));--day-size-xl:calc(3.375rem*var(--mantine-scale));--day-size:var(--day-size-sm);align-items:center;background-color:var(--_day-bg,transparent);border-radius:var(--_day-radius,var(--mantine-radius-default));color:var(--_day-color,var(--mantine-color-text));cursor:var(--_day-cursor,pointer);display:var(--_day-display,inline-flex);font-size:calc(var(--day-size)/2.8);height:var(--day-size,calc(2.25rem*var(--mantine-scale)));justify-content:center;opacity:var(--_day-opacity,1);user-select:var(--_day-user-select,none);width:var(--day-size,calc(2.25rem*var(--mantine-scale)))}@media (hover:hover){[data-mantine-color-scheme=light] .m-396ce5cb:hover:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-396ce5cb:hover:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-396ce5cb:active:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-396ce5cb:active:not([data-static],[data-disabled]){--_day-bg:var(--mantine-color-dark-5)}}.m-396ce5cb[data-static]{--_day-user-select:auto;--_day-cursor:default}.m-396ce5cb[data-weekend]{--_day-color:var(--mantine-color-red-6)}.m-396ce5cb[data-outside]{--_day-color:var(--mantine-color-dimmed);--_day-opacity:0.5}.m-396ce5cb:disabled,.m-396ce5cb[data-disabled]{--_day-color:var(--mantine-color-dimmed);--_day-cursor:not-allowed;--_day-opacity:0.5}.m-396ce5cb[data-hidden]{--_day-display:none}.m-396ce5cb[data-in-range]{--_day-bg:var(--mantine-primary-color-light-hover);--_day-radius:0}@media (hover:hover){[data-mantine-color-scheme] .m-396ce5cb[data-in-range]:hover:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-light)}}@media (hover:none){[data-mantine-color-scheme] .m-396ce5cb[data-in-range]:active:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-light)}}.m-396ce5cb[data-first-in-range]{--_day-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-396ce5cb[data-last-in-range],[dir=rtl] .m-396ce5cb[data-first-in-range]{--_day-radius:0 var(--mantine-radius-default) var(--mantine-radius-default) 0}[dir=rtl] .m-396ce5cb[data-last-in-range]{--_day-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-396ce5cb[data-last-in-range][data-first-in-range]{--_day-radius:var(--mantine-radius-default)}.m-396ce5cb[data-selected]{--_day-bg:var(--mantine-primary-color-filled);--_day-color:var(--mantine-primary-color-contrast)}@media (hover:hover){[data-mantine-color-scheme] .m-396ce5cb[data-selected]:hover:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-filled-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-396ce5cb[data-selected]:active:not([data-disabled],[data-static]){--_day-bg:var(--mantine-primary-color-filled-hover)}}.m-18a3eca{color:var(--mantine-color-dimmed);font-size:var(--wr-fz,var(--mantine-font-size-sm));font-weight:400;padding-bottom:calc(var(--wr-spacing, var(--mantine-spacing-sm))/2);text-transform:capitalize}.m-cc9820d3{border-collapse:collapse;table-layout:fixed}.m-8f457cd5{padding:var(--_month-cell-padding,0)}.m-8f457cd5[data-with-spacing]{--_month-cell-padding:calc(0.03125rem*var(--mantine-scale))}.m-dc6a3c71{--dpc-size-xs:calc(1.875rem*var(--mantine-scale));--dpc-size-sm:calc(2.25rem*var(--mantine-scale));--dpc-size-md:calc(2.625rem*var(--mantine-scale));--dpc-size-lg:calc(3rem*var(--mantine-scale));--dpc-size-xl:calc(3.375rem*var(--mantine-scale));--dpc-size:var(--dpc-size-sm);align-items:center;background-color:var(--_control-bg,transparent);border-radius:var(--_control-radius,var(--mantine-radius-default));color:var(--_control-color,var(--mantine-color-text));cursor:var(--_control-cursor,pointer);display:flex;font-size:var(--dpc-fz,var(--mantine-font-size-sm));height:var(--dpc-size);justify-content:center;opacity:var(--_control-opacity,1);user-select:none;width:calc((var(--dpc-size)*7)/3 + .09375rem*var(--mantine-scale))}@media (hover:hover){[data-mantine-color-scheme=light] .m-dc6a3c71:hover:not([data-disabled]){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-dc6a3c71:hover:not([data-disabled]){--_control-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-dc6a3c71:active:not([data-disabled]){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-dc6a3c71:active:not([data-disabled]){--_control-bg:var(--mantine-color-dark-5)}}.m-dc6a3c71:disabled,.m-dc6a3c71[data-disabled]{--_control-color:var(--mantine-color-dimmed);--_control-cursor:not-allowed;--_control-opacity:0.5}.m-dc6a3c71[data-selected]{--_control-bg:var(--mantine-primary-color-filled);--_control-color:var(--mantine-primary-color-contrast,var(--mantine-color-white))}@media (hover:hover){[data-mantine-color-scheme] .m-dc6a3c71[data-selected]:hover{--_control-bg:var(--mantine-primary-color-filled-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-dc6a3c71[data-selected]:active{--_control-bg:var(--mantine-primary-color-filled-hover)}}.m-dc6a3c71[data-in-range]{--_control-bg:var(--mantine-primary-color-light-hover);--_control-radius:0}@media (hover:hover){[data-mantine-color-scheme] .m-dc6a3c71[data-in-range]:hover{--_control-bg:var(--mantine-primary-color-light)}}@media (hover:none){[data-mantine-color-scheme] .m-dc6a3c71[data-in-range]:active{--_control-bg:var(--mantine-primary-color-light)}}.m-dc6a3c71[data-first-in-range]{--_control-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-dc6a3c71[data-last-in-range],[dir=rtl] .m-dc6a3c71[data-first-in-range]{--_control-radius:0 var(--mantine-radius-default) var(--mantine-radius-default) 0}[dir=rtl] .m-dc6a3c71[data-last-in-range]{--_control-radius:var(--mantine-radius-default) 0 0 var(--mantine-radius-default)}.m-dc6a3c71[data-first-in-range][data-last-in-range]{--_control-radius:var(--mantine-radius-default)}.m-9206547b{border-collapse:collapse;border-width:0}.m-c5a19c7d{padding:var(--_cell-padding,0)}.m-c5a19c7d[data-with-spacing]{--_cell-padding:calc(0.03125rem*var(--mantine-scale))}.m-2a6c32d{border-collapse:collapse;border-width:0;cursor:pointer}.m-fe27622f{padding:var(--_cell-padding,0)}.m-fe27622f[data-with-spacing]{--_cell-padding:calc(0.03125rem*var(--mantine-scale))}.m-730a79ed{--dch-control-size-xs:calc(1.875rem*var(--mantine-scale));--dch-control-size-sm:calc(2.25rem*var(--mantine-scale));--dch-control-size-md:calc(2.625rem*var(--mantine-scale));--dch-control-size-lg:calc(3rem*var(--mantine-scale));--dch-control-size-xl:calc(3.375rem*var(--mantine-scale));--dch-control-size:var(--dch-control-size-sm);display:flex;margin-bottom:var(--mantine-spacing-xs);max-width:calc(var(--dch-control-size)*7 + .4375rem*var(--mantine-scale))}.m-2351eeb0,.m-f6645d97{align-items:center;background-color:var(--_control-bg);border-radius:var(--mantine-radius-default);cursor:var(--_control-cursor,pointer);display:flex;height:var(--dch-control-size);justify-content:center;opacity:var(--_control-opacity,1);user-select:none}@media (hover:hover){[data-mantine-color-scheme=light] .m-2351eeb0:hover:not([data-disabled],:disabled),[data-mantine-color-scheme=light] .m-f6645d97:hover:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-2351eeb0:hover:not([data-disabled],:disabled),[data-mantine-color-scheme=dark] .m-f6645d97:hover:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-2351eeb0:active:not([data-disabled],:disabled),[data-mantine-color-scheme=light] .m-f6645d97:active:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-2351eeb0:active:not([data-disabled],:disabled),[data-mantine-color-scheme=dark] .m-f6645d97:active:not([data-disabled],:disabled){--_control-bg:var(--mantine-color-dark-5)}}.m-2351eeb0:disabled,.m-2351eeb0[data-disabled],.m-f6645d97:disabled,.m-f6645d97[data-disabled]{--_control-opacity:0.2;--_control-cursor:not-allowed}.m-2351eeb0{width:var(--dch-control-size)}.m-f6645d97{flex:1;font-size:var(--dch-fz,var(--mantine-font-size-sm));font-weight:500;text-transform:capitalize}.m-367dc749{height:60%;transform:var(--_chevron-transform);width:60%}.m-367dc749[data-direction=next]{--_chevron-transform:rotate(270deg)}.m-367dc749[data-direction=previous],[dir=rtl] .m-367dc749[data-direction=next]{--_chevron-transform:rotate(90deg)}[dir=rtl] .m-367dc749[data-direction=previous]{--_chevron-transform:rotate(270deg)}.m-30b26e33{display:flex;gap:var(--mantine-spacing-md)}.m-6fa5e2aa{cursor:var(--_cursor,pointer);line-height:unset}.m-6fa5e2aa[data-read-only]{--_cursor:default}.m-208d2562{align-items:stretch;display:flex;margin-top:var(--mantine-spacing-md)}.m-62ee059{flex:1;margin-left:var(--_ml,0);margin-right:var(--_mr,var(--mantine-spacing-md))}[dir=rtl] .m-62ee059{--_mr:0;--_ml:var(--mantine-spacing-md)}.m-b37d9ac7{bottom:var(--notifications-bottom);left:var(--notifications-left);max-width:var(--notifications-container-width);position:fixed;right:var(--notifications-right);top:var(--notifications-top);transform:var(--notifications-transform);width:calc(100% - var(--mantine-spacing-md)*2);z-index:var(--notifications-z-index)}.m-5ed0edd0+.m-5ed0edd0{margin-top:var(--mantine-spacing-md)}.m-5caae6d3{border-radius:var(--mantine-radius-xs);display:inline-block;font-family:var(--mantine-font-family-monospace);font-size:calc(.8125rem*var(--mantine-scale));line-height:var(--_code-line-height,var(--mantine-line-height));padding:calc(.0625rem*var(--mantine-scale)) calc(.1875rem*var(--mantine-scale))}.m-2c47c4fd{--_code-line-height:1.7;display:block;margin:0;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-e58679f3{align-items:flex-start;display:flex;justify-content:space-between}.m-be7e9c9c{display:flex;margin-right:calc(.4375rem*var(--mantine-scale));margin-top:calc(.4375rem*var(--mantine-scale))}.m-5caae85b,.m-d498bab7{background-color:transparent;color:var(--mantine-color-dimmed);margin:0;opacity:.8}@media (hover:hover){.m-5caae85b:hover,.m-d498bab7:hover{opacity:1}}@media (hover:none){.m-5caae85b:active,.m-d498bab7:active{opacity:1}}@media (max-width:40em){.m-5caae85b,.m-d498bab7{display:none}}.m-5caae85b{position:absolute;right:calc(.3125rem*var(--mantine-scale));top:calc(.3125rem*var(--mantine-scale));z-index:1}.m-5cac2e62{align-items:center;background-color:var(--_file-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_file-bd);border-left:0;border-top:0;color:var(--_file-color);cursor:var(--_file-cursor);display:flex;font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);font-weight:700;gap:calc(.4375rem*var(--mantine-scale));justify-content:center;line-height:1;margin:0;opacity:var(--_file-opacity);padding:calc(.4375rem*var(--mantine-scale)) calc(.75rem*var(--mantine-scale));user-select:none;white-space:nowrap}@media (hover:hover){.m-5cac2e62:hover{--_file-opacity:1}}@media (hover:none){.m-5cac2e62:active{--_file-opacity:1}}.m-5cac2e62:last-of-type{border-bottom-right-radius:var(--mantine-radius-sm)}.m-5cac2e62:only-child{--_file-cursor:default}.m-5cac2e62[data-active]{--_file-opacity:1;--_file-color:var(--_file-active-color)!important;--_file-bg:var(--_file-active-bg)}.m-5cac2e62{--_file-opacity:0.8;--_file-cursor:pointer}[data-mantine-color-scheme=light] .m-5cac2e62{--_file-color:var(--mantine-color-gray-8);--_file-bd:var(--mantine-color-gray-2);--_file-active-bg:var(--mantine-color-white);--_file-active-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-5cac2e62{--_file-color:var(--mantine-color-dark-0);--_file-bd:var(--mantine-color-dark-4);--_file-active-bg:var(--mantine-color-dark-6);--_file-active-color:var(--mantine-color-white)}.m-38d99e51{display:flex}.m-9f507240{max-height:var(--ch-max-collapsed-height);overflow:hidden;position:relative}.m-9f507240:before{background-image:linear-gradient(0deg,var(--_background) 16%,transparent 100%);border-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));content:"";inset:0;pointer-events:none;position:absolute;z-index:100}.m-9f507240[data-expanded]{max-height:none}.m-9f507240[data-expanded]:before{display:none}.m-c9378bc2{bottom:0;color:var(--mantine-color-anchor);font-size:var(--mantine-font-size-sm);left:50%;padding-bottom:var(--mantine-spacing-xs);padding-top:var(--mantine-spacing-xs);position:absolute;text-align:center;transform:translateX(-50%);width:100%;z-index:101}.m-c9378bc2[data-hidden]{display:none}.m-5cb1b9c8{margin-top:0;position:relative}.m-5cb1b9c8[data-collapsed] .mantine-ScrollArea-viewport>div{display:block!important}.m-b46cddfb{align-items:center;display:flex;flex:0;justify-content:center}.m-b46cddfb>svg{display:block}.m-1f5e827e{background:var(--_background);color:var(--_color)}[data-mantine-color-scheme=light] .m-1f5e827e{--_color:var(--mantine-color-gray-7);--_background:var(--mantine-color-gray-0);--code-comment-color:var(--mantine-color-gray-6);--code-keyword-color:var(--mantine-color-violet-8);--code-tag-color:var(--mantine-color-red-9);--code-literal-color:var(--mantine-color-blue-6);--code-string-color:var(--mantine-color-blue-9);--code-variable-color:var(--mantine-color-lime-9);--code-class-color:var(--mantine-color-orange-9)}[data-mantine-color-scheme=dark] .m-1f5e827e{--_color:var(--mantine-color-dark-1);--_background:var(--mantine-color-dark-8);--code-comment-color:var(--mantine-color-dark-3);--code-keyword-color:var(--mantine-color-violet-3);--code-tag-color:var(--mantine-color-yellow-4);--code-literal-color:var(--mantine-color-blue-4);--code-string-color:var(--mantine-color-green-6);--code-variable-color:var(--mantine-color-blue-2);--code-class-color:var(--mantine-color-orange-5)}.m-1f5e827e .hljs-comment,.m-1f5e827e .hljs-quote{color:var(--code-comment-color);font-style:italic}.m-1f5e827e .hljs-doctag,.m-1f5e827e .hljs-formula,.m-1f5e827e .hljs-keyword{color:var(--code-keyword-color)}.m-1f5e827e .hljs-deletion,.m-1f5e827e .hljs-name,.m-1f5e827e .hljs-section,.m-1f5e827e .hljs-selector-tag,.m-1f5e827e .hljs-subst{color:var(--code-tag-color)}.m-1f5e827e .hljs-literal{color:var(--code-literal-color)}.m-1f5e827e .hljs-addition,.m-1f5e827e .hljs-attribute,.m-1f5e827e .hljs-meta .hljs-string,.m-1f5e827e .hljs-regexp,.m-1f5e827e .hljs-string{color:var(--code-string-color)}.m-1f5e827e .hljs-attr,.m-1f5e827e .hljs-number,.m-1f5e827e .hljs-selector-attr,.m-1f5e827e .hljs-selector-class,.m-1f5e827e .hljs-selector-pseudo,.m-1f5e827e .hljs-template-variable,.m-1f5e827e .hljs-type,.m-1f5e827e .hljs-variable{color:var(--code-variable-color)}.m-1f5e827e .hljs-built_in,.m-1f5e827e .hljs-bullet,.m-1f5e827e .hljs-class .hljs-title,.m-1f5e827e .hljs-link,.m-1f5e827e .hljs-meta,.m-1f5e827e .hljs-selector-id,.m-1f5e827e .hljs-symbol,.m-1f5e827e .hljs-title,.m-1f5e827e .hljs-title.class_{color:var(--code-class-color)}.m-1f5e827e .hljs-emphasis{font-style:italic}.m-1f5e827e .hljs-strong{font-weight:700}.m-1f5e827e .hljs-link{text-decoration:underline}.m-d46a4834{background-color:var(--_dropzone-bg);border:calc(.0625rem*var(--mantine-scale)) dashed var(--_dropzone-border-color);border-radius:var(--dropzone-radius);color:var(--_dropzone-color,var(--mantine-color-text));cursor:var(--_dropzone-cursor,pointer);padding:var(--mantine-spacing-md);position:relative;transition:background-color .1s ease,border-color .1s ease;user-select:none}.m-d46a4834:not([data-activate-on-click]),.m-d46a4834[data-loading]{--_dropzone-cursor:default}[data-mantine-color-scheme=light] .m-d46a4834{--_dropzone-bg:var(--mantine-color-white);--_dropzone-border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-d46a4834{--_dropzone-bg:var(--mantine-color-dark-6);--_dropzone-border-color:var(--mantine-color-dark-4)}@media (hover:hover){[data-mantine-color-scheme=light] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}.m-d46a4834[data-accept]{--_dropzone-bg:var(--dropzone-accept-bg);--_dropzone-border-color:var(--dropzone-accept-bg);--_dropzone-color:var(--dropzone-accept-color)}.m-d46a4834[data-reject]{--_dropzone-bg:var(--dropzone-reject-bg);--_dropzone-border-color:var(--dropzone-reject-bg);--_dropzone-color:var(--dropzone-reject-color)}.m-b85f7144{pointer-events:var(--_dropzone-inner-pointer-events,none);user-select:none}.m-b85f7144[data-enable-pointer-events]{--_dropzone-inner-pointer-events:all}.m-96f6e9ad{background-color:var(--mantine-color-body);display:flex;flex-direction:column;inset:0;padding:var(--mantine-spacing-xs);position:fixed;transition:opacity .1s ease}.m-96f6e9ad .m-7946116d{flex:1}.m-8f2832ae{background-color:transparent;left:0;opacity:var(--_nprogress-opacity,0);overflow:visible;position:fixed;right:0;top:0;transition:opacity .15s ease;transition-delay:50ms;z-index:var(--nprogress-z-index)}.m-8f2832ae[data-mounted]{--_nprogress-opacity:1}.m-7a0fe999{overflow:visible;position:relative;transition:width .15s ease}.m-7a0fe999:before{box-shadow:0 0 10px var(--progress-section-color),0 0 5px var(--progress-section-color);content:"";height:var(--progress-size);position:absolute;right:1px;top:0;transform:rotate(4deg) translateY(-4px);width:calc(6.25rem*var(--mantine-scale))}.m-d2b315db[data-scrollable]{--_spotlight-content-height:100%}.m-3cd250e0{max-height:var(--spotlight-max-height);overflow:hidden}.m-3cd250e0,.m-d2abce9b{height:var(--_spotlight-content-height,auto)}.m-d2abce9b{display:flex;flex-direction:column}.m-f366a061{background-color:transparent;border:0}.m-6e463822{--spotlight-actions-list-padding:calc(0.25rem*var(--mantine-scale));border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_actions-list-border);flex:1;margin-left:var(--_actions-list-ml,0);margin-right:var(--_actions-list-mr,calc(var(--spotlight-actions-list-padding)*-1));max-height:calc(100% - 3.125rem*var(--mantine-scale));padding:var(--spotlight-actions-list-padding)}[dir=rtl] .m-6e463822{--_actions-list-mr:0;--_actions-list-ml:calc(var(--spotlight-actions-list-padding)*-1)}[data-mantine-color-scheme=light] .m-6e463822{--_actions-list-border:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-6e463822{--_actions-list-border:var(--mantine-color-dark-4)}.m-d49bb8ef{align-items:center;background-color:var(--_action-bg,transparent);border-radius:var(--mantine-radius-default);color:var(--_action-color,inherit);display:flex;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-md);text-align:var(--_action-text-align,left);width:100%}[dir=rtl] .m-d49bb8ef{--_action-text-align:right}@media (hover:hover){[data-mantine-color-scheme=light] .m-d49bb8ef:not([data-selected]):hover{--_action-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d49bb8ef:not([data-selected]):hover{--_action-bg:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d49bb8ef:not([data-selected]):active{--_action-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d49bb8ef:not([data-selected]):active{--_action-bg:var(--mantine-color-dark-6)}}.m-d49bb8ef[data-selected]{--_action-bg:var(--mantine-primary-color-filled);--_action-color:var(--mantine-primary-color-contrast,var(--mantine-color-white));--_action-description-color:var(--mantine-primary-color-contrast,var(--mantine-color-white));--_action-description-opacity:0.7}.m-3d475731{flex:1}.m-832642f6{color:var(--_action-section-color,inherit);margin-left:var(--_action-section-ml);margin-right:var(--_action-section-mr);opacity:var(--_action-section-opacity,1)}.m-832642f6[data-dimmed]{--_action-section-opacity:var(--_action-description-opacity,1);--_action-section-color:var(--_action-description-color,var(--mantine-color-dimmed))}.m-832642f6[data-position=left]{--_action-section-mr:var(--mantine-spacing-md)}.m-832642f6[data-position=right]{--_action-section-ml:var(--mantine-spacing-md)}[dir=rtl] .m-832642f6[data-position=left]{--_action-section-mr:unset;--_action-section-ml:var(--mantine-spacing-md)}[dir=rtl] .m-832642f6[data-position=right]{--_action-section-ml:unset;--_action-section-mr:var(--mantine-spacing-md)}.m-6c2a1345,.m-832642f6>svg,.m-a6d9d78d{display:block}.m-a6d9d78d{color:var(--_action-description-color,var(--mantine-color-dimmed));font-size:var(--mantine-font-size-xs);opacity:var(--_action-description-opacity,1)}.m-82f78f74{color:var(--mantine-color-dimmed);padding:var(--mantine-spacing-md);text-align:center}.m-ddcaf054{border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_footer-border);padding:var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + .25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-ddcaf054{--_footer-border:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-ddcaf054{--_footer-border:var(--mantine-color-dark-4)}.m-5a3e5f7b{display:var(--_display,flex);flex-direction:column;margin-top:var(--mantine-spacing-md)}.m-5a3e5f7b:before{color:var(--mantine-color-dimmed);content:var(--spotlight-label);font-size:var(--mantine-font-size-xs);font-weight:700;padding-left:var(--_actions-group-pl,var(--mantine-spacing-md));padding-right:var(--_actions-group-pr,0);text-transform:uppercase}[dir=rtl] .m-5a3e5f7b{--_actions-group-pl:0;--_actions-group-pr:var(--mantine-spacing-md)}.m-5a3e5f7b:empty{--_display:none}.m-17884d0f{position:relative}.m-a2dae653{overflow:hidden}.m-a2dae653,.m-fcd81474{height:var(--carousel-height,auto)}.m-fcd81474{display:flex;flex-direction:var(--_container-direction,row);margin-bottom:var(--_container-mb);margin-left:var(--_container-ml);margin-right:var(--_container-mr)}[data-include-gap-in-size] .m-fcd81474[data-orientation=vertical]{--_container-mb:calc(var(--carousel-slide-gap)*-1)}[data-include-gap-in-size] .m-fcd81474[data-orientation=horizontal]{--_container-mr:calc(var(--carousel-slide-gap)*-1)}[dir=rtl] [data-include-gap-in-size] .m-fcd81474[data-orientation=horizontal]{--_container-ml:calc(var(--carousel-slide-gap)*-1);--_container-mr:0}.m-fcd81474[data-orientation=vertical]{--_container-direction:column}.m-39bc3463{align-items:center;bottom:var(--_controls-bottom);display:flex;flex-direction:var(--_controls-direction);justify-content:space-between;left:var(--_controls-left);padding:var(--_controls-padding);pointer-events:none;position:absolute;right:var(--_controls-right);top:var(--_controls-top);z-index:1}.m-17884d0f[data-orientation=vertical] .m-39bc3463{--_controls-left:calc(50% - var(--carousel-control-size)/2);--_controls-top:0;--_controls-bottom:0;--_controls-direction:column;--_controls-padding:var(--carousel-controls-offset) 0}.m-17884d0f[data-orientation=horizontal] .m-39bc3463{--_controls-left:0;--_controls-right:0;--_controls-top:calc(50% - var(--carousel-control-size)/2);--_controls-direction:row;--_controls-padding:0 var(--carousel-controls-offset)}.m-64f58e10{align-items:center;background-color:var(--mantine-color-white);border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3);border-radius:var(--carousel-control-size);box-shadow:var(--mantine-shadow-md);color:var(--mantine-color-black);display:flex;justify-content:center;min-height:var(--carousel-control-size);min-width:var(--carousel-control-size);opacity:var(--_control-opacity);pointer-events:all;transition:opacity .1s ease}[data-mantine-color-scheme=light] .m-64f58e10{--_control-opacity:0.85}[data-mantine-color-scheme=dark] .m-64f58e10{--_control-opacity:0.65}@media (hover:hover){.m-64f58e10:hover{--_control-opacity:1}}@media (hover:none){.m-64f58e10:active{--_control-opacity:1}}.m-71ea3ab1{bottom:var(--_indicators-bottom);display:flex;flex-direction:var(--_indicators-direction);gap:calc(.5rem*var(--mantine-scale));justify-content:center;left:var(--_indicators-left);pointer-events:none;position:absolute;right:var(--_indicators-right);top:var(--_indicators-top)}.m-17884d0f[data-orientation=vertical] .m-71ea3ab1{--_indicators-bottom:0;--_indicators-top:0;--_indicators-right:var(--mantine-spacing-md);--_indicators-direction:column}.m-17884d0f[data-orientation=horizontal] .m-71ea3ab1{--_indicators-bottom:var(--mantine-spacing-md);--_indicators-left:0;--_indicators-right:0;--_indicators-direction:row}.m-eae68602{background-color:var(--mantine-color-white);border-radius:var(--mantine-radius-xl);box-shadow:var(--mantine-shadow-sm);height:var(--_indicator-height);opacity:var(--_indicator-opacity,.6);pointer-events:all;width:var(--_indicator-width)}@media (hover:hover){.m-eae68602:hover{--_indicator-opacity:1}}@media (hover:none){.m-eae68602:active{--_indicator-opacity:1}}.m-eae68602[data-active]{--_indicator-opacity:1}.m-17884d0f[data-orientation=vertical] .m-eae68602{--_indicator-width:calc(0.3125rem*var(--mantine-scale));--_indicator-height:calc(1.5625rem*var(--mantine-scale))}.m-17884d0f[data-orientation=horizontal] .m-eae68602{--_indicator-width:calc(1.5625rem*var(--mantine-scale));--_indicator-height:calc(0.3125rem*var(--mantine-scale))}.m-d98df724{flex:0 0 var(--carousel-slide-size);margin-bottom:var(--_slide-mb,0);margin-left:var(--_slide-ml,0);margin-right:var(--_slide-mr,0);padding-bottom:var(--_slide-pb,0);padding-left:var(--_slide-pl,0);padding-right:var(--_slide-pr,0);position:relative}.m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation=vertical]{--_slide-pb:var(--carousel-slide-gap)}.m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation=horizontal]{--_slide-pr:var(--carousel-slide-gap)}[dir=rtl] .m-17884d0f[data-include-gap-in-size] .m-d98df724[data-orientation=horizontal]{--_slide-pl:var(--carousel-slide-gap);--_slide-pr:0}.m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation=vertical]{--_slide-mb:var(--carousel-slide-gap)}.m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation=horizontal]{--_slide-mr:var(--carousel-slide-gap)}[dir=rtl] .m-17884d0f:not([data-include-gap-in-size]) .m-d98df724[data-orientation=horizontal]{--_slide-ml:var(--carousel-slide-gap);--_slide-mr:0}.m-dd3f7539{border:calc(.0625rem*var(--mantine-scale)) solid var(--_root-bd);border-radius:var(--mantine-radius-default);position:relative}[data-mantine-color-scheme=light] .m-dd3f7539{--_root-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-dd3f7539{--_root-bd:var(--mantine-color-dark-4)}.m-d37966d9{margin:0;padding:0}.m-d37966d9 li>p{margin:0}.m-d37966d9 ol li,.m-d37966d9 ul li{margin-top:calc(.125rem*var(--mantine-scale))}.m-d37966d9 p{margin-bottom:calc(.4375rem*var(--mantine-scale))}.m-d37966d9 h1,.m-d37966d9 h2,.m-d37966d9 h3,.m-d37966d9 h4,.m-d37966d9 h5,.m-d37966d9 h6,.m-d37966d9 p{margin-top:0}.m-c2204cc2{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default)}.m-c2204cc2 .ProseMirror{outline:0;padding:var(--mantine-spacing-md)}.m-c2204cc2 .ProseMirror>:last-child{margin-bottom:0}.m-c2204cc2 .ProseMirror p.is-editor-empty:first-of-type:before{color:var(--mantine-color-placeholder);content:attr(data-placeholder);float:left;height:0;pointer-events:none;user-select:none}.m-c2204cc2 pre{background-color:var(--_code-bg);border-radius:var(--mantine-radius-default);color:var(--_code-color);font-family:var(--mantine-font-family-monospace);padding:var(--mantine-spacing-md) var(--mantine-spacing-xl)}.m-c2204cc2 pre code{background:none!important;color:inherit;font-size:var(--mantine-font-size-sm);padding:0}.m-c2204cc2 pre .hljs-comment,.m-c2204cc2 pre .hljs-quote{color:var(--_code-color-comment)}.m-c2204cc2 pre .hljs-attribute,.m-c2204cc2 pre .hljs-link,.m-c2204cc2 pre .hljs-name,.m-c2204cc2 pre .hljs-regexp,.m-c2204cc2 pre .hljs-selector-class,.m-c2204cc2 pre .hljs-selector-id,.m-c2204cc2 pre .hljs-tag,.m-c2204cc2 pre .hljs-template-variable,.m-c2204cc2 pre .hljs-variable{color:var(--_code-color-var)}.m-c2204cc2 pre .hljs-built_in,.m-c2204cc2 pre .hljs-builtin-name,.m-c2204cc2 pre .hljs-literal,.m-c2204cc2 pre .hljs-meta,.m-c2204cc2 pre .hljs-number,.m-c2204cc2 pre .hljs-params,.m-c2204cc2 pre .hljs-type{color:var(--_code-color-number)}.m-c2204cc2 pre .hljs-bullet,.m-c2204cc2 pre .hljs-string,.m-c2204cc2 pre .hljs-symbol{color:var(--_code-color-var)}.m-c2204cc2 pre .hljs-section,.m-c2204cc2 pre .hljs-title{color:var(--_code-color-title)}.m-c2204cc2 pre .hljs-keyword,.m-c2204cc2 pre .hljs-selector-tag{color:var(--_code-color-keyword)}.m-c2204cc2 pre .hljs-emphasis{font-style:italic}.m-c2204cc2 pre .hljs-strong{font-weight:700}[data-mantine-color-scheme=light] .m-c2204cc2{--_code-bg:var(--mantine-color-gray-0);--_code-color:var(--mantine-color-gray-9);--_code-color-comment:var(--mantine-color-gray-5);--_code-color-var:var(--mantine-color-red-7);--_code-color-number:var(--mantine-color-blue-7);--_code-color-title:var(--mantine-color-pink-7);--_code-color-keyword:var(--mantine-color-violet-7)}[data-mantine-color-scheme=dark] .m-c2204cc2{--_code-bg:var(--mantine-color-dark-8);--_code-color:var(--mantine-color-dark-1);--_code-color-comment:var(--mantine-color-dark-2);--_code-color-var:var(--mantine-color-red-5);--_code-color-number:var(--mantine-color-cyan-5);--_code-color-title:var(--mantine-color-yellow-5);--_code-color-keyword:var(--mantine-color-violet-3)}.m-8a991b4f{background-color:var(--mantine-color-body)}.m-c2207da6{align-items:center;background-color:var(--_control-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_control-bd);border-radius:var(--mantine-radius-default);color:var(--_control-color);cursor:var(--_control-cursor,default);display:flex;height:calc(1.625rem*var(--mantine-scale));justify-content:center;min-width:calc(1.625rem*var(--mantine-scale))}.m-c2207da6:where([data-disabled]){cursor:not-allowed}:where([data-mantine-color-scheme=light]) .m-c2207da6:where([data-disabled]){background-color:var(--mantine-color-gray-1);color:var(--mantine-color-gray-5)}:where([data-mantine-color-scheme=dark]) .m-c2207da6:where([data-disabled]){background-color:var(--mantine-color-dark-5);color:var(--mantine-color-dark-3)}.m-c2207da6[data-interactive]{--_control-cursor:pointer}@media (hover:hover){[data-mantine-color-scheme=light] .m-c2207da6[data-interactive]:hover{--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-c2207da6[data-interactive]:hover{--_control-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-c2207da6[data-interactive]:active{--_control-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-c2207da6[data-interactive]:active{--_control-bg:var(--mantine-color-dark-5)}}[data-mantine-color-scheme] .m-c2207da6[data-active]{--_control-bg:var(--mantine-primary-color-light);--_control-color:var(--mantine-primary-color-light-color)}@media (hover:hover){[data-mantine-color-scheme] .m-c2207da6[data-active]:hover{--_control-bg:var(--mantine-primary-color-light-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-c2207da6[data-active]:active{--_control-bg:var(--mantine-primary-color-light-hover)}}[data-mantine-color-scheme=light] .m-c2207da6{--_control-bg:var(--mantine-color-white);--_control-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-c2207da6{--_control-bg:var(--mantine-color-dark-6);--_control-bd:var(--mantine-color-dark-4)}.m-2ab47ef2{background-color:var(--mantine-color-body);display:flex}.m-2ab47ef2 [data-rich-text-editor-control]{border-radius:0}.m-2ab47ef2 [data-rich-text-editor-control]:not(:last-of-type){border-right-width:0}[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:not(:last-of-type){border-left-width:0;border-right-width:calc(.0625rem*var(--mantine-scale))}.m-2ab47ef2 [data-rich-text-editor-control]:last-of-type{border-bottom-right-radius:var(--mantine-radius-default);border-top-right-radius:var(--mantine-radius-default)}[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:last-of-type{border-bottom-right-radius:0;border-top-right-radius:0}.m-2ab47ef2 [data-rich-text-editor-control]:first-of-type,[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:last-of-type{border-bottom-left-radius:var(--mantine-radius-default);border-top-left-radius:var(--mantine-radius-default)}[dir=rtl] .m-2ab47ef2 [data-rich-text-editor-control]:first-of-type{border-bottom-left-radius:0;border-bottom-right-radius:var(--mantine-radius-default);border-top-left-radius:0;border-top-right-radius:var(--mantine-radius-default)}.m-b67b711e{display:flex}.m-296cf94c{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.m-cfef614{align-items:center;background-color:var(--_control-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_control-bd);border-radius:var(--mantine-radius-default);color:var(--_control-color,var(--mantine-color-text));display:flex;height:calc(1.5rem*var(--mantine-scale));justify-content:center;width:calc(1.5rem*var(--mantine-scale))}[data-mantine-color-scheme] .m-cfef614[data-active]{--_control-bg:var(--mantine-primary-color-light);--_control-color:var(--mantine-primary-color-filled)}@media (hover:hover){[data-mantine-color-scheme] .m-cfef614[data-active]:hover{--_control-bg:var(--mantine-primary-color-light-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-cfef614[data-active]:active{--_control-bg:var(--mantine-primary-color-light-hover)}}[data-mantine-color-scheme=light] .m-cfef614{--_control-bg:var(--mantine-color-white);--_control-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-cfef614{--_control-bg:var(--mantine-color-dark-7);--_control-bd:var(--mantine-color-dark-4)}.m-3b28e7bb{border-bottom-left-radius:0;border-top-left-radius:0}.m-4574a3c4{background-color:var(--mantine-color-body);border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_toolbar-bd);border-top-left-radius:var(--mantine-radius-default);border-top-right-radius:var(--mantine-radius-default);display:flex;flex-wrap:wrap;gap:var(--mantine-spacing-sm);padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);position:var(--_toolbar-position,static);top:var(--rte-sticky-offset,0);z-index:1}[data-mantine-color-scheme=light] .m-4574a3c4{--_toolbar-bd:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-4574a3c4{--_toolbar-bd:var(--mantine-color-dark-4)}.m-4574a3c4[data-sticky]{--_toolbar-position:sticky}.m-e4d36c9b{background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-default);box-shadow:var(--mantine-shadow-md);min-width:calc(12.5rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-e4d36c9b{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-7f4bcb19{color:var(--mantine-color-bright);font-size:var(--mantine-font-size-md);font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-3de554dd{padding:var(--mantine-spacing-sm) var(--mantine-spacing-md);padding-top:0}.m-e4d36c9b:where([data-type=radial]) :where(.m-3de554dd){padding-top:var(--mantine-spacing-sm)}.m-3de8964e{display:flex;font-size:var(--mantine-font-size-sm);justify-content:space-between}.m-3de8964e:where(.m-3de8964e+.m-3de8964e){margin-top:calc(var(--mantine-spacing-sm)/2)}.m-50186d10{align-items:center;display:flex;gap:var(--mantine-spacing-sm);margin-right:var(--mantine-spacing-xl)}.m-501dadf9{color:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-50192318{color:var(--mantine-color-bright)}.m-847eaf{align-items:center;display:flex;flex-wrap:wrap;height:100%;justify-content:flex-end}.m-847eaf:where([data-position=top]){padding-bottom:var(--mantine-spacing-md)}.m-847eaf:where([data-position=bottom]){padding-top:var(--mantine-spacing-md)}.m-17da7e62{align-items:center;border-radius:var(--mantine-radius-default);display:flex;gap:calc(.4375rem*var(--mantine-scale));line-height:1;padding:calc(.4375rem*var(--mantine-scale)) var(--mantine-spacing-xs)}@media (hover:hover){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:hover){background-color:var(--mantine-color-dark-5)}}@media (hover:none){:where([data-mantine-color-scheme=light]) .m-17da7e62:where(:active){background-color:var(--mantine-color-gray-0)}:where([data-mantine-color-scheme=dark]) .m-17da7e62:where(:active){background-color:var(--mantine-color-dark-5)}}.m-8ff56c0d{font-size:var(--mantine-font-size-sm);margin:0;padding:0}.m-a50f3e58{display:block;width:100%}:where([data-mantine-color-scheme=light]) .m-a50f3e58{--chart-grid-color:rgba(173,181,189,.6);--chart-cursor-fill:rgba(173,181,189,.15)}:where([data-mantine-color-scheme=dark]) .m-a50f3e58{--chart-cursor-fill:hsla(0,0%,41%,.15);--chart-grid-color:hsla(0,0%,41%,.6)}.m-a50f3e58 :where(text){color:var(--chart-text-color,var(--mantine-color-dimmed));font-family:var(--mantine-font-family)}.m-af9188cb{height:100%;width:100%}.m-a50a48bc{stroke:var(--chart-grid-color)}.m-a507a517{color:var(--chart-grid-color)}.m-a410e613{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-a410e613 :where(*){outline:0}.m-ddb0bfe3{fill:var(--mantine-color-text);font-size:var(--mantine-font-size-sm)}.m-cd8943fd{height:var(--chart-size,auto);min-height:var(--chart-size,auto);min-width:var(--chart-size,auto);width:var(--chart-size,auto)}.m-cd8943fd :where(*){outline:0}.m-e3441f39{fill:var(--mantine-color-white);font-size:var(--mantine-font-size-xs)}.m-a3c6e060{border-top-left-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));border-top-right-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));flex:1;padding:var(--_demo-spacing,0)}.m-a3c6e060[data-with-padding]{--_demo-spacing:var(--mantine-spacing-md)}.m-a3c6e060[data-dimmed]{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-a3c6e060[data-dimmed]{background-color:var(--mantine-color-dark-8)}.m-a3c6e060[data-centered]{align-items:center;display:flex;justify-content:center}.m-a3c6e060[data-striped]{background:repeating-linear-gradient(45deg,transparent 0,transparent calc(.625rem*var(--mantine-scale)),var(--stripe-color) calc(.625rem*var(--mantine-scale)),var(--stripe-color) 12px),repeating-linear-gradient(135deg,transparent 0,transparent calc(.625rem*var(--mantine-scale)),var(--stripe-color) calc(.625rem*var(--mantine-scale)),var(--stripe-color) calc(.75rem*var(--mantine-scale)));border-top-left-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale))}[dir=rtl] .m-a3c6e060[data-striped]{border-top-left-radius:0;border-top-right-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-a3c6e060[data-striped]{--stripe-color:rgba(0,0,0,.03)}[data-mantine-color-scheme=dark] .m-a3c6e060[data-striped]{--stripe-color:hsla(0,0%,100%,.03)}.m-ad8eb9d6{flex:var(--demo-flex);margin-left:var(--demo-margin-y,unset);margin-right:var(--demo-margin-y,unset);max-width:var(--demo-max-width,100%);min-height:var(--demo-min-height,unset)}.m-66990f0a{border-bottom-left-radius:var(--mantine-radius-md);border-bottom-right-radius:var(--mantine-radius-md);border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);overflow:hidden}.m-761fa02a{border:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);border-radius:var(--mantine-radius-md)}[data-mantine-color-scheme=light] .m-761fa02a{--_demo-border:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-761fa02a{--_demo-border:var(--mantine-color-dark-5)}.m-df4e856a{display:flex}@media (max-width:55em){.m-df4e856a{flex-direction:column}}.m-de00ac9{border-left:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);flex:0 0 calc(15.625rem*var(--mantine-scale));padding:calc(.25rem*var(--mantine-scale));padding-bottom:var(--mantine-spacing-xs)}[dir=rtl] .m-de00ac9{border-left:none;border-right:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border)}@media (max-width:55em){.m-de00ac9{border-left:none;border-right:none!important;border-top:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);flex:unset}}.m-c4d78f60{border-bottom:calc(.0625rem*var(--mantine-scale)) solid var(--_demo-border);margin-bottom:var(--mantine-spacing-xs);margin-left:calc(-.25rem*var(--mantine-scale));margin-right:calc(-.25rem*var(--mantine-scale));padding:calc(var(--mantine-spacing-md) - .25rem*var(--mantine-scale)) var(--mantine-spacing-md) var(--mantine-spacing-xs)}.m-5e1a038c{align-items:center;color:var(--mantine-color-white);cursor:pointer;display:flex;flex:1 0 calc(15% - 0.25rem*var(--mantine-scale));justify-content:center}.m-f9decbb8{height:calc(.75rem*var(--mantine-scale));width:calc(.75rem*var(--mantine-scale))}.m-2f5f7bca{align-items:center;border:calc(.0625rem*var(--mantine-scale)) solid var(--_control-border-color);border-radius:var(--mantine-radius-sm);cursor:pointer;display:flex;flex:1 0 calc(15% - 0.25rem*var(--mantine-scale));height:calc(1.75rem*var(--mantine-scale));justify-content:center}[data-mantine-color-scheme=light] .m-2f5f7bca{--_control-border-color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-2f5f7bca{--_control-border-color:var(--mantine-color-dark-3)}.m-b14e0e0b{padding:calc(var(--mantine-spacing-md) - .25rem*var(--mantine-scale))}.m-22105db1{border-radius:var(--mantine-radius-sm);cursor:help;display:block;font-size:var(--mantine-font-size-sm);padding:calc(.375rem*var(--mantine-scale)) var(--mantine-spacing-sm);width:100%}@media (hover:hover){[data-mantine-color-scheme=light] .m-22105db1:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-22105db1:hover{background-color:var(--mantine-color-dark-6)}}@media (hover:none){[data-mantine-color-scheme=light] .m-22105db1:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-22105db1:active{background-color:var(--mantine-color-dark-6)}}.m-2075ec07{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-2075ec07{color:var(--mantine-color-white)}[data-mantine-color-scheme=light] .m-36ceca49{--mantine-logo-fill:var(--mantine-color-cyan-6);--mantine-logo-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-36ceca49{--mantine-logo-fill:var(--mantine-color-yellow-4);--mantine-logo-color:var(--mantine-color-dark-8)}.m-18a11a80{align-items:center;border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--mantine-radius-md);display:flex;height:calc(2.125rem*var(--mantine-scale));justify-content:center;width:calc(2.125rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-18a11a80{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-3);color:var(--mantine-color-gray-7)}@media (hover:hover){[data-mantine-color-scheme=light] .m-18a11a80:hover{background-color:var(--mantine-color-gray-0)}}@media (hover:none){[data-mantine-color-scheme=light] .m-18a11a80:active{background-color:var(--mantine-color-gray-0)}}[data-mantine-color-scheme=dark] .m-18a11a80{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4);color:var(--mantine-color-white)}@media (hover:hover){[data-mantine-color-scheme=dark] .m-18a11a80:hover{background-color:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=dark] .m-18a11a80:active{background-color:var(--mantine-color-dark-5)}}.m-83c3d5d1{height:calc(1.375rem*var(--mantine-scale));width:calc(1.375rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-83c188ce{display:none}[data-mantine-color-scheme=light] .m-83c188ce{display:block}[data-mantine-color-scheme=light] .m-f4e3c6be{display:none}[data-mantine-color-scheme=dark] .m-f4e3c6be{display:block}.m-19df8210{--discord-color:#5865f2;--discord-color-hover:#4f5bd5}[data-mantine-color-scheme] .m-19df8210{background-color:var(--discord-color);border-color:var(--discord-color);color:var(--mantine-color-white)}@media (hover:hover){[data-mantine-color-scheme] .m-19df8210:hover{background-color:var(--discord-color-hover);border-color:var(--discord-color-hover)}}@media (hover:none){[data-mantine-color-scheme] .m-19df8210:active{background-color:var(--discord-color-hover);border-color:var(--discord-color-hover)}}.m-6e98493a{border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--mantine-radius-md);color:var(--mantine-color-placeholder);height:calc(2.125rem*var(--mantine-scale));padding-left:var(--mantine-spacing-sm);padding-right:calc(.25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-6e98493a{background-color:var(--mantine-color-white);border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-6e98493a{background-color:var(--mantine-color-dark-6);border-color:var(--mantine-color-dark-4)}[dir=rtl] .m-6e98493a{padding-left:calc(.25rem*var(--mantine-scale));padding-right:var(--mantine-spacing-sm)}.m-602cb89e{border:calc(.0625rem*var(--mantine-scale)) solid;border-radius:var(--mantine-radius-sm);font-size:calc(.6875rem*var(--mantine-scale));font-weight:700;line-height:1;padding:calc(.25rem*var(--mantine-scale)) calc(.4375rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-602cb89e{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-2);color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-602cb89e{background-color:var(--mantine-color-dark-7);border-color:var(--mantine-color-dark-7);color:var(--mantine-color-dark-0)}.m-5d0899e8{border-radius:var(--mantine-radius-xs);display:inline-block;font-family:var(--mantine-font-family-monospace);font-size:calc(.8125rem*var(--mantine-scale));line-height:var(--_code-line-height,var(--mantine-line-height));padding:calc(.0625rem*var(--mantine-scale)) calc(.1875rem*var(--mantine-scale))}.m-348cdb48{--_code-line-height:1.7;display:block;margin:0;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md)}.m-348cdb48,.m-4543bbc8{background:var(--_background)}.m-4543bbc8{align-items:flex-start;display:flex;justify-content:space-between}[data-mantine-color-scheme=light] .m-4543bbc8{--_background:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-4543bbc8{--_background:var(--mantine-color-dark-8)}.m-23f2bd31{display:flex;margin-right:calc(.4375rem*var(--mantine-scale));margin-top:calc(.4375rem*var(--mantine-scale))}.m-5d089b70,.m-6c83b382{background-color:transparent;color:var(--mantine-color-dimmed);margin:0;opacity:.8}@media (hover:hover){.m-5d089b70:hover,.m-6c83b382:hover{opacity:1}}@media (hover:none){.m-5d089b70:active,.m-6c83b382:active{opacity:1}}@media (max-width:40em){.m-5d089b70,.m-6c83b382{display:none}}.m-5d089b70{position:absolute;right:calc(.3125rem*var(--mantine-scale));top:calc(.3125rem*var(--mantine-scale));z-index:1}.m-5d09e177{align-items:center;background-color:var(--_file-bg);border:calc(.0625rem*var(--mantine-scale)) solid var(--_file-bd);border-left:0;border-top:0;color:var(--_file-color);cursor:var(--_file-cursor);display:flex;font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-xs);font-weight:700;gap:calc(.4375rem*var(--mantine-scale));justify-content:center;line-height:1;margin:0;opacity:var(--_file-opacity);padding:calc(.4375rem*var(--mantine-scale)) calc(.75rem*var(--mantine-scale));user-select:none;white-space:nowrap}@media (hover:hover){.m-5d09e177:hover{--_file-opacity:1}}@media (hover:none){.m-5d09e177:active{--_file-opacity:1}}.m-5d09e177:last-of-type{border-bottom-right-radius:var(--mantine-radius-sm)}.m-5d09e177:only-child{--_file-cursor:default}.m-5d09e177[data-active]{--_file-opacity:1;--_file-color:var(--_file-active-color)!important;--_file-bg:var(--_file-active-bg)}.m-5d09e177{--_file-opacity:0.8;--_file-cursor:pointer}[data-mantine-color-scheme=light] .m-5d09e177{--_file-color:var(--mantine-color-gray-8);--_file-bd:var(--mantine-color-gray-2);--_file-active-bg:var(--mantine-color-white);--_file-active-color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-5d09e177{--_file-color:var(--mantine-color-dark-0);--_file-bd:var(--mantine-color-dark-5);--_file-active-bg:var(--mantine-color-dark-7);--_file-active-color:var(--mantine-color-white)}.m-44324ddc{display:flex}.m-e42c0d8b{max-height:var(--ch-max-collapsed-height);overflow:hidden;position:relative}.m-e42c0d8b:before{background-image:linear-gradient(0deg,var(--_background) 16%,transparent 100%);border-radius:calc(var(--mantine-radius-md) - .0625rem*var(--mantine-scale));content:"";inset:0;pointer-events:none;position:absolute;z-index:100}.m-e42c0d8b[data-expanded]{max-height:none}.m-e42c0d8b[data-expanded]:before{display:none}.m-d9142897{bottom:0;color:var(--mantine-color-anchor);font-size:var(--mantine-font-size-sm);left:50%;padding-bottom:var(--mantine-spacing-xs);padding-top:var(--mantine-spacing-xs);position:absolute;text-align:center;transform:translateX(-50%);width:100%;z-index:101}.m-d9142897[data-hidden]{display:none}.m-5d0f6cdd{margin-top:0;position:relative}.m-5d0f6cdd[data-collapsed] .mantine-ScrollArea-viewport>div{display:block!important}[data-mantine-color-scheme=light] .m-5d0f6cdd{--_background:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-5d0f6cdd{--_background:var(--mantine-color-dark-8)}.m-19e0fe90{align-items:center;display:flex;flex:0;justify-content:center}.m-19e0fe90>svg{display:block}.m-819023b7{align-items:flex-start;background-position:50%;background-size:cover;display:flex;flex-direction:column;height:calc(27.5rem*var(--mantine-scale));justify-content:space-between}.m-b1678e91{font-size:calc(2rem*var(--mantine-scale));font-weight:900;line-height:1.2;margin-top:var(--mantine-spacing-xs)}.m-3481ba25,.m-b1678e91{color:var(--mantine-color-white);cursor:default}.m-3481ba25{font-weight:700;opacity:.7;text-transform:uppercase}.m-f1cdba19:focus{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-red-filled);outline-offset:calc(.1875rem*var(--mantine-scale))}.m-b907ace3:focus-visible{outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-red-filled);outline-offset:calc(.125rem*var(--mantine-scale))}.m-32801db9{transition:transform 50ms ease-in-out}.m-32801db9:active{transform:scale(.97)}.m-9cc5ffb6:is(h1){font-family:var(--docs-font-primary),sans-serif;font-weight:900}.m-9cc5ffb6:is(h5,h6){color:var(--mantine-color-dimmed)}.m-42f1bae{height:calc(1.375rem*var(--mantine-scale));width:calc(1.375rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-42cceab{display:none}[data-mantine-color-scheme=light] .m-42cceab{display:block}[data-mantine-color-scheme=light] .m-81e13c81{display:none}[data-mantine-color-scheme=dark] .m-81e13c81{display:block}.m-3b7b8cc2{font-size:var(--mantine-font-size-xl);font-weight:600;text-align:center}.m-b0c0466b{background:var(--mantine-color-blue-light);border-radius:var(--mantine-radius-md);color:var(--mantine-color-blue-light-color);display:inline-block;padding:.1rem .7rem}.m-f2874dbd{background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);padding:var(--mantine-spacing-md);text-align:center}@media (min-width:46.875em){.m-f2874dbd{background-color:var(--mantine-color-red-filled)}.m-1ed461e1{display:none}}.m-cf7fe6bd{display:none}@media (min-width:46.875em){.m-cf7fe6bd{display:block}}.m-bf550b40{margin-top:calc(.3125rem*var(--mantine-scale));position:relative}.m-2acd192c{background-color:var(--mantine-color-body);border-bottom-width:calc(.125rem*var(--mantine-scale));border-left:none;border-radius:0;border-right:none;border-top:none;padding-left:0}.m-2af14056{color:var(--mantine-color-placeholder);font-size:var(--mantine-font-size-sm);font-weight:400;pointer-events:none;position:absolute;top:calc(.4375rem*var(--mantine-scale));transition:color .1s ease,transform .1s ease,font-size .1s ease;z-index:1}.m-2af14056[data-floating]{color:var(--mantine-color-text);font-size:var(--mantine-font-size-xs);transform:translateY(calc(-1.25rem*var(--mantine-scale)))}.m-7bd29d5a{background-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);padding:var(--mantine-spacing-md);text-align:center}[dir=rtl] .m-7bd29d5a{background-color:var(--mantine-color-red-filled)}.m-8b35c16f{border-bottom-left-radius:var(--mantine-radius-xl);border-top-left-radius:var(--mantine-radius-xl);padding-left:calc(.25rem*var(--mantine-scale))}[dir=rtl] .m-8b35c16f{border-bottom-left-radius:var(--mantine-radius-md);border-bottom-right-radius:var(--mantine-radius-xl);border-top-left-radius:var(--mantine-radius-md);border-top-right-radius:var(--mantine-radius-xl);padding-left:calc(var(--button-padding-x)/1.5);padding-right:calc(.25rem*var(--mantine-scale))}[data-mantine-color-scheme=light] .m-8b35c16f[data-disabled]{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-8b35c16f[data-disabled]{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-8b35c16f[data-disabled] .m-27c75738[data-position=left]{opacity:.6}.m-27c75738[data-position=left]{--section-size:calc(var(--button-height) - 0.5rem*var(--mantine-scale));align-items:center;background-color:var(--mantine-color-body);border-radius:var(--mantine-radius-xl);color:var(--mantine-color-text);display:flex;height:var(--section-size);justify-content:center;width:var(--section-size)}[dir=rtl] .m-27c75738[data-position=right]{transform:rotate(180deg)}.m-93131372[data-variant=underline]{border-bottom:calc(.125rem*var(--mantine-scale)) solid;border-radius:0;padding-left:0;padding-right:0}[data-mantine-color-scheme=light] .m-93131372[data-variant=underline]{border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-93131372[data-variant=underline]{border-color:var(--mantine-color-dark-3)}.m-93131372[data-variant=underline]:focus{border-color:var(--mantine-color-blue-filled)}.m-b4c95450[data-size=xxl] .m-2be5f2c7{font-size:calc(1.75rem*var(--mantine-scale));height:calc(4.25rem*var(--mantine-scale));padding-left:calc(1.75rem*var(--mantine-scale));padding-right:calc(1.75rem*var(--mantine-scale))}.m-b4c95450[data-size=xxs] .m-2be5f2c7{font-size:calc(.625rem*var(--mantine-scale));height:calc(1.75rem*var(--mantine-scale));padding-left:calc(.625rem*var(--mantine-scale));padding-right:calc(.625rem*var(--mantine-scale))}.m-686577e7{color:var(--mantine-color-red-filled)}.m-933d67aa{background-color:var(--mantine-color-red-light)}.m-85bcba4[data-rotate]{transform:rotate(45deg)}.m-b7471fb0{height:calc(1rem*var(--mantine-scale));width:calc(1rem*var(--mantine-scale))}.m-333cc5d1{background-color:var(--mantine-color-gray-0);border-radius:var(--mantine-radius-sm)}[data-mantine-color-scheme=dark] .m-333cc5d1{background-color:var(--mantine-color-dark-6)}.m-3338c002{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3338c002{background-color:var(--mantine-color-dark-6)}.m-3338c002{border:calc(.0625rem*var(--mantine-scale)) solid transparent;position:relative;transition:transform .15s ease;z-index:0}.m-3338c002[data-active]{background-color:var(--mantine-color-body);border-color:var(--mantine-color-gray-2);transform:scale(1.03);z-index:1}[data-mantine-color-scheme=dark] .m-3338c002[data-active]{border-color:var(--mantine-color-dark-4)}.m-3338c002[data-active]{border-radius:var(--mantine-radius-md);box-shadow:var(--mantine-shadow-md)}.m-67366eec[data-rotate]{transform:rotate(-90deg)}.m-892ca4f5:disabled,.m-892ca4f5[data-disabled]{border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-892ca4f5:disabled,[data-mantine-color-scheme=dark] .m-892ca4f5[data-disabled]{border-color:var(--mantine-color-dark-4)}.m-892ca4f5:disabled,.m-892ca4f5[data-disabled]{background-color:transparent}.m-6f3d7427[data-variant=danger]{background-color:var(--mantine-color-red-9);color:var(--mantine-color-red-0)}.m-6f3d7427[data-variant=primary]{background:linear-gradient(45deg,#4b6cb7 10%,#253b67 90%);color:var(--mantine-color-white)}.m-2be4ed51{--ai-size-xxs:calc(1rem*var(--mantine-scale));--ai-size-xxl:calc(3.125rem*var(--mantine-scale))}.m-13d58bb2:disabled,.m-13d58bb2[data-disabled]{border-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-13d58bb2:disabled,[data-mantine-color-scheme=dark] .m-13d58bb2[data-disabled]{border-color:var(--mantine-color-dark-4)}.m-13d58bb2:disabled,.m-13d58bb2[data-disabled]{background-color:transparent}.m-3abb4e8a[data-variant=danger]{background-color:var(--mantine-color-red-9);color:var(--mantine-color-red-0)}.m-3abb4e8a[data-variant=primary]{background:linear-gradient(45deg,#4b6cb7 10%,#253b67 90%);border-width:0;color:var(--mantine-color-white)}.m-2cb8989f{position:relative}.m-241ed880{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-241ed880{background-color:var(--mantine-color-dark-7)}.m-241ed880{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-241ed880{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-241ed880{border-radius:var(--mantine-radius-md);padding:var(--mantine-spacing-md);padding-left:calc(3.75rem*var(--mantine-scale));transition:border-color .1s ease}.m-241ed880[data-checked]{border-color:var(--mantine-color-blue-filled)}.m-aa376f73{left:var(--mantine-spacing-md);pointer-events:none;position:absolute;top:var(--mantine-spacing-md)}.m-dd220d00:not(:checked){background-color:var(--mantine-color-body)}.m-69ff5ed7{color:var(--mantine-color-bright);font-family:var(--mantine-font-family-monospace);font-size:var(--mantine-font-size-md);font-weight:700;line-height:1.3}.m-cf98ad9f{color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs);margin-top:calc(.5rem*var(--mantine-scale))}.m-43bfb50c{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .m-43bfb50c{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-43bfb50c{border-radius:var(--mantine-radius-md);cursor:pointer;font-weight:500;padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm);transition:color .1s ease,background-color .1s ease,border-color .1s ease}.m-43bfb50c[data-checked]{background-color:var(--mantine-color-blue-filled);border-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white)}.m-43bfb50c *{pointer-events:none;user-select:none}.m-4308addd{--checkbox-size-xxl:calc(2.625rem*var(--mantine-scale));--checkbox-size-xxs:calc(0.875rem*var(--mantine-scale))}.m-4308addd[data-size=xxl] .m-1db1f159{font-size:calc(1.375rem*var(--mantine-scale));line-height:calc(2.5rem*var(--mantine-scale))}.m-4308addd[data-size=xxs] .m-1db1f159{font-size:calc(.625rem*var(--mantine-scale));line-height:calc(.875rem*var(--mantine-scale))}.m-fcba15f2{max-width:calc(18.75rem*var(--mantine-scale))}@media (min-width:25em){.m-fcba15f2{max-width:calc(25rem*var(--mantine-scale))}}@media (min-width:37.5em){.m-fcba15f2{max-width:calc(37.5rem*var(--mantine-scale))}}.m-548ba23a{background-color:var(--mantine-color-blue-0);height:100%}[data-mantine-color-scheme=dark] .m-548ba23a{background-color:var(--mantine-color-dark-4)}.m-548ba23a{padding:var(--mantine-spacing-md)}.m-60a4592e{color:var(--mantine-color-blue-6)}[data-mantine-color-scheme=dark] .m-60a4592e{color:var(--mantine-color-dimmed)}.m-60a4592e{font-size:var(--mantine-font-size-xl);font-weight:700;text-align:center}.m-8ccacaf5{background-color:var(--mantine-color-blue-light)}.m-8ca6a3cb{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-violet-filled)}.m-4ba3a790{transition:none}.m-4ba3a790:focus-within{border-color:transparent;outline:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-blue-filled)}@keyframes m-739a6f61{0%{animation-timing-function:cubic-bezier(.5,0,1,.5);transform:rotateY(0deg)}50%{animation-timing-function:cubic-bezier(0,.5,.5,1);transform:rotateY(5turn)}to{animation-timing-function:cubic-bezier(.5,0,1,.5);transform:rotateY(10turn)}}.m-25f74dea{animation:m-739a6f61 2.4s cubic-bezier(0,.2,.8,1) infinite;background:var(--loader-color);border-radius:var(--loader-size);display:inline-block;height:var(--loader-size);width:var(--loader-size)}.m-a9824888{border-color:var(--mantine-color-gray-4);border-top-left-radius:0;border-top-right-radius:0}[data-mantine-color-scheme=dark] .m-a9824888{border-color:var(--mantine-color-dark-4)}.m-a9824888{border-top:0}.m-f5487eb3{transition:none}.m-f5487eb3[data-expanded]{border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-f5487eb3[data-expanded]{border-color:var(--mantine-color-dark-4)}.m-f5487eb3[data-expanded]{border-bottom-left-radius:0;border-bottom-right-radius:0}.m-6874fea5{align-items:center;background-color:var(--mantine-color-white);display:flex;justify-content:center;padding:calc(.625rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-6874fea5{background-color:var(--mantine-color-dark-5)}.m-3dc2e23a,.m-3dc2e23a:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3dc2e23a,[data-mantine-color-scheme=dark] .m-3dc2e23a:hover{background-color:var(--mantine-color-dark-6)}.m-3dc2e23a[data-orientation=vertical] .m-b848b7ea{background-color:var(--mantine-color-red-6)}.m-3dc2e23a[data-orientation=horizontal] .m-b848b7ea{background-color:var(--mantine-color-blue-6)}.m-342d2ec1{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-342d2ec1{background-color:var(--mantine-color-dark-6)}.m-342d2ec1{opacity:1}.m-f33bcc41{border-color:var(--mantine-color-gray-4);border-top-left-radius:0;border-top-right-radius:0}[data-mantine-color-scheme=dark] .m-f33bcc41{border-color:var(--mantine-color-dark-4)}.m-f33bcc41{border-top:0}.m-37973d9a{transition:none}.m-37973d9a[data-expanded]{border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-37973d9a[data-expanded]{border-color:var(--mantine-color-dark-4)}.m-37973d9a[data-expanded]{border-bottom-left-radius:0;border-bottom-right-radius:0}.m-a4dc100e{background-color:var(--mantine-color-blue-0)}[data-mantine-color-scheme=dark] .m-a4dc100e{background-color:var(--mantine-color-dark-4)}.m-a4dc100e{padding:var(--mantine-spacing-md)}.m-f6c78959{color:var(--mantine-color-blue-6)}[data-mantine-color-scheme=dark] .m-f6c78959{color:var(--mantine-color-dimmed)}.m-f6c78959{font-size:var(--mantine-font-size-xl);font-weight:700;text-align:center}.m-7b015c03:before{background-color:var(--mantine-color-blue-1)}[data-mantine-color-scheme=dark] .m-7b015c03:before{background-color:var(--mantine-color-dark-3)}.m-88156515{border-color:var(--mantine-color-blue-1);border-radius:calc(.375rem*var(--mantine-scale));height:calc(.375rem*var(--mantine-scale));transform:translateX(calc(-.1875rem*var(--mantine-scale))) translateY(calc(-.125rem*var(--mantine-scale)));width:calc(.375rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-88156515{border-color:var(--mantine-color-dark-3)}.m-88156515[data-filled]{border-color:var(--mantine-color-blue-6)}.m-beb40edf{font-size:var(--mantine-font-size-xs);margin-bottom:calc(.3125rem*var(--mantine-scale));margin-top:0}.m-7afd1c8e{background-color:var(--mantine-color-white);border-width:calc(.0625rem*var(--mantine-scale));box-shadow:var(--mantine-shadow-sm);height:calc(1rem*var(--mantine-scale));width:calc(1rem*var(--mantine-scale))}.m-24b8a321{border-top:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-gray-4);height:calc(.125rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-24b8a321{border-top:calc(.125rem*var(--mantine-scale)) solid var(--mantine-color-dark-3)}.m-24b8a321{background-color:transparent;border-radius:var(--mantine-radius-xl)}.m-24b8a321[data-active]{background-image:linear-gradient(45deg,var(--mantine-color-blue-6),var(--mantine-color-cyan-6));border-width:0}.m-ced9b9a9{background-color:var(--mantine-color-gray-0);border-color:transparent}[data-mantine-color-scheme=dark] .m-ced9b9a9{background-color:var(--mantine-color-dark-4)}.m-ced9b9a9{border-width:0}.m-ced9b9a9[data-completed]{background-color:transparent;background-image:linear-gradient(45deg,var(--mantine-color-blue-6),var(--mantine-color-cyan-6));border-width:0}.m-f1461110{transition:transform .15s ease}.m-f1461110[data-progress]{transform:scale(1.05)}.m-3a996e90{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-2);position:relative}[data-mantine-color-scheme=dark] .m-3a996e90{border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}.m-3a996e90{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .m-3a996e90{background-color:var(--mantine-color-dark-6)}.m-3a996e90:first-of-type{border-radius:calc(.25rem*var(--mantine-scale)) 0 0 calc(.25rem*var(--mantine-scale))}.m-3a996e90:last-of-type,[dir=rtl] .m-3a996e90:first-of-type{border-radius:0 calc(.25rem*var(--mantine-scale)) calc(.25rem*var(--mantine-scale)) 0}[dir=rtl] .m-3a996e90:last-of-type{border-radius:calc(.25rem*var(--mantine-scale)) 0 0 calc(.25rem*var(--mantine-scale))}.m-3a996e90+.m-3a996e90{border-left-width:0}[dir=rtl] .m-3a996e90+.m-3a996e90{border-left-width:calc(.0625rem*var(--mantine-scale));border-right-width:0}@media (hover:hover){.m-3a996e90:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3a996e90:hover{background-color:var(--mantine-color-dark-5)}}@media (hover:none){.m-3a996e90:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-3a996e90:active{background-color:var(--mantine-color-dark-5)}}.m-3a996e90[data-active]{background-color:var(--mantine-color-blue-filled);border-color:var(--mantine-color-blue-filled);color:var(--mantine-color-white);z-index:1}@media (hover:hover){.m-3a996e90[data-active]:hover{background-color:var(--mantine-color-blue-filled-hover)}}@media (hover:none){.m-3a996e90[data-active]:active{background-color:var(--mantine-color-blue-filled-hover)}}[data-mantine-color-scheme=light] .m-13521d26{--area-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-13521d26{--area-color:var(--mantine-color-lime-4)}[data-mantine-color-scheme=light] .m-3587e220{--chart-grid-color:color-mix(in srgb,var(--mantine-color-black),transparent 85%);--chart-text-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-3587e220{--chart-grid-color:color-mix(in srgb,var(--mantine-color-white),transparent 85%);--chart-text-color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-ad75446c{--bar-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-ad75446c{--bar-color:var(--mantine-color-lime-4)}[data-mantine-color-scheme=light] .m-cb37bd9a{--chart-grid-color:color-mix(in srgb,var(--mantine-color-black),transparent 85%);--chart-text-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-cb37bd9a{--chart-grid-color:color-mix(in srgb,var(--mantine-color-white),transparent 85%);--chart-text-color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-91e7a08d{--line-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-91e7a08d{--line-color:var(--mantine-color-lime-4)}[data-mantine-color-scheme=light] .m-8fdc5499{--chart-grid-color:color-mix(in srgb,var(--mantine-color-black),transparent 85%);--chart-text-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-8fdc5499{--chart-grid-color:color-mix(in srgb,var(--mantine-color-white),transparent 85%);--chart-text-color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-b7fa7826{--chart-color:var(--mantine-color-orange-8)}[data-mantine-color-scheme=dark] .m-b7fa7826{--chart-color:var(--mantine-color-lime-4)}.m-3e09cb9d{--card-bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-3e09cb9d{--card-bg:var(--mantine-color-dark-5)}.m-3e09cb9d{background-color:var(--card-bg);border-radius:var(--mantine-radius-md);padding:var(--mantine-spacing-md)}.m-e00fbef3{--card-bg:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-e00fbef3{--card-bg:var(--mantine-color-dark-5)}.m-e00fbef3{background-color:var(--card-bg);border-radius:var(--mantine-radius-md);padding:var(--mantine-spacing-md)}.m-45c99571{background-color:var(--notification-color,var(--mantine-primary-color-filled))}.m-45c99571:before{background-color:var(--mantine-color-white)}.m-436b008d,.m-73829fa9,.m-979213db{color:var(--mantine-color-white)}@media (hover:hover){.m-979213db:hover{background-color:rgba(0,0,0,.1)}}@media (hover:none){.m-979213db:active{background-color:rgba(0,0,0,.1)}}.m-4fe518f6{height:calc(.25rem*var(--mantine-scale));transition:width .25s ease;width:calc(.75rem*var(--mantine-scale))}.m-4fe518f6[data-active]{width:calc(2.5rem*var(--mantine-scale))}.m-bf2c70c5[data-inactive]{cursor:default;opacity:0}.m-78ad357a{opacity:0;transition:opacity .15s ease}.m-f45b71a6:hover .m-78ad357a{opacity:1}.m-f79e9eba{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-f79e9eba{background-color:var(--mantine-color-dark-6)}.m-f79e9eba{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-f79e9eba{border-color:var(--mantine-color-dark-5)}.m-f79e9eba{cursor:not-allowed}.m-f79e9eba *{color:var(--mantine-color-gray-5)}[data-mantine-color-scheme=dark] .m-f79e9eba *{color:var(--mantine-color-dark-3)}.m-ad28dbef{align-items:center;background-color:var(--mantine-color-gray-0);border:0;display:flex;justify-content:center;min-height:calc(7.5rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .m-ad28dbef{background-color:var(--mantine-color-dark-6)}.m-ad28dbef[data-accept]{background-color:var(--mantine-color-blue-6);color:var(--mantine-color-white)}.m-ad28dbef[data-reject]{background-color:var(--mantine-color-red-6);color:var(--mantine-color-white)}.MdxPre_code__tSup0{border:calc(.0625rem * var(--mantine-scale)) solid;margin-top:var(--mantine-spacing-md);margin-bottom:var(--mantine-spacing-md)}.MdxPre_code__tSup0,.MdxPre_code__tSup0 pre{border-radius:var(--mantine-radius-md)}[data-mantine-color-scheme=light] .MdxPre_code__tSup0{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .MdxPre_code__tSup0{border-color:var(--mantine-color-dark-5)}.MdxTitle_title__lm_03{margin-top:calc(var(--mantine-spacing-xl) * 1.2);margin-bottom:var(--mantine-spacing-md);word-break:break-word;font-family:var(--docs-font-primary);font-weight:700;position:relative}[data-mantine-color-scheme=light] .MdxTitle_title__lm_03{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .MdxTitle_title__lm_03{color:var(--mantine-color-white)}@media (hover:hover){.MdxTitle_title__lm_03:hover .MdxTitle_copyButton__Rk3tQ{opacity:1}}@media (hover:none){.MdxTitle_title__lm_03:active .MdxTitle_copyButton__Rk3tQ{opacity:1}}.MdxTitle_title__lm_03[data-h1]{font-weight:900;font-size:calc(2.5rem * var(--mantine-scale));margin-top:0}.MdxTitle_link__O_5hL{text-decoration:none;color:inherit}.MdxTitle_offset__NkEGi{position:relative;top:calc(-3.875rem * var(--mantine-scale))}.MdxTitle_copyButton__Rk3tQ{display:flex;align-items:flex-start;justify-content:flex-start;min-width:calc(1.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);border-radius:var(--mantine-radius-sm);opacity:.2;transition:opacity .1s ease;position:absolute;top:0;bottom:0;left:calc(-1.75rem * var(--mantine-scale));padding-right:calc(.625rem * var(--mantine-scale));padding-top:calc(.5rem * var(--mantine-scale));padding-bottom:calc(.25rem * var(--mantine-scale))}@media (hover:hover){.MdxTitle_copyButton__Rk3tQ:hover{color:var(--mantine-color-blue-5)}}@media (hover:none){.MdxTitle_copyButton__Rk3tQ:active{color:var(--mantine-color-blue-5)}}@media (max-width:74.99375em){.MdxTitle_copyButton__Rk3tQ{display:none}}.MdxTitle_copyIcon__LScnY{width:calc(1.125rem * var(--mantine-scale));height:calc(1.125rem * var(--mantine-scale))}.MdxInfo_root__KVEKQ{margin-top:calc(var(--mantine-spacing-xl) * 1.5);margin-bottom:var(--mantine-spacing-lg)}.MdxInfo_root__KVEKQ>p{line-height:1.65;font-size:calc(.9375rem * var(--mantine-scale))}.MdxInfo_root__KVEKQ>p>strong:only-child{font-family:var(--docs-font-primary);font-size:var(--mantine-font-size-lg)}[data-mantine-color-scheme=light] .MdxInfo_root__KVEKQ>p>strong:only-child{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .MdxInfo_root__KVEKQ>p>strong:only-child{color:var(--mantine-color-white)}.MdxInfo_root__KVEKQ>p>strong:only-child>code{font-size:80%}.MdxInfo_root__KVEKQ>p:first-of-type{margin-top:0}.MdxInfo_root__KVEKQ>p:last-of-type{margin-bottom:0}[data-mantine-color-scheme=light] .MdxInfo_root__KVEKQ .mantine-Code-root{background-color:var(--docs-bq-code-bg-light)}[data-mantine-color-scheme=dark] .MdxInfo_root__KVEKQ .mantine-Code-root{background-color:var(--docs-bq-code-bg-dark)}.MdxInfo_root__KVEKQ .mantine-CodeHighlight-root{margin-top:var(--mantine-spacing-md)}[data-mantine-color-scheme=light] .MdxInfo_root__KVEKQ .mantine-CodeHighlight-root{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .MdxInfo_root__KVEKQ .mantine-CodeHighlight-root{background-color:var(--mantine-color-dark-7)}.MdxInfo_icon__cOv9p{width:calc(1.75rem * var(--mantine-scale));height:calc(1.75rem * var(--mantine-scale))}.MdxLink_link__DWoQo{font-size:calc(.9375rem * var(--mantine-scale))}.MdxTypography_paragraph__XriB5,.MdxTypography_ul__gGDJt{line-height:1.65;font-size:calc(.9375rem * var(--mantine-scale))}.MdxTypography_ul__gGDJt{margin-bottom:calc(1.25rem * var(--mantine-scale));margin-top:calc(.625rem * var(--mantine-scale));padding-left:var(--mantine-spacing-xl)}.MdxTypography_li__gO4GM{margin-top:calc(.25rem * var(--mantine-scale));font-size:calc(.9375rem * var(--mantine-scale))}.icons_nextIcon__ZCrZ1{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .icons_nextIcon__ZCrZ1{color:var(--mantine-color-white)}.icons_icon__yq4dY,.icons_nextIcon__ZCrZ1{width:var(--icon-size)}.icons_icon__yq4dY{height:var(--icon-size)}.MdxTemplatesList_externalLinkIcon___In9x{width:calc(.875rem * var(--mantine-scale));height:calc(.875rem * var(--mantine-scale))}.MdxTemplatesList_icon__759wE{display:flex;align-items:center;justify-content:center;width:calc(2.75rem * var(--mantine-scale));color:var(--mantine-color-dimmed)}@media (max-width:31.25em){.MdxTemplatesList_iconCell__t22nh{display:none}}.DocsSection_section__o2plc{margin-bottom:calc(var(--mantine-spacing-xl) * 1.5);margin-top:var(--mantine-spacing-sm)}.MdxNpmScript_root__wk_w9{border:calc(.0625rem * var(--mantine-scale)) solid;border-radius:var(--mantine-radius-md);overflow:hidden;margin-bottom:var(--mantine-spacing-xl)}[data-mantine-color-scheme=light] .MdxNpmScript_root__wk_w9{border-color:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .MdxNpmScript_root__wk_w9{border-color:var(--mantine-color-dark-5)}.MdxNpmScript_icon___9BYF{margin-right:calc(.3125rem * var(--mantine-scale))}[dir=rtl] .MdxNpmScript_icon___9BYF{margin-right:0;margin-left:calc(.3125rem * var(--mantine-scale))}.MdxPackagesInstallation_row__4jECZ{cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover:hover){.MdxPackagesInstallation_row__4jECZ:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .MdxPackagesInstallation_row__4jECZ:hover{background-color:var(--mantine-color-dark-6)}}@media (hover:none){.MdxPackagesInstallation_row__4jECZ:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .MdxPackagesInstallation_row__4jECZ:active{background-color:var(--mantine-color-dark-6)}}.MdxPackagesInstallation_checkbox__jBi9e{pointer-events:none;display:flex}@media (max-width:46.875em){.MdxPackagesInstallation_hiddenMobile__VJhVH{display:none}}.Logo_logo__c5nVK{text-decoration:none;user-select:none;display:flex;align-items:center}[data-mantine-color-scheme=light] .Logo_logo__c5nVK{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .Logo_logo__c5nVK{color:var(--mantine-color-white)}.Header_header__KDGDv{background-color:var(--mantine-color-body);height:var(--docs-header-height);position:fixed;top:0;left:0;right:0;padding-left:var(--mantine-spacing-md);padding-right:var(--mantine-spacing-md);display:flex;align-items:center;justify-content:space-between;z-index:101}[data-mantine-color-scheme=light] .Header_header__KDGDv{border-bottom:calc(.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .Header_header__KDGDv{border-bottom:calc(.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-8)}@media (max-width:47.5em){.Header_header__KDGDv[data-desktop]{display:none}}@media (min-width:47.5625em){.Header_header__KDGDv[data-mobile]{display:none}}.Header_logo__DqpNC,.Header_version__jVWmz{display:flex;align-items:center}.Header_version__jVWmz{margin-top:calc(.25rem * var(--mantine-scale));margin-left:var(--mantine-spacing-md);font-weight:700;justify-content:center;line-height:1;padding:calc(.25rem * var(--mantine-scale)) calc(.625rem * var(--mantine-scale));padding-right:calc(.5rem * var(--mantine-scale));border-radius:var(--mantine-radius-xl)}[dir=rtl] .Header_version__jVWmz{margin-left:0;margin-right:var(--mantine-spacing-md)}@media (max-width:50em){.Header_version__jVWmz{display:none}}.Header_versionChevron__t4WMy{display:block;margin-left:calc(.3125rem * var(--mantine-scale))}.Header_versionChevron__t4WMy,.Header_versionExternalIcon___plOU{width:calc(.875rem * var(--mantine-scale));height:calc(.875rem * var(--mantine-scale))}.Header_versionExternalIcon___plOU{color:var(--mantine-color-dimmed)}.NavbarLinksGroup_group__Xgv_M{margin-bottom:0;padding-left:var(--mantine-spacing-md);padding-right:var(--mantine-spacing-md)}.NavbarLinksGroup_group__Xgv_M[data-opened]{margin-bottom:calc(var(--mantine-spacing-xl) * 1.2)}.NavbarLinksGroup_header__yNIL7{display:flex;align-items:center;width:calc(100% + var(--mantine-spacing-md));height:calc(2rem * var(--mantine-scale));cursor:pointer}[data-mantine-color-scheme=light] .NavbarLinksGroup_header__yNIL7{color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_header__yNIL7{color:var(--mantine-color-white)}.NavbarLinksGroup_chevron__x5W5G{width:calc(.9375rem * var(--mantine-scale));height:calc(.9375rem * var(--mantine-scale));margin-right:var(--mantine-spacing-md);transition:transform .15s ease}[dir=rtl] .NavbarLinksGroup_chevron__x5W5G{margin-right:0;margin-left:var(--mantine-spacing-md)}.NavbarLinksGroup_chevron__x5W5G[data-collapsed]{transform:rotate(-90deg)}.NavbarLinksGroup_title__sFCQR{user-select:none;font-weight:700;font-family:var(--docs-font-primary);line-height:1;padding-top:calc(.25rem * var(--mantine-scale));letter-spacing:calc(.03125rem * var(--mantine-scale));word-spacing:calc(.0625rem * var(--mantine-scale));text-transform:uppercase;font-size:var(--mantine-font-size-xs)}.NavbarLinksGroup_category__nrDId{padding-top:calc(.75rem * var(--mantine-scale))}.NavbarLinksGroup_categoryTitle__GUTGd{position:relative;padding-left:calc(1.4375rem * var(--mantine-scale));margin-left:calc(.4375rem * var(--mantine-scale));margin-bottom:calc(.3125rem * var(--mantine-scale));border-left:calc(.0625rem * var(--mantine-scale)) solid;height:calc(2.125rem * var(--mantine-scale));display:flex;align-items:center;font-size:var(--mantine-font-size-xs);border-top-right-radius:var(--mantine-radius-sm);border-bottom-right-radius:var(--mantine-radius-sm);text-transform:capitalize}[data-mantine-color-scheme=light] .NavbarLinksGroup_categoryTitle__GUTGd{background-color:var(--mantine-color-gray-0);border-color:var(--mantine-color-gray-3)!important;color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_categoryTitle__GUTGd{background-color:var(--mantine-color-dark-7);border-color:var(--mantine-color-dark-6)!important;color:var(--mantine-color-dark-2)}[dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd{padding-left:0;padding-right:calc(1.4375rem * var(--mantine-scale));border-left:0;border-right:calc(.0625rem * var(--mantine-scale)) solid;margin-left:0;margin-right:calc(.4375rem * var(--mantine-scale));border-radius:0;border-top-left-radius:var(--mantine-radius-sm);border-bottom-left-radius:var(--mantine-radius-sm)}[data-mantine-color-scheme=light] [dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd{border-color:var(--mantine-color-gray-3)!important}[data-mantine-color-scheme=dark] [dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd{border-color:var(--mantine-color-dark-6)!important}.NavbarLinksGroup_categoryTitle__GUTGd:before{content:"";position:absolute;bottom:calc(-.3125rem * var(--mantine-scale));left:calc(-.0625rem * var(--mantine-scale));height:calc(.3125rem * var(--mantine-scale));width:calc(.0625rem * var(--mantine-scale))}[data-mantine-color-scheme=light] .NavbarLinksGroup_categoryTitle__GUTGd:before{background-color:var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_categoryTitle__GUTGd:before{background-color:var(--mantine-color-dark-6)}[dir=rtl] .NavbarLinksGroup_categoryTitle__GUTGd:before{left:unset;right:calc(-.0625rem * var(--mantine-scale))}.NavbarLinksGroup_categoryIcon__qE5p8{margin-right:var(--mantine-spacing-xs);width:calc(.875rem * var(--mantine-scale));height:calc(.875rem * var(--mantine-scale))}[dir=rtl] .NavbarLinksGroup_categoryIcon__qE5p8{margin-right:0;margin-left:var(--mantine-spacing-xs)}.NavbarLinksGroup_link__jLgZu{display:block;border-left:calc(.0625rem * var(--mantine-scale)) solid;padding-left:calc(1.4375rem * var(--mantine-scale));padding-right:var(--mantine-spacing-md);margin-left:calc(.4375rem * var(--mantine-scale));height:calc(2.125rem * var(--mantine-scale));line-height:calc(2.125rem * var(--mantine-scale));border-top-right-radius:var(--mantine-radius-sm);border-bottom-right-radius:var(--mantine-radius-sm);font-size:var(--mantine-font-size-sm);user-select:none}[data-mantine-color-scheme=light] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-gray-3)!important;color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-dark-6)!important;color:var(--mantine-color-dark-1)}[dir=rtl] .NavbarLinksGroup_link__jLgZu{text-align:right;padding-left:var(--mantine-spacing-md);padding-right:calc(1.4375rem * var(--mantine-scale));border-left:0;border-right:calc(.0625rem * var(--mantine-scale)) solid;margin-left:0;margin-right:calc(.4375rem * var(--mantine-scale));border-radius:0;border-top-left-radius:var(--mantine-radius-sm);border-bottom-left-radius:var(--mantine-radius-sm)}[data-mantine-color-scheme=light] [dir=rtl] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-gray-3)!important}[data-mantine-color-scheme=dark] [dir=rtl] .NavbarLinksGroup_link__jLgZu{border-color:var(--mantine-color-dark-6)!important}.NavbarLinksGroup_link__jLgZu[data-active]{border-color:var(--mantine-color-blue-5)!important;font-weight:500}[data-mantine-color-scheme=light] .NavbarLinksGroup_link__jLgZu[data-active]{color:var(--mantine-color-blue-8);background-color:var(--mantine-color-blue-0)}[data-mantine-color-scheme=dark] .NavbarLinksGroup_link__jLgZu[data-active]{color:var(--mantine-color-blue-1);background-color:rgba(24,100,171,.45)}.NavbarMainLink_link__eG_24{--offset:calc(0.375rem * var(--mantine-scale));height:calc(3rem * var(--mantine-scale));display:flex;align-items:center;padding-left:calc(var(--mantine-spacing-md) - var(--offset));padding-right:calc(var(--mantine-spacing-md) - var(--offset));margin-left:var(--offset);margin-right:var(--offset);border-radius:var(--mantine-radius-md);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .NavbarMainLink_link__eG_24{color:var(--mantine-color-white)}.NavbarMainLink_link__eG_24[data-active]{background-color:var(--mantine-color-blue-light-hover)}.NavbarMainLink_link__eG_24[data-active]>.NavbarMainLink_icon__ePqig{background:transparent}@media (hover:hover){.NavbarMainLink_link__eG_24:hover .NavbarMainLink_external__Ko9pq{opacity:1}}@media (hover:none){.NavbarMainLink_link__eG_24:active .NavbarMainLink_external__Ko9pq{opacity:1}}.NavbarMainLink_icon__ePqig{display:flex;align-items:center;justify-content:center;padding:calc(.25rem * var(--mantine-scale));border-radius:var(--mantine-radius-md);background-color:var(--mantine-color-blue-light-hover);color:var(--mantine-color-blue-light-color);width:calc(2.125rem * var(--mantine-scale));height:calc(2.125rem * var(--mantine-scale))}.NavbarMainLink_label__gBi5w{font-size:var(--mantine-font-size-sm);margin-left:var(--mantine-spacing-sm);font-weight:500}[dir=rtl] .NavbarMainLink_label__gBi5w{margin-left:0;margin-right:var(--mantine-spacing-sm)}.NavbarMainLink_external__Ko9pq{margin-left:auto;display:flex;align-items:center;justify-content:center;width:calc(2.125rem * var(--mantine-scale));height:calc(2.125rem * var(--mantine-scale));color:var(--mantine-color-dimmed);border-radius:var(--mantine-radius-md);opacity:0;transition:opacity .1s ease}.Navbar_navbar__LAEds{border-right:calc(.0625rem * var(--mantine-scale)) solid var(--navbar-border-color);position:fixed;top:var(--docs-header-height);bottom:0;left:0;z-index:100;width:var(--docs-navbar-width);display:flex;flex-direction:column}[data-mantine-color-scheme=light] .Navbar_navbar__LAEds{--navbar-border-color:var(--mantine-color-gray-2);background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .Navbar_navbar__LAEds{--navbar-border-color:var(--mantine-color-dark-7);background-color:var(--mantine-color-dark-8)}[dir=rtl] .Navbar_navbar__LAEds{border-left:calc(.0625rem * var(--mantine-scale)) solid var(--navbar-border-color);border-right:0;left:unset;right:0}@media (max-width:47.5em){.Navbar_navbar__LAEds[data-hidden]{display:none!important}}.Navbar_navbar__LAEds[data-mobile-only]{display:none}@media (max-width:47.5em){.Navbar_navbar__LAEds[data-mobile-only]{display:flex}.Navbar_navbar__LAEds{width:unset;left:0;right:0}}.Navbar_scrollarea__sbhtk{flex:1}.Navbar_body__8M1M_{padding-top:var(--mantine-spacing-md);padding-bottom:calc(6.25rem * var(--mantine-scale))}.Navbar_groups__4j6NE{padding-top:var(--mantine-spacing-xl)}.Shell_main__o5vhe{padding-top:var(--docs-header-height);padding-left:var(--docs-navbar-width)}@media (max-width:47.5em){.Shell_main__o5vhe{padding-left:0}}[dir=rtl] .Shell_main__o5vhe{padding-left:0;padding-right:var(--docs-navbar-width)}@media (max-width:47.5em){[dir=rtl] .Shell_main__o5vhe{padding-right:0}}[data-mantine-color-scheme=light] .Shell_main__o5vhe{background-color:var(--mantine-color-white)}[data-mantine-color-scheme=dark] .Shell_main__o5vhe{background-color:var(--mantine-color-dark-7)}@font-face{font-family:__greycliffCF_0e41f6;src:url(/_next/static/media/e0ad2ceaf794b823-s.p.woff2) format("woff2");font-display:swap;font-weight:700;font-style:normal}@font-face{font-family:__greycliffCF_0e41f6;src:url(/_next/static/media/fe465dc4c64aad70-s.p.woff2) format("woff2");font-display:swap;font-weight:900;font-style:normal}@font-face{font-family:__greycliffCF_Fallback_0e41f6;src:local("Arial");ascent-override:74.42%;descent-override:20.87%;line-gap-override:24.87%;size-adjust:104.94%}.__className_0e41f6{font-family:__greycliffCF_0e41f6,__greycliffCF_Fallback_0e41f6}body{--docs-header-height:calc(3.75rem * var(--mantine-scale));--docs-navbar-width:calc(16.25rem * var(--mantine-scale));--docs-table-of-contents-width:calc(16.25rem * var(--mantine-scale));--docs-mdx-content-width:calc(51.25rem * var(--mantine-scale))}[data-docs-inline-code] code{font-family:var(--mantine-font-family-monospace);line-height:var(--mantine-line-height);padding:calc(.125rem * var(--mantine-scale)) calc(var(--mantine-spacing-xs) / 2);border-radius:var(--mantine-radius-sm);font-size:var(--mantine-font-size-xs);margin:0}[data-mantine-color-scheme=light] [data-docs-inline-code] code{background-color:var(--mantine-color-gray-1);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] [data-docs-inline-code] code{background-color:var(--mantine-color-dark-5);color:var(--mantine-color-white)} \ No newline at end of file diff --git a/_next/static/qjvbTAlABrUHG552ffCT8/_buildManifest.js b/_next/static/lwA9LH91zctptI17KsMMh/_buildManifest.js similarity index 93% rename from _next/static/qjvbTAlABrUHG552ffCT8/_buildManifest.js rename to _next/static/lwA9LH91zctptI17KsMMh/_buildManifest.js index a0b2b08636c..2a63f414798 100644 --- a/_next/static/qjvbTAlABrUHG552ffCT8/_buildManifest.js +++ b/_next/static/lwA9LH91zctptI17KsMMh/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,n,h,d,p,k,g,l,b,f,j,m,y,v,x,w,z,_,q,I,B,F,A){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[b,d,f,"static/chunks/86778-2e071df1a077b5a3.js",s,a,o,i,n,j,m,y,"static/css/5fff23d663829729.css","static/chunks/pages/index-0c3ee589731d329c.js"],"/404":[e,s,c,t,"static/chunks/pages/404-5c8277b387e3c7bc.js"],"/_error":["static/chunks/pages/_error-3e5915e320e75bc6.js"],"/about":[e,s,c,t,"static/css/d9576cd74a6010ee.css","static/chunks/pages/about-cd98e1907e34d4cc.js"],"/app-shell":["static/css/dc549a3d8b9a0209.css","static/chunks/pages/app-shell-48a157135a395659.js"],"/changelog/7-0-0":[e,r,d,s,c,t,i,v,x,"static/chunks/pages/changelog/7-0-0-41233cf73b8e490b.js"],"/changelog/7-1-0":[e,s,c,t,"static/chunks/pages/changelog/7-1-0-6598dbcf887f0cb5.js"],"/changelog/7-2-0":[e,r,s,c,t,a,p,"static/chunks/pages/changelog/7-2-0-d5481bae9cd15150.js"],"/changelog/7-3-0":[e,s,c,t,a,w,"static/chunks/pages/changelog/7-3-0-a35629e22a0607d1.js"],"/changelog/7-4-0":[e,r,u,h,z,s,c,t,a,k,_,"static/chunks/pages/changelog/7-4-0-6f1ed2b8ce135929.js"],"/changelog/7-5-0":[e,u,h,g,"static/chunks/85126-530cb27306745b0d.js",s,c,t,o,n,k,"static/chunks/pages/changelog/7-5-0-1e1579d3d43aeecd.js"],"/changelog/all-releases":[e,s,c,t,q,I,"static/chunks/pages/changelog/all-releases-0941bbc4fc1a3ff8.js"],"/changelog/previous-versions":[e,s,c,t,q,I,"static/chunks/pages/changelog/previous-versions-19b2af93c6839886.js"],"/charts/area-chart":[e,u,h,s,c,t,k,"static/chunks/pages/charts/area-chart-e497f885d4a1a2b2.js"],"/charts/bar-chart":[e,u,s,c,t,"static/chunks/pages/charts/bar-chart-fb5691e7aa75c9a3.js"],"/charts/donut-chart":[e,u,g,s,c,t,"static/chunks/pages/charts/donut-chart-d9bf788f9a049bea.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-17bd16b4234b60b6.js"],"/charts/line-chart":[e,u,z,s,c,t,"static/chunks/pages/charts/line-chart-07de1243534e70b5.js"],"/charts/pie-chart":[e,u,g,s,c,t,"static/chunks/pages/charts/pie-chart-afc8e4b8c4363977.js"],"/charts/sparkline":[e,u,h,s,c,t,"static/chunks/pages/charts/sparkline-289f31eef5b090ba.js"],"/colors-generator":["static/chunks/90973-b1d2e8ce0943b81d.js","static/css/81916ff62eb6a146.css","static/chunks/pages/colors-generator-a2bd5d8667f3bc87.js"],"/combobox":[i,"static/css/b09a4561d0889a8b.css","static/chunks/pages/combobox-bb81f0cb5a2d4c65.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-f1c9b13802b2fc10.js"],"/core/accordion":[e,s,c,t,y,"static/chunks/pages/core/accordion-4450dc329c1d0417.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-4bbba6a1b3491103.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-c6dbbfafc3c36abb.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-ffde401369212b3a.js"],"/core/anchor":[e,s,c,t,"static/chunks/pages/core/anchor-acf4229b83711631.js"],"/core/app-shell":[e,s,c,t,"static/chunks/pages/core/app-shell-40f741489d2f9b2c.js"],"/core/aspect-ratio":[e,s,c,t,"static/chunks/pages/core/aspect-ratio-275a8a6d288a9dd2.js"],"/core/autocomplete":[e,s,c,t,i,"static/chunks/pages/core/autocomplete-dcdfdfe2334545c3.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-32d5516fb3ef287e.js"],"/core/background-image":[e,s,c,t,"static/chunks/pages/core/background-image-44900dcb55178b2b.js"],"/core/badge":[e,s,c,t,"static/chunks/pages/core/badge-16ed42cff309ced8.js"],"/core/blockquote":[e,s,c,t,"static/chunks/pages/core/blockquote-a2407b68f6077ab6.js"],"/core/box":[e,s,c,t,"static/chunks/pages/core/box-e43744a200b97ed9.js"],"/core/breadcrumbs":[e,s,c,t,"static/chunks/pages/core/breadcrumbs-f4b1866d53a08b3a.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-e8eacbbe6c6d1868.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-f6faa498da78b211.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-9e54094104c68351.js"],"/core/center":[e,s,c,t,"static/chunks/pages/core/center-56bb820cf2d23360.js"],"/core/checkbox":[e,s,c,t,"static/chunks/pages/core/checkbox-2803466c77dc08af.js"],"/core/chip":[e,s,c,t,"static/chunks/pages/core/chip-d64b1c8c6b6e90ba.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-e52dee6713fd34cb.js"],"/core/code":[e,s,c,t,"static/chunks/pages/core/code-54e0a16c08439d7e.js"],"/core/collapse":[e,s,c,t,"static/chunks/pages/core/collapse-cef9cf6ddc1ccf79.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-b62db360b3626728.js"],"/core/color-picker":[e,s,c,t,"static/chunks/pages/core/color-picker-19297a681de0b4ff.js"],"/core/color-swatch":[e,s,c,t,"static/chunks/pages/core/color-swatch-bea54cb46ce30aa2.js"],"/core/combobox":[e,s,c,t,i,"static/chunks/pages/core/combobox-fbf2458276a5ff9b.js"],"/core/container":[e,s,c,t,"static/chunks/pages/core/container-1afef515bd12aab6.js"],"/core/copy-button":[e,s,c,t,"static/chunks/pages/core/copy-button-0e92bd6d90c82c7f.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-9cbefe7c061258a9.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-11907bfc3d36c54b.js"],"/core/drawer":[e,s,c,t,a,w,"static/chunks/pages/core/drawer-c020fc7cd9ee454b.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-cb66b8b6d7acd669.js"],"/core/file-button":[e,s,c,t,"static/chunks/pages/core/file-button-6d5f9c7cd3425d44.js"],"/core/file-input":[e,s,c,t,"static/chunks/pages/core/file-input-fe31e7a79c4f35bc.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-9caf598cc19cd997.js"],"/core/focus-trap":[e,s,c,t,"static/chunks/pages/core/focus-trap-2af9ec435f0b46b9.js"],"/core/grid":[e,s,c,t,"static/chunks/pages/core/grid-cef669a420262d12.js"],"/core/group":[e,s,c,t,"static/chunks/pages/core/group-f52c0563658e18d8.js"],"/core/highlight":[e,s,c,t,"static/chunks/pages/core/highlight-847b457dfd1cb3a7.js"],"/core/hover-card":[e,s,c,t,"static/chunks/pages/core/hover-card-50c32c2b1f0cb724.js"],"/core/image":[e,s,c,t,"static/chunks/pages/core/image-8aeeccf2b1b5b237.js"],"/core/indicator":[e,s,c,t,"static/chunks/pages/core/indicator-b9d60c0a8c64b119.js"],"/core/input":[e,"static/chunks/45723-ebd4e4273f66de80.js",s,c,t,"static/chunks/pages/core/input-afd226b7c6c93574.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-f983768d528e2e10.js"],"/core/kbd":[e,s,c,t,"static/chunks/pages/core/kbd-0c4f9a0a8ee5d364.js"],"/core/list":[e,s,c,t,"static/chunks/pages/core/list-55d6a4b2965b2ae4.js"],"/core/loader":[e,s,c,t,a,p,"static/chunks/pages/core/loader-0f6afdec50cf3db4.js"],"/core/loading-overlay":[e,s,c,t,a,p,"static/chunks/pages/core/loading-overlay-f2f9ddea65d74e5f.js"],"/core/mark":[e,s,c,t,"static/chunks/pages/core/mark-76583603ed2e7331.js"],"/core/menu":[e,s,c,t,"static/chunks/pages/core/menu-a268b8158aa95ed9.js"],"/core/modal":[e,s,c,t,a,B,"static/chunks/pages/core/modal-995f8e7c0280fe89.js"],"/core/multi-select":[e,s,c,t,i,m,"static/chunks/pages/core/multi-select-b73ece31b9f2552b.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-4e93a4477b74f1d4.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-5edfad7effb3bc57.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-ce46f458e485af2a.js"],"/core/number-formatter":[e,r,s,c,t,"static/chunks/pages/core/number-formatter-d719dc8265ef18f6.js"],"/core/number-input":[e,r,s,c,t,"static/chunks/pages/core/number-input-f0917f4b9f4b6748.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-1b9af959810144b3.js"],"/core/pagination":[e,s,c,t,F,"static/chunks/pages/core/pagination-d07a5dcbec47242c.js"],"/core/paper":[e,s,c,t,"static/chunks/pages/core/paper-e70efb6ff7d3d953.js"],"/core/password-input":[e,s,c,t,"static/chunks/pages/core/password-input-bf6e03b85f00eb02.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-1eccb6bdc210f1f7.js"],"/core/pills-input":[e,s,c,t,i,"static/chunks/pages/core/pills-input-f020963c242e87dc.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-01e47330c7f82dfe.js"],"/core/popover":[e,s,c,t,o,i,n,"static/chunks/pages/core/popover-1b12de8c5c40c4a1.js"],"/core/portal":[e,s,c,t,"static/chunks/pages/core/portal-7dcb8cda8c40dee5.js"],"/core/progress":[e,s,c,t,"static/chunks/pages/core/progress-e7833879ea2b9587.js"],"/core/radio":[e,s,c,t,"static/chunks/pages/core/radio-7dc170b3514aab10.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-c6afb2b25e9baa36.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-00fcfde862bd25f0.js"],"/core/scroll-area":[e,s,c,t,"static/chunks/pages/core/scroll-area-4ff13d75475121f6.js"],"/core/segmented-control":[e,s,c,t,"static/chunks/pages/core/segmented-control-2130da026d873b59.js"],"/core/select":[e,s,c,t,i,"static/chunks/pages/core/select-3fbf2998ca94f86c.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-692285334e076dd1.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-6265974676ade76c.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-73258b44cddd2e3a.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-b7b422cb13bff5ab.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-f12a11fd11e5258b.js"],"/core/stack":[e,s,c,t,"static/chunks/pages/core/stack-61ce899dc7b07eeb.js"],"/core/stepper":[e,s,c,t,"static/chunks/pages/core/stepper-bdb6df8b55e3dc83.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-d15d4d4b55ffb017.js"],"/core/table":[e,s,c,t,"static/chunks/pages/core/table-7938a2b585170ce2.js"],"/core/tabs":[e,s,c,t,"static/chunks/pages/core/tabs-7dd61c10d6ffd063.js"],"/core/tags-input":[e,s,c,t,i,v,"static/chunks/pages/core/tags-input-82ce39ec93a8d93d.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-7ef65b745fda0323.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-809213133b3cce4c.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-dc6b36da99ed9821.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-8282f95357163937.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-bab157784a44c8a0.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-01c66a6cf9f61a54.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-f50a86baf95dcfb0.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-beea2b362ae349d6.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-7f671d2746be516c.js"],"/core/unstyled-button":[e,s,c,t,"static/chunks/pages/core/unstyled-button-9229ddef5eef9aa1.js"],"/core/visually-hidden":[e,s,c,t,"static/chunks/pages/core/visually-hidden-1de1135b5c04acc6.js"],"/dates/calendar":[e,s,c,t,o,"static/chunks/pages/dates/calendar-221312b8cbfd6c29.js"],"/dates/date-input":[e,s,c,t,o,"static/chunks/pages/dates/date-input-958f70ebc12d68a7.js"],"/dates/date-picker":[e,s,c,t,o,l,"static/chunks/pages/dates/date-picker-d5deedd78e567301.js"],"/dates/date-picker-input":[e,s,c,t,o,n,"static/chunks/pages/dates/date-picker-input-e9383d5dc2270983.js"],"/dates/date-time-picker":[e,s,c,t,o,"static/chunks/pages/dates/date-time-picker-cc50b2856b54e4f3.js"],"/dates/dates-provider":[e,s,c,t,o,n,"static/chunks/pages/dates/dates-provider-b7d60fef0c6f18e5.js"],"/dates/getting-started":[e,s,c,t,o,n,"static/chunks/pages/dates/getting-started-2d5c5ae490a42dfd.js"],"/dates/month-picker":[e,s,c,t,o,l,"static/chunks/pages/dates/month-picker-2ceec3c2fc399bbd.js"],"/dates/month-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/month-picker-input-1450be9fe57fe9bf.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-d09096f14ccac23b.js"],"/dates/year-picker":[e,s,c,t,o,l,"static/chunks/pages/dates/year-picker-73b88cf8e8f99fb5.js"],"/dates/year-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/year-picker-input-4f61f28de1773bf9.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-86f2b5675b1b9293.js"],"/form/create-form-context":[e,s,c,t,"static/chunks/pages/form/create-form-context-d3e9858b841665aa.js"],"/form/errors":[e,s,c,t,"static/chunks/pages/form/errors-39cbfcc4453d4184.js"],"/form/get-input-props":[e,r,s,c,t,a,_,"static/chunks/pages/form/get-input-props-7414c69ca74388ac.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-80a5ce59f3f12d09.js"],"/form/recipes":["static/chunks/3c425cc6-59b06626c812151b.js",e,"static/chunks/4038-2723607d463a3d93.js",s,c,t,a,"static/chunks/pages/form/recipes-13f347df41c7223a.js"],"/form/schema-validation":[e,s,c,t,"static/chunks/pages/form/schema-validation-3f6f1f43f7f02d95.js"],"/form/status":[e,s,c,t,a,"static/chunks/pages/form/status-2f13481afa4052a9.js"],"/form/use-form":[e,s,c,t,a,"static/chunks/pages/form/use-form-1b45c6fb84634b34.js"],"/form/validation":[e,r,s,c,t,a,"static/chunks/pages/form/validation-596f58b7514087b1.js"],"/form/validators":[e,r,s,c,t,a,"static/chunks/pages/form/validators-e2c29565f9be4a88.js"],"/form/values":[e,r,s,c,t,a,"static/chunks/pages/form/values-9ebbba82ffc5ab5b.js"],"/getting-started":[e,s,c,t,"static/css/61fea03958314ae0.css","static/chunks/pages/getting-started-c1e1f821ebfd50eb.js"],"/guides/6x-to-7x":[e,s,c,t,"static/chunks/pages/guides/6x-to-7x-0ea37edf7ec3f187.js"],"/guides/functions-reference":[e,s,c,t,"static/chunks/pages/guides/functions-reference-18ac6ddbf877653b.js"],"/guides/gatsby":[e,s,c,t,"static/chunks/pages/guides/gatsby-818f9f208f1ae682.js"],"/guides/icons":[e,s,c,t,"static/chunks/pages/guides/icons-b243e902de55e7e5.js"],"/guides/javascript":[e,s,c,t,"static/chunks/pages/guides/javascript-821c92654d4a595d.js"],"/guides/jest":[e,s,c,t,"static/chunks/pages/guides/jest-f84bf4bc452b79bb.js"],"/guides/next":[e,s,c,t,"static/chunks/pages/guides/next-dbcf95bfb4b37416.js"],"/guides/polymorphic":[e,s,c,t,"static/chunks/pages/guides/polymorphic-e53691c10b97c412.js"],"/guides/redwood":[e,s,c,t,"static/chunks/pages/guides/redwood-5680c88ae7a06454.js"],"/guides/remix":[e,s,c,t,"static/chunks/pages/guides/remix-fce83d84e5efb5d6.js"],"/guides/storybook":[e,s,c,t,"static/chunks/pages/guides/storybook-e6603ae52c14a20f.js"],"/guides/typescript":[e,s,c,t,"static/chunks/pages/guides/typescript-63ad0f44786e80b1.js"],"/guides/vite":[e,s,c,t,"static/chunks/pages/guides/vite-31aad38539bfbc1d.js"],"/guides/vitest":[e,s,c,t,"static/chunks/pages/guides/vitest-a7c5b095e1151767.js"],"/hooks/use-click-outside":[e,s,c,t,"static/chunks/pages/hooks/use-click-outside-49597ba1406b58ba.js"],"/hooks/use-clipboard":[e,s,c,t,"static/chunks/pages/hooks/use-clipboard-c4bb49e60f8b7a77.js"],"/hooks/use-color-scheme":[e,s,c,t,"static/chunks/pages/hooks/use-color-scheme-9094208553d29afc.js"],"/hooks/use-counter":[e,s,c,t,"static/chunks/pages/hooks/use-counter-67f9449c7585c2d7.js"],"/hooks/use-debounced-state":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-state-fbc6653006075557.js"],"/hooks/use-debounced-value":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-value-4f2d501142e43647.js"],"/hooks/use-did-update":[e,s,c,t,"static/chunks/pages/hooks/use-did-update-f889a9e73a9a992f.js"],"/hooks/use-disclosure":[e,s,c,t,"static/chunks/pages/hooks/use-disclosure-fbcd5b471d55ff03.js"],"/hooks/use-document-title":[e,s,c,t,"static/chunks/pages/hooks/use-document-title-3c54bc1eb0874027.js"],"/hooks/use-document-visibility":[e,s,c,t,"static/chunks/pages/hooks/use-document-visibility-d20c1ebc45dfc684.js"],"/hooks/use-element-size":[e,s,c,t,"static/chunks/pages/hooks/use-element-size-d8cca355fda1310e.js"],"/hooks/use-event-listener":[e,s,c,t,"static/chunks/pages/hooks/use-event-listener-208e8232510bacf5.js"],"/hooks/use-eye-dropper":[e,s,c,t,"static/chunks/pages/hooks/use-eye-dropper-f7c935fbd5e1e678.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-0344c84ea90525ff.js"],"/hooks/use-focus-return":[e,s,c,t,a,B,"static/chunks/pages/hooks/use-focus-return-a5b6e68b998a18e7.js"],"/hooks/use-focus-trap":[e,s,c,t,"static/chunks/pages/hooks/use-focus-trap-ea1622433e79f5a3.js"],"/hooks/use-focus-within":[e,s,c,t,"static/chunks/pages/hooks/use-focus-within-e39b96c4b8cf3f18.js"],"/hooks/use-force-update":[e,s,c,t,"static/chunks/pages/hooks/use-force-update-c2709ef2f652ac75.js"],"/hooks/use-fullscreen":[e,s,c,t,"static/chunks/pages/hooks/use-fullscreen-a134fc8e6b82cde6.js"],"/hooks/use-hash":[e,s,c,t,"static/chunks/pages/hooks/use-hash-48d9f9d5a4c1f61e.js"],"/hooks/use-headroom":[e,s,c,t,"static/chunks/pages/hooks/use-headroom-83d048bad31949ff.js"],"/hooks/use-hotkeys":[e,s,c,t,"static/chunks/pages/hooks/use-hotkeys-f05484a6de0b7c36.js"],"/hooks/use-hover":[e,s,c,t,"static/chunks/pages/hooks/use-hover-0af5bd606fd33323.js"],"/hooks/use-id":[e,s,c,t,"static/chunks/pages/hooks/use-id-fe715e80cdc5b468.js"],"/hooks/use-idle":[e,s,c,t,"static/chunks/pages/hooks/use-idle-07667120e7a3139b.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-5be3dfddf4e9aa8a.js"],"/hooks/use-input-state":[e,s,c,t,"static/chunks/pages/hooks/use-input-state-421daf552e0b1a15.js"],"/hooks/use-intersection":[e,s,c,t,"static/chunks/pages/hooks/use-intersection-fae939f849dafda2.js"],"/hooks/use-interval":[e,s,c,t,"static/chunks/pages/hooks/use-interval-715d203b7e4d11a5.js"],"/hooks/use-isomorphic-effect":[e,s,c,t,"static/chunks/pages/hooks/use-isomorphic-effect-7e6a7940addb35f8.js"],"/hooks/use-list-state":[e,s,c,t,"static/chunks/pages/hooks/use-list-state-25ba7a15d64e0d98.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-c6bbf635a28d38d6.js"],"/hooks/use-logger":[e,s,c,t,"static/chunks/pages/hooks/use-logger-8a26c5b7b3b14481.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-588723b78c0ec48b.js"],"/hooks/use-merged-ref":[e,s,c,t,"static/chunks/pages/hooks/use-merged-ref-2dbcff92ab8e5ac8.js"],"/hooks/use-mouse":[e,s,c,t,"static/chunks/pages/hooks/use-mouse-b3f655d496873a65.js"],"/hooks/use-move":[e,s,c,t,"static/chunks/pages/hooks/use-move-4e73658ac6f045d7.js"],"/hooks/use-network":[e,s,c,t,"static/chunks/pages/hooks/use-network-73b75269c6e49f17.js"],"/hooks/use-os":[e,s,c,t,"static/chunks/pages/hooks/use-os-374085e7320f7e5e.js"],"/hooks/use-page-leave":[e,s,c,t,"static/chunks/pages/hooks/use-page-leave-bfed27b89df2632b.js"],"/hooks/use-pagination":[e,s,c,t,F,"static/chunks/pages/hooks/use-pagination-c46bb527649290fe.js"],"/hooks/use-previous":[e,s,c,t,"static/chunks/pages/hooks/use-previous-3873d91458144d0b.js"],"/hooks/use-queue":[e,s,c,t,"static/chunks/pages/hooks/use-queue-ca7b6723f753b9f8.js"],"/hooks/use-reduced-motion":[e,s,c,t,"static/chunks/pages/hooks/use-reduced-motion-d8b0dc6b4a789d61.js"],"/hooks/use-resize-observer":[e,s,c,t,"static/chunks/pages/hooks/use-resize-observer-3fcf4c587249504a.js"],"/hooks/use-scroll-into-view":[e,s,c,t,"static/chunks/pages/hooks/use-scroll-into-view-ddff70811c871196.js"],"/hooks/use-set-state":[e,s,c,t,"static/chunks/pages/hooks/use-set-state-395fb56323ad2374.js"],"/hooks/use-shallow-effect":[e,s,c,t,"static/chunks/pages/hooks/use-shallow-effect-58b655764fc1df99.js"],"/hooks/use-text-selection":[e,s,c,t,"static/chunks/pages/hooks/use-text-selection-165a45bc91cac52c.js"],"/hooks/use-timeout":[e,s,c,t,"static/chunks/pages/hooks/use-timeout-fa6c7b7def1ed4dc.js"],"/hooks/use-toggle":[e,s,c,t,"static/chunks/pages/hooks/use-toggle-fc54c55b16dfc319.js"],"/hooks/use-uncontrolled":[e,s,c,t,"static/chunks/pages/hooks/use-uncontrolled-20fcb42a1d125171.js"],"/hooks/use-validated-state":[e,s,c,t,"static/chunks/pages/hooks/use-validated-state-72296ed923e73f41.js"],"/hooks/use-viewport-size":[e,s,c,t,"static/chunks/pages/hooks/use-viewport-size-0e49a972db3a0c17.js"],"/hooks/use-window-event":[e,s,c,t,"static/chunks/pages/hooks/use-window-event-faf2dd2ab2df5673.js"],"/hooks/use-window-scroll":[e,s,c,t,"static/chunks/pages/hooks/use-window-scroll-d6c99b5ed183efd6.js"],"/others/carousel":["static/chunks/pages/others/carousel-de329cd809e9727f.js"],"/others/code-highlight":["static/chunks/pages/others/code-highlight-d6e4130e4b409224.js"],"/others/dropzone":["static/chunks/pages/others/dropzone-411304b4ee5de020.js"],"/others/modals":["static/chunks/pages/others/modals-3e9b70444e45473b.js"],"/others/notifications":["static/chunks/pages/others/notifications-5247d64309993b34.js"],"/others/nprogress":["static/chunks/pages/others/nprogress-72d3312da6712525.js"],"/others/spotlight":["static/chunks/pages/others/spotlight-f94c9f5fe9d601f6.js"],"/others/tiptap":["static/chunks/pages/others/tiptap-9ac51696dc55c5f0.js"],"/overview":[e,s,c,t,A,"static/chunks/pages/overview-55326fc9e803b864.js"],"/styles/color-functions":[e,s,c,t,"static/chunks/pages/styles/color-functions-6b64b29d6aa32860.js"],"/styles/css-files-list":[e,s,c,t,"static/chunks/pages/styles/css-files-list-d5de90713b6c3f43.js"],"/styles/css-modules":[e,s,c,t,"static/chunks/pages/styles/css-modules-6e1580131b669b98.js"],"/styles/css-variables":[e,s,c,t,"static/chunks/pages/styles/css-variables-f0404c5e77870f1a.js"],"/styles/css-variables-list":[e,s,c,t,"static/chunks/pages/styles/css-variables-list-49991c7f75488d5f.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-48593c6d10689f1a.js"],"/styles/global-styles":[e,s,c,t,"static/chunks/pages/styles/global-styles-ac3b7bb077f06589.js"],"/styles/mantine-styles":[e,s,c,t,"static/chunks/pages/styles/mantine-styles-99c836ab6ecc3921.js"],"/styles/postcss-preset":[e,s,c,t,"static/chunks/pages/styles/postcss-preset-9beaff46cb70eaa4.js"],"/styles/rem":[e,s,c,t,"static/chunks/pages/styles/rem-d6310f8fca31b777.js"],"/styles/responsive":[e,s,c,t,"static/chunks/pages/styles/responsive-d6d7308551f2fbb3.js"],"/styles/rtl":[e,s,c,t,"static/chunks/pages/styles/rtl-4f626938fcb82bc0.js"],"/styles/sass":[e,s,c,t,"static/chunks/pages/styles/sass-48ec12d98cbd76ab.js"],"/styles/style":[e,s,c,t,"static/chunks/pages/styles/style-31d847e95e6e1f7d.js"],"/styles/style-props":[e,s,c,t,"static/chunks/pages/styles/style-props-c433b773e2d59f04.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-481e746658f0f4f3.js"],"/styles/styles-overview":[e,s,c,t,"static/chunks/pages/styles/styles-overview-6c54aa9d33a8b91e.js"],"/styles/styles-performance":[e,s,c,t,"static/chunks/pages/styles/styles-performance-5c5c8a77dd12a97b.js"],"/styles/unstyled":[e,s,c,t,"static/chunks/pages/styles/unstyled-e039d52c4b7450c9.js"],"/styles/vanilla-extract":[e,s,c,t,"static/chunks/pages/styles/vanilla-extract-7779eccb94fa7baa.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-573fd228176e6960.js"],"/submit-template":[e,s,c,t,"static/chunks/pages/submit-template-ba73112c0d956f96.js"],"/templates-usage":[e,s,c,t,"static/chunks/pages/templates-usage-0b156549a5031fb6.js"],"/theming/color-schemes":[e,s,c,t,"static/chunks/pages/theming/color-schemes-4e24ddfbb670092b.js"],"/theming/colors":[e,s,c,t,A,"static/chunks/pages/theming/colors-0d65120c52bb4edb.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-2d372fe859ada7cc.js"],"/theming/default-theme":[e,s,c,t,"static/chunks/pages/theming/default-theme-aaaadeb314135cfa.js"],"/theming/mantine-provider":[e,s,c,t,"static/chunks/pages/theming/mantine-provider-d01a1bd1cf921eb7.js"],"/theming/theme-object":[e,s,c,t,"static/chunks/pages/theming/theme-object-4986e61b260785aa.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-57cdf64d1486f5f6.js"],"/x/carousel":[e,d,s,c,t,x,"static/chunks/pages/x/carousel-8dd62f910ce2cea1.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-45e08bc9830d0016.js"],"/x/dropzone":[e,"static/chunks/92433-09f60b6f1ae6769e.js",s,c,t,"static/chunks/pages/x/dropzone-9c681738f72f5da0.js"],"/x/modals":[e,s,c,t,"static/chunks/pages/x/modals-409ab3a6208d5ac5.js"],"/x/notifications":[e,s,c,t,"static/chunks/pages/x/notifications-a7d97fa62ad29078.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-8f1a56b6b3c7fcb5.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-3b2465c15f247df6.js"],"/x/tiptap":[b,e,f,"static/chunks/68467-41a26330d5d288cd.js",s,c,t,j,"static/chunks/pages/x/tiptap-2a4bbe9b4b4cb618.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/7-1-0","/changelog/7-2-0","/changelog/7-3-0","/changelog/7-4-0","/changelog/7-5-0","/changelog/all-releases","/changelog/previous-versions","/charts/area-chart","/charts/bar-chart","/charts/donut-chart","/charts/getting-started","/charts/line-chart","/charts/pie-chart","/charts/sparkline","/colors-generator","/combobox","/contribute","/core/accordion","/core/action-icon","/core/affix","/core/alert","/core/anchor","/core/app-shell","/core/aspect-ratio","/core/autocomplete","/core/avatar","/core/background-image","/core/badge","/core/blockquote","/core/box","/core/breadcrumbs","/core/burger","/core/button","/core/card","/core/center","/core/checkbox","/core/chip","/core/close-button","/core/code","/core/collapse","/core/color-input","/core/color-picker","/core/color-swatch","/core/combobox","/core/container","/core/copy-button","/core/dialog","/core/divider","/core/drawer","/core/fieldset","/core/file-button","/core/file-input","/core/flex","/core/focus-trap","/core/grid","/core/group","/core/highlight","/core/hover-card","/core/image","/core/indicator","/core/input","/core/json-input","/core/kbd","/core/list","/core/loader","/core/loading-overlay","/core/mark","/core/menu","/core/modal","/core/multi-select","/core/native-select","/core/nav-link","/core/notification","/core/number-formatter","/core/number-input","/core/overlay","/core/pagination","/core/paper","/core/password-input","/core/pill","/core/pills-input","/core/pin-input","/core/popover","/core/portal","/core/progress","/core/radio","/core/rating","/core/ring-progress","/core/scroll-area","/core/segmented-control","/core/select","/core/simple-grid","/core/skeleton","/core/slider","/core/space","/core/spoiler","/core/stack","/core/stepper","/core/switch","/core/table","/core/tabs","/core/tags-input","/core/text","/core/text-input","/core/textarea","/core/theme-icon","/core/timeline","/core/title","/core/tooltip","/core/transition","/core/typography-styles-provider","/core/unstyled-button","/core/visually-hidden","/dates/calendar","/dates/date-input","/dates/date-picker","/dates/date-picker-input","/dates/date-time-picker","/dates/dates-provider","/dates/getting-started","/dates/month-picker","/dates/month-picker-input","/dates/time-input","/dates/year-picker","/dates/year-picker-input","/form/actions","/form/create-form-context","/form/errors","/form/get-input-props","/form/nested","/form/recipes","/form/schema-validation","/form/status","/form/use-form","/form/validation","/form/validators","/form/values","/getting-started","/guides/6x-to-7x","/guides/functions-reference","/guides/gatsby","/guides/icons","/guides/javascript","/guides/jest","/guides/next","/guides/polymorphic","/guides/redwood","/guides/remix","/guides/storybook","/guides/typescript","/guides/vite","/guides/vitest","/hooks/use-click-outside","/hooks/use-clipboard","/hooks/use-color-scheme","/hooks/use-counter","/hooks/use-debounced-state","/hooks/use-debounced-value","/hooks/use-did-update","/hooks/use-disclosure","/hooks/use-document-title","/hooks/use-document-visibility","/hooks/use-element-size","/hooks/use-event-listener","/hooks/use-eye-dropper","/hooks/use-favicon","/hooks/use-focus-return","/hooks/use-focus-trap","/hooks/use-focus-within","/hooks/use-force-update","/hooks/use-fullscreen","/hooks/use-hash","/hooks/use-headroom","/hooks/use-hotkeys","/hooks/use-hover","/hooks/use-id","/hooks/use-idle","/hooks/use-in-viewport","/hooks/use-input-state","/hooks/use-intersection","/hooks/use-interval","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mouse","/hooks/use-move","/hooks/use-network","/hooks/use-os","/hooks/use-page-leave","/hooks/use-pagination","/hooks/use-previous","/hooks/use-queue","/hooks/use-reduced-motion","/hooks/use-resize-observer","/hooks/use-scroll-into-view","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-text-selection","/hooks/use-timeout","/hooks/use-toggle","/hooks/use-uncontrolled","/hooks/use-validated-state","/hooks/use-viewport-size","/hooks/use-window-event","/hooks/use-window-scroll","/others/carousel","/others/code-highlight","/others/dropzone","/others/modals","/others/notifications","/others/nprogress","/others/spotlight","/others/tiptap","/overview","/styles/color-functions","/styles/css-files-list","/styles/css-modules","/styles/css-variables","/styles/css-variables-list","/styles/data-attributes","/styles/global-styles","/styles/mantine-styles","/styles/postcss-preset","/styles/rem","/styles/responsive","/styles/rtl","/styles/sass","/styles/style","/styles/style-props","/styles/styles-api","/styles/styles-overview","/styles/styles-performance","/styles/unstyled","/styles/vanilla-extract","/styles/variants-sizes","/submit-template","/templates-usage","/theming/color-schemes","/theming/colors","/theming/default-props","/theming/default-theme","/theming/mantine-provider","/theming/theme-object","/theming/typography","/x/carousel","/x/code-highlight","/x/dropzone","/x/modals","/x/notifications","/x/nprogress","/x/spotlight","/x/tiptap"]}}("static/chunks/15819-ad3eb6b78d60e69d.js","static/chunks/30370-10c8c516da39b646.js","static/css/4fb00bc4942b627e.css","static/chunks/2775-2ea0f641793ea829.js","static/chunks/56926-ec6442835c7b45a3.js","static/chunks/53993-8fd162567a74c8dc.js","static/chunks/45608-184bda86f884752d.js","static/chunks/62740-247bdd55fafa540d.js","static/chunks/60898-8f36b966eb3a4a0d.js","static/chunks/83014-8f606db885cd644f.js","static/chunks/290-aa1d21b0bfd7bfbb.js","static/chunks/60213-78d7ca0cc2a1d991.js","static/chunks/32857-eccf031004f1685f.js","static/chunks/7654-48e7ded97014ddbd.js","static/chunks/43638-de45a47cd9f25371.js","static/chunks/88656-84b6c736e8655a34.js","static/chunks/849baa33-7b9d6be4b2a832cc.js","static/chunks/89038-33ade06cb0ef37fd.js","static/chunks/53456-cb5d024861449dec.js","static/chunks/67415-9b578bfba9363405.js","static/chunks/18337-4bb6dbd117e2bf7f.js","static/chunks/16584-b3a2e7c0443f168f.js","static/chunks/17932-6bda9e56d81df990.js","static/chunks/16789-994b10e98d87670b.js","static/chunks/94014-3b522eb508e212a9.js","static/chunks/3242-17837c9b3bb07767.js","static/chunks/36107-8ed1e0779c4e3a4f.js","static/css/2dd7c036d69f6398.css","static/chunks/78833-9f5c877b1ea5ea96.js","static/chunks/91457-112c89f0927bd248.js","static/css/110ce04fea70f4a7.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file +self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,n,h,d,p,k,g,l,b,f,j,m,y,v,x,w,z,_,q,I,B,F,A){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[b,d,f,"static/chunks/86778-2e071df1a077b5a3.js",s,a,o,i,n,j,m,y,"static/css/5fff23d663829729.css","static/chunks/pages/index-e09e1ca5418f1f4e.js"],"/404":[e,s,c,t,"static/chunks/pages/404-5c8277b387e3c7bc.js"],"/_error":["static/chunks/pages/_error-3e5915e320e75bc6.js"],"/about":[e,s,c,t,"static/css/d9576cd74a6010ee.css","static/chunks/pages/about-cd98e1907e34d4cc.js"],"/app-shell":["static/css/dc549a3d8b9a0209.css","static/chunks/pages/app-shell-48a157135a395659.js"],"/changelog/7-0-0":[e,r,d,s,c,t,i,v,x,"static/chunks/pages/changelog/7-0-0-b8d90b39811a2c10.js"],"/changelog/7-1-0":[e,s,c,t,"static/chunks/pages/changelog/7-1-0-6598dbcf887f0cb5.js"],"/changelog/7-2-0":[e,r,s,c,t,a,p,"static/chunks/pages/changelog/7-2-0-d5481bae9cd15150.js"],"/changelog/7-3-0":[e,s,c,t,a,w,"static/chunks/pages/changelog/7-3-0-9bfc139eb682d2e4.js"],"/changelog/7-4-0":[e,r,u,h,z,s,c,t,a,k,_,"static/chunks/pages/changelog/7-4-0-6f1ed2b8ce135929.js"],"/changelog/7-5-0":[e,u,h,g,"static/chunks/85126-530cb27306745b0d.js",s,c,t,o,n,k,"static/chunks/pages/changelog/7-5-0-1e1579d3d43aeecd.js"],"/changelog/all-releases":[e,s,c,t,q,I,"static/chunks/pages/changelog/all-releases-0941bbc4fc1a3ff8.js"],"/changelog/previous-versions":[e,s,c,t,q,I,"static/chunks/pages/changelog/previous-versions-19b2af93c6839886.js"],"/charts/area-chart":[e,u,h,s,c,t,k,"static/chunks/pages/charts/area-chart-e497f885d4a1a2b2.js"],"/charts/bar-chart":[e,u,s,c,t,"static/chunks/pages/charts/bar-chart-fb5691e7aa75c9a3.js"],"/charts/donut-chart":[e,u,g,s,c,t,"static/chunks/pages/charts/donut-chart-d9bf788f9a049bea.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-17bd16b4234b60b6.js"],"/charts/line-chart":[e,u,z,s,c,t,"static/chunks/pages/charts/line-chart-07de1243534e70b5.js"],"/charts/pie-chart":[e,u,g,s,c,t,"static/chunks/pages/charts/pie-chart-afc8e4b8c4363977.js"],"/charts/sparkline":[e,u,h,s,c,t,"static/chunks/pages/charts/sparkline-289f31eef5b090ba.js"],"/colors-generator":["static/chunks/90973-b1d2e8ce0943b81d.js","static/css/81916ff62eb6a146.css","static/chunks/pages/colors-generator-a2bd5d8667f3bc87.js"],"/combobox":[i,"static/css/b09a4561d0889a8b.css","static/chunks/pages/combobox-bb81f0cb5a2d4c65.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-f1c9b13802b2fc10.js"],"/core/accordion":[e,s,c,t,y,"static/chunks/pages/core/accordion-4450dc329c1d0417.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-4bbba6a1b3491103.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-c6dbbfafc3c36abb.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-ffde401369212b3a.js"],"/core/anchor":[e,s,c,t,"static/chunks/pages/core/anchor-acf4229b83711631.js"],"/core/app-shell":[e,s,c,t,"static/chunks/pages/core/app-shell-40f741489d2f9b2c.js"],"/core/aspect-ratio":[e,s,c,t,"static/chunks/pages/core/aspect-ratio-275a8a6d288a9dd2.js"],"/core/autocomplete":[e,s,c,t,i,"static/chunks/pages/core/autocomplete-63702baa5bf6e7ab.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-32d5516fb3ef287e.js"],"/core/background-image":[e,s,c,t,"static/chunks/pages/core/background-image-44900dcb55178b2b.js"],"/core/badge":[e,s,c,t,"static/chunks/pages/core/badge-16ed42cff309ced8.js"],"/core/blockquote":[e,s,c,t,"static/chunks/pages/core/blockquote-a2407b68f6077ab6.js"],"/core/box":[e,s,c,t,"static/chunks/pages/core/box-e43744a200b97ed9.js"],"/core/breadcrumbs":[e,s,c,t,"static/chunks/pages/core/breadcrumbs-f4b1866d53a08b3a.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-e8eacbbe6c6d1868.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-f6faa498da78b211.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-9e54094104c68351.js"],"/core/center":[e,s,c,t,"static/chunks/pages/core/center-56bb820cf2d23360.js"],"/core/checkbox":[e,s,c,t,"static/chunks/pages/core/checkbox-2803466c77dc08af.js"],"/core/chip":[e,s,c,t,"static/chunks/pages/core/chip-a10e52cf87e82716.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-e52dee6713fd34cb.js"],"/core/code":[e,s,c,t,"static/chunks/pages/core/code-54e0a16c08439d7e.js"],"/core/collapse":[e,s,c,t,"static/chunks/pages/core/collapse-cef9cf6ddc1ccf79.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-b62db360b3626728.js"],"/core/color-picker":[e,s,c,t,"static/chunks/pages/core/color-picker-19297a681de0b4ff.js"],"/core/color-swatch":[e,s,c,t,"static/chunks/pages/core/color-swatch-bea54cb46ce30aa2.js"],"/core/combobox":[e,s,c,t,i,"static/chunks/pages/core/combobox-fbf2458276a5ff9b.js"],"/core/container":[e,s,c,t,"static/chunks/pages/core/container-1afef515bd12aab6.js"],"/core/copy-button":[e,s,c,t,"static/chunks/pages/core/copy-button-0e92bd6d90c82c7f.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-9cbefe7c061258a9.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-11907bfc3d36c54b.js"],"/core/drawer":[e,s,c,t,a,w,"static/chunks/pages/core/drawer-c020fc7cd9ee454b.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-cb66b8b6d7acd669.js"],"/core/file-button":[e,s,c,t,"static/chunks/pages/core/file-button-6d5f9c7cd3425d44.js"],"/core/file-input":[e,s,c,t,"static/chunks/pages/core/file-input-fe31e7a79c4f35bc.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-9caf598cc19cd997.js"],"/core/focus-trap":[e,s,c,t,"static/chunks/pages/core/focus-trap-2af9ec435f0b46b9.js"],"/core/grid":[e,s,c,t,"static/chunks/pages/core/grid-cef669a420262d12.js"],"/core/group":[e,s,c,t,"static/chunks/pages/core/group-f52c0563658e18d8.js"],"/core/highlight":[e,s,c,t,"static/chunks/pages/core/highlight-847b457dfd1cb3a7.js"],"/core/hover-card":[e,s,c,t,"static/chunks/pages/core/hover-card-50c32c2b1f0cb724.js"],"/core/image":[e,s,c,t,"static/chunks/pages/core/image-8aeeccf2b1b5b237.js"],"/core/indicator":[e,s,c,t,"static/chunks/pages/core/indicator-9ccd6b7bdc41f475.js"],"/core/input":[e,"static/chunks/45723-ebd4e4273f66de80.js",s,c,t,"static/chunks/pages/core/input-afd226b7c6c93574.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-f983768d528e2e10.js"],"/core/kbd":[e,s,c,t,"static/chunks/pages/core/kbd-0c4f9a0a8ee5d364.js"],"/core/list":[e,s,c,t,"static/chunks/pages/core/list-55d6a4b2965b2ae4.js"],"/core/loader":[e,s,c,t,a,p,"static/chunks/pages/core/loader-0f6afdec50cf3db4.js"],"/core/loading-overlay":[e,s,c,t,a,p,"static/chunks/pages/core/loading-overlay-f2f9ddea65d74e5f.js"],"/core/mark":[e,s,c,t,"static/chunks/pages/core/mark-76583603ed2e7331.js"],"/core/menu":[e,s,c,t,"static/chunks/pages/core/menu-a268b8158aa95ed9.js"],"/core/modal":[e,s,c,t,a,B,"static/chunks/pages/core/modal-995f8e7c0280fe89.js"],"/core/multi-select":[e,s,c,t,i,m,"static/chunks/pages/core/multi-select-b73ece31b9f2552b.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-4e93a4477b74f1d4.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-5edfad7effb3bc57.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-ce46f458e485af2a.js"],"/core/number-formatter":[e,r,s,c,t,"static/chunks/pages/core/number-formatter-d719dc8265ef18f6.js"],"/core/number-input":[e,r,s,c,t,"static/chunks/pages/core/number-input-f0917f4b9f4b6748.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-1b9af959810144b3.js"],"/core/pagination":[e,s,c,t,F,"static/chunks/pages/core/pagination-d07a5dcbec47242c.js"],"/core/paper":[e,s,c,t,"static/chunks/pages/core/paper-e70efb6ff7d3d953.js"],"/core/password-input":[e,s,c,t,"static/chunks/pages/core/password-input-4791901047a0e699.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-1eccb6bdc210f1f7.js"],"/core/pills-input":[e,s,c,t,i,"static/chunks/pages/core/pills-input-f020963c242e87dc.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-01e47330c7f82dfe.js"],"/core/popover":[e,s,c,t,o,i,n,"static/chunks/pages/core/popover-4d9f7c829601baab.js"],"/core/portal":[e,s,c,t,"static/chunks/pages/core/portal-7dcb8cda8c40dee5.js"],"/core/progress":[e,s,c,t,"static/chunks/pages/core/progress-ce8a3529b3e2ee95.js"],"/core/radio":[e,s,c,t,"static/chunks/pages/core/radio-04c7827a139303ea.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-c6afb2b25e9baa36.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-00fcfde862bd25f0.js"],"/core/scroll-area":[e,s,c,t,"static/chunks/pages/core/scroll-area-4ff13d75475121f6.js"],"/core/segmented-control":[e,s,c,t,"static/chunks/pages/core/segmented-control-2130da026d873b59.js"],"/core/select":[e,s,c,t,i,"static/chunks/pages/core/select-63ed0abf0e7244f7.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-692285334e076dd1.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-6265974676ade76c.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-73258b44cddd2e3a.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-b7b422cb13bff5ab.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-f12a11fd11e5258b.js"],"/core/stack":[e,s,c,t,"static/chunks/pages/core/stack-61ce899dc7b07eeb.js"],"/core/stepper":[e,s,c,t,"static/chunks/pages/core/stepper-b3dd22ccb3f17fc3.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-d15d4d4b55ffb017.js"],"/core/table":[e,s,c,t,"static/chunks/pages/core/table-7938a2b585170ce2.js"],"/core/tabs":[e,s,c,t,"static/chunks/pages/core/tabs-7dd61c10d6ffd063.js"],"/core/tags-input":[e,s,c,t,i,v,"static/chunks/pages/core/tags-input-82ce39ec93a8d93d.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-7ef65b745fda0323.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-809213133b3cce4c.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-dc6b36da99ed9821.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-8282f95357163937.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-699fbbe3d2186135.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-01c66a6cf9f61a54.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-f50a86baf95dcfb0.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-beea2b362ae349d6.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-7f671d2746be516c.js"],"/core/unstyled-button":[e,s,c,t,"static/chunks/pages/core/unstyled-button-9229ddef5eef9aa1.js"],"/core/visually-hidden":[e,s,c,t,"static/chunks/pages/core/visually-hidden-1de1135b5c04acc6.js"],"/dates/calendar":[e,s,c,t,o,"static/chunks/pages/dates/calendar-c0f3e4645e0bb402.js"],"/dates/date-input":[e,s,c,t,o,"static/chunks/pages/dates/date-input-958f70ebc12d68a7.js"],"/dates/date-picker":[e,s,c,t,o,l,"static/chunks/pages/dates/date-picker-f1900148cd779432.js"],"/dates/date-picker-input":[e,s,c,t,o,n,"static/chunks/pages/dates/date-picker-input-e9383d5dc2270983.js"],"/dates/date-time-picker":[e,s,c,t,o,"static/chunks/pages/dates/date-time-picker-cc50b2856b54e4f3.js"],"/dates/dates-provider":[e,s,c,t,o,n,"static/chunks/pages/dates/dates-provider-b7d60fef0c6f18e5.js"],"/dates/getting-started":[e,s,c,t,o,n,"static/chunks/pages/dates/getting-started-2d5c5ae490a42dfd.js"],"/dates/month-picker":[e,s,c,t,o,l,"static/chunks/pages/dates/month-picker-2ceec3c2fc399bbd.js"],"/dates/month-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/month-picker-input-1450be9fe57fe9bf.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-d09096f14ccac23b.js"],"/dates/year-picker":[e,s,c,t,o,l,"static/chunks/pages/dates/year-picker-73b88cf8e8f99fb5.js"],"/dates/year-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/year-picker-input-4f61f28de1773bf9.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-86f2b5675b1b9293.js"],"/form/create-form-context":[e,s,c,t,"static/chunks/pages/form/create-form-context-d3e9858b841665aa.js"],"/form/errors":[e,s,c,t,"static/chunks/pages/form/errors-39cbfcc4453d4184.js"],"/form/get-input-props":[e,r,s,c,t,a,_,"static/chunks/pages/form/get-input-props-7414c69ca74388ac.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-80a5ce59f3f12d09.js"],"/form/recipes":["static/chunks/3c425cc6-59b06626c812151b.js",e,"static/chunks/4038-2723607d463a3d93.js",s,c,t,a,"static/chunks/pages/form/recipes-35ebf370f505c76f.js"],"/form/schema-validation":[e,s,c,t,"static/chunks/pages/form/schema-validation-3f6f1f43f7f02d95.js"],"/form/status":[e,s,c,t,a,"static/chunks/pages/form/status-2f13481afa4052a9.js"],"/form/use-form":[e,s,c,t,a,"static/chunks/pages/form/use-form-1b45c6fb84634b34.js"],"/form/validation":[e,r,s,c,t,a,"static/chunks/pages/form/validation-596f58b7514087b1.js"],"/form/validators":[e,r,s,c,t,a,"static/chunks/pages/form/validators-e2c29565f9be4a88.js"],"/form/values":[e,r,s,c,t,a,"static/chunks/pages/form/values-9ebbba82ffc5ab5b.js"],"/getting-started":[e,s,c,t,"static/css/61fea03958314ae0.css","static/chunks/pages/getting-started-c1e1f821ebfd50eb.js"],"/guides/6x-to-7x":[e,s,c,t,"static/chunks/pages/guides/6x-to-7x-0ea37edf7ec3f187.js"],"/guides/functions-reference":[e,s,c,t,"static/chunks/pages/guides/functions-reference-18ac6ddbf877653b.js"],"/guides/gatsby":[e,s,c,t,"static/chunks/pages/guides/gatsby-818f9f208f1ae682.js"],"/guides/icons":[e,s,c,t,"static/chunks/pages/guides/icons-b243e902de55e7e5.js"],"/guides/javascript":[e,s,c,t,"static/chunks/pages/guides/javascript-821c92654d4a595d.js"],"/guides/jest":[e,s,c,t,"static/chunks/pages/guides/jest-f84bf4bc452b79bb.js"],"/guides/next":[e,s,c,t,"static/chunks/pages/guides/next-dbcf95bfb4b37416.js"],"/guides/polymorphic":[e,s,c,t,"static/chunks/pages/guides/polymorphic-e53691c10b97c412.js"],"/guides/redwood":[e,s,c,t,"static/chunks/pages/guides/redwood-5680c88ae7a06454.js"],"/guides/remix":[e,s,c,t,"static/chunks/pages/guides/remix-fce83d84e5efb5d6.js"],"/guides/storybook":[e,s,c,t,"static/chunks/pages/guides/storybook-e6603ae52c14a20f.js"],"/guides/typescript":[e,s,c,t,"static/chunks/pages/guides/typescript-63ad0f44786e80b1.js"],"/guides/vite":[e,s,c,t,"static/chunks/pages/guides/vite-31aad38539bfbc1d.js"],"/guides/vitest":[e,s,c,t,"static/chunks/pages/guides/vitest-a7c5b095e1151767.js"],"/hooks/use-click-outside":[e,s,c,t,"static/chunks/pages/hooks/use-click-outside-49597ba1406b58ba.js"],"/hooks/use-clipboard":[e,s,c,t,"static/chunks/pages/hooks/use-clipboard-c4bb49e60f8b7a77.js"],"/hooks/use-color-scheme":[e,s,c,t,"static/chunks/pages/hooks/use-color-scheme-9094208553d29afc.js"],"/hooks/use-counter":[e,s,c,t,"static/chunks/pages/hooks/use-counter-67f9449c7585c2d7.js"],"/hooks/use-debounced-state":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-state-fbc6653006075557.js"],"/hooks/use-debounced-value":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-value-4f2d501142e43647.js"],"/hooks/use-did-update":[e,s,c,t,"static/chunks/pages/hooks/use-did-update-f889a9e73a9a992f.js"],"/hooks/use-disclosure":[e,s,c,t,"static/chunks/pages/hooks/use-disclosure-fbcd5b471d55ff03.js"],"/hooks/use-document-title":[e,s,c,t,"static/chunks/pages/hooks/use-document-title-3c54bc1eb0874027.js"],"/hooks/use-document-visibility":[e,s,c,t,"static/chunks/pages/hooks/use-document-visibility-d20c1ebc45dfc684.js"],"/hooks/use-element-size":[e,s,c,t,"static/chunks/pages/hooks/use-element-size-d8cca355fda1310e.js"],"/hooks/use-event-listener":[e,s,c,t,"static/chunks/pages/hooks/use-event-listener-208e8232510bacf5.js"],"/hooks/use-eye-dropper":[e,s,c,t,"static/chunks/pages/hooks/use-eye-dropper-f7c935fbd5e1e678.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-0344c84ea90525ff.js"],"/hooks/use-focus-return":[e,s,c,t,a,B,"static/chunks/pages/hooks/use-focus-return-a5b6e68b998a18e7.js"],"/hooks/use-focus-trap":[e,s,c,t,"static/chunks/pages/hooks/use-focus-trap-ea1622433e79f5a3.js"],"/hooks/use-focus-within":[e,s,c,t,"static/chunks/pages/hooks/use-focus-within-e39b96c4b8cf3f18.js"],"/hooks/use-force-update":[e,s,c,t,"static/chunks/pages/hooks/use-force-update-c2709ef2f652ac75.js"],"/hooks/use-fullscreen":[e,s,c,t,"static/chunks/pages/hooks/use-fullscreen-a134fc8e6b82cde6.js"],"/hooks/use-hash":[e,s,c,t,"static/chunks/pages/hooks/use-hash-48d9f9d5a4c1f61e.js"],"/hooks/use-headroom":[e,s,c,t,"static/chunks/pages/hooks/use-headroom-83d048bad31949ff.js"],"/hooks/use-hotkeys":[e,s,c,t,"static/chunks/pages/hooks/use-hotkeys-f05484a6de0b7c36.js"],"/hooks/use-hover":[e,s,c,t,"static/chunks/pages/hooks/use-hover-0af5bd606fd33323.js"],"/hooks/use-id":[e,s,c,t,"static/chunks/pages/hooks/use-id-fe715e80cdc5b468.js"],"/hooks/use-idle":[e,s,c,t,"static/chunks/pages/hooks/use-idle-07667120e7a3139b.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-5be3dfddf4e9aa8a.js"],"/hooks/use-input-state":[e,s,c,t,"static/chunks/pages/hooks/use-input-state-421daf552e0b1a15.js"],"/hooks/use-intersection":[e,s,c,t,"static/chunks/pages/hooks/use-intersection-fae939f849dafda2.js"],"/hooks/use-interval":[e,s,c,t,"static/chunks/pages/hooks/use-interval-715d203b7e4d11a5.js"],"/hooks/use-isomorphic-effect":[e,s,c,t,"static/chunks/pages/hooks/use-isomorphic-effect-7e6a7940addb35f8.js"],"/hooks/use-list-state":[e,s,c,t,"static/chunks/pages/hooks/use-list-state-25ba7a15d64e0d98.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-c6bbf635a28d38d6.js"],"/hooks/use-logger":[e,s,c,t,"static/chunks/pages/hooks/use-logger-8a26c5b7b3b14481.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-588723b78c0ec48b.js"],"/hooks/use-merged-ref":[e,s,c,t,"static/chunks/pages/hooks/use-merged-ref-2dbcff92ab8e5ac8.js"],"/hooks/use-mouse":[e,s,c,t,"static/chunks/pages/hooks/use-mouse-b3f655d496873a65.js"],"/hooks/use-move":[e,s,c,t,"static/chunks/pages/hooks/use-move-4e73658ac6f045d7.js"],"/hooks/use-network":[e,s,c,t,"static/chunks/pages/hooks/use-network-73b75269c6e49f17.js"],"/hooks/use-os":[e,s,c,t,"static/chunks/pages/hooks/use-os-374085e7320f7e5e.js"],"/hooks/use-page-leave":[e,s,c,t,"static/chunks/pages/hooks/use-page-leave-bfed27b89df2632b.js"],"/hooks/use-pagination":[e,s,c,t,F,"static/chunks/pages/hooks/use-pagination-c46bb527649290fe.js"],"/hooks/use-previous":[e,s,c,t,"static/chunks/pages/hooks/use-previous-3873d91458144d0b.js"],"/hooks/use-queue":[e,s,c,t,"static/chunks/pages/hooks/use-queue-ca7b6723f753b9f8.js"],"/hooks/use-reduced-motion":[e,s,c,t,"static/chunks/pages/hooks/use-reduced-motion-d8b0dc6b4a789d61.js"],"/hooks/use-resize-observer":[e,s,c,t,"static/chunks/pages/hooks/use-resize-observer-3fcf4c587249504a.js"],"/hooks/use-scroll-into-view":[e,s,c,t,"static/chunks/pages/hooks/use-scroll-into-view-ddff70811c871196.js"],"/hooks/use-set-state":[e,s,c,t,"static/chunks/pages/hooks/use-set-state-395fb56323ad2374.js"],"/hooks/use-shallow-effect":[e,s,c,t,"static/chunks/pages/hooks/use-shallow-effect-58b655764fc1df99.js"],"/hooks/use-text-selection":[e,s,c,t,"static/chunks/pages/hooks/use-text-selection-165a45bc91cac52c.js"],"/hooks/use-timeout":[e,s,c,t,"static/chunks/pages/hooks/use-timeout-fa6c7b7def1ed4dc.js"],"/hooks/use-toggle":[e,s,c,t,"static/chunks/pages/hooks/use-toggle-fc54c55b16dfc319.js"],"/hooks/use-uncontrolled":[e,s,c,t,"static/chunks/pages/hooks/use-uncontrolled-20fcb42a1d125171.js"],"/hooks/use-validated-state":[e,s,c,t,"static/chunks/pages/hooks/use-validated-state-72296ed923e73f41.js"],"/hooks/use-viewport-size":[e,s,c,t,"static/chunks/pages/hooks/use-viewport-size-0e49a972db3a0c17.js"],"/hooks/use-window-event":[e,s,c,t,"static/chunks/pages/hooks/use-window-event-faf2dd2ab2df5673.js"],"/hooks/use-window-scroll":[e,s,c,t,"static/chunks/pages/hooks/use-window-scroll-d6c99b5ed183efd6.js"],"/others/carousel":["static/chunks/pages/others/carousel-de329cd809e9727f.js"],"/others/code-highlight":["static/chunks/pages/others/code-highlight-d6e4130e4b409224.js"],"/others/dropzone":["static/chunks/pages/others/dropzone-411304b4ee5de020.js"],"/others/modals":["static/chunks/pages/others/modals-3e9b70444e45473b.js"],"/others/notifications":["static/chunks/pages/others/notifications-5247d64309993b34.js"],"/others/nprogress":["static/chunks/pages/others/nprogress-72d3312da6712525.js"],"/others/spotlight":["static/chunks/pages/others/spotlight-f94c9f5fe9d601f6.js"],"/others/tiptap":["static/chunks/pages/others/tiptap-9ac51696dc55c5f0.js"],"/overview":[e,s,c,t,A,"static/chunks/pages/overview-55326fc9e803b864.js"],"/styles/color-functions":[e,s,c,t,"static/chunks/pages/styles/color-functions-6b64b29d6aa32860.js"],"/styles/css-files-list":[e,s,c,t,"static/chunks/pages/styles/css-files-list-42a64287493de104.js"],"/styles/css-modules":[e,s,c,t,"static/chunks/pages/styles/css-modules-6e1580131b669b98.js"],"/styles/css-variables":[e,s,c,t,"static/chunks/pages/styles/css-variables-f0404c5e77870f1a.js"],"/styles/css-variables-list":[e,s,c,t,"static/chunks/pages/styles/css-variables-list-49991c7f75488d5f.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-48593c6d10689f1a.js"],"/styles/global-styles":[e,s,c,t,"static/chunks/pages/styles/global-styles-ac3b7bb077f06589.js"],"/styles/mantine-styles":[e,s,c,t,"static/chunks/pages/styles/mantine-styles-99c836ab6ecc3921.js"],"/styles/postcss-preset":[e,s,c,t,"static/chunks/pages/styles/postcss-preset-9beaff46cb70eaa4.js"],"/styles/rem":[e,s,c,t,"static/chunks/pages/styles/rem-d6310f8fca31b777.js"],"/styles/responsive":[e,s,c,t,"static/chunks/pages/styles/responsive-d6d7308551f2fbb3.js"],"/styles/rtl":[e,s,c,t,"static/chunks/pages/styles/rtl-4f626938fcb82bc0.js"],"/styles/sass":[e,s,c,t,"static/chunks/pages/styles/sass-48ec12d98cbd76ab.js"],"/styles/style":[e,s,c,t,"static/chunks/pages/styles/style-31d847e95e6e1f7d.js"],"/styles/style-props":[e,s,c,t,"static/chunks/pages/styles/style-props-c433b773e2d59f04.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-481e746658f0f4f3.js"],"/styles/styles-overview":[e,s,c,t,"static/chunks/pages/styles/styles-overview-6c54aa9d33a8b91e.js"],"/styles/styles-performance":[e,s,c,t,"static/chunks/pages/styles/styles-performance-5c5c8a77dd12a97b.js"],"/styles/unstyled":[e,s,c,t,"static/chunks/pages/styles/unstyled-e039d52c4b7450c9.js"],"/styles/vanilla-extract":[e,s,c,t,"static/chunks/pages/styles/vanilla-extract-7779eccb94fa7baa.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-573fd228176e6960.js"],"/submit-template":[e,s,c,t,"static/chunks/pages/submit-template-ba73112c0d956f96.js"],"/templates-usage":[e,s,c,t,"static/chunks/pages/templates-usage-0b156549a5031fb6.js"],"/theming/color-schemes":[e,s,c,t,"static/chunks/pages/theming/color-schemes-4e24ddfbb670092b.js"],"/theming/colors":[e,s,c,t,A,"static/chunks/pages/theming/colors-0d65120c52bb4edb.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-2d372fe859ada7cc.js"],"/theming/default-theme":[e,s,c,t,"static/chunks/pages/theming/default-theme-aaaadeb314135cfa.js"],"/theming/mantine-provider":[e,s,c,t,"static/chunks/pages/theming/mantine-provider-d01a1bd1cf921eb7.js"],"/theming/theme-object":[e,s,c,t,"static/chunks/pages/theming/theme-object-4986e61b260785aa.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-57cdf64d1486f5f6.js"],"/x/carousel":[e,d,s,c,t,x,"static/chunks/pages/x/carousel-8dd62f910ce2cea1.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-3367d2f597cfbd2c.js"],"/x/dropzone":[e,"static/chunks/92433-09f60b6f1ae6769e.js",s,c,t,"static/chunks/pages/x/dropzone-9c681738f72f5da0.js"],"/x/modals":[e,s,c,t,"static/chunks/pages/x/modals-409ab3a6208d5ac5.js"],"/x/notifications":[e,s,c,t,"static/chunks/pages/x/notifications-a7d97fa62ad29078.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-2cebdb3a941d12df.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-3b2465c15f247df6.js"],"/x/tiptap":[b,e,f,"static/chunks/68467-41a26330d5d288cd.js",s,c,t,j,"static/chunks/pages/x/tiptap-2a4bbe9b4b4cb618.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/7-1-0","/changelog/7-2-0","/changelog/7-3-0","/changelog/7-4-0","/changelog/7-5-0","/changelog/all-releases","/changelog/previous-versions","/charts/area-chart","/charts/bar-chart","/charts/donut-chart","/charts/getting-started","/charts/line-chart","/charts/pie-chart","/charts/sparkline","/colors-generator","/combobox","/contribute","/core/accordion","/core/action-icon","/core/affix","/core/alert","/core/anchor","/core/app-shell","/core/aspect-ratio","/core/autocomplete","/core/avatar","/core/background-image","/core/badge","/core/blockquote","/core/box","/core/breadcrumbs","/core/burger","/core/button","/core/card","/core/center","/core/checkbox","/core/chip","/core/close-button","/core/code","/core/collapse","/core/color-input","/core/color-picker","/core/color-swatch","/core/combobox","/core/container","/core/copy-button","/core/dialog","/core/divider","/core/drawer","/core/fieldset","/core/file-button","/core/file-input","/core/flex","/core/focus-trap","/core/grid","/core/group","/core/highlight","/core/hover-card","/core/image","/core/indicator","/core/input","/core/json-input","/core/kbd","/core/list","/core/loader","/core/loading-overlay","/core/mark","/core/menu","/core/modal","/core/multi-select","/core/native-select","/core/nav-link","/core/notification","/core/number-formatter","/core/number-input","/core/overlay","/core/pagination","/core/paper","/core/password-input","/core/pill","/core/pills-input","/core/pin-input","/core/popover","/core/portal","/core/progress","/core/radio","/core/rating","/core/ring-progress","/core/scroll-area","/core/segmented-control","/core/select","/core/simple-grid","/core/skeleton","/core/slider","/core/space","/core/spoiler","/core/stack","/core/stepper","/core/switch","/core/table","/core/tabs","/core/tags-input","/core/text","/core/text-input","/core/textarea","/core/theme-icon","/core/timeline","/core/title","/core/tooltip","/core/transition","/core/typography-styles-provider","/core/unstyled-button","/core/visually-hidden","/dates/calendar","/dates/date-input","/dates/date-picker","/dates/date-picker-input","/dates/date-time-picker","/dates/dates-provider","/dates/getting-started","/dates/month-picker","/dates/month-picker-input","/dates/time-input","/dates/year-picker","/dates/year-picker-input","/form/actions","/form/create-form-context","/form/errors","/form/get-input-props","/form/nested","/form/recipes","/form/schema-validation","/form/status","/form/use-form","/form/validation","/form/validators","/form/values","/getting-started","/guides/6x-to-7x","/guides/functions-reference","/guides/gatsby","/guides/icons","/guides/javascript","/guides/jest","/guides/next","/guides/polymorphic","/guides/redwood","/guides/remix","/guides/storybook","/guides/typescript","/guides/vite","/guides/vitest","/hooks/use-click-outside","/hooks/use-clipboard","/hooks/use-color-scheme","/hooks/use-counter","/hooks/use-debounced-state","/hooks/use-debounced-value","/hooks/use-did-update","/hooks/use-disclosure","/hooks/use-document-title","/hooks/use-document-visibility","/hooks/use-element-size","/hooks/use-event-listener","/hooks/use-eye-dropper","/hooks/use-favicon","/hooks/use-focus-return","/hooks/use-focus-trap","/hooks/use-focus-within","/hooks/use-force-update","/hooks/use-fullscreen","/hooks/use-hash","/hooks/use-headroom","/hooks/use-hotkeys","/hooks/use-hover","/hooks/use-id","/hooks/use-idle","/hooks/use-in-viewport","/hooks/use-input-state","/hooks/use-intersection","/hooks/use-interval","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mouse","/hooks/use-move","/hooks/use-network","/hooks/use-os","/hooks/use-page-leave","/hooks/use-pagination","/hooks/use-previous","/hooks/use-queue","/hooks/use-reduced-motion","/hooks/use-resize-observer","/hooks/use-scroll-into-view","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-text-selection","/hooks/use-timeout","/hooks/use-toggle","/hooks/use-uncontrolled","/hooks/use-validated-state","/hooks/use-viewport-size","/hooks/use-window-event","/hooks/use-window-scroll","/others/carousel","/others/code-highlight","/others/dropzone","/others/modals","/others/notifications","/others/nprogress","/others/spotlight","/others/tiptap","/overview","/styles/color-functions","/styles/css-files-list","/styles/css-modules","/styles/css-variables","/styles/css-variables-list","/styles/data-attributes","/styles/global-styles","/styles/mantine-styles","/styles/postcss-preset","/styles/rem","/styles/responsive","/styles/rtl","/styles/sass","/styles/style","/styles/style-props","/styles/styles-api","/styles/styles-overview","/styles/styles-performance","/styles/unstyled","/styles/vanilla-extract","/styles/variants-sizes","/submit-template","/templates-usage","/theming/color-schemes","/theming/colors","/theming/default-props","/theming/default-theme","/theming/mantine-provider","/theming/theme-object","/theming/typography","/x/carousel","/x/code-highlight","/x/dropzone","/x/modals","/x/notifications","/x/nprogress","/x/spotlight","/x/tiptap"]}}("static/chunks/15819-612d368fa26fd27f.js","static/chunks/30370-10c8c516da39b646.js","static/css/4fb00bc4942b627e.css","static/chunks/2775-325f81d8102d098b.js","static/chunks/56926-e7ca5b6c5e406f6d.js","static/chunks/53993-8fd162567a74c8dc.js","static/chunks/45608-184bda86f884752d.js","static/chunks/62740-247bdd55fafa540d.js","static/chunks/60898-8f36b966eb3a4a0d.js","static/chunks/83014-8f606db885cd644f.js","static/chunks/290-aa1d21b0bfd7bfbb.js","static/chunks/60213-78d7ca0cc2a1d991.js","static/chunks/32857-eccf031004f1685f.js","static/chunks/7654-48e7ded97014ddbd.js","static/chunks/43638-de45a47cd9f25371.js","static/chunks/88656-84b6c736e8655a34.js","static/chunks/849baa33-7b9d6be4b2a832cc.js","static/chunks/89038-33ade06cb0ef37fd.js","static/chunks/53456-cb5d024861449dec.js","static/chunks/67415-0d5f8623d44fd2ba.js","static/chunks/18337-4bb6dbd117e2bf7f.js","static/chunks/16584-a083ad2322f01ac4.js","static/chunks/17932-cc2fc8a61a7637aa.js","static/chunks/16789-994b10e98d87670b.js","static/chunks/94014-3b522eb508e212a9.js","static/chunks/3242-17837c9b3bb07767.js","static/chunks/36107-8ed1e0779c4e3a4f.js","static/css/2dd7c036d69f6398.css","static/chunks/78833-9f5c877b1ea5ea96.js","static/chunks/91457-215dacfcdbcff791.js","static/css/110ce04fea70f4a7.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/qjvbTAlABrUHG552ffCT8/_ssgManifest.js b/_next/static/lwA9LH91zctptI17KsMMh/_ssgManifest.js similarity index 100% rename from _next/static/qjvbTAlABrUHG552ffCT8/_ssgManifest.js rename to _next/static/lwA9LH91zctptI17KsMMh/_ssgManifest.js diff --git a/about/index.html b/about/index.html index 879934aa1c2..a3ae5f4cdcf 100644 --- a/about/index.html +++ b/about/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

About Mantine

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

About Mantine

Mantine is a React components library focused on providing great user and developer experience. Mantine development was started in January 2021 and the 1.0 version was released on May 3rd, 2021, and since then, more than 200 releases have been published.

@@ -70,4 +70,4 @@ function Demo() { return <MantineLogo color="blue" />; -}
Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file +}
Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/app-shell/index.html b/app-shell/index.html index b08359d3638..e99a27af537 100644 --- a/app-shell/index.html +++ b/app-shell/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
\ No newline at end of file +
\ No newline at end of file diff --git a/changelog/7-0-0/index.html b/changelog/7-0-0/index.html index 7f77a19d6ff..dbe73f0aff7 100644 --- a/changelog/7-0-0/index.html +++ b/changelog/7-0-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Version v7.0.0

Release date

September 18th, 2023

Source code

Release on GitHub

Migration to native CSS

+
Welcome to Mantine, React components library that you always wished for
Welcome to Mantine, React components library that you always wished for

Version v7.0.0

Release date

September 18th, 2023

Source code

Release on GitHub

Migration to native CSS

Mantine no longer depends on Emotion for styles generation. All @mantine/* packages are now shipped with native CSS files which can be imported from @mantine/{package}/styles.css, for example:

@@ -572,7 +572,7 @@
  • spacing prop was replaced with gap
  • Group now supports new preventGrowOverflow prop which allows customizing how group items will behave when they grow larger than their dedicated space
    • -
    Gap
    import { Group, Button } from '@mantine/core';
+
    Gap
    import { Group, Button } from '@mantine/core';
 
 function Demo() {
   return (
@@ -953,4 +953,4 @@
 
  • Dialog component now supports all Paper and Affix props, transitionDuration, transition and other transition related props were replaced with transitionProps
    • 
 
  • Checkbox, Radio, Chip and Switch components now support rootRef prop which allows using them with Tooltip and other similar components
    • 
 
  • Grid no longer has overflow: hidden styles by default, you can enable it by setting overflow prop to hidden
    • 
-
    Previous
    Version v7.1.0
    Next
    All releases
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +

    Previous

    Version v7.1.0

    Next

    All releases

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-1-0/index.html b/changelog/7-1-0/index.html index 07ef6fc6fdb..93da089df8a 100644 --- a/changelog/7-1-0/index.html +++ b/changelog/7-1-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.1.0

    Release date

    September 28th, 2023

    Source code

    Release on GitHub

    CSS layers

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.1.0

    Release date

    September 28th, 2023

    Source code

    Release on GitHub

    CSS layers

    Starting from 7.1.0 it is possible to import all @mantine/* packages styles with rules defined in mantine CSS layer. CSS rules within a layer are grouped together and applied before rules without a layer. This means that @@ -119,4 +119,4 @@ form.setValues(data); }); }, []); -}

    Previous

    Version v7.2.0

    Next

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Version v7.2.0

    Next

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-2-0/index.html b/changelog/7-2-0/index.html index a7c174c8ce9..134a9d5c293 100644 --- a/changelog/7-2-0/index.html +++ b/changelog/7-2-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.2.0

    Release date

    November 7th, 2023

    Source code

    Release on GitHub

    Community templates

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.2.0

    Release date

    November 7th, 2023

    Source code

    Release on GitHub

    Community templates

    You are welcome to share your GitHub templates with the community. Community templates are featured on the getting started page. You can find a guide on how to create and submit a template here.

    @@ -149,7 +149,7 @@

    Loader component now supports children prop. The prop allows overriding the default loader with any React node. It is useful in components that support loaderProps (Button, LoadingOverlay, Dropzone, etc.) – with loaderProps.children you can now display any React node instead of the loader.

    -
    import { useDisclosure } from '@mantine/hooks';
+
    import { useDisclosure } from '@mantine/hooks';
 import { LoadingOverlay, Button, Group, Box } from '@mantine/core';
 
 function Demo() {
@@ -219,4 +219,4 @@
 
  • Checkbox root element now has data-checked attribute when the checkbox is checked
    • 
 
  • Checkbox and Radio components now support changing icon color with iconColor prop
    • 
 
  • use-form now supports onValuesChange option which can be used to sync form values with external state
    • 
-
    Previous
    Version v7.3.0
    Next
    Version v7.1.0
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +

    Previous

    Version v7.3.0

    Next

    Version v7.1.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-3-0/index.html b/changelog/7-3-0/index.html index d69c5544e1d..ca7ab3535b1 100644 --- a/changelog/7-3-0/index.html +++ b/changelog/7-3-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.3.0

    Release date

    December 5th, 2023

    Source code

    Release on GitHub

    smaller-than and larger-than mixins

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.3.0

    Release date

    December 5th, 2023

    Source code

    Release on GitHub

    smaller-than and larger-than mixins

    smaller-than and larger-than mixins can be used to create styles that will be applied only when the screen is smaller or larger than specified breakpoint. Note that to use these mixins, you need to update postcss-preset-mantine to version 1.11.0 or higher.

    .demo {
@@ -115,7 +115,7 @@
 }

    Outline Checkbox and Radio variant

    Checkbox and Radio components now support outline variant:

    -
    import { Radio, Checkbox, Stack } from '@mantine/core';
+
    import { Radio, Checkbox, Stack } from '@mantine/core';
 
 function Demo() {
   return (
@@ -157,7 +157,7 @@
 }
    
 
    Button loading state animation
    
 
    Button component now has loading state animation:
    
-
    import { Button, Group } from '@mantine/core';
+
    import { Button, Group } from '@mantine/core';
 
 function Demo() {
   const [loading, { toggle }] = useDisclosure();
@@ -276,4 +276,4 @@
 
  • vite-template was migrated from Jest to Vitest.
    • 
 
  • The main Mantine repository was migrated to yarn v4. The process of getting started locally was changed
    • 
 
  • @mantine/ds package has been deprecated. You can use @mantinex/mantine-logo package to use MantineLogo component in your project.
    • 
-
    Previous
    Version v7.4.0
    Next
    Version v7.2.0
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +

    Previous

    Version v7.4.0

    Next

    Version v7.2.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-4-0/index.html b/changelog/7-4-0/index.html index b7abd4159b4..e18464066d2 100644 --- a/changelog/7-4-0/index.html +++ b/changelog/7-4-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.4.0

    Release date

    January 3rd, 2024

    Source code

    Release on GitHub

    @mantine/charts

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.4.0

    Release date

    January 3rd, 2024

    Source code

    Release on GitHub

    @mantine/charts

    New @mantine/charts package provides a set of components to build charts and graphs. All components are based on recharts. Currently, the package provides AreaChart, BarChart, @@ -74,7 +74,7 @@ }

    Sparkline component

    New Sparkline component:

    -
    Color
    Fill opacity
    Stroke width
    import { Sparkline } from '@mantine/charts';
+
    Color
    Fill opacity
    Stroke width
    import { Sparkline } from '@mantine/charts';
 
 function Demo() {
   return (
@@ -602,4 +602,4 @@
 
  • It is now possible to define CSS variables in styles prop of all components.
    • 
 
  • New use-in-viewport hook
    • 
 
  • All Vite templates have been updated to Vite 5.0 and Vitest 1.0
    • 
-
    Previous
    Version v7.5.0
    Next
    Version v7.3.0
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +

    Previous

    Version v7.5.0

    Next

    Version v7.3.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/7-5-0/index.html b/changelog/7-5-0/index.html index 3e0d262d6ab..eb23dd2af42 100644 --- a/changelog/7-5-0/index.html +++ b/changelog/7-5-0/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.5.0

    Release date

    January 26th, 2024

    Source code

    Release on GitHub

    DonutChart component

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Version v7.5.0

    Release date

    January 26th, 2024

    Source code

    Release on GitHub

    DonutChart component

    New DonutChart component:

    import { DonutChart } from '@mantine/charts';
 import { data } from './data';
@@ -66,7 +66,7 @@
 
    You can now force each month to have 6 weeks by setting consistentWeeks: true on
 DatesProvider. This is useful if you want to avoid layout
 shifts when month changes.
    
-
    MoTuWeThFrSaSu
    import { DatePicker, DatesProvider } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker, DatesProvider } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -201,4 +201,4 @@
 
  • Progress now supports transitionDuration prop which controls section width animation duration
    • 
 
  • Textarea and JsonInput components now support resize prop, which allows setting resize CSS property on the input
    • 
 
  • @mantine/hooks package now exports readLocalStorageValue and readSessionStorageValue function to get value from storage outside of React components
    • 
-
    Previous
    Rich text editor
    Next
    Version v7.4.0
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +

    Previous

    Rich text editor

    Next

    Version v7.4.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/all-releases/index.html b/changelog/all-releases/index.html index a5206825f26..6b75e567cbd 100644 --- a/changelog/all-releases/index.html +++ b/changelog/all-releases/index.html @@ -4,5 +4,5 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    -
    7.5.0
    ChangelogGitHub release

    January 26, 2023

    Version 7.5.0 does not have associated patch releases yet.

    7.4.0
    ChangelogGitHub release

    January 3, 2023

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Previous

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    +
    7.5.0
    ChangelogGitHub release

    January 26, 2023

    Version 7.5.0 does not have associated patch releases yet.

    7.4.0
    ChangelogGitHub release

    January 3, 2023

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Previous

    Version v7.0.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/changelog/previous-versions/index.html b/changelog/previous-versions/index.html index 9f9ee7a11a5..577ec571fb2 100644 --- a/changelog/previous-versions/index.html +++ b/changelog/previous-versions/index.html @@ -4,5 +4,5 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    -
    7.5.0
    ChangelogGitHub release

    January 26, 2023

    Version 7.5.0 does not have associated patch releases yet.

    7.4.0
    ChangelogGitHub release

    January 3, 2023

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    All releases

    +
    7.5.0
    ChangelogGitHub release

    January 26, 2023

    Version 7.5.0 does not have associated patch releases yet.

    7.4.0
    ChangelogGitHub release

    January 3, 2023

    7.4.X patches:

    7.3.0
    ChangelogGitHub release

    December 5, 2023

    7.3.X patches:

    7.2.0
    ChangelogGitHub release

    November 6, 2023

    7.2.X patches:

    7.1.0
    ChangelogGitHub release

    September 28, 2023

    7.1.X patches:

    7.0.0
    ChangelogGitHub release

    September 18, 2023

    7.0.X patches:

    6.0.0
    ChangelogGitHub release

    March 2, 2023

    6.0.X patches:

    5.10.0
    ChangelogGitHub release

    January 3, 2023

    5.10.X patches:

    5.9.0
    ChangelogGitHub release

    December 1, 2022

    5.9.X patches:

    5.8.0
    ChangelogGitHub release

    November 16, 2022

    5.8.X patches:

    5.7.0
    ChangelogGitHub release

    November 4, 2022

    5.7.X patches:

    5.6.0
    ChangelogGitHub release

    October 20, 2022

    5.6.X patches:

    5.5.0
    ChangelogGitHub release

    October 2, 2022

    5.5.X patches:

    5.4.0
    ChangelogGitHub release

    September 19, 2022

    5.4.X patches:

    5.3.0
    ChangelogGitHub release

    September 9, 2022

    5.3.X patches:

    5.2.0
    ChangelogGitHub release

    August 18, 2022

    5.2.X patches:

    5.1.0
    ChangelogGitHub release

    August 8, 2022

    5.1.X patches:

    5.0.0
    ChangelogGitHub release

    July 25, 2022

    5.0.X patches:

    4.2.0
    ChangelogGitHub release

    April 27, 2022

    4.2.X patches:

    4.1.0
    ChangelogGitHub release

    March 28, 2022

    4.1.X patches:

    4.0.0
    ChangelogGitHub release

    March 10, 2022

    4.0.X patches:

    3.6.0
    ChangelogGitHub release

    January 14, 2022

    3.6.X patches:

    3.5.0
    ChangelogGitHub release

    January 3, 2022

    3.5.X patches:

    3.4.0
    ChangelogGitHub release

    December 14, 2021

    3.4.X patches:

    3.3.0
    ChangelogGitHub release

    December 2, 2021

    3.3.X patches:

    3.2.0
    ChangelogGitHub release

    November 13, 2021

    3.2.X patches:

    3.1.0
    ChangelogGitHub release

    October 28, 2021

    3.1.X patches:

    3.0.0
    ChangelogGitHub release

    October 10, 2021

    3.0.X patches:

    2.5.0
    ChangelogGitHub release

    September 16, 2021

    2.5.X patches:

    2.4.0
    ChangelogGitHub release

    August 24, 2021

    2.4.X patches:

    2.3.0
    ChangelogGitHub release

    August 15, 2021

    2.3.X patches:

    2.2.0
    ChangelogGitHub release

    August 2, 2021

    2.2.X patches:

    2.1.0
    ChangelogGitHub release

    July 20, 2021

    2.1.X patches:

    2.0.0
    ChangelogGitHub release

    July 5, 2021

    2.0.X patches:

    1.3.0
    ChangelogGitHub release

    June 1, 2021

    1.3.X patches:

    1.1.0
    ChangelogGitHub release

    May 19, 2021

    1.1.X patches:

    1.0.0
    GitHub release

    May 3, 2021

    1.0.X patches:

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/area-chart/index.html b/charts/area-chart/index.html index 9c9564155e0..ceda2168df2 100644 --- a/charts/area-chart/index.html +++ b/charts/area-chart/index.html @@ -4,11 +4,11 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AreaChart

    Area chart component with stacked, percent and split variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AreaChart

    Area chart component with stacked, percent and split variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Use AreaChart component without type prop to render a regular area chart. In a regular area chart, each data series is plotted on its own and does not interact with other series.

    -
    Tick line
    Grid axis
    import { AreaChart } from '@mantine/charts';
+
    Tick line
    Grid axis
    import { AreaChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -185,7 +185,7 @@
 
    Connect nulls
    
 
    Use connectNulls prop to specify whether to connect a data point across null
 points. By default, connectNulls is true.
    
-
    import { AreaChart } from '@mantine/charts';
+
    import { AreaChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -289,7 +289,7 @@
 
    You can reference colors from theme the same way as in
 other components, for example, blue, red.5, orange.7, etc. Any valid CSS
 color value is also accepted.
    
-
    Color
    import { AreaChart } from '@mantine/charts';
+
    Color
    import { AreaChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -541,7 +541,7 @@
 }
    
 
    Fill opacity
    
 
    Use fillOpacity prop to control the fill opacity of all areas:
    
-
    Type
    Fill opacity
    import { AreaChart } from '@mantine/charts';
+
    Type
    Fill opacity
    import { AreaChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -660,4 +660,4 @@
       series={[{ name: 'Apples', color: 'indigo.6' }]}
     />
   );
-}
    Previous
    Getting started
    Next
    BarChart
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    Getting started

    Next

    BarChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/bar-chart/index.html b/charts/bar-chart/index.html index 78f1278d848..8bc3aa0474c 100644 --- a/charts/bar-chart/index.html +++ b/charts/bar-chart/index.html @@ -4,11 +4,11 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BarChart

    Bar chart component with stacked and percent variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BarChart

    Bar chart component with stacked and percent variants

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Use BarChart component without type prop to render a regular bar chart. In a regular bar chart, each data series is plotted on its own and does not interact with other series.

    -
    Tick line
    Grid axis
    import { BarChart } from '@mantine/charts';
+
    Tick line
    Grid axis
    import { BarChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -514,4 +514,4 @@
       ]}
     />
   );
-}
    Previous
    AreaChart
    Next
    LineChart
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    AreaChart

    Next

    LineChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/donut-chart/index.html b/charts/donut-chart/index.html index 59982dd649d..c06a75a03a7 100644 --- a/charts/donut-chart/index.html +++ b/charts/donut-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DonutChart

    Donut chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DonutChart

    Donut chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    DonutChart is based on PieChart recharts component:

    import { DonutChart } from '@mantine/charts';
 import { data } from './data';
@@ -14,7 +14,7 @@
 }

    Segments labels

    Set withLabels prop to display labels next to each segment:

    -
    import { DonutChart } from '@mantine/charts';
+
    import { DonutChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -139,4 +139,4 @@
       <DonutChart data={data} strokeColor="var(--card-bg)" />
     </div>
   );
-}
    Previous
    LineChart
    Next
    PieChart
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    LineChart

    Next

    PieChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/getting-started/index.html b/charts/getting-started/index.html index 5680e3092a1..0c45c9a3d52 100644 --- a/charts/getting-started/index.html +++ b/charts/getting-started/index.html @@ -4,11 +4,11 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/charts package

    Docs

    Edit this page

    Package

    @mantine/charts

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/charts package

    Docs

    Edit this page

    Package

    @mantine/charts

    License

    MIT

    Installation

    yarn add @mantine/charts recharts@2

    After installation import package styles at the root of your application:

    import '@mantine/charts/styles.css';

    Based on recharts

    Most of the components in @mantine/charts package are based on recharts library. If you need advanced features that are not covered in @mantine/charts -documentation, reference recharts documentation for more information.

    Previous

    TimeInput

    Next

    AreaChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +documentation, reference recharts documentation for more information.

    Previous

    TimeInput

    Next

    AreaChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/line-chart/index.html b/charts/line-chart/index.html index 9de10adffb2..b852a691a20 100644 --- a/charts/line-chart/index.html +++ b/charts/line-chart/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LineChart

    Line chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    -
    Tick line
    Grid axis
    import { LineChart } from '@mantine/charts';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    LineChart
    Line chart component
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/charts
    Usage
    
+
    Tick line
    Grid axis
    import { LineChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -92,7 +92,7 @@
 
    Connect nulls
    
 
    Use connectNulls prop to specify whether to connect a data point across null
 points. By default, connectNulls is true.
    
-
    import { LineChart } from '@mantine/charts';
+
    import { LineChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -533,4 +533,4 @@
       series={[{ name: 'Apples', color: 'indigo.6' }]}
     />
   );
-}
    Previous
    BarChart
    Next
    DonutChart
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    BarChart

    Next

    DonutChart

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/pie-chart/index.html b/charts/pie-chart/index.html index b14c15bda85..690adec9936 100644 --- a/charts/pie-chart/index.html +++ b/charts/pie-chart/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PieChart

    Pie chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PieChart

    Pie chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    PieChart is based on PieChart recharts component:

    import { PieChart } from '@mantine/charts';
 import { data } from './data';
@@ -17,7 +17,7 @@
 to control the position of labels relative to the corresponding segment. Note that if
 your chart has a lot of segments and labelPosition="inside" is set, labels might overlap.
 In this case, use labelPosition="outside.
    
-
    Labels position
    import { PieChart } from '@mantine/charts';
+
    Labels position
    import { PieChart } from '@mantine/charts';
 import { data } from './data';
 
 function Demo() {
@@ -125,4 +125,4 @@
       <PieChart data={data} strokeColor="var(--card-bg)" />
     </div>
   );
-}
    Previous
    DonutChart
    Next
    Sparkline
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    DonutChart

    Next

    Sparkline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/charts/sparkline/index.html b/charts/sparkline/index.html index 30ebcde5a55..4a7203afc2a 100644 --- a/charts/sparkline/index.html +++ b/charts/sparkline/index.html @@ -4,10 +4,10 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Sparkline

    Simplified area chart to show trends

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Sparkline

    Simplified area chart to show trends

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    Sparkline is a simplified version of AreaChart. It can be used to display a single series of data in a small space.

    -
    Color
    Fill opacity
    Stroke width
    import { Sparkline } from '@mantine/charts';
+
    Color
    Fill opacity
    Stroke width
    import { Sparkline } from '@mantine/charts';
 
 function Demo() {
   return (
@@ -35,4 +35,4 @@
   @mixin dark {
     --chart-color: var(--mantine-color-lime-4);
   }
-}
    Previous
    PieChart
    Next
    CodeHighlight
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    PieChart

    Next

    CodeHighlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/colors-generator/index.html b/colors-generator/index.html index 21cd703df81..9106f5e4bd4 100644 --- a/colors-generator/index.html +++ b/colors-generator/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine colors generator

    0#eef3ff
    1#dce4f5
    2#b9c7e2
    3#94a8d0
    4#748dc1
    5#5f7cb8
    6#5474b4
    7#44639f
    8#39588f
    9#2d4b81
    Variants preview
    FilledLightOutlineSubtle
    Colors array
    [
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Mantine colors generator
    0#eef3ff
    1#dce4f5
    2#b9c7e2
    3#94a8d0
    4#748dc1
    5#5f7cb8
    6#5474b4
    7#44639f
    8#39588f
    9#2d4b81
    Variants preview
    FilledLightOutlineSubtle
    Colors array
    [
   "#eef3ff",
   "#dce4f5",
   "#b9c7e2",
@@ -42,4 +42,4 @@
       <App />
     </MantineProvider>
   );
-}
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/combobox/index.html b/combobox/index.html index ccedd5195c3..8861c67c841 100644 --- a/combobox/index.html +++ b/combobox/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    \ No newline at end of file diff --git a/contribute/index.html b/contribute/index.html index 352ea42f6e4..dddc9b4bb8f 100644 --- a/contribute/index.html +++ b/contribute/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Contributing to Mantine

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Contributing to Mantine

    First of all, thank you for showing interest in contributing to Mantine! All your contributions are extremely valuable to the project!

    Ways to contribute

      @@ -57,4 +57,4 @@
    • docs:docgen – generates components types information with docgen script
    • docs:build – builds docs for production
    • docs:deploy – builds and deploys docs to the GitHub Pages
      • -
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/accordion/index.html b/core/accordion/index.html index 053fe9171c7..65523bc3e1b 100644 --- a/core/accordion/index.html +++ b/core/accordion/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Accordion

    Divide content into collapsible sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Accordion

    Divide content into collapsible sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Data used in Accordion examples:

    const groceries = [
   {
@@ -26,7 +26,7 @@
       'Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.',
   },
 ];
    -
    Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.
    Radius
    Chevron position
    import { Accordion } from '@mantine/core';
+
    Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.
    Radius
    Chevron position
    import { Accordion } from '@mantine/core';
 
 function Demo() {
   // See groceries data above
@@ -403,4 +403,4 @@
   return <Accordion order={3}>{/* ...items */}</Accordion>;
 }
    
 
    Keyboard interactions:
    
-
    KeyDescription
    ArrowDownMoves focus to next item
    ArrowUpMoves focus to previous item
    HomeMoves focus to first item
    EndMoves focus to last item
    Space/EnterToggles focused item opened state
    Previous
    Tooltip
    Next
    Avatar
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowDownMoves focus to next item
    ArrowUpMoves focus to previous item
    HomeMoves focus to first item
    EndMoves focus to last item
    Space/EnterToggles focused item opened state

    Previous

    Tooltip

    Next

    Avatar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/action-icon/index.html b/core/action-icon/index.html index 51aefc6b315..0ce2160ba3d 100644 --- a/core/action-icon/index.html +++ b/core/action-icon/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ActionIcon

    Icon button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ActionIcon

    Icon button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Size
    Radius
    import { ActionIcon } from '@mantine/core';
 import { IconAdjustments } from '@tabler/icons-react';
 
@@ -126,7 +126,7 @@
 
    Loading state
    
 
    When loading prop is set, ActionIcon will be disabled and Loader with overlay will be rendered
 in the center of the button. Loader color depends on ActionIcon variant.
    
-
    import { ActionIcon, Group } from '@mantine/core';
+
    import { ActionIcon, Group } from '@mantine/core';
 import { IconHeart } from '@tabler/icons-react';
 
 function Demo() {
@@ -357,4 +357,4 @@
       </ActionIcon>
     </>
   );
-}
    Previous
    TagsInput
    Next
    Button
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    TagsInput

    Next

    Button

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/affix/index.html b/core/affix/index.html index 0c107ebe0c0..2a51fb634b8 100644 --- a/core/affix/index.html +++ b/core/affix/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Affix

    Renders children inside portal at fixed position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Affix

    Renders children inside portal at fixed position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Affix renders a div element with a fixed position inside the Portal component. Use it to display elements fixed at any position on the screen, for example, scroll to top button:

    Affix is located at the bottom of the screen, scroll to see it

    import { IconArrowUp } from '@tabler/icons-react';
@@ -32,4 +32,4 @@
       </Affix>
     </>
   );
-}

    Previous

    Skeleton

    Next

    Dialog

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Skeleton

    Next

    Dialog

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/alert/index.html b/core/alert/index.html index ee9576fd4e4..7d684f07045 100644 --- a/core/alert/index.html +++ b/core/alert/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Alert

    Attract user attention with important static message

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Radius
    import { Alert } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Alert
    Attract user attention with important static message
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Radius
    import { Alert } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 
 function Demo() {
@@ -45,4 +45,4 @@
 function AlsoValid() {
   // -> ok, without close button, closeButtonLabel is not needed
   return <Alert />;
-}
    Previous
    Tabs
    Next
    Loader
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Tabs

    Next

    Loader

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/anchor/index.html b/core/anchor/index.html index a7b6a40802e..e2b181f403b 100644 --- a/core/anchor/index.html +++ b/core/anchor/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Anchor

    Display link with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Anchor

    Display link with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Anchor component
    import { Anchor } from '@mantine/core';
 
 function Demo() {
@@ -93,4 +93,4 @@
 function Demo() {
   const ref = useRef<HTMLAnchorElement>(null);
   return <Anchor ref={ref} />;
-}

    Previous

    UnstyledButton

    Next

    Breadcrumbs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    UnstyledButton

    Next

    Breadcrumbs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/app-shell/index.html b/core/app-shell/index.html index 5aa692d15c9..81ba7eb2aa4 100644 --- a/core/app-shell/index.html +++ b/core/app-shell/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AppShell

    Responsive shell for your application with header, navbar, aside and footer

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AppShell

    Responsive shell for your application with header, navbar, aside and footer

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    This page includes only documentation. Since all associated AppShell components have fixed position, it is not possible to include demos on this page.

    Open AppShell examples page @@ -363,4 +363,4 @@
  • AppShell.Aside root element is aside
  • AppShell.Footer root element is footer
  • AppShell.Main root element is main – !important: do not use main element inside AppShell.Main component
    • -

    Previous

    Recipes

    Next

    AspectRatio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Recipes

    Next

    AspectRatio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/aspect-ratio/index.html b/core/aspect-ratio/index.html index 72d67fce890..20d616a02a3 100644 --- a/core/aspect-ratio/index.html +++ b/core/aspect-ratio/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AspectRatio

    Maintain responsive consistent width/height ratio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    AspectRatio

    Maintain responsive consistent width/height ratio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    AspectRatio allows maintaining a consistent width/height ratio. It can be used to display images, maps, videos and other media.

    Panda
    import { AspectRatio } from '@mantine/core';
@@ -65,4 +65,4 @@
       </AspectRatio>
     </div>
   );
-}

    Previous

    AppShell

    Next

    Center

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    AppShell

    Next

    Center

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/autocomplete/index.html b/core/autocomplete/index.html index 66d808713b9..f7b7d5cfb4f 100644 --- a/core/autocomplete/index.html +++ b/core/autocomplete/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Autocomplete

    Autocomplete user input with any list of options

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Autocomplete is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom autocomplete components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Autocomplete

    Autocomplete user input with any list of options

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Autocomplete is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom autocomplete components on the examples page.

    Usage

    Autocomplete provides user a list of suggestions based on the input, however user is not limited to suggestions and can type anything.

    @@ -319,7 +319,7 @@ }

    Input props

    Autocomplete component supports Input and Input.Wrapper components features and all input element props. Autocomplete documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { Autocomplete } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { Autocomplete } from '@mantine/core';
 
 function Demo() {
   return (
@@ -413,4 +413,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <Autocomplete label="My input" />;
-}
    Previous
    TextInput
    Next
    Combobox
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    TextInput

    Next

    Combobox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/avatar/index.html b/core/avatar/index.html index d1aff821eda..d49be1927d3 100644 --- a/core/avatar/index.html +++ b/core/avatar/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Avatar

    Display user profile image, initials or fallback icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Avatar

    Display user profile image, initials or fallback icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    it's me
    MK
    import { Avatar } from '@mantine/core';
 import { IconStar } from '@tabler/icons-react';
 
@@ -201,4 +201,4 @@
 function OkPlaceholder() {
   // Ok, title is set on placeholder
   return <Avatar alt="Rob Johnson">RJ</Avatar>;
-}

    Previous

    Accordion

    Next

    BackgroundImage

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Accordion

    Next

    BackgroundImage

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/background-image/index.html b/core/background-image/index.html index 2e2c885f50f..36bde000654 100644 --- a/core/background-image/index.html +++ b/core/background-image/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BackgroundImage

    Displays image as background

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    BackgroundImage

    Displays image as background

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    BackgroundImage component can be used to add any content on image. It is useful for hero headers and other similar sections

    Radius
    import { BackgroundImage, Center, Text, Box } from '@mantine/core';
 
 function Demo() {
@@ -31,4 +31,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, BackgroundImageProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { BackgroundImageProps, ElementProps } from '@mantine/core';
 
 interface MyBackgroundImageProps extends BackgroundImageProps,
-  ElementProps<'button', keyof BackgroundImageProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Avatar

    Next

    Badge

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'button', keyof BackgroundImageProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Avatar

    Next

    Badge

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/badge/index.html b/core/badge/index.html index f99c949c286..a513c300c4a 100644 --- a/core/badge/index.html +++ b/core/badge/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Badge

    Display badge, pill or tag

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Badge

    Display badge, pill or tag

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Badge
    Color
    Size
    Radius
    import { Badge } from '@mantine/core';
 
 function Demo() {
@@ -178,4 +178,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, BadgeProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { BadgeProps, ElementProps } from '@mantine/core';
 
 interface MyBadgeProps extends BadgeProps,
-  ElementProps<'a', keyof BadgeProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    BackgroundImage

    Next

    Card

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'a', keyof BadgeProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    BackgroundImage

    Next

    Card

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/blockquote/index.html b/core/blockquote/index.html index 843822d26f0..e6c186f5d42 100644 --- a/core/blockquote/index.html +++ b/core/blockquote/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Blockquote

    Blockquote with optional cite

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Blockquote

    Blockquote with optional cite

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Life is like an npm install – you never know what you are going to get.– Forrest Gump
    Color
    Radius
    Icon size
    import { Blockquote } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 
@@ -15,4 +15,4 @@
       Life is like an npm install – you never know what you are going to get.
     </Blockquote>
   );
-}

    Previous

    Timeline

    Next

    Code

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Timeline

    Next

    Code

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/box/index.html b/core/box/index.html index 62094b1b657..77753b249d1 100644 --- a/core/box/index.html +++ b/core/box/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Box

    Base component for all Mantine components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Box

    Base component for all Mantine components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Box component is used as a base for all other components. Box supports the following features:

    Previous

    TypographyStylesProvider

    Next

    Collapse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    TypographyStylesProvider

    Next

    Collapse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/breadcrumbs/index.html b/core/breadcrumbs/index.html index 7a17a9287af..99c10e5a20e 100644 --- a/core/breadcrumbs/index.html +++ b/core/breadcrumbs/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Breadcrumbs

    Separates list of react nodes with given separator

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Breadcrumbs

    Separates list of react nodes with given separator

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Breadcrumbs component accepts any number of React nodes as children and adds a given separator (defaults to /) between them:

    Mantine
    /
    Mantine hooks
    /
    use-id
    Mantine
    →
    Mantine hooks
    →
    use-id
    import { Breadcrumbs, Anchor } from '@mantine/core';
@@ -28,4 +28,4 @@
       </Breadcrumbs>
     </>
   );
-}

    Previous

    Anchor

    Next

    Burger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Anchor

    Next

    Burger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/burger/index.html b/core/burger/index.html index 90f0a49d6a8..40e85c0b796 100644 --- a/core/burger/index.html +++ b/core/burger/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Burger

    Open/close navigation button

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Burger

    Open/close navigation button

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Burger component renders open/close menu button. Set opened and onClick props to control Burger state. If opened prop is set, cross will be rendered, otherwise – burger.

    @@ -37,4 +37,4 @@ </Burger> </> ); -}

    Previous

    Breadcrumbs

    Next

    NavLink

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Breadcrumbs

    Next

    NavLink

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/button/index.html b/core/button/index.html index eea6f25d44c..2e47879b7e8 100644 --- a/core/button/index.html +++ b/core/button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Button

    Button component to render button or link

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Button

    Button component to render button or link

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Size
    Radius
    import { Button } from '@mantine/core';
 
 function Demo() {
@@ -172,7 +172,7 @@
 
    Loading state
    
 
    When loading prop is set, Button will be disabled and Loader with overlay will be rendered
 in the center of the button. Loader color depends on Button variant.
    
-
    import { Button, Group } from '@mantine/core';
+
    import { Button, Group } from '@mantine/core';
 
 function Demo() {
   const [loading, { toggle }] = useDisclosure();
@@ -410,4 +410,4 @@
 function Demo() {
   const ref = useRef<HTMLButtonElement>(null);
   return <Button ref={ref} />;
-}
    Previous
    ActionIcon
    Next
    CloseButton
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    ActionIcon

    Next

    CloseButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/card/index.html b/core/card/index.html index 0d7aad98aec..9341dbafaf7 100644 --- a/core/card/index.html +++ b/core/card/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Card

    Card with sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Card

    Card with sections

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Card is a wrapper around Paper component with some additional styles and Card.Section component that allows to split card into sections. If you do not need sections, you use Paper component instead.

    Norway

    Norway Fjord Adventures

    On Sale

    With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

    import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';
@@ -208,4 +208,4 @@
       </Card.Section>
     </Card>
   );
-}

    Previous

    Badge

    Next

    ColorSwatch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Badge

    Next

    ColorSwatch

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/center/index.html b/core/center/index.html index 333446d2a02..088289f7849 100644 --- a/core/center/index.html +++ b/core/center/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Center

    Centers content vertically and horizontally

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Center

    Centers content vertically and horizontally

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    All elements inside Center are centered
    import { Center, Box } from '@mantine/core';
 
 function Demo() {
@@ -37,4 +37,4 @@
 }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, CenterProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { CenterProps, ElementProps } from '@mantine/core';
 
 interface MyCenterProps extends CenterProps,
-  ElementProps<'button', keyof CenterProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    AspectRatio

    Next

    Container

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'button', keyof CenterProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    AspectRatio

    Next

    Container

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/checkbox/index.html b/core/checkbox/index.html index 92f8ca1c74c..51866da0d56 100644 --- a/core/checkbox/index.html +++ b/core/checkbox/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Checkbox

    Capture boolean input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Label position
    Color
    Variant
    Radius
    Size
    import { Checkbox } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Checkbox
    Capture boolean input from user
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Label position
    Color
    Variant
    Radius
    Size
    import { Checkbox } from '@mantine/core';
 
 function Demo() {
   return (
@@ -29,7 +29,7 @@
   );
 }
    
 
    States
    
-
    import { Checkbox, Stack } from '@mantine/core';
+
    import { Checkbox, Stack } from '@mantine/core';
 
 function Demo() {
   return (
@@ -51,7 +51,7 @@
   );
 }
    
 
    Change icons
    
-
    import { Checkbox, CheckboxProps } from '@mantine/core';
+
    import { Checkbox, CheckboxProps } from '@mantine/core';
 import { IconBiohazard, IconRadioactive } from '@tabler/icons-react';
 
 const CheckboxIcon: CheckboxProps['icon'] = ({ indeterminate, ...others }) =>
@@ -67,7 +67,7 @@
 }
    
 
    Change icon color
    
 
    Use iconColor prop to change icon color. You can reference colors from theme.colors or use any valid CSS color:
    
-
    import { Checkbox } from '@mantine/core';
+
    import { Checkbox } from '@mantine/core';
 
 function Demo() {
   return (
@@ -83,7 +83,7 @@
 
    Indeterminate state
    
 
    Checkbox supports indeterminate state. When indeterminate prop is set,
 checked prop is ignored (checkbox always has checked styles):
    
-
    import { useListState, randomId } from '@mantine/hooks';
+
    import { useListState, randomId } from '@mantine/hooks';
 import { Checkbox } from '@mantine/core';
 
 const initialValues = [
@@ -126,7 +126,7 @@
   );
 }
    
 
    Label with link
    
-
    import { Checkbox, Anchor } from '@mantine/core';
+
    import { Checkbox, Anchor } from '@mantine/core';
 
 function Demo() {
   return (
@@ -148,7 +148,7 @@
 
  • If refProp is not set, the tooltip is attached to the checkbox input
    • 
 
  • If refProp="rootRef" is set, the tooltip is attached to the root element (contains label, input and other elements)
    • 
 
-
    import { Tooltip, Checkbox } from '@mantine/core';
+
    import { Tooltip, Checkbox } from '@mantine/core';
 
 function Demo() {
   return (
@@ -166,7 +166,7 @@
 
    Pointer cursor
    
 
    By default, checkbox input and label have cursor: default (same as native input[type="checkbox"]).
 To change cursor to pointer, set cursorType on theme:
    
-
    import { MantineProvider, createTheme, Checkbox } from '@mantine/core';
+
    import { MantineProvider, createTheme, Checkbox } from '@mantine/core';
 
 const theme = createTheme({
   cursorType: 'pointer',
@@ -185,7 +185,7 @@
 }
    
 
    Add custom sizes
    
 
    You can add any number of custom sizes with data-size attribute:
    
-
    import { MantineProvider, Checkbox, createTheme } from '@mantine/core';
+
    import { MantineProvider, Checkbox, createTheme } from '@mantine/core';
 import classes from './Demo.module.css';
 
 const theme = createTheme({
@@ -208,7 +208,7 @@
   return <Checkbox wrapperProps={{ 'data-testid': 'wrapper' }} data-testid="input" />;
 }
    
 
    Checkbox.Group
    
-
    Select your favorite frameworks/libraries
    This is anonymous
    import { Checkbox, Group } from '@mantine/core';
+
    Select your favorite frameworks/libraries
    This is anonymous
    import { Checkbox, Group } from '@mantine/core';
 
 function Demo() {
   return (
@@ -252,12 +252,12 @@
 
    Checkbox description
    Checkbox error
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
+ */
    Checkbox description
    Checkbox error
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
  * Hover over selectors to apply outline styles
  *
  */
    
 
    Example: Table with row selection
    
-
    Element positionElement nameSymbolAtomic mass
    		6CarbonC12.011
    		7NitrogenN14.007
    		39YttriumY88.906
    		56BariumBa137.33
    		58CeriumCe140.12
    import { Table, Checkbox } from '@mantine/core';
+
    Element positionElement nameSymbolAtomic mass
    		6CarbonC12.011
    		7NitrogenN14.007
    		39YttriumY88.906
    		56BariumBa137.33
    		58CeriumCe140.12
    import { Table, Checkbox } from '@mantine/core';
 
 const elements = [
   { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
@@ -311,7 +311,7 @@
   );
 }
    
 
    Example: Checkbox card
    
-
    import { Checkbox, UnstyledButton, Text } from '@mantine/core';
+
    import { Checkbox, UnstyledButton, Text } from '@mantine/core';
 import classes from './Demo.module.css';
 
 function Demo() {
@@ -342,7 +342,7 @@
   );
 }
    
 
    Example: Customize with Styles API
    
-
    import { Checkbox } from '@mantine/core';
+
    import { Checkbox } from '@mantine/core';
 import classes from './Demo.module.css';
 
 function Demo() {
@@ -377,4 +377,4 @@
 // Ok, input is labelled by label element
 function GoodLabel() {
   return <Checkbox label="My checkbox" />;
-}
    Previous
    Stack
    Next
    Chip
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Stack

    Next

    Chip

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/chip/index.html b/core/chip/index.html index d787e7393a8..7f282b11058 100644 --- a/core/chip/index.html +++ b/core/chip/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Chip

    Pick one or multiple values with inline controls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Variant
    Size
    Radius
    import { Chip } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Chip
    Pick one or multiple values with inline controls
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Variant
    Size
    Radius
    import { Chip } from '@mantine/core';
 
 function Demo() {
   return <Chip defaultChecked>Awesome chip</Chip>
@@ -24,7 +24,7 @@
   );
 }
    
 
    Change checked icon
    
-
    import { Chip, rem } from '@mantine/core';
+
    import { Chip, rem } from '@mantine/core';
 import { IconX } from '@tabler/icons-react';
 
 function Demo() {
@@ -40,11 +40,11 @@
   );
 }
    
 
    States
    
-
    
+
    
 
    Chip with tooltip
    
 
    To use Chip with Tooltip and other similar components, set refProp="rootRef"
 on the Tooltip component:
    
-
    import { Tooltip, Chip } from '@mantine/core';
+
    import { Tooltip, Chip } from '@mantine/core';
 
 function Demo() {
   return (
@@ -61,7 +61,7 @@
 
    Chip.Group
    
 
    Chip.Group component manages state of child Chip components,
 set multiple prop to allow multiple chips to be selected at a time:
    
-
    import { Chip } from '@mantine/core';
+
    import { Chip } from '@mantine/core';
 
 function Demo() {
   return (
@@ -117,4 +117,4 @@
 }
    
 
    Accessibility
    
 
    Chip and Chip.Group components are accessible by default – they are built with native radio/checkbox inputs,
-all keyboard events work the same as with native controls.
    Previous
    Checkbox
    Next
    ColorInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+all keyboard events work the same as with native controls.
    Previous
    Checkbox
    Next
    ColorInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/close-button/index.html b/core/close-button/index.html index a8e7e8ddaee..bdc6682165c 100644 --- a/core/close-button/index.html +++ b/core/close-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CloseButton

    Button with close icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CloseButton

    Button with close icon

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    CloseButton renders a button with X icon inside. It is used in other Mantine components like Drawer or Modal.

    Size
    Variant
    import { CloseButton } from '@mantine/core';
 
@@ -38,4 +38,4 @@
       </CloseButton>
     </>
   );
-}

    Previous

    Button

    Next

    CopyButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Button

    Next

    CopyButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/code/index.html b/core/code/index.html index 8b39aca0c6a..8620ba6cd72 100644 --- a/core/code/index.html +++ b/core/code/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Code

    Inline and block code

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Code

    Inline and block code

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    By default, Code component renders inline code html element:

    React.createElement()
    import { Code } from '@mantine/core';
 
@@ -44,4 +44,4 @@
       <Code color="var(--mantine-color-blue-light)">React.createElement()</Code>
     </Group>
   );
-}

    Previous

    Blockquote

    Next

    Highlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Blockquote

    Next

    Highlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/collapse/index.html b/core/collapse/index.html index e6a7990f007..aecfd3f789a 100644 --- a/core/collapse/index.html +++ b/core/collapse/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Collapse

    Animate presence with slide down/up transition

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Collapse

    Animate presence with slide down/up transition

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Button, Group, Text, Collapse, Box } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
@@ -49,4 +49,4 @@
   );
 }

    Nested Collapse components

    -

    Previous

    Box

    Next

    Divider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Box

    Next

    Divider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/color-input/index.html b/core/color-input/index.html index f01272a092d..c3b6e1136a9 100644 --- a/core/color-input/index.html +++ b/core/color-input/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorInput

    Capture color from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorInput

    Capture color from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    ColorInput component supports Input and Input.Wrapper components features and all input element props. ColorInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { ColorInput } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { ColorInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -245,4 +245,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <ColorInput label="My input" />;
-}
    Previous
    Chip
    Next
    ColorPicker
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Chip

    Next

    ColorPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/color-picker/index.html b/core/color-picker/index.html index da79742f330..0684930cc8d 100644 --- a/core/color-picker/index.html +++ b/core/color-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorPicker

    Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorPicker

    Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    rgba(47, 119, 150, 0.7)

    import { useState } from 'react';
 import { ColorPicker, Text } from '@mantine/core';
 
@@ -141,4 +141,4 @@
       alphaLabel="Alpha"
     />
   );
-}

    Previous

    ColorInput

    Next

    Fieldset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ColorInput

    Next

    Fieldset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/color-swatch/index.html b/core/color-swatch/index.html index 04fcb0e8897..de9c7a5d8b2 100644 --- a/core/color-swatch/index.html +++ b/core/color-swatch/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorSwatch

    Displays color

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ColorSwatch

    Displays color

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { ColorSwatch, Group } from '@mantine/core';
 
 function Demo() {
@@ -19,7 +19,7 @@
 
    withShadow
    
 
    By default, ColorSwatch has an inner box-shadow to make it more visible on light backgrounds,
 you can disable it by setting withShadow={false} prop:
    
-
    import { ColorSwatch } from '@mantine/core';
+
    import { ColorSwatch } from '@mantine/core';
 
 function Demo() {
   return <ColorSwatch color="rgba(255, 255, 255, 0.7)" />;
@@ -53,4 +53,4 @@
       {checked && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
     </ColorSwatch>
   );
-}
    Previous
    Card
    Next
    Image
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    Card

    Next

    Image

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/combobox/index.html b/core/combobox/index.html index 2010fad108b..0f179d2192b 100644 --- a/core/combobox/index.html +++ b/core/combobox/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Combobox

    Create custom select, autocomplete or multiselect inputs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Combobox

    Create custom select, autocomplete or multiselect inputs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Examples

    This page contains only a small set of examples, as the full code of the demos is long. You can find all 50+ examples on a separate page.

    Open Combobox examples page @@ -1054,4 +1054,4 @@ */

    Component Styles API

    Hover over selectors to highlight corresponding elements

    /*
  * Hover over selectors to apply outline styles
  *
- */

    Previous

    Autocomplete

    Next

    MultiSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + */

    Previous

    Autocomplete

    Next

    MultiSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/container/index.html b/core/container/index.html index 029bb2cd90c..99afda1db1f 100644 --- a/core/container/index.html +++ b/core/container/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Container

    Center content with padding and max-width

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Container

    Center content with padding and max-width

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Container centers content and limits its max-width to the value specified in size prop. Note that the size prop does not make max-width responsive, for example, when it set to lg it will always be lg regardless of screen size.

    @@ -109,4 +109,4 @@ </Container> </MantineProvider> ); -}

    Previous

    Center

    Next

    Flex

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Center

    Next

    Flex

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/copy-button/index.html b/core/copy-button/index.html index e9c3fe0af61..63b4bac929c 100644 --- a/core/copy-button/index.html +++ b/core/copy-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CopyButton

    Copies given text to clipboard

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CopyButton

    Copies given text to clipboard

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    CopyButton is based on use-clipboard hook. Its children is a function that receives an object with the following properties:

      @@ -49,4 +49,4 @@ </CopyButton> ); }
    -

    Incompatible with server components

    CopyButton is not compatible with React server components as it requires function as children. To use CopyButton add "use client;" at the top of the file.

    Previous

    CloseButton

    Next

    FileButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Incompatible with server components

    CopyButton is not compatible with React server components as it requires function as children. To use CopyButton add "use client;" at the top of the file.

    Previous

    CloseButton

    Next

    FileButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/dialog/index.html b/core/dialog/index.html index 0cdcb26063e..513fb9ca6c3 100644 --- a/core/dialog/index.html +++ b/core/dialog/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dialog

    Display a fixed overlay dialog at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dialog

    Display a fixed overlay dialog at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Dialog is a simplified version of Modal component. It does not include most of accessibility and usability Modal features:

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +to select Modal, Drawer or Notifications.

    Previous

    Affix

    Next

    Drawer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/divider/index.html b/core/divider/index.html index a26c49982da..4392c516c6d 100644 --- a/core/divider/index.html +++ b/core/divider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Divider

    Horizontal line with optional label or vertical divider

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Divider

    Horizontal line with optional label or vertical divider

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, officiis! Fugit minus ea, perferendis eum consectetur quae vitae. Aliquid, quam reprehenderit? Maiores sed pariatur aliquid commodi atque sunt officiis natus?

    import { Text, Divider } from '@mantine/core';
 
 function Demo() {
@@ -112,4 +112,4 @@
       <Text>Label</Text>
     </Group>
   );
-}

    Previous

    Collapse

    Next

    FocusTrap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Collapse

    Next

    FocusTrap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/drawer/index.html b/core/drawer/index.html index ae89ca7cd98..701f1720f99 100644 --- a/core/drawer/index.html +++ b/core/drawer/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Drawer

    Display overlay area at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Drawer

    Display overlay area at any side of the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { useDisclosure } from '@mantine/hooks';
 import { Drawer, Button } from '@mantine/core';
 
@@ -302,4 +302,4 @@
       onClose={() => {}}
     />
   );
-}

    Previous

    Dialog

    Next

    HoverCard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Dialog

    Next

    HoverCard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/fieldset/index.html b/core/fieldset/index.html index 9dfad305a63..5296dfd57c7 100644 --- a/core/fieldset/index.html +++ b/core/fieldset/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Fieldset

    Group related elements in a form

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Fieldset

    Group related elements in a form

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Personal information
    Variant
    Radius
    import { Fieldset } from '@mantine/core';
 
 function Demo() {
@@ -30,4 +30,4 @@
       </Group>
     </Fieldset>
   );
-}

    Previous

    ColorPicker

    Next

    FileInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ColorPicker

    Next

    FileInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/file-button/index.html b/core/file-button/index.html index d0a90072c68..cc3d3bd92e9 100644 --- a/core/file-button/index.html +++ b/core/file-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileButton

    Open file picker with a button click

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileButton

    Open file picker with a button click

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { useState } from 'react';
 import { FileButton, Button, Group, Text } from '@mantine/core';
 
@@ -89,4 +89,4 @@
     </>
   );
 }
    -

    Incompatible with server components

    FileButton is not compatible with React server components as it requires function as children. To use FileButton add "use client;" at the top of the file.

    Previous

    CopyButton

    Next

    UnstyledButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Incompatible with server components

    FileButton is not compatible with React server components as it requires function as children. To use FileButton add "use client;" at the top of the file.

    Previous

    CopyButton

    Next

    UnstyledButton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/file-input/index.html b/core/file-input/index.html index dd6cd519f75..f2d88b07e97 100644 --- a/core/file-input/index.html +++ b/core/file-input/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileInput

    Capture files from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FileInput

    Capture files from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    FileInput component supports Input and Input.Wrapper components features and all input element props. FileInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { FileInput } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { FileInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -174,4 +174,4 @@
 
    import type { FileInputProps } from '@mantine/core';
 
 type SingleInputProps = FileInputProps<false>;
-type MultipleInputProps = FileInputProps<true>;
    Previous
    Fieldset
    Next
    Input
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +type MultipleInputProps = FileInputProps<true>;

    Previous

    Fieldset

    Next

    Input

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/flex/index.html b/core/flex/index.html index d5c425a5a75..07b380287e4 100644 --- a/core/flex/index.html +++ b/core/flex/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Flex

    Compose elements in a flex container

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Flex

    Compose elements in a flex container

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Gap
    import { Flex, Button } from '@mantine/core';
 
 function Demo() {
@@ -48,4 +48,4 @@
 Flex is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.
 Unlike Group and Stack Flex is polymorphic and supports responsive props.
    
 
    GroupStackFlex
    Directionhorizontalverticalboth
    Equal width children✅❌❌
    flex-wrap support✅❌✅
    Responsive flexbox props❌❌✅
    Polymorphic component❌❌✅
    
-
    Browser support
    Flex uses flexbox gap to add spacing between children. In older browsers, Flex children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.
    Previous
    Container
    Next
    Grid
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Browser support

    Flex uses flexbox gap to add spacing between children. In older browsers, Flex children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Container

    Next

    Grid

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/focus-trap/index.html b/core/focus-trap/index.html index 9193c2ce788..553258c58bc 100644 --- a/core/focus-trap/index.html +++ b/core/focus-trap/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FocusTrap

    Trap focus at child node

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    FocusTrap

    Trap focus at child node

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    FocusTrap is a component implementation of use-focus-trap hook, it is used in all Mantine components that require focus trap (Modal, DatePicker, Popover, etc.).

    import { useDisclosure } from '@mantine/hooks';
@@ -56,4 +56,4 @@
 
  • If there are no elements with data-autofocus attribute, then the first element that supports keyboard interaction is focused
    • 
 
  • If the target element does not have focusable elements or does not support ref, then the focus trap will not work
    • 
 
  • Trap stops working when element outside of the FocusTrap child is focused
    • 
-
    Previous
    Divider
    Next
    Paper
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Divider

    Next

    Paper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/grid/index.html b/core/grid/index.html index 9d3cc776f1e..a4988d9aef3 100644 --- a/core/grid/index.html +++ b/core/grid/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Grid

    Responsive 12 columns grid system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Grid

    Responsive 12 columns grid system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    1
    2
    3
    import { Grid } from '@mantine/core';
 
 function Demo() {
@@ -65,7 +65,7 @@
 }

    Grow

    If grow prop is set, column will grow to fill the remaining space in the row:

    -
    1
    2
    3
    4
    5
    Gutter
    import { Grid } from '@mantine/core';
+
    1
    2
    3
    4
    5
    Gutter
    import { Grid } from '@mantine/core';
 
 function Demo() {
   return (
@@ -189,4 +189,4 @@
       <Grid.Col span={6}>2</Grid.Col>
     </Grid>
   );
-}
    Previous
    Flex
    Next
    Group
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Flex

    Next

    Group

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/group/index.html b/core/group/index.html index 83b3b66dd07..4324a6f5f84 100644 --- a/core/group/index.html +++ b/core/group/index.html @@ -4,10 +4,10 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Group

    Compose elements and components in a horizontal flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Group

    Compose elements and components in a horizontal flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Group is a horizontal flex container. If you need a vertical flex container, use Stack component instead. If you need to have full control over flex container properties, use Flex component.

    -
    Gap
    import { Group, Button } from '@mantine/core';
+
    Gap
    import { Group, Button } from '@mantine/core';
 
 function Demo() {
   return (
@@ -73,4 +73,4 @@
     </Group>
   );
 }
    
-
    Browser support
    Group uses flexbox gap to add spacing between children. In older browsers, Group children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.
    Previous
    Grid
    Next
    SimpleGrid
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Browser support

    Group uses flexbox gap to add spacing between children. In older browsers, Group children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Grid

    Next

    SimpleGrid

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/highlight/index.html b/core/highlight/index.html index b30a75216e5..c2221aa79ea 100644 --- a/core/highlight/index.html +++ b/core/highlight/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Highlight

    Highlight given part of a string with mark

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Highlight

    Highlight given part of a string with mark

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Highlight component to highlight a substring in a given string with a mark tag.

    Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop. If the main string does not include highlight part, it will be ignored. @@ -64,4 +64,4 @@ Mantine website </Highlight> ); -}

    Previous

    Code

    Next

    List

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Code

    Next

    List

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/hover-card/index.html b/core/hover-card/index.html index e386197596c..0a38943b2a4 100644 --- a/core/hover-card/index.html +++ b/core/hover-card/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    HoverCard

    Display popover section when target element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    HoverCard

    Display popover section when target element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { HoverCard, Button, Text, Group } from '@mantine/core';
 
 function Demo() {
@@ -169,4 +169,4 @@
 }

    Accessibility

    HoverCard is ignored by screen readers and cannot be activated with keyboard, use it to display only additional information -that is not required to understand the context.

    Previous

    Drawer

    Next

    LoadingOverlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +that is not required to understand the context.

    Previous

    Drawer

    Next

    LoadingOverlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/image/index.html b/core/image/index.html index 28fb644276b..3b0a01a66a1 100644 --- a/core/image/index.html +++ b/core/image/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Image

    Image with optional fallback

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Image

    Image with optional fallback

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Image is a wrapper for img with minimal styles. By default, the image will take 100% of parent width. The image size can be controlled with w and h style props.

    @@ -71,4 +71,4 @@ function Demo() { return <Image component={NextImage} src={myImage} alt="My image" />; -}

    Previous

    ColorSwatch

    Next

    Indicator

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ColorSwatch

    Next

    Indicator

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/indicator/index.html b/core/indicator/index.html index 91971ce8654..00d66a4378c 100644 --- a/core/indicator/index.html +++ b/core/indicator/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Indicator

    Display element at the corner of another element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Radius
    Size
    import { Indicator, Avatar } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Indicator
    Display element at the corner of another element
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Radius
    Size
    import { Indicator, Avatar } from '@mantine/core';
 
 function Demo() {
   return (
@@ -85,4 +85,4 @@
       <Button onClick={toggle}>Toggle indicator</Button>
     </Stack>
   );
-}
    Previous
    Image
    Next
    Kbd
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Image

    Next

    Kbd

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/input/index.html b/core/input/index.html index 807a47c5752..626baf7479e 100644 --- a/core/input/index.html +++ b/core/input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Input

    Base component to create custom inputs

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Disclaimer

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Input

    Base component to create custom inputs

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Disclaimer

    !important: In most cases, you should not use Input in your application. Input is a base for other inputs and was not designed to be used directly. Use Input to create custom inputs, for other cases prefer TextInput @@ -30,7 +30,7 @@

    Usage

    Input component is used as base for some other inputs (NativeSelect, TextInput, Textarea, etc.). The purpose of the Input is to provide shared styles and features to other inputs.

    -
    Variant
    Size
    Radius
    import { Input } from '@mantine/core';
+
    Variant
    Size
    Radius
    import { Input } from '@mantine/core';
 
 function Demo() {
   return <Input placeholder="Input component" />;
@@ -100,7 +100,7 @@
 (TextInput, NativeSelect, Textarea, etc.)
 under the hood, you do not need to wrap your inputs with it, as it is already included in all of them.
 Use Input.Wrapper only when you want to create custom inputs.
    
-
    Input description
    Input error
    Size
    import { Input } from '@mantine/core';
+
    Input description
    Input error
    Size
    import { Input } from '@mantine/core';
 
 function Wrapper() {
   return (
@@ -415,4 +415,4 @@
       <Input id={id} />
     </Input.Wrapper>
   );
-}
    Previous
    FileInput
    Next
    JsonInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    FileInput

    Next

    JsonInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/json-input/index.html b/core/json-input/index.html index 831197e369f..cd9d62c9855 100644 --- a/core/json-input/index.html +++ b/core/json-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    JsonInput

    Capture json data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    JsonInput

    Capture json data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur:

    import { JsonInput } from '@mantine/core';
@@ -31,7 +31,7 @@
 }

    Input props

    JsonInput component supports Input and Input.Wrapper components features and all textarea element props. JsonInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { JsonInput } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { JsonInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -80,4 +80,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <JsonInput label="My input" />;
-}
    Previous
    Input
    Next
    NativeSelect
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Input

    Next

    NativeSelect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/kbd/index.html b/core/kbd/index.html index 019bd654d19..3fc9f7f7623 100644 --- a/core/kbd/index.html +++ b/core/kbd/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Kbd

    Display keyboard key

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Kbd

    Display keyboard key

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    ⌘ + Shift + M
    import { Kbd } from '@mantine/core';
 
 function Demo() {
@@ -13,4 +13,4 @@
       <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>M</Kbd>
     </div>
   );
-}

    Previous

    Indicator

    Next

    NumberFormatter

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Indicator

    Next

    NumberFormatter

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/list/index.html b/core/list/index.html index 83815d8afcd..9ddef0a847f 100644 --- a/core/list/index.html +++ b/core/list/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    List

    Display ordered or unordered list

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    • Clone or download repository from GitHub
    • Install dependencies with yarn
    • To start development server run npm start command
    • Run tests to make sure your changes do not break the build
    • Submit a pull request once you are done
    Type
    Size
    import { List } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    List
    Display ordered or unordered list
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    • Clone or download repository from GitHub
    • Install dependencies with yarn
    • To start development server run npm start command
    • Run tests to make sure your changes do not break the build
    • Submit a pull request once you are done
    Type
    Size
    import { List } from '@mantine/core';
 
 function Demo() {
   return (
@@ -85,4 +85,4 @@
       <List.Item>First order item</List.Item>
     </List>
   );
-}
    Previous
    Highlight
    Next
    Mark
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Highlight

    Next

    Mark

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/loader/index.html b/core/loader/index.html index bab5516d870..468823da957 100644 --- a/core/loader/index.html +++ b/core/loader/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Loader

    Indicate loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Loader

    Indicate loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Loader component supports 3 types of loaders: oval, bars and dots by default. All loaders are animated with CSS for better performance.

    Color
    Size
    Type
    import { Loader } from '@mantine/core';
@@ -84,7 +84,7 @@
 
    Loader supports children prop. If you pass anything to children, it will be rendered
 instead of the loader. This is useful when you want to control Loader representation
 in components that use loaderProps, for example Button, LoadingOverlay, Dropzone.
    
-
    import { useDisclosure } from '@mantine/hooks';
+
    import { useDisclosure } from '@mantine/hooks';
 import { LoadingOverlay, Button, Group, Box } from '@mantine/core';
 
 function Demo() {
@@ -102,4 +102,4 @@
       </Group>
     </>
   );
-}
    Previous
    Alert
    Next
    Notification
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    Alert

    Next

    Notification

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/loading-overlay/index.html b/core/loading-overlay/index.html index 16141200a9c..46d43324466 100644 --- a/core/loading-overlay/index.html +++ b/core/loading-overlay/index.html @@ -4,12 +4,12 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LoadingOverlay

    An overlay with centered loader

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    LoadingOverlay

    An overlay with centered loader

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    LoadingOverlay renders an overlay with a loader over the parent element with relative position. It is usually used to indicate loading state of forms. Note that elements under overlay are still focusable with keyboard, remember to add additional logic to handle this case.

    LoadingOverlay rendering is controlled by visible prop:

    -
    import { useDisclosure } from '@mantine/hooks';
+
    import { useDisclosure } from '@mantine/hooks';
 import { LoadingOverlay, Button, Group, Box } from '@mantine/core';
 
 function Demo() {
@@ -31,7 +31,7 @@
 }
    
 
    Loader props
    
 
    You can pass props down to the Loader component with loaderProps:
    
-
    import { useDisclosure } from '@mantine/hooks';
+
    import { useDisclosure } from '@mantine/hooks';
 import { LoadingOverlay, Button, Group, Box } from '@mantine/core';
 
 function Demo() {
@@ -59,7 +59,7 @@
 
    Custom inline loaders
    
 
    To replace default loader with any custom content, set loaderProps={{ children: <div>Your content</div> }}.
 You can put any React node inside loaderProps.children:
    
-
    import { useDisclosure } from '@mantine/hooks';
+
    import { useDisclosure } from '@mantine/hooks';
 import { LoadingOverlay, Button, Group, Box } from '@mantine/core';
 
 function Demo() {
@@ -77,4 +77,4 @@
       </Group>
     </>
   );
-}
    Previous
    HoverCard
    Next
    Menu
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    HoverCard

    Next

    Menu

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/mark/index.html b/core/mark/index.html index 6f7c326ba2c..a1a9139e9e3 100644 --- a/core/mark/index.html +++ b/core/mark/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mark

    Highlight part of the text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mark

    Highlight part of the text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Highlight this chunk of the text

    Color
    import { Text, Mark } from '@mantine/core';
 
 function Demo() {
@@ -13,4 +13,4 @@
       Highlight <Mark>this chunk</Mark> of the text
     </Text>
   );
-}

    Previous

    List

    Next

    Table

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    List

    Next

    Table

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/menu/index.html b/core/menu/index.html index df587aacaa2..4f3d9aac48f 100644 --- a/core/menu/index.html +++ b/core/menu/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Menu

    Combine a list of secondary actions into single interactive area

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Menu

    Combine a list of secondary actions into single interactive area

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Menu, Button, Text, rem } from '@mantine/core';
 import {
   IconSettings,
@@ -128,7 +128,7 @@
   );
 }

    Dropdown position

    -
    Offset
    import { Menu } from '@mantine/core';
+
    Offset
    import { Menu } from '@mantine/core';
 
 function Demo() {
   return (
@@ -369,4 +369,4 @@
 }
    
 
    Keyboard interactions
    
 
    KeyDescriptionCondition
    EscapeCloses dropdownFocus within dropdown
    Space/EnterOpens/closes dropdownFocus on target element
    ArrowUpMoves focus to previous menu itemFocus within dropdown
    ArrowDownMoves focus to next menu itemFocus within dropdown
    HomeMoves focus to first menu itemFocus within dropdown
    EndMoves focus to last menu itemFocus within dropdown
    
-
    If you also need to support Tab and Shift + Tab then set menuItemTabIndex={0}.
    Previous
    LoadingOverlay
    Next
    Modal
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    If you also need to support Tab and Shift + Tab then set menuItemTabIndex={0}.

    Previous

    LoadingOverlay

    Next

    Modal

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/modal/index.html b/core/modal/index.html index 523dda8aca9..182f915ab69 100644 --- a/core/modal/index.html +++ b/core/modal/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modal

    An accessible overlay dialog

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modal

    An accessible overlay dialog

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { useDisclosure } from '@mantine/hooks';
 import { Modal, Button } from '@mantine/core';
 
@@ -421,4 +421,4 @@
       onClose={() => {}}
     />
   );
-}

    Previous

    Menu

    Next

    Overlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Menu

    Next

    Overlay

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/multi-select/index.html b/core/multi-select/index.html index efc04343e65..737e574482b 100644 --- a/core/multi-select/index.html +++ b/core/multi-select/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MultiSelect

    Custom searchable multi select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    MultiSelect is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom multi select components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MultiSelect

    Custom searchable multi select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    MultiSelect is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom multi select components on the examples page.

    Usage

    MultiSelect provides a way to enter multiple values. MultiSelect is similar to TagsInput, but it does not allow entering custom values.

    @@ -100,7 +100,7 @@

    Checked option icon

    Set checkIconPosition prop to left or right to control position of check icon in active option. To remove the check icon, set withCheckIcon={false}.

    -
    React
    Check icon position
    import { MultiSelect } from '@mantine/core';
+
    React
    Check icon position
    import { MultiSelect } from '@mantine/core';
 
 function Demo() {
   return (
@@ -477,7 +477,7 @@
 }
    
 
    Input props
    
 
    MultiSelect component supports Input and Input.Wrapper components features and all input element props. MultiSelect documentation does not include all features supported by the component – see Input documentation to learn about all available features.
    
-
    Input description
    Variant
    Size
    Radius
    import { MultiSelect } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { MultiSelect } from '@mantine/core';
 
 function Demo() {
   return (
@@ -586,4 +586,4 @@
       }}
     />
   );
-}
    Previous
    Combobox
    Next
    Pill
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    Combobox

    Next

    Pill

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/native-select/index.html b/core/native-select/index.html index a250c97b998..1b0ada8da2a 100644 --- a/core/native-select/index.html +++ b/core/native-select/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NativeSelect

    Native select element based on Input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NativeSelect

    Native select element based on Input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    NativeSelect component supports Input and Input.Wrapper components features and all select element props. NativeSelect documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { NativeSelect } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { NativeSelect } from '@mantine/core';
 
 function Demo() {
   return <NativeSelect label="Input label" description="Input description" data={['React', 'Angular', 'Vue']} />;
@@ -258,4 +258,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <NativeSelect label="My input" />;
-}
    Previous
    JsonInput
    Next
    NumberInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    JsonInput

    Next

    NumberInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/nav-link/index.html b/core/nav-link/index.html index cc70c0a7d13..dbd98ebc854 100644 --- a/core/nav-link/index.html +++ b/core/nav-link/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavLink

    Navigation link

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavLink

    Navigation link

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    With icon
    With right section
    Disabled
    3
    With descriptionAdditional information
    Active subtle
    Active light
    Active filled
    import { Badge, NavLink } from '@mantine/core';
 import { IconHome2, IconGauge, IconChevronRight, IconActivity, IconCircleOff } from '@tabler/icons-react';
 
@@ -173,4 +173,4 @@
 function Demo() {
   const ref = useRef<HTMLAnchorElement>(null);
   return <NavLink ref={ref} />;
-}

    Previous

    Burger

    Next

    Pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Burger

    Next

    Pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/notification/index.html b/core/notification/index.html index b8b6dea2f31..d3bd053eba9 100644 --- a/core/notification/index.html +++ b/core/notification/index.html @@ -4,10 +4,10 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notification

    Show dynamic notifications and alerts to user, part of notifications system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notification

    Show dynamic notifications and alerts to user, part of notifications system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Notification is a base component for notification system. Build your own or use @mantine/notifications package.

    -
    Color
    Radius
    import { Notification } from '@mantine/core';
+
    Color
    Radius
    import { Notification } from '@mantine/core';
 
 function Demo() {
   return (
@@ -53,4 +53,4 @@
       closeButtonProps={{ 'aria-label': 'Hide notification' }}
     />
   );
-}
    Previous
    Loader
    Next
    Progress
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Loader

    Next

    Progress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/number-formatter/index.html b/core/number-formatter/index.html index a9a77fb2b8c..f1e2582272f 100644 --- a/core/number-formatter/index.html +++ b/core/number-formatter/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberFormatter

    Format number with thousands/decimal separators and suffix/prefix

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberFormatter

    Format number with thousands/decimal separators and suffix/prefix

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use NumberFormatter to format numbers. It supports the same formatting related props as NumberInput component.

    $ 1,000,000
    import { NumberFormatter } from '@mantine/core';
@@ -52,4 +52,4 @@
 
 function Demo() {
   return <NumberFormatter value={5 / 3} decimalScale={2} />;
-}

    Previous

    Kbd

    Next

    Spoiler

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Kbd

    Next

    Spoiler

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/number-input/index.html b/core/number-input/index.html index e7c00bfada7..83581b6a0d8 100644 --- a/core/number-input/index.html +++ b/core/number-input/index.html @@ -4,11 +4,11 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberInput

    Capture number from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NumberInput

    Capture number from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    NumberInput is based on react-number-format. It supports most of the props from the NumericFormat component in the original package.

    NumberInput component supports Input and Input.Wrapper components features and all input element props. NumberInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { NumberInput } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { NumberInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -321,4 +321,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <NumberInput label="My input" />;
-}
    Previous
    NativeSelect
    Next
    PasswordInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    NativeSelect

    Next

    PasswordInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/overlay/index.html b/core/overlay/index.html index fff0e7723dc..5143a0d7156 100644 --- a/core/overlay/index.html +++ b/core/overlay/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Overlay

    Overlays parent element with div element with any color and opacity

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Overlay

    Overlays parent element with div element with any color and opacity

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Overlay takes 100% of width and height of parent container or viewport if fixed prop is set. Set color and backgroundOpacity props to change Overlay background-color. Note that backgroundOpacity prop does not change CSS opacity property, it changes background-color. For example, if you set @@ -85,4 +85,4 @@ }

    Polymorphic components with TypeScript

    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, OverlayProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 

    import type { OverlayProps, ElementProps } from '@mantine/core';
 
 interface MyOverlayProps extends OverlayProps,
-  ElementProps<'a', keyof OverlayProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Modal

    Next

    Popover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + ElementProps<'a', keyof OverlayProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    Modal

    Next

    Popover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pagination/index.html b/core/pagination/index.html index 9cf92510358..a145b082305 100644 --- a/core/pagination/index.html +++ b/core/pagination/index.html @@ -4,14 +4,14 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Pagination

    Display active page and navigate between multiple pages

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Size
    Radius
    import { Pagination } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Pagination
    Display active page and navigate between multiple pages
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Size
    Radius
    import { Pagination } from '@mantine/core';
 
 function Demo() {
   return <Pagination total={10} />;
 }
    
 
    Example with chunked content
    
-
    id: 0, name: mantine-xoardx3d1
    id: 1, name: mantine-tvfq9z7aa
    id: 2, name: mantine-nrdh1gdrp
    id: 3, name: mantine-8ul8jkulr
    id: 4, name: mantine-3xh4b5d6v
    import { randomId } from '@mantine/hooks';
+
    id: 0, name: mantine-bfkkfk4j7
    id: 1, name: mantine-shho8jmsi
    id: 2, name: mantine-1kg9mp80p
    id: 3, name: mantine-sqp92a08m
    id: 4, name: mantine-ort9hc0vb
    import { randomId } from '@mantine/hooks';
 import { Pagination, Text } from '@mantine/core';
 
 function chunk<T>(array: T[], size: number): T[][] {
@@ -230,4 +230,4 @@
 }
    
 
    use-pagination hook
    
 
    If you need more flexibility @mantine/hooks package exports use-pagination hook,
-you can use it to create custom pagination components.
    Previous
    NavLink
    Next
    Stepper
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+you can use it to create custom pagination components.
    Previous
    NavLink
    Next
    Stepper
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/paper/index.html b/core/paper/index.html index 4320ae62d2f..b86239aeb4b 100644 --- a/core/paper/index.html +++ b/core/paper/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Paper

    Renders white or dark background depending on color scheme

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -

    Paper is the most basic ui component

    Use it to create cards, dropdowns, modals and other components that require background with shadow

    Shadow
    Radius
    import { Text, Paper } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Paper
    Renders white or dark background depending on color scheme
    Import
    Polymorphic
    Polymorphic component
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Paper is the most basic ui component
    Use it to create cards, dropdowns, modals and other components that require background with shadow
    Shadow
    Radius
    import { Text, Paper } from '@mantine/core';
 
 function Demo() {
   return (
@@ -30,4 +30,4 @@
 }
    Polymorphic components with TypeScript
    Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, PaperProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.
    If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example: 
    import type { PaperProps, ElementProps } from '@mantine/core';
 
 interface MyPaperProps extends PaperProps,
-  ElementProps<'button', keyof PaperProps> {}
    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.
    Previous
    FocusTrap
    Next
    Portal
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+  ElementProps<'button', keyof PaperProps> {}

    If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

    Previous

    FocusTrap

    Next

    Portal

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/password-input/index.html b/core/password-input/index.html index e206206356c..b3d2b2709b8 100644 --- a/core/password-input/index.html +++ b/core/password-input/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PasswordInput

    Capture password data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PasswordInput

    Capture password data from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    PasswordInput component supports Input and Input.Wrapper components features and all input element props. PasswordInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { PasswordInput } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { PasswordInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -248,4 +248,4 @@
       }}
     />
   );
-}
    Previous
    NumberInput
    Next
    PinInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    NumberInput

    Next

    PinInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pill/index.html b/core/pill/index.html index f6693717c27..144c0a46ece 100644 --- a/core/pill/index.html +++ b/core/pill/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Pill

    Removable and non-removable tags

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    React
    Size
    import { Pill } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Pill
    Removable and non-removable tags
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    React
    Size
    import { Pill } from '@mantine/core';
 
 function Demo() {
   return <Pill>React</Pill>;
@@ -37,4 +37,4 @@
  */
    Test pill
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
  * Hover over selectors to apply outline styles
  *
- */
    Previous
    MultiSelect
    Next
    PillsInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+ */

    Previous

    MultiSelect

    Next

    PillsInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pills-input/index.html b/core/pills-input/index.html index 28e749ed796..17ca7ad05d5 100644 --- a/core/pills-input/index.html +++ b/core/pills-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PillsInput

    Base component for custom tags inputs and multi selects

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PillsInput

    Base component for custom tags inputs and multi selects

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    PillsInput is a utility component that can be used to create custom tag inputs, multi selects and other similar components. By itself it does not include any logic, it only renders given children. Usually, PillsInput is used in combination with Pill component.

    @@ -24,7 +24,7 @@ }

    Input props

    PillsInput component supports Input and Input.Wrapper components features and all div element props. PillsInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    ReactVueSvelte
    Variant
    Size
    Radius
    import { PillsInput, Pill } from '@mantine/core';
+
    Input description
    ReactVueSvelte
    Variant
    Size
    Radius
    import { PillsInput, Pill } from '@mantine/core';
 
 function Demo() {
   return (
@@ -154,4 +154,4 @@
       <PillsInput.Field />
     </PillsInput>
   );
-}
    Previous
    Pill
    Next
    Select
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Pill

    Next

    Select

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/pin-input/index.html b/core/pin-input/index.html index 01a79858fdc..2b1fab3ebab 100644 --- a/core/pin-input/index.html +++ b/core/pin-input/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    PinInput

    Capture pin code or one time password from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Size
    Length
    import { PinInput } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    PinInput
    Capture pin code or one time password from the user
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Size
    Length
    import { PinInput } from '@mantine/core';
 
 function Demo() {
   return <PinInput />
@@ -42,4 +42,4 @@
 
 function Accessibility() {
   return <PinInput aria-label="One time code" />;
-}
    Previous
    PasswordInput
    Next
    Radio
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    PasswordInput

    Next

    Radio

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/popover/index.html b/core/popover/index.html index 99f9c5cdcb0..3a530040c73 100644 --- a/core/popover/index.html +++ b/core/popover/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Popover

    Display popover section relative to given target element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Popover

    Display popover section relative to given target element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Popover, Text, Button } from '@mantine/core';
 
 function Demo() {
@@ -164,7 +164,7 @@
 
    You can enable or disable Floating UI middlewares with
 middlewares prop:
    
 
      
-
    • shit middleware shifts the dropdown to keep it in view. It is enabled by default
      • 
+
    • shift middleware shifts the dropdown to keep it in view. It is enabled by default
      • 
 
    • flip middleware changes the placement of the dropdown to keep it in view. It is enabled by default.
      • 
 
    • inline middleware improves positioning for inline reference elements that span over multiple lines. It is disabled by default.
      • 
 
    
@@ -206,7 +206,7 @@
 }

    Disabled

    Set disabled prop to prevent Popover.Dropdown from rendering:

    -
    import { Popover, Text, Button } from '@mantine/core';
+
    import { Popover, Text, Button } from '@mantine/core';
 
 function Demo() {
   return (
@@ -369,4 +369,4 @@
 
    Uncontrolled Popover will be accessible only when used with button element or component that renders it (Button, ActionIcon, etc.).
 Other elements will not support Space and Enter key presses.
    
 
    Keyboard interactions
    
-
    KeyDescriptionCondition
    EscapeCloses dropdownFocus within dropdown
    Space/EnterOpens/closes dropdownFocus on target element
    Previous
    Overlay
    Next
    Tooltip
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +
    KeyDescriptionCondition
    EscapeCloses dropdownFocus within dropdown
    Space/EnterOpens/closes dropdownFocus on target element

    Previous

    Overlay

    Next

    Tooltip

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/portal/index.html b/core/portal/index.html index aa7f394dd12..f224a673026 100644 --- a/core/portal/index.html +++ b/core/portal/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Portal

    Renders component outside of parent element tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Portal

    Renders component outside of parent element tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Portal is a wrapper component for ReactDOM.createPortal API. Render any component or element at the end of document.body or at a given element. Modal and Drawer components are wrapped in Portal by default.

    Use Portal to render a component or an element at a different place (defaults to the end of document.body). @@ -69,4 +69,4 @@ </OptionalPortal> </> ); -}

    Previous

    Paper

    Next

    ScrollArea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Paper

    Next

    ScrollArea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/progress/index.html b/core/progress/index.html index 6ed3345894f..5598e937b55 100644 --- a/core/progress/index.html +++ b/core/progress/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Progress

    Give user feedback for status of the task

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Radius
    Size
    Value
    import { Progress } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Progress
    Give user feedback for status of the task
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Radius
    Size
    Value
    import { Progress } from '@mantine/core';
 
 function Demo() {
   return <Progress value={50} />;
@@ -97,4 +97,4 @@
       <Progress.Section aria-label="Uploading progress" value={10} />
     </Progress.Root>
   );
-}
    Previous
    Notification
    Next
    RingProgress
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Notification

    Next

    RingProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/radio/index.html b/core/radio/index.html index af60325e582..adb30a09fbe 100644 --- a/core/radio/index.html +++ b/core/radio/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Radio

    Wrapper for input type radio

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Label position
    Size
    Color
    Variant
    import { Radio } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Radio
    Wrapper for input type radio
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Label position
    Size
    Color
    Variant
    import { Radio } from '@mantine/core';
 
 function Demo() {
   return (
@@ -28,7 +28,7 @@
   );
 }
    
 
    States
    
-
    import { Radio, Stack } from '@mantine/core';
+
    import { Radio, Stack } from '@mantine/core';
 
 function Demo() {
   return (
@@ -42,7 +42,7 @@
   );
 }
    
 
    Change icon
    
-
    import { Radio, CheckIcon } from '@mantine/core';
+
    import { Radio, CheckIcon } from '@mantine/core';
 
 function Demo() {
   return (
@@ -50,7 +50,7 @@
   );
 }
    
 
    Change icon color
    
-
    import { Radio } from '@mantine/core';
+
    import { Radio } from '@mantine/core';
 
 function Demo() {
   return (
@@ -65,7 +65,7 @@
   );
 }
    
 
    Disabled state
    
-
    import { Radio, Group } from '@mantine/core';
+
    import { Radio, Group } from '@mantine/core';
 
 function Demo() {
   return (
@@ -98,7 +98,7 @@
 
  • If refProp is not set, the tooltip is attached to the checkbox input
    • 
 
  • If refProp="rootRef" is set, the tooltip is attached to the root element (contains label, input and other elements)
    • 
 
-
    import { Tooltip, Radio } from '@mantine/core';
+
    import { Tooltip, Radio } from '@mantine/core';
 
 function Demo() {
   return (
@@ -119,7 +119,7 @@
   return <Radio wrapperProps={{ 'data-testid': 'wrapper' }} data-testid="input" />;
 }
    
 
    Radio.Group component
    
-
    Select your favorite framework/library
    This is anonymous
    import { Radio } from '@mantine/core';
+
    Select your favorite framework/library
    This is anonymous
    import { Radio } from '@mantine/core';
 
 function Demo() {
   return (
@@ -172,7 +172,7 @@
 
    Radio description
    Radio error
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
+ */
    Radio description
    Radio error
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
  * Hover over selectors to apply outline styles
  *
  */
    
@@ -193,4 +193,4 @@
 // Ok, input is labelled by label element
 function GoodLabel() {
   return <Radio label="My radio" />;
-}
    Previous
    PinInput
    Next
    Rating
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    PinInput

    Next

    Rating

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/rating/index.html b/core/rating/index.html index f3ca6f7ca6a..efe25ec4c76 100644 --- a/core/rating/index.html +++ b/core/rating/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rating

    Pick and display rating

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Size
    Count
    import { Rating } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Rating
    Pick and display rating
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Size
    Count
    import { Rating } from '@mantine/core';
 
 function Demo() {
   return <Rating defaultValue={2} />
@@ -106,4 +106,4 @@
 
 function Demo() {
   return <Rating emptySymbol={getEmptyIcon} fullSymbol={getFullIcon} highlightSelectedOnly />;
-}
    Previous
    Radio
    Next
    SegmentedControl
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Radio

    Next

    SegmentedControl

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/ring-progress/index.html b/core/ring-progress/index.html index 95c1778f6ca..48d7b2abfc9 100644 --- a/core/ring-progress/index.html +++ b/core/ring-progress/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RingProgress

    Give user feedback for status of the task with circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    RingProgress

    Give user feedback for status of the task with circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Set sections prop to an array of:

    • value – number between 0 and 100 – amount of space filled by segment
      • @@ -30,7 +30,7 @@ }

    Size, thickness & rounded caps

    Use size, thickness & roundCaps props to configure RingProgress, size and thickness values:

    -
    Size
    Thickness
    import { RingProgress } from '@mantine/core';
+
    Size
    Thickness
    import { RingProgress } from '@mantine/core';
 function Demo() {
   return (
     <RingProgress
@@ -127,4 +127,4 @@
       />
     </>
   );
-}
    Previous
    Progress
    Next
    Skeleton
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Progress

    Next

    Skeleton

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/scroll-area/index.html b/core/scroll-area/index.html index cc07f3b284f..ab3bbd2ea84 100644 --- a/core/scroll-area/index.html +++ b/core/scroll-area/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ScrollArea

    Area with custom scrollbars

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ScrollArea

    Area with custom scrollbars

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    ScrollArea component supports the following props:

    • type defines scrollbars behavior: @@ -20,7 +20,7 @@
    • scrollbarSize – scrollbar size, controls scrollbar and thumb width/height
    • scrollHideDelay – delay in ms to hide scrollbars, applicable only when type is hover or scroll
    -

    Charizard (Pokémon)

    Charizard description from Bulbapedia

    Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.

    As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.

    Scrollbar size
    Scroll hide delay
    import { ScrollArea } from '@mantine/core';
+
    Charizard (Pokémon)
    Charizard description from Bulbapedia
    Charizard is a draconic, bipedal Pokémon. It is primarily orange with a cream underside from the chest to the tip of its tail. It has a long neck, small blue eyes, slightly raised nostrils, and two horn-like structures protruding from the back of its rectangular head. There are two fangs visible in the upper jaw when its mouth is closed. Two large wings with blue-green undersides sprout from its back, and a horn-like appendage juts out from the top of the third joint of each wing. A single wing-finger is visible through the center of each wing membrane. Charizard's arms are short and skinny compared to its robust belly, and each limb has three white claws. It has stocky legs with cream-colored soles on each of its plantigrade feet. The tip of its long, tapering tail burns with a sizable flame.
    As Mega Charizard X, its body and legs are more physically fit, though its arms remain thin. Its skin turns black with a sky-blue underside and soles. Two spikes with blue tips curve upward from the front and back of each shoulder, while the tips of its horns sharpen, turn blue, and curve slightly upward. Its brow and claws are larger, and its eyes are now red. It has two small, fin-like spikes under each horn and two more down its lower neck. The finger disappears from the wing membrane, and the lower edges are divided into large, rounded points. The third joint of each wing-arm is adorned with a claw-like spike. Mega Charizard X breathes blue flames out the sides of its mouth, and the flame on its tail now burns blue. It is said that its new power turns it black and creates more intense flames.
    Scrollbar size
    Scroll hide delay
    import { ScrollArea } from '@mantine/core';
 
 function Demo() {
   return (
@@ -352,4 +352,4 @@
       </Popover.Dropdown>
     </Popover>
   );
-}
    Previous
    Portal
    Next
    Transition
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Portal

    Next

    Transition

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/segmented-control/index.html b/core/segmented-control/index.html index f4b0f04e6e5..e93054c1a73 100644 --- a/core/segmented-control/index.html +++ b/core/segmented-control/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SegmentedControl

    A linear set of two or more segments

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Orientation
    Size
    Radius
    import { SegmentedControl } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    SegmentedControl
    A linear set of two or more segments
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Orientation
    Size
    Radius
    import { SegmentedControl } from '@mantine/core';
 
 function Demo() {
   return <SegmentedControl data={['React', 'Angular', 'Vue']} />;
@@ -215,4 +215,4 @@
       ]}
     />
   );
-}
    Previous
    Rating
    Next
    Slider
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Rating

    Next

    Slider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/select/index.html b/core/select/index.html index 1f33990bf4a..793a9ed2603 100644 --- a/core/select/index.html +++ b/core/select/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Select

    Custom searchable select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Select is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom select components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Select

    Custom searchable select

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    Select is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom select components on the examples page.

    Usage

    Select allows capturing user input based on suggestions from the list. Unlike Autocomplete, Select does not allow entering custom values.

    @@ -148,7 +148,7 @@

    Checked option icon

    Set checkIconPosition prop to left or right to control position of check icon in active option. To remove the check icon, set withCheckIcon={false}.

    -
    Check icon position
    import { Select } from '@mantine/core';
+
    Check icon position
    import { Select } from '@mantine/core';
 
 function Demo() {
   return (
@@ -495,7 +495,7 @@
 }
    
 
    Input props
    
 
    Select component supports Input and Input.Wrapper components features and all input element props. Select documentation does not include all features supported by the component – see Input documentation to learn about all available features.
    
-
    Input description
    Variant
    Size
    Radius
    import { Select } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { Select } from '@mantine/core';
 
 function Demo() {
   return (
@@ -604,4 +604,4 @@
       }}
     />
   );
-}
    Previous
    PillsInput
    Next
    TagsInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    PillsInput

    Next

    TagsInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/simple-grid/index.html b/core/simple-grid/index.html index 74af99010eb..7fdb7b18f67 100644 --- a/core/simple-grid/index.html +++ b/core/simple-grid/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SimpleGrid

    Responsive grid in which each item takes equal amount of space

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    SimpleGrid

    Responsive grid in which each item takes equal amount of space

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    SimpleGrid is a responsive grid system with equal-width columns. It uses CSS grid layout. If you need to set different widths for columns, use Grid component instead.

    @@ -63,4 +63,4 @@ }

    Browser support

    SimpleGrid uses CSS Grid Layout, it is supported in all modern browsers. -If you need to support older browsers, use Grid (flexbox based) component instead.

    Previous

    Group

    Next

    Space

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +If you need to support older browsers, use Grid (flexbox based) component instead.

    Previous

    Group

    Next

    Space

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/skeleton/index.html b/core/skeleton/index.html index ac5e2961117..29fc659ae5b 100644 --- a/core/skeleton/index.html +++ b/core/skeleton/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Skeleton

    Indicate content loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Skeleton

    Indicate content loading state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Skeleton to create a placeholder for loading content. Skeleton support the following props:

    • height – height – any valid CSS value
      • @@ -13,7 +13,7 @@
    • circle – if true width, height and border-radius will equal to value specified in height prop
    • animate – true by default, controls animation
    -
    import { Skeleton } from '@mantine/core';
+
    import { Skeleton } from '@mantine/core';
 
   function Demo() {
     return (
@@ -46,4 +46,4 @@
       </Button>
     </>
   );
-}
    Previous
    RingProgress
    Next
    Affix
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    RingProgress

    Next

    Affix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/slider/index.html b/core/slider/index.html index cc44b6457ee..67c9a3260f5 100644 --- a/core/slider/index.html +++ b/core/slider/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Slider

    Slider and RangeSlider components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    20%
    50%
    80%
    Color
    Size
    Radius
    import { Slider } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Slider
    Slider and RangeSlider components
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    20%
    50%
    80%
    Color
    Size
    Radius
    import { Slider } from '@mantine/core';
 
 function Demo() {
   return (
@@ -334,4 +334,4 @@
   );
 }
    
 
    Keyboard interactions
    
-
    KeyDescription
    ArrowRight/ArrowUpIncreases slider value by one step
    ArrowLeft/ArrowDownDecreases slider value by one step
    HomeSets slider value to min value
    EndSets slider value to max value
    Previous
    SegmentedControl
    Next
    Switch
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+
    KeyDescription
    ArrowRight/ArrowUpIncreases slider value by one step
    ArrowLeft/ArrowDownDecreases slider value by one step
    HomeSets slider value to min value
    EndSets slider value to max value
    Previous
    SegmentedControl
    Next
    Switch
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/space/index.html b/core/space/index.html index fd14fa9f902..a7faa730fc5 100644 --- a/core/space/index.html +++ b/core/space/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Space

    Add horizontal or vertical spacing from theme

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Space

    Add horizontal or vertical spacing from theme

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Space component to add horizontal or vertical spacing between elements:

    First line

    Second line

    H
    import { Text, Space } from '@mantine/core';
 
@@ -56,4 +56,4 @@
       <div>Second line</div>
     </>
   );
-}

    Previous

    SimpleGrid

    Next

    Stack

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    SimpleGrid

    Next

    Stack

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/spoiler/index.html b/core/spoiler/index.html index 3dda0c6ac6e..2f9711f1370 100644 --- a/core/spoiler/index.html +++ b/core/spoiler/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spoiler

    Hide long sections of content under a spoiler

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spoiler

    Hide long sections of content under a spoiler

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Spoiler to hide long section of content. Set maxHeight prop to control point at which content will be hidden under spoiler and show/hide control appears. If the content height is less than maxHeight, the spoiler will just render children.

    @@ -37,4 +37,4 @@ function Demo() { const spoilerControlRef = useRef<HTMLButtonElement>(null); return <Spoiler controlRef={spoilerControlRef} />; -}

    Previous

    NumberFormatter

    Next

    ThemeIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    NumberFormatter

    Next

    ThemeIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/stack/index.html b/core/stack/index.html index 8c558345758..2296f8f2290 100644 --- a/core/stack/index.html +++ b/core/stack/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stack

    Compose elements and components in a vertical flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stack

    Compose elements and components in a vertical flex container

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Stack is a vertical flex container. If you need a horizontal flex container, use Group component instead. If you need to have full control over flex container properties, use Flex component.

    Gap
    import { Stack, Button } from '@mantine/core';
@@ -21,4 +21,4 @@
     </Stack>
   );
 }
    -

    Browser support

    Stack uses flexbox gap to add spacing between children. In older browsers, Stack children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Space

    Next

    Checkbox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Browser support

    Stack uses flexbox gap to add spacing between children. In older browsers, Stack children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.

    Previous

    Space

    Next

    Checkbox

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/stepper/index.html b/core/stepper/index.html index 5fdaa95bb4c..aee25338bca 100644 --- a/core/stepper/index.html +++ b/core/stepper/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stepper

    Display content divided into a steps sequence

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Stepper

    Display content divided into a steps sequence

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Step 2 content: Verify email
    import { useState } from 'react';
 import { Stepper, Button, Group } from '@mantine/core';
 
@@ -398,4 +398,4 @@
 
    <Stepper.Step /> // -> not ok, empty labels for screen reader
 <Stepper.Step label="Step 1" description="Create an account" /> // -> ok
 <Stepper.Step aria-label="Create an account" /> // -> ok
-<Stepper.Step title="Create an account" /> // -> ok
    Previous
    Pagination
    Next
    Tabs
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +<Stepper.Step title="Create an account" /> // -> ok

    Previous

    Pagination

    Next

    Tabs

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/switch/index.html b/core/switch/index.html index ad5df6e22a4..6f824dd5c6b 100644 --- a/core/switch/index.html +++ b/core/switch/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Switch

    Capture boolean input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    -
    Color
    Label position
    Size
    Radius
    import { Switch } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Switch
    Capture boolean input from user
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/core
    Usage
    
+
    Color
    Label position
    Size
    Radius
    import { Switch } from '@mantine/core';
 
 function Demo() {
   return (
@@ -29,7 +29,7 @@
   );
 }
    
 
    Inner Labels
    
-
    import { Switch, Group } from '@mantine/core';
+
    import { Switch, Group } from '@mantine/core';
 
 function Demo() {
   return (
@@ -43,7 +43,7 @@
   );
 }
    
 
    Icon labels
    
-
    import { Switch, useMantineTheme, rem } from '@mantine/core';
+
    import { Switch, useMantineTheme, rem } from '@mantine/core';
 import { IconSun, IconMoonStars } from '@tabler/icons-react';
 
 function Demo() {
@@ -68,7 +68,7 @@
   return <Switch size="md" color="dark.4" onLabel={sunIcon} offLabel={moonIcon} />;
 }
    
 
    Thumb icon
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { Switch, useMantineTheme, rem } from '@mantine/core';
 import { IconCheck, IconX } from '@tabler/icons-react';
 
@@ -102,7 +102,7 @@
 }
    
 
    With tooltip
    
 
    Set refProp="rootRef" on Tooltip and other similar components to make them work with Switch:
    
-
    import { Switch, Tooltip } from '@mantine/core';
+
    import { Switch, Tooltip } from '@mantine/core';
 
 function Demo() {
   return (
@@ -133,7 +133,7 @@
   return <Switch wrapperProps={{ 'data-testid': 'wrapper' }} data-testid="input" />;
 }
    
 
    Switch.Group
    
-
    Select your favorite framework/library
    This is anonymous
    import { Switch, Group } from '@mantine/core';
+
    Select your favorite framework/library
    This is anonymous
    import { Switch, Group } from '@mantine/core';
 function Demo() {
   return (
     <Switch.Group
@@ -169,7 +169,7 @@
 
    Switch description
    Switch error
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
+ */
    Switch description
    Switch error
    Component Styles API
    Hover over selectors to highlight corresponding elements
    /*
  * Hover over selectors to apply outline styles
  *
  */
    
@@ -198,4 +198,4 @@
 // -> ok, input has associated label
 function AlsoGood() {
   return <Switch label="I agree to everything" />;
-}
    Previous
    Slider
    Next
    Textarea
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Slider

    Next

    Textarea

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/table/index.html b/core/table/index.html index df7a493bb6d..dabbec1b377 100644 --- a/core/table/index.html +++ b/core/table/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Table

    Render table with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Table

    Render table with theme styles

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Table data for all examples:

    const elements = [
   { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
@@ -148,7 +148,7 @@
   );
 }

    Striped and rows hover

    -
    Element positionElement nameSymbolAtomic mass
    6CarbonC12.011
    7NitrogenN14.007
    39YttriumY88.906
    56BariumBa137.33
    58CeriumCe140.12
    import { Table } from '@mantine/core';
+
    Element positionElement nameSymbolAtomic mass
    6CarbonC12.011
    7NitrogenN14.007
    39YttriumY88.906
    56BariumBa137.33
    58CeriumCe140.12
    import { Table } from '@mantine/core';
 
 function Demo() {
   return (
@@ -219,7 +219,7 @@
   );
 }
    
 
    Example: Table with row selection
    
-
    Element positionElement nameSymbolAtomic mass
    		6CarbonC12.011
    		7NitrogenN14.007
    		39YttriumY88.906
    		56BariumBa137.33
    		58CeriumCe140.12
    import { Table, Checkbox } from '@mantine/core';
+
    Element positionElement nameSymbolAtomic mass
    		6CarbonC12.011
    		7NitrogenN14.007
    		39YttriumY88.906
    		56BariumBa137.33
    		58CeriumCe140.12
    import { Table, Checkbox } from '@mantine/core';
 
 const elements = [
   { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
@@ -271,4 +271,4 @@
       <Table.Tbody>{rows}</Table.Tbody>
     </Table>
   );
-}
    Previous
    Mark
    Next
    Text
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    Mark

    Next

    Text

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tabs/index.html b/core/tabs/index.html index 1e114a56ae4..6b59ad1b5c5 100644 --- a/core/tabs/index.html +++ b/core/tabs/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tabs

    Switch between different views

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tabs

    Switch between different views

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Color
    Variant
    Radius
    Orientation
    import { Tabs, rem } from '@mantine/core';
 import { IconPhoto, IconMessageCircle, IconSettings } from '@tabler/icons-react';
 
@@ -103,7 +103,7 @@
   );
 }

    Tabs position

    -
    import { Tabs } from '@mantine/core';
+
    import { Tabs } from '@mantine/core';
 
 function Demo() {
   return (
@@ -392,4 +392,4 @@
   );
 }
    
 
    Keyboard interactions
    
-
    KeyDescriptionCondition
    ArrowRightFocuses and activates next tab that is not disabledorientation="horizontal"
    ArrowLeftFocuses and activates previous tab that is not disabledorientation="horizontal"
    ArrowDownFocuses and activates next tab that is not disabledorientation="vertical"
    ArrowUpFocuses and activates previous tab that is not disabledorientation="vertical"
    HomeFocuses and activates first tab–
    EndFocuses and activates last tab–
    Previous
    Stepper
    Next
    Alert
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescriptionCondition
    ArrowRightFocuses and activates next tab that is not disabledorientation="horizontal"
    ArrowLeftFocuses and activates previous tab that is not disabledorientation="horizontal"
    ArrowDownFocuses and activates next tab that is not disabledorientation="vertical"
    ArrowUpFocuses and activates previous tab that is not disabledorientation="vertical"
    HomeFocuses and activates first tab–
    EndFocuses and activates last tab–

    Previous

    Stepper

    Next

    Alert

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tags-input/index.html b/core/tags-input/index.html index 6057ae26930..afbcfafc2d9 100644 --- a/core/tags-input/index.html +++ b/core/tags-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TagsInput

    Capture a list of values from user with free input and suggestions

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    TagsInput is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom tags input components on the examples page.

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TagsInput

    Capture a list of values from user with free input and suggestions

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Made with Combobox

    TagsInput is an opinionated component built on top of Combobox component. It has a limited set of features to cover only the basic use cases. If you need more advanced features, you can build your own component with Combobox. You can find examples of custom tags input components on the examples page.

    Usage

    TagsInput provides a way to enter multiple values. It can be used with suggestions or without them. TagsInput is similar to MultiSelect, but it allows entering custom values.

    @@ -412,7 +412,7 @@ }

    Input props

    TagsInput component supports Input and Input.Wrapper components features and all input element props. TagsInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    FirstSecond
    Variant
    Size
    Radius
    import { TagsInput } from '@mantine/core';
+
    Input description
    FirstSecond
    Variant
    Size
    Radius
    import { TagsInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -522,4 +522,4 @@
       }}
     />
   );
-}
    Previous
    Select
    Next
    ActionIcon
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Select

    Next

    ActionIcon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/text-input/index.html b/core/text-input/index.html index abde600e653..54257789987 100644 --- a/core/text-input/index.html +++ b/core/text-input/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TextInput

    Capture string input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TextInput

    Capture string input from user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    TextInput component supports Input and Input.Wrapper components features and all input element props. TextInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { TextInput } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { TextInput } from '@mantine/core';
 
 function Demo() {
   return (
@@ -106,4 +106,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <TextInput label="My input" />;
-}
    Previous
    Textarea
    Next
    Autocomplete
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Textarea

    Next

    Autocomplete

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/text/index.html b/core/text/index.html index c69b614dc58..bf97defdd21 100644 --- a/core/text/index.html +++ b/core/text/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Text

    Display text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Text

    Display text

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Extra small text

    Small text

    Default text

    Large text

    Extra large text

    Semibold

    Bold

    Italic

    Underlined

    Strikethrough

    Dimmed text

    Blue text

    Teal 4 text

    Uppercase

    capitalized text

    Aligned to center

    Aligned to right

    import { Text } from '@mantine/core';
 
 function Demo() {
@@ -119,4 +119,4 @@
       <Text component="span">Same as above</Text>
     </>
   );
-}

    Previous

    Table

    Next

    Title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Table

    Next

    Title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/textarea/index.html b/core/textarea/index.html index ab5eb113b98..f33a4f41704 100644 --- a/core/textarea/index.html +++ b/core/textarea/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Textarea

    Autosize or regular textarea

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Textarea

    Autosize or regular textarea

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Textarea component supports Input and Input.Wrapper components features and all textarea element props. Textarea documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { Textarea } from '@mantine/core';
+
    Input description
    Variant
    Size
    Radius
    import { Textarea } from '@mantine/core';
 
 function Demo() {
   return (
@@ -115,4 +115,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <Textarea label="My input" />;
-}
    Previous
    Switch
    Next
    TextInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Switch

    Next

    TextInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/theme-icon/index.html b/core/theme-icon/index.html index 4efefece9bf..b18edbe77ff 100644 --- a/core/theme-icon/index.html +++ b/core/theme-icon/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ThemeIcon

    Render icon inside element with theme colors

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    ThemeIcon

    Render icon inside element with theme colors

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Radius
    Size
    Color
    import { ThemeIcon } from '@mantine/core';
 import { IconPhoto } from '@tabler/icons-react';
 
@@ -120,4 +120,4 @@
       </ThemeIcon>
     </Group>
   );
-}

    Previous

    Spoiler

    Next

    Timeline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Spoiler

    Next

    Timeline

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/timeline/index.html b/core/timeline/index.html index dde1642e099..39cf16f5a10 100644 --- a/core/timeline/index.html +++ b/core/timeline/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Timeline

    Display list of events in chronological order

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Timeline

    Display list of events in chronological order

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    New branch

    You've created new branch fix-notifications from master

    2 hours ago

    Commits

    You've pushed 23 commits to fix-notifications branch

    52 minutes ago

    Pull request

    You've submitted a pull request Fix incorrect notification message (#187)

    34 minutes ago

    Code review

    Robert Gluesticker left a code review on your pull request

    12 minutes ago

    import { Timeline, Text } from '@mantine/core';
 import { IconGitBranch, IconGitPullRequest, IconGitCommit, IconMessageDots } from '@tabler/icons-react';
 
@@ -42,7 +42,7 @@
 
  • bulletSize – bullet width, height and border-radius
    • 
 
  • align – defines line and bullets position relative to content, also sets text-align
    • 
 
-
    New branch
    You've created new branch fix-notifications from master
    2 hours ago
    Commits
    You've pushed 23 commits to fix-notifications branch
    52 minutes ago
    Pull request
    You've submitted a pull request Fix incorrect notification message (#187) 
    34 minutes ago
    Code review
    Robert Gluesticker left a code review on your pull request
    12 minutes ago
    Color
    Radius
    Active
    Line width
    Bullet size
    Align
    import { Timeline } from '@mantine/core';
+
    New branch
    You've created new branch fix-notifications from master
    2 hours ago
    Commits
    You've pushed 23 commits to fix-notifications branch
    52 minutes ago
    Pull request
    You've submitted a pull request Fix incorrect notification message (#187) 
    34 minutes ago
    Code review
    Robert Gluesticker left a code review on your pull request
    12 minutes ago
    Color
    Radius
    Active
    Line width
    Bullet size
    Align
    import { Timeline } from '@mantine/core';
 
 function Demo() {
   return (
@@ -132,4 +132,4 @@
       <Timeline.Item title="Regular item">Third item</Timeline.Item>
     </Timeline>
   );
-}
    Previous
    ThemeIcon
    Next
    Blockquote
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    ThemeIcon

    Next

    Blockquote

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/title/index.html b/core/title/index.html index 44cbd8cbbd3..c09f871d945 100644 --- a/core/title/index.html +++ b/core/title/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Title

    h1-h6 heading

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Title

    h1-h6 heading

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Use Title component to render h1-h6 headings with Mantine theme styles. By default, Title has no margins and paddings. You can change font-size, font-weight and line-height per heading with theme.headings.

    @@ -85,4 +85,4 @@ </Title> </Box> ) -}

    Previous

    Text

    Next

    TypographyStylesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Text

    Next

    TypographyStylesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/tooltip/index.html b/core/tooltip/index.html index afb15b86f3b..d0daa6e4bcd 100644 --- a/core/tooltip/index.html +++ b/core/tooltip/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tooltip

    Renders tooltip at given element on mouse over or other event

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tooltip

    Renders tooltip at given element on mouse over or other event

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    import { Tooltip, Button } from '@mantine/core';
 
 function Demo() {
@@ -342,4 +342,4 @@
       <Button>Button with tooltip</Button>
     </Tooltip>
   );
-}

    Previous

    Popover

    Next

    Accordion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Popover

    Next

    Accordion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/transition/index.html b/core/transition/index.html index 3dd5f91f75c..c78e1ab8416 100644 --- a/core/transition/index.html +++ b/core/transition/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Transition

    Animate presence of component with pre-made animations

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Premade transitions

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Transition

    Animate presence of component with pre-made animations

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Premade transitions

    Mantine includes several premade transitions:

    fade
    scale
    scale-y
    scale-x
    skew-up
    skew-down
    rotate-left
    rotate-right
    slide-down
    slide-up
    slide-left
    slide-right
    pop
    pop-bottom-left
    pop-bottom-right
    pop-top-left
    pop-top-right

    To use one of them set transition property to one of these values:

    @@ -77,4 +77,4 @@ </Transition> </Box> ); -}

    Previous

    ScrollArea

    Next

    VisuallyHidden

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    ScrollArea

    Next

    VisuallyHidden

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/typography-styles-provider/index.html b/core/typography-styles-provider/index.html index a2832c923cd..6eaed4d1931 100644 --- a/core/typography-styles-provider/index.html +++ b/core/typography-styles-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TypographyStylesProvider

    Styles provider for html content

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TypographyStylesProvider

    Styles provider for html content

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Mantine does not include typography global styles. Use TypographyStylesProvider to add typography styles to your html content:

    import { TypographyStylesProvider } from '@mantine/core';
@@ -103,4 +103,4 @@ 
    Heading 6
    
   return <Avatar src={image} alt="it's me" />;
 }
    -
    Element positionElement nameSymbolAtomic mass
    6CarbonC12.011
    7NitrogenN14.007
    39YttriumY88.906
    56BariumBa137.33
    58CeriumCe140.12

    Previous

    Title

    Next

    Box

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Element positionElement nameSymbolAtomic mass
    6CarbonC12.011
    7NitrogenN14.007
    39YttriumY88.906
    56BariumBa137.33
    58CeriumCe140.12

    Previous

    Title

    Next

    Box

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/unstyled-button/index.html b/core/unstyled-button/index.html index df67a1899f4..76f4d06ed69 100644 --- a/core/unstyled-button/index.html +++ b/core/unstyled-button/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    UnstyledButton

    Unstyled polymorphic button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    UnstyledButton

    Unstyled polymorphic button

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    UnstyledButton resets default button styles, it is used as a base for all other button components. You can use it to as a base for custom polymorphic buttons.

    @@ -27,4 +27,4 @@ function Demo() { const ref = useRef<HTMLButtonElement>(null); return <UnstyledButton ref={ref} />; -}

    Previous

    FileButton

    Next

    Anchor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    FileButton

    Next

    Anchor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/visually-hidden/index.html b/core/visually-hidden/index.html index 3132dc0689b..6d2d7b86d81 100644 --- a/core/visually-hidden/index.html +++ b/core/visually-hidden/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    VisuallyHidden

    Hide element visually but keep it accessible for screen readers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    VisuallyHidden

    Hide element visually but keep it accessible for screen readers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    VisuallyHidden is a utility component that hides content visually but leaves it available to screen readers.

    For example, it can be used with ActionIcon component:

    import { IconHeart } from '@tabler/icons';
@@ -17,4 +17,4 @@
       <VisuallyHidden>Like post</VisuallyHidden>
     </ActionIcon>
   );
-}

    Previous

    Transition

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Transition

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/calendar/index.html b/dates/calendar/index.html index 06edfe73aa9..d21939c17c3 100644 --- a/dates/calendar/index.html +++ b/dates/calendar/index.html @@ -4,13 +4,13 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Calendar

    Base component for custom date pickers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Calendar

    Base component for custom date pickers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    Use Calendar component to create custom date pickers if DatePicker component does not meet your requirements. Calendar supports all DatePicker props and some other props that are listed in props table – check it out to learn about all component features.

    By default, Calendar works the same way as DatePicker component but does not include any logic of dates selection:

    -
    MoTuWeThFrSaSu
    import { Calendar } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { Calendar } from '@mantine/dates';
 
 function Demo() {
   return <Calendar />;
@@ -18,7 +18,7 @@
 
    Custom date pickers
    
 
    Use Calendar as a base for custom date pickers. For example, you can create a date picker
 that allows user to pick three or less dates:
    
-
    MoTuWeThFrSaSu
    import dayjs from 'dayjs';
+
    MoTuWeThFrSaSu
    import dayjs from 'dayjs';
 import { useState } from 'react';
 import { Calendar } from '@mantine/dates';
 
@@ -43,7 +43,7 @@
   );
 }
    
 
    Another custom date picker example – week picker:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import dayjs from 'dayjs';
 
@@ -96,7 +96,7 @@
 
    Set static prop to display a calendar that user cannot interact with.
 It is useful when you want to display data with in calendar view but do
 not want it to be interactive.
    
-
    MoTuWeThFrSaSu
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    1
    2
    3
    4
    import { Indicator } from '@mantine/core';
+
    MoTuWeThFrSaSu
    29
    30
    31
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    1
    2
    3
    import { Indicator } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
 
 function Demo() {
@@ -113,4 +113,4 @@
       }}
     />
   );
-}
    Previous
    DatesProvider
    Next
    DateInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    DatesProvider

    Next

    DateInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-input/index.html b/dates/date-input/index.html index 86f6320f701..94855a79177 100644 --- a/dates/date-input/index.html +++ b/dates/date-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateInput

    Free form date input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateInput

    Free form date input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    DateInput supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -75,7 +75,7 @@

    Allow clear

    Set clearable prop to allow removing value from the input. Input will be cleared if user selects the same date in dropdown or clears input value:

    -
    import { DateInput } from '@mantine/dates';
+
    import { DateInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -107,7 +107,7 @@
 }
    
 
    Input props
    
 
    DateInput component supports Input and Input.Wrapper components features and all input element props. DateInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
    
-
    Input description
    Variant
    Size
    Radius
    import { DateInput } from '@mantine/dates';
+
    Input description
    Variant
    Size
    Radius
    import { DateInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -140,4 +140,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <DateInput label="My input" />;
-}
    Previous
    Calendar
    Next
    DateTimePicker
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    Calendar

    Next

    DateTimePicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-picker-input/index.html b/dates/date-picker-input/index.html index 6eede4d3ea6..6d3e21f4772 100644 --- a/dates/date-picker-input/index.html +++ b/dates/date-picker-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePickerInput

    Date, multiple dates and dates range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePickerInput

    Date, multiple dates and dates range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    DatePickerInput supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -131,7 +131,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { DatePickerInput } from '@mantine/dates';
+
    import { DatePickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -159,7 +159,7 @@
 }
    
 
    Input props
    
 
    DatePickerInput component supports Input and Input.Wrapper components features and all button element props. DatePickerInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
    
-
    Radius
    Size
    import { DatePickerInput } from '@mantine/dates';
+
    Radius
    Size
    import { DatePickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -212,4 +212,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <DatePickerInput label="My input" />;
-}
    Previous
    DatePicker
    Next
    MonthPicker
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    DatePicker

    Next

    MonthPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-picker/index.html b/dates/date-picker/index.html index fab003b286d..a0d5526b045 100644 --- a/dates/date-picker/index.html +++ b/dates/date-picker/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePicker

    Inline date, multiple dates and dates range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    -
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    DatePicker
    Inline date, multiple dates and dates range picker
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/dates
    Usage
    
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -16,7 +16,7 @@
 
    Set allowDeselect to allow user to deselect current selected date by clicking on it.
 allowDeselect is disregarded when type prop is range or multiple. When date is
 deselected onChange is called with null.
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -25,7 +25,7 @@
 }
    
 
    Multiple dates
    
 
    Set type="multiple" to allow user to pick multiple dates:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -34,7 +34,7 @@
 }
    
 
    Dates range
    
 
    Set type="range" to allow user to pick dates range:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -45,7 +45,7 @@
 
    By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.
 To change this behavior set allowSingleDateInRange prop. allowSingleDateInRange is ignored when
 type prop is not range.
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -71,7 +71,7 @@
 
    Set date, and onDateChange props to make currently displayed month, year and decade controlled.
 By doing so, you can customize date picking experience, for example, when user selects first date in range,
 you can add one month to the current date value:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -98,7 +98,7 @@
 }
    
 
    Default level
    
 
    Set defaultLevel prop to configure initial level that will be displayed:
    
-
    2020 – 2029
    import { Group } from '@mantine/core';
+
    2020 – 2029
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -111,7 +111,7 @@
 }
    
 
    Hide outside dates
    
 
    Set hideOutsideDates prop to remove all dates that do not belong to the current month:
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker hideOutsideDates />;
@@ -120,7 +120,7 @@
 
    Set firstDayOfWeek prop to configure first day of week. The prop accepts number from 0 to 6,
 where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday. You can also configure this option
 for all components with DatesProvider.
    
-
    SuMoTuWeThFrSa
    SaSuMoTuWeThFr
    import { Group } from '@mantine/core';
+
    SuMoTuWeThFrSa
    SaSuMoTuWeThFr
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -133,7 +133,7 @@
 }
    
 
    Hide weekdays
    
 
    Set hideWeekdays prop to hide weekdays names:
    
-
    import { DatePicker } from '@mantine/dates';
+
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker hideWeekdays />;
@@ -142,7 +142,7 @@
 
    Use weekendDays prop to configure weekend days. The prop accepts an array of numbers from 0 to 6,
 where 0 is Sunday and 6 is Saturday. Default value is [0, 6] – Saturday and Sunday. You can also configure this option
 for all components with DatesProvider.
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker weekendDays={[1, 2]} />;
@@ -150,7 +150,7 @@
 
    Render day function
    
 
    You can customize day rendering with renderDay prop. For example, it can be used to add
 Indicator to certain days.
    
-
    MoTuWeThFrSaSu
    import { Indicator } from '@mantine/core';
+
    MoTuWeThFrSaSu
    import { Indicator } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 
 const dayRenderer: DatePickerProps['renderDay'] = (date) => {
@@ -252,7 +252,7 @@
 }
    
 
    Number of columns
    
 
    Set numberOfColumns prop to define number of pickers that will be rendered side by side:
    
-
    MoTuWeThFrSaSu
    MoTuWeThFrSaSu
    Demo is not available on small screens. Make your screen larger to see the demo.
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    MoTuWeThFrSaSu
    Demo is not available on small screens. Make your screen larger to see the demo.
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -262,7 +262,7 @@
   );
 }
    
 
    Max level
    
-
    MoTuWeThFrSaSu
    January 2024
    MoTuWeThFrSaSu
    import { Group } from '@mantine/core';
+
    MoTuWeThFrSaSu
    February 2024
    MoTuWeThFrSaSu
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -274,14 +274,14 @@
   );
 }
    
 
    Size
    
-
    MoTuWeThFrSaSu
    Size
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    Size
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker defaultValue={new Date()} />;
 }
    
 
    Change year and months controls format
    
 
    Use yearsListFormat and monthsListFormat props to change dayjs format of year/month controls:
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker monthsListFormat="MM" yearsListFormat="YY" />;
@@ -307,7 +307,7 @@
 
    Localization
    
 
    Usually it is better to specify @mantine/dates package locale in DatesProvider,
 but you can also override locale per component:
    
-
    пнвтсрчтптсбвс
    import 'dayjs/locale/ru';
+
    пнвтсрчтптсбвс
    import 'dayjs/locale/ru';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -357,4 +357,4 @@
 }
    
 
    Keyboard interactions
    
 
    Note that the following events will only trigger if focus is on date control.
    
-
    KeyDescription
    ArrowRightFocuses next non-disabled date
    ArrowLeftFocuses previous non-disabled date
    ArrowDownFocuses next non-disabled date in the same column
    ArrowUpFocuses previous non-disabled date in the same column
    Previous
    DateTimePicker
    Next
    DatePickerInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+
    KeyDescription
    ArrowRightFocuses next non-disabled date
    ArrowLeftFocuses previous non-disabled date
    ArrowDownFocuses next non-disabled date in the same column
    ArrowUpFocuses previous non-disabled date in the same column
    Previous
    DateTimePicker
    Next
    DatePickerInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/date-time-picker/index.html b/dates/date-time-picker/index.html index bba00cfe5ee..079a55cc2d8 100644 --- a/dates/date-time-picker/index.html +++ b/dates/date-time-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateTimePicker

    Capture datetime from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DateTimePicker

    Capture datetime from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    DatePicker props

    DateTimePicker supports most of the DatePicker props, read through DatePicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -40,7 +40,7 @@ }

    Input props

    DateTimePicker component supports Input and Input.Wrapper components features and all button element props. DateTimePicker documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { DateTimePicker } from '@mantine/dates';
+
    Input description
    Variant
    Size
    Radius
    import { DateTimePicker } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -54,7 +54,7 @@
 
    Clearable
    
 
    Set clearable prop to display clear button in the right section. Note that if you set rightSection
 prop, clear button will not be displayed.
    
-
    import { DateTimePicker } from '@mantine/dates';
+
    import { DateTimePicker } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -102,4 +102,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <DateTimePicker label="My input" />;
-}
    Previous
    DateInput
    Next
    DatePicker
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    DateInput

    Next

    DatePicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/dates-provider/index.html b/dates/dates-provider/index.html index 812360dc145..5b64f2ef75b 100644 --- a/dates/dates-provider/index.html +++ b/dates/dates-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatesProvider

    Settings provider for @mantine/dates components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatesProvider

    Settings provider for @mantine/dates components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    DatesProvider component lets you set various settings that are shared across all components exported from @mantine/dates package. DatesProvider supports the following settings:

      @@ -52,4 +52,4 @@ <DateTimePicker label="Pick a Date" placeholder="Pick a Date" defaultValue={new Date('2000-10-03 02:10:00Z')} /> </DatesProvider> ); -}

    Previous

    Getting started

    Next

    Calendar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Getting started

    Next

    Calendar

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/getting-started/index.html b/dates/getting-started/index.html index ab98ddcc772..3189e20b3ff 100644 --- a/dates/getting-started/index.html +++ b/dates/getting-started/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/dates package

    Docs

    Edit this page

    Package

    @mantine/dates

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with @mantine/dates package

    Docs

    Edit this page

    Package

    @mantine/dates

    License

    MIT

    Installation

    yarn add @mantine/dates dayjs

    After installation import package styles at the root of your application:

    import '@mantine/dates/styles.css';
    @@ -31,7 +31,7 @@

    Consistent weeks

    If you want to avoid layout shifts, set consistentWeeks: true in DatesProvider settings. This will make sure that every month has 6 weeks, even if outside days are not in the same month.

    -
    MoTuWeThFrSaSu
    import { DatePicker, DatesProvider } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker, DatesProvider } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -87,4 +87,4 @@
       {/* Your app  */}
     </DatesProvider>
   );
-}
    Previous
    VisuallyHidden
    Next
    DatesProvider
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    VisuallyHidden

    Next

    DatesProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/month-picker-input/index.html b/dates/month-picker-input/index.html index d1ee87566be..67064c26d73 100644 --- a/dates/month-picker-input/index.html +++ b/dates/month-picker-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPickerInput

    Month, multiple months and months range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    MonthPicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPickerInput

    Month, multiple months and months range picker input

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    MonthPicker props

    MonthPickerInput supports most of the MonthPicker props, read through MonthPicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -131,7 +131,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { MonthPickerInput } from '@mantine/dates';
+
    import { MonthPickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -159,7 +159,7 @@
 }
    
 
    Input props
    
 
    MonthPickerInput component supports Input and Input.Wrapper components features and all button element props. MonthPickerInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
    
-
    Radius
    Size
    import { MonthPickerInput } from '@mantine/dates';
+
    Radius
    Size
    import { MonthPickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -212,4 +212,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <MonthPickerInput label="My input" />;
-}
    Previous
    MonthPicker
    Next
    YearPicker
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    MonthPicker

    Next

    YearPicker

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/month-picker/index.html b/dates/month-picker/index.html index 3fa587b520b..5babb0f1183 100644 --- a/dates/month-picker/index.html +++ b/dates/month-picker/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPicker

    Inline month, multiple months and months range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    -
    import { useState } from 'react';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    MonthPicker
    Inline month, multiple months and months range picker
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/dates
    Usage
    
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -16,7 +16,7 @@
 
    Set allowDeselect to allow user to deselect current selected date by clicking on it.
 allowDeselect is disregarded when type prop is range or multiple. When date is
 deselected onChange is called with null.
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -25,7 +25,7 @@
 }
    
 
    Multiple dates
    
 
    Set type="multiple" to allow user to pick multiple dates:
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -34,7 +34,7 @@
 }
    
 
    Dates range
    
 
    Set type="range" to allow user to pick dates range:
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -45,7 +45,7 @@
 
    By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.
 To change this behavior set allowSingleDateInRange prop. allowSingleDateInRange is ignored when
 type prop is not range.
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -71,7 +71,7 @@
 
    Set date, and onDateChange props to make currently displayed year and decade controlled.
 By doing so, you can customize date picking experience, for example, when user selects first date in range,
 you can add one year to current date value:
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -118,7 +118,7 @@
 
    You can add props to year and month controls with getYearControlProps and getMonthControlProps functions. Both functions accept date as single argument,
 props returned from the function will be added to year/month control. For example, it can be used to disable specific
 control or add styles:
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker, MonthPickerProps } from '@mantine/dates';
 
 const getYearControlProps: MonthPickerProps['getYearControlProps'] = (date) => {
@@ -168,7 +168,7 @@
 }
    
 
    Number of columns
    
 
    Set numberOfColumns prop to define number of pickers that will be rendered side by side:
    
-
    Demo is not available on small screens. Make your screen larger to see the demo.
    import { useState } from 'react';
+
    Demo is not available on small screens. Make your screen larger to see the demo.
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -179,27 +179,27 @@
 }
    
 
    Max level
    
 
    To disallow user going to the decade level set maxLevel="year":
    
-
    2024
    import { MonthPicker } from '@mantine/dates';
+
    2024
    import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
   return <MonthPicker maxLevel="year" />;
 }
    
 
    Size
    
-
    Size
    import { MonthPicker } from '@mantine/dates';
+
    Size
    import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
   return <MonthPicker defaultValue={new Date()} />;
 }
    
 
    Change year and months controls format
    
 
    Use yearsListFormat and monthsListFormat props to change dayjs format of year/month controls:
    
-
    import { MonthPicker } from '@mantine/dates';
+
    import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
   return <MonthPicker monthsListFormat="MM" yearsListFormat="YY" />;
 }
    
 
    Change label format
    
 
    Use decadeLabelFormat and yearLabelFormat to change dayjs format of decade/year label:
    
-
    import { useState } from 'react';
+
    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -216,7 +216,7 @@
 
    Localization
    
 
    Usually it is better to specify @mantine/dates package locale in DatesProvider,
 but you can also override locale per component:
    
-
    import 'dayjs/locale/ru';
+
    import 'dayjs/locale/ru';
 import { MonthPicker } from '@mantine/dates';
 
 function Demo() {
@@ -258,4 +258,4 @@
 }
    
 
    Keyboard interactions
    
 
    Note that the following events will only trigger if focus is on month control.
    
-
    KeyDescription
    ArrowRightFocuses next non-disabled month
    ArrowLeftFocuses previous non-disabled month
    ArrowDownFocuses next non-disabled month in the same column
    ArrowUpFocuses previous non-disabled month in the same column
    Previous
    DatePickerInput
    Next
    MonthPickerInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+
    KeyDescription
    ArrowRightFocuses next non-disabled month
    ArrowLeftFocuses previous non-disabled month
    ArrowDownFocuses next non-disabled month in the same column
    ArrowUpFocuses previous non-disabled month in the same column
    Previous
    DatePickerInput
    Next
    MonthPickerInput
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/time-input/index.html b/dates/time-input/index.html index a9e2bf02d7f..ef844446903 100644 --- a/dates/time-input/index.html +++ b/dates/time-input/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TimeInput

    Capture time from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    TimeInput

    Capture time from the user

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    TimeInput component supports Input and Input.Wrapper components features and all input element props. TimeInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

    -

    Input description

    Variant
    Size
    Radius
    import { TimeInput } from '@mantine/dates';
+
    Input description
    Variant
    Size
    Radius
    import { TimeInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -85,4 +85,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <TimeInput label="My input" />;
-}
    Previous
    YearPickerInput
    Next
    Getting started
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    YearPickerInput

    Next

    Getting started

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/year-picker-input/index.html b/dates/year-picker-input/index.html index af9a1a1b6aa..81fc2a50a6a 100644 --- a/dates/year-picker-input/index.html +++ b/dates/year-picker-input/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPickerInput

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    YearPicker props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPickerInput

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    YearPicker props

    YearPickerInput supports most of the YearPicker props, read through YearPicker documentation to learn about all component features that are not listed on this page.

    Usage

    @@ -126,7 +126,7 @@

    Clearable

    Set clearable prop to display clear button in the right section. Note that if you set rightSection prop, clear button will not be displayed.

    -
    import { YearPickerInput } from '@mantine/dates';
+
    import { YearPickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -154,7 +154,7 @@
 }
    
 
    Input props
    
 
    MonthPickerInput component supports Input and Input.Wrapper components features and all button element props. MonthPickerInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
    
-
    Radius
    Size
    import { YearPickerInput } from '@mantine/dates';
+
    Radius
    Size
    import { YearPickerInput } from '@mantine/dates';
 
 function Demo() {
   return (
@@ -207,4 +207,4 @@
 // Accessible input – it has associated label element
 function Demo() {
   return <YearPickerInput label="My input" />;
-}
    Previous
    YearPicker
    Next
    TimeInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +}

    Previous

    YearPicker

    Next

    TimeInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/year-picker/index.html b/dates/year-picker/index.html index ab8f8007336..2955ffad34a 100644 --- a/dates/year-picker/index.html +++ b/dates/year-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPicker

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    YearPicker

    Inline year, multiple years and years range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    2020 – 2029
    import { useState } from 'react';
 import { YearPicker } from '@mantine/dates';
 
@@ -206,4 +206,4 @@
 }

    Keyboard interactions

    Note that the following events will only trigger if focus is on year control.

    -
    KeyDescription
    ArrowRightFocuses next non-disabled year
    ArrowLeftFocuses previous non-disabled year
    ArrowDownFocuses next non-disabled year in the same column
    ArrowUpFocuses previous non-disabled year in the same column

    Previous

    MonthPickerInput

    Next

    YearPickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    KeyDescription
    ArrowRightFocuses next non-disabled year
    ArrowLeftFocuses previous non-disabled year
    ArrowDownFocuses next non-disabled year in the same column
    ArrowUpFocuses previous non-disabled year in the same column

    Previous

    MonthPickerInput

    Next

    YearPickerInput

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/actions/index.html b/form/actions/index.html index e415370dd28..c573face9d8 100644 --- a/form/actions/index.html +++ b/form/actions/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form actions

    Change form state from anywhere in the application

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form actions

    Change form state from anywhere in the application

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    Form actions allow changing state of the form from anywhere in your application. The mechanism of form actions is similar to notifications system, modals manager and other similar packages.

    @@ -90,4 +90,4 @@
  • resetTouched

    • All methods work similar to use-form hooks methods – -functions accept the same arguments but do not return anything.

    Previous

    Form context

    Next

    Recipes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +functions accept the same arguments but do not return anything.

    Previous

    Form context

    Next

    Recipes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/create-form-context/index.html b/form/create-form-context/index.html index 1f6e555d61c..47195a69f8c 100644 --- a/form/create-form-context/index.html +++ b/form/create-form-context/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form context

    Add context support to use-form with createFormContext

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form context

    Add context support to use-form with createFormContext

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    createFormContext function creates context provider and hook to get form object from context:

    import { TextInput } from '@mantine/core';
 import { createFormContext } from '@mantine/form';
@@ -90,4 +90,4 @@
       </form>
     </UserFormProvider>
   );
-}

    Previous

    Touched & dirty

    Next

    Form actions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Touched & dirty

    Next

    Form actions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/errors/index.html b/form/errors/index.html index b05f7d618f7..2c33c94c03a 100644 --- a/form/errors/index.html +++ b/form/errors/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form errors

    Manipulate form errors with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Errors object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form errors

    Manipulate form errors with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Errors object

    form.errors is an object of React nodes that contains validation errors:

    import { useForm } from '@mantine/form';
 
@@ -105,4 +105,4 @@
 
 const form = useForm();
 
-const handleErrors = (errors: typeof form.errors) => {};

    Previous

    getInputProps

    Next

    Form validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +const handleErrors = (errors: typeof form.errors) => {};

    Previous

    getInputProps

    Next

    Form validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/get-input-props/index.html b/form/get-input-props/index.html index 282a7f2dc22..5cf28e99a08 100644 --- a/form/get-input-props/index.html +++ b/form/get-input-props/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    getInputProps

    A handler to get input props for any field in the form

    Docs

    Edit this page

    Package

    @mantine/form

    getInputProps handler

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    getInputProps

    A handler to get input props for any field in the form

    Docs

    Edit this page

    Package

    @mantine/form

    getInputProps handler

    form.getInputProps returns an object with value, onChange, onFocus, onBlur, error and all props specified in enhanceGetInputProps function. Return value should be spread to the input component.

    You can pass the following options to form.getInputProps as second argument:

    @@ -248,4 +248,4 @@ }); return <CustomInput {...form.getInputProps('name')} />; -}

    Previous

    Form values

    Next

    Form errors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Form values

    Next

    Form errors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/nested/index.html b/form/nested/index.html index c38b971d8bd..12848e59d07 100644 --- a/form/nested/index.html +++ b/form/nested/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Nested fields

    Manage nested arrays and object state with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Properties paths

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Nested fields

    Manage nested arrays and object state with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Properties paths

    Most of form handlers accept property path as the first argument. Property path includes keys/indices of objects/arrays at which target property is contained:

    import { useForm } from '@mantine/form';
@@ -38,7 +38,7 @@
 // Validate deeply nested field
 form.validateField('deeply.nested.object.0.item');

    Nested objects

    -

    Form values:

    {
+
    Form values:
    {
   "terms": false,
   "user": {
     "firstName": "",
@@ -128,12 +128,12 @@
 form.validate();
 form.errors; // -> { 'user.name': 'Name is too short', 'user.occupation': 'Occupation is too short' }
    
 
    Nested arrays
    
-
    Name
    Status
    Form values:
    {
+
    Name
    Status
    Form values:
    {
   "employees": [
     {
       "name": "",
       "active": false,
-      "key": "mantine-jhi8me89l"
+      "key": "mantine-x5lpxx183"
     }
   ]
 }
    import { useForm } from '@mantine/form';
@@ -241,4 +241,4 @@
 // {
 //  'users.0.age': 'User must be 18 or older',
 //  'users.1.name': 'Name should have at least 2 letters'
-// }
    Previous
    Form validators
    Next
    Touched & dirty
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +// }

    Previous

    Form validators

    Next

    Touched & dirty

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/recipes/index.html b/form/recipes/index.html index 07ad9da7c82..3d692dd8cd2 100644 --- a/form/recipes/index.html +++ b/form/recipes/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Recipes

    use-form examples

    Docs

    Edit this page

    Package

    @mantine/form

    Set initial values with async request

    -
    import { useEffect } from 'react';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Recipes
    use-form examples
    Docs
    Edit this page
    Package
    @mantine/form
    Set initial values with async request
    
+
    import { useEffect } from 'react';
 import { useForm } from '@mantine/form';
 import { TextInput, Checkbox, Box } from '@mantine/core';
 
@@ -261,4 +261,4 @@
       </Group>
     </>
   );
-}
    Previous
    Form actions
    Next
    AppShell
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    
\ No newline at end of file
+}

    Previous

    Form actions

    Next

    AppShell

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/schema-validation/index.html b/form/schema-validation/index.html index 2f35eae0114..54e3c1587c5 100644 --- a/form/schema-validation/index.html +++ b/form/schema-validation/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form schema validation

    use-form schema based validation with zod, yup, joi and superstruct

    Docs

    Edit this page

    Package

    @mantine/form

    Schema based validation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form schema validation

    use-form schema based validation with zod, yup, joi and superstruct

    Docs

    Edit this page

    Package

    @mantine/form

    Schema based validation

    @mantine/form supports schema validation with:

    • zod
      • @@ -462,4 +462,4 @@ form.errors; // -> { // 'list.0.name': 'Name should have at least 2 letters', -// }

    Previous

    Form validation

    Next

    Form validators

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +// }

    Previous

    Form validation

    Next

    Form validators

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/status/index.html b/form/status/index.html index 65744b5cf1c..aefd9614673 100644 --- a/form/status/index.html +++ b/form/status/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Touched & dirty

    Get fields and form touched and dirty status

    Docs

    Edit this page

    Package

    @mantine/form

    Touched and dirty state

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Touched & dirty

    Get fields and form touched and dirty status

    Docs

    Edit this page

    Package

    @mantine/form

    Touched and dirty state

    form.isTouched and form.isDirty fields provide information about current field status:

    • Field is considered to be touched when user focused it or its value was changed programmatically with form.setFieldValue handler
      • @@ -99,4 +99,4 @@ form.isDirty(); // -> false form.setValues({ a: 3 }); -form.isDirty(); // -> true

    Previous

    Nested fields

    Next

    Form context

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +form.isDirty(); // -> true

    Previous

    Nested fields

    Next

    Form context

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/use-form/index.html b/form/use-form/index.html index 3ab47a23589..d503eaed415 100644 --- a/form/use-form/index.html +++ b/form/use-form/index.html @@ -4,11 +4,11 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-form

    Manage form state

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/form

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-form

    Manage form state

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/form

    License

    MIT

    Installation

    @mantine/form package does not depend on any other libraries, you can use it with or without @mantine/core inputs:

    yarn add @mantine/form

    Usage

    -
    import { TextInput, Checkbox, Button, Group, Box } from '@mantine/core';
+
    import { TextInput, Checkbox, Button, Group, Box } from '@mantine/core';
 import { useForm } from '@mantine/form';
 
 function Demo() {
@@ -227,4 +227,4 @@
       <OccupationInput form={form} />
     </>
   );
-}
    Previous
    use-shallow-effect
    Next
    Form values
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-shallow-effect

    Next

    Form values

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/validation/index.html b/form/validation/index.html index 1cd2849d75d..690d7e7cb18 100644 --- a/form/validation/index.html +++ b/form/validation/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validation

    Validate fields with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Validation with rules object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validation

    Validate fields with use-form hook

    Docs

    Edit this page

    Package

    @mantine/form

    Validation with rules object

    To validate form with rules object, provide an object of functions which take field value as an argument and return error message (any React node) or null if field is valid:

    import { useForm } from '@mantine/form';
@@ -347,7 +347,7 @@
 
    Clear field error on change
    
 
    By default, field error is cleared when value changes. To change this, set clearInputErrorOnChange to false:
    
 
    const form = useForm({ clearInputErrorOnChange: false });
    
-
    import { TextInput, Checkbox, Button, Group, Box } from '@mantine/core';
+
    import { TextInput, Checkbox, Button, Group, Box } from '@mantine/core';
 import { useForm } from '@mantine/form';
 
 function Demo() {
@@ -441,4 +441,4 @@
 form.isValid(); // -> false
 
 // get validation status of field
-form.isValid('name'); // -> false
    Previous
    Form errors
    Next
    Form schema validation
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +form.isValid('name'); // -> false

    Previous

    Form errors

    Next

    Form schema validation

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/validators/index.html b/form/validators/index.html index ef622183ab5..4701c2dd02f 100644 --- a/form/validators/index.html +++ b/form/validators/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validators

    Premade validation functions

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form validators

    Premade validation functions

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    @mantine/form package exports several functions that can be used in validation rules object. Validation functions are tiny in size and provide basic validation, if you have complex validation requirements, use other types of validation.

    import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
@@ -241,4 +241,4 @@
       'Passwords are not the same'
     ),
   },
-});

    Previous

    Form schema validation

    Next

    Nested fields

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    Form schema validation

    Next

    Nested fields

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/form/values/index.html b/form/values/index.html index 36e791cec40..796f3af9666 100644 --- a/form/values/index.html +++ b/form/values/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form values

    Manipulate form values with use-form

    Docs

    Edit this page

    Package

    @mantine/form

    Initial values

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Form values

    Manipulate form values with use-form

    Docs

    Edit this page

    Package

    @mantine/form

    Initial values

    In most cases you should set initialValues:

    import { useForm } from '@mantine/form';
 
@@ -383,4 +383,4 @@
       jobs: [],
     },
   });
-}

    Previous

    use-form

    Next

    getInputProps

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-form

    Next

    getInputProps

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/getting-started/index.html b/getting-started/index.html index ac459071d9d..e279e5a9d61 100644 --- a/getting-started/index.html +++ b/getting-started/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Getting started

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates include required dependencies and pre-configured settings. @@ -30,7 +30,7 @@ to add Mantine to an existing project or if enjoy doing things manually.

    Next.js
    Vite
    Remix
    RedwoodJS
    Gatsby

    Get started without framework

    -

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks
    +

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks

    Install PostCSS plugins and postcss-preset-mantine:

    yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
    @@ -170,4 +170,4 @@

    License

    All @mantine/* packages are distributed under MIT license. You can use them in any project, commercial or not, with or without attribution. All @mantine/* packages -dependencies are also distributed under MIT license.

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +dependencies are also distributed under MIT license.

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/6x-to-7x/index.html b/guides/6x-to-7x/index.html index 5e78168fc40..a2211ff3547 100644 --- a/guides/6x-to-7x/index.html +++ b/guides/6x-to-7x/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    6.x → 7.x migration guide

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    6.x → 7.x migration guide

    This guide is intended to help you migrate your project styles from 6.x to 7.x. It is not intended to be a comprehensive guide to all the changes in 7.x. For that, please see the 7.0.0 changelog.

    @@ -260,4 +260,4 @@ <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} /> </ActionIcon> ); -}

    Previous

    Functions reference

    Next

    use-click-outside

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Functions reference

    Next

    use-click-outside

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/functions-reference/index.html b/guides/functions-reference/index.html index 4578d1b84cf..071d314e2bd 100644 --- a/guides/functions-reference/index.html +++ b/guides/functions-reference/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Functions reference

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Functions reference

    This guides contains a list of functions exported from Mantine packages that are not documented anywhere else.

    clamp

    @@ -58,4 +58,4 @@ 
    import { shallowEqual } from '@mantine/hooks';
 
 shallowEqual({ a: 1 }, { a: 1 }); // true
-shallowEqual({ a: 1 }, { a: 2 }); // false

    Previous

    Testing with Vitest

    Next

    6.x to 7.x migration

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +shallowEqual({ a: 1 }, { a: 2 }); // false

    Previous

    Testing with Vitest

    Next

    6.x to 7.x migration

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/gatsby/index.html b/guides/gatsby/index.html index 608690c28cf..21b68622f54 100644 --- a/guides/gatsby/index.html +++ b/guides/gatsby/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Gatsby

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Gatsby

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    gatsby-template

    Gatsby template with basic setup

    		Use template

    Generate new application

    Follow Gatsby quick start guide to @@ -12,7 +12,7 @@ 

    yarn create gatsby

    When asked "Would you like to install a styling system?", select PostCSS.

    Installation

    -

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks
    +

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks

    PostCSS setup

    Install PostCSS plugins and postcss-preset-mantine:

    yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
    @@ -79,4 +79,4 @@ import classes from './Demo.module.css'; // Gatsby syntax -import * as classes from './Demo.module.css';

    Previous

    Usage with Remix

    Next

    Usage with Redwood

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +import * as classes from './Demo.module.css';

    Previous

    Usage with Remix

    Next

    Usage with Redwood

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/icons/index.html b/guides/icons/index.html index 8c76a2d6502..87c8b6c3333 100644 --- a/guides/icons/index.html +++ b/guides/icons/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Icons libraries with Mantine

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Icons libraries with Mantine

    You can use any icons library with Mantine components, most popular options are:

    • Tabler icons
      • @@ -70,4 +70,4 @@ <path d="M11 11a2 2 0 104 0 2 2 0 10-4 0M4 8h3M4 12h3M4 16h3" /> </svg> ); -}

    Previous

    Polymorphic components

    Next

    Usage with Next.js

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Polymorphic components

    Next

    Usage with Next.js

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/javascript/index.html b/guides/javascript/index.html index 150c9401be3..b5e234daa53 100644 --- a/guides/javascript/index.html +++ b/guides/javascript/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with JavaScript

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with JavaScript

    Is it possible to use Mantine with JavaScript?

    Yes, it is possible to use all @mantine/* packages (as well as all other npm packages) with JavaScript. @mantine/* packages are written in TypeScript and have type definitions, so you will get some the benefits @@ -40,4 +40,4 @@ that you have in your code are removed/renamed/changed.

    If you are not familiar with TypeScript yet, using Mantine with TypeScript will be a great opportunity to learn it. You can use any of templates to get started – all of them include -TypeScript support out of the box.

    Previous

    Usage with TypeScript

    Next

    Testing with Jest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +TypeScript support out of the box.

    Previous

    Usage with TypeScript

    Next

    Testing with Jest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/jest/index.html b/guides/jest/index.html index 02b50daa726..538d0d15aa2 100644 --- a/guides/jest/index.html +++ b/guides/jest/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Jest

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Jest

    This guide will help you setup Jest and React Testing Library for your project. Note that this guide only covers shared logic that can be applied to any framework, and it does not cover initial setup of Jest and React Testing Library as it may vary depending on the framework you are using.

    @@ -85,4 +85,4 @@ To learn how to setup Jest for your framework, either check Jest and React Testing Library documentation or check one of the premade templates. Most of the templates include Jest setup, and -you can use them as a reference.

    Previous

    Usage with JavaScript

    Next

    Testing with Vitest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +you can use them as a reference.

    Previous

    Usage with JavaScript

    Next

    Testing with Vitest

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/next/index.html b/guides/next/index.html index 7d7cb7651b5..05b3d3be154 100644 --- a/guides/next/index.html +++ b/guides/next/index.html @@ -4,14 +4,14 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Next.js

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Next.js

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    next-app-template

    Next.js template with app router and full setup: Jest, Storybook, ESLint

    		Use template

    next-pages-template

    Next.js template with pages router and full setup: Jest, Storybook, ESLint

    		Use template

    next-app-min-template

    Next.js template with app router and minimal setup – no additional tools included, only default Next.js configuration

    		Use template

    next-pages-min-template

    Next.js template with pages router and minimal setup – no additional tools included, only default Next.js configuration

    		Use template

    next-vanilla-extract-template

    Next.js template with Vanilla extract example

    		Use template

    Generate new application

    Follow create-next-app guide to create new Next.js application:

    yarn create next-app --typescript

    Installation

    -

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks
    +

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks

    PostCSS setup

    Install PostCSS plugins and postcss-preset-mantine:

    yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
    @@ -189,4 +189,4 @@ experimental: { optimizePackageImports: ['@mantine/core', '@mantine/hooks'], }, -};

    Previous

    Icons libraries

    Next

    Usage with Vite

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    Icons libraries

    Next

    Usage with Vite

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/polymorphic/index.html b/guides/polymorphic/index.html index 1e9d4c70b30..8961221e91e 100644 --- a/guides/polymorphic/index.html +++ b/guides/polymorphic/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Polymorphic components

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Polymorphic components

    What is a polymorphic component

    A polymorphic component is a component which root element can be changed with component prop. All polymorphic components have a default element which is used when component prop is not provided. @@ -245,4 +245,4 @@ return ( <PolymorphicGroup component="a" href="https://mantine.dev" /> ); -}

    Previous

    Styles performance

    Next

    Icons libraries

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Styles performance

    Next

    Icons libraries

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/redwood/index.html b/guides/redwood/index.html index cd08c001123..ac0a0de89cc 100644 --- a/guides/redwood/index.html +++ b/guides/redwood/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with RedwoodJS

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with RedwoodJS

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    redwood-template

    RedwoodJS template with basic setup

    		Use template

    Generate new application

    Follow Redwood getting started guide guide to @@ -14,7 +14,7 @@

    Note that it is recommended to use yarn instead of npm to install dependencies.

    Open web directory before installing dependencies:

    cd web
    -

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks
    +

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks

    PostCSS setup

    Install PostCSS plugins and postcss-preset-mantine:

    yarn add --dev postcss postcss-preset-mantine postcss-simple-vars postcss-loader
    @@ -79,4 +79,4 @@ export default App;

    All set! Start development server:

    -
    yarn rw dev

    Previous

    Usage with Gatsby

    Next

    Usage with Storybook

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    yarn rw dev

    Previous

    Usage with Gatsby

    Next

    Usage with Storybook

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/remix/index.html b/guides/remix/index.html index f51e936f13a..d12c6e0308d 100644 --- a/guides/remix/index.html +++ b/guides/remix/index.html @@ -4,13 +4,13 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Remix

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Remix

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    remix-template

    Remix template with basic setup

    		Use template

    Generate new application

    Follow Remix getting started guide guide to create new Remix application:

    npx create-remix@latest

    Installation

    -

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks
    +

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks

    PostCSS setup

    Install PostCSS plugins and postcss-preset-mantine:

    yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
    @@ -83,4 +83,4 @@ ); }

    All set! Start development server:

    -
    npm run dev

    Previous

    Usage with Vite

    Next

    Usage with Gatsby

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    npm run dev

    Previous

    Usage with Vite

    Next

    Usage with Gatsby

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/storybook/index.html b/guides/storybook/index.html index 7abe4e1270d..005c8bb16a0 100644 --- a/guides/storybook/index.html +++ b/guides/storybook/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Setup Mantine in Storybook

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Setup Mantine in Storybook

    Note that this guide covers only Storybook 7.0+ integration. If you are using older version of Storybook, it will not work for you.

    Add Storybook to your application

    @@ -98,4 +98,4 @@ ), ];

    All set! Start Storybook:

    -
    npm run storybook

    Previous

    Usage with Redwood

    Next

    Usage with TypeScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    npm run storybook

    Previous

    Usage with Redwood

    Next

    Usage with TypeScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/typescript/index.html b/guides/typescript/index.html index 0532a7df211..f0b27a68cf8 100644 --- a/guides/typescript/index.html +++ b/guides/typescript/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with TypeScript

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with TypeScript

    All @mantine/* packages are fully compatible with TypeScript. All examples in the documentation are written in TypeScript – you can copy-paste them to your project without any changes.

    This guide will help you get familiar with types that @mantine/core package exports.

    @@ -156,4 +156,4 @@ } }

    Note that extending theme type is not required, it is only needed if you want to -make your theme object types more strict and add autocomplete in your editor.

    Previous

    Usage with Storybook

    Next

    Usage with JavaScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +make your theme object types more strict and add autocomplete in your editor.

    Previous

    Usage with Storybook

    Next

    Usage with JavaScript

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/vite/index.html b/guides/vite/index.html index 1d89c333fbd..7104485aa8b 100644 --- a/guides/vite/index.html +++ b/guides/vite/index.html @@ -4,13 +4,13 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Vite

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Vite

    Get started with a template

    The easiest way to get started is to use one of the templates. All templates are configured correctly: they include PostCSS setup, ColorSchemeScript and other essential features. Some templates also include additional features like Jest, Storybook and ESLint.

    If you are not familiar with GitHub, you can find a detailed instruction on how to bootstrap a project from a template on this page.

    vite-template

    Vite template with full setup: Vitest, Prettier, Storybook, ESLint

    		Use template

    vite-min-template

    Vite template with minimal setup – no additional tools included, only default Vite configuration

    		Use template

    vite-vanilla-extract-template

    Vite template with Vanilla extract example

    		Use template

    Generate new application

    Follow Vite getting started guide to create new Vite application:

    yarn create vite

    Installation

    -

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks
    +

    Choose packages that you will use in your application:

    		PackageDescription
    		@mantine/hooks

    Hooks for state and UI management

    		@mantine/core

    Core components library: inputs, buttons, overlays, etc.

    		@mantine/form

    Form management library

    		@mantine/dates

    Date inputs, calendars

    		@mantine/charts

    Recharts based charts library

    		@mantine/notifications

    Notifications system

    		@mantine/code-highlight

    Code highlight with your theme colors and styles

    		@mantine/tiptap

    Rich text editor based on Tiptap

    		@mantine/dropzone

    Capture files with drag and drop

    		@mantine/carousel

    Embla based carousel component

    		@mantine/spotlight

    Overlay command center

    		@mantine/modals

    Centralized modals manager

    		@mantine/nprogress

    Navigation progress

    Install dependencies:

    yarn add @mantine/core @mantine/hooks

    PostCSS setup

    Install PostCSS plugins and postcss-preset-mantine:

    yarn add --dev postcss postcss-preset-mantine postcss-simple-vars
    @@ -41,4 +41,4 @@ return <MantineProvider>{/* Your app here */}</MantineProvider>; }

    All set! Start development server:

    -
    npm run dev

    Previous

    Usage with Next.js

    Next

    Usage with Remix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    npm run dev

    Previous

    Usage with Next.js

    Next

    Usage with Remix

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/guides/vitest/index.html b/guides/vitest/index.html index 3600e62b8fb..83254cd2b38 100644 --- a/guides/vitest/index.html +++ b/guides/vitest/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Vitest

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Testing with Vitest

    This guide will help you setup Vitest and React Testing Library for your project. Note that this guide intended for projects that use Vite as a bundler, if you are using other frameworks/bundlers, it is recommended to use Jest instead.

    @@ -100,4 +100,4 @@ }); });

    Example of a full setup

    -

    You can find an example with a full Vitest setup in mantine-vite-template.

    Previous

    Testing with Jest

    Next

    Functions reference

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    You can find an example with a full Vitest setup in mantine-vite-template.

    Previous

    Testing with Jest

    Next

    Functions reference

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-click-outside/index.html b/hooks/use-click-outside/index.html index 300df1cd8e1..fac06c24c79 100644 --- a/hooks/use-click-outside/index.html +++ b/hooks/use-click-outside/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-click-outside

    Detects click and touch events outside of given element or elements group

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-click-outside

    Detects click and touch events outside of given element or elements group

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    import { useState } from 'react';
 import { Paper, Button } from '@mantine/core';
 import { useClickOutside } from '@mantine/hooks';
@@ -101,4 +101,4 @@
 
    Set ref type
    
 
    import { useClickOutside } from '@mantine/hooks';
 
-const ref = useClickOutside<HTMLDivElement>(onClickOutside);
    Previous
    6.x to 7.x migration
    Next
    use-color-scheme
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +const ref = useClickOutside<HTMLDivElement>(onClickOutside);

    Previous

    6.x to 7.x migration

    Next

    use-color-scheme

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-clipboard/index.html b/hooks/use-clipboard/index.html index 702a44a3794..50c6aee3964 100644 --- a/hooks/use-clipboard/index.html +++ b/hooks/use-clipboard/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-clipboard

    Wrapper around navigator.clipboard with feedback timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-clipboard

    Wrapper around navigator.clipboard with feedback timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-clipboard hook provides interface to work with navigator.clipboard:

    import { Button } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
@@ -41,4 +41,4 @@
   reset: () => void;
   error: Error;
   copied: boolean;
-};

    Previous

    use-validated-state

    Next

    use-document-title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-validated-state

    Next

    use-document-title

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-color-scheme/index.html b/hooks/use-color-scheme/index.html index a4dc5605dc0..7daf28e63b4 100644 --- a/hooks/use-color-scheme/index.html +++ b/hooks/use-color-scheme/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-color-scheme

    Detects user system color scheme with window.matchMedia API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-color-scheme

    Detects user system color scheme with window.matchMedia API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-color-scheme hook returns system color scheme value i.e. either dark or light:

    Your system color scheme is light
    import { Badge } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
@@ -28,4 +28,4 @@
   options?: {
     getInitialValueInEffect: boolean;
   }
-): 'dark' | 'light';

    Previous

    use-click-outside

    Next

    use-element-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): 'dark' | 'light';

    Previous

    use-click-outside

    Next

    use-element-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-counter/index.html b/hooks/use-counter/index.html index d1cbfba23b1..95937ff13d5 100644 --- a/hooks/use-counter/index.html +++ b/hooks/use-counter/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-counter

    Increments/decrements state within given boundaries

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-counter

    Increments/decrements state within given boundaries

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Count: 0

    import { Group, Button, Text } from '@mantine/core';
 import { useCounter } from '@mantine/hooks';
 
@@ -38,4 +38,4 @@
     set: (value: number) => void;
     reset: () => void;
   },
-];

    Previous

    use-window-scroll

    Next

    use-debounced-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-window-scroll

    Next

    use-debounced-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-debounced-state/index.html b/hooks/use-debounced-state/index.html index 68721ac5e04..a6e67cf31c5 100644 --- a/hooks/use-debounced-state/index.html +++ b/hooks/use-debounced-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-state

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-state

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-debounced-state hook debounces value changes. This can be useful in case you want to perform a heavy operation based on react state, for example, send search request. Unlike use-debounced-value it @@ -60,4 +60,4 @@ options?: { leading: boolean; } -): readonly [T, (newValue: T) => void];

    Previous

    use-counter

    Next

    use-debounced-value

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, (newValue: T) => void];

    Previous

    use-counter

    Next

    use-debounced-value

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-debounced-value/index.html b/hooks/use-debounced-value/index.html index 648deb05e45..cc71baae045 100644 --- a/hooks/use-debounced-value/index.html +++ b/hooks/use-debounced-value/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-value

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-debounced-value

    Debounces value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-debounced-value hook debounces value changes. This can be useful in case you want to perform a heavy operation based on react state, for example, send search request. Unlike use-debounced-state it @@ -96,4 +96,4 @@ options?: { leading: boolean; } -): readonly [T, () => void];

    Previous

    use-debounced-state

    Next

    use-disclosure

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, () => void];

    Previous

    use-debounced-state

    Next

    use-disclosure

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-did-update/index.html b/hooks/use-did-update/index.html index 6fe3e66a449..0f6d91fa69f 100644 --- a/hooks/use-did-update/index.html +++ b/hooks/use-did-update/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-did-update

    Calls given function in useEffect when value changes, but not when the component mounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-did-update

    Calls given function in useEffect when value changes, but not when the component mounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-did-update hook works the same way as useEffect but it is not called when component is mounted:

    import { useDidUpdate } from '@mantine/hooks';
 
@@ -15,4 +15,4 @@
   );
 }

    Definition

    -
    function useDidUpdate(fn: EffectCallback, dependencies?: any[]): void;

    Previous

    use-timeout

    Next

    use-force-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useDidUpdate(fn: EffectCallback, dependencies?: any[]): void;

    Previous

    use-timeout

    Next

    use-force-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-disclosure/index.html b/hooks/use-disclosure/index.html index 1a95cd745e3..f5adf111acc 100644 --- a/hooks/use-disclosure/index.html +++ b/hooks/use-disclosure/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-disclosure

    Manages boolean state, provides open, close and toggle handlers, usually used with modals, drawers and popovers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-disclosure

    Manages boolean state, provides open, close and toggle handlers, usually used with modals, drawers and popovers

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-disclosure hook manages boolean state. It provides open, close and toggle handlers and accepts optional onOpen and onClose callbacks. It can be used to manage controlled modals, popovers and other similar components:

    @@ -61,4 +61,4 @@ close: () => void; toggle: () => void; }, -];

    Previous

    use-debounced-value

    Next

    use-id

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-debounced-value

    Next

    use-id

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-document-title/index.html b/hooks/use-document-title/index.html index 9336fe1eee0..3723ddf15d5 100644 --- a/hooks/use-document-title/index.html +++ b/hooks/use-document-title/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-title

    Sets document.title to given string

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-title

    Sets document.title to given string

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-document-title sets document.title property with React.useLayoutEffect hook. Hook is not called during server side rendering. Use this hook with client only applications, for isomorphic use more advanced options, for example, react-helmet.

    Call hook with a string that should be set as document title inside any component. @@ -24,4 +24,4 @@ ); }

    Definition

    -
    function useDocumentTitle(title: string): void;

    Previous

    use-clipboard

    Next

    use-document-visibility

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useDocumentTitle(title: string): void;

    Previous

    use-clipboard

    Next

    use-document-visibility

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-document-visibility/index.html b/hooks/use-document-visibility/index.html index 35da3666374..1bde959a758 100644 --- a/hooks/use-document-visibility/index.html +++ b/hooks/use-document-visibility/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-visibility

    Detects if the current tab is active

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-document-visibility

    Detects if the current tab is active

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-document-visibility hook returns current document.visibilityState – it allows detecting if the current tab is active:

    Switch to another tab to see document title change

    import { Text } from '@mantine/core';
@@ -16,4 +16,4 @@
   return <Text>Switch to another tab to see document title change</Text>;
 }

    Definition

    -
    function useDocumentVisibility(): 'visible' | 'hidden';

    Previous

    use-document-title

    Next

    use-eye-dropper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useDocumentVisibility(): 'visible' | 'hidden';

    Previous

    use-document-title

    Next

    use-eye-dropper

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-element-size/index.html b/hooks/use-element-size/index.html index cdd4058b3ec..f82e55a66a7 100644 --- a/hooks/use-element-size/index.html +++ b/hooks/use-element-size/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-element-size

    Returns element width and height and observes changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-element-size

    Returns element width and height and observes changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Resize textarea by dragging its right bottom corner

    Width: 0, height: 0

    import { useElementSize } from '@mantine/hooks';
 import { rem } from '@mantine/core';
 
@@ -28,4 +28,4 @@
   MutableRefObject<T>,
   width: number,
   height: number
-};

    Previous

    use-color-scheme

    Next

    use-event-listener

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-color-scheme

    Next

    use-event-listener

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-event-listener/index.html b/hooks/use-event-listener/index.html index 739ac228e51..f3304c16ece 100644 --- a/hooks/use-event-listener/index.html +++ b/hooks/use-event-listener/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-event-listener

    Subscribes to events of a given element with a ref

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-event-listener

    Subscribes to events of a given element with a ref

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-event-listener adds a given event listener to an element to which ref is assigned. Hook supports the same options as addEventListener method. After the component is unmounted, the listener is automatically removed.

    @@ -26,4 +26,4 @@ type: K, listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions -): MutableRefObject<T>;

    Previous

    use-element-size

    Next

    use-focus-return

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): MutableRefObject<T>;

    Previous

    use-element-size

    Next

    use-focus-return

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-eye-dropper/index.html b/hooks/use-eye-dropper/index.html index 63ed876201a..c14168839a0 100644 --- a/hooks/use-eye-dropper/index.html +++ b/hooks/use-eye-dropper/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-eye-dropper

    Pick color from any pixel on the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-eye-dropper

    Pick color from any pixel on the screen

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-eye-dropper hook provides an interface to work with EyeDropper API. Check browser support to learn which browsers support the API.

    EyeDropper API is not supported in your browser

    import { useState } from 'react';
@@ -53,4 +53,4 @@
   open: (options?: {
     signal?: AbortSignal;
   }) => Promise<{ sRGBHex: string }>;
-};

    Previous

    use-document-visibility

    Next

    use-favicon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-document-visibility

    Next

    use-favicon

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-favicon/index.html b/hooks/use-favicon/index.html index 1330c183933..22f3fa46ee4 100644 --- a/hooks/use-favicon/index.html +++ b/hooks/use-favicon/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-favicon

    Changes favicon

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-favicon

    Changes favicon

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-favicon appends <link /> element to head component with given favicon in useLayoutEffect. The hook is not called during server side rendering.

    Call hook with a favicon URL (supported formats: .ico, .png, .svg and .gif) that should be set as favicon. @@ -28,4 +28,4 @@ ); }

    Definition

    -
    function useFavicon(url: string): void;

    Previous

    use-eye-dropper

    Next

    use-hash

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useFavicon(url: string): void;

    Previous

    use-eye-dropper

    Next

    use-hash

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-focus-return/index.html b/hooks/use-focus-return/index.html index d6b574c50ee..2215de9e892 100644 --- a/hooks/use-focus-return/index.html +++ b/hooks/use-focus-return/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-return

    Captures last focused element on the page and returns focus to it once given condition is met

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-return

    Captures last focused element on the page and returns focus to it once given condition is met

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-focus-return automatically returns focus to the last focused element when a given condition is met. For example, it is used in Modal component to restore focus after the modal was closed.

    Close the modal with the Escape key and see how focus returns to the button after the modal closes:

    @@ -46,4 +46,4 @@ 
    function useFocusReturn(options: {
   opened: boolean;
   shouldReturnFocus?: boolean;
-}): () => void;

    Previous

    use-event-listener

    Next

    use-focus-trap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}): () => void;

    Previous

    use-event-listener

    Next

    use-focus-trap

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-focus-trap/index.html b/hooks/use-focus-trap/index.html index 4f4a4f25bc6..2a364bc94e2 100644 --- a/hooks/use-focus-trap/index.html +++ b/hooks/use-focus-trap/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-trap

    Traps focus inside given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-trap

    Traps focus inside given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-focus-trap traps focus at the given node, for example in modal, drawer or menu. Node must include at least one focusable element. When the node unmounts, the focus trap is automatically released.

    import { useFocusTrap } from '@mantine/hooks';
@@ -73,4 +73,4 @@
 
    Definition
    
 
    function useFocusTrap(
   active?: boolean
-): (instance: HTMLElement) => void;
    Previous
    use-focus-return
    Next
    use-focus-within
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): (instance: HTMLElement) => void;

    Previous

    use-focus-return

    Next

    use-focus-within

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-focus-within/index.html b/hooks/use-focus-within/index.html index 17766b38e94..218b47812ad 100644 --- a/hooks/use-focus-within/index.html +++ b/hooks/use-focus-within/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-within

    Detects if any element within the given element has focus

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-focus-within

    Detects if any element within the given element has focus

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-focus-within hook detects if any element within the other element has focus. It works the same way as :focus-within CSS selector:

    One of elements has focus: false

    import { useFocusWithin } from '@mantine/hooks';
@@ -35,4 +35,4 @@
 }): {
   ref: React.MutableRefObject<T>;
   focused: boolean;
-};

    Previous

    use-focus-trap

    Next

    use-fullscreen

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-focus-trap

    Next

    use-fullscreen

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-force-update/index.html b/hooks/use-force-update/index.html index f4656c924ed..f16d3b2a15f 100644 --- a/hooks/use-force-update/index.html +++ b/hooks/use-force-update/index.html @@ -4,9 +4,9 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-force-update

    Forces the component to rerender without state change

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-force-update

    Forces the component to rerender without state change

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-force-update returns a function, which when called rerenders the component:

    -

    mantine-06fnc5vem

    import { Button, Text, Group } from '@mantine/core';
+
    mantine-nnlw1z91x
    import { Button, Text, Group } from '@mantine/core';
 import { useForceUpdate, randomId } from '@mantine/hooks';
 
 function Demo() {
@@ -20,4 +20,4 @@
   );
 }
    
 
    Definition
    
-
    function useForceUpdate(): () => void;
    Previous
    use-did-update
    Next
    use-isomorphic-effect
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useForceUpdate(): () => void;

    Previous

    use-did-update

    Next

    use-isomorphic-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-fullscreen/index.html b/hooks/use-fullscreen/index.html index 314facaa872..e9627692266 100644 --- a/hooks/use-fullscreen/index.html +++ b/hooks/use-fullscreen/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-fullscreen

    Enter/exit fullscreen mode with given element or entire page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-fullscreen

    Enter/exit fullscreen mode with given element or entire page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-fullscreen allows to enter/exit fullscreen for given element using the Fullscreen API. By default, if you don't provide ref, the hook will target document.documentElement:

    import { useFullscreen } from '@mantine/hooks';
@@ -47,4 +47,4 @@
   readonly ref: (element: T | null) => void;
   readonly toggle: () => Promise<void>;
   readonly fullscreen: boolean;
-};

    Previous

    use-focus-within

    Next

    use-hotkeys

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-focus-within

    Next

    use-hotkeys

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-hash/index.html b/hooks/use-hash/index.html index 71313cab6b5..48efc5258c3 100644 --- a/hooks/use-hash/index.html +++ b/hooks/use-hash/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hash

    Get and set hash value in the URL

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hash

    Get and set hash value in the URL

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-hash returns hash from URL, subscribes to its changes with hashchange event and allows changing it with setHash function:

    Current hash: 

    import { useHash, randomId } from '@mantine/hooks';
@@ -34,4 +34,4 @@
 
    Definition
    
 
    function useHash(options: {
   getInitialValueInEffect?: boolean;
-}): readonly [string, (value: string) => void];
    Previous
    use-favicon
    Next
    use-headroom
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}): readonly [string, (value: string) => void];

    Previous

    use-favicon

    Next

    use-headroom

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-headroom/index.html b/hooks/use-headroom/index.html index b40cf270313..b8875fa4e64 100644 --- a/hooks/use-headroom/index.html +++ b/hooks/use-headroom/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-headroom

    Create headers that are hidden after user scrolls past given distance

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-headroom

    Create headers that are hidden after user scrolls past given distance

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Use use-headroom hook to create headers that are hidden after user scrolls past the given distance in px. The hook returns a boolean value that determines whether the element should be pinned or hidden. Hook returns true when the current scroll position is less than the specified fixedAt value and @@ -52,4 +52,4 @@ /** Called when element is unpinned */ onRelease?(): void; -}): boolean;

    Previous

    use-hash

    Next

    use-idle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}): boolean;

    Previous

    use-hash

    Next

    use-idle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-hotkeys/index.html b/hooks/use-hotkeys/index.html index 1c2efc8fbe5..af1859282de 100644 --- a/hooks/use-hotkeys/index.html +++ b/hooks/use-hotkeys/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hotkeys

    Listen for keys combinations on document element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hotkeys

    Listen for keys combinations on document element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-hotkeys accepts as its first argument an array of hotkeys and handler tuples:

    • hotkey - hotkey string, for example ctrl+E, shift+alt+L, mod+S
      • @@ -112,4 +112,4 @@ hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean -): void;

    Previous

    use-fullscreen

    Next

    use-hover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): void;

    Previous

    use-fullscreen

    Next

    use-hover

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-hover/index.html b/hooks/use-hover/index.html index 407f58c6381..09f90a0bd4e 100644 --- a/hooks/use-hover/index.html +++ b/hooks/use-hover/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hover

    Detects if given element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hover

    Detects if given element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Put mouse over me please

    import { useHover } from '@mantine/hooks';
 
 function Demo() {
@@ -19,4 +19,4 @@
 
    function useHover<T extends HTMLElement = HTMLDivElement>(): {
   ref: React.MutableRefObject<T>;
   hovered: boolean;
-};
    Previous
    use-hotkeys
    Next
    use-in-viewport
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-hotkeys

    Next

    use-in-viewport

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-id/index.html b/hooks/use-id/index.html index 7d95c7464ba..13aa5f5f04e 100644 --- a/hooks/use-id/index.html +++ b/hooks/use-id/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-id

    Generates memoized random id

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-id

    Generates memoized random id

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-id hook generates a random id that persists across renders. The hook is usually used to bind input elements to labels. The generated random id is saved to ref and will not change unless the component is unmounted.

    @@ -27,4 +27,4 @@ // input and label will have random id 'mantine-fZMoF' const withoutId = <Input />;

    Definition

    -
    function useId(id: string): string;

    Previous

    use-disclosure

    Next

    use-input-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useId(id: string): string;

    Previous

    use-disclosure

    Next

    use-input-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-idle/index.html b/hooks/use-idle/index.html index d4f1393ee56..33d11df2573 100644 --- a/hooks/use-idle/index.html +++ b/hooks/use-idle/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-idle

    Detects if the user does nothing on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-idle

    Detects if the user does nothing on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-idle detects if user does nothing for a given time in ms:

    Current state: idle
    import { Badge } from '@mantine/core';
 import { useIdle } from '@mantine/hooks';
@@ -37,4 +37,4 @@
 
    function useIdle(
   timeout: number,
   options?: Partial<{ events: string[]; initialState: boolean }>
-): boolean;
    Previous
    use-headroom
    Next
    use-interval
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): boolean;

    Previous

    use-headroom

    Next

    use-interval

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-in-viewport/index.html b/hooks/use-in-viewport/index.html index 50eb69b2ce8..b89bb1c356e 100644 --- a/hooks/use-in-viewport/index.html +++ b/hooks/use-in-viewport/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-in-viewport

    Detects if element is visible in the viewport

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-in-viewport

    Detects if element is visible in the viewport

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-in-viewport is a simpler alternative to use-intersection that only checks if the element is visible in the viewport:

    Scroll to see box

    A box

    import { Box, Text } from '@mantine/core';
@@ -25,4 +25,4 @@
       </Box>
     </>
   );
-}

    Previous

    use-hover

    Next

    use-intersection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-hover

    Next

    use-intersection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-input-state/index.html b/hooks/use-input-state/index.html index 6693215fa0c..29dff3686d1 100644 --- a/hooks/use-input-state/index.html +++ b/hooks/use-input-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-input-state

    Manages input state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-input-state

    Manages input state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-input-state handles state of native inputs (with event in onChange handler) and custom inputs (with value in onChange handler). Hook works with all Mantine and native inputs:

    import { useState } from 'react';
@@ -57,4 +57,4 @@
 ): [
   T,
   (value: null | undefined | T | React.ChangeEvent<any>) => void,
-];

    Previous

    use-id

    Next

    use-list-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-id

    Next

    use-list-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-intersection/index.html b/hooks/use-intersection/index.html index a1a0485837d..58959403f9c 100644 --- a/hooks/use-intersection/index.html +++ b/hooks/use-intersection/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-intersection

    Detects if given element is visible in the viewport or other element with IntersectionObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-intersection

    Detects if given element is visible in the viewport or other element with IntersectionObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-intersection returns information about the intersection of a given element with its scroll container or body element with Intersection Observer API:

    Obscured

    import { useRef } from 'react';
@@ -62,4 +62,4 @@
 ): {
   ref: (element: T | null) => void;
   entry: IntersectionObserverEntry;
-};

    Previous

    use-in-viewport

    Next

    use-media-query

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-in-viewport

    Next

    use-media-query

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-interval/index.html b/hooks/use-interval/index.html index dcb361f3ce2..2e82bbd9d3e 100644 --- a/hooks/use-interval/index.html +++ b/hooks/use-interval/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-interval

    Calls function with a given interval

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-interval

    Calls function with a given interval

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Page loaded 0 seconds ago

    import { useState, useEffect } from 'react';
 import { useInterval } from '@mantine/hooks';
 import { Stack, Button, Text } from '@mantine/core';
@@ -50,4 +50,4 @@
   stop: () => void;
   toggle: () => void;
   active: boolean;
-};

    Previous

    use-idle

    Next

    use-merged-ref

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-idle

    Next

    use-merged-ref

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-isomorphic-effect/index.html b/hooks/use-isomorphic-effect/index.html index 1c9b93806c3..83b3305d1ec 100644 --- a/hooks/use-isomorphic-effect/index.html +++ b/hooks/use-isomorphic-effect/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-isomorphic-effect

    useLayoutEffect replacement

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-isomorphic-effect

    useLayoutEffect replacement

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-isomorphic-effect is a replacement for useEffect hook that works in both browser and server environments.

    import { useIsomorphicEffect } from '@mantine/hooks';
 
@@ -14,4 +14,4 @@
   });
 
   return null;
-}

    Previous

    use-force-update

    Next

    use-logger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    use-force-update

    Next

    use-logger

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-list-state/index.html b/hooks/use-list-state/index.html index 140b6cad88a..66645b4f3ea 100644 --- a/hooks/use-list-state/index.html +++ b/hooks/use-list-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-list-state

    Manages array state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-list-state

    Manages array state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-list-state provides an API to work with list state:

    const [values, handlers] = useListState([{ a: 1 }]);
 
@@ -76,7 +76,7 @@
 
  • filter - filter values with callback function
    • 
 
 
    Indeterminate state checkbox example
    
-
    import { useListState, randomId } from '@mantine/hooks';
+
    import { useListState, randomId } from '@mantine/hooks';
 import { Checkbox } from '@mantine/core';
 
 const initialValues = [
@@ -169,4 +169,4 @@
 If you call the hook with an empty array, you must specify item type:
    
 
    useListState(['hello']); // ok, item type is string
 useListState([]); // not ok, item type is any
-useListState<string>([]); // ok, item type is string
    Previous
    use-input-state
    Next
    use-local-storage
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +useListState<string>([]); // ok, item type is string

    Previous

    use-input-state

    Next

    use-local-storage

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-local-storage/index.html b/hooks/use-local-storage/index.html index 9a4ac157845..1aa1d819ac9 100644 --- a/hooks/use-local-storage/index.html +++ b/hooks/use-local-storage/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-local-storage

    Exposes localStorage value as react state, syncs state across opened tabs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-local-storage

    Exposes localStorage value as react state, syncs state across opened tabs

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-local-storage allows using value from the localStorage as react state. The hook works the same way as useState, but also writes the value to the localStorage:

    import { useLocalStorage } from '@mantine/hooks';
@@ -132,4 +132,4 @@
 Functions accept the same arguments as use-local-storage/use-session-storage hooks:
    
 
    import { readLocalStorageValue } from '@mantine/hooks';
 
-const value = readLocalStorageValue({ key: 'color-scheme' });
    Previous
    use-list-state
    Next
    use-pagination
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +const value = readLocalStorageValue({ key: 'color-scheme' });

    Previous

    use-list-state

    Next

    use-pagination

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-logger/index.html b/hooks/use-logger/index.html index 56b450b1f4c..0ebce3c04bf 100644 --- a/hooks/use-logger/index.html +++ b/hooks/use-logger/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-logger

    Logs given values to console when component renders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-logger

    Logs given values to console when component renders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-logger logs given values to the console each time component renders. Open devtools to see state changes in console:

    import { useState } from 'react';
@@ -17,4 +17,4 @@
   return <Button onClick={() => setCount((c) => c + 1)}>Update state ({count})</Button>;
 }

    Definition

    -
    function useLogger(componentName: string, props: any[]): any;

    Previous

    use-isomorphic-effect

    Next

    use-shallow-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useLogger(componentName: string, props: any[]): any;

    Previous

    use-isomorphic-effect

    Next

    use-shallow-effect

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-media-query/index.html b/hooks/use-media-query/index.html index 05d615610ff..e56d74da5c3 100644 --- a/hooks/use-media-query/index.html +++ b/hooks/use-media-query/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-media-query

    Subscribes to media queries with window.matchMedia

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-media-query

    Subscribes to media queries with window.matchMedia

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-media-query subscribes to media queries. It receives a media query as an argument and returns true if the given media query matches the current state. The hook relies on window.matchMedia() API @@ -49,4 +49,4 @@ options?: { getInitialValueInEffect: boolean; } -): boolean;

    Previous

    use-intersection

    Next

    use-mouse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): boolean;

    Previous

    use-intersection

    Next

    use-mouse

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-merged-ref/index.html b/hooks/use-merged-ref/index.html index 5fed6b1ba81..264528e20b0 100644 --- a/hooks/use-merged-ref/index.html +++ b/hooks/use-merged-ref/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-merged-ref

    Merges multiple refs objects or functions into one ref callback

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-merged-ref

    Merges multiple refs objects or functions into one ref callback

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-merged-ref accepts any number of refs and returns a function that should be passed to the ref prop. Use this hook when you need to use more than one ref on a single dom node, for example, when you want to use use-click-outside and use-focus-trap hooks and also get a ref for yourself:

    @@ -80,4 +80,4 @@ ...refs: React.ForwardedRef<T>[] ): (node: T) => void;

    Set node type

    -
    useMergedRef<HTMLDivElement>();

    Previous

    use-interval

    Next

    use-network

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    useMergedRef<HTMLDivElement>();

    Previous

    use-interval

    Next

    use-network

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-mouse/index.html b/hooks/use-mouse/index.html index 13e8ac28af5..00994fdb3aa 100644 --- a/hooks/use-mouse/index.html +++ b/hooks/use-mouse/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mouse

    Tracks mouse position over the viewport or given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-mouse

    Tracks mouse position over the viewport or given element

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Mouse coordinates { x: 0, y: 0 }

    import { Text, Code, Group, Box } from '@mantine/core';
 import { useMouse } from '@mantine/hooks';
 
@@ -52,4 +52,4 @@
   x: number;
   y: number;
   ref: React.MutableRefObject<T>;
-};

    Previous

    use-media-query

    Next

    use-move

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-media-query

    Next

    use-move

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-move/index.html b/hooks/use-move/index.html index 466884fba09..63aad27255f 100644 --- a/hooks/use-move/index.html +++ b/hooks/use-move/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-move

    Handles move behavior over given element, can be used to build custom sliders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-move

    Handles move behavior over given element, can be used to build custom sliders

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-move handles move behavior over any element:

    Values { x: 20, y: 60 }

    import { useState } from 'react';
 import { Group, Text, Code, rem } from '@mantine/core';
@@ -239,4 +239,4 @@
 const [value, setValue] = useState<UseMovePosition>({
   x: 0.5,
   y: 0.5,
-});

    Previous

    use-mouse

    Next

    use-reduced-motion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    use-mouse

    Next

    use-reduced-motion

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-network/index.html b/hooks/use-network/index.html index dcd3105ff39..8e0fe25ba38 100644 --- a/hooks/use-network/index.html +++ b/hooks/use-network/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-network

    Returns current connection status

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-network

    Returns current connection status

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-network hook returns an object with current connection status:

    PropertyValue
    Online

    Online

    rtt
    downlink
    effectiveType
    saveData

    false

    import { Text, Table } from '@mantine/core';
 import { useNetwork } from '@mantine/hooks';
@@ -77,4 +77,4 @@
     | 'none'
     | 'other'
     | 'unknown';
-};

    Previous

    use-merged-ref

    Next

    use-os

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-merged-ref

    Next

    use-os

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-os/index.html b/hooks/use-os/index.html index a9d93599ce3..bcad86520fe 100644 --- a/hooks/use-os/index.html +++ b/hooks/use-os/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-os

    Detects user operating system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-os

    Detects user operating system

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-os returns user's os. Possible values are: undetermined, macos, ios, windows, android, linux. If the OS cannot be identified, for example, during server side rendering undetermined will be returned.

    Your os is undetermined

    import { useOs } from '@mantine/hooks';
@@ -27,4 +27,4 @@
   | 'ios'
   | 'windows'
   | 'android'
-  | 'linux';

    Previous

    use-network

    Next

    use-page-leave

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file + | 'linux';

    Previous

    use-network

    Next

    use-page-leave

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-page-leave/index.html b/hooks/use-page-leave/index.html index dcba137faa5..11c74aa2c47 100644 --- a/hooks/use-page-leave/index.html +++ b/hooks/use-page-leave/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-page-leave

    Calls given function when the mouse leaves the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-page-leave

    Calls given function when the mouse leaves the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-page-leave calls given function when mouse leaves the page:

    Mouse left the page 0 times

    import { useState } from 'react';
 import { usePageLeave } from '@mantine/hooks';
@@ -15,4 +15,4 @@
   return <>Mouse left the page {leftsCount} times</>;
 }

    Definition

    -
    function usePageLeave(onPageLeave: () => void): void;

    Previous

    use-os

    Next

    use-text-selection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function usePageLeave(onPageLeave: () => void): void;

    Previous

    use-os

    Next

    use-text-selection

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-pagination/index.html b/hooks/use-pagination/index.html index 55635adf4f3..22ff3fdb789 100644 --- a/hooks/use-pagination/index.html +++ b/hooks/use-pagination/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-pagination

    Manages pagination state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-pagination

    Manages pagination state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-pagination is a state management hook for Pagination component, it manages pagination with controlled and uncontrolled state:

    @@ -101,4 +101,4 @@ previous: () => void; first: () => void; last: () => void; -};

    Previous

    use-local-storage

    Next

    use-previous

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-local-storage

    Next

    use-previous

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-previous/index.html b/hooks/use-previous/index.html index dfc924e00af..3fceb673d66 100644 --- a/hooks/use-previous/index.html +++ b/hooks/use-previous/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-previous

    Returns previous value of given state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-previous

    Returns previous value of given state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-previous stores the previous value of a state in a ref. It returns undefined on initial render and the previous value of a state after rerender:

    Current value:

    Previous value: 

    import { TextInput, Text } from '@mantine/core';
@@ -29,4 +29,4 @@
   );
 }

    Definition

    -
    function usePrevious<T>(value: T): T | undefined;

    Previous

    use-pagination

    Next

    use-queue

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function usePrevious<T>(value: T): T | undefined;

    Previous

    use-pagination

    Next

    use-queue

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-queue/index.html b/hooks/use-queue/index.html index 34d54e7d80c..8ecf18da42b 100644 --- a/hooks/use-queue/index.html +++ b/hooks/use-queue/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-queue

    Manages queue of values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-queue

    Manages queue of values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-queue limits the number of data in current state and places the rest of it in a queue. For example, in @mantine/notifications package number of notifications that is currently displayed is limited and other new notifications are added to the queue and displayed once @@ -85,4 +85,4 @@ add: (...items: T[]) => void; update: (fn: (state: T[]) => T[]) => void; cleanQueue: () => void; -};

    Previous

    use-previous

    Next

    use-set-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-previous

    Next

    use-set-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-reduced-motion/index.html b/hooks/use-reduced-motion/index.html index f6e499008e0..51887195c65 100644 --- a/hooks/use-reduced-motion/index.html +++ b/hooks/use-reduced-motion/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-reduced-motion

    Detects if user prefers to reduce motion

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-reduced-motion

    Detects if user prefers to reduce motion

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-reduced-motion detects if user prefers to reduce motion. It uses use-media-query hook under the hood. Hook relies on window.matchMedia() API @@ -32,4 +32,4 @@ options?: { getInitialValueInEffect: boolean; } -): boolean;

    Previous

    use-move

    Next

    use-resize-observer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): boolean;

    Previous

    use-move

    Next

    use-resize-observer

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-resize-observer/index.html b/hooks/use-resize-observer/index.html index 24a379a0f95..25fb243bddb 100644 --- a/hooks/use-resize-observer/index.html +++ b/hooks/use-resize-observer/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-resize-observer

    Tracks element size and position changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-resize-observer

    Tracks element size and position changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Resize textarea by dragging its right bottom corner

    Rect: { "x": 0, "y": 0, @@ -51,4 +51,4 @@ height: number; width: number; }, -];

    Previous

    use-reduced-motion

    Next

    use-scroll-into-view

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-reduced-motion

    Next

    use-scroll-into-view

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-scroll-into-view/index.html b/hooks/use-scroll-into-view/index.html index e390bf2b7ee..3f70ad88c4b 100644 --- a/hooks/use-scroll-into-view/index.html +++ b/hooks/use-scroll-into-view/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-scroll-into-view

    Scrolls given element into view

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-scroll-into-view

    Scrolls given element into view

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-scroll-into-view handles scroll behavior for any scrollable element. Basic usage works the same way as element.scrollIntoView(). Hook adjusts scrolling animation with respect to the reduced-motion user preference.

    Hello there

    import { useScrollIntoView } from '@mantine/hooks';
@@ -146,4 +146,4 @@
     alignment?: 'start' | 'end' | 'center';
   }) => void;
   cancel: () => void;
-};

    Previous

    use-resize-observer

    Next

    use-viewport-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-resize-observer

    Next

    use-viewport-size

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-set-state/index.html b/hooks/use-set-state/index.html index 866539d9d9a..a23bfdda50b 100644 --- a/hooks/use-set-state/index.html +++ b/hooks/use-set-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-set-state

    Manages state with setState-like API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-set-state

    Manages state with setState-like API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-set-state works similar to how this.setState works in class components – it shallow merges state partial into current state.

    const [state, setState] = useSetState({
@@ -30,4 +30,4 @@
   (
     statePartial: Partial<T> | ((currentState: T) => Partial<T>)
   ) => void,
-];

    Previous

    use-queue

    Next

    use-toggle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-queue

    Next

    use-toggle

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-shallow-effect/index.html b/hooks/use-shallow-effect/index.html index e11f2a747f7..fa5f3e31cbd 100644 --- a/hooks/use-shallow-effect/index.html +++ b/hooks/use-shallow-effect/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-shallow-effect

    useEffect drop in replacement with dependencies shallow comparison

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-shallow-effect

    useEffect drop in replacement with dependencies shallow comparison

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-shallow-effect works exactly like useEffect, but performs shallow dependencies comparison instead of referential comparison:

    import { useEffect } from 'react';
 import { useShallowEffect } from '@mantine/hooks';
@@ -30,4 +30,4 @@
 
    function useShallowEffect(
   cb: () => void,
   dependencies?: React.DependencyList
-): void;
    Previous
    use-logger
    Next
    use-form
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): void;

    Previous

    use-logger

    Next

    use-form

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-text-selection/index.html b/hooks/use-text-selection/index.html index 03b7f7e4a23..ad7b0877256 100644 --- a/hooks/use-text-selection/index.html +++ b/hooks/use-text-selection/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-text-selection

    Returns current selected text on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-text-selection

    Returns current selected text on the page

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-text-selection returns current text selection:

    Select some text here or anywhere on the page and it will be displayed below
    Selected text: 
    import { useTextSelection } from '@mantine/hooks';
 
@@ -18,4 +18,4 @@
   );
 }

    Definition

    -
    function useTextSelection(): Selection | null;

    Previous

    use-page-leave

    Next

    use-timeout

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    function useTextSelection(): Selection | null;

    Previous

    use-page-leave

    Next

    use-timeout

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-timeout/index.html b/hooks/use-timeout/index.html index ffddc29c4c1..bd178ad549a 100644 --- a/hooks/use-timeout/index.html +++ b/hooks/use-timeout/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-timeout

    Calls function in given timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-timeout

    Calls function in given timeout

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Random value: 

    import { useState } from 'react';
 import { Button, Text, Group } from '@mantine/core';
 import { randomId, useTimeout } from '@mantine/hooks';
@@ -48,4 +48,4 @@
 ): {
   start: (...callbackParams: any[]) => void;
   clear: () => void;
-};

    Previous

    use-text-selection

    Next

    use-did-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-text-selection

    Next

    use-did-update

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-toggle/index.html b/hooks/use-toggle/index.html index d62f0974123..a38ba9fffa2 100644 --- a/hooks/use-toggle/index.html +++ b/hooks/use-toggle/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-toggle

    Switches between given values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-toggle

    Switches between given values

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-toggle implements a common state pattern – it switches state between given values:

    import { Button } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
@@ -43,4 +43,4 @@
 
    Definition
    
 
    function useToggle<T = boolean>(
   options?: readonly T[]
-): readonly [T, (value?: React.SetStateAction<T>) => void];
    Previous
    use-set-state
    Next
    use-uncontrolled
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [T, (value?: React.SetStateAction<T>) => void];

    Previous

    use-set-state

    Next

    use-uncontrolled

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-uncontrolled/index.html b/hooks/use-uncontrolled/index.html index 932f5b1c8b8..4644de2cde0 100644 --- a/hooks/use-uncontrolled/index.html +++ b/hooks/use-uncontrolled/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-uncontrolled

    Manage state of both controlled and uncontrolled components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-uncontrolled

    Manage state of both controlled and uncontrolled components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-uncontrolled manages state for both controlled and uncontrolled components:

    import { useUncontrolled } from '@mantine/hooks';
 
@@ -51,4 +51,4 @@
   T, // current value
   (value: T) => void, // onChange function
   boolean, // value that indicates if input is controlled or not
-];

    Previous

    use-toggle

    Next

    use-validated-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-toggle

    Next

    use-validated-state

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-validated-state/index.html b/hooks/use-validated-state/index.html index 9789fdcfa1a..5311ec498d7 100644 --- a/hooks/use-validated-state/index.html +++ b/hooks/use-validated-state/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-validated-state

    Manages state with validation

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-validated-state

    Manages state with validation

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-validated-state validates state with a given rule each time state is set. It returns an object with current validation state, last valid value and current value:

    const [{ lastValidValue, value, valid }, setValue] =
@@ -69,4 +69,4 @@
     valid: boolean;
   },
   (val: T) => void,
-];

    Previous

    use-uncontrolled

    Next

    use-clipboard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-uncontrolled

    Next

    use-clipboard

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-viewport-size/index.html b/hooks/use-viewport-size/index.html index e1926d9a083..d09507ba41e 100644 --- a/hooks/use-viewport-size/index.html +++ b/hooks/use-viewport-size/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-viewport-size

    Returns viewport width and height and subscribes to changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-viewport-size

    Returns viewport width and height and subscribes to changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-viewport-size returns current viewport's width and height, it subscribes to resize and orientationchange events, during ssr hook will return { width: 0, height: 0 }:

    Width: 0, height: 0

    import { useViewportSize } from '@mantine/hooks';
@@ -17,4 +17,4 @@
 
    function useViewportSize(): {
   height: number;
   width: number;
-};
    Previous
    use-scroll-into-view
    Next
    use-window-event
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    use-scroll-into-view

    Next

    use-window-event

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-window-event/index.html b/hooks/use-window-event/index.html index 8693f077401..c737a77bd24 100644 --- a/hooks/use-window-event/index.html +++ b/hooks/use-window-event/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-event

    Adds event listener to the window object on component mount and removes the event when the component unmounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-event

    Adds event listener to the window object on component mount and removes the event when the component unmounts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-window-event adds event listener to window object on component mount and removes it on unmount:

    import { useEffect } from 'react';
 import { useWindowEvent } from '@mantine/hooks';
@@ -42,4 +42,4 @@
   type: K,
   listener: (this: Window, ev: WindowEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
-): void;

    Previous

    use-viewport-size

    Next

    use-window-scroll

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): void;

    Previous

    use-viewport-size

    Next

    use-window-scroll

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-window-scroll/index.html b/hooks/use-window-scroll/index.html index b367e0246fb..0be5a0e0b0d 100644 --- a/hooks/use-window-scroll/index.html +++ b/hooks/use-window-scroll/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-scroll

    Tracks window scroll position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-scroll

    Tracks window scroll position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-window-scroll returns current scroll position and a function to scroll smoothly to given position:

    Scroll position x: 0, y: 0

    import { useWindowScroll } from '@mantine/hooks';
 import { Button, Text, Group } from '@mantine/core';
@@ -25,4 +25,4 @@
 
    function useWindowScroll(): readonly [
   { x: number; y: number },
   (position: { x?: number; y?: number }) => void,
-];
    Previous
    use-window-event
    Next
    use-counter
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-window-event

    Next

    use-counter

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/index.html b/index.html index 9fbb532e284..e679a9cfce0 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation

    Free and open source

    All packages have MIT license, you can use Mantine in any project

    TypeScript based

    Build type safe applications, all components and hooks export types

    Use anywhere

    Mantine supports all modern frameworks: Next.js, Remix, etc.

    Get startedGitHub

    100+ components

    Every input can have description...

    ...and error

    Dark color scheme

    Dark and light theme

    Add dark theme to your application with just a few lines of code – Mantine exports global styles both for light and dark theme, all components support dark theme out of the box.

    import { MantineProvider } from '@mantine/core';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever – Mantine includes more than 100 customizable components and 50 hooks to cover you in any situation
    Free and open source
    All packages have MIT license, you can use Mantine in any project
    TypeScript based
    Build type safe applications, all components and hooks export types
    Use anywhere
    Mantine supports all modern frameworks: Next.js, Remix, etc.
    Get startedGitHub
    100+ components
    Every input can have description...
    ...and error
    Dark color scheme
    Dark and light theme
    Add dark theme to your application with just a few lines of code – Mantine exports global styles both for light and dark theme, all components support dark theme out of the box.
    import { MantineProvider } from '@mantine/core';
 
 function Demo() {
   return (
@@ -12,7 +12,7 @@
       <App />
     </MantineProvider>
   );
-}
    Customize components
    Every Mantine component supports visual customizations with props – you can quickly prototype and experiment by modifying component props:
    New branch
    You've created new branch fix-notifications from master
    2 hours ago
    Commits
    You've pushed 23 commits to fix-notifications branch
    52 minutes ago
    Pull request
    You've submitted a pull request Fix incorrect notification message (#187) 
    34 minutes ago
    Code review
    Robert Gluesticker left a code review on your pull request
    12 minutes ago
    Color
    Radius
    Active
    Line width
    Bullet size
    Align
    import { Timeline } from '@mantine/core';
+}
    Customize components
    Every Mantine component supports visual customizations with props – you can quickly prototype and experiment by modifying component props:
    New branch
    You've created new branch fix-notifications from master
    2 hours ago
    Commits
    You've pushed 23 commits to fix-notifications branch
    52 minutes ago
    Pull request
    You've submitted a pull request Fix incorrect notification message (#187) 
    34 minutes ago
    Code review
    Robert Gluesticker left a code review on your pull request
    12 minutes ago
    Color
    Radius
    Active
    Line width
    Bullet size
    Align
    import { Timeline } from '@mantine/core';
 
 function Demo() {
   return (
@@ -89,4 +89,4 @@
       <div>Width: {width}, height: {height}</div>
     </>
   );
-}

    Ready to get started?

    Mantine works in all modern environments – get started instantly with Next.js, Gatsby.js, Redwood, Vite or Remix by following getting started guide:

    Next.js
    Vite
    Remix
    RedwoodJS
    Gatsby

    Join the community

    Join Discord community
    Ask questions, share feedback, get updates, learn about upcoming features and more
    Start a discussion
    Request new features, ask questions and provide feedback with GitHub discussions
    Follow on Twitter
    Get notified about new minor and major releases
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Ready to get started?

    Mantine works in all modern environments – get started instantly with Next.js, Gatsby.js, Redwood, Vite or Remix by following getting started guide:

    Next.js
    Vite
    Remix
    RedwoodJS
    Gatsby

    Join the community

    Join Discord community
    Ask questions, share feedback, get updates, learn about upcoming features and more
    Start a discussion
    Request new features, ask questions and provide feedback with GitHub discussions
    Follow on Twitter
    Get notified about new minor and major releases
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/others/carousel/index.html b/others/carousel/index.html index 567982a0bd8..f3b99a8234b 100644 --- a/others/carousel/index.html +++ b/others/carousel/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/code-highlight/index.html b/others/code-highlight/index.html index 48ebe1e9e3b..313e746a94a 100644 --- a/others/code-highlight/index.html +++ b/others/code-highlight/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/dropzone/index.html b/others/dropzone/index.html index 88dc785aa85..a7409533b8a 100644 --- a/others/dropzone/index.html +++ b/others/dropzone/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/modals/index.html b/others/modals/index.html index 1cba8b337bb..a0e763465c0 100644 --- a/others/modals/index.html +++ b/others/modals/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/notifications/index.html b/others/notifications/index.html index 92b5e8a4913..e9dde170a88 100644 --- a/others/notifications/index.html +++ b/others/notifications/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/nprogress/index.html b/others/nprogress/index.html index 3c9c5a4840f..fa8536c724e 100644 --- a/others/nprogress/index.html +++ b/others/nprogress/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/spotlight/index.html b/others/spotlight/index.html index 3f795ba4ddc..e2efdfdf77f 100644 --- a/others/spotlight/index.html +++ b/others/spotlight/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/others/tiptap/index.html b/others/tiptap/index.html index 8f6d899f836..7c89ad97b1a 100644 --- a/others/tiptap/index.html +++ b/others/tiptap/index.html @@ -4,4 +4,4 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    Redirecting...
    \ No newline at end of file diff --git a/overview/index.html b/overview/index.html index e8ce35c0401..d40da893eb6 100644 --- a/overview/index.html +++ b/overview/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    API overview

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    API overview

    This guide will help you get familiar with core Mantine concepts. Please read this guide, theming and styles sections before starting development to learn about all of the available theming and styling features.

    @@ -280,4 +280,4 @@ <Tabs.Panel value="account">Account panel</Tabs.Panel> </Tabs> ); -}
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 959b0c04df8..92e19245ddb 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,263 +1,263 @@ -https://mantine.dev2024-01-26T09:53:04.445Zdaily0.7 -https://mantine.dev/4042024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/about2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/app-shell2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/colors-generator2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/combobox2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/contribute2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/getting-started2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/overview2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/submit-template2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/templates-usage2024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/changelog/7-0-02024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/changelog/7-1-02024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/changelog/7-2-02024-01-26T09:53:04.446Zdaily0.7 -https://mantine.dev/changelog/7-3-02024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/changelog/7-4-02024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/changelog/7-5-02024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/changelog/all-releases2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/changelog/previous-versions2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/area-chart2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/bar-chart2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/donut-chart2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/getting-started2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/line-chart2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/pie-chart2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/charts/sparkline2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/accordion2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/action-icon2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/affix2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/alert2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/anchor2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/app-shell2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/aspect-ratio2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/autocomplete2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/avatar2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/background-image2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/badge2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/blockquote2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/box2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/breadcrumbs2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/burger2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/button2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/card2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/center2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/checkbox2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/chip2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/close-button2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/code2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/collapse2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/color-picker2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/color-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/color-swatch2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/combobox2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/container2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/copy-button2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/dialog2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/divider2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/drawer2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/fieldset2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/file-button2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/file-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/flex2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/focus-trap2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/grid2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/group2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/highlight2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/hover-card2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/image2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/indicator2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/json-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/kbd2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/list2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/loader2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/loading-overlay2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/mark2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/menu2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/modal2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/multi-select2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/native-select2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/nav-link2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/notification2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/number-formatter2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/number-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/overlay2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/pagination2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/paper2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/password-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/pill2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/pills-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/pin-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/popover2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/portal2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/progress2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/radio2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/rating2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/ring-progress2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/scroll-area2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/segmented-control2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/select2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/simple-grid2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/skeleton2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/slider2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/space2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/spoiler2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/stack2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/stepper2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/switch2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/table2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/tabs2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/tags-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/text2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/text-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/textarea2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/theme-icon2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/timeline2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/title2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/tooltip2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/transition2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/typography-styles-provider2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/unstyled-button2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/core/visually-hidden2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/calendar2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/date-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/date-picker2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/date-picker-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/date-time-picker2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/dates-provider2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/getting-started2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/month-picker2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/month-picker-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/time-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/year-picker2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/dates/year-picker-input2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/actions2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/create-form-context2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/errors2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/get-input-props2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/nested2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/recipes2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/schema-validation2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/status2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/use-form2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/validation2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/validators2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/form/values2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/6x-to-7x2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/functions-reference2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/gatsby2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/icons2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/javascript2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/jest2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/next2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/polymorphic2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/redwood2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/remix2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/storybook2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/typescript2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/vite2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/guides/vitest2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-click-outside2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-clipboard2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-color-scheme2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-counter2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-debounced-state2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-debounced-value2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-did-update2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-disclosure2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-document-title2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-document-visibility2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-element-size2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-event-listener2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-eye-dropper2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-favicon2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-focus-return2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-focus-trap2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-focus-within2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-force-update2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-fullscreen2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-hash2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-headroom2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-hotkeys2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-hover2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-id2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-idle2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-in-viewport2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-input-state2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-intersection2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-interval2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-isomorphic-effect2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-list-state2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-local-storage2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-logger2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-media-query2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-merged-ref2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-mouse2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-move2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-network2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-os2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-page-leave2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-pagination2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-previous2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-queue2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-reduced-motion2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-resize-observer2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-scroll-into-view2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-set-state2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-shallow-effect2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-text-selection2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-timeout2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-toggle2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-uncontrolled2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-validated-state2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-viewport-size2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-window-event2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/hooks/use-window-scroll2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/carousel2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/code-highlight2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/dropzone2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/modals2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/notifications2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/nprogress2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/spotlight2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/others/tiptap2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/color-functions2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/css-files-list2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/css-modules2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/css-variables2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/css-variables-list2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/data-attributes2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/global-styles2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/mantine-styles2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/postcss-preset2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/rem2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/responsive2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/rtl2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/sass2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/style2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/style-props2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/styles-api2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/styles-overview2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/unstyled2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/styles-performance2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/vanilla-extract2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/styles/variants-sizes2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/colors2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/color-schemes2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/default-props2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/default-theme2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/mantine-provider2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/theme-object2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/theming/typography2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/carousel2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/code-highlight2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/modals2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/dropzone2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/notifications2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/nprogress2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/tiptap2024-01-26T09:53:04.447Zdaily0.7 -https://mantine.dev/x/spotlight2024-01-26T09:53:04.447Zdaily0.7 +https://mantine.dev2024-02-01T06:28:41.777Zdaily0.7 +https://mantine.dev/4042024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/about2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/app-shell2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/colors-generator2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/combobox2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/contribute2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/getting-started2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/overview2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/submit-template2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/templates-usage2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/7-0-02024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/7-1-02024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/7-2-02024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/7-3-02024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/7-4-02024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/7-5-02024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/all-releases2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/changelog/previous-versions2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/area-chart2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/bar-chart2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/donut-chart2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/getting-started2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/line-chart2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/pie-chart2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/charts/sparkline2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/accordion2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/action-icon2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/affix2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/alert2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/anchor2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/app-shell2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/aspect-ratio2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/autocomplete2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/avatar2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/background-image2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/badge2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/blockquote2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/box2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/breadcrumbs2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/burger2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/button2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/card2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/center2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/checkbox2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/chip2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/close-button2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/code2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/collapse2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/color-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/color-picker2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/color-swatch2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/combobox2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/container2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/copy-button2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/dialog2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/divider2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/drawer2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/fieldset2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/file-button2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/file-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/flex2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/focus-trap2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/grid2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/group2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/highlight2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/hover-card2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/image2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/indicator2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/kbd2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/json-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/list2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/loader2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/loading-overlay2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/mark2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/menu2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/modal2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/multi-select2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/native-select2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/nav-link2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/notification2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/number-formatter2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/number-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/overlay2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/pagination2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/paper2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/password-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/pill2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/pills-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/pin-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/popover2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/portal2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/progress2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/radio2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/rating2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/ring-progress2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/scroll-area2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/segmented-control2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/select2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/simple-grid2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/skeleton2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/slider2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/space2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/spoiler2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/stack2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/switch2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/stepper2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/table2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/tabs2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/text2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/tags-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/text-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/textarea2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/theme-icon2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/timeline2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/title2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/tooltip2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/transition2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/typography-styles-provider2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/unstyled-button2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/core/visually-hidden2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/calendar2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/date-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/date-picker2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/date-picker-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/date-time-picker2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/dates-provider2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/getting-started2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/month-picker2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/month-picker-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/time-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/year-picker2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/dates/year-picker-input2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/actions2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/create-form-context2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/errors2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/get-input-props2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/nested2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/recipes2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/schema-validation2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/status2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/use-form2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/validation2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/validators2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/form/values2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/6x-to-7x2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/functions-reference2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/gatsby2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/icons2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/javascript2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/jest2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/next2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/polymorphic2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/redwood2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/remix2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/storybook2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/typescript2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/vite2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/guides/vitest2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/carousel2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/code-highlight2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/dropzone2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/modals2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/notifications2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/nprogress2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/spotlight2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/others/tiptap2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-click-outside2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-clipboard2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-color-scheme2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-counter2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-debounced-state2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-debounced-value2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-did-update2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-disclosure2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-document-title2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-document-visibility2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-element-size2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-eye-dropper2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-event-listener2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-favicon2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-focus-return2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-focus-trap2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-focus-within2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-force-update2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-fullscreen2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-hash2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-headroom2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-hotkeys2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-id2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-hover2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-idle2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-in-viewport2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-input-state2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-intersection2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-interval2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-isomorphic-effect2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-list-state2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-local-storage2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-logger2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-media-query2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-merged-ref2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-mouse2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-move2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-network2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-os2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-page-leave2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-pagination2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-previous2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-queue2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-reduced-motion2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-resize-observer2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-scroll-into-view2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-set-state2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-shallow-effect2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-text-selection2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-timeout2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-toggle2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-uncontrolled2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-validated-state2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-viewport-size2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-window-event2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/hooks/use-window-scroll2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/color-functions2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/css-files-list2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/css-modules2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/css-variables2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/css-variables-list2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/data-attributes2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/global-styles2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/mantine-styles2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/postcss-preset2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/rem2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/responsive2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/sass2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/rtl2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/style2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/style-props2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/styles-api2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/styles-overview2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/styles-performance2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/unstyled2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/vanilla-extract2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/styles/variants-sizes2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/color-schemes2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/colors2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/default-props2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/default-theme2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/mantine-provider2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/theme-object2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/theming/typography2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/carousel2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/code-highlight2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/dropzone2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/modals2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/notifications2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/nprogress2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/spotlight2024-02-01T06:28:41.778Zdaily0.7 +https://mantine.dev/x/tiptap2024-02-01T06:28:41.778Zdaily0.7 \ No newline at end of file diff --git a/styles/color-functions/index.html b/styles/color-functions/index.html index fb6267f71d6..f436fd0421f 100644 --- a/styles/color-functions/index.html +++ b/styles/color-functions/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color functions

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color functions

    @mantine/core package exports several functions that can be used to manipulate colors or extract information before using them as CSS value.

    darken and lighten

    @@ -143,4 +143,4 @@ luminance('#fff'); // -> 1 luminance('#000'); // -> 0 -luminance('#4578FC'); // -> 0.21726425554966

    Previous

    Style props

    Next

    RTL (right-to-left)

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +luminance('#4578FC'); // -> 0.21726425554966

    Previous

    Style props

    Next

    RTL (right-to-left)

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-files-list/index.html b/styles/css-files-list/index.html index c157b6d5e93..c263488b9e2 100644 --- a/styles/css-files-list/index.html +++ b/styles/css-files-list/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS files list

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS files list

    This page contains a list of CSS files that you can import from @mantine/core package as a replacement for @mantine/core/styles.css.

    Components dependencies

    @@ -45,4 +45,4 @@ import '@mantine/core/styles/Button.css'; import '@mantine/core/styles/UnstyledButton.css';

    Files list

    -
    ComponentImport
    global
    import '@mantine/core/styles/global.css';
    Accordion
    import '@mantine/core/styles/Accordion.css';
    ActionIcon
    import '@mantine/core/styles/ActionIcon.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    Alert
    import '@mantine/core/styles/Alert.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    Button
    import '@mantine/core/styles/Button.css';
    Burger
    import '@mantine/core/styles/Burger.css';
    Card
    import '@mantine/core/styles/Card.css';
    Center
    import '@mantine/core/styles/Center.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    Code
    import '@mantine/core/styles/Code.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Container
    import '@mantine/core/styles/Container.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    Group
    import '@mantine/core/styles/Group.css';
    Image
    import '@mantine/core/styles/Image.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Input
    import '@mantine/core/styles/Input.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    List
    import '@mantine/core/styles/List.css';
    Loader
    import '@mantine/core/styles/Loader.css';
    LoadingOverlay
    import '@mantine/core/styles/LoadingOverlay.css';
    Mark
    import '@mantine/core/styles/Mark.css';
    Menu
    import '@mantine/core/styles/Menu.css';
    Modal
    import '@mantine/core/styles/Modal.css';
    ModalBase
    import '@mantine/core/styles/ModalBase.css';
    NavLink
    import '@mantine/core/styles/NavLink.css';
    Notification
    import '@mantine/core/styles/Notification.css';
    NumberInput
    import '@mantine/core/styles/NumberInput.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Table
    import '@mantine/core/styles/Table.css';
    Tabs
    import '@mantine/core/styles/Tabs.css';
    Text
    import '@mantine/core/styles/Text.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Title
    import '@mantine/core/styles/Title.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    UnstyledButton
    import '@mantine/core/styles/UnstyledButton.css';
    VisuallyHidden
    import '@mantine/core/styles/VisuallyHidden.css';

    Previous

    Mantine styles

    Next

    CSS modules

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    ComponentImport
    global
    import '@mantine/core/styles/global.css';
    Accordion
    import '@mantine/core/styles/Accordion.css';
    ActionIcon
    import '@mantine/core/styles/ActionIcon.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    Alert
    import '@mantine/core/styles/Alert.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    Button
    import '@mantine/core/styles/Button.css';
    Burger
    import '@mantine/core/styles/Burger.css';
    Center
    import '@mantine/core/styles/Center.css';
    Card
    import '@mantine/core/styles/Card.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    Code
    import '@mantine/core/styles/Code.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Container
    import '@mantine/core/styles/Container.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    Group
    import '@mantine/core/styles/Group.css';
    Image
    import '@mantine/core/styles/Image.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Input
    import '@mantine/core/styles/Input.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    List
    import '@mantine/core/styles/List.css';
    Loader
    import '@mantine/core/styles/Loader.css';
    LoadingOverlay
    import '@mantine/core/styles/LoadingOverlay.css';
    Mark
    import '@mantine/core/styles/Mark.css';
    Menu
    import '@mantine/core/styles/Menu.css';
    Modal
    import '@mantine/core/styles/Modal.css';
    ModalBase
    import '@mantine/core/styles/ModalBase.css';
    NavLink
    import '@mantine/core/styles/NavLink.css';
    Notification
    import '@mantine/core/styles/Notification.css';
    NumberInput
    import '@mantine/core/styles/NumberInput.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Table
    import '@mantine/core/styles/Table.css';
    Tabs
    import '@mantine/core/styles/Tabs.css';
    Text
    import '@mantine/core/styles/Text.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Title
    import '@mantine/core/styles/Title.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    UnstyledButton
    import '@mantine/core/styles/UnstyledButton.css';
    VisuallyHidden
    import '@mantine/core/styles/VisuallyHidden.css';

    Previous

    Mantine styles

    Next

    CSS modules

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-modules/index.html b/styles/css-modules/index.html index 9a078946302..5cc1fca0929 100644 --- a/styles/css-modules/index.html +++ b/styles/css-modules/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS modules

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CSS modules

    All Mantine components use CSS modules for styling. It is recommended to use CSS modules in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS.

    @@ -160,4 +160,4 @@
  • It is hard to customize styles based on data-* attributes when using utility-based CSS libraries
  • It is impossible to style inner elements of Mantine components with static selectors when using styled-components and other similar libraries if component uses Portal because some elements will be rendered outside of the component root and inner elements are not part of the component tree
    • -

    Previous

    CSS files list

    Next

    PostCSS preset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    CSS files list

    Next

    PostCSS preset

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-variables-list/index.html b/styles/css-variables-list/index.html index a2932afb117..2d0d4c7eada 100644 --- a/styles/css-variables-list/index.html +++ b/styles/css-variables-list/index.html @@ -4,6 +4,6 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default CSS variables list

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default CSS variables list

    This page contains a list of all Mantine CSS variables that are generated from default theme.

    -

    CSS variables not depending on color scheme

    --mantine-scale1
    --mantine-cursor-typedefault
    --mantine-webkit-font-smoothingantialiased
    --mantine-color-schemelight dark
    --mantine-moz-font-smoothinggrayscale
    --mantine-color-white#fff
    --mantine-color-black#000
    --mantine-line-height1.55
    --mantine-font-family-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-font-family-monospaceui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
    --mantine-font-family-headings-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-heading-font-weight700
    --mantine-heading-text-wrapwrap
    --mantine-radius-default0.25rem
    --mantine-primary-color-filledvar(--mantine-color-blue-filled)
    --mantine-primary-color-filled-hovervar(--mantine-color-blue-filled-hover)
    --mantine-primary-color-lightvar(--mantine-color-blue-light)
    --mantine-primary-color-light-hovervar(--mantine-color-blue-light-hover)
    --mantine-primary-color-light-colorvar(--mantine-color-blue-light-color)
    --mantine-breakpoint-xs36em
    --mantine-breakpoint-sm48em
    --mantine-breakpoint-md62em
    --mantine-breakpoint-lg75em
    --mantine-breakpoint-xl88em
    --mantine-spacing-xs0.625rem
    --mantine-spacing-sm0.75rem
    --mantine-spacing-md1rem
    --mantine-spacing-lg1.25rem
    --mantine-spacing-xl2rem
    --mantine-font-size-xs0.75rem
    --mantine-font-size-sm0.875rem
    --mantine-font-size-md1rem
    --mantine-font-size-lg1.125rem
    --mantine-font-size-xl1.25rem
    --mantine-line-height-xs1.4
    --mantine-line-height-sm1.45
    --mantine-line-height-md1.55
    --mantine-line-height-lg1.6
    --mantine-line-height-xl1.65
    --mantine-shadow-xs0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1)
    --mantine-shadow-sm0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem
    --mantine-shadow-md0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem
    --mantine-shadow-lg0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem
    --mantine-shadow-xl0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem
    --mantine-radius-xs0.125rem
    --mantine-radius-sm0.25rem
    --mantine-radius-md0.5rem
    --mantine-radius-lg1rem
    --mantine-radius-xl2rem
    --mantine-primary-color-0var(--mantine-color-blue-0)
    --mantine-primary-color-1var(--mantine-color-blue-1)
    --mantine-primary-color-2var(--mantine-color-blue-2)
    --mantine-primary-color-3var(--mantine-color-blue-3)
    --mantine-primary-color-4var(--mantine-color-blue-4)
    --mantine-primary-color-5var(--mantine-color-blue-5)
    --mantine-primary-color-6var(--mantine-color-blue-6)
    --mantine-primary-color-7var(--mantine-color-blue-7)
    --mantine-primary-color-8var(--mantine-color-blue-8)
    --mantine-primary-color-9var(--mantine-color-blue-9)
    --mantine-color-dark-0#C9C9C9
    --mantine-color-dark-1#b8b8b8
    --mantine-color-dark-2#828282
    --mantine-color-dark-3#696969
    --mantine-color-dark-4#424242
    --mantine-color-dark-5#3b3b3b
    --mantine-color-dark-6#2e2e2e
    --mantine-color-dark-7#242424
    --mantine-color-dark-8#1f1f1f
    --mantine-color-dark-9#141414
    --mantine-color-gray-0#f8f9fa
    --mantine-color-gray-1#f1f3f5
    --mantine-color-gray-2#e9ecef
    --mantine-color-gray-3#dee2e6
    --mantine-color-gray-4#ced4da
    --mantine-color-gray-5#adb5bd
    --mantine-color-gray-6#868e96
    --mantine-color-gray-7#495057
    --mantine-color-gray-8#343a40
    --mantine-color-gray-9#212529
    --mantine-color-red-0#fff5f5
    --mantine-color-red-1#ffe3e3
    --mantine-color-red-2#ffc9c9
    --mantine-color-red-3#ffa8a8
    --mantine-color-red-4#ff8787
    --mantine-color-red-5#ff6b6b
    --mantine-color-red-6#fa5252
    --mantine-color-red-7#f03e3e
    --mantine-color-red-8#e03131
    --mantine-color-red-9#c92a2a
    --mantine-color-pink-0#fff0f6
    --mantine-color-pink-1#ffdeeb
    --mantine-color-pink-2#fcc2d7
    --mantine-color-pink-3#faa2c1
    --mantine-color-pink-4#f783ac
    --mantine-color-pink-5#f06595
    --mantine-color-pink-6#e64980
    --mantine-color-pink-7#d6336c
    --mantine-color-pink-8#c2255c
    --mantine-color-pink-9#a61e4d
    --mantine-color-grape-0#f8f0fc
    --mantine-color-grape-1#f3d9fa
    --mantine-color-grape-2#eebefa
    --mantine-color-grape-3#e599f7
    --mantine-color-grape-4#da77f2
    --mantine-color-grape-5#cc5de8
    --mantine-color-grape-6#be4bdb
    --mantine-color-grape-7#ae3ec9
    --mantine-color-grape-8#9c36b5
    --mantine-color-grape-9#862e9c
    --mantine-color-violet-0#f3f0ff
    --mantine-color-violet-1#e5dbff
    --mantine-color-violet-2#d0bfff
    --mantine-color-violet-3#b197fc
    --mantine-color-violet-4#9775fa
    --mantine-color-violet-5#845ef7
    --mantine-color-violet-6#7950f2
    --mantine-color-violet-7#7048e8
    --mantine-color-violet-8#6741d9
    --mantine-color-violet-9#5f3dc4
    --mantine-color-indigo-0#edf2ff
    --mantine-color-indigo-1#dbe4ff
    --mantine-color-indigo-2#bac8ff
    --mantine-color-indigo-3#91a7ff
    --mantine-color-indigo-4#748ffc
    --mantine-color-indigo-5#5c7cfa
    --mantine-color-indigo-6#4c6ef5
    --mantine-color-indigo-7#4263eb
    --mantine-color-indigo-8#3b5bdb
    --mantine-color-indigo-9#364fc7
    --mantine-color-blue-0#e7f5ff
    --mantine-color-blue-1#d0ebff
    --mantine-color-blue-2#a5d8ff
    --mantine-color-blue-3#74c0fc
    --mantine-color-blue-4#4dabf7
    --mantine-color-blue-5#339af0
    --mantine-color-blue-6#228be6
    --mantine-color-blue-7#1c7ed6
    --mantine-color-blue-8#1971c2
    --mantine-color-blue-9#1864ab
    --mantine-color-cyan-0#e3fafc
    --mantine-color-cyan-1#c5f6fa
    --mantine-color-cyan-2#99e9f2
    --mantine-color-cyan-3#66d9e8
    --mantine-color-cyan-4#3bc9db
    --mantine-color-cyan-5#22b8cf
    --mantine-color-cyan-6#15aabf
    --mantine-color-cyan-7#1098ad
    --mantine-color-cyan-8#0c8599
    --mantine-color-cyan-9#0b7285
    --mantine-color-teal-0#e6fcf5
    --mantine-color-teal-1#c3fae8
    --mantine-color-teal-2#96f2d7
    --mantine-color-teal-3#63e6be
    --mantine-color-teal-4#38d9a9
    --mantine-color-teal-5#20c997
    --mantine-color-teal-6#12b886
    --mantine-color-teal-7#0ca678
    --mantine-color-teal-8#099268
    --mantine-color-teal-9#087f5b
    --mantine-color-green-0#ebfbee
    --mantine-color-green-1#d3f9d8
    --mantine-color-green-2#b2f2bb
    --mantine-color-green-3#8ce99a
    --mantine-color-green-4#69db7c
    --mantine-color-green-5#51cf66
    --mantine-color-green-6#40c057
    --mantine-color-green-7#37b24d
    --mantine-color-green-8#2f9e44
    --mantine-color-green-9#2b8a3e
    --mantine-color-lime-0#f4fce3
    --mantine-color-lime-1#e9fac8
    --mantine-color-lime-2#d8f5a2
    --mantine-color-lime-3#c0eb75
    --mantine-color-lime-4#a9e34b
    --mantine-color-lime-5#94d82d
    --mantine-color-lime-6#82c91e
    --mantine-color-lime-7#74b816
    --mantine-color-lime-8#66a80f
    --mantine-color-lime-9#5c940d
    --mantine-color-yellow-0#fff9db
    --mantine-color-yellow-1#fff3bf
    --mantine-color-yellow-2#ffec99
    --mantine-color-yellow-3#ffe066
    --mantine-color-yellow-4#ffd43b
    --mantine-color-yellow-5#fcc419
    --mantine-color-yellow-6#fab005
    --mantine-color-yellow-7#f59f00
    --mantine-color-yellow-8#f08c00
    --mantine-color-yellow-9#e67700
    --mantine-color-orange-0#fff4e6
    --mantine-color-orange-1#ffe8cc
    --mantine-color-orange-2#ffd8a8
    --mantine-color-orange-3#ffc078
    --mantine-color-orange-4#ffa94d
    --mantine-color-orange-5#ff922b
    --mantine-color-orange-6#fd7e14
    --mantine-color-orange-7#f76707
    --mantine-color-orange-8#e8590c
    --mantine-color-orange-9#d9480f
    --mantine-h1-font-size2.125rem
    --mantine-h1-line-height1.3
    --mantine-h1-font-weight700
    --mantine-h2-font-size1.625rem
    --mantine-h2-line-height1.35
    --mantine-h2-font-weight700
    --mantine-h3-font-size1.375rem
    --mantine-h3-line-height1.4
    --mantine-h3-font-weight700
    --mantine-h4-font-size1.125rem
    --mantine-h4-line-height1.45
    --mantine-h4-font-weight700
    --mantine-h5-font-size1rem
    --mantine-h5-line-height1.5
    --mantine-h5-font-weight700
    --mantine-h6-font-size0.875rem
    --mantine-h6-line-height1.5
    --mantine-h6-font-weight700

    Light color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-black)
    --mantine-color-text#000
    --mantine-color-body#fff
    --mantine-color-errorvar(--mantine-color-red-6)
    --mantine-color-placeholdervar(--mantine-color-gray-5)
    --mantine-color-anchorvar(--mantine-color-blue-6)
    --mantine-color-defaultvar(--mantine-color-white)
    --mantine-color-default-hovervar(--mantine-color-gray-0)
    --mantine-color-default-colorvar(--mantine-color-black)
    --mantine-color-default-bordervar(--mantine-color-gray-4)
    --mantine-color-dimmedvar(--mantine-color-gray-6)
    --mantine-color-dark-textvar(--mantine-color-dark-filled)
    --mantine-color-dark-filledvar(--mantine-color-dark-6)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-7)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.1)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.12)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-6)
    --mantine-color-dark-outlinevar(--mantine-color-dark-6)
    --mantine-color-dark-outline-hoverrgba(46, 46, 46, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-filled)
    --mantine-color-gray-filledvar(--mantine-color-gray-6)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-7)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.1)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.12)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-6)
    --mantine-color-gray-outlinevar(--mantine-color-gray-6)
    --mantine-color-gray-outline-hoverrgba(134, 142, 150, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-filled)
    --mantine-color-red-filledvar(--mantine-color-red-6)
    --mantine-color-red-filled-hovervar(--mantine-color-red-7)
    --mantine-color-red-lightrgba(250, 82, 82, 0.1)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.12)
    --mantine-color-red-light-colorvar(--mantine-color-red-6)
    --mantine-color-red-outlinevar(--mantine-color-red-6)
    --mantine-color-red-outline-hoverrgba(250, 82, 82, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-filled)
    --mantine-color-pink-filledvar(--mantine-color-pink-6)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-7)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.1)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.12)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-6)
    --mantine-color-pink-outlinevar(--mantine-color-pink-6)
    --mantine-color-pink-outline-hoverrgba(230, 73, 128, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-filled)
    --mantine-color-grape-filledvar(--mantine-color-grape-6)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-7)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.1)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.12)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-6)
    --mantine-color-grape-outlinevar(--mantine-color-grape-6)
    --mantine-color-grape-outline-hoverrgba(190, 75, 219, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-filled)
    --mantine-color-violet-filledvar(--mantine-color-violet-6)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-7)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.1)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.12)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-6)
    --mantine-color-violet-outlinevar(--mantine-color-violet-6)
    --mantine-color-violet-outline-hoverrgba(121, 80, 242, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-filled)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-6)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-7)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.1)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.12)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-6)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-6)
    --mantine-color-indigo-outline-hoverrgba(76, 110, 245, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-filled)
    --mantine-color-blue-filledvar(--mantine-color-blue-6)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-7)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.1)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.12)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-6)
    --mantine-color-blue-outlinevar(--mantine-color-blue-6)
    --mantine-color-blue-outline-hoverrgba(34, 139, 230, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-filled)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-6)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-7)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.1)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.12)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-6)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-6)
    --mantine-color-cyan-outline-hoverrgba(21, 170, 191, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-filled)
    --mantine-color-teal-filledvar(--mantine-color-teal-6)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-7)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.1)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.12)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-6)
    --mantine-color-teal-outlinevar(--mantine-color-teal-6)
    --mantine-color-teal-outline-hoverrgba(18, 184, 134, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-filled)
    --mantine-color-green-filledvar(--mantine-color-green-6)
    --mantine-color-green-filled-hovervar(--mantine-color-green-7)
    --mantine-color-green-lightrgba(64, 192, 87, 0.1)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.12)
    --mantine-color-green-light-colorvar(--mantine-color-green-6)
    --mantine-color-green-outlinevar(--mantine-color-green-6)
    --mantine-color-green-outline-hoverrgba(64, 192, 87, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-filled)
    --mantine-color-lime-filledvar(--mantine-color-lime-6)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-7)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.1)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.12)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-6)
    --mantine-color-lime-outlinevar(--mantine-color-lime-6)
    --mantine-color-lime-outline-hoverrgba(130, 201, 30, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-filled)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-6)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-7)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.1)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.12)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-6)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-6)
    --mantine-color-yellow-outline-hoverrgba(250, 176, 5, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-filled)
    --mantine-color-orange-filledvar(--mantine-color-orange-6)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-7)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.1)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.12)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-6)
    --mantine-color-orange-outlinevar(--mantine-color-orange-6)
    --mantine-color-orange-outline-hoverrgba(253, 126, 20, 0.05)

    Dark color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-white)
    --mantine-color-textvar(--mantine-color-dark-0)
    --mantine-color-bodyvar(--mantine-color-dark-7)
    --mantine-color-errorvar(--mantine-color-red-8)
    --mantine-color-placeholdervar(--mantine-color-dark-3)
    --mantine-color-anchorvar(--mantine-color-blue-4)
    --mantine-color-defaultvar(--mantine-color-dark-6)
    --mantine-color-default-hovervar(--mantine-color-dark-5)
    --mantine-color-default-colorvar(--mantine-color-white)
    --mantine-color-default-bordervar(--mantine-color-dark-4)
    --mantine-color-dimmedvar(--mantine-color-dark-2)
    --mantine-color-dark-textvar(--mantine-color-dark-4)
    --mantine-color-dark-filledvar(--mantine-color-dark-8)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-9)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.15)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.2)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-3)
    --mantine-color-dark-outlinevar(--mantine-color-dark-4)
    --mantine-color-dark-outline-hoverrgba(66, 66, 66, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-4)
    --mantine-color-gray-filledvar(--mantine-color-gray-8)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-9)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.15)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.2)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-3)
    --mantine-color-gray-outlinevar(--mantine-color-gray-4)
    --mantine-color-gray-outline-hoverrgba(206, 212, 218, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-4)
    --mantine-color-red-filledvar(--mantine-color-red-8)
    --mantine-color-red-filled-hovervar(--mantine-color-red-9)
    --mantine-color-red-lightrgba(250, 82, 82, 0.15)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.2)
    --mantine-color-red-light-colorvar(--mantine-color-red-3)
    --mantine-color-red-outlinevar(--mantine-color-red-4)
    --mantine-color-red-outline-hoverrgba(255, 135, 135, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-4)
    --mantine-color-pink-filledvar(--mantine-color-pink-8)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-9)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.15)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.2)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-3)
    --mantine-color-pink-outlinevar(--mantine-color-pink-4)
    --mantine-color-pink-outline-hoverrgba(247, 131, 172, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-4)
    --mantine-color-grape-filledvar(--mantine-color-grape-8)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-9)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.15)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.2)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-3)
    --mantine-color-grape-outlinevar(--mantine-color-grape-4)
    --mantine-color-grape-outline-hoverrgba(218, 119, 242, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-4)
    --mantine-color-violet-filledvar(--mantine-color-violet-8)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-9)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.15)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.2)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-3)
    --mantine-color-violet-outlinevar(--mantine-color-violet-4)
    --mantine-color-violet-outline-hoverrgba(151, 117, 250, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-4)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-8)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-9)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.15)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.2)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-3)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-4)
    --mantine-color-indigo-outline-hoverrgba(116, 143, 252, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-4)
    --mantine-color-blue-filledvar(--mantine-color-blue-8)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-9)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.15)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.2)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-3)
    --mantine-color-blue-outlinevar(--mantine-color-blue-4)
    --mantine-color-blue-outline-hoverrgba(77, 171, 247, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-4)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-8)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-9)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.15)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.2)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-3)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-4)
    --mantine-color-cyan-outline-hoverrgba(59, 201, 219, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-4)
    --mantine-color-teal-filledvar(--mantine-color-teal-8)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-9)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.15)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.2)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-3)
    --mantine-color-teal-outlinevar(--mantine-color-teal-4)
    --mantine-color-teal-outline-hoverrgba(56, 217, 169, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-4)
    --mantine-color-green-filledvar(--mantine-color-green-8)
    --mantine-color-green-filled-hovervar(--mantine-color-green-9)
    --mantine-color-green-lightrgba(64, 192, 87, 0.15)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.2)
    --mantine-color-green-light-colorvar(--mantine-color-green-3)
    --mantine-color-green-outlinevar(--mantine-color-green-4)
    --mantine-color-green-outline-hoverrgba(105, 219, 124, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-4)
    --mantine-color-lime-filledvar(--mantine-color-lime-8)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-9)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.15)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.2)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-3)
    --mantine-color-lime-outlinevar(--mantine-color-lime-4)
    --mantine-color-lime-outline-hoverrgba(169, 227, 75, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-4)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-8)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-9)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.15)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.2)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-3)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-4)
    --mantine-color-yellow-outline-hoverrgba(255, 212, 59, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-4)
    --mantine-color-orange-filledvar(--mantine-color-orange-8)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-9)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.15)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.2)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-3)
    --mantine-color-orange-outlinevar(--mantine-color-orange-4)
    --mantine-color-orange-outline-hoverrgba(255, 169, 77, 0.05)
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    CSS variables not depending on color scheme

    --mantine-scale1
    --mantine-cursor-typedefault
    --mantine-webkit-font-smoothingantialiased
    --mantine-color-schemelight dark
    --mantine-moz-font-smoothinggrayscale
    --mantine-color-white#fff
    --mantine-color-black#000
    --mantine-line-height1.55
    --mantine-font-family-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-font-family-monospaceui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
    --mantine-font-family-headings-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji
    --mantine-heading-font-weight700
    --mantine-heading-text-wrapwrap
    --mantine-radius-default0.25rem
    --mantine-primary-color-filledvar(--mantine-color-blue-filled)
    --mantine-primary-color-filled-hovervar(--mantine-color-blue-filled-hover)
    --mantine-primary-color-lightvar(--mantine-color-blue-light)
    --mantine-primary-color-light-hovervar(--mantine-color-blue-light-hover)
    --mantine-primary-color-light-colorvar(--mantine-color-blue-light-color)
    --mantine-breakpoint-xs36em
    --mantine-breakpoint-sm48em
    --mantine-breakpoint-md62em
    --mantine-breakpoint-lg75em
    --mantine-breakpoint-xl88em
    --mantine-spacing-xs0.625rem
    --mantine-spacing-sm0.75rem
    --mantine-spacing-md1rem
    --mantine-spacing-lg1.25rem
    --mantine-spacing-xl2rem
    --mantine-font-size-xs0.75rem
    --mantine-font-size-sm0.875rem
    --mantine-font-size-md1rem
    --mantine-font-size-lg1.125rem
    --mantine-font-size-xl1.25rem
    --mantine-line-height-xs1.4
    --mantine-line-height-sm1.45
    --mantine-line-height-md1.55
    --mantine-line-height-lg1.6
    --mantine-line-height-xl1.65
    --mantine-shadow-xs0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1)
    --mantine-shadow-sm0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 0.625rem 0.9375rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.4375rem 0.4375rem -0.3125rem
    --mantine-shadow-md0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem
    --mantine-shadow-lg0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.75rem 1.4375rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 0.75rem 0.75rem -0.4375rem
    --mantine-shadow-xl0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 2.25rem 1.75rem -0.4375rem, rgba(0, 0, 0, 0.04) 0 1.0625rem 1.0625rem -0.4375rem
    --mantine-radius-xs0.125rem
    --mantine-radius-sm0.25rem
    --mantine-radius-md0.5rem
    --mantine-radius-lg1rem
    --mantine-radius-xl2rem
    --mantine-primary-color-0var(--mantine-color-blue-0)
    --mantine-primary-color-1var(--mantine-color-blue-1)
    --mantine-primary-color-2var(--mantine-color-blue-2)
    --mantine-primary-color-3var(--mantine-color-blue-3)
    --mantine-primary-color-4var(--mantine-color-blue-4)
    --mantine-primary-color-5var(--mantine-color-blue-5)
    --mantine-primary-color-6var(--mantine-color-blue-6)
    --mantine-primary-color-7var(--mantine-color-blue-7)
    --mantine-primary-color-8var(--mantine-color-blue-8)
    --mantine-primary-color-9var(--mantine-color-blue-9)
    --mantine-color-dark-0#C9C9C9
    --mantine-color-dark-1#b8b8b8
    --mantine-color-dark-2#828282
    --mantine-color-dark-3#696969
    --mantine-color-dark-4#424242
    --mantine-color-dark-5#3b3b3b
    --mantine-color-dark-6#2e2e2e
    --mantine-color-dark-7#242424
    --mantine-color-dark-8#1f1f1f
    --mantine-color-dark-9#141414
    --mantine-color-gray-0#f8f9fa
    --mantine-color-gray-1#f1f3f5
    --mantine-color-gray-2#e9ecef
    --mantine-color-gray-3#dee2e6
    --mantine-color-gray-4#ced4da
    --mantine-color-gray-5#adb5bd
    --mantine-color-gray-6#868e96
    --mantine-color-gray-7#495057
    --mantine-color-gray-8#343a40
    --mantine-color-gray-9#212529
    --mantine-color-red-0#fff5f5
    --mantine-color-red-1#ffe3e3
    --mantine-color-red-2#ffc9c9
    --mantine-color-red-3#ffa8a8
    --mantine-color-red-4#ff8787
    --mantine-color-red-5#ff6b6b
    --mantine-color-red-6#fa5252
    --mantine-color-red-7#f03e3e
    --mantine-color-red-8#e03131
    --mantine-color-red-9#c92a2a
    --mantine-color-pink-0#fff0f6
    --mantine-color-pink-1#ffdeeb
    --mantine-color-pink-2#fcc2d7
    --mantine-color-pink-3#faa2c1
    --mantine-color-pink-4#f783ac
    --mantine-color-pink-5#f06595
    --mantine-color-pink-6#e64980
    --mantine-color-pink-7#d6336c
    --mantine-color-pink-8#c2255c
    --mantine-color-pink-9#a61e4d
    --mantine-color-grape-0#f8f0fc
    --mantine-color-grape-1#f3d9fa
    --mantine-color-grape-2#eebefa
    --mantine-color-grape-3#e599f7
    --mantine-color-grape-4#da77f2
    --mantine-color-grape-5#cc5de8
    --mantine-color-grape-6#be4bdb
    --mantine-color-grape-7#ae3ec9
    --mantine-color-grape-8#9c36b5
    --mantine-color-grape-9#862e9c
    --mantine-color-violet-0#f3f0ff
    --mantine-color-violet-1#e5dbff
    --mantine-color-violet-2#d0bfff
    --mantine-color-violet-3#b197fc
    --mantine-color-violet-4#9775fa
    --mantine-color-violet-5#845ef7
    --mantine-color-violet-6#7950f2
    --mantine-color-violet-7#7048e8
    --mantine-color-violet-8#6741d9
    --mantine-color-violet-9#5f3dc4
    --mantine-color-indigo-0#edf2ff
    --mantine-color-indigo-1#dbe4ff
    --mantine-color-indigo-2#bac8ff
    --mantine-color-indigo-3#91a7ff
    --mantine-color-indigo-4#748ffc
    --mantine-color-indigo-5#5c7cfa
    --mantine-color-indigo-6#4c6ef5
    --mantine-color-indigo-7#4263eb
    --mantine-color-indigo-8#3b5bdb
    --mantine-color-indigo-9#364fc7
    --mantine-color-blue-0#e7f5ff
    --mantine-color-blue-1#d0ebff
    --mantine-color-blue-2#a5d8ff
    --mantine-color-blue-3#74c0fc
    --mantine-color-blue-4#4dabf7
    --mantine-color-blue-5#339af0
    --mantine-color-blue-6#228be6
    --mantine-color-blue-7#1c7ed6
    --mantine-color-blue-8#1971c2
    --mantine-color-blue-9#1864ab
    --mantine-color-cyan-0#e3fafc
    --mantine-color-cyan-1#c5f6fa
    --mantine-color-cyan-2#99e9f2
    --mantine-color-cyan-3#66d9e8
    --mantine-color-cyan-4#3bc9db
    --mantine-color-cyan-5#22b8cf
    --mantine-color-cyan-6#15aabf
    --mantine-color-cyan-7#1098ad
    --mantine-color-cyan-8#0c8599
    --mantine-color-cyan-9#0b7285
    --mantine-color-teal-0#e6fcf5
    --mantine-color-teal-1#c3fae8
    --mantine-color-teal-2#96f2d7
    --mantine-color-teal-3#63e6be
    --mantine-color-teal-4#38d9a9
    --mantine-color-teal-5#20c997
    --mantine-color-teal-6#12b886
    --mantine-color-teal-7#0ca678
    --mantine-color-teal-8#099268
    --mantine-color-teal-9#087f5b
    --mantine-color-green-0#ebfbee
    --mantine-color-green-1#d3f9d8
    --mantine-color-green-2#b2f2bb
    --mantine-color-green-3#8ce99a
    --mantine-color-green-4#69db7c
    --mantine-color-green-5#51cf66
    --mantine-color-green-6#40c057
    --mantine-color-green-7#37b24d
    --mantine-color-green-8#2f9e44
    --mantine-color-green-9#2b8a3e
    --mantine-color-lime-0#f4fce3
    --mantine-color-lime-1#e9fac8
    --mantine-color-lime-2#d8f5a2
    --mantine-color-lime-3#c0eb75
    --mantine-color-lime-4#a9e34b
    --mantine-color-lime-5#94d82d
    --mantine-color-lime-6#82c91e
    --mantine-color-lime-7#74b816
    --mantine-color-lime-8#66a80f
    --mantine-color-lime-9#5c940d
    --mantine-color-yellow-0#fff9db
    --mantine-color-yellow-1#fff3bf
    --mantine-color-yellow-2#ffec99
    --mantine-color-yellow-3#ffe066
    --mantine-color-yellow-4#ffd43b
    --mantine-color-yellow-5#fcc419
    --mantine-color-yellow-6#fab005
    --mantine-color-yellow-7#f59f00
    --mantine-color-yellow-8#f08c00
    --mantine-color-yellow-9#e67700
    --mantine-color-orange-0#fff4e6
    --mantine-color-orange-1#ffe8cc
    --mantine-color-orange-2#ffd8a8
    --mantine-color-orange-3#ffc078
    --mantine-color-orange-4#ffa94d
    --mantine-color-orange-5#ff922b
    --mantine-color-orange-6#fd7e14
    --mantine-color-orange-7#f76707
    --mantine-color-orange-8#e8590c
    --mantine-color-orange-9#d9480f
    --mantine-h1-font-size2.125rem
    --mantine-h1-line-height1.3
    --mantine-h1-font-weight700
    --mantine-h2-font-size1.625rem
    --mantine-h2-line-height1.35
    --mantine-h2-font-weight700
    --mantine-h3-font-size1.375rem
    --mantine-h3-line-height1.4
    --mantine-h3-font-weight700
    --mantine-h4-font-size1.125rem
    --mantine-h4-line-height1.45
    --mantine-h4-font-weight700
    --mantine-h5-font-size1rem
    --mantine-h5-line-height1.5
    --mantine-h5-font-weight700
    --mantine-h6-font-size0.875rem
    --mantine-h6-line-height1.5
    --mantine-h6-font-weight700

    Light color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-black)
    --mantine-color-text#000
    --mantine-color-body#fff
    --mantine-color-errorvar(--mantine-color-red-6)
    --mantine-color-placeholdervar(--mantine-color-gray-5)
    --mantine-color-anchorvar(--mantine-color-blue-6)
    --mantine-color-defaultvar(--mantine-color-white)
    --mantine-color-default-hovervar(--mantine-color-gray-0)
    --mantine-color-default-colorvar(--mantine-color-black)
    --mantine-color-default-bordervar(--mantine-color-gray-4)
    --mantine-color-dimmedvar(--mantine-color-gray-6)
    --mantine-color-dark-textvar(--mantine-color-dark-filled)
    --mantine-color-dark-filledvar(--mantine-color-dark-6)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-7)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.1)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.12)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-6)
    --mantine-color-dark-outlinevar(--mantine-color-dark-6)
    --mantine-color-dark-outline-hoverrgba(46, 46, 46, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-filled)
    --mantine-color-gray-filledvar(--mantine-color-gray-6)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-7)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.1)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.12)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-6)
    --mantine-color-gray-outlinevar(--mantine-color-gray-6)
    --mantine-color-gray-outline-hoverrgba(134, 142, 150, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-filled)
    --mantine-color-red-filledvar(--mantine-color-red-6)
    --mantine-color-red-filled-hovervar(--mantine-color-red-7)
    --mantine-color-red-lightrgba(250, 82, 82, 0.1)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.12)
    --mantine-color-red-light-colorvar(--mantine-color-red-6)
    --mantine-color-red-outlinevar(--mantine-color-red-6)
    --mantine-color-red-outline-hoverrgba(250, 82, 82, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-filled)
    --mantine-color-pink-filledvar(--mantine-color-pink-6)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-7)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.1)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.12)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-6)
    --mantine-color-pink-outlinevar(--mantine-color-pink-6)
    --mantine-color-pink-outline-hoverrgba(230, 73, 128, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-filled)
    --mantine-color-grape-filledvar(--mantine-color-grape-6)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-7)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.1)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.12)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-6)
    --mantine-color-grape-outlinevar(--mantine-color-grape-6)
    --mantine-color-grape-outline-hoverrgba(190, 75, 219, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-filled)
    --mantine-color-violet-filledvar(--mantine-color-violet-6)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-7)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.1)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.12)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-6)
    --mantine-color-violet-outlinevar(--mantine-color-violet-6)
    --mantine-color-violet-outline-hoverrgba(121, 80, 242, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-filled)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-6)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-7)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.1)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.12)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-6)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-6)
    --mantine-color-indigo-outline-hoverrgba(76, 110, 245, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-filled)
    --mantine-color-blue-filledvar(--mantine-color-blue-6)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-7)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.1)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.12)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-6)
    --mantine-color-blue-outlinevar(--mantine-color-blue-6)
    --mantine-color-blue-outline-hoverrgba(34, 139, 230, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-filled)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-6)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-7)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.1)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.12)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-6)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-6)
    --mantine-color-cyan-outline-hoverrgba(21, 170, 191, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-filled)
    --mantine-color-teal-filledvar(--mantine-color-teal-6)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-7)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.1)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.12)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-6)
    --mantine-color-teal-outlinevar(--mantine-color-teal-6)
    --mantine-color-teal-outline-hoverrgba(18, 184, 134, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-filled)
    --mantine-color-green-filledvar(--mantine-color-green-6)
    --mantine-color-green-filled-hovervar(--mantine-color-green-7)
    --mantine-color-green-lightrgba(64, 192, 87, 0.1)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.12)
    --mantine-color-green-light-colorvar(--mantine-color-green-6)
    --mantine-color-green-outlinevar(--mantine-color-green-6)
    --mantine-color-green-outline-hoverrgba(64, 192, 87, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-filled)
    --mantine-color-lime-filledvar(--mantine-color-lime-6)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-7)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.1)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.12)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-6)
    --mantine-color-lime-outlinevar(--mantine-color-lime-6)
    --mantine-color-lime-outline-hoverrgba(130, 201, 30, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-filled)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-6)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-7)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.1)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.12)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-6)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-6)
    --mantine-color-yellow-outline-hoverrgba(250, 176, 5, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-filled)
    --mantine-color-orange-filledvar(--mantine-color-orange-6)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-7)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.1)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.12)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-6)
    --mantine-color-orange-outlinevar(--mantine-color-orange-6)
    --mantine-color-orange-outline-hoverrgba(253, 126, 20, 0.05)

    Dark color scheme only variables

    --mantine-primary-color-contrastvar(--mantine-color-white)
    --mantine-color-brightvar(--mantine-color-white)
    --mantine-color-textvar(--mantine-color-dark-0)
    --mantine-color-bodyvar(--mantine-color-dark-7)
    --mantine-color-errorvar(--mantine-color-red-8)
    --mantine-color-placeholdervar(--mantine-color-dark-3)
    --mantine-color-anchorvar(--mantine-color-blue-4)
    --mantine-color-defaultvar(--mantine-color-dark-6)
    --mantine-color-default-hovervar(--mantine-color-dark-5)
    --mantine-color-default-colorvar(--mantine-color-white)
    --mantine-color-default-bordervar(--mantine-color-dark-4)
    --mantine-color-dimmedvar(--mantine-color-dark-2)
    --mantine-color-dark-textvar(--mantine-color-dark-4)
    --mantine-color-dark-filledvar(--mantine-color-dark-8)
    --mantine-color-dark-filled-hovervar(--mantine-color-dark-9)
    --mantine-color-dark-lightrgba(46, 46, 46, 0.15)
    --mantine-color-dark-light-hoverrgba(46, 46, 46, 0.2)
    --mantine-color-dark-light-colorvar(--mantine-color-dark-3)
    --mantine-color-dark-outlinevar(--mantine-color-dark-4)
    --mantine-color-dark-outline-hoverrgba(66, 66, 66, 0.05)
    --mantine-color-gray-textvar(--mantine-color-gray-4)
    --mantine-color-gray-filledvar(--mantine-color-gray-8)
    --mantine-color-gray-filled-hovervar(--mantine-color-gray-9)
    --mantine-color-gray-lightrgba(134, 142, 150, 0.15)
    --mantine-color-gray-light-hoverrgba(134, 142, 150, 0.2)
    --mantine-color-gray-light-colorvar(--mantine-color-gray-3)
    --mantine-color-gray-outlinevar(--mantine-color-gray-4)
    --mantine-color-gray-outline-hoverrgba(206, 212, 218, 0.05)
    --mantine-color-red-textvar(--mantine-color-red-4)
    --mantine-color-red-filledvar(--mantine-color-red-8)
    --mantine-color-red-filled-hovervar(--mantine-color-red-9)
    --mantine-color-red-lightrgba(250, 82, 82, 0.15)
    --mantine-color-red-light-hoverrgba(250, 82, 82, 0.2)
    --mantine-color-red-light-colorvar(--mantine-color-red-3)
    --mantine-color-red-outlinevar(--mantine-color-red-4)
    --mantine-color-red-outline-hoverrgba(255, 135, 135, 0.05)
    --mantine-color-pink-textvar(--mantine-color-pink-4)
    --mantine-color-pink-filledvar(--mantine-color-pink-8)
    --mantine-color-pink-filled-hovervar(--mantine-color-pink-9)
    --mantine-color-pink-lightrgba(230, 73, 128, 0.15)
    --mantine-color-pink-light-hoverrgba(230, 73, 128, 0.2)
    --mantine-color-pink-light-colorvar(--mantine-color-pink-3)
    --mantine-color-pink-outlinevar(--mantine-color-pink-4)
    --mantine-color-pink-outline-hoverrgba(247, 131, 172, 0.05)
    --mantine-color-grape-textvar(--mantine-color-grape-4)
    --mantine-color-grape-filledvar(--mantine-color-grape-8)
    --mantine-color-grape-filled-hovervar(--mantine-color-grape-9)
    --mantine-color-grape-lightrgba(190, 75, 219, 0.15)
    --mantine-color-grape-light-hoverrgba(190, 75, 219, 0.2)
    --mantine-color-grape-light-colorvar(--mantine-color-grape-3)
    --mantine-color-grape-outlinevar(--mantine-color-grape-4)
    --mantine-color-grape-outline-hoverrgba(218, 119, 242, 0.05)
    --mantine-color-violet-textvar(--mantine-color-violet-4)
    --mantine-color-violet-filledvar(--mantine-color-violet-8)
    --mantine-color-violet-filled-hovervar(--mantine-color-violet-9)
    --mantine-color-violet-lightrgba(121, 80, 242, 0.15)
    --mantine-color-violet-light-hoverrgba(121, 80, 242, 0.2)
    --mantine-color-violet-light-colorvar(--mantine-color-violet-3)
    --mantine-color-violet-outlinevar(--mantine-color-violet-4)
    --mantine-color-violet-outline-hoverrgba(151, 117, 250, 0.05)
    --mantine-color-indigo-textvar(--mantine-color-indigo-4)
    --mantine-color-indigo-filledvar(--mantine-color-indigo-8)
    --mantine-color-indigo-filled-hovervar(--mantine-color-indigo-9)
    --mantine-color-indigo-lightrgba(76, 110, 245, 0.15)
    --mantine-color-indigo-light-hoverrgba(76, 110, 245, 0.2)
    --mantine-color-indigo-light-colorvar(--mantine-color-indigo-3)
    --mantine-color-indigo-outlinevar(--mantine-color-indigo-4)
    --mantine-color-indigo-outline-hoverrgba(116, 143, 252, 0.05)
    --mantine-color-blue-textvar(--mantine-color-blue-4)
    --mantine-color-blue-filledvar(--mantine-color-blue-8)
    --mantine-color-blue-filled-hovervar(--mantine-color-blue-9)
    --mantine-color-blue-lightrgba(34, 139, 230, 0.15)
    --mantine-color-blue-light-hoverrgba(34, 139, 230, 0.2)
    --mantine-color-blue-light-colorvar(--mantine-color-blue-3)
    --mantine-color-blue-outlinevar(--mantine-color-blue-4)
    --mantine-color-blue-outline-hoverrgba(77, 171, 247, 0.05)
    --mantine-color-cyan-textvar(--mantine-color-cyan-4)
    --mantine-color-cyan-filledvar(--mantine-color-cyan-8)
    --mantine-color-cyan-filled-hovervar(--mantine-color-cyan-9)
    --mantine-color-cyan-lightrgba(21, 170, 191, 0.15)
    --mantine-color-cyan-light-hoverrgba(21, 170, 191, 0.2)
    --mantine-color-cyan-light-colorvar(--mantine-color-cyan-3)
    --mantine-color-cyan-outlinevar(--mantine-color-cyan-4)
    --mantine-color-cyan-outline-hoverrgba(59, 201, 219, 0.05)
    --mantine-color-teal-textvar(--mantine-color-teal-4)
    --mantine-color-teal-filledvar(--mantine-color-teal-8)
    --mantine-color-teal-filled-hovervar(--mantine-color-teal-9)
    --mantine-color-teal-lightrgba(18, 184, 134, 0.15)
    --mantine-color-teal-light-hoverrgba(18, 184, 134, 0.2)
    --mantine-color-teal-light-colorvar(--mantine-color-teal-3)
    --mantine-color-teal-outlinevar(--mantine-color-teal-4)
    --mantine-color-teal-outline-hoverrgba(56, 217, 169, 0.05)
    --mantine-color-green-textvar(--mantine-color-green-4)
    --mantine-color-green-filledvar(--mantine-color-green-8)
    --mantine-color-green-filled-hovervar(--mantine-color-green-9)
    --mantine-color-green-lightrgba(64, 192, 87, 0.15)
    --mantine-color-green-light-hoverrgba(64, 192, 87, 0.2)
    --mantine-color-green-light-colorvar(--mantine-color-green-3)
    --mantine-color-green-outlinevar(--mantine-color-green-4)
    --mantine-color-green-outline-hoverrgba(105, 219, 124, 0.05)
    --mantine-color-lime-textvar(--mantine-color-lime-4)
    --mantine-color-lime-filledvar(--mantine-color-lime-8)
    --mantine-color-lime-filled-hovervar(--mantine-color-lime-9)
    --mantine-color-lime-lightrgba(130, 201, 30, 0.15)
    --mantine-color-lime-light-hoverrgba(130, 201, 30, 0.2)
    --mantine-color-lime-light-colorvar(--mantine-color-lime-3)
    --mantine-color-lime-outlinevar(--mantine-color-lime-4)
    --mantine-color-lime-outline-hoverrgba(169, 227, 75, 0.05)
    --mantine-color-yellow-textvar(--mantine-color-yellow-4)
    --mantine-color-yellow-filledvar(--mantine-color-yellow-8)
    --mantine-color-yellow-filled-hovervar(--mantine-color-yellow-9)
    --mantine-color-yellow-lightrgba(250, 176, 5, 0.15)
    --mantine-color-yellow-light-hoverrgba(250, 176, 5, 0.2)
    --mantine-color-yellow-light-colorvar(--mantine-color-yellow-3)
    --mantine-color-yellow-outlinevar(--mantine-color-yellow-4)
    --mantine-color-yellow-outline-hoverrgba(255, 212, 59, 0.05)
    --mantine-color-orange-textvar(--mantine-color-orange-4)
    --mantine-color-orange-filledvar(--mantine-color-orange-8)
    --mantine-color-orange-filled-hovervar(--mantine-color-orange-9)
    --mantine-color-orange-lightrgba(253, 126, 20, 0.15)
    --mantine-color-orange-light-hoverrgba(253, 126, 20, 0.2)
    --mantine-color-orange-light-colorvar(--mantine-color-orange-3)
    --mantine-color-orange-outlinevar(--mantine-color-orange-4)
    --mantine-color-orange-outline-hoverrgba(255, 169, 77, 0.05)
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/css-variables/index.html b/styles/css-variables/index.html index 1b854bf87fd..0a9d2a3c283 100644 --- a/styles/css-variables/index.html +++ b/styles/css-variables/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine CSS variables

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine CSS variables

    MantineProvider exposes all Mantine CSS variables based on the given theme. You can use these variables in CSS files, style prop or any other styles. Note that not all values are documented on this page, you can find full list of variables on this page.

    @@ -172,4 +172,4 @@ /* background color will automatically change based on color scheme */ background-color: var(--mantine-color-deep-orange); -}

    Previous

    Global styles

    Next

    CSS variables list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Global styles

    Next

    CSS variables list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/data-attributes/index.html b/styles/data-attributes/index.html index 5def06f8807..b36e00d6505 100644 --- a/styles/data-attributes/index.html +++ b/styles/data-attributes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    data attributes

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    data attributes

    Mantine components use data-* attributes to apply styles. These attributes are used as a modifier to apply styles based on component state. General rule of Mantine components styles: one class with shared styles and any number of data-* attributes as modifiers.

    @@ -142,4 +142,4 @@ // -> <div data-button data-opened /> <Box mod={{ orientation: 'horizontal' }} />; -// -> <div data-orientation="horizontal" />

    Previous

    Styles API

    Next

    Variants and sizes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +// -> <div data-orientation="horizontal" />

    Previous

    Styles API

    Next

    Variants and sizes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/global-styles/index.html b/styles/global-styles/index.html index f03359589c1..ab7699e2f06 100644 --- a/styles/global-styles/index.html +++ b/styles/global-styles/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Global styles

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Global styles

    @mantine/core package includes some global styles that are required for components to work correctly. If you override these styles, some components might not work as expected.

    Global styles are automatically imported with:

    @@ -90,4 +90,4 @@ change styles of <body />, :root and other elements. For example, to change body background-color:

    body {
   background-color: var(--mantine-color-red-filled);
-}

    Previous

    Vanilla extract

    Next

    CSS variables

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Vanilla extract

    Next

    CSS variables

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/mantine-styles/index.html b/styles/mantine-styles/index.html index 20f0b8b771c..d14d5ff1f42 100644 --- a/styles/mantine-styles/index.html +++ b/styles/mantine-styles/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine styles

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine styles

    This guide explains how to import styles of @mantine/* packages in your application and how to override them with CSS layers in case you do not have a way to control the order of stylesheets in your application.

    @@ -93,4 +93,4 @@ rel="stylesheet" href="https://unpkg.com/@mantine/core@7.4.2/styles.layer.css" />
    -

    Styles on unpkg CDN are available for all Mantine packages that export styles.

    Previous

    Styles overview

    Next

    CSS files list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Styles on unpkg CDN are available for all Mantine packages that export styles.

    Previous

    Styles overview

    Next

    CSS files list

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/postcss-preset/index.html b/styles/postcss-preset/index.html index 9da5d1f0b32..4820783b22e 100644 --- a/styles/postcss-preset/index.html +++ b/styles/postcss-preset/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine PostCSS preset

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Mantine PostCSS preset

    postcss-preset-mantine provides several CSS functions and mixins to help you write styles. It is not required to use it, but highly recommended. All demos that feature styles assume that you have this preset installed.

    @@ -245,4 +245,4 @@

    Will be transformed to:

    :root:not([dir='rtl']) .demo {
   margin-right: 1rem;
-}

    Previous

    CSS modules

    Next

    Usage with Sass

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    CSS modules

    Next

    Usage with Sass

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/rem/index.html b/styles/rem/index.html index 4b4ac4c8ab7..0de0e906881 100644 --- a/styles/rem/index.html +++ b/styles/rem/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    rem, em and px units

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    rem, em and px units

    rem units

    All Mantine components use rem units to apply size styles (margin, padding, width, etc.). By default, 1rem is considered to be 16px as it is a default setting in most browsers. @@ -105,4 +105,4 @@ @media (min-width: em(320px)) { font-size: rem(32px); } -}

    Previous

    CSS variables list

    Next

    style prop

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    CSS variables list

    Next

    style prop

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/responsive/index.html b/styles/responsive/index.html index 363c4b325e8..c9a11b8c4e3 100644 --- a/styles/responsive/index.html +++ b/styles/responsive/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Responsive styles

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Responsive styles

    Media queries

    Demo
    .demo {
   background-color: var(--mantine-color-blue-filled);
@@ -146,4 +146,4 @@
       <Button>Hover me</Button>
     </Tooltip>
   );
-}

    Previous

    style prop

    Next

    Styles API

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    style prop

    Next

    Styles API

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/rtl/index.html b/styles/rtl/index.html index 527fbe2edff..5fb202e01b6 100644 --- a/styles/rtl/index.html +++ b/styles/rtl/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Right-to-left direction

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Right-to-left direction

    All Mantine components support right-to-left direction out of the box. You can preview how components work with RTL direction by clicking direction control in the top right corner or pressing Ctrl + Shift + L.

    @@ -83,4 +83,4 @@ /* RTL styles override LTR styles */ background-color: var(--mantine-color-red-filled); } -}

    Previous

    Color functions

    Next

    Styles performance

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Color functions

    Next

    Styles performance

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/sass/index.html b/styles/sass/index.html index 24c0cb3d54a..23521e5779d 100644 --- a/styles/sass/index.html +++ b/styles/sass/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Sass

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Usage with Sass

    This guide will explain how to use Sass in combination with postcss-preset-mantine. Note that examples on mantine.dev website use only postcss-preset-mantine – you will need to modify them to use with Sass.

    @@ -213,4 +213,4 @@ @include smaller-than($mantine-breakpoint-md) { font-size: rem(50px); } -}

    Previous

    PostCSS preset

    Next

    Vanilla extract

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    PostCSS preset

    Next

    Vanilla extract

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/style-props/index.html b/styles/style-props/index.html index 8a04920975b..9b7a44648ce 100644 --- a/styles/style-props/index.html +++ b/styles/style-props/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style props

    With style props, you can add inline styles to any Mantine component. Style props add styles to the root element, if you need to style nested elements, use Styles API instead.

    @@ -107,4 +107,4 @@ .element { width: 40rem; } -}

    Previous

    Unstyled / headless

    Next

    Color functions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Unstyled / headless

    Next

    Color functions

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/style/index.html b/styles/style/index.html index f2c39b1bc3a..4685389e035 100644 --- a/styles/style/index.html +++ b/styles/style/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style prop

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Style prop

    All Mantine components that have root element support style prop. It works similar to React style prop, but with some additional features.

    Style object

    @@ -62,4 +62,4 @@ function Demo({ style }: DemoProps) { return <Box style={[{ color: 'red' }, style]} />; -}

    Previous

    rem, em and px units

    Next

    Responsive styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    rem, em and px units

    Next

    Responsive styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/styles-api/index.html b/styles/styles-api/index.html index b102a5e6b20..4d50b79dd0b 100644 --- a/styles/styles-api/index.html +++ b/styles/styles-api/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles API

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles API

    What is Styles API

    The styles API is a set of props and techniques that allows you to customize the style of any element inside a Mantine component – inline or using the theme object. All Mantine components that @@ -275,4 +275,4 @@ function Demo() { return <button type="button" className={Button.classes.root} />; -}

    Previous

    Responsive styles

    Next

    data-* attributes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Responsive styles

    Next

    data-* attributes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/styles-overview/index.html b/styles/styles-overview/index.html index 2fbef59ca90..4e68d4eb74a 100644 --- a/styles/styles-overview/index.html +++ b/styles/styles-overview/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles overview

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles overview

    This guide will help you understand how to apply styles to Mantine and custom components.

    Component specific props

    Most of the components provide props that allow you to customize their styles. For example, @@ -209,4 +209,4 @@ </Box> </> ); -}

    Previous

    Default props

    Next

    Mantine styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Default props

    Next

    Mantine styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/styles-performance/index.html b/styles/styles-performance/index.html index f7e2c1941f8..789951333e8 100644 --- a/styles/styles-performance/index.html +++ b/styles/styles-performance/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles performance

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Styles performance

    CSS modules

    CSS modules is the most performant way to apply styles – this approach generates static CSS that is never re-evaluated. 99% of Mantine components @@ -140,4 +140,4 @@

    Some components, like SimpleGrid and Grid rely on the same mechanism as responsive style props to apply styles. The limitations are the same – it is fine to use these several of these components on a page, but it is not recommended to use -them in large lists of components.

    Previous

    RTL (right-to-left)

    Next

    Polymorphic components

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +them in large lists of components.

    Previous

    RTL (right-to-left)

    Next

    Polymorphic components

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/unstyled/index.html b/styles/unstyled/index.html index 83b2c6a6880..dfb43582629 100644 --- a/styles/unstyled/index.html +++ b/styles/unstyled/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Unstyled components

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Unstyled components

    Using Mantine as a headless UI library

    You can use Mantine as a headless UI library. To do that, simply do not import @mantine/*/styles.css in your application. Then you will be able to apply styles to Mantine components using Styles API @@ -40,4 +40,4 @@ styled with Mantine styles.

    Note that unstyled prop does not remove Mantine library styles from your .css bundle – it only does not apply them to component with unstyled prop.

    -

    Previous

    Variants and sizes

    Next

    Style props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    Variants and sizes

    Next

    Style props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/vanilla-extract/index.html b/styles/vanilla-extract/index.html index df87e478039..402b957d4ff 100644 --- a/styles/vanilla-extract/index.html +++ b/styles/vanilla-extract/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Vanilla extract integration

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Vanilla extract integration

    Vanilla extract is a TypeScript CSS preprocessor that generates static CSS files at build time. It is a great alternative to CSS Modules if you prefer to write your styles in TypeScript.

    Vanilla extract vs CSS Modules

    @@ -163,4 +163,4 @@ paddingRight: 0, }, }, -});

    Previous

    Usage with Sass

    Next

    Global styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    Usage with Sass

    Next

    Global styles

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/styles/variants-sizes/index.html b/styles/variants-sizes/index.html index 3247b74c3a9..061a48fde02 100644 --- a/styles/variants-sizes/index.html +++ b/styles/variants-sizes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Variants and sizes

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Variants and sizes

    Adding custom variants

    Most of Mantine components support variant prop, it can be used in CSS variables resolver, and it is also exposed as data-variant="{value}" attribute on the root element of the component. @@ -221,4 +221,4 @@ --button-padding-x-compact-xl: rem(14px); }

    Usually, it is more convenient to use data-size attribute or vars on theme -to customize sizes in this case.

    Previous

    data-* attributes

    Next

    Unstyled / headless

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +to customize sizes in this case.

    Previous

    data-* attributes

    Next

    Unstyled / headless

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/submit-template/index.html b/submit-template/index.html index e99500025e5..fdb20d8cb5d 100644 --- a/submit-template/index.html +++ b/submit-template/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Submit a template

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Submit a template

    You are welcome to create and share a template with the community. Templates that you submit are listed on the getting started page.

    What is a template

    @@ -34,4 +34,4 @@
  • Make sure that your template has all the properties listed above
  • Submit your template by creating an issue on Github
  • After your template is reviewed, it will be added to the getting started page
    • -
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/templates-usage/index.html b/templates-usage/index.html index fe5e2c69460..02b9ccf697a 100644 --- a/templates-usage/index.html +++ b/templates-usage/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Templates

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Templates

    Mantine provides a set of templates for most common use cases. A template is a set of configuration files that are required to get started with Mantine and a React framework of your choice. @@ -35,4 +35,4 @@

  • Extract downloaded archive
  • Install dependencies by running yarn
  • Start development server by running yarn dev/yarn start (exact command depends on the framework of the template)
    • -
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/color-schemes/index.html b/theming/color-schemes/index.html index becf8abf361..faea9989034 100644 --- a/theming/color-schemes/index.html +++ b/theming/color-schemes/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color schemes

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Color schemes

    MantineProvider manages color scheme context in your application. You can configure the default color scheme value with defaultColorScheme prop, possible values are light, dark and auto (system color scheme is used). The default value is light.

    @@ -343,4 +343,4 @@ </body> </html> ); -}

    Previous

    Colors

    Next

    Typography

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Colors

    Next

    Typography

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/colors/index.html b/theming/colors/index.html index a1592649fc5..0d3262a0849 100644 --- a/theming/colors/index.html +++ b/theming/colors/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Colors

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Colors

    Mantine uses open-color in default theme with some additions. Each color has 10 shades.

    Colors are exposed on the theme object as an array of strings, @@ -384,4 +384,4 @@ export interface MantineThemeColorsOverride { colors: Record<ExtendedCustomColors, MantineColorsTuple>; } -}

    Previous

    Theme object

    Next

    Color schemes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Theme object

    Next

    Color schemes

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/default-props/index.html b/theming/default-props/index.html index f97866790b7..ea99ef97780 100644 --- a/theming/default-props/index.html +++ b/theming/default-props/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default props

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default props

    You can define default props for every Mantine component by setting theme.components. These props will be used by default by all components of your application unless they are overridden by component props:

    import { MantineProvider, Button, Group, createTheme } from '@mantine/core';
@@ -134,4 +134,4 @@
       </MantineThemeProvider>
     </div>
   );
-}

    Previous

    Typography

    Next

    Styles overview

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Typography

    Next

    Styles overview

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/default-theme/index.html b/theming/default-theme/index.html index 4b04d4a0f74..5e056b9ad59 100644 --- a/theming/default-theme/index.html +++ b/theming/default-theme/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default theme object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Default theme object

    Import default theme object

    You can import DEFAULT_THEME from @mantine/core package:

    import { DEFAULT_THEME } from '@mantine/core';
    @@ -279,4 +279,4 @@ }, "other": {}, "components": {} -}

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Next

    MantineProvider

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/mantine-provider/index.html b/theming/mantine-provider/index.html index 53e7523f9c4..c5574fda1dc 100644 --- a/theming/mantine-provider/index.html +++ b/theming/mantine-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MantineProvider

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MantineProvider

    MantineProvider provides a theme object context value, manages color scheme changes and injects CSS variables. It must be rendered at the root of your application and should be used only once.

    @@ -190,4 +190,4 @@

    getStyleNonce is a function to generate nonce attribute added to dynamic generated <style /> tags.

    cssVariablesResolver

    cssVariablesResolver is a function to generate CSS variables styles based on the theme object. -You can learn more about Mantine CSS variables in the CSS variables guide.

    Next

    Theme object

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +You can learn more about Mantine CSS variables in the CSS variables guide.

    Next

    Theme object

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/theme-object/index.html b/theming/theme-object/index.html index 92bfe50aeff..8b32104b6d8 100644 --- a/theming/theme-object/index.html +++ b/theming/theme-object/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Theme object

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Theme object

    Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.

    interface MantineTheme {
   /** Controls focus ring styles. Supports the following options:
@@ -321,7 +321,7 @@
 
    cursorType
    
 
    theme.cursorType controls the default cursor type for interactive elements,
 that do not have cursor: pointer styles by default. For example, Checkbox and NativeSelect.
    
-
    import { MantineProvider, createTheme, Checkbox } from '@mantine/core';
+
    import { MantineProvider, createTheme, Checkbox } from '@mantine/core';
 
 const theme = createTheme({
   cursorType: 'pointer',
@@ -459,4 +459,4 @@
 
 export const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);
    
 
    Then your will be able to import it anywhere in your application:
    
-
    import { theme } from './theme.ts';
    Previous
    MantineProvider
    Next
    Colors
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
    Project
    Mantine UIDocumentationGithub organizationnpm organization
    Built by Vitaly Rtishchev and these awesome people
    \ No newline at end of file +
    import { theme } from './theme.ts';

    Previous

    MantineProvider

    Next

    Colors

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/theming/typography/index.html b/theming/typography/index.html index 6d6d5ff87c0..338c2b284b6 100644 --- a/theming/typography/index.html +++ b/theming/typography/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Typography

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Typography

    Change fonts

    You can change fonts and other text styles for headings, code and all other components with the following theme properties:

      @@ -160,4 +160,4 @@ <Title order={6}>Heading 6</Title> </MantineProvider> ); -}

    Previous

    Color schemes

    Next

    Default props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Color schemes

    Next

    Default props

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/carousel/index.html b/x/carousel/index.html index 7ea2743d865..3bb7d28e5ba 100644 --- a/x/carousel/index.html +++ b/x/carousel/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Carousel

    Embla based carousel component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/carousel

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Carousel

    Embla based carousel component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/carousel

    License

    MIT

    Installation

    yarn add embla-carousel-react@^7.1.0 @mantine/carousel

    After installation import package styles at the root of your application:

    import '@mantine/carousel/styles.css';
    @@ -24,7 +24,7 @@ ); }

    Options

    -
    1
    2
    3
    4
    5
    Align
    Orientation
    Slide gap
    Controls offset
    Control size
    import { Carousel } from '@mantine/carousel';
+
    1
    2
    3
    4
    5
    Align
    Orientation
    Slide gap
    Controls offset
    Control size
    import { Carousel } from '@mantine/carousel';
 
 function Demo() {
   return (
@@ -482,4 +482,4 @@
       </Modal>
     </>
   );
-}
    Previous
    Spotlight
    Next
    Dropzone
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Spotlight

    Next

    Dropzone

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/code-highlight/index.html b/x/code-highlight/index.html index ea268909c1f..2ae1052c9de 100644 --- a/x/code-highlight/index.html +++ b/x/code-highlight/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CodeHighlight

    Highlight code with highlight.js

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/code-highlight

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    CodeHighlight

    Highlight code with highlight.js

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/code-highlight

    License

    MIT

    Installation

    yarn add @mantine/code-highlight

    After installation import package styles at the root of your application:

    import '@mantine/code-highlight/styles.css';
    @@ -412,4 +412,4 @@ <InlineCodeHighlight code="import React from 'react';" language="tsx" />. Is not that cool? </Text> ); -}

    Previous

    Sparkline

    Next

    Notifications system

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Sparkline

    Next

    Notifications system

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/dropzone/index.html b/x/dropzone/index.html index 121781f1fb6..feff821b26a 100644 --- a/x/dropzone/index.html +++ b/x/dropzone/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dropzone

    Capture files from user with drag and drop

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dropzone

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Dropzone

    Capture files from user with drag and drop

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dropzone

    License

    MIT

    Installation

    yarn add @mantine/dropzone

    After installation import package styles at the root of your application:

    import '@mantine/dropzone/styles.css';
    @@ -312,4 +312,4 @@ </Dropzone.FullScreen> </> ); -}

    Previous

    Carousel

    Next

    NavigationProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Carousel

    Next

    NavigationProgress

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/modals/index.html b/x/modals/index.html index e43dbe04d2e..cc83ede3f56 100644 --- a/x/modals/index.html +++ b/x/modals/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modals manager

    Centralized modals manager with option to handle state of multi-step modals

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/modals

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Modals manager

    Centralized modals manager with option to handle state of multi-step modals

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/modals

    License

    MIT

    Installation

    yarn add @mantine/modals

    Setup ModalsProvider

    Wrap your app with ModalsProvider component:

    @@ -279,4 +279,4 @@
    • Use internal component state, or
    • Use the modal component instead of modals manager
      • -

    Previous

    NavigationProgress

    Next

    Rich text editor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +

    Previous

    NavigationProgress

    Next

    Rich text editor

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/notifications/index.html b/x/notifications/index.html index 5166d848b76..c0c49363cb0 100644 --- a/x/notifications/index.html +++ b/x/notifications/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notifications system

    Mantine notifications system

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/notifications

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Notifications system

    Mantine notifications system

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/notifications

    License

    MIT

    Installation

    yarn add @mantine/notifications

    After installation import package styles at the root of your application:

    import '@mantine/notifications/styles.css';
    @@ -100,7 +100,7 @@ loading: false, });

    Notifications preview (message prop used as children):

    -
    Color
    Radius
    import { Notification } from '@mantine/core';
+
    Color
    Radius
    import { Notification } from '@mantine/core';
 
 function Demo() {
   return (
@@ -327,4 +327,4 @@
       </Button>
     </Group>
   );
-}
    Previous
    CodeHighlight
    Next
    Spotlight
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    CodeHighlight

    Next

    Spotlight

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/nprogress/index.html b/x/nprogress/index.html index 2a6d8a8e672..c7b0aaf7bd4 100644 --- a/x/nprogress/index.html +++ b/x/nprogress/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavigationProgress

    Navigation progress bar

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/nprogress

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavigationProgress

    Navigation progress bar

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/nprogress

    License

    MIT

    Installation

    yarn add @mantine/nprogress

    After installation import package styles at the root of your application:

    import '@mantine/nprogress/styles.css';
    @@ -40,4 +40,4 @@ </Group> </> ); -}

    Previous

    Dropzone

    Next

    Modals manager

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Dropzone

    Next

    Modals manager

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/spotlight/index.html b/x/spotlight/index.html index 632740d774f..2616e3adf57 100644 --- a/x/spotlight/index.html +++ b/x/spotlight/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spotlight

    Command center for your application

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/spotlight

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Spotlight

    Command center for your application

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/spotlight

    License

    MIT

    Installation

    yarn add @mantine/spotlight

    After installation import package styles at the root of your application:

    import '@mantine/spotlight/styles.css';
    @@ -374,4 +374,4 @@ <div className={RemoveScroll.classNames.fullWidth} /> // to make "right: 0" -<div className={RemoveScroll.classNames.zeroRight} />

    Previous

    Notifications system

    Next

    Carousel

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +<div className={RemoveScroll.classNames.zeroRight} />

    Previous

    Notifications system

    Next

    Carousel

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/x/tiptap/index.html b/x/tiptap/index.html index b73a0a93493..e1acdd887c7 100644 --- a/x/tiptap/index.html +++ b/x/tiptap/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rich text editor

    Tiptap based rich text editor

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/tiptap

    License

    MIT

    Installation

    +
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Rich text editor

    Tiptap based rich text editor

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/tiptap

    License

    MIT

    Installation

    Install with yarn:

    yarn add @mantine/tiptap @mantine/core @mantine/hooks @tabler/icons-react @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit

    After installation import package styles at the root of your application:

    @@ -786,4 +786,4 @@ colorPickerPalette: 'Color palette', colorPickerSave: 'Save', colorPickerColorLabel: (color) => `Set text color ${color}`, -};

    Previous

    Modals manager

    Next

    Version v7.5.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};

    Previous

    Modals manager

    Next

    Version v7.5.0

    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file