diff --git a/404.html b/404.html index 534d40aa926..b3d00544eac 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 534d40aa926..b3d00544eac 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/kDaLF8u8xQOC7DywzIp6Q/_buildManifest.js b/_next/static/0dyzIJkhf59ZavkJJ25m1/_buildManifest.js similarity index 97% rename from _next/static/kDaLF8u8xQOC7DywzIp6Q/_buildManifest.js rename to _next/static/0dyzIJkhf59ZavkJJ25m1/_buildManifest.js index a0e46244a65..aed873d9612 100644 --- a/_next/static/kDaLF8u8xQOC7DywzIp6Q/_buildManifest.js +++ b/_next/static/0dyzIJkhf59ZavkJJ25m1/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,n,h,d,p,k,g,l,f,b,j,m,y,v,x,w,z,_,q,I,B,F,A){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[f,d,b,"static/chunks/86778-2e071df1a077b5a3.js",s,a,o,i,n,j,m,y,"static/css/5fff23d663829729.css","static/chunks/pages/index-016f36285c1321f9.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-0b1f93e0bc4e2597.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-9ff52eddb10802f4.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-763f192ef4ab150d.js"],"/core/popover":[e,s,c,t,o,i,n,"static/chunks/pages/core/popover-a14f007b3abebc59.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-dfaccf4a06b01aa1.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-cacc8faa100ae9da.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-2880307073903793.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-b50f061ae5145dba.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-3041136f0c5ac3c7.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-744e987a29c51216.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-6a901698da790813.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":[f,e,b,"static/chunks/68467-41a26330d5d288cd.js",s,c,t,j,"static/chunks/pages/x/tiptap-43f28877ac67037e.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-d4f8017b7c267403.js","static/chunks/56926-02ce038efd617bf6.js","static/chunks/53993-8fd162567a74c8dc.js","static/chunks/45608-0c87ab591d30ec3f.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-8aa8e3ae2da0970b.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-f8566fbd4c8cf5fd.js","static/chunks/67415-aa4cf4c4876eebfa.js","static/chunks/18337-4bb6dbd117e2bf7f.js","static/chunks/16584-4d35cc83e1cb7bf9.js","static/chunks/17932-cc2fc8a61a7637aa.js","static/chunks/16789-b78c5e3050a8b08f.js","static/chunks/94014-3b522eb508e212a9.js","static/chunks/3242-17837c9b3bb07767.js","static/chunks/36107-5392bbb64dd28f1f.js","static/css/2dd7c036d69f6398.css","static/chunks/78833-cfb72765d3a98de7.js","static/chunks/91457-215dacfcdbcff791.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-016f36285c1321f9.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-0b1f93e0bc4e2597.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-9ff52eddb10802f4.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-2e6f9700d28ad4d7.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-3ef4c403fb8322c0.js"],"/core/popover":[e,s,c,t,o,i,n,"static/chunks/pages/core/popover-a14f007b3abebc59.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-dfaccf4a06b01aa1.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-fd5d20cd80eafc52.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-cacc8faa100ae9da.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-ae931436cde2c7be.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-1374bdf45ee32fc8.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-2880307073903793.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-28e84c6667eabf05.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-3041136f0c5ac3c7.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-744e987a29c51216.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-6a901698da790813.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-43f28877ac67037e.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-42853c3cfd51efe3.js","static/chunks/56926-02ce038efd617bf6.js","static/chunks/53993-8fd162567a74c8dc.js","static/chunks/45608-0c87ab591d30ec3f.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-8aa8e3ae2da0970b.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-f8566fbd4c8cf5fd.js","static/chunks/67415-aa4cf4c4876eebfa.js","static/chunks/18337-4bb6dbd117e2bf7f.js","static/chunks/16584-4d35cc83e1cb7bf9.js","static/chunks/17932-cc2fc8a61a7637aa.js","static/chunks/16789-b78c5e3050a8b08f.js","static/chunks/94014-3b522eb508e212a9.js","static/chunks/3242-17837c9b3bb07767.js","static/chunks/36107-5392bbb64dd28f1f.js","static/css/2dd7c036d69f6398.css","static/chunks/78833-cfb72765d3a98de7.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/kDaLF8u8xQOC7DywzIp6Q/_ssgManifest.js b/_next/static/0dyzIJkhf59ZavkJJ25m1/_ssgManifest.js similarity index 100% rename from _next/static/kDaLF8u8xQOC7DywzIp6Q/_ssgManifest.js rename to _next/static/0dyzIJkhf59ZavkJJ25m1/_ssgManifest.js diff --git a/_next/static/chunks/2775-d4f8017b7c267403.js b/_next/static/chunks/2775-42853c3cfd51efe3.js similarity index 93% rename from _next/static/chunks/2775-d4f8017b7c267403.js rename to _next/static/chunks/2775-42853c3cfd51efe3.js index 86df1c183bd..7fc1ab56a4d 100644 --- a/_next/static/chunks/2775-d4f8017b7c267403.js +++ b/_next/static/chunks/2775-42853c3cfd51efe3.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),h=o(37127),f=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)(f.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)(h._,{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),h=!!t.title;return!t.hideHeader&&(r||o||t.release||h)?(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 h=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:h})})]})})})}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(30176),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","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","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","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","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 h=o(27854),f=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)(f.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)(h.Z,{className:g().searchIcon}),placeholder:"Search props",radius:"md",size:"lg",autoFocus:!0}),d]})}},30176:function(e,t,o){"use strict";o.d(t,{Hx:function(){return tm},VX:function(){return th},D5:function(){return tq},$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 h},AspectRatioStylesApi:function(){return f},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 eh},HighlightStylesApi:function(){return ef},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},PieChartStylesApi:function(){return eW},PillGroupStylesApi:function(){return ej.h},PillStylesApi:function(){return ej.K},PillsInputFieldStylesApi:function(){return eB},PillsInputStylesApi:function(){return eY},PinInputStylesApi:function(){return eK.l},PopoverStylesApi:function(){return ey.T},ProgressStylesApi:function(){return eV.S},RadioGroupStylesApi:function(){return e_.T},RadioStylesApi:function(){return e_.P},RatingStylesApi:function(){return eH},RichTextEditorStylesApi:function(){return eG},RingProgressStylesApi:function(){return eU},ScrollAreaStylesApi:function(){return eX},SegmentedControlStylesApi:function(){return eZ.o},SelectStylesApi:function(){return eJ.i},SimpleGridStylesApi:function(){return eQ},SkeletonStylesApi:function(){return e$},SliderStylesApi:function(){return e0.a},SparklineStylesApi:function(){return e1},SpoilerStylesApi:function(){return e2},SpotlightStylesApi:function(){return e5},StackStylesApi:function(){return e6},StepperStylesApi:function(){return e4.U},SwitchGroupStylesApi:function(){return e7._},SwitchStylesApi:function(){return e7.T},TableStylesApi:function(){return e8},TabsStylesApi:function(){return e3.Y},TagsInputStylesApi:function(){return e9.h},TextInputStylesApi:function(){return tt.G},TextStylesApi:function(){return p},TextareaStylesApi:function(){return te.g},ThemeIconStylesApi:function(){return to},TimeInputStylesApi:function(){return en},TimelineStylesApi:function(){return tn},TitleStylesApi:function(){return tr},TooltipStylesApi:function(){return ta},TypographyStylesProviderStylesApi:function(){return ti},UnstyledButtonStylesApi:function(){return td},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`"}]},h={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:[]},f={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"}}},eh={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"}]},ef={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);let eW={selectors:{root:"Root element"},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:[]};var ej=o(81581);let eY={selectors:{...Y.a.selectors,...Y.X.selectors},vars:{}},eB={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 eK=o(34722),eV=o(35150),e_=o(97811);let eH={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"}]},eG={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"}]},eU={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"}}},eX={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 eZ=o(67355),eJ=o(61309);let eQ={selectors:{root:"Root element"},vars:{}},e$={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 e0=o(66763);let e1={selectors:{root:"Root element"},vars:{root:{"--chart-color":"Controls stroke and fill color"}},modifiers:[]},e2={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"}]},e5={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"}]},e6={selectors:{root:"Root element"},vars:{root:{"--stack-align":"Controls `align-items` property","--stack-justify":"Controls `justify-content` property","--stack-gap":"Controls `gap` property"}}};var e4=o(49717),e7=o(12379),e3=o(49235),e9=o(73811);let e8={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 te=o(76475),tt=o(52176);let to={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"}}},tn={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"}]},tr={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"}]},ta={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"}]},ti={selectors:{root:"Root element"},vars:{}},td={selectors:{root:"Root element"},vars:{}};var ts=o(40184),tl=o(60626),tc=o(28862),tp=o(89114),tu=o(61461);function tm(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)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Td,{children:Array.isArray(e.selector)?e.selector.join(", "):e.selector}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tu.e,{children:e.modifier})}),s&&(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:e.condition||"–"})}),l&&(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:e.value||"–"})})]},t)))||[];return(0,r.jsx)(tc.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tc.i,{layout:i?"fixed":void 0,...d,children:[(0,r.jsx)(tc.i.Thead,{children:(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Th,{w:i?210:void 0,children:"Selector"}),(0,r.jsx)(tc.i.Th,{w:i?310:void 0,children:"Attribute"}),s&&(0,r.jsx)(tc.i.Th,{children:"Condition"}),l&&(0,r.jsx)(tc.i.Th,{children:"Value"})]})}),(0,r.jsx)(tc.i.Tbody,{children:c})]})})}function th(e){let{data:t,component:o,fixedLayout:n=!0,...a}=e,i=Object.keys(t.selectors).map(e=>(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Td,{children:e}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsxs)(tu.e,{children:[".mantine-",o,"-",e]})}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:t.selectors[e]})})]},e));return(0,r.jsx)(tc.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tc.i,{layout:n?"fixed":void 0,...a,children:[(0,r.jsx)(tc.i.Thead,{children:(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Th,{w:n?210:void 0,children:"Selector"}),(0,r.jsx)(tc.i.Th,{w:n?310:void 0,children:"Static selector"}),(0,r.jsx)(tc.i.Th,{children:"Description"})]})}),(0,r.jsx)(tc.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)(tc.i.Tr,{children:[0===a&&(0,r.jsx)(tc.i.Td,{rowSpan:Object.keys(t.vars[o]).length,children:o}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tu.e,{children:n})}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:t.vars[o][n]})})]},"".concat(o,"-").concat(n)))}),e),[]);return(0,r.jsx)(tc.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tc.i,{layout:o?"fixed":void 0,...n,children:[(0,r.jsx)(tc.i.Thead,{children:(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Th,{w:o?210:void 0,children:"Selector"}),(0,r.jsx)(tc.i.Th,{w:o?310:void 0,children:"Variable"}),(0,r.jsx)(tc.i.Th,{children:"Description"})]})}),(0,r.jsx)(tc.i.Tbody,{children:a})]})})}var ty=o(1374),tb=o.n(ty);function tv(e){let{component:t,componentPrefix:o}=e,i=n["".concat(t,"StylesApi")];if(!i)return(0,r.jsx)(tl.z,{errorOf:"Styles API"});let d=(0,ts.iY)({component:t,componentPrefix:o});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:tb().section,children:[(0,r.jsxs)(a.D,{order:2,className:tb().title,children:[d," selectors"]}),(0,r.jsx)(th,{component:t,data:i})]}),Object.keys(i.vars).length>0&&(0,r.jsxs)("div",{className:tb().section,children:[(0,r.jsxs)(a.D,{order:2,className:tb().title,children:[d," CSS variables"]}),(0,r.jsx)(tf,{data:i})]}),Array.isArray(i.modifiers)&&i.modifiers.length>0&&(0,r.jsxs)("div",{className:tb().section,children:[(0,r.jsxs)(a.D,{order:2,className:tb().title,children:[d," data attributes"]}),(0,r.jsx)(tm,{data:i})]})]})}var tg=o(94998),tw=o(79388);function tq(e){let{components:t,componentPrefix:o}=e,n=t.map(e=>(0,r.jsx)("div",{className:tb().group,children:(0,r.jsx)(tv,{component:e,componentPrefix:o})},e));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:tb().groupsHeader,children:[(0,r.jsx)(a.D,{order:2,className:tb().title,children:"Styles API"}),(0,r.jsxs)(tw.NV,{style:{marginTop:0},children:[(0,r.jsx)(tg.E,{children:t[0]})," component supports"," ",(0,r.jsx)(tw.Ec,{href:"/styles/styles-api",children:"Styles API"}),". With Styles API, you can customize styles of any inner element. Follow"," ",(0,r.jsx)(tw.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 h}});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"},h=(0,i.d)((e,t)=>{let o=(0,d.w)("InlineCodeHighlight",m,e),{classNames:r,className:i,style:c,styles:p,unstyled:h,vars:f,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:h,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}})});h.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),h=o(37127),f=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)(f.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)(h._,{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),h=!!t.title;return!t.hideHeader&&(r||o||t.release||h)?(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 h=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:h})})]})})})}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(30176),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","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","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","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","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 h=o(27854),f=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)(f.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)(h.Z,{className:g().searchIcon}),placeholder:"Search props",radius:"md",size:"lg",autoFocus:!0}),d]})}},30176:function(e,t,o){"use strict";o.d(t,{Hx:function(){return tm},VX:function(){return th},D5:function(){return tq},$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 h},AspectRatioStylesApi:function(){return f},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 eh},HighlightStylesApi:function(){return ef},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},PieChartStylesApi:function(){return eW},PillGroupStylesApi:function(){return ej.h},PillStylesApi:function(){return ej.K},PillsInputFieldStylesApi:function(){return eB},PillsInputStylesApi:function(){return eY},PinInputStylesApi:function(){return eK.l},PopoverStylesApi:function(){return ey.T},ProgressStylesApi:function(){return eV.S},RadioGroupStylesApi:function(){return e_.T},RadioStylesApi:function(){return e_.P},RatingStylesApi:function(){return eH},RichTextEditorStylesApi:function(){return eG},RingProgressStylesApi:function(){return eU},ScrollAreaStylesApi:function(){return eX},SegmentedControlStylesApi:function(){return eZ.o},SelectStylesApi:function(){return eJ.i},SimpleGridStylesApi:function(){return eQ},SkeletonStylesApi:function(){return e$},SliderStylesApi:function(){return e0.a},SparklineStylesApi:function(){return e1},SpoilerStylesApi:function(){return e2},SpotlightStylesApi:function(){return e5},StackStylesApi:function(){return e6},StepperStylesApi:function(){return e4.U},SwitchGroupStylesApi:function(){return e7._},SwitchStylesApi:function(){return e7.T},TableStylesApi:function(){return e8},TabsStylesApi:function(){return e3.Y},TagsInputStylesApi:function(){return e9.h},TextInputStylesApi:function(){return tt.G},TextStylesApi:function(){return p},TextareaStylesApi:function(){return te.g},ThemeIconStylesApi:function(){return to},TimeInputStylesApi:function(){return en},TimelineStylesApi:function(){return tn},TitleStylesApi:function(){return tr},TooltipStylesApi:function(){return ta},TypographyStylesProviderStylesApi:function(){return ti},UnstyledButtonStylesApi:function(){return td},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`"}]},h={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:[]},f={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"}}},eh={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"}]},ef={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",collapse:"Nested links Collapse container"},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);let eW={selectors:{root:"Root element"},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:[]};var ej=o(81581);let eY={selectors:{...Y.a.selectors,...Y.X.selectors},vars:{}},eB={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 eK=o(34722),eV=o(35150),e_=o(97811);let eH={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"}]},eG={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"}]},eU={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"}}},eX={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 eZ=o(67355),eJ=o(61309);let eQ={selectors:{root:"Root element"},vars:{}},e$={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 e0=o(66763);let e1={selectors:{root:"Root element"},vars:{root:{"--chart-color":"Controls stroke and fill color"}},modifiers:[]},e2={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"}]},e5={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"}]},e6={selectors:{root:"Root element"},vars:{root:{"--stack-align":"Controls `align-items` property","--stack-justify":"Controls `justify-content` property","--stack-gap":"Controls `gap` property"}}};var e4=o(49717),e7=o(12379),e3=o(49235),e9=o(73811);let e8={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 te=o(76475),tt=o(52176);let to={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"}}},tn={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"}]},tr={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"}]},ta={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"}]},ti={selectors:{root:"Root element"},vars:{}},td={selectors:{root:"Root element"},vars:{}};var ts=o(40184),tl=o(60626),tc=o(28862),tp=o(89114),tu=o(61461);function tm(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)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Td,{children:Array.isArray(e.selector)?e.selector.join(", "):e.selector}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tu.e,{children:e.modifier})}),s&&(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:e.condition||"–"})}),l&&(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:e.value||"–"})})]},t)))||[];return(0,r.jsx)(tc.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tc.i,{layout:i?"fixed":void 0,...d,children:[(0,r.jsx)(tc.i.Thead,{children:(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Th,{w:i?210:void 0,children:"Selector"}),(0,r.jsx)(tc.i.Th,{w:i?310:void 0,children:"Attribute"}),s&&(0,r.jsx)(tc.i.Th,{children:"Condition"}),l&&(0,r.jsx)(tc.i.Th,{children:"Value"})]})}),(0,r.jsx)(tc.i.Tbody,{children:c})]})})}function th(e){let{data:t,component:o,fixedLayout:n=!0,...a}=e,i=Object.keys(t.selectors).map(e=>(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Td,{children:e}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsxs)(tu.e,{children:[".mantine-",o,"-",e]})}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:t.selectors[e]})})]},e));return(0,r.jsx)(tc.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tc.i,{layout:n?"fixed":void 0,...a,children:[(0,r.jsx)(tc.i.Thead,{children:(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Th,{w:n?210:void 0,children:"Selector"}),(0,r.jsx)(tc.i.Th,{w:n?310:void 0,children:"Static selector"}),(0,r.jsx)(tc.i.Th,{children:"Description"})]})}),(0,r.jsx)(tc.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)(tc.i.Tr,{children:[0===a&&(0,r.jsx)(tc.i.Td,{rowSpan:Object.keys(t.vars[o]).length,children:o}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tu.e,{children:n})}),(0,r.jsx)(tc.i.Td,{children:(0,r.jsx)(tp.O,{children:t.vars[o][n]})})]},"".concat(o,"-").concat(n)))}),e),[]);return(0,r.jsx)(tc.i.ScrollContainer,{minWidth:600,children:(0,r.jsxs)(tc.i,{layout:o?"fixed":void 0,...n,children:[(0,r.jsx)(tc.i.Thead,{children:(0,r.jsxs)(tc.i.Tr,{children:[(0,r.jsx)(tc.i.Th,{w:o?210:void 0,children:"Selector"}),(0,r.jsx)(tc.i.Th,{w:o?310:void 0,children:"Variable"}),(0,r.jsx)(tc.i.Th,{children:"Description"})]})}),(0,r.jsx)(tc.i.Tbody,{children:a})]})})}var ty=o(1374),tb=o.n(ty);function tv(e){let{component:t,componentPrefix:o}=e,i=n["".concat(t,"StylesApi")];if(!i)return(0,r.jsx)(tl.z,{errorOf:"Styles API"});let d=(0,ts.iY)({component:t,componentPrefix:o});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:tb().section,children:[(0,r.jsxs)(a.D,{order:2,className:tb().title,children:[d," selectors"]}),(0,r.jsx)(th,{component:t,data:i})]}),Object.keys(i.vars).length>0&&(0,r.jsxs)("div",{className:tb().section,children:[(0,r.jsxs)(a.D,{order:2,className:tb().title,children:[d," CSS variables"]}),(0,r.jsx)(tf,{data:i})]}),Array.isArray(i.modifiers)&&i.modifiers.length>0&&(0,r.jsxs)("div",{className:tb().section,children:[(0,r.jsxs)(a.D,{order:2,className:tb().title,children:[d," data attributes"]}),(0,r.jsx)(tm,{data:i})]})]})}var tg=o(94998),tw=o(79388);function tq(e){let{components:t,componentPrefix:o}=e,n=t.map(e=>(0,r.jsx)("div",{className:tb().group,children:(0,r.jsx)(tv,{component:e,componentPrefix:o})},e));return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:tb().groupsHeader,children:[(0,r.jsx)(a.D,{order:2,className:tb().title,children:"Styles API"}),(0,r.jsxs)(tw.NV,{style:{marginTop:0},children:[(0,r.jsx)(tg.E,{children:t[0]})," component supports"," ",(0,r.jsx)(tw.Ec,{href:"/styles/styles-api",children:"Styles API"}),". With Styles API, you can customize styles of any inner element. Follow"," ",(0,r.jsx)(tw.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 h}});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"},h=(0,i.d)((e,t)=>{let o=(0,d.w)("InlineCodeHighlight",m,e),{classNames:r,className:i,style:c,styles:p,unstyled:h,vars:f,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:h,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}})});h.displayName="@mantine/core/InlineCodeHighlight"}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-17f27269212835b6.js b/_next/static/chunks/pages/_app-61e7534f1957656a.js similarity index 90% rename from _next/static/chunks/pages/_app-17f27269212835b6.js rename to _next/static/chunks/pages/_app-61e7534f1957656a.js index 034229ee22f..7af30f24fd9 100644 --- a/_next/static/chunks/pages/_app-17f27269212835b6.js +++ b/_next/static/chunks/pages/_app-61e7534f1957656a.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]),z=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:z}),[v,R,L,H,z])}},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 O},bQ:function(){return $},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]),z=a.useCallback(()=>{N.current(),T.current=void 0},[]),$=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(){$(),z(),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(){$(),z(),H(n)}})(n)}},[s,l,d,e,f,v,k,H,z,$,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,z(),$())},[n,z,$]),a.useEffect(()=>()=>{z(),clearTimeout(D.current),clearTimeout(A.current),$()},[d,z,$]),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 $(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}=z(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)}),$=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,$);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,$),i.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,s,m,I,x,n,r,C,p,D,A,P,$]),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 O(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 z=n(94998),$=n(75522),O=n.n($);function _(e){let{className:t,...n}=e;return(0,r.jsx)("p",{className:(0,i.Z)(O().paragraph,t),...n})}function V(e){let{className:t,...n}=e;return(0,r.jsx)("ul",{className:(0,i.Z)(O().ul,t),...n})}function Z(e){let{className:t,...n}=e;return(0,r.jsx)("li",{className:(0,i.Z)(O().li,t),...n})}function G(e){return(0,r.jsx)(z.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),ez=n(87329),e$=n(17404),eO=n.n(e$);function e_(e){let{yarnScript:t,npmScript:n}=e,[o,i]=(0,eN.I)({key:"script-tab",defaultValue:0});return(0,r.jsx)(ez.Q,{classNames:{root:eO().root},activeTab:o,onTabChange:i,code:[{fileName:"yarn",code:t,language:"bash",icon:(0,r.jsx)(eL,{className:eO().icon,size:16})},{fileName:"npm",code:n,language:"bash",icon:(0,r.jsx)(eH._,{className:eO().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)(z.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)(z.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 z=n(86175),$=n(17992),O=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)($.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.2"}),(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:O.m.open,githubLink:"https://github.com/mantinedev/mantine",discordLink:z.$.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)($.T,{}),(0,r.jsxs)(m.Z,{gap:"sm",children:[(0,r.jsx)(L,{onSearch:O.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:{title:"useElementSize",package:"@mantine/hooks",slug:"/hooks/use-element-size",description:"Returns element width and height and observes changes with ResizeObserver",import:"import { useElementSize } from '@mantine/hooks';",source:"@mantine/hooks/src/use-resize-observer/use-resize-observer.ts",docs:"hooks/use-element-size.mdx"},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,z.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,$.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:O[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:O[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]),z=o.default.useRef(L),$=o.default.useRef(H);I&&(r=o.default.Children.only(n));let O=I?r&&"object"==typeof r&&r.ref:t,[_,V,Z]=(0,p.useIntersection)({rootMargin:"200px"}),G=o.default.useCallback(e=>{($.current!==H||z.current!==L)&&(Z(),$.current=H,z.current=L),_(e),O&&("function"==typeof O?O(e):"object"==typeof O&&(O.current=e))},[H,O,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},z=0,$=[],O=(f.useMedium(function(e){var t=u.useRef([]),n=u.useRef([0,0]),r=u.useRef(),o=u.useState(z++)[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($.length&&$[$.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 $.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(){$=$.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:O}))});_.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:z,...$}=n,O=b(),_=k||O?.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)($),W=(0,o.M)(v),q=O?{checked:O.value.includes(G.value),onChange:e=>{O.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,...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:z,onColorSwatchClick:$,__staticSelector:O,mod:_,...V}=n,Z=(0,l.y)({name:O,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":z},_],...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));$?.(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)(),[z,$]=(0,r.useState)({y:0,x:j/C}),O=(0,r.useRef)(z),_=e=>F?Math.round(e*C):e*C,{ref:V}=(0,o.r)(({x:e,y:t})=>{O.current={x:e,y:t},w?.(_(e))},{onScrubEnd:()=>{let{x:e}=O.current;E?.(_(e)),T?.()},onScrubStart:D});(0,i.l)(()=>{$({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:z.x+.05,y:z.y});break;case"ArrowLeft":Z(e,{x:z.x-.05,y:z.y})}},"data-focus-ring":H.focusRing,__vars:{"--_cp-thumb-size":`var(--cp-thumb-size-${S})`}},G,r.createElement(f.b,{position:z,...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,...z}=n,$=(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}),O={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,...O,...I},w),X=W&&r.createElement(y,{key:"description",...M,...O,size:M?.size||O.size,id:M?.id||Z},F),J=r.createElement(r.Fragment,{key:"input"},b(A)),Q=G&&r.createElement(k,{...D,...O,size:D?.size||O.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:$,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],...$("root"),...z},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:z,mod:$,...O}=n,{styleProps:_,rest:V}=(0,l.c)(O),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&&z,pointer:P,disabled:x,multiline:R,"data-with-right-section":!!F,"data-with-left-section":!!w},$],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&&z},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,keepMounted:T,...A}=t,P=(0,s.y)({name:"Menu",classes:y,props:t,classNames:S,styles:B,unstyled:j}),[R,{setHovered:N,resetHovered:H}]=function(){let[e,t]=(0,r.useState)(-1);return[e,{setHovered:t,resetHovered:()=>t(-1)}]}(),[z,$]=(0,o.C)({value:g,defaultValue:h,finalValue:!1,onChange:b}),[O,_]=(0,r.useState)(!1),V=()=>{$(!1),_(!1),z&&f?.()},Z=()=>{$(!0),z||p?.()},G=()=>{z?V():Z()},{openDropdown:W,closeDropdown:q}=(0,u.U)({open:Z,close:V,closeDelay:F,openDelay:C}),{resolvedClassNames:Y,resolvedStyles:U}=(0,c.h)({classNames:S,styles:B,props:t});return(0,i.l)(()=>{H()},[z]),r.createElement(m,{value:{getStyles:P,opened:z,toggleDropdown:G,getItemIndex:e=>e?Array.from(a.p(e,"[data-menu-dropdown]")?.querySelectorAll("[data-menu-item]")||[]).findIndex(t=>t===e):null,hovered:R,setHovered:N,openedViaClick:O,setOpenedViaClick:_,closeOnItemClick:k,closeDropdown:"click"===E?V:q,openDropdown:"click"===E?Z:W,closeDropdownImmediately:V,loop:x,trigger:E,unstyled:j,menuItemTabIndex:D}},r.createElement(d.J,{...A,opened:z,onChange:G,defaultOpened:h,trapFocus:!T&&v,closeOnEscape:w,__staticSelector:"Menu",classNames:Y,styles:U,unstyled:j,variant:I,keepMounted:T},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 z}});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}),"data-full-screen":m.fullScreen||void 0,ref:t,...p},r.createElement(f,{style:{maxHeight:m.fullScreen?"100dvh":`calc(100dvh - (${(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,fullScreen:h}},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},z=(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)))});z.classes=d,z.displayName="@mantine/core/Modal",z.Root=P,z.Overlay=B,z.Content=x,z.Body=m,z.Header=C,z.Title=L,z.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 O}});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 z={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"},$=(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 O(e){let t=(0,l.w)("Popover",z,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:O,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:$}),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:O,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)}O.Target=T,O.Dropdown=j,O.displayName="@mantine/core/Popover",O.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}),z=(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)})}),$=r.forwardRef((e,t)=>{let{forceMount:n,...o}=e,i=M();return n||i.hasThumb?r.createElement(z,{ref:t,...o}):null}),O=(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))});O.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(O,{...g,...S("viewport",{style:g?.style}),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($,{...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($,{...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:z,variant:$,autoContrast:O,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:$,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:z,thumbChildren:$,disabled:O,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(!O){let t=(0,k.i)({value:e,min:j,max:I,step:M,precision:es});et(t),en.current=t}},[O,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(!O)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:O},r.createElement(b.f,{inverted:Z,offset:0,filled:ei,marks:P,min:j,max:I,value:ea,disabled:O,containerProps:{ref:eu,onMouseEnter:z?()=>Q(!0):void 0,onMouseLeave:z?()=>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:z,isHovered:J,disabled: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:z,mod:$,...O}=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)(O),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:z,mod:$,...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 O}});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)(),z=(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:$,x:O,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,...z("tooltip",{style:{...(0,w.c)(l,H),zIndex:T,display:!A&&V?"block":"none",top:(_&&Math.round(_))??"",left:(O&&Math.round(O))??""}}),variant:P,ref:G},k)),(0,r.cloneElement)(o,{...o.props,[c]:q,onMouseEnter:e=>{o.props.onMouseEnter?.(e),$(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 z={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:[]},$=(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}})),O=(0,f.d)((e,t)=>{let n=(0,d.w)("Tooltip",z,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:O,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",z,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:O,style:P,classNames:M,styles:D,unstyled:A,rootSelector:"tooltip",vars:ea,varsResolver:$});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)(O,c.props.className),...c.props})))});O.classes=S,O.displayName="@mantine/core/Tooltip",O.Floating=I,O.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:z,left:$,bottom:O,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:z,left:$,bottom:O,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]),z=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:z}),[v,R,L,H,z])}},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 O},bQ:function(){return $},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]),z=a.useCallback(()=>{N.current(),T.current=void 0},[]),$=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(){$(),z(),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(){$(),z(),H(n)}})(n)}},[s,l,d,e,f,v,k,H,z,$,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,z(),$())},[n,z,$]),a.useEffect(()=>()=>{z(),clearTimeout(D.current),clearTimeout(A.current),$()},[d,z,$]),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 $(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}=z(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)}),$=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,$);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,$),i.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,s,m,I,x,n,r,C,p,D,A,P,$]),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 O(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 z=n(94998),$=n(75522),O=n.n($);function _(e){let{className:t,...n}=e;return(0,r.jsx)("p",{className:(0,i.Z)(O().paragraph,t),...n})}function V(e){let{className:t,...n}=e;return(0,r.jsx)("ul",{className:(0,i.Z)(O().ul,t),...n})}function Z(e){let{className:t,...n}=e;return(0,r.jsx)("li",{className:(0,i.Z)(O().li,t),...n})}function G(e){return(0,r.jsx)(z.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),ez=n(87329),e$=n(17404),eO=n.n(e$);function e_(e){let{yarnScript:t,npmScript:n}=e,[o,i]=(0,eN.I)({key:"script-tab",defaultValue:0});return(0,r.jsx)(ez.Q,{classNames:{root:eO().root},activeTab:o,onTabChange:i,code:[{fileName:"yarn",code:t,language:"bash",icon:(0,r.jsx)(eL,{className:eO().icon,size:16})},{fileName:"npm",code:n,language:"bash",icon:(0,r.jsx)(eH._,{className:eO().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)(z.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)(z.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 z=n(86175),$=n(17992),O=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)($.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.3"}),(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:O.m.open,githubLink:"https://github.com/mantinedev/mantine",discordLink:z.$.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)($.T,{}),(0,r.jsxs)(m.Z,{gap:"sm",children:[(0,r.jsx)(L,{onSearch:O.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:{title:"useElementSize",package:"@mantine/hooks",slug:"/hooks/use-element-size",description:"Returns element width and height and observes changes with ResizeObserver",import:"import { useElementSize } from '@mantine/hooks';",source:"@mantine/hooks/src/use-resize-observer/use-resize-observer.ts",docs:"hooks/use-element-size.mdx"},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,z.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,$.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:O[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:O[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]),z=o.default.useRef(L),$=o.default.useRef(H);I&&(r=o.default.Children.only(n));let O=I?r&&"object"==typeof r&&r.ref:t,[_,V,Z]=(0,p.useIntersection)({rootMargin:"200px"}),G=o.default.useCallback(e=>{($.current!==H||z.current!==L)&&(Z(),$.current=H,z.current=L),_(e),O&&("function"==typeof O?O(e):"object"==typeof O&&(O.current=e))},[H,O,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},z=0,$=[],O=(f.useMedium(function(e){var t=u.useRef([]),n=u.useRef([0,0]),r=u.useRef(),o=u.useState(z++)[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($.length&&$[$.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 $.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(){$=$.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:O}))});_.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:z,...$}=n,O=b(),_=k||O?.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)($),W=(0,o.M)(v),q=O?{checked:O.value.includes(G.value),onChange:e=>{O.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,...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:z,onColorSwatchClick:$,__staticSelector:O,mod:_,...V}=n,Z=(0,l.y)({name:O,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":z},_],...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));$?.(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)(),[z,$]=(0,r.useState)({y:0,x:j/C}),O=(0,r.useRef)(z),_=e=>F?Math.round(e*C):e*C,{ref:V}=(0,o.r)(({x:e,y:t})=>{O.current={x:e,y:t},w?.(_(e))},{onScrubEnd:()=>{let{x:e}=O.current;E?.(_(e)),T?.()},onScrubStart:D});(0,i.l)(()=>{$({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:z.x+.05,y:z.y});break;case"ArrowLeft":Z(e,{x:z.x-.05,y:z.y})}},"data-focus-ring":H.focusRing,__vars:{"--_cp-thumb-size":`var(--cp-thumb-size-${S})`}},G,r.createElement(f.b,{position:z,...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,...z}=n,$=(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}),O={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,...O,...I},w),X=W&&r.createElement(y,{key:"description",...M,...O,size:M?.size||O.size,id:M?.id||Z},F),J=r.createElement(r.Fragment,{key:"input"},b(A)),Q=G&&r.createElement(k,{...D,...O,size:D?.size||O.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:$,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],...$("root"),...z},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:z,mod:$,...O}=n,{styleProps:_,rest:V}=(0,l.c)(O),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&&z,pointer:P,disabled:x,multiline:R,"data-with-right-section":!!F,"data-with-left-section":!!w},$],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&&z},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,keepMounted:T,...A}=t,P=(0,s.y)({name:"Menu",classes:y,props:t,classNames:S,styles:B,unstyled:j}),[R,{setHovered:N,resetHovered:H}]=function(){let[e,t]=(0,r.useState)(-1);return[e,{setHovered:t,resetHovered:()=>t(-1)}]}(),[z,$]=(0,o.C)({value:g,defaultValue:h,finalValue:!1,onChange:b}),[O,_]=(0,r.useState)(!1),V=()=>{$(!1),_(!1),z&&f?.()},Z=()=>{$(!0),z||p?.()},G=()=>{z?V():Z()},{openDropdown:W,closeDropdown:q}=(0,u.U)({open:Z,close:V,closeDelay:F,openDelay:C}),{resolvedClassNames:Y,resolvedStyles:U}=(0,c.h)({classNames:S,styles:B,props:t});return(0,i.l)(()=>{H()},[z]),r.createElement(m,{value:{getStyles:P,opened:z,toggleDropdown:G,getItemIndex:e=>e?Array.from(a.p(e,"[data-menu-dropdown]")?.querySelectorAll("[data-menu-item]")||[]).findIndex(t=>t===e):null,hovered:R,setHovered:N,openedViaClick:O,setOpenedViaClick:_,closeOnItemClick:k,closeDropdown:"click"===E?V:q,openDropdown:"click"===E?Z:W,closeDropdownImmediately:V,loop:x,trigger:E,unstyled:j,menuItemTabIndex:D}},r.createElement(d.J,{...A,opened:z,onChange:G,defaultOpened:h,trapFocus:!T&&v,closeOnEscape:w,__staticSelector:"Menu",classNames:Y,styles:U,unstyled:j,variant:I,keepMounted:T},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 z}});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}),"data-full-screen":m.fullScreen||void 0,ref:t,...p},r.createElement(f,{style:{maxHeight:m.fullScreen?"100dvh":`calc(100dvh - (${(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,fullScreen:h}},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},z=(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)))});z.classes=d,z.displayName="@mantine/core/Modal",z.Root=P,z.Overlay=B,z.Content=x,z.Body=m,z.Header=C,z.Title=L,z.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 O}});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 z={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"},$=(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 O(e){let t=(0,l.w)("Popover",z,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:O,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:$}),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:O,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)}O.Target=T,O.Dropdown=j,O.displayName="@mantine/core/Popover",O.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}),z=(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)})}),$=r.forwardRef((e,t)=>{let{forceMount:n,...o}=e,i=M();return n||i.hasThumb?r.createElement(z,{ref:t,...o}):null}),O=(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))});O.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(O,{...g,...S("viewport",{style:g?.style}),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($,{...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($,{...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:z,variant:$,autoContrast:O,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:$,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:z,thumbChildren:$,disabled:O,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(!O){let t=(0,k.i)({value:e,min:j,max:I,step:M,precision:es});et(t),en.current=t}},[O,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(!O)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:O},r.createElement(b.f,{inverted:Z,offset:0,filled:ei,marks:P,min:j,max:I,value:ea,disabled:O,containerProps:{ref:eu,onMouseEnter:z?()=>Q(!0):void 0,onMouseLeave:z?()=>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:z,isHovered:J,disabled: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:z,mod:$,...O}=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)(O),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:z,mod:$,...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 O}});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)(),z=(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:$,x:O,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,...z("tooltip",{style:{...(0,w.c)(l,H),zIndex:T,display:!A&&V?"block":"none",top:(_&&Math.round(_))??"",left:(O&&Math.round(O))??""}}),variant:P,ref:G,mod:{multiline:D}},k)),(0,r.cloneElement)(o,{...o.props,[c]:q,onMouseEnter:e=>{o.props.onMouseEnter?.(e),$(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 z={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:[]},$=(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}})),O=(0,f.d)((e,t)=>{let n=(0,d.w)("Tooltip",z,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:O,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",z,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:O,style:P,classNames:M,styles:D,unstyled:A,rootSelector:"tooltip",vars:ea,varsResolver:$});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)(O,c.props.className),...c.props})))});O.classes=S,O.displayName="@mantine/core/Tooltip",O.Floating=I,O.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:z,left:$,bottom:O,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:z,left:$,bottom:O,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)`}:{}}},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 d},Ro:function(){return i}});var r,o=n(62849);let[i,a]=(r="mantine-modals",[function(e){let t=Object.keys(e).reduce((t,n)=>(t[`${r}:${n}`]=t=>e[n](t.detail),t),{});(0,o.Y)(()=>(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}))}}]),c=a("openModal"),s=a("closeModal"),l=a("closeAllModals"),u=a("openConfirmModal"),d={open:c,close:s,closeAll:l,openConfirmModal:u,openContextModal:e=>a("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,...z}=n,$=(0,j.rZ)(),{opened:O,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)(()=>{O?C?.():F?.()},[O]),E)?null:r.createElement(f,{value:{getStyles:Z,query:g||_,setQuery:V,store:p,closeOnActionTrigger:B}},r.createElement(M.u,{ref:t,...z,withCloseButton:!1,opened:O||!!S,padding:0,onClose:()=>l.j5.close(p),className:i,style:c,classNames:(0,D.m)({theme:$,classNames:[h,o],props:n,stylesCtx:void 0}),styles:(0,T.i)({theme:$,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 z={size:"lg"},$=(0,i.d)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:c,vars:s,value:u,...d}=(0,a.w)("SpotlightSearch",z,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)})});$.classes=h,$.displayName="@mantine/spotlight/SpotlightSearch";let O={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",O,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}),r.createElement(E,null,b,0===b.length&&p&&r.createElement(F,null,p)))});_.classes=h,_.displayName="@mantine/spotlight/Spotlight",_.Search=$,_.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 z({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 $(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)(),[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 d},Ro:function(){return i}});var r,o=n(62849);let[i,a]=(r="mantine-modals",[function(e){let t=Object.keys(e).reduce((t,n)=>(t[`${r}:${n}`]=t=>e[n](t.detail),t),{});(0,o.Y)(()=>(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}))}}]),c=a("openModal"),s=a("closeModal"),l=a("closeAllModals"),u=a("openConfirmModal"),d={open:c,close:s,closeAll:l,openConfirmModal:u,openContextModal:e=>a("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,...z}=n,$=(0,j.rZ)(),{opened:O,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)(()=>{O?C?.():F?.()},[O]),E)?null:r.createElement(f,{value:{getStyles:Z,query:g||_,setQuery:V,store:p,closeOnActionTrigger:B}},r.createElement(M.u,{ref:t,...z,withCloseButton:!1,opened:O||!!S,padding:0,onClose:()=>l.j5.close(p),className:i,style:c,classNames:(0,D.m)({theme:$,classNames:[h,o],props:n,stylesCtx:void 0}),styles:(0,T.i)({theme:$,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 z={size:"lg"},$=(0,i.d)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:c,vars:s,value:u,...d}=(0,a.w)("SpotlightSearch",z,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)})});$.classes=h,$.displayName="@mantine/spotlight/SpotlightSearch";let O={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",O,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}),r.createElement(E,null,b,0===b.length&&p&&r.createElement(F,null,p)))});_.classes=h,_.displayName="@mantine/spotlight/Spotlight",_.Search=$,_.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 z({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 $(e){return e?`.${e} { outline: 2px solid #fe0d45; outline-offset: -2px; } diff --git a/_next/static/chunks/pages/core/nav-link-5edfad7effb3bc57.js b/_next/static/chunks/pages/core/nav-link-2e6f9700d28ad4d7.js similarity index 98% rename from _next/static/chunks/pages/core/nav-link-5edfad7effb3bc57.js rename to _next/static/chunks/pages/core/nav-link-2e6f9700d28ad4d7.js index 68d1263137e..02660d03448 100644 --- a/_next/static/chunks/pages/core/nav-link-5edfad7effb3bc57.js +++ b/_next/static/chunks/pages/core/nav-link-2e6f9700d28ad4d7.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1938],{84605:function(e,t,r){"use strict";r.d(t,{Z:function(){return i}});var i=(0,r(54764).Z)("chevron-right","IconChevronRight",[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]])},92490:function(e,t,r){"use strict";r.d(t,{Z:function(){return i}});var i=(0,r(54764).Z)("fingerprint","IconFingerprint",[["path",{d:"M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3",key:"svg-0"}],["path",{d:"M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6",key:"svg-1"}],["path",{d:"M12 11v2a14 14 0 0 0 2.5 8",key:"svg-2"}],["path",{d:"M8 15a18 18 0 0 0 1.8 6",key:"svg-3"}],["path",{d:"M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95",key:"svg-4"}]])},88037:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/nav-link",function(){return r(18234)}])},18234:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return G}});var i=r(24246),n=r(71670),o=r(27378),a=r(54764),l=(0,a.Z)("home-2","IconHome2",[["path",{d:"M5 12l-2 0l9 -9l9 9l-2 0",key:"svg-0"}],["path",{d:"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7",key:"svg-1"}],["path",{d:"M10 12h4v4h-4z",key:"svg-2"}]]),c=(0,a.Z)("gauge","IconGauge",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-1"}],["path",{d:"M13.41 10.59l2.59 -2.59",key:"svg-2"}],["path",{d:"M7 12a5 5 0 0 1 5 -5",key:"svg-3"}]]),s=r(84605),d=(0,a.Z)("circle-off","IconCircleOff",[["path",{d:"M20.042 16.045a9 9 0 0 0 -12.087 -12.087m-2.318 1.677a9 9 0 1 0 12.725 12.73",key:"svg-0"}],["path",{d:"M3 3l18 18",key:"svg-1"}]]),f=(0,a.Z)("activity","IconActivity",[["path",{d:"M3 12h4l3 8l4 -16l3 8h4",key:"svg-0"}]]),u=r(58675),m=r(92082),h=r(83453),v=r(96739),p=r(6231),k=r(56589),g=r(50332),b=r(1189),y=r(4184),E=r(19397),N={root:"m-f0824112",description:"m-57492dcc",section:"m-690090b5",label:"m-1f6ac4c4",body:"m-f07af9d2",children:"m-e17b862f",chevron:"m-1fd8a00b"};let S={},x=(0,h.Z)((e,{variant:t,color:r,childrenOffset:i,autoContrast:n})=>{let o=e.variantColorResolver({color:r||e.primaryColor,theme:e,variant:t||"light",autoContrast:n});return{root:{"--nl-bg":r||t?o.background:void 0,"--nl-hover":r||t?o.hover:void 0,"--nl-color":r||t?o.color:void 0},children:{"--nl-offset":(0,m.bG)(i)}}}),L=(0,g.b)((e,t)=>{let r=(0,v.w)("NavLink",S,e),{classNames:i,className:n,style:a,styles:l,unstyled:c,vars:s,opened:d,defaultOpened:f,onChange:m,children:h,onClick:g,active:L,disabled:q,leftSection:C,rightSection:z,label:I,description:w,disableRightSectionRotation:A,noWrap:j,childrenOffset:F,onKeyDown:Z,autoContrast:M,mod:D,...R}=r,O=(0,p.y)({name:"NavLink",props:r,classes:N,className:n,style:a,classNames:i,styles:l,unstyled:c,vars:s,varsResolver:x}),[_,T]=(0,u.C)({value:d,defaultValue:f,finalValue:!1,onChange:m}),B=!!h;return o.createElement(o.Fragment,null,o.createElement(E.k,{...O("root"),component:"a",ref:t,onClick:e=>{g?.(e),B&&(e.preventDefault(),T(!_))},onKeyDown:e=>{Z?.(e),"Space"===e.nativeEvent.code&&B&&(e.preventDefault(),T(!_))},unstyled:c,mod:[{disabled:q,active:L,expanded:_},D],...R},C&&o.createElement(k.x,{component:"span",...O("section"),mod:{position:"left"}},C),o.createElement(k.x,{...O("body"),mod:{"no-wrap":j}},o.createElement(k.x,{component:"span",...O("label")},I),o.createElement(k.x,{component:"span",mod:{active:L},...O("description")},w)),(B||z)&&o.createElement(k.x,{...O("section"),component:"span",mod:{rotate:_&&!A,position:"right"}},B?z||o.createElement(b.Q,{...O("chevron")}):z)),o.createElement(y.U,{in:_},o.createElement("div",{...O("children")},h)))});L.classes=N,L.displayName="@mantine/core/NavLink";var q=r(73988);let C=` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1938],{84605:function(e,t,r){"use strict";r.d(t,{Z:function(){return i}});var i=(0,r(54764).Z)("chevron-right","IconChevronRight",[["path",{d:"M9 6l6 6l-6 6",key:"svg-0"}]])},92490:function(e,t,r){"use strict";r.d(t,{Z:function(){return i}});var i=(0,r(54764).Z)("fingerprint","IconFingerprint",[["path",{d:"M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3",key:"svg-0"}],["path",{d:"M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6",key:"svg-1"}],["path",{d:"M12 11v2a14 14 0 0 0 2.5 8",key:"svg-2"}],["path",{d:"M8 15a18 18 0 0 0 1.8 6",key:"svg-3"}],["path",{d:"M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95",key:"svg-4"}]])},88037:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/nav-link",function(){return r(18234)}])},18234:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return G}});var i=r(24246),n=r(71670),o=r(27378),a=r(54764),l=(0,a.Z)("home-2","IconHome2",[["path",{d:"M5 12l-2 0l9 -9l9 9l-2 0",key:"svg-0"}],["path",{d:"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7",key:"svg-1"}],["path",{d:"M10 12h4v4h-4z",key:"svg-2"}]]),c=(0,a.Z)("gauge","IconGauge",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",key:"svg-1"}],["path",{d:"M13.41 10.59l2.59 -2.59",key:"svg-2"}],["path",{d:"M7 12a5 5 0 0 1 5 -5",key:"svg-3"}]]),s=r(84605),d=(0,a.Z)("circle-off","IconCircleOff",[["path",{d:"M20.042 16.045a9 9 0 0 0 -12.087 -12.087m-2.318 1.677a9 9 0 1 0 12.725 12.73",key:"svg-0"}],["path",{d:"M3 3l18 18",key:"svg-1"}]]),f=(0,a.Z)("activity","IconActivity",[["path",{d:"M3 12h4l3 8l4 -16l3 8h4",key:"svg-0"}]]),u=r(58675),m=r(92082),h=r(83453),v=r(96739),p=r(6231),k=r(56589),g=r(50332),b=r(1189),y=r(4184),E=r(19397),N={root:"m-f0824112",description:"m-57492dcc",section:"m-690090b5",label:"m-1f6ac4c4",body:"m-f07af9d2",children:"m-e17b862f",chevron:"m-1fd8a00b"};let S={},x=(0,h.Z)((e,{variant:t,color:r,childrenOffset:i,autoContrast:n})=>{let o=e.variantColorResolver({color:r||e.primaryColor,theme:e,variant:t||"light",autoContrast:n});return{root:{"--nl-bg":r||t?o.background:void 0,"--nl-hover":r||t?o.hover:void 0,"--nl-color":r||t?o.color:void 0},children:{"--nl-offset":(0,m.bG)(i)}}}),L=(0,g.b)((e,t)=>{let r=(0,v.w)("NavLink",S,e),{classNames:i,className:n,style:a,styles:l,unstyled:c,vars:s,opened:d,defaultOpened:f,onChange:m,children:h,onClick:g,active:L,disabled:q,leftSection:C,rightSection:z,label:I,description:w,disableRightSectionRotation:A,noWrap:j,childrenOffset:F,onKeyDown:Z,autoContrast:M,mod:D,...R}=r,O=(0,p.y)({name:"NavLink",props:r,classes:N,className:n,style:a,classNames:i,styles:l,unstyled:c,vars:s,varsResolver:x}),[_,T]=(0,u.C)({value:d,defaultValue:f,finalValue:!1,onChange:m}),B=!!h;return o.createElement(o.Fragment,null,o.createElement(E.k,{...O("root"),component:"a",ref:t,onClick:e=>{g?.(e),B&&(e.preventDefault(),T(!_))},onKeyDown:e=>{Z?.(e),"Space"===e.nativeEvent.code&&B&&(e.preventDefault(),T(!_))},unstyled:c,mod:[{disabled:q,active:L,expanded:_},D],...R},C&&o.createElement(k.x,{component:"span",...O("section"),mod:{position:"left"}},C),o.createElement(k.x,{...O("body"),mod:{"no-wrap":j}},o.createElement(k.x,{component:"span",...O("label")},I),o.createElement(k.x,{component:"span",mod:{active:L},...O("description")},w)),(B||z)&&o.createElement(k.x,{...O("section"),component:"span",mod:{rotate:_&&!A,position:"right"}},B?z||o.createElement(b.Q,{...O("chevron")}):z)),o.createElement(y.U,{in:_,...O("collapse")},o.createElement("div",{...O("children")},h)))});L.classes=N,L.displayName="@mantine/core/NavLink";var q=r(73988);let C=` import { Badge, NavLink } from '@mantine/core'; import { IconHome2, IconGauge, IconChevronRight, IconActivity, IconCircleOff } from '@tabler/icons-react'; diff --git a/_next/static/chunks/pages/core/pin-input-763f192ef4ab150d.js b/_next/static/chunks/pages/core/pin-input-3ef4c403fb8322c0.js similarity index 75% rename from _next/static/chunks/pages/core/pin-input-763f192ef4ab150d.js rename to _next/static/chunks/pages/core/pin-input-3ef4c403fb8322c0.js index 94ed0af714d..f5b43d83f5e 100644 --- a/_next/static/chunks/pages/core/pin-input-763f192ef4ab150d.js +++ b/_next/static/chunks/pages/core/pin-input-3ef4c403fb8322c0.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50498],{71887:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/pin-input",function(){return n(87929)}])},87929:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return z}});var r=n(24246),i=n(71670),a=n(27378),o=n(31002),l=n(58675),p=n(72840),u=n(92082),c=n(83453),s=n(5564),d=n(6231),m=n(96739),h=n(20410),f=n(22971),y=n(42487),g=n(23163);function x(e,t){if(e<1)return[];let n=Array(e).fill("");if(t){let r=t.trim().split("");for(let t=0;t({root:{"--pin-input-size":(0,u.ap)(t??j.size,"pin-input-size")}})),P=(0,h.d)((e,t)=>{let{name:n,form:r,className:i,value:u,defaultValue:c,variant:h,gap:g,style:P,size:w,classNames:_,styles:k,unstyled:D,length:E,onChange:V,onComplete:N,manageFocus:C,autoFocus:T,error:A,radius:$,disabled:z,oneTimeCode:M,placeholder:S,type:F,mask:O,readOnly:R,inputType:B,inputMode:Z,ariaLabel:L,vars:X,id:K,hiddenInputProps:U,...Y}=(0,m.w)("PinInput",j,e),q=(0,o.M)(K),G=(0,d.y)({name:"PinInput",classes:b,props:e,className:i,style:P,classNames:_,styles:k,unstyled:D,vars:X,varsResolver:I}),{resolvedClassNames:H,resolvedStyles:J}=(0,s.h)({classNames:_,styles:k,props:e}),[Q,W]=(0,a.useState)(-1),[ee,et]=(0,l.C)({value:u?x(E??0,u):void 0,defaultValue:c?.split("").slice(0,E??0),finalValue:x(E??0,""),onChange:"function"==typeof V?e=>{V(e.join("").trim())}:void 0}),en=ee.join("").trim(),er=(0,a.useRef)([]),ei=e=>{let t=F instanceof RegExp?F:F&&F in v?v[F]:null;return t?.test(e)},ea=(e,t)=>{if(C){if("next"===e){let e=t+1;er.current[e<(E??0)?e:t].focus()}if("prev"===e){let e=t-1;er.current[e>-1?e:t].focus()}}},eo=(e,t)=>{let n=[...ee];n[t]=e,et(n)},el=(e,t)=>{let n=e.target.value,r=2===n.length?n.split("")[n.length-1]:n,i=ei(r);r.length<2?i?(eo(r,t),ea("next",t)):eo("",t):i&&et(x(E??0,n))},ep=(e,t)=>{let{ctrlKey:n,key:r,shiftKey:i,target:a}=e,o=a.value;if("numeric"===Z){let t="Backspace"===r||"Tab"===r||"Control"===r||"Delete"===r||!!n&&"v"===r||!Number.isNaN(Number(r));t||e.preventDefault()}"ArrowLeft"===r||i&&"Tab"===r?(e.preventDefault(),ea("prev",t)):"ArrowRight"===r||"Tab"===r||" "===r?(e.preventDefault(),ea("next",t)):"Delete"===r?(e.preventDefault(),eo("",t)):"Backspace"===r?(e.preventDefault(),eo("",t),E===t+1?""===e.target.value&&ea("prev",t):ea("prev",t)):o.length>0&&r===ee[t]&&(e.preventDefault(),ea("next",t))},eu=(e,t)=>{e.target.select(),W(t)},ec=()=>{W(-1)},es=e=>{e.preventDefault();let t=e.clipboardData.getData("text/plain").replace(/[\n\r\s]+/g,""),n=ei(t.trim());if(n){let e=x(E??0,t);et(e),ea("next",e.length-1)}};return(0,a.useEffect)(()=>{en.length===E&&N?.(en)},[E,N,en]),a.createElement(a.Fragment,null,a.createElement(f.Z,{...Y,...G("root"),role:"group",id:q,gap:g,unstyled:D,wrap:"nowrap",variant:h,__size:w},ee.map((e,n)=>a.createElement(y.I,{component:"input",...G("pinInput",{style:{"--_input-padding":"0","--_input-text-align":"center"}}),classNames:H,styles:J,size:w,__staticSelector:"PinInput",id:`${q}-${n+1}`,key:`${q}-${n}`,inputMode:Z||("number"===F?"numeric":"text"),onChange:e=>el(e,n),onKeyDown:e=>ep(e,n),onFocus:e=>eu(e,n),onBlur:ec,onPaste:es,type:B||(O?"password":"number"===F?"tel":"text"),radius:$,error:A,variant:h,disabled:z,ref:e=>{0===n&&(0,p.kR)(t,e),er.current[n]=e},autoComplete:M?"one-time-code":"off",placeholder:Q===n?"":S,value:e,autoFocus:T&&0===n,unstyled:D,"aria-label":L,readOnly:R}))),a.createElement("input",{type:"hidden",name:n,form:r,value:en,...U}))});P.classes={...b,...g.M.classes},P.displayName="@mantine/core/PinInput";let w=` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[50498],{71887:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/core/pin-input",function(){return n(87929)}])},87929:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return z}});var r=n(24246),i=n(71670),a=n(27378),o=n(31002),l=n(58675),p=n(72840),u=n(92082),c=n(83453),s=n(5564),d=n(6231),m=n(96739),h=n(20410),f=n(22971),y=n(42487),g=n(23163);function x(e,t){if(e<1)return[];let n=Array(e).fill("");if(t){let r=t.trim().split("");for(let t=0;t({root:{"--pin-input-size":(0,u.ap)(t??j.size,"pin-input-size")}})),P=(0,h.d)((e,t)=>{let{name:n,form:r,className:i,value:u,defaultValue:c,variant:h,gap:g,style:P,size:w,classNames:_,styles:k,unstyled:E,length:D,onChange:V,onComplete:N,manageFocus:C,autoFocus:T,error:A,radius:$,disabled:z,oneTimeCode:M,placeholder:S,type:F,mask:O,readOnly:R,inputType:B,inputMode:Z,ariaLabel:L,vars:X,id:K,hiddenInputProps:U,...Y}=(0,m.w)("PinInput",j,e),q=(0,o.M)(K),G=(0,d.y)({name:"PinInput",classes:b,props:e,className:i,style:P,classNames:_,styles:k,unstyled:E,vars:X,varsResolver:I}),{resolvedClassNames:H,resolvedStyles:J}=(0,s.h)({classNames:_,styles:k,props:e}),[Q,W]=(0,a.useState)(-1),[ee,et]=(0,l.C)({value:u?x(D??0,u):void 0,defaultValue:c?.split("").slice(0,D??0),finalValue:x(D??0,""),onChange:"function"==typeof V?e=>{V(e.join("").trim())}:void 0}),en=ee.join("").trim(),er=(0,a.useRef)([]),ei=e=>{let t=F instanceof RegExp?F:F&&F in v?v[F]:null;return t?.test(e)},ea=(e,t)=>{if(C){if("next"===e){let e=t+1;er.current[e<(D??0)?e:t].focus()}if("prev"===e){let e=t-1;er.current[e>-1?e:t].focus()}}},eo=(e,t)=>{let n=[...ee];n[t]=e,et(n)},el=(e,t)=>{let n=e.target.value,r=2===n.length?n.split("")[n.length-1]:n,i=ei(r);r.length<2?i?(eo(r,t),ea("next",t)):eo("",t):i&&et(x(D??0,n))},ep=(e,t)=>{let{ctrlKey:n,key:r,shiftKey:i,target:a}=e,o=a.value;if("numeric"===Z){let t="Backspace"===r||"Tab"===r||"Control"===r||"Delete"===r||!!n&&"v"===r||!Number.isNaN(Number(r));t||e.preventDefault()}"ArrowLeft"===r||i&&"Tab"===r?(e.preventDefault(),ea("prev",t)):"ArrowRight"===r||"Tab"===r||" "===r?(e.preventDefault(),ea("next",t)):"Delete"===r?(e.preventDefault(),eo("",t)):"Backspace"===r?(e.preventDefault(),eo("",t),D===t+1?""===e.target.value&&ea("prev",t):ea("prev",t)):o.length>0&&r===ee[t]&&(e.preventDefault(),ea("next",t))},eu=(e,t)=>{e.target.select(),W(t)},ec=()=>{W(-1)},es=e=>{e.preventDefault();let t=e.clipboardData.getData("text/plain").replace(/[\n\r\s]+/g,""),n=ei(t.trim());if(n){let e=x(D??0,t);et(e),ea("next",e.length-1)}};return(0,a.useEffect)(()=>{en.length===D&&N?.(en)},[D,en]),(0,a.useEffect)(()=>{D!==ee.length&&et(x(D??0,ee.join("")))},[D,ee]),a.createElement(a.Fragment,null,a.createElement(f.Z,{...Y,...G("root"),role:"group",id:q,gap:g,unstyled:E,wrap:"nowrap",variant:h,__size:w},ee.map((e,n)=>a.createElement(y.I,{component:"input",...G("pinInput",{style:{"--_input-padding":"0","--_input-text-align":"center"}}),classNames:H,styles:J,size:w,__staticSelector:"PinInput",id:`${q}-${n+1}`,key:`${q}-${n}`,inputMode:Z||("number"===F?"numeric":"text"),onChange:e=>el(e,n),onKeyDown:e=>ep(e,n),onFocus:e=>eu(e,n),onBlur:ec,onPaste:es,type:B||(O?"password":"number"===F?"tel":"text"),radius:$,error:A,variant:h,disabled:z,ref:e=>{0===n&&(0,p.kR)(t,e),er.current[n]=e},autoComplete:M?"one-time-code":"off",placeholder:Q===n?"":S,value:e,autoFocus:T&&0===n,unstyled:E,"aria-label":L,readOnly:R}))),a.createElement("input",{type:"hidden",name:n,form:r,value:en,...U}))});P.classes={...b,...g.M.classes},P.displayName="@mantine/core/PinInput";let w=` import { PinInput } from '@mantine/core'; function Demo() { @@ -10,7 +10,7 @@ import { PinInput } from '@mantine/core'; function Demo() { return ; } -`,D={type:"code",component:function(){return a.createElement(P,{type:/^[0-3]*$/,inputType:"tel",inputMode:"numeric"})},code:k,centered:!0};var E=n(34722);let V=` +`,E={type:"code",component:function(){return a.createElement(P,{type:/^[0-3]*$/,inputType:"tel",inputMode:"numeric"})},code:k,centered:!0};var D=n(34722);let V=` import { PinInput } from '@mantine/core'; function Demo() { @@ -18,4 +18,4 @@ function Demo() { ); } -`,N={type:"styles-api",data:E.l,component:function(e){return a.createElement(P,{...e})},code:V,centered:!0};var C=n(3916),T=n(54568);let A=(0,C.A)(T.us.PinInput);function $(e){let t={code:"code",h2:"h2",p:"p",pre:"pre",...(0,i.a)(),...e.components},{Demo:n,StylesApiSelectors:a}=t;return n||M("Demo",!0),a||M("StylesApiSelectors",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n,{data:_}),"\n",(0,r.jsx)(t.h2,{id:"regex-type",children:"Regex type"}),"\n",(0,r.jsxs)(t.p,{children:["You can use regular expression to validate user input. Characters that do not match given expression\nwill be disregarded. For example, to create a ",(0,r.jsx)(t.code,{children:"PinInput"})," that will accept only numbers from ",(0,r.jsx)(t.code,{children:"0"})," to ",(0,r.jsx)(t.code,{children:"3"}),",\nset ",(0,r.jsx)(t.code,{children:"type={/^[0-3]+/}"}),":"]}),"\n",(0,r.jsx)(n,{data:D}),"\n",(0,r.jsx)(t.h2,{id:"one-time-code",children:"One time code"}),"\n",(0,r.jsxs)(t.p,{children:["Some operating systems expose the last received SMS code to be used by applications like your keyboard.\nIf the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.\nProp ",(0,r.jsx)(t.code,{children:"oneTimeCode"})," makes your input setting ",(0,r.jsx)(t.code,{children:'autocomplete="one-time-code"'})," which allows using that feature."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { PinInput } from '@mantine/core';\n\nfunction OneTimeCodeInput() {\n return ;\n}\n"})}),"\n",(0,r.jsx)(a,{component:"PinInput"}),"\n",(0,r.jsx)(n,{data:N}),"\n",(0,r.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsxs)(t.p,{children:["Inputs do not have associated labels, set ",(0,r.jsx)(t.code,{children:"aria-label"})," to make component visible to the screen reader:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { PinInput } from '@mantine/core';\n\nfunction Accessibility() {\n return ;\n}\n"})})]})}function z(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(A,{...e,children:(0,r.jsx)($,{...e})})}function M(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=71887)}),_N_E=e.O()}]); \ No newline at end of file +`,N={type:"styles-api",data:D.l,component:function(e){return a.createElement(P,{...e})},code:V,centered:!0};var C=n(3916),T=n(54568);let A=(0,C.A)(T.us.PinInput);function $(e){let t={code:"code",h2:"h2",p:"p",pre:"pre",...(0,i.a)(),...e.components},{Demo:n,StylesApiSelectors:a}=t;return n||M("Demo",!0),a||M("StylesApiSelectors",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n,{data:_}),"\n",(0,r.jsx)(t.h2,{id:"regex-type",children:"Regex type"}),"\n",(0,r.jsxs)(t.p,{children:["You can use regular expression to validate user input. Characters that do not match given expression\nwill be disregarded. For example, to create a ",(0,r.jsx)(t.code,{children:"PinInput"})," that will accept only numbers from ",(0,r.jsx)(t.code,{children:"0"})," to ",(0,r.jsx)(t.code,{children:"3"}),",\nset ",(0,r.jsx)(t.code,{children:"type={/^[0-3]+/}"}),":"]}),"\n",(0,r.jsx)(n,{data:E}),"\n",(0,r.jsx)(t.h2,{id:"one-time-code",children:"One time code"}),"\n",(0,r.jsxs)(t.p,{children:["Some operating systems expose the last received SMS code to be used by applications like your keyboard.\nIf the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.\nProp ",(0,r.jsx)(t.code,{children:"oneTimeCode"})," makes your input setting ",(0,r.jsx)(t.code,{children:'autocomplete="one-time-code"'})," which allows using that feature."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { PinInput } from '@mantine/core';\n\nfunction OneTimeCodeInput() {\n return ;\n}\n"})}),"\n",(0,r.jsx)(a,{component:"PinInput"}),"\n",(0,r.jsx)(n,{data:N}),"\n",(0,r.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,r.jsxs)(t.p,{children:["Inputs do not have associated labels, set ",(0,r.jsx)(t.code,{children:"aria-label"})," to make component visible to the screen reader:"]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"import { PinInput } from '@mantine/core';\n\nfunction Accessibility() {\n return ;\n}\n"})})]})}function z(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(A,{...e,children:(0,r.jsx)($,{...e})})}function M(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=71887)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/form/get-input-props-7414c69ca74388ac.js b/_next/static/chunks/pages/form/get-input-props-7414c69ca74388ac.js deleted file mode 100644 index c0963b3ce85..00000000000 --- a/_next/static/chunks/pages/form/get-input-props-7414c69ca74388ac.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37798],{75695:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/form/get-input-props",function(){return o(70676)}])},70676:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return p}});var t=o(24246),r=o(71670),s=o(68058),i=o(99166),c=o(18748),d=o(97900),l=o(3916),a=o(54568);let u=(0,l.A)(a.us.formGetInputProps);function h(e){let n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:o}=n;return o||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"getinputprops-handler",children:"getInputProps handler"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"form.getInputProps"})," returns an object with ",(0,t.jsx)(n.code,{children:"value"}),", ",(0,t.jsx)(n.code,{children:"onChange"}),", ",(0,t.jsx)(n.code,{children:"onFocus"}),", ",(0,t.jsx)(n.code,{children:"onBlur"}),", ",(0,t.jsx)(n.code,{children:"error"}),"\nand all props specified in ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," function. Return value should be spread to the input component."]}),"\n",(0,t.jsxs)(n.p,{children:["You can pass the following options to ",(0,t.jsx)(n.code,{children:"form.getInputProps"})," as second argument:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"type"}),": default ",(0,t.jsx)(n.code,{children:"input"}),". Must be set to ",(0,t.jsx)(n.code,{children:"checkbox"})," if the input requires ",(0,t.jsx)(n.code,{children:"checked"})," prop instead of ",(0,t.jsx)(n.code,{children:"value"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"withError"}),": default ",(0,t.jsx)(n.code,{children:"type === 'input'"}),". Determines whether the returned object should contain an ",(0,t.jsx)(n.code,{children:"error"})," property with\n",(0,t.jsx)(n.code,{children:"form.errors[path]"})," value."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"withFocus"}),": default ",(0,t.jsx)(n.code,{children:"true"}),". Determines whether the returned object should contain an ",(0,t.jsx)(n.code,{children:"onFocus"})," handler. If disabled, the touched\nstate will only change if value of the field has been changed."]}),"\n",(0,t.jsxs)(n.li,{children:["Any additional props that can be accessed with ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," function. These props are not passed to the input."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Checkbox, TextInput, useForm } from '@mantine/core';\n\nfunction Demo() {\n const form = useForm({\n initialValues: { name: '', accepted: false },\n validationRules: {\n name: (value) => value.trim().length > 2,\n },\n });\n\n return (\n <>\n \n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"enhancegetinputprops",children:"enhanceGetInputProps"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," is a function that can be used to add additional props to the object returned by ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),".\nYou can define it in ",(0,t.jsx)(n.code,{children:"useForm"})," hook options. Its argument is an object with the following properties:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"inputProps"})," – object returned by ",(0,t.jsx)(n.code,{children:"form.getInputProps"})," by default"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"field"})," – field path, first argument of ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),", for example ",(0,t.jsx)(n.code,{children:"name"}),", ",(0,t.jsx)(n.code,{children:"user.email"}),", ",(0,t.jsx)(n.code,{children:"users.0.name"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"options"})," – second argument of ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),", for example ",(0,t.jsx)(n.code,{children:"{ type: 'checkbox' }"}),", can be used to pass additional\noptions to ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," function"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"form"})," – form instance"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Example of using ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," to disable input based on field path:"]}),"\n",(0,t.jsx)(o,{data:s.T}),"\n",(0,t.jsxs)(n.p,{children:["Example of using ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," to add additional props to the input based on option passed to ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),":"]}),"\n",(0,t.jsx)(o,{data:i.w}),"\n",(0,t.jsxs)(n.p,{children:["Example of using ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," to add ",(0,t.jsx)(n.code,{children:"disabled"})," prop to all inputs if the form\nhas not been initialized yet:"]}),"\n",(0,t.jsx)(o,{data:c.W}),"\n",(0,t.jsx)(n.h2,{id:"initialize-form",children:"Initialize form"}),"\n",(0,t.jsxs)(n.p,{children:["When called ",(0,t.jsx)(n.code,{children:"form.initialize"})," handler sets ",(0,t.jsx)(n.code,{children:"initialValues"})," and ",(0,t.jsx)(n.code,{children:"values"})," to the same value\nand marks form as initialized. It can be used only once, next ",(0,t.jsx)(n.code,{children:"form.initialize"})," calls\nare ignored."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"form.initialize"})," is useful when you want to sync form values with backend API response:"]}),"\n",(0,t.jsx)(o,{data:d.j}),"\n",(0,t.jsxs)(n.p,{children:["Example with ",(0,t.jsx)(n.a,{href:"https://tanstack.com/query/latest",children:"TanStack Query"})," (react-query):"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { useEffect } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { useForm } from '@mantine/form';\n\nfunction Demo() {\n const query = useQuery({\n queryKey: ['current-user'],\n queryFn: () => fetch('/api/users/me').then((res) => res.json()),\n });\n\n const form = useForm({\n initialValues: {\n name: '',\n email: '',\n },\n });\n\n useEffect(() => {\n if (query.data) {\n // Even if query.data changes, form will be initialized only once\n form.initialize(query.data);\n }\n }, [query.data]);\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"integrate-getinputprops-with-custom-inputs",children:"Integrate getInputProps with custom inputs"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"form.getInputProps"})," returns an object with the following properties:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"value"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"onChange"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"onFocus"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"onBlur"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"error"})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["To create a custom input that works with ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),", make sure that your component\naccepts these props and passes them to the input component or uses them in any other way."]}),"\n",(0,t.jsx)(n.p,{children:"Example of creating a custom input component:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"interface CustomInputProps {\n value: string;\n onChange(event: React.ChangeEvent): void;\n onFocus(event: React.FocusEvent): void;\n onBlur(event: React.FocusEvent): void;\n error: string;\n}\n\nexport function CustomInput({\n value,\n onChange,\n onFocus,\n onBlur,\n error,\n}: CustomInputProps) {\n return (\n
\n \n {error &&
{error}
}\n
\n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Then use it with ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { useForm } from '@mantine/core';\nimport { CustomInput } from './CustomInput';\n\nfunction Demo() {\n const form = useForm({\n initialValues: { name: '' },\n });\n\n return ;\n}\n"})})]})}function p(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(u,{...e,children:(0,t.jsx)(h,{...e})})}}},function(e){e.O(0,[30370,62740,15819,2775,56926,3242,49774,92888,40179],function(){return e(e.s=75695)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/form/get-input-props-fd5d20cd80eafc52.js b/_next/static/chunks/pages/form/get-input-props-fd5d20cd80eafc52.js new file mode 100644 index 00000000000..54d92d629c3 --- /dev/null +++ b/_next/static/chunks/pages/form/get-input-props-fd5d20cd80eafc52.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37798],{75695:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/form/get-input-props",function(){return o(70676)}])},70676:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return p}});var t=o(24246),r=o(71670),s=o(68058),i=o(99166),c=o(18748),d=o(97900),l=o(3916),a=o(54568);let u=(0,l.A)(a.us.formGetInputProps);function h(e){let n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:o}=n;return o||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"getinputprops-handler",children:"getInputProps handler"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"form.getInputProps"})," returns an object with ",(0,t.jsx)(n.code,{children:"value"}),", ",(0,t.jsx)(n.code,{children:"onChange"}),", ",(0,t.jsx)(n.code,{children:"onFocus"}),", ",(0,t.jsx)(n.code,{children:"onBlur"}),", ",(0,t.jsx)(n.code,{children:"error"}),"\nand all props specified in ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," function. Return value should be spread to the input component."]}),"\n",(0,t.jsxs)(n.p,{children:["You can pass the following options to ",(0,t.jsx)(n.code,{children:"form.getInputProps"})," as second argument:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"type"}),": default ",(0,t.jsx)(n.code,{children:"input"}),". Must be set to ",(0,t.jsx)(n.code,{children:"checkbox"})," if the input requires ",(0,t.jsx)(n.code,{children:"checked"})," prop instead of ",(0,t.jsx)(n.code,{children:"value"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"withError"}),": default ",(0,t.jsx)(n.code,{children:"type === 'input'"}),". Determines whether the returned object should contain an ",(0,t.jsx)(n.code,{children:"error"})," property with\n",(0,t.jsx)(n.code,{children:"form.errors[path]"})," value."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"withFocus"}),": default ",(0,t.jsx)(n.code,{children:"true"}),". Determines whether the returned object should contain an ",(0,t.jsx)(n.code,{children:"onFocus"})," handler. If disabled, the touched\nstate will only change if value of the field has been changed."]}),"\n",(0,t.jsxs)(n.li,{children:["Any additional props that can be accessed with ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," function. These props are not passed to the input."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Checkbox, TextInput, useForm } from '@mantine/core';\n\nfunction Demo() {\n const form = useForm({\n initialValues: { name: '', accepted: false },\n validate: {\n name: (value) => value.trim().length > 2,\n },\n });\n\n return (\n <>\n \n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"enhancegetinputprops",children:"enhanceGetInputProps"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," is a function that can be used to add additional props to the object returned by ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),".\nYou can define it in ",(0,t.jsx)(n.code,{children:"useForm"})," hook options. Its argument is an object with the following properties:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"inputProps"})," – object returned by ",(0,t.jsx)(n.code,{children:"form.getInputProps"})," by default"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"field"})," – field path, first argument of ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),", for example ",(0,t.jsx)(n.code,{children:"name"}),", ",(0,t.jsx)(n.code,{children:"user.email"}),", ",(0,t.jsx)(n.code,{children:"users.0.name"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"options"})," – second argument of ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),", for example ",(0,t.jsx)(n.code,{children:"{ type: 'checkbox' }"}),", can be used to pass additional\noptions to ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," function"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"form"})," – form instance"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Example of using ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," to disable input based on field path:"]}),"\n",(0,t.jsx)(o,{data:s.T}),"\n",(0,t.jsxs)(n.p,{children:["Example of using ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," to add additional props to the input based on option passed to ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),":"]}),"\n",(0,t.jsx)(o,{data:i.w}),"\n",(0,t.jsxs)(n.p,{children:["Example of using ",(0,t.jsx)(n.code,{children:"enhanceGetInputProps"})," to add ",(0,t.jsx)(n.code,{children:"disabled"})," prop to all inputs if the form\nhas not been initialized yet:"]}),"\n",(0,t.jsx)(o,{data:c.W}),"\n",(0,t.jsx)(n.h2,{id:"initialize-form",children:"Initialize form"}),"\n",(0,t.jsxs)(n.p,{children:["When called ",(0,t.jsx)(n.code,{children:"form.initialize"})," handler sets ",(0,t.jsx)(n.code,{children:"initialValues"})," and ",(0,t.jsx)(n.code,{children:"values"})," to the same value\nand marks form as initialized. It can be used only once, next ",(0,t.jsx)(n.code,{children:"form.initialize"})," calls\nare ignored."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"form.initialize"})," is useful when you want to sync form values with backend API response:"]}),"\n",(0,t.jsx)(o,{data:d.j}),"\n",(0,t.jsxs)(n.p,{children:["Example with ",(0,t.jsx)(n.a,{href:"https://tanstack.com/query/latest",children:"TanStack Query"})," (react-query):"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { useEffect } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { useForm } from '@mantine/form';\n\nfunction Demo() {\n const query = useQuery({\n queryKey: ['current-user'],\n queryFn: () => fetch('/api/users/me').then((res) => res.json()),\n });\n\n const form = useForm({\n initialValues: {\n name: '',\n email: '',\n },\n });\n\n useEffect(() => {\n if (query.data) {\n // Even if query.data changes, form will be initialized only once\n form.initialize(query.data);\n }\n }, [query.data]);\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"integrate-getinputprops-with-custom-inputs",children:"Integrate getInputProps with custom inputs"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"form.getInputProps"})," returns an object with the following properties:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"value"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"onChange"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"onFocus"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"onBlur"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"error"})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["To create a custom input that works with ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),", make sure that your component\naccepts these props and passes them to the input component or uses them in any other way."]}),"\n",(0,t.jsx)(n.p,{children:"Example of creating a custom input component:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"interface CustomInputProps {\n value: string;\n onChange(event: React.ChangeEvent): void;\n onFocus(event: React.FocusEvent): void;\n onBlur(event: React.FocusEvent): void;\n error: string;\n}\n\nexport function CustomInput({\n value,\n onChange,\n onFocus,\n onBlur,\n error,\n}: CustomInputProps) {\n return (\n
\n \n {error &&
{error}
}\n
\n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Then use it with ",(0,t.jsx)(n.code,{children:"form.getInputProps"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { useForm } from '@mantine/core';\nimport { CustomInput } from './CustomInput';\n\nfunction Demo() {\n const form = useForm({\n initialValues: { name: '' },\n });\n\n return ;\n}\n"})})]})}function p(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(u,{...e,children:(0,t.jsx)(h,{...e})})}}},function(e){e.O(0,[30370,62740,15819,2775,56926,3242,49774,92888,40179],function(){return e(e.s=75695)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/hooks/use-local-storage-ae931436cde2c7be.js b/_next/static/chunks/pages/hooks/use-local-storage-ae931436cde2c7be.js new file mode 100644 index 00000000000..32d4876974c --- /dev/null +++ b/_next/static/chunks/pages/hooks/use-local-storage-ae931436cde2c7be.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[14173],{23646:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-local-storage",function(){return o(41086)}])},41086:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return c}});var s=o(24246),a=o(71670),l=o(3916),t=o(54568);let r=(0,l.A)(t.us.useLocalStorage);function i(e){let n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"use-local-storage"})," allows using value from the ",(0,s.jsx)(n.code,{children:"localStorage"})," as react state.\nThe hook works the same way as ",(0,s.jsx)(n.code,{children:"useState"}),", but also writes the value to the ",(0,s.jsx)(n.code,{children:"localStorage"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { useLocalStorage } from '@mantine/hooks';\n\n// The hook will read value from localStorage.getItem('color-scheme')\n// If localStorage is not available or value at a given key does not exist\n// 'dark' will be assigned to value variable\nconst [value, setValue] = useLocalStorage({\n key: 'color-scheme',\n defaultValue: 'dark',\n});\n\n// Value is set both to state and localStorage at 'color-scheme'\nsetValue('light');\n\n// You can also use callback like in useState hook to set value\nsetValue((current) => (current === 'dark' ? 'light' : 'dark'));\n"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsxs)(n.p,{children:["Example of a color scheme toggle button that uses ",(0,s.jsx)(n.code,{children:"use-local-storage"})," hook\nto store current color scheme in the ",(0,s.jsx)(n.code,{children:"localStorage"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { IconMoonStars, IconSun } from '@tabler/icons-react';\nimport { ActionIcon } from '@mantine/core';\nimport { useLocalStorage } from '@mantine/hooks';\n\nfunction ColorSchemeToggle() {\n const [colorScheme, setColorScheme] = useLocalStorage<\n 'light' | 'dark'\n >({\n key: 'color-scheme',\n defaultValue: 'light',\n });\n\n const toggleColorScheme = () =>\n setColorScheme((current) =>\n current === 'dark' ? 'light' : 'dark'\n );\n\n return (\n \n {colorScheme === 'dark' ? : }\n \n );\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"remove-value",children:"Remove value"}),"\n",(0,s.jsxs)(n.p,{children:["Use ",(0,s.jsx)(n.code,{children:"removeValue"})," callback to clean ",(0,s.jsx)(n.code,{children:"localStorage"}),"/",(0,s.jsx)(n.code,{children:"sessionStorage"}),".\nWhen value is removed it is reset to ",(0,s.jsx)(n.code,{children:"defaultValue"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { useLocalStorage } from '@mantine/hooks';\n\nconst [value, setValue, removeValue] = useLocalStorage({\n key: 'color-scheme',\n defaultValue: 'light',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"browser-tabs-synchronization",children:"Browser tabs synchronization"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"use-local-storage"})," subscribes to ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event",children:"storage event"}),".\nWhen state changes in one tab, it automatically updates the value in all other opened browser tabs.\nYou can test this feature by opening 2 tabs with Mantine docs side by side and changing the color scheme\n(button on the top right or ",(0,s.jsx)(n.code,{children:"⌘ + J"})," on MacOS and ",(0,s.jsx)(n.code,{children:"Ctrl + J"})," on Windows and Linux)."]}),"\n",(0,s.jsx)(n.h2,{id:"serializedeserialize-json",children:"Serialize/deserialize JSON"}),"\n",(0,s.jsxs)(n.p,{children:["By default, the hook will serialize/deserialize data with ",(0,s.jsx)(n.code,{children:"JSON.stringify"}),"/",(0,s.jsx)(n.code,{children:"JSON.parse"}),".\nIf you need to store data in local storage that cannot be serialized with ",(0,s.jsx)(n.code,{children:"JSON.stringify"}),"\n– provide your own serialization handlers:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"const [value, setValue] = useLocalStorage({\n key: 'color-scheme',\n serialize: (value) => {\n /* return value serialized to string */\n },\n deserialize: (localStorageValue) => {\n /* parse localStorage string value and return value */\n },\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"usage-with-superjson",children:"Usage with superjson"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://github.com/blitz-js/superjson",children:"superjson"})," is compatible with ",(0,s.jsx)(n.code,{children:"JSON.stringify"}),"/",(0,s.jsx)(n.code,{children:"JSON.parse"})," but works for ",(0,s.jsx)(n.code,{children:"Date"}),", ",(0,s.jsx)(n.code,{children:"Map"}),", ",(0,s.jsx)(n.code,{children:"Set"})," and ",(0,s.jsx)(n.code,{children:"BigInt"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import superjson from 'superjson';\n\nconst [value, setValue] = useLocalStorage({\n key,\n defaultValue,\n serialize: superjson.stringify,\n deserialize: (str) =>\n str === undefined ? defaultValue : superjson.parse(str),\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"use-session-storage",children:"use-session-storage"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"use-session-storage"})," hook works the same way as ",(0,s.jsx)(n.code,{children:"use-local-storage"})," hook but uses ",(0,s.jsx)(n.code,{children:"sessionStorage"})," instead of ",(0,s.jsx)(n.code,{children:"window.localStorage"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { useSessionStorage } from '@mantine/hooks';\n\nconst [value, setValue] = useSessionStorage({\n key: 'session-key',\n defaultValue: 'mantine',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"definition",children:"Definition"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"interface UseLocalStorage {\n /** Local storage key */\n key: string;\n\n /** Default value that will be set if value is not found in local storage */\n defaultValue?: T;\n\n /** If set to true, value will be updated in useEffect after mount */\n getInitialValueInEffect: boolean;\n\n /** Function to serialize value into a string to be saved in local storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from local storage to value */\n deserialize?(value: string): T;\n}\n\nfunction useLocalStorage({\n key,\n defaultValue,\n deserialize,\n serialize,\n getInitialValueInEffect,\n}: UseLocalStorage): readonly [\n T, // current value\n (val: T | ((prevState: T) => T)) => void, // callback to set value in storage\n () => void, // callback to remove value from storage\n];\n"})}),"\n",(0,s.jsx)(n.h2,{id:"set-value-type",children:"Set value type"}),"\n",(0,s.jsxs)(n.p,{children:["You can specify value type same as in ",(0,s.jsx)(n.code,{children:"useState"})," hook:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"const [value, setValue] = useLocalStorage<'dark' | 'light'>({\n key: 'color-scheme',\n defaultValue: 'light',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"read-storage-value",children:"Read storage value"}),"\n",(0,s.jsxs)(n.p,{children:["To read value from storage without using hook, use ",(0,s.jsx)(n.code,{children:"readLocalStorageValue"}),"/",(0,s.jsx)(n.code,{children:"readSessionStorageValue"})," functions.\nFunctions accept the same arguments as ",(0,s.jsx)(n.code,{children:"use-local-storage"}),"/",(0,s.jsx)(n.code,{children:"use-session-storage"})," hooks:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { readLocalStorageValue } from '@mantine/hooks';\n\nconst value = readLocalStorageValue({ key: 'color-scheme' });\n"})})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,s.jsx)(r,{...e,children:(0,s.jsx)(i,{...e})})}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=23646)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/hooks/use-local-storage-c6bbf635a28d38d6.js b/_next/static/chunks/pages/hooks/use-local-storage-c6bbf635a28d38d6.js deleted file mode 100644 index 0fe20d95901..00000000000 --- a/_next/static/chunks/pages/hooks/use-local-storage-c6bbf635a28d38d6.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[14173],{23646:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-local-storage",function(){return o(41086)}])},41086:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return i}});var s=o(24246),a=o(71670),l=o(3916),t=o(54568);let r=(0,l.A)(t.us.useLocalStorage);function c(e){let n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"use-local-storage"})," allows using value from the ",(0,s.jsx)(n.code,{children:"localStorage"})," as react state.\nThe hook works the same way as ",(0,s.jsx)(n.code,{children:"useState"}),", but also writes the value to the ",(0,s.jsx)(n.code,{children:"localStorage"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { useLocalStorage } from '@mantine/hooks';\n\n// The hook will read value from localStorage.getItem('color-scheme')\n// If localStorage is not available or value at a given key does not exist\n// 'dark' will be assigned to value variable\nconst [value, setValue] = useLocalStorage({\n key: 'color-scheme',\n defaultValue: 'dark',\n});\n\n// Value is set both to state and localStorage at 'color-scheme'\nsetValue('light');\n\n// You can also use callback like in useState hook to set value\nsetValue((current) => (current === 'dark' ? 'light' : 'dark'));\n"})}),"\n",(0,s.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,s.jsxs)(n.p,{children:["Example of a color scheme toggle button that uses ",(0,s.jsx)(n.code,{children:"use-local-storage"})," hook\nto store current color scheme in the ",(0,s.jsx)(n.code,{children:"localStorage"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { IconMoonStars, IconSun } from '@tabler/icons-react';\nimport { ActionIcon, ColorScheme } from '@mantine/core';\nimport { useLocalStorage } from '@mantine/hooks';\n\nfunction ColorSchemeToggle() {\n const [colorScheme, setColorScheme] = useLocalStorage({\n key: 'color-scheme',\n defaultValue: 'light',\n });\n\n const toggleColorScheme = () =>\n setColorScheme((current) =>\n current === 'dark' ? 'light' : 'dark'\n );\n\n return (\n \n {colorScheme === 'dark' ? : }\n \n );\n}\n"})}),"\n",(0,s.jsx)(n.h2,{id:"remove-value",children:"Remove value"}),"\n",(0,s.jsxs)(n.p,{children:["Use ",(0,s.jsx)(n.code,{children:"removeValue"})," callback to clean ",(0,s.jsx)(n.code,{children:"localStorage"}),"/",(0,s.jsx)(n.code,{children:"sessionStorage"}),".\nWhen value is removed it is reset to ",(0,s.jsx)(n.code,{children:"defaultValue"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { useLocalStorage } from '@mantine/hooks';\n\nconst [value, setValue, removeValue] = useLocalStorage({\n key: 'color-scheme',\n defaultValue: 'light',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"browser-tabs-synchronization",children:"Browser tabs synchronization"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"use-local-storage"})," subscribes to ",(0,s.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event",children:"storage event"}),".\nWhen state changes in one tab, it automatically updates the value in all other opened browser tabs.\nYou can test this feature by opening 2 tabs with Mantine docs side by side and changing the color scheme\n(button on the top right or ",(0,s.jsx)(n.code,{children:"⌘ + J"})," on MacOS and ",(0,s.jsx)(n.code,{children:"Ctrl + J"})," on Windows and Linux)."]}),"\n",(0,s.jsx)(n.h2,{id:"serializedeserialize-json",children:"Serialize/deserialize JSON"}),"\n",(0,s.jsxs)(n.p,{children:["By default, the hook will serialize/deserialize data with ",(0,s.jsx)(n.code,{children:"JSON.stringify"}),"/",(0,s.jsx)(n.code,{children:"JSON.parse"}),".\nIf you need to store data in local storage that cannot be serialized with ",(0,s.jsx)(n.code,{children:"JSON.stringify"}),"\n– provide your own serialization handlers:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"const [value, setValue] = useLocalStorage({\n key: 'color-scheme',\n serialize: (value) => {\n /* return value serialized to string */\n },\n deserialize: (localStorageValue) => {\n /* parse localStorage string value and return value */\n },\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"usage-with-superjson",children:"Usage with superjson"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.a,{href:"https://github.com/blitz-js/superjson",children:"superjson"})," is compatible with ",(0,s.jsx)(n.code,{children:"JSON.stringify"}),"/",(0,s.jsx)(n.code,{children:"JSON.parse"})," but works for ",(0,s.jsx)(n.code,{children:"Date"}),", ",(0,s.jsx)(n.code,{children:"Map"}),", ",(0,s.jsx)(n.code,{children:"Set"})," and ",(0,s.jsx)(n.code,{children:"BigInt"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import superjson from 'superjson';\n\nconst [value, setValue] = useLocalStorage({\n key,\n defaultValue,\n serialize: superjson.stringify,\n deserialize: (str) =>\n str === undefined ? defaultValue : superjson.parse(str),\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"use-session-storage",children:"use-session-storage"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"use-session-storage"})," hook works the same way as ",(0,s.jsx)(n.code,{children:"use-local-storage"})," hook but uses ",(0,s.jsx)(n.code,{children:"sessionStorage"})," instead of ",(0,s.jsx)(n.code,{children:"window.localStorage"}),":"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { useSessionStorage } from '@mantine/hooks';\n\nconst [value, setValue] = useSessionStorage({\n key: 'session-key',\n defaultValue: 'mantine',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"definition",children:"Definition"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"interface UseLocalStorage {\n /** Local storage key */\n key: string;\n\n /** Default value that will be set if value is not found in local storage */\n defaultValue?: T;\n\n /** If set to true, value will be updated in useEffect after mount */\n getInitialValueInEffect: boolean;\n\n /** Function to serialize value into a string to be saved in local storage */\n serialize?(value: T): string;\n\n /** Function to deserialize string value from local storage to value */\n deserialize?(value: string): T;\n}\n\nfunction useLocalStorage({\n key,\n defaultValue,\n deserialize,\n serialize,\n getInitialValueInEffect,\n}: UseLocalStorage): readonly [\n T, // current value\n (val: T | ((prevState: T) => T)) => void, // callback to set value in storage\n () => void, // callback to remove value from storage\n];\n"})}),"\n",(0,s.jsx)(n.h2,{id:"set-value-type",children:"Set value type"}),"\n",(0,s.jsxs)(n.p,{children:["You can specify value type same as in ",(0,s.jsx)(n.code,{children:"useState"})," hook:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"const [value, setValue] = useLocalStorage<'dark' | 'light'>({\n key: 'color-scheme',\n defaultValue: 'light',\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"read-storage-value",children:"Read storage value"}),"\n",(0,s.jsxs)(n.p,{children:["To read value from storage without using hook, use ",(0,s.jsx)(n.code,{children:"readLocalStorageValue"}),"/",(0,s.jsx)(n.code,{children:"readSessionStorageValue"})," functions.\nFunctions accept the same arguments as ",(0,s.jsx)(n.code,{children:"use-local-storage"}),"/",(0,s.jsx)(n.code,{children:"use-session-storage"})," hooks:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { readLocalStorageValue } from '@mantine/hooks';\n\nconst value = readLocalStorageValue({ key: 'color-scheme' });\n"})})]})}function i(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,s.jsx)(r,{...e,children:(0,s.jsx)(c,{...e})})}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=23646)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/hooks/use-network-1374bdf45ee32fc8.js b/_next/static/chunks/pages/hooks/use-network-1374bdf45ee32fc8.js new file mode 100644 index 00000000000..d6d2c8aba1a --- /dev/null +++ b/_next/static/chunks/pages/hooks/use-network-1374bdf45ee32fc8.js @@ -0,0 +1,54 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8681],{34066:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-network",function(){return t(2740)}])},2740:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return m}});var l=t(24246),a=t(71670),r=t(27378),o=t(28862),Text=t(26569),i=t(56617);function T(){if("undefined"==typeof navigator)return{};let e=navigator,n=e.connection||e.mozConnection||e.webkitConnection;return n?{downlink:n?.downlink,downlinkMax:n?.downlinkMax,effectiveType:n?.effectiveType,rtt:n?.rtt,saveData:n?.saveData,type:n?.type}:{}}let c=` +import { Text, Table } from '@mantine/core'; +import { useNetwork } from '@mantine/hooks'; + +function Demo() { + const networkStatus = useNetwork(); + + return ( + + + + Property + Value + + + + + + Online + + + {networkStatus.online ? 'Online' : 'Offline'} + + + + + + rtt + {networkStatus.rtt} + + + + downlink + {networkStatus.downlink} + + + + effectiveType + {networkStatus.effectiveType} + + + + saveData + + + {networkStatus.saveData ? 'true' : 'false'} + + + + +
+ ); +} +`,u={type:"code",component:function(){let e=function(){let[e,n]=(0,r.useState)({online:!0}),t=(0,r.useCallback)(()=>n(e=>({...e,...T()})),[]);return(0,i.s)("online",()=>n({online:!0,...T()})),(0,i.s)("offline",()=>n({online:!1,...T()})),(0,r.useEffect)(()=>{let e=navigator;if(e.connection)return n({online:e.onLine,...T()}),e.connection.addEventListener("change",t),()=>e.connection.removeEventListener("change",t);"boolean"==typeof e.onLine&&n(n=>({...n,online:e.onLine}))},[]),e}();return r.createElement(o.i,{maw:300,layout:"fixed",mx:"auto"},r.createElement(o.i.Thead,null,r.createElement(o.i.Tr,null,r.createElement(o.i.Th,null,"Property"),r.createElement(o.i.Th,null,"Value"))),r.createElement(o.i.Tbody,null,r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"Online"),r.createElement(o.i.Td,null,r.createElement(Text.x,{size:"sm",c:e.online?"teal.6":"red.6"},e.online?"Online":"Offline"))),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"rtt"),r.createElement(o.i.Td,null,e.rtt)),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"downlink"),r.createElement(o.i.Td,null,e.downlink)),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"effectiveType"),r.createElement(o.i.Td,null,e.effectiveType)),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"saveData"),r.createElement(o.i.Td,null,r.createElement(Text.x,{size:"sm",c:e.saveData?"teal.6":"red.6"},e.saveData?"true":"false")))))},code:c};var s=t(3916),d=t(54568);let b=(0,s.A)(d.us.useNetwork);function f(e){let n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...e.components},{Demo:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"use-network"})," hook returns an object with current connection status:"]}),"\n",(0,l.jsx)(t,{data:u}),"\n",(0,l.jsx)(n.h2,{id:"browser-support",children:"Browser support"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"use-network"})," uses experimental ",(0,l.jsx)(n.code,{children:"navigator.connection"}),", see ",(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection#browser_compatibility",children:"browser compatibility table"}),"."]}),"\n",(0,l.jsx)(n.h2,{id:"definition",children:"Definition"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"function useNetwork(): {\n online: boolean;\n downlink?: number;\n downlinkMax?: number;\n effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n rtt?: number;\n saveData?: boolean;\n type?:\n | 'bluetooth'\n | 'cellular'\n | 'ethernet'\n | 'wifi'\n | 'wimax'\n | 'none'\n | 'other'\n | 'unknown';\n};\n"})})]})}function m(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,l.jsx)(b,{...e,children:(0,l.jsx)(f,{...e})})}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=34066)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/hooks/use-network-73b75269c6e49f17.js b/_next/static/chunks/pages/hooks/use-network-73b75269c6e49f17.js deleted file mode 100644 index 8232a59b21d..00000000000 --- a/_next/static/chunks/pages/hooks/use-network-73b75269c6e49f17.js +++ /dev/null @@ -1,54 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8681],{34066:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-network",function(){return t(2740)}])},2740:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return m}});var l=t(24246),a=t(71670),r=t(27378),o=t(28862),Text=t(26569),i=t(56617);function T(){if("undefined"==typeof navigator)return{};let e=navigator,n=e.connection||e.mozConnection||e.webkitConnection;return n?{downlink:n?.downlink,downlinkMax:n?.downlinkMax,effectiveType:n?.effectiveType,rtt:n?.rtt,saveData:n?.saveData,type:n?.type}:{}}let c=` -import { Text, Table } from '@mantine/core'; -import { useNetwork } from '@mantine/hooks'; - -function Demo() { - const networkStatus = useNetwork(); - - return ( - - - - Property - Value - - - - - - Online - - - {networkStatus.online ? 'Online' : 'Offline'} - - - - - - rtt - {networkStatus.rtt} - - - - downlink - {networkStatus.downlink} - - - - effectiveType - {networkStatus.effectiveType} - - - - saveData - - - {networkStatus.saveData ? 'true' : 'false'} - - - - -
- ); -} -`,u={type:"code",component:function(){let e=function(){let[e,n]=(0,r.useState)({online:!0}),t=(0,r.useCallback)(()=>n(e=>({...e,...T()})),[]);return(0,i.s)("online",()=>n({online:!0,...T()})),(0,i.s)("offline",()=>n({online:!1,...T()})),(0,r.useEffect)(()=>{let e=navigator;if(e.connection)return n({online:e.onLine,...T()}),e.connection.addEventListener("change",t),()=>e.connection.removeEventListener("change",t)},[]),e}();return r.createElement(o.i,{maw:300,layout:"fixed",mx:"auto"},r.createElement(o.i.Thead,null,r.createElement(o.i.Tr,null,r.createElement(o.i.Th,null,"Property"),r.createElement(o.i.Th,null,"Value"))),r.createElement(o.i.Tbody,null,r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"Online"),r.createElement(o.i.Td,null,r.createElement(Text.x,{size:"sm",c:e.online?"teal.6":"red.6"},e.online?"Online":"Offline"))),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"rtt"),r.createElement(o.i.Td,null,e.rtt)),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"downlink"),r.createElement(o.i.Td,null,e.downlink)),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"effectiveType"),r.createElement(o.i.Td,null,e.effectiveType)),r.createElement(o.i.Tr,null,r.createElement(o.i.Td,null,"saveData"),r.createElement(o.i.Td,null,r.createElement(Text.x,{size:"sm",c:e.saveData?"teal.6":"red.6"},e.saveData?"true":"false")))))},code:c};var s=t(3916),d=t(54568);let b=(0,s.A)(d.us.useNetwork);function f(e){let n={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...e.components},{Demo:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"use-network"})," hook returns an object with current connection status:"]}),"\n",(0,l.jsx)(t,{data:u}),"\n",(0,l.jsx)(n.h2,{id:"browser-support",children:"Browser support"}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.code,{children:"use-network"})," uses experimental ",(0,l.jsx)(n.code,{children:"navigator.connection"}),", see ",(0,l.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection#browser_compatibility",children:"browser compatibility table"}),"."]}),"\n",(0,l.jsx)(n.h2,{id:"definition",children:"Definition"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-tsx",children:"function useNetwork(): {\n online: boolean;\n downlink?: number;\n downlinkMax?: number;\n effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';\n rtt?: number;\n saveData?: boolean;\n type?:\n | 'bluetooth'\n | 'cellular'\n | 'ethernet'\n | 'wifi'\n | 'wimax'\n | 'none'\n | 'other'\n | 'unknown';\n};\n"})})]})}function m(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,l.jsx)(b,{...e,children:(0,l.jsx)(f,{...e})})}}},function(e){e.O(0,[30370,15819,2775,49774,92888,40179],function(){return e(e.s=34066)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/styles/css-files-list-b50f061ae5145dba.js b/_next/static/chunks/pages/styles/css-files-list-28e84c6667eabf05.js similarity index 90% rename from _next/static/chunks/pages/styles/css-files-list-b50f061ae5145dba.js rename to _next/static/chunks/pages/styles/css-files-list-28e84c6667eabf05.js index 4e8f3ad5909..c123b53c3de 100644 --- a/_next/static/chunks/pages/styles/css-files-list-b50f061ae5145dba.js +++ b/_next/static/chunks/pages/styles/css-files-list-28e84c6667eabf05.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","AppShell.css","AspectRatio.css","Avatar.css","BackgroundImage.css","Badge.css","Blockquote.css","Breadcrumbs.css","Burger.css","Button.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","Indicator.css","Image.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","Pill.css","PillsInput.css","PinInput.css","Popover.css","Progress.css","Radio.css","Rating.css","ScrollArea.css","SegmentedControl.css","RingProgress.css","Skeleton.css","SimpleGrid.css","Slider.css","Spoiler.css","Stack.css","Switch.css","Stepper.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","Burger.css","Button.css","Card.css","Center.css","Checkbox.css","Chip.css","CloseButton.css","Code.css","ColorInput.css","ColorPicker.css","ColorSwatch.css","Container.css","Combobox.css","Dialog.css","Divider.css","Drawer.css","Fieldset.css","Flex.css","Group.css","Grid.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","Pill.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","Stack.css","Spoiler.css","Stepper.css","Switch.css","Table.css","Tabs.css","Text.css","ThemeIcon.css","Timeline.css","Title.css","TypographyStylesProvider.css","Tooltip.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/webpack-6d0864796b2f45fd.js b/_next/static/chunks/webpack-2f3299aea8b6b761.js similarity index 99% rename from _next/static/chunks/webpack-6d0864796b2f45fd.js rename to _next/static/chunks/webpack-2f3299aea8b6b761.js index f52682bab23..5b76f2e950b 100644 --- a/_next/static/chunks/webpack-6d0864796b2f45fd.js +++ b/_next/static/chunks/webpack-2f3299aea8b6b761.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;height:100%;transition:transform .15s ease,opacity .1s ease;width:100%}.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(--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)}.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-54c44539[data-full-screen]{border-radius:0}.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/e4e16957e29964f4.css b/_next/static/css/e4e16957e29964f4.css new file mode 100644 index 00000000000..63e174e4c7c --- /dev/null +++ b/_next/static/css/e4e16957e29964f4.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;height:100%;transition:transform .15s ease,opacity .1s ease;width:100%}.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(:first-child){border-top:none!important;margin-top:calc(var(--card-padding)*-1)}.m-599a2148:where(:last-child){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(--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)}.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-54c44539[data-full-screen]{border-radius:0}.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(.0625rem*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}[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/about/index.html b/about/index.html index 080356e537a..f5435423672 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 960269a249c..c947e00e442 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 2b0ccc0ac50..94ec09d03d6 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:

@@ -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 1779e094222..15430e1e47a 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 ff1bb3089a3..465ba40f34f 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.

    @@ -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 7ae58836da0..2cab8af4411 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 {
@@ -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 5ef05fdb360..4c0750c7f0b 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, @@ -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 1e84f1bc229..bda05bc1d3c 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 f51c2ff1adf..db7f8727215 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

    7.5.X patches:

    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

    7.5.X patches:

    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 8643be29de5..6065408619e 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

    7.5.X patches:

    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

    7.5.X patches:

    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 1f18476e7f8..7a3155782b1 100644 --- a/charts/area-chart/index.html +++ b/charts/area-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

    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.

    @@ -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 c52ce3e182b..bca4c44c654 100644 --- a/charts/bar-chart/index.html +++ b/charts/bar-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

    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.

    @@ -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 c8552f5dd63..e1f1909fd6c 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';
@@ -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 0297b1c4067..0d94063863b 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 6e404839902..77e12b65cdb 100644 --- a/charts/line-chart/index.html +++ b/charts/line-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

    LineChart

    Line 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

    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';
 
@@ -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 c1f306dc2ad..6e90d1fe0c3 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';
@@ -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 23af5d84108..b3f0519030f 100644 --- a/charts/sparkline/index.html +++ b/charts/sparkline/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

    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';
@@ -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 3baee748d9b..19f70a1fd38 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 0e6797d8413..d2b359b9f2d 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 e91ea6f2d17..af5bf29f5f3 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 0c7fa8d2056..d748d590538 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 = [
   {
@@ -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 fbc9644a33c..1a1bfa0fcb5 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';
 
@@ -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 09ac0216d6d..b241493f0f5 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 46f798251f1..219f4233a91 100644 --- a/core/alert/index.html +++ b/core/alert/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

    Alert

    Attract user attention with important static message

    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

    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';
 
@@ -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 bba76904782..233b1280283 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 5afd8990b81..eb51f9590c1 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 6ad30b988c9..8652cdaf16a 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 3cf129bba23..4042b618ee6 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.

    @@ -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 c6476a83b5e..da958262adf 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 3e88757394b..24a5f1644d8 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 30697df4533..d44f2d857bc 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 537f4c96907..fd79d2e0c73 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 72ebb57f866..3e5e6343e97 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 c3916b64438..df54be84d48 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 f524eebdb69..e16f01593ac 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 abeb987b7aa..61904d04ee9 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() {
@@ -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 e215ecb20dd..35ea37ba6c7 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 8f9a9b0ab0a..7100d2ced93 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 6252403e25d..c4580139b11 100644 --- a/core/checkbox/index.html +++ b/core/checkbox/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

    Checkbox

    Capture boolean 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

    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() {
@@ -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 bdac342d5a6..c114717beb9 100644 --- a/core/chip/index.html +++ b/core/chip/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

    Chip

    Pick one or multiple values with inline controls

    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

    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() {
@@ -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 6248b7dcefc..c24b2802078 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 8ddb791dfd4..ba6e629cd50 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 84c26d320ce..919c6dc3d78 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 05495dedf1b..659144f493f 100644 --- a/core/color-input/index.html +++ b/core/color-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

    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';
 
@@ -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 22603887835..77671026dad 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 19189b07813..913e38a9a3d 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() {
@@ -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 79d1bc91901..bf58ff15b80 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 e276e6a1aa8..21c742edcd3 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 aa7c549dcb7..bc374a02ff5 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 59b00e057f1..b5977116991 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 7a9f4c06d75..bb1a0f4ce39 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 0678390bef8..2f64bd93047 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 6219c5e0f77..a60db9838d6 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 91ea9a0f556..0b1a797ad07 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 ed13233e14f..9d0663ccf74 100644 --- a/core/file-input/index.html +++ b/core/file-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

    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';
 
@@ -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 58f05f341e0..0dd38b9e744 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 2e0f969902e..a377a30bdef 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 d25c105eb3b..2caa4f2c374 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() {
@@ -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 e588057f216..fc0d0d108fd 100644 --- a/core/group/index.html +++ b/core/group/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

    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';
@@ -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 24ee775bc29..85898f419b4 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 9270f5a0d1c..1aaa29db92a 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 03347155e9d..9e6c3f50ebe 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 f4ca20aa5a1..cb82c189dae 100644 --- a/core/indicator/index.html +++ b/core/indicator/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

    Indicator

    Display element at the corner of another 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

    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() {
@@ -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 222e20e59ab..50c72aaaaf7 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 @@ -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 b81a362ff32..56ec6d87700 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';
@@ -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 16b6ae87b6f..c1cf3eb3b7f 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 26d2cdbbe02..0236437adbe 100644 --- a/core/list/index.html +++ b/core/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

    List

    Display ordered or unordered list

    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

    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() {
@@ -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 3c3d92730f8..e51ac984182 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';
@@ -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 65211428fb6..ff29e89262f 100644 --- a/core/loading-overlay/index.html +++ b/core/loading-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

    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.

    @@ -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 57c24fbb2cd..3e2847f1cec 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 707c2b78fe2..c84e0e89a98 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,
@@ -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 18097e4edeb..d05563cdbee 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 b8e02cde0da..2722dc7269c 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.

    @@ -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 ff6ec1a6365..aad1741ab82 100644 --- a/core/native-select/index.html +++ b/core/native-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

    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';
 
@@ -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 d02ce585802..8f08ca8705d 100644 --- a/core/nav-link/index.html +++ b/core/nav-link/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

    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';
+
    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';
 
 function Demo() {
@@ -74,7 +74,7 @@
 }
    
 
    Active
    
 
    Set active prop to add active styles to NavLink. You can customize active styles with color and variant props:
    
-
    Color
    Variant
    import { useState } from 'react';
+
    Color
    Variant
    import { useState } from 'react';
 import { IconGauge, IconFingerprint, IconActivity, IconChevronRight } from '@tabler/icons-react';
 import { Box, NavLink } from '@mantine/core';
 const data = [
@@ -107,7 +107,7 @@
   return <Box w={220}>{items}</Box>;
 }
    
 
    autoContrast
    NavLink supports autoContrast prop and theme.autoContrast. If autoContrast is set either on NavLink or on theme, content color will be adjusted to have sufficient contrast with the value specified in color prop.
    Note that autoContrast feature works only if you use color prop to change background color. autoContrast works only with filled variant.
    
-
    Default
    Auto contrast
    import { NavLink } from '@mantine/core';
+
    Default
    Auto contrast
    import { NavLink } from '@mantine/core';
 
 function Demo() {
   return (
@@ -119,7 +119,7 @@
 }
    
 
    Nested NavLinks
    
 
    To create nested links put NavLink as children of another NavLink:
    
-
    First parent link
    Second parent link
    import { NavLink } from '@mantine/core';
+
    First parent link
    Second parent link
    First child link
    Second child link
    Third child link
    import { NavLink } from '@mantine/core';
 import { IconGauge, IconFingerprint } from '@tabler/icons-react';
 
 function Demo() {
@@ -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 b76188a3c3f..157a91fa2e2 100644 --- a/core/notification/index.html +++ b/core/notification/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

    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';
@@ -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 4b270c6b884..62c93e1c89e 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 21cbfe5a9bf..09107ccba05 100644 --- a/core/number-input/index.html +++ b/core/number-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

    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.

    @@ -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 4ea2cf15b37..1991c05f95f 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 aa24f54bd8c..4485a20982d 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

    +
    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-9ptol452x

    id: 1, name: mantine-geyxs3tlk

    id: 2, name: mantine-l2fv5uzxj

    id: 3, name: mantine-fssn4z2kn

    id: 4, name: mantine-kv633dzzt

    import { randomId } from '@mantine/hooks';
+
    id: 0, name: mantine-f1nbxmzdc
    id: 1, name: mantine-b1or5w7d3
    id: 2, name: mantine-mn80jdpai
    id: 3, name: mantine-9k7727pq3
    id: 4, name: mantine-qh6k614xo
    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 b00d0303304..2056dad4dff 100644 --- a/core/paper/index.html +++ b/core/paper/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

    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

    +
    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() {
@@ -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 adc05b81e07..04195dd17ca 100644 --- a/core/password-input/index.html +++ b/core/password-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

    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';
 
@@ -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 46664b6cc2f..2857b3cc6bd 100644 --- a/core/pill/index.html +++ b/core/pill/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

    Pill

    Removable and non-removable tags

    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

    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() {
@@ -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 7a2a6bbdd60..e362e043678 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.

    @@ -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 5cd50f102eb..08f483cde43 100644 --- a/core/pin-input/index.html +++ b/core/pin-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

    PinInput

    Capture pin code or one time password from the 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

    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() {
@@ -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 ff9779776fa..a3d34f652a9 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() {
@@ -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 c68d8b7076a..848398410fb 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 4dff5724e31..35c3da37bc6 100644 --- a/core/progress/index.html +++ b/core/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

    Progress

    Give user feedback for status of the task

    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

    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() {
@@ -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 77d9c7baf81..72319e9e4e7 100644 --- a/core/radio/index.html +++ b/core/radio/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

    Radio

    Wrapper for input type radio

    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

    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() {
@@ -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 87c83d1fae7..8d9bee6314d 100644 --- a/core/rating/index.html +++ b/core/rating/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

    Rating

    Pick and display rating

    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

    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() {
@@ -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 d24eaf019c2..5d40362d3fd 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
      • @@ -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 eb43be3cab5..a2b11f0e3e8 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: @@ -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 f8ed3a331f5..ab558cef6cb 100644 --- a/core/segmented-control/index.html +++ b/core/segmented-control/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

    SegmentedControl

    A linear set of two or more segments

    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

    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() {
@@ -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 dad93f73d1f..4d5633071cf 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.

    @@ -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 9dd6a6c107c..483de89b37f 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 1034a6f0b86..76999b3543a 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
      • @@ -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 a5d6b01032d..0d66136d034 100644 --- a/core/slider/index.html +++ b/core/slider/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

    Slider

    Slider and RangeSlider 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

    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() {
@@ -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 04282b7cdd6..d0ffb59b2e2 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 4ff3b92fc2c..1451dbc431f 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 ff9823fff30..a2e084cfcc4 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 2cfb74fac51..fa76978ee54 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 ee03bedf5d7..12a74a88b23 100644 --- a/core/switch/index.html +++ b/core/switch/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

    Switch

    Capture boolean 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

    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() {
@@ -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 a2a18238b6f..1512dbd7810 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' },
@@ -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 04125c63c87..b358f759f32 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';
 
@@ -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 c0d62b69c18..99f5ae7ac7f 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.

    @@ -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 c0786c60f4c..f6f3d83e6ee 100644 --- a/core/text-input/index.html +++ b/core/text-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

    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';
 
@@ -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 d4a3309342d..f4b40a0b2fb 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 2008939a572..f745139e5c5 100644 --- a/core/textarea/index.html +++ b/core/textarea/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

    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';
 
@@ -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 e3f085e7929..92b9d47d252 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 f6db78b2a1e..e6251f6540b 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';
 
@@ -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 c106cecf8f4..f187b6df6c5 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 e542dd43f23..e9cd85cf42c 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 a7d86925bb5..af3c2a6156d 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 e34365bb073..0f729c5a059 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 79da5cd29cb..e6a7729e6ba 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 23979b3555e..368f7facd44 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 9938e221467..360353c2af5 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
    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';
+
    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 964ddecd38e..cfceff53b4b 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 (
@@ -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 4275df30641..25141bc70a7 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 (
@@ -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 54eb0b6340d..cc2288f614d 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() {
@@ -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
    February 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 15025abc743..7dd80da6812 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

    @@ -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 90d17be96c9..9131289a572 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:

    \ 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 2864c3d078f..f0ec2f01063 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 e215b1dffea..4719b565575 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 (
@@ -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 c037e6b5739..6fbd6c6939e 100644 --- a/dates/month-picker/index.html +++ b/dates/month-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

    MonthPicker

    Inline month, multiple months and months 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

    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';
 
@@ -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 949c82dd3aa..7a10b2f41aa 100644 --- a/dates/time-input/index.html +++ b/dates/time-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

    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';
 
@@ -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 4a36e481218..9c73a3de5e8 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 (
@@ -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 f8d65bce8b8..8d2bea78166 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 3aefe058816..b5db2f61290 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 3526b7267e0..a8128130201 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 3354051c043..33dc0355ca4 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 6db62a01c88..d5882141f11 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:

    @@ -21,7 +21,7 @@ function Demo() { const form = useForm({ initialValues: { name: '', accepted: false }, - validationRules: { + validate: { name: (value) => value.trim().length > 2, }, }); @@ -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 018f3e93b2b..f70b3363294 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';
@@ -133,7 +133,7 @@
     {
       "name": "",
       "active": false,
-      "key": "mantine-qy8at6jnp"
+      "key": "mantine-omxdq4txu"
     }
   ]
 }
    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 672d445b17f..694568d7e79 100644 --- a/form/recipes/index.html +++ b/form/recipes/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

    Recipes

    use-form examples

    Docs

    Edit this page

    Package

    @mantine/form

    Set initial values with async request

    +
    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 fc3207c2bb7..f14209e44d5 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 1f7e50e8be5..842bc54f10c 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 f6ec7ac4a8a..e90adc381ed 100644 --- a/form/use-form/index.html +++ b/form/use-form/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-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

    @@ -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 a5b6ea52072..4f9aa2cea8b 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';
@@ -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 c70d6cfce13..0b156e0f67a 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 bc761e2595c..bce596f51fa 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 aed6459111d..7ce61509fa0 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. @@ -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 af37f8b70b4..f6ca71012c8 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 cad011173d7..ccbbc7d8205 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 09b16be6bb7..752e1afe382 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 @@ -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 5e1c4e351dd..6af568870f5 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 00c7f9f5fdc..da924a7dc64 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 a89dc531d18..ae064dfe80a 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 f24794ef915..2f5882be7a0 100644 --- a/guides/next/index.html +++ b/guides/next/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 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 @@ -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 d7a6537e3a1..91e309f6ea9 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 a7f83251def..07e28c53fd4 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 @@ -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 51db4ce6cf3..575c26831a9 100644 --- a/guides/remix/index.html +++ b/guides/remix/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 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:

    @@ -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 c55c76d8853..624f65773e7 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 ae006a2821e..cf2ed0cd864 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 abb4f316344..04b846ef65f 100644 --- a/guides/vite/index.html +++ b/guides/vite/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 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:

    @@ -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 34c9257acc0..5ebfc49ab6c 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 274a2b7af47..560273730ac 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 77b0b241b36..e062def1ad6 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 a39aedc70a8..55a08c5d3cf 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-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 +): 'dark' | 'light';

    Previous

    use-click-outside

    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-counter/index.html b/hooks/use-counter/index.html index a88dc6b0fdf..ae49bdd08ff 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

    useElementSize

    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

    useElementSize

    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 103377e2a4d..15c1d218bf0 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 a1fdac60fcf..88c601b9063 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 390cced419e..f95abc4c9af 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 58a49b7546f..f7614b8bbcd 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 83875e7192f..b8b40e08a94 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 5ec26061ac2..7f5b687ca2f 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 13d0a122990..227cd640cde 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

    useElementSize

    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

    useElementSize

    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-window-scroll

    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-scroll

    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/hooks/use-event-listener/index.html b/hooks/use-event-listener/index.html index a0c2091b9f0..0355086cc14 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-color-scheme

    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-color-scheme

    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 2b7673bf3fb..05959e58444 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 3014fe03fbc..f9b5c1bf486 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 07535a00e1d..a8f55616d43 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 02f6df23dca..186b7a404d3 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 ac5da999308..3cfe2718175 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 47b4224e4f6..14c5e1caee7 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-tpd5fqq2t

    import { Button, Text, Group } from '@mantine/core';
+
    mantine-awx6xuo23
    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 4c4d6b05761..da882fdea78 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 62bebaf1550..feb8eba3c16 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 f86996110cc..67156be6272 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 1b5f7934438..2a39d8e47bd 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 f70e6be7c49..83b5cb0690a 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 584489ad97f..01d974049c0 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 ed7cd8491a3..75f00a3a54b 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 f0a2b4d8295..4ade09c00bd 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 d8ff5481b5f..19983d1fd73 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 d44dd99e9b4..ab507d2c44a 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 04faf253d59..bf7deeb45e7 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 61bcac2d591..e1d1200b471 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 d96f2b5ef4b..a0148f313ca 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 }]);
 
@@ -175,4 +175,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 b14a2bc2d59..7a620c81b6d 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';
@@ -26,11 +26,13 @@
 
    Example of a color scheme toggle button that uses use-local-storage hook
 to store current color scheme in the localStorage:
    
 
    import { IconMoonStars, IconSun } from '@tabler/icons-react';
-import { ActionIcon, ColorScheme } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 
 function ColorSchemeToggle() {
-  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
+  const [colorScheme, setColorScheme] = useLocalStorage<
+    'light' | 'dark'
+  >({
     key: 'color-scheme',
     defaultValue: 'light',
   });
@@ -132,4 +134,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 381e7d74fd4..d206719c452 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 1098e27eac7..92c0cd13663 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 3568c1a4522..90f90ed9603 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 f75141e7ded..3fad12fc05d 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 1f062062963..2e3ba2a4f2f 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 df7117fa425..33d372647e6 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 ae5d94aae44..daf0bf0042d 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 fab919a3ec7..d8569d6cf00 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 f9380eb4021..210e59867e2 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 e0237b6eaf1..8e9f1cb0622 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 29517ecb7db..a307f9a8699 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 e5257f0d688..bdaaa0804fa 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 900c9ff60c6..663ca122c80 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 8c0c2310c38..0c16be7411f 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 0577c21394e..ac408913988 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 78fbf83bda4..36f5e150775 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 17b99d18411..739ae1af15a 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 385fbce4c2a..9b4c619042b 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 096fb19ef7f..7b306ee86a8 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 21d34d3be92..30842da4a6b 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 687321d0b76..1d750813164 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 eb812df805e..c5f444f1f69 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 d9d5c7d813f..c3add48818d 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 dda0fd655f3..9c32d5e7e38 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
    useElementSize
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow 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

    useElementSize

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow 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 c6d23a61839..b1898ef0c14 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 (
@@ -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 43db1268b14..ce771c4ae57 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 6b5244dd987..78822de9dca 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 13e8a67fce0..e69974f5814 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 eefd23ae1cd..ad6535f654b 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 b5250463b35..3defba24c6d 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 87134dd9937..fc9099cb245 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 beed2543f0c..6e519876691 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 a35dcdfdb7e..c0ae500229e 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 0ae4b453a9e..e69c3bf9d0b 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 0d0af061f00..dab1f597c6f 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,263 +1,263 @@ -https://mantine.dev2024-02-09T12:17:48.767Zdaily0.7 -https://mantine.dev/4042024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/about2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/app-shell2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/colors-generator2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/combobox2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/contribute2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/getting-started2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/overview2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/submit-template2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/templates-usage2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/7-0-02024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/7-1-02024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/7-2-02024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/7-3-02024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/7-4-02024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/7-5-02024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/all-releases2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/changelog/previous-versions2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/area-chart2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/bar-chart2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/donut-chart2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/getting-started2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/line-chart2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/pie-chart2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/charts/sparkline2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/accordion2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/action-icon2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/affix2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/alert2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/anchor2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/app-shell2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/aspect-ratio2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/autocomplete2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/avatar2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/background-image2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/badge2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/blockquote2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/box2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/breadcrumbs2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/burger2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/button2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/card2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/center2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/checkbox2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/chip2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/close-button2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/code2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/collapse2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/color-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/color-picker2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/color-swatch2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/combobox2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/container2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/copy-button2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/dialog2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/divider2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/drawer2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/fieldset2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/file-button2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/file-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/flex2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/focus-trap2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/grid2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/group2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/highlight2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/hover-card2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/image2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/indicator2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/json-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/kbd2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/list2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/loader2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/loading-overlay2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/mark2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/menu2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/modal2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/multi-select2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/native-select2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/nav-link2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/notification2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/number-formatter2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/number-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/overlay2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/pagination2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/paper2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/password-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/pill2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/pills-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/pin-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/popover2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/portal2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/progress2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/radio2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/rating2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/ring-progress2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/scroll-area2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/segmented-control2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/select2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/simple-grid2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/skeleton2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/slider2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/space2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/spoiler2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/stack2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/stepper2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/switch2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/table2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/tabs2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/tags-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/text2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/text-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/textarea2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/theme-icon2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/timeline2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/title2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/tooltip2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/transition2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/typography-styles-provider2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/unstyled-button2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/core/visually-hidden2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/calendar2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/date-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/date-picker2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/date-picker-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/date-time-picker2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/dates-provider2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/getting-started2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/month-picker2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/month-picker-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/time-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/year-picker2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/dates/year-picker-input2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/actions2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/create-form-context2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/errors2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/get-input-props2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/nested2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/recipes2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/schema-validation2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/status2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/use-form2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/validation2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/validators2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/form/values2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/6x-to-7x2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/functions-reference2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/gatsby2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/icons2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/javascript2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/jest2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/next2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/polymorphic2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/redwood2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/remix2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/storybook2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/typescript2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/vite2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/guides/vitest2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-click-outside2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-clipboard2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-color-scheme2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-counter2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-debounced-state2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-debounced-value2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-did-update2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-disclosure2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-document-title2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-document-visibility2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-element-size2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-event-listener2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-eye-dropper2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-favicon2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-focus-return2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-focus-trap2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-focus-within2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-force-update2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-fullscreen2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-hash2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-headroom2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-hotkeys2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-hover2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-idle2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-in-viewport2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-id2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-input-state2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-intersection2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-interval2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-isomorphic-effect2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-list-state2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-local-storage2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-logger2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-media-query2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-merged-ref2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-mouse2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-move2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-network2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-os2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-page-leave2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-pagination2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-previous2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-queue2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-reduced-motion2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-resize-observer2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-scroll-into-view2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-set-state2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-shallow-effect2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-text-selection2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-timeout2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-toggle2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-uncontrolled2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-validated-state2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-viewport-size2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-window-event2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/hooks/use-window-scroll2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/code-highlight2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/carousel2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/modals2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/dropzone2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/notifications2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/nprogress2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/spotlight2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/others/tiptap2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/color-functions2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/css-files-list2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/css-modules2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/css-variables2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/css-variables-list2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/data-attributes2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/global-styles2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/mantine-styles2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/postcss-preset2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/rem2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/responsive2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/rtl2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/sass2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/style2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/style-props2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/styles-api2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/styles-overview2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/styles-performance2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/unstyled2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/vanilla-extract2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/styles/variants-sizes2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/color-schemes2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/colors2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/default-props2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/default-theme2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/mantine-provider2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/theme-object2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/theming/typography2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/carousel2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/code-highlight2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/dropzone2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/modals2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/notifications2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/nprogress2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/spotlight2024-02-09T12:17:48.768Zdaily0.7 -https://mantine.dev/x/tiptap2024-02-09T12:17:48.768Zdaily0.7 +https://mantine.dev2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/4042024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/about2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/app-shell2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/combobox2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/colors-generator2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/contribute2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/getting-started2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/overview2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/submit-template2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/templates-usage2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/7-0-02024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/7-3-02024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/7-2-02024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/7-1-02024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/7-5-02024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/7-4-02024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/all-releases2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/changelog/previous-versions2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/area-chart2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/bar-chart2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/donut-chart2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/getting-started2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/line-chart2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/pie-chart2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/charts/sparkline2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/calendar2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/date-input2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/date-picker2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/date-picker-input2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/date-time-picker2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/dates-provider2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/getting-started2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/month-picker2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/month-picker-input2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/time-input2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/year-picker2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/dates/year-picker-input2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/actions2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/create-form-context2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/errors2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/get-input-props2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/recipes2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/nested2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/schema-validation2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/status2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/use-form2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/validation2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/validators2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/accordion2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/form/values2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/action-icon2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/affix2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/alert2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/anchor2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/app-shell2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/aspect-ratio2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/autocomplete2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/avatar2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/background-image2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/badge2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/box2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/blockquote2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/breadcrumbs2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/burger2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/button2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/center2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/checkbox2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/card2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/chip2024-02-16T09:30:30.851Zdaily0.7 +https://mantine.dev/core/close-button2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/code2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/collapse2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/color-picker2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/color-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/color-swatch2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/combobox2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/container2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/copy-button2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/dialog2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/divider2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/drawer2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/fieldset2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/file-button2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/file-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/flex2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/focus-trap2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/group2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/grid2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/highlight2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/hover-card2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/image2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/indicator2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/json-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/kbd2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/list2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/loader2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/loading-overlay2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/mark2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/menu2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/modal2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/multi-select2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/native-select2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/nav-link2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/notification2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/number-formatter2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/number-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/overlay2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/pagination2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/paper2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/password-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/pill2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/pills-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/pin-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/popover2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/portal2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/rating2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/progress2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/radio2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/ring-progress2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/scroll-area2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/segmented-control2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/select2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/simple-grid2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/skeleton2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/slider2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/space2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/spoiler2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/stack2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/stepper2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/switch2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/table2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/tabs2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/tags-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/text2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/text-input2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/textarea2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/theme-icon2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/timeline2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/title2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/tooltip2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/transition2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/typography-styles-provider2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/unstyled-button2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/core/visually-hidden2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/6x-to-7x2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/gatsby2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/functions-reference2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/icons2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/javascript2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/jest2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/next2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/polymorphic2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/redwood2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/remix2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/storybook2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/typescript2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/vite2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/guides/vitest2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-click-outside2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-clipboard2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-color-scheme2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-counter2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-debounced-state2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-debounced-value2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-did-update2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-disclosure2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-document-title2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-document-visibility2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-element-size2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-event-listener2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-eye-dropper2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-favicon2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-focus-return2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-focus-trap2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-focus-within2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-force-update2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-fullscreen2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-hash2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-headroom2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-hotkeys2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-hover2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-id2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-idle2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-in-viewport2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-input-state2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-intersection2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-interval2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-isomorphic-effect2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-list-state2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-local-storage2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-logger2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-media-query2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-merged-ref2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-mouse2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-move2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-network2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-os2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-page-leave2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-pagination2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-previous2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-queue2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-reduced-motion2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-resize-observer2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-scroll-into-view2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-set-state2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-shallow-effect2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-text-selection2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-timeout2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-toggle2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-uncontrolled2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-validated-state2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-viewport-size2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-window-event2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/hooks/use-window-scroll2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/carousel2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/code-highlight2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/dropzone2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/modals2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/notifications2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/nprogress2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/spotlight2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/others/tiptap2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/color-functions2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/css-files-list2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/css-modules2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/css-variables2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/css-variables-list2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/global-styles2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/data-attributes2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/mantine-styles2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/postcss-preset2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/rem2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/responsive2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/rtl2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/sass2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/style2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/style-props2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/styles-api2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/styles-overview2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/styles-performance2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/unstyled2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/vanilla-extract2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/styles/variants-sizes2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/color-schemes2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/colors2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/default-props2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/default-theme2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/mantine-provider2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/theme-object2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/theming/typography2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/carousel2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/code-highlight2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/modals2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/dropzone2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/notifications2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/nprogress2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/spotlight2024-02-16T09:30:30.852Zdaily0.7 +https://mantine.dev/x/tiptap2024-02-16T09:30:30.852Zdaily0.7 \ No newline at end of file diff --git a/styles/color-functions/index.html b/styles/color-functions/index.html index 4b88214a2ae..99962f30aa2 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 862e24c5947..4aebe9f3a57 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';
    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';
    Burger
    import '@mantine/core/styles/Burger.css';
    Button
    import '@mantine/core/styles/Button.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';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    Image
    import '@mantine/core/styles/Image.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';
    Pill
    import '@mantine/core/styles/Pill.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';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Stepper
    import '@mantine/core/styles/Stepper.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';
    Burger
    import '@mantine/core/styles/Burger.css';
    Button
    import '@mantine/core/styles/Button.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';
    Container
    import '@mantine/core/styles/Container.css';
    Combobox
    import '@mantine/core/styles/Combobox.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';
    Group
    import '@mantine/core/styles/Group.css';
    Grid
    import '@mantine/core/styles/Grid.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';
    Pill
    import '@mantine/core/styles/Pill.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';
    Stack
    import '@mantine/core/styles/Stack.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.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';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.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 70dbf5c8a57..6eb6f18b594 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 742d77cefb0..532edafb2c2 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 ff2a6864792..62f3161a594 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 06c1219fce1..dfedc967d3b 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 f69cd65ddd4..d97a13d21e3 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 6e6da6a4cfd..bf611e4806d 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 8351b5f4a68..9d3b5ee89b0 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 6bd81637af3..2e89666e8a6 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 0a2a9921ca0..506961d0ae1 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 30d87f09a82..f9e4bcb5ebc 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 2163763a295..141d6b878d0 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 1de6b5aff08..7cc12a30ade 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 d0853707ab9..002c7c6c005 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 acafd3d7b34..f179d0a221b 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 ab9cb5120d1..d28f3483bc1 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 7b05fc9a3b5..0dd9f4ed993 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 41f95c7d895..df0be16ae08 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 d7ac718ae2d..11ddb5585c5 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 d5e90a3544e..64087d99da5 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 51547b916c9..587a77268ef 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 ce62dc6d55e..3fa31f2b30e 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 c3644c20db1..900024a21db 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 5ed78da07fc..1efef3482a5 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 fb97e3f24e9..38de767571f 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 262b33b135a..2f814fbae47 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 51d01b451aa..8d87d66a178 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 1395341933a..89cbf23063d 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:
@@ -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 1607b1ce668..507c2f843cc 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 9184f5d510b..8cad7a22971 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';
    @@ -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 8873414eab7..231c9bfd038 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 e016c0edd7c..45440fed6c1 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 2b6106d571a..828c30dc0c7 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 af11934e176..992c9eb6049 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';
    @@ -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 0820dc35155..2fc91dba655 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 25ad7adf0aa..d9bf1597039 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 2e77b540973..930c416f96d 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 @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